/*!
 * ACCSYS ERP — Material Dashboard PRO inspired theme
 * Loaded LAST in <head>, so it restyles the existing markup
 * (.left_col, .top_nav, .right_col, .x_panel, .metric_card, bootstrap 3 ...)
 * Every colour comes from CSS variables written by material-theme.js
 */
@media screen {

:root {
  --md-primary: #9c27b0; --md-primary-rgb: 156,39,176; --md-primary-light: #ab47bc; --md-primary-dark: #8e24aa;
  --md-on-primary: #fff;
  --md-grad: linear-gradient(60deg,#ab47bc,#8e24aa);
  --md-glow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.45);
  --md-glow-soft: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
  --md-sb-bg: #111; --md-sb-rgb: 17,17,17; --md-sb-image: none; --md-sb-overlay: .82;
  --md-sb-text: rgba(255,255,255,.92); --md-sb-text-dim: rgba(255,255,255,.58); --md-sb-hover: rgba(200,200,200,.2);
  --md-sb-border: rgba(255,255,255,.12); --md-sb-logo-bg: rgba(255,255,255,.96); --md-sb-footer: rgba(0,0,0,.28);
  --md-page-bg: #eee; --md-panel-bg: #fff; --md-panel-alt: #f6f6f6; --md-text: #3c4858; --md-text-muted: #7b8794;
  --md-border: rgba(0,0,0,.09); --md-row-hover: rgba(156,39,176,.07); --md-table-head: #fafafa; --md-input-line: #d2d2d2;
  --md-nav-bg: #fff; --md-nav-text: #3c4858;
  --md-radius: 6px; --md-radius-lg: 8px; --md-font: 'Roboto','Helvetica Neue',Arial,sans-serif; --md-fs: 14px;
  --md-sb-w: 260px; --md-gap: 10px;

  /* semantic palette (Material Dashboard PRO) */
  --md-info: #00bcd4;    --md-g-info: linear-gradient(60deg,#26c6da,#00acc1);    --md-s-info: rgba(0,188,212,.4);
  --md-success: #4caf50; --md-g-success: linear-gradient(60deg,#66bb6a,#43a047); --md-s-success: rgba(76,175,80,.4);
  --md-warning: #ff9800; --md-g-warning: linear-gradient(60deg,#ffa726,#fb8c00); --md-s-warning: rgba(255,152,0,.4);
  --md-danger: #f44336;  --md-g-danger: linear-gradient(60deg,#ef5350,#e53935);  --md-s-danger: rgba(244,67,54,.4);
  --md-rose: #e91e63;    --md-g-rose: linear-gradient(60deg,#ec407a,#d81b60);    --md-s-rose: rgba(233,30,99,.4);
  --md-dark: #3c4858;    --md-g-dark: linear-gradient(60deg,#4b5a6e,#2b3442);    --md-s-dark: rgba(60,72,88,.4);
}
html.md-sb-mini { --md-sb-w: 80px; }

/* ====================================================================
   0. Global (only on app pages — <body class="md-app">)
   ==================================================================== */
html { scroll-behavior: smooth; }
html body.md-app {
  --bg-body: var(--md-page-bg); --bg-panel: var(--md-panel-bg); --bg-sidebar: var(--md-sb-bg);
  --text-main: var(--md-text); --text-muted: var(--md-text-muted); --border-color: var(--md-border);
  --hover-row: var(--md-row-hover); --hover-text: var(--md-text); --table-header-bg: var(--md-table-head);
  --clock-text: var(--md-primary); --clock-date: var(--md-text-muted); --accsys-gold: var(--md-primary);
  background: var(--md-page-bg) !important; color: var(--md-text);
  font-family: var(--md-font) !important; font-size: var(--md-fs) !important; line-height: 1.5;
  -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease;
}
html body.md-app.dark-mode-active { --bg-body: var(--md-page-bg); --bg-panel: var(--md-panel-bg); --bg-sidebar: var(--md-sb-bg);
  --text-main: var(--md-text); --text-muted: var(--md-text-muted); --border-color: var(--md-border);
  --hover-row: var(--md-row-hover); --hover-text: var(--md-text); --table-header-bg: var(--md-table-head); }
html body.md-app h1, html body.md-app h2, html body.md-app h3, html body.md-app h4, html body.md-app h5, html body.md-app h6 { font-family: var(--md-font); }
html body.md-app a { color: var(--md-primary); }
html body.md-app a:hover, html body.md-app a:focus { color: var(--md-primary-dark); }
html body.md-app ::selection { background: rgba(var(--md-primary-rgb), .28); }
html body.md-app .text-primary { color: var(--md-primary) !important; }
html body.md-app .text-muted { color: var(--md-text-muted) !important; }
html body.md-app .text-info { color: var(--md-info) !important; }
html body.md-app .text-success { color: var(--md-success) !important; }
html body.md-app .text-warning { color: var(--md-warning) !important; }
html body.md-app .text-danger { color: var(--md-danger) !important; }
html body.md-app hr { border-top-color: var(--md-border); }
html body.md-app small, html body.md-app .small { font-size: 85%; }

/* thin scrollbars */
html body.md-app *::-webkit-scrollbar { width: 8px; height: 8px; }
html body.md-app *::-webkit-scrollbar-thumb { background: rgba(var(--md-primary-rgb), .35); border-radius: 8px; }
html body.md-app *::-webkit-scrollbar-thumb:hover { background: rgba(var(--md-primary-rgb), .6); }
html body.md-app *::-webkit-scrollbar-track { background: transparent; }

/* ====================================================================
   1. Sidebar  (floating card, image + colour overlay, active gradient)
   ==================================================================== */
html body.md-app .left_col {
  position: fixed !important; top: var(--md-gap) !important; bottom: var(--md-gap) !important; left: var(--md-gap) !important;
  height: auto !important; width: var(--md-sb-w) !important; max-width: calc(100vw - 20px);
  padding: 0 !important; display: flex !important; flex-direction: column; overflow: hidden !important;
  background: var(--md-sb-bg) !important; color: var(--md-sb-text);
  border-radius: var(--md-radius) !important; z-index: 1060 !important;
  box-shadow: 0 16px 38px -12px rgba(0,0,0,.56), 0 4px 25px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2) !important;
  transition: width .3s cubic-bezier(.4,0,.2,1), left .3s cubic-bezier(.4,0,.2,1), transform .3s ease !important;
}
html body.md-app .left_col::before, html body.md-app .left_col::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
html body.md-app .left_col::before { background-image: var(--md-sb-image); background-size: cover; background-position: center; }
html body.md-app .left_col::after { background: var(--md-sb-bg); opacity: var(--md-sb-overlay); }
html body.md-app .left_col > * { position: relative; z-index: 2; }
html body.md-app .left_col, html body.md-app .left_col *:not(i):not([class*="fa-"]) { font-family: var(--md-font) !important; }

/* logo */
html body.md-app .sidebar-menu-wrapper { margin-top: 0 !important; }
html body.md-app .brand_area { position: relative !important; top: auto !important; left: auto !important; z-index: 2 !important; width: 100% !important; height: auto !important; background: transparent !important; padding: 16px 16px 10px !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-bottom: 0; }
html body.md-app .logo_box {
  background: var(--md-sb-logo-bg) !important; border: 0 !important; border-radius: var(--md-radius) !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important; height: auto !important; min-height: 64px; max-height: 110px; padding: 8px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.18); transition: all .3s ease;
}
html body.md-app .logo_box img { max-height: 90px !important; }
html.md-sb-mini body.md-app .brand_area { padding: 14px 12px 8px !important; }
html.md-sb-mini body.md-app .logo_box { min-height: 48px; max-height: 52px; padding: 4px !important; }
html.md-sb-mini body.md-app .logo_box img { max-height: 40px !important; }

/* user block */
.md-sb-user { margin: 4px 14px 2px; border-bottom: 1px solid var(--md-sb-border); padding-bottom: 8px; flex-shrink: 0; }
.md-sb-user-toggle { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 3px; color: var(--md-sb-text) !important; text-decoration: none !important; position: relative; }
.md-sb-user-toggle:hover { background: var(--md-sb-hover); }
.md-avatar { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); letter-spacing: .5px; }
.md-sb-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.md-sb-user-info b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sb-user-info small { font-size: 11px; color: var(--md-sb-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-caret { margin-left: auto; font-size: 10px; opacity: .7; transition: transform .25s ease; }
.md-sb-user.open .md-caret { transform: rotate(180deg); }
.md-sb-user-menu { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.md-sb-user.open .md-sb-user-menu { max-height: 200px; }
.md-sb-user-menu a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-top: 2px; border-radius: 3px; font-size: 12.5px; color: var(--md-sb-text) !important; text-decoration: none !important; }
.md-sb-user-menu a i { width: 24px; text-align: center; opacity: .8; }
.md-sb-user-menu a:hover { background: var(--md-sb-hover); }

/* pages whose menu has no wrapper (users.php) */
html body.md-app .left_col > .sidebar-menu { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 8px 0 12px; }
html body.md-app > .mobile-hamburger-trigger { position: fixed; top: 18px; left: 20px; z-index: 1100; }
html body.md-app > .mobile-hamburger-trigger ~ .top_nav { padding-left: 56px !important; }

/* menu */
html body.md-app .sidebar-menu-wrapper { flex: 1 1 auto; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px 0 12px !important; }
html body.md-app .sidebar-menu ul { list-style: none; margin: 0; padding: 0; }
html body.md-app .sidebar-menu ul li { margin: 4px 14px !important; padding: 0 !important; }
html body.md-app .sidebar-menu ul li a {
  display: flex !important; align-items: center; gap: 12px; padding: 10px 14px !important; border-radius: 3px !important;
  color: var(--md-sb-text) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.35;
  text-decoration: none !important; background: transparent; position: relative; overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
html body.md-app .sidebar-menu ul li a i { width: 24px !important; min-width: 24px; text-align: center; font-size: 16px !important; color: inherit !important; opacity: .82; }
html body.md-app .sidebar-menu ul li a:hover { background: var(--md-sb-hover) !important; color: var(--md-sb-text) !important; }
html body.md-app .sidebar-menu ul li.active a {
  background: var(--md-grad) !important; color: var(--md-on-primary) !important; font-weight: 500 !important; box-shadow: var(--md-glow) !important;
}
html body.md-app .sidebar-menu ul li.active a i { opacity: 1; }
.md-nav-text { white-space: nowrap; transition: opacity .25s ease; overflow: hidden; text-overflow: ellipsis; }

html body.md-app .sidebar_footer {
  position: relative !important; width: 100% !important; margin: 0; padding: 11px 14px !important; flex-shrink: 0;
  background: var(--md-sb-footer) !important; border-top: 1px solid var(--md-sb-border) !important; text-align: center;
}
html body.md-app .sidebar_footer .f_title { color: var(--md-sb-text) !important; opacity: .85; letter-spacing: 1px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- mini sidebar (expands while hovering, like the PRO demo) ---- */
html.md-sb-mini body.md-app .left_col { overflow: hidden !important; }
html.md-sb-mini body.md-app .left_col .md-nav-text,
html.md-sb-mini body.md-app .left_col .md-sb-user-info,
html.md-sb-mini body.md-app .left_col .md-caret,
html.md-sb-mini body.md-app .left_col .sidebar_footer .f_title { opacity: 0; width: 0; display: none; }
html.md-sb-mini body.md-app .left_col .sidebar-menu ul li a { justify-content: center; padding: 10px 0 !important; }
html.md-sb-mini body.md-app .left_col .sidebar-menu ul li { margin: 4px 12px !important; }
html.md-sb-mini body.md-app .left_col .md-sb-user { margin: 4px 10px 2px; }
html.md-sb-mini body.md-app .left_col .md-sb-user-toggle, html.md-sb-mini body.md-app .left_col .md-sb-user-menu a { justify-content: center; }
html.md-sb-mini body.md-app .left_col:hover { width: 260px !important; }
html.md-sb-mini body.md-app .left_col:hover .md-nav-text,
html.md-sb-mini body.md-app .left_col:hover .md-sb-user-info,
html.md-sb-mini body.md-app .left_col:hover .md-caret,
html.md-sb-mini body.md-app .left_col:hover .sidebar_footer .f_title { opacity: 1; width: auto; display: block; }
html.md-sb-mini body.md-app .left_col:hover .md-sb-user-info { display: flex; }
html.md-sb-mini body.md-app .left_col:hover .sidebar-menu ul li a { justify-content: flex-start; padding: 10px 14px !important; }
html.md-sb-mini body.md-app .left_col:hover .md-sb-user-toggle { justify-content: flex-start; }
html.md-sb-mini body.md-app .left_col:hover .md-sb-user-menu a { justify-content: flex-start; }
html.md-sb-mini body.md-app .left_col:hover .logo_box { min-height: 64px; max-height: 110px; }
html.md-sb-mini body.md-app .left_col:hover .logo_box img { max-height: 90px !important; }

html body.md-app .sidebar-overlay { position: fixed; inset: 0; width: auto !important; height: auto !important; background: rgba(0,0,0,.5) !important; z-index: 1050 !important; backdrop-filter: blur(2px); display: none; }

/* ====================================================================
   2. Content shell + navbar
   ==================================================================== */
html body.md-app .right_col {
  margin-left: calc(var(--md-sb-w) + 2 * var(--md-gap)) !important; margin-right: 0 !important;
  padding: 26px 20px 28px 10px !important; background: transparent !important; min-height: calc(100vh - 70px);
  transition: margin-left .3s cubic-bezier(.4,0,.2,1) !important;
}
html:not(.md-noanim) body.md-app .right_col { animation: mdFadeUp .45s ease both; }
@keyframes mdFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

html body.md-app .top_nav {
  position: sticky !important; top: var(--md-gap) !important; z-index: 1040 !important;
  margin: var(--md-gap) 20px 0 calc(var(--md-sb-w) + 2 * var(--md-gap)) !important;
  width: auto !important; height: auto !important; min-height: 58px; padding: 8px 18px !important;
  background: var(--md-nav-bg) !important; color: var(--md-nav-text); border: 0 !important; border-radius: var(--md-radius) !important;
  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 12px -5px rgba(0,0,0,.08) !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease !important;
}
html:not(.md-navfixed) body.md-app .top_nav { position: relative !important; top: 0 !important; }
html[data-md-nav="transparent"] body.md-app .top_nav { background: transparent !important; box-shadow: none !important; }
html[data-md-nav="transparent"] body.md-app.md-scrolled .top_nav { background: var(--md-nav-bg-solid, var(--md-panel-bg)) !important; backdrop-filter: blur(10px); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14) !important; }
html.md-dark[data-md-nav="transparent"] body.md-app.md-scrolled .top_nav { background: var(--md-panel-bg) !important; }
html[data-md-nav="primary"] body.md-app .top_nav { box-shadow: var(--md-glow) !important; }
html body.md-app .top_nav .system_title_block { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 1; }
html body.md-app .top_nav .system_title { font-size: 18px !important; font-weight: 400 !important; color: var(--md-nav-text) !important; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
html body.md-app .top_nav .system_title::before { content: ""; }

/* hamburger / mini toggle */
html body.md-app .desktop-toggle-btn, html body.md-app .mobile-hamburger-trigger {
  width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: transparent !important; color: var(--md-nav-text) !important; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px !important; cursor: pointer; transition: background .2s ease; box-shadow: none !important;
}
html body.md-app .desktop-toggle-btn:hover, html body.md-app .mobile-hamburger-trigger:hover { background: rgba(var(--md-primary-rgb), .14) !important; }
html[data-md-nav="primary"] body.md-app .desktop-toggle-btn:hover, html[data-md-nav="primary"] body.md-app .mobile-hamburger-trigger:hover { background: rgba(255,255,255,.2) !important; }
html body.md-app .mobile-hamburger-trigger { display: none; }
html body.md-app .mobile-embedded-brand-block { display: none; }
html body.md-app .mobile-embedded-brand-block span { color: var(--md-nav-text) !important; font-weight: 500; }
html body.md-app .mobile-embedded-brand-block img { border: 0 !important; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* right side tools */
html body.md-app .top_nav_right_side_wrapper { display: flex !important; align-items: center; justify-content: flex-end; gap: 6px !important; flex-shrink: 0; }
html body.md-app .top_nav .user_avatar_btn {
  width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 50% !important; border: 0 !important;
  background: transparent !important; color: var(--md-nav-text) !important; font-size: 15px !important; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; position: relative; box-shadow: none !important; transition: background .2s ease;
}
html body.md-app .top_nav .user_avatar_btn:hover { background: rgba(var(--md-primary-rgb), .14) !important; color: var(--md-nav-text) !important; }
html[data-md-nav="primary"] body.md-app .top_nav .user_avatar_btn:hover { background: rgba(255,255,255,.2) !important; }
html body.md-app .top_nav .user_avatar_btn:not(:has(i)) { background: var(--md-grad) !important; color: var(--md-on-primary) !important; font-size: 12px !important; box-shadow: var(--md-glow) !important; }
html[data-md-nav="primary"] body.md-app .top_nav .user_avatar_btn:not(:has(i)) { background: rgba(255,255,255,.25) !important; box-shadow: none !important; color: inherit !important; }
html body.md-app .top_nav .notification_badge, html body.md-app .bulletin-badge-notif {
  background: var(--md-g-danger) !important; color: #fff !important; border: 0 !important; font-size: 10px !important; font-weight: 500;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px !important; top: 2px !important; right: 0 !important; line-height: 17px;
  box-shadow: 0 2px 6px var(--md-s-danger);
}
html body.md-app .btn-lang-toggle {
  background: transparent !important; color: var(--md-nav-text) !important; border: 0 !important; border-radius: 3px !important;
  padding: 7px 10px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .5px; box-shadow: none !important;
}
html body.md-app .btn-lang-toggle:hover { background: rgba(var(--md-primary-rgb), .14) !important; color: var(--md-primary) !important; }
html body.md-app .theme-switch-wrapper .mode-label-text { color: var(--md-nav-text) !important; opacity: .8; font-weight: 500; }

/* switch */
html body.md-app .theme-switch .slider { background: rgba(128,128,128,.38) !important; }
html body.md-app .theme-switch input:checked + .slider { background: var(--md-primary) !important; }
html body.md-app .theme-switch .slider:before { box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* dropdowns */
html body.md-app .dropdown-menu {
  border: 0 !important; border-radius: var(--md-radius) !important; padding: 8px 6px !important; margin-top: 8px !important;
  background: var(--md-panel-bg) !important; color: var(--md-text);
  box-shadow: 0 10px 30px -5px rgba(0,0,0,.28), 0 4px 12px 0 rgba(0,0,0,.12) !important; animation: mdDrop .22s ease both;
}
@keyframes mdDrop { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
html body.md-app .dropdown-menu > li > a { border-radius: 3px; color: var(--md-text) !important; padding: 8px 12px !important; font-size: 13px; transition: all .15s ease; }
html body.md-app .dropdown-menu > li > a:hover, html body.md-app .dropdown-menu > li > a:focus { background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow-soft); }
html body.md-app .dropdown-menu .divider { background-color: var(--md-border) !important; }
html body.md-app .dropdown-menu strong { color: var(--md-primary) !important; }

/* ====================================================================
   3. Cards / panels
   ==================================================================== */
html body.md-app .x_panel, html body.md-app .announcement_card, html body.md-app .bulletin-list-item {
  background: var(--md-panel-bg) !important; color: var(--md-text); border: 0 !important; border-radius: var(--md-radius) !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.14) !important; padding: 20px !important; margin: 24px 0 18px !important; position: relative;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
html body.md-app .x_panel:hover { border-top-color: transparent !important; box-shadow: 0 6px 18px -4px rgba(0,0,0,.18) !important; }
html body.md-app .x_panel .x_panel { box-shadow: none !important; margin: 10px 0 !important; background: var(--md-panel-alt) !important; }
html body.md-app .x_title, html body.md-app .x_panel_title {
  border-bottom: 0 !important; padding: 0 0 8px !important; margin: 0 0 12px !important; display: flex; align-items: center; gap: 12px;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--md-text) !important;
}
html body.md-app .x_title h3, html body.md-app .x_panel_title .panel-header-title-text { margin: 0 !important; font-size: 17px !important; font-weight: 400 !important; color: var(--md-text) !important; flex: 1 1 auto; line-height: 1.3; }
html body.md-app .x_content { color: var(--md-text); }

/* floating coloured card icon  (card-header-icon) */
html.md-card-icons body.md-app .x_panel:has(> .x_title > h3 > i:first-child),
html.md-card-icons body.md-app .x_panel:has(> .x_panel_title > i:first-child) { margin-top: 40px !important; }
html.md-card-icons body.md-app .x_title > h3 { display: flex; align-items: center; gap: 14px; }
html.md-card-icons body.md-app .x_title h3 > i:first-child,
html.md-card-icons body.md-app .x_panel > .x_panel_title:first-child > i:first-child {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--md-radius); display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 22px !important; color: var(--md-on-primary) !important; background: var(--md-grad); box-shadow: var(--md-glow);
  margin-top: -46px; margin-right: 0 !important; margin-bottom: -4px;
}
html.md-card-icons body.md-app .x_title h3 > i.text-info:first-child { background: var(--md-g-info); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info); color:#fff !important; }
html.md-card-icons body.md-app .x_title h3 > i.text-success:first-child { background: var(--md-g-success); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-success); color:#fff !important; }
html.md-card-icons body.md-app .x_title h3 > i.text-warning:first-child { background: var(--md-g-warning); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-warning); color:#fff !important; }
html.md-card-icons body.md-app .x_title h3 > i.text-danger:first-child { background: var(--md-g-danger); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-danger); color:#fff !important; }
html.md-card-icons body.md-app .x_title h3 > i.text-primary:first-child { background: var(--md-grad); color: var(--md-on-primary) !important; }

/* chart cards — coloured header with white chart (Material "card-chart") */
html body.md-app .md-card-chart { padding: 0 !important; overflow: visible; }
html body.md-app .md-card-chart .md-chart-head { margin: -20px 15px 0; border-radius: var(--md-radius); padding: 14px 10px 8px; position: relative; z-index: 3; box-shadow: var(--md-glow); background: var(--md-grad); }
html body.md-app .md-card-chart .md-chart-head.md-h-info { background: var(--md-g-info); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info); }
html body.md-app .md-card-chart .md-chart-head.md-h-success { background: var(--md-g-success); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-success); }
html body.md-app .md-card-chart .md-chart-head.md-h-warning { background: var(--md-g-warning); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-warning); }
html body.md-app .md-card-chart .md-chart-head.md-h-danger { background: var(--md-g-danger); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-danger); }
html body.md-app .md-card-chart .md-chart-body { padding: 18px 20px 6px; }
html body.md-app .md-card-chart .md-chart-body h4 { margin: 0 0 4px; font-size: 17px; font-weight: 400; color: var(--md-text); }
html body.md-app .md-card-chart .md-chart-body p { margin: 0; color: var(--md-text-muted); font-size: 13px; }
html body.md-app .md-card-chart .md-chart-foot { padding: 10px 20px 14px; border-top: 1px solid var(--md-border); margin-top: 10px; color: var(--md-text-muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }

/* statistic cards */
html body.md-app .metrics_row { gap: 22px !important; margin: 30px 0 14px !important; }
html body.md-app .metric_card {
  background: var(--md-panel-bg) !important; border: 0 !important; border-radius: var(--md-radius) !important; padding: 14px 18px 12px !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.14) !important; text-align: right; min-height: 104px; margin-top: 4px; overflow: visible; transition: transform .25s ease, box-shadow .25s ease !important;
}
html body.md-app .metric_card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -6px rgba(0,0,0,.22) !important; border-bottom-color: transparent !important; }
html body.md-app .metric_card .icon_box {
  position: absolute !important; top: -20px !important; left: 15px !important; right: auto !important; width: 60px; height: 60px; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; font-size: 24px !important; color: #fff !important; border-radius: var(--md-radius) !important;
  background: var(--md-grad) !important; box-shadow: var(--md-glow); transition: transform .25s ease;
}
html body.md-app .metric_card:hover .icon_box { transform: scale(1.06); }
html body.md-app .metric_card .count { font-size: 27px !important; font-weight: 300 !important; color: var(--md-text) !important; margin-top: 4px; line-height: 1.2; word-break: break-word; }
html body.md-app .metric_card .title { font-size: 13px !important; color: var(--md-text-muted) !important; font-weight: 400 !important; margin: 4px 0 8px !important; }
html body.md-app .metric_card.yellow_accent_block { background: var(--md-panel-bg) !important; }
html body.md-app .metric_card.yellow_accent_block .count { color: var(--md-text) !important; }
html body.md-app .metric_card.md-c-info .icon_box    { background: var(--md-g-info) !important;    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info); }
html body.md-app .metric_card.md-c-success .icon_box { background: var(--md-g-success) !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-success); }
html body.md-app .metric_card.md-c-warning .icon_box { background: var(--md-g-warning) !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-warning); }
html body.md-app .metric_card.md-c-danger .icon_box  { background: var(--md-g-danger) !important;  box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-danger); }
html body.md-app .metric_card .md-stat-foot { border-top: 1px solid var(--md-border); padding-top: 8px; margin-top: 6px; font-size: 12px; color: var(--md-text-muted); text-align: left; display: flex; align-items: center; gap: 6px; }

/* welcome / bulletin / glow cards */
html body.md-app .welcome-user-banner, html body.md-app .announcement-bulletin-card-btn {
  background: var(--md-panel-bg) !important; border: 0 !important; border-left: 0 !important; border-radius: var(--md-radius) !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.14) !important; padding: 18px 20px !important; color: var(--md-text);
}
html body.md-app .welcome-user-banner .welcome-icon, html body.md-app .announcement-bulletin-card-btn .bulletin-icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--md-radius); display: inline-flex; align-items: center; justify-content: center; font-size: 22px !important; color: #fff !important;
  background: var(--md-grad); box-shadow: var(--md-glow);
}
html body.md-app .announcement-bulletin-card-btn .bulletin-icon { background: var(--md-g-info); box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info); }
html body.md-app .announcement-bulletin-card-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(0,0,0,.22) !important; }
html body.md-app .welcome-user-banner h2, html body.md-app .announcement-bulletin-card-btn h2 { font-weight: 400 !important; font-size: 17px !important; color: var(--md-text) !important; }
html body.md-app .welcome-embedded-clock { border-left-color: var(--md-border) !important; }
html body.md-app .digital-clock-time { color: var(--md-primary) !important; }
html body.md-app .glow-purple-card, html body.md-app .glow-cyan-card { border-radius: var(--md-radius) !important; color: #fff !important; }
html body.md-app .glow-purple-card { background: var(--md-grad) !important; box-shadow: var(--md-glow) !important; }
html body.md-app .glow-cyan-card { background: var(--md-g-info) !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info) !important; }

/* ====================================================================
   4. Buttons  (raised gradient + coloured glow, uppercase)
   ==================================================================== */
html body.md-app .btn, html body.md-app .btn-premium-action, html body.md-app .book-btn, html body.md-app .btn-mlist-view, html body.md-app .step_btn, html body.md-app .label-selector-btn, html body.md-app .nav-icon-link {
  border: 0 !important; border-radius: 3px !important; text-transform: uppercase; font-weight: 500 !important; letter-spacing: 0;
  box-shadow: 0 2px 2px 0 rgba(153,153,153,.14), 0 3px 1px -2px rgba(153,153,153,.2), 0 1px 5px 0 rgba(153,153,153,.12);
  transition: box-shadow .2s cubic-bezier(.4,0,1,1), background-color .2s, transform .2s !important; position: relative; overflow: hidden;
}
html body.md-app .btn { font-size: 12px; padding: 9px 20px; }
html body.md-app .btn.btn-sm { padding: 7px 14px; font-size: 11px; }
html body.md-app .btn.btn-xs { padding: 4px 10px; font-size: 10px; }
html body.md-app .btn.btn-lg { padding: 13px 34px; font-size: 14px; }
html body.md-app .btn:hover:not(:disabled), html body.md-app .btn-premium-action:hover, html body.md-app .book-btn:hover { transform: translateY(-1px); }
html body.md-app .btn:focus, html body.md-app .btn:active:focus { outline: 0 !important; }

/* default (grey) */
html body.md-app .btn-default, html body.md-app .book-btn.btn-default, html body.md-app .step_btn, html body.md-app .label-selector-btn, html body.md-app .nav-icon-link {
  background: var(--md-panel-bg) !important; color: var(--md-text) !important;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.1) !important;
}
html.md-dark body.md-app .btn-default, html.md-dark body.md-app .book-btn.btn-default, html.md-dark body.md-app .step_btn, html.md-dark body.md-app .label-selector-btn { background: rgba(255,255,255,.08) !important; color: var(--md-text) !important; }
html body.md-app .btn-default:hover, html body.md-app .btn-default:focus, html body.md-app .step_btn:hover, html body.md-app .label-selector-btn:hover { background: rgba(var(--md-primary-rgb), .12) !important; color: var(--md-primary) !important; }
html body.md-app .step_btn.active, html body.md-app .label-selector-btn.active, html body.md-app .step_btn:hover.active { background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow) !important; }

/* primary + brand ("gold") buttons */
html body.md-app .btn-primary, html body.md-app .btn-gold-primary, html body.md-app .book-btn.btn-primary, html body.md-app .btn-mlist-view, html body.md-app .btn-premium-action.btn-primary {
  background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow-soft), 0 6px 14px -6px rgba(var(--md-primary-rgb), .6) !important;
}
html body.md-app .btn-primary:hover, html body.md-app .btn-gold-primary:hover, html body.md-app .btn-mlist-view:hover, html body.md-app .book-btn.btn-primary:hover { box-shadow: var(--md-glow) !important; filter: brightness(1.04); color: var(--md-on-primary) !important; }
/* dark ("carbon") buttons */
html body.md-app .btn-carbon-dark { background: var(--md-g-dark) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-dark) !important; }
html body.md-app .btn-success { background: var(--md-g-success) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-success) !important; }
html body.md-app .btn-info, html body.md-app .btn-cyan-secondary, html body.md-app .btn-bir { background: var(--md-g-info) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-info) !important; }
html body.md-app .btn-warning { background: var(--md-g-warning) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-warning) !important; }
html body.md-app .btn-danger, html body.md-app .btn-rose-pdf { background: var(--md-g-danger) !important; color: #fff !important; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px var(--md-s-danger) !important; }
/* old inline-dark / gold action buttons => theme primary */
html body.md-app .btn[style*="#111119" i]:not(.btn-default):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning),
html body.md-app .btn[style*="#111116" i]:not(.btn-default):not(.btn-danger):not(.btn-success):not(.btn-info):not(.btn-warning) {
  background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow-soft), 0 6px 14px -6px rgba(var(--md-primary-rgb), .6) !important;
}
html body.md-app .btn-link { background: transparent !important; box-shadow: none !important; color: var(--md-primary) !important; }
html body.md-app .btn:disabled, html body.md-app .btn.disabled { opacity: .55; box-shadow: none !important; }
html.md-flat-btn body.md-app .btn-primary, html.md-flat-btn body.md-app .btn-gold-primary { background: var(--md-primary) !important; }
html.md-flat-btn body.md-app .btn { box-shadow: 0 1px 3px rgba(0,0,0,.18) !important; }

/* ripple */
.md-ripple-host { overflow: hidden !important; }
.md-ripple-fx { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: mdRipple .6s ease-out; pointer-events: none; z-index: 5; }
@keyframes mdRipple { to { transform: scale(1); opacity: 0; } }

/* badges / labels */
html body.md-app .label, html body.md-app .badge, html body.md-app .badge-pill, html body.md-app .badge_status {
  border-radius: 12px !important; padding: .35em .85em !important; font-weight: 500 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .3px; color: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
html body.md-app .label-default, html body.md-app .badge { background: #999 !important; }
html body.md-app .label-primary { background: var(--md-grad) !important; color: var(--md-on-primary) !important; }
html body.md-app .label-success { background: var(--md-g-success) !important; }
html body.md-app .label-info { background: var(--md-g-info) !important; }
html body.md-app .label-warning { background: var(--md-g-warning) !important; }
html body.md-app .label-danger { background: var(--md-g-danger) !important; }
html body.md-app .badge_status { color: #fff !important; }

/* ====================================================================
   5. Forms  (underlined inputs with animated primary focus line)
   ==================================================================== */
html body.md-app .form-control, html body.md-app .form-control-custom, html body.md-app .masterlist-search-input, html body.md-app select, html body.md-app textarea,
html body.md-app input[type="text"], html body.md-app input[type="number"], html body.md-app input[type="email"], html body.md-app input[type="password"], html body.md-app input[type="date"], html body.md-app input[type="search"], html body.md-app input[type="tel"], html body.md-app input[type="time"], html body.md-app input[type="month"], html body.md-app input[type="url"] {
  background-color: transparent !important; color: var(--md-text) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background-image: linear-gradient(to top, var(--md-primary) 2px, rgba(var(--md-primary-rgb), 0) 2px), linear-gradient(to top, var(--md-input-line) 1px, transparent 1px) !important;
  background-size: 0 100%, 100% 100% !important; background-repeat: no-repeat !important; background-position: center bottom, center calc(100% - 0px) !important;
  transition: background-size .3s ease !important; padding-left: 4px !important; padding-right: 4px !important;
}
html body.md-app .form-control:focus, html body.md-app .form-control-custom:focus, html body.md-app select:focus, html body.md-app textarea:focus, html body.md-app input:focus {
  background-size: 100% 100%, 100% 100% !important; outline: 0 !important; box-shadow: none !important; border-color: transparent !important;
}
html body.md-app .form-control[disabled], html body.md-app .form-control[readonly], html body.md-app input[readonly], html body.md-app input:disabled { background-color: rgba(128,128,128,.07) !important; cursor: not-allowed; }
html body.md-app select, html body.md-app select.form-control, html body.md-app select.form-control-custom { padding-right: 18px !important; cursor: pointer; }
html body.md-app select option { background: var(--md-panel-bg); color: var(--md-text); }
html body.md-app ::placeholder { color: var(--md-text-muted) !important; opacity: .7; }
html body.md-app label, html body.md-app .control-label { color: var(--md-text-muted); font-weight: 500; font-size: 12px; }
html body.md-app input[type="checkbox"], html body.md-app input[type="radio"] { accent-color: var(--md-primary); }
html body.md-app .input-group-addon { background: transparent !important; border: 0 !important; color: var(--md-text-muted) !important; }
html body.md-app .grid-table input, html body.md-app .bir-label-table-form input, html body.md-app .bir-label-table-form textarea { border-radius: 0 !important; }
html body.md-app .dataTables_wrapper .dataTables_filter input, html body.md-app .dataTables_wrapper .dataTables_length select { background-color: transparent !important; }

/* ====================================================================
   6. Tables
   ==================================================================== */
html body.md-app .table, html body.md-app .table-custom, html body.md-app .table-spreadsheet { color: var(--md-text); background: transparent; margin-bottom: 8px; }
html body.md-app .table > thead > tr > th, html body.md-app .table-condensed thead th, html body.md-app .table-custom thead th, html body.md-app .table-spreadsheet thead th, html body.md-app .grid-table th {
  background: transparent !important; color: var(--md-primary) !important; font-size: 11.5px !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: .4px;
  border: 0 !important; border-bottom: 2px solid var(--md-border) !important; padding: 12px 10px !important; vertical-align: middle;
}
html body.md-app .table > tbody > tr > td, html body.md-app .table-custom tbody tr td, html body.md-app .table-spreadsheet tbody tr td {
  border: 0 !important; border-top: 1px solid var(--md-border) !important; padding: 10px !important; vertical-align: middle; color: var(--md-text);
}
html body.md-app .table > tbody > tr:hover > td, html body.md-app .table-custom tbody tr:hover td, html body.md-app .table-spreadsheet tbody tr:hover td { background: var(--md-row-hover) !important; color: var(--md-text) !important; }
html body.md-app .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
html body.md-app .table-bordered, html body.md-app .table-bordered > thead > tr > th, html body.md-app .table-bordered > tbody > tr > td { border-color: var(--md-border) !important; }
html body.md-app .table-responsive { border: 0 !important; }
html body.md-app .dataTables_wrapper { color: var(--md-text); }
html body.md-app .dataTables_wrapper .dataTables_info { color: var(--md-text-muted); font-size: 12px; }
html body.md-app .pagination > li > a, html body.md-app .pagination > li > span { background: transparent; border: 0; border-radius: 50% !important; margin: 0 2px; color: var(--md-text); min-width: 34px; height: 34px; padding: 0; line-height: 34px; text-align: center; font-weight: 500; font-size: 12px; }
html body.md-app .pagination > li > a:hover { background: rgba(var(--md-primary-rgb), .14); color: var(--md-primary); }
html body.md-app .pagination > .active > a, html body.md-app .pagination > .active > a:hover, html body.md-app .pagination > .active > span { background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow); }
html body.md-app .pagination > .disabled > a { opacity: .45; background: transparent; }

/* ====================================================================
   7. Tabs  (nav-pills inside a floating card)
   ==================================================================== */
html body.md-app .nav-tabs, html body.md-app .nav-tabs-custom {
  border: 0 !important; background: var(--md-panel-bg); border-radius: var(--md-radius); padding: 6px !important; margin: 0 0 18px !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.14); display: flex; flex-wrap: wrap; gap: 4px;
}
html body.md-app .nav-tabs > li, html body.md-app .nav-tabs-custom > li { float: none !important; margin: 0 !important; }
html body.md-app .nav-tabs > li > a, html body.md-app .nav-tabs-custom > li > a {
  border: 0 !important; border-radius: 3px !important; margin: 0 !important; padding: 10px 18px !important; background: transparent !important; color: var(--md-text-muted) !important;
  font-size: 12px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: .3px; position: relative; overflow: hidden; transition: all .2s ease;
}
html body.md-app .nav-tabs > li > a:hover, html body.md-app .nav-tabs-custom > li > a:hover { background: rgba(var(--md-primary-rgb), .1) !important; color: var(--md-primary) !important; }
html body.md-app .nav-tabs > li.active > a, html body.md-app .nav-tabs > li.active > a:hover, html body.md-app .nav-tabs > li.active > a:focus,
html body.md-app .nav-tabs-custom > li.active > a, html body.md-app .nav-tabs-custom > li.active > a:hover, html body.md-app .nav-tabs-custom > li.active > a:focus {
  background: var(--md-grad) !important; color: var(--md-on-primary) !important; border: 0 !important; box-shadow: var(--md-glow) !important;
}
html body.md-app .nav-pills > li > a { border-radius: 3px; }
html body.md-app .nav-pills > li.active > a, html body.md-app .nav-pills > li.active > a:hover { background: var(--md-grad) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-glow); }
html body.md-app .tab-content { background: transparent; }

/* ====================================================================
   8. Modals, alerts, SweetAlert2, progress
   ==================================================================== */
html body.md-app .modal-backdrop.in { opacity: .55; background: #0b0f1a; }
html body.md-app .modal-content, html body.md-app .modal-card-box {
  background: var(--md-panel-bg) !important; color: var(--md-text); border: 0 !important; border-radius: var(--md-radius-lg) !important;
  box-shadow: 0 27px 24px 0 rgba(0,0,0,.2), 0 40px 77px 0 rgba(0,0,0,.22) !important;
}
html body.md-app .modal.fade .modal-dialog { transition: transform .3s ease-out, opacity .3s; }
html body.md-app .modal-header { border-bottom: 0 !important; padding: 22px 24px 8px !important; }
html body.md-app .modal-title { font-weight: 400 !important; font-size: 19px; color: var(--md-text); }
html body.md-app .modal-title i { color: var(--md-primary) !important; }
html body.md-app .modal-body { color: var(--md-text); padding: 12px 24px !important; }
html body.md-app .modal-footer { border-top: 0 !important; padding: 8px 24px 20px !important; }
html body.md-app .close { color: var(--md-text) !important; opacity: .55; text-shadow: none; }
html body.md-app .close:hover { opacity: 1; }
html body.md-app .alert { border: 0; border-radius: var(--md-radius); box-shadow: 0 4px 20px 0 rgba(0,0,0,.1); }
html body.md-app .alert-success { background: var(--md-g-success); color: #fff; }
html body.md-app .alert-info { background: var(--md-g-info); color: #fff; }
html body.md-app .alert-warning { background: var(--md-g-warning); color: #fff; }
html body.md-app .alert-danger { background: var(--md-g-danger); color: #fff; }
html body.md-app .progress { background: rgba(128,128,128,.2); border-radius: 3px; box-shadow: none; }
html body.md-app .progress-bar { background: var(--md-grad); box-shadow: none; }

html body .swal2-popup { border-radius: var(--md-radius-lg) !important; font-family: var(--md-font) !important; box-shadow: 0 27px 24px 0 rgba(0,0,0,.2), 0 40px 77px 0 rgba(0,0,0,.22) !important; }
html body .swal2-confirm { background: var(--md-grad) !important; color: var(--md-on-primary) !important; border-radius: 3px !important; text-transform: uppercase; font-size: 12px !important; font-weight: 500 !important; box-shadow: var(--md-glow) !important; }
html body .swal2-cancel { border-radius: 3px !important; text-transform: uppercase; font-size: 12px !important; font-weight: 500 !important; }
html body .swal2-styled:focus { box-shadow: var(--md-glow) !important; }
html body .swal2-timer-progress-bar { background: var(--md-primary) !important; }
html body .swal2-input:focus, html body .swal2-textarea:focus { border-color: var(--md-primary) !important; box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .2) !important; }

/* generic placeholders / empty states / matrix helpers */
html body.md-app .empty-state-placeholder, html body.md-app .placeholder-panel { color: var(--md-text-muted); }
html body.md-app .empty-state-placeholder i, html body.md-app .placeholder-panel i { color: rgba(var(--md-primary-rgb), .6) !important; }
html body.md-app .matrix-table-container { border: 0 !important; border-radius: var(--md-radius) !important; box-shadow: 0 1px 4px 0 rgba(0,0,0,.14); overflow: hidden; }
html body.md-app .matrix-row { border-color: var(--md-border) !important; }
html body.md-app .matrix-cell-label { background: var(--md-panel-alt) !important; color: var(--md-text) !important; }
html body.md-app .client-row-item { border-radius: 3px; }
html body.md-app .client-row-item.active, html body.md-app .client-row-item:hover { background: rgba(var(--md-primary-rgb), .1) !important; border-color: var(--md-primary) !important; }
html body.md-app .announcement_card.unread_border { border-left: 4px solid var(--md-primary) !important; }
html body.md-app .bulletin-list-item.unread-notice { border-left: 4px solid var(--md-danger) !important; }
html body.md-app .workflow_steps_bar { gap: 8px; }
html body.md-app .badge_default { background: #999 !important; }
html body.md-app .badge_encoding { background: var(--md-g-info) !important; }
html body.md-app .badge_accounting { background: var(--md-g-warning) !important; }
html body.md-app .badge_completed { background: var(--md-g-success) !important; }
html body.md-app .label-yellow-header { background: var(--md-grad) !important; color: var(--md-on-primary) !important; }

/* ====================================================================
   9. Floating settings plugin ("fixed-plugin") + toast
   ==================================================================== */
.md-fixed-plugin { position: fixed; right: 0; top: 130px; z-index: 1200; font-family: var(--md-font); }
.md-fp-toggle {
  position: absolute; right: 0; top: 0; width: 46px; height: 46px; border: 0; border-radius: 6px 0 0 6px; cursor: pointer; font-size: 20px;
  background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); transition: width .2s ease, background .2s;
}
.md-fp-toggle:hover { width: 54px; }
.md-fp-toggle .fa-spin-slow { animation: fa-spin 6s linear infinite; }
.md-fp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: -1; backdrop-filter: blur(1px); }
.md-fixed-plugin.open .md-fp-backdrop { opacity: 1; pointer-events: auto; }
.md-fp-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 94vw; background: var(--md-panel-bg); color: var(--md-text);
  transform: translateX(105%); transition: transform .35s cubic-bezier(.4,0,.2,1); z-index: 2; display: flex; flex-direction: column;
  box-shadow: -10px 0 40px -10px rgba(0,0,0,.4);
}
.md-fixed-plugin.open .md-fp-panel { transform: none; }
.md-fp-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--md-grad); color: var(--md-on-primary); }
.md-fp-head b { display: block; font-size: 16px; font-weight: 500; }
.md-fp-head small { opacity: .85; font-size: 12px; }
.md-fp-close { background: rgba(255,255,255,.2); border: 0; color: inherit; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.md-fp-body { overflow-y: auto; padding: 4px 18px 22px; flex: 1; }
.md-fixed-plugin.open { z-index: 1300; }
.md-fixed-plugin.open .md-fp-toggle { display: none; }

.md-controls .md-sec { padding: 14px 0 12px; border-bottom: 1px solid var(--md-border); }
.md-controls h6 { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--md-text); }
.md-controls h6 small { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--md-text-muted); margin-left: 4px; }
.md-controls h6.md-sub { margin-top: 14px; color: var(--md-text-muted); }
.md-dots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-dots-in { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.md-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(128,128,128,.35); transition: transform .15s ease, border-color .15s ease; }
.md-dot:hover { transform: scale(1.18); }
.md-dot.active { border-color: var(--md-panel-bg); box-shadow: 0 0 0 2px var(--md-primary), 0 3px 8px rgba(0,0,0,.3); transform: scale(1.1); }
.md-custom { position: relative; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); cursor: pointer; margin: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(128,128,128,.35); }
.md-custom i { color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
.md-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0 !important; border: 0 !important; }
.md-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.md-img { width: 44px; height: 62px; border-radius: 4px; border: 2px solid transparent; cursor: pointer; background-color: #888; display: inline-flex; align-items: center; justify-content: center; color: #fff; padding: 0; box-shadow: 0 0 0 1px rgba(128,128,128,.35); transition: transform .15s; }
.md-img:hover { transform: translateY(-2px); }
.md-img.active { box-shadow: 0 0 0 2px var(--md-primary), 0 4px 10px rgba(0,0,0,.3); }
.md-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; font-size: 13px; }
.md-row-sw span i { width: 20px; color: var(--md-primary); }
.md-row input[type="range"] { flex: 1; max-width: 160px; accent-color: var(--md-primary); padding: 0 !important; background-image: none !important; height: 18px; }
.md-controls .md-text, .md-controls .md-select { width: 100%; font-size: 12px; }
.md-controls .md-select { max-width: 170px; }
.md-switch { position: relative; width: 38px; height: 20px; margin: 0; flex-shrink: 0; }
.md-switch input { display: none !important; }
.md-switch i { position: absolute; inset: 0; border-radius: 20px; background: rgba(128,128,128,.4); cursor: pointer; transition: background .25s; }
.md-switch i::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .25s; }
.md-switch input:checked + i { background: var(--md-primary); }
.md-switch input:checked + i::before { transform: translateX(18px); }
.md-seg { display: flex; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--md-border); }
.md-seg button { flex: 1; border: 0; background: transparent; color: var(--md-text); padding: 8px 6px; font-size: 11.5px; font-weight: 500; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.md-seg button.active { background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); }
.md-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.md-preset { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: center; color: var(--md-text); min-width: 0; }
.md-preset em { display: block; font-style: normal; font-size: 10.5px; margin-top: 4px; line-height: 1.15; color: var(--md-text-muted); }
.md-pv { display: flex; height: 52px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(128,128,128,.35); transition: all .2s; }
.md-preset:hover .md-pv { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.md-preset.active .md-pv { box-shadow: 0 0 0 2px var(--md-primary), 0 6px 14px rgba(0,0,0,.25); }
.md-preset.active em { color: var(--md-primary); font-weight: 600; }
.md-pv-sb { width: 24%; }
.md-pv-body { flex: 1; padding: 6px 5px; display: flex; flex-direction: column; gap: 4px; }
.md-pv-body i { display: block; height: 10px; border-radius: 2px; width: 70%; }
.md-pv-body b { display: block; height: 6px; border-radius: 2px; background: rgba(0,0,0,.12); }
.md-actions { display: grid; gap: 8px; border-bottom: 0 !important; }
.md-btn { border: 0; border-radius: 3px; padding: 10px 12px; font-size: 11.5px; font-weight: 500; text-transform: uppercase; cursor: pointer; background: rgba(128,128,128,.14); color: var(--md-text); display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .2s; position: relative; overflow: hidden; }
.md-btn:hover { background: rgba(var(--md-primary-rgb), .16); color: var(--md-primary); }
.md-btn-primary { background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); }
.md-btn-primary:hover { background: var(--md-grad); color: var(--md-on-primary); filter: brightness(1.05); }
.md-btn-ghost { background: transparent; box-shadow: 0 0 0 1px var(--md-border); }

.md-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); opacity: 0; z-index: 99999; padding: 12px 22px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: all .3s ease; font-family: var(--md-font); }
.md-toast.show { opacity: 1; transform: translate(-50%, 0); }
.md-toast-ok { background: var(--md-g-success); } .md-toast-err { background: var(--md-g-danger); }

.md-totop { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; z-index: 1150; background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all .3s ease; }
.md-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.md-totop:hover { filter: brightness(1.08); }

/* settings tab layout */
.md-theme-tab { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 22px; align-items: start; }
.md-theme-tab .md-controls { background: var(--md-panel-bg); border-radius: var(--md-radius); box-shadow: 0 1px 4px 0 rgba(0,0,0,.14); padding: 4px 20px 18px; }
.md-preview { position: sticky; top: 96px; }
.md-preview-win { border-radius: var(--md-radius); overflow: hidden; box-shadow: 0 1px 4px 0 rgba(0,0,0,.14); background: var(--md-page-bg); display: flex; min-height: 300px; }
.md-preview-sb { width: 28%; padding: 12px 10px; color: var(--md-sb-text); background: var(--md-sb-bg); position: relative; }
.md-preview-sb::before { content: ""; position: absolute; inset: 0; background-image: var(--md-sb-image); background-size: cover; }
.md-preview-sb::after { content: ""; position: absolute; inset: 0; background: var(--md-sb-bg); opacity: var(--md-sb-overlay); }
.md-preview-sb > * { position: relative; z-index: 2; }
.md-preview-sb .pv-logo { height: 30px; background: var(--md-sb-logo-bg); border-radius: 4px; margin-bottom: 14px; }
.md-preview-sb .pv-i { padding: 7px 8px; border-radius: 3px; font-size: 11px; margin-bottom: 5px; display: flex; gap: 7px; align-items: center; }
.md-preview-sb .pv-i.on { background: var(--md-grad); color: var(--md-on-primary); box-shadow: var(--md-glow); }
.md-preview-main { flex: 1; padding: 10px 14px; }
.md-preview-main .pv-nav { background: var(--md-nav-bg); color: var(--md-nav-text); border-radius: var(--md-radius); padding: 9px 12px; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12); margin-bottom: 22px; }
.md-preview-main .pv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.md-preview-main .pv-card { background: var(--md-panel-bg); border-radius: var(--md-radius); padding: 22px 8px 8px; position: relative; text-align: right; font-size: 15px; color: var(--md-text); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.md-preview-main .pv-card i { position: absolute; left: 8px; top: -12px; width: 32px; height: 32px; border-radius: var(--md-radius); background: var(--md-grad); color: var(--md-on-primary); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: var(--md-glow); }
.md-preview-main .pv-card:nth-child(2) i { background: var(--md-g-success); }
.md-preview-main .pv-card:nth-child(3) i { background: var(--md-g-danger); }
.md-preview-main .pv-panel { background: var(--md-panel-bg); border-radius: var(--md-radius); padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.14); font-size: 12px; color: var(--md-text); }
.md-preview-main .pv-panel .pv-btns { margin-top: 10px; display: flex; gap: 8px; }
.md-preview-main .pv-panel .pv-btns span { padding: 6px 12px; border-radius: 3px; font-size: 10px; text-transform: uppercase; color: #fff; }

/* ====================================================================
   10. Responsive — off-canvas sidebar below 992px
   ==================================================================== */
@media (max-width: 991px) {
  html body.md-app .left_col { left: -330px !important; width: 270px !important; top: 0 !important; bottom: 0 !important; border-radius: 0 var(--md-radius) var(--md-radius) 0 !important; }
  html body.md-app.sidebar-open .left_col, html body.md-app.sidebar-open .sidebar_footer { left: 0 !important; }
  html body.md-app.sidebar-open .sidebar-overlay { display: block !important; }
  html.md-sb-mini body.md-app .left_col .md-nav-text, html.md-sb-mini body.md-app .left_col .md-sb-user-info, html.md-sb-mini body.md-app .left_col .md-caret { opacity: 1; width: auto; display: block; }
  html.md-sb-mini body.md-app .left_col .md-sb-user-info { display: flex; }
  html.md-sb-mini body.md-app .left_col .sidebar-menu ul li a { justify-content: flex-start; padding: 10px 14px !important; }
  html.md-sb-mini body.md-app .left_col .sidebar_footer .f_title { opacity: 1; width: auto; display: block; }
  html body.md-app .top_nav { margin: 8px 10px 0 10px !important; padding: 6px 12px !important; top: 8px !important; position: sticky !important; left: auto !important; width: auto !important; height: auto !important; min-height: 54px; }
  html body.md-app .right_col { margin-left: 0 !important; padding: 22px 10px 20px !important; }
  html body.md-app .top_nav .system_title_block .desktop-toggle-btn { display: none !important; }
  html body.md-app .mobile-hamburger-trigger { display: inline-flex !important; }
  html body.md-app .mobile-embedded-brand-block { display: flex !important; }
  html body.md-app .top_nav .system_title_block .system_title { display: none !important; }
  html body.md-app .theme-switch-wrapper .mode-label-text span { display: none !important; }
  html body.md-app .metrics_row { grid-template-columns: repeat(2, 1fr) !important; row-gap: 30px !important; }
  html body.md-app .md-theme-tab { grid-template-columns: 1fr; }
  html body.md-app .md-preview { position: static; }
}
@media (max-width: 768px) {
  html body.md-app .metrics_row { grid-template-columns: 1fr !important; }
  html body.md-app .x_panel { padding: 16px 14px !important; }
  html body.md-app .modal-body { padding: 10px 16px !important; }
  html body.md-app .nav-tabs > li > a, html body.md-app .nav-tabs-custom > li > a { padding: 8px 12px !important; font-size: 11px !important; }
  .md-fixed-plugin { top: 100px; }
  .md-fp-toggle { width: 40px; height: 40px; font-size: 17px; }
}
@media (min-width: 992px) {
  html body.md-app.sidebar-open .sidebar-overlay { display: none !important; }
  /* a page-level "hidden sidebar" (legacy toggle) still works */
  html body.md-app.sidebar-hidden .left_col { left: -340px !important; }
  html body.md-app.sidebar-hidden .top_nav { margin-left: 20px !important; }
  html body.md-app.sidebar-hidden .right_col { margin-left: 10px !important; }
}

/* ====================================================================
   11. Compact density + misc
   ==================================================================== */
html.md-compact body.md-app .x_panel { padding: 14px !important; }
html.md-compact body.md-app .table > tbody > tr > td, html.md-compact body.md-app .table-custom tbody tr td, html.md-compact body.md-app .table-spreadsheet tbody tr td { padding: 6px 8px !important; }
html.md-compact body.md-app .btn { padding: 6px 14px; }
html.md-noanim body.md-app *, html.md-noanim body.md-app *::before, html.md-noanim body.md-app *::after { animation: none !important; transition: none !important; }


/* ====================================================================
   12. FIT-TO-SCREEN layer — fluid sizing for every monitor
   (1280 / 1366 / 1536 / 1920 / 2560 / 4K / tablet / phone)
   ==================================================================== */
:root { --md-sb-w: clamp(220px, 14vw, 290px); --md-fs: clamp(12.5px, 9.6px + .22vw, 17px); --md-field-h: 36px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html body.md-app { overflow-x: clip; max-width: 100vw; }
html.md-sb-mini body.md-app .left_col:hover { width: clamp(220px, 14vw, 290px) !important; }

/* nothing may push the page wider than the screen */
html body.md-app .right_col, html body.md-app .top_nav, html body.md-app .x_panel, html body.md-app .x_content,
html body.md-app .modal-body, html body.md-app .row > [class*="col-"], html body.md-app .metric_card,
html body.md-app .tab-content, html body.md-app .tab-pane, html body.md-app .md-card-chart { min-width: 0; max-width: 100%; }
html body.md-app .right_col { width: auto; }
html body.md-app .x_panel img, html body.md-app .modal-body img, html body.md-app .right_col video, html body.md-app .right_col canvas { max-width: 100%; }
html body.md-app .right_col pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
html body.md-app input, html body.md-app select, html body.md-app textarea, html body.md-app .form-control, html body.md-app .form-control-custom { max-width: 100%; box-sizing: border-box; }
html body.md-app .input-group { max-width: 100%; }

/* text that is too long wraps instead of spilling out of its box */
html body.md-app .x_panel, html body.md-app .modal-body, html body.md-app .announcement_card, html body.md-app .bulletin-list-item,
html body.md-app .welcome-user-banner, html body.md-app .x_title h3, html body.md-app .x_panel_title, html body.md-app .md-chart-body,
html body.md-app .metric_card .title, html body.md-app .alert, html body.md-app .modal-title, html body.md-app .dropdown-menu > li > a { overflow-wrap: break-word; word-wrap: break-word; }
html body.md-app .table td, html body.md-app .table th, html body.md-app .table-custom td, html body.md-app .table-custom th,
html body.md-app .table-spreadsheet td, html body.md-app .table-spreadsheet th { overflow-wrap: break-word; word-wrap: break-word; }
html body.md-app td.text-right, html body.md-app td.hr-num, html body.md-app th.text-right { white-space: nowrap; }
html body.md-app .table > thead > tr > th, html body.md-app .table-custom thead th, html body.md-app .table-spreadsheet thead th { white-space: normal; line-height: 1.3; }
html body.md-app .table, html body.md-app .table-custom, html body.md-app .table-spreadsheet { width: 100%; max-width: none; }
html body.md-app .table-responsive, html body.md-app .dataTables_wrapper, html body.md-app .trk-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body.md-app .md-table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
html body.md-app .md-table-scroll > table { margin-bottom: 0; }

/* consistent gutters: rows/columns line up on every page */
html body.md-app .right_col .row { margin-left: -8px; margin-right: -8px; }
html body.md-app .right_col .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
html body.md-app .form-group { margin-bottom: 12px; }
html body.md-app .form-group > label, html body.md-app label.control-label, html body.md-app .x_panel label { display: block; margin-bottom: 4px; max-width: 100%; line-height: 1.3; }
html body.md-app .x_panel label.radio-inline, html body.md-app .x_panel label.checkbox-inline, html body.md-app .x_panel .checkbox label, html body.md-app .x_panel .radio label, html body.md-app .md-switch { display: inline-block; }
/* equal height for inputs, selects and action buttons so rows sit on one line */
html body.md-app .form-control, html body.md-app .form-control-custom, html body.md-app select.form-control, html body.md-app input.form-control, html body.md-app .masterlist-search-input { height: var(--md-field-h); min-height: var(--md-field-h); line-height: 1.4; }
html body.md-app textarea.form-control, html body.md-app textarea { height: auto; min-height: calc(var(--md-field-h) * 2); }
html body.md-app .btn-premium-action, html body.md-app .btn:not(.btn-xs):not(.btn-sm):not(.btn-lg):not(.close) { min-height: var(--md-field-h); display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: normal; text-align: center; line-height: 1.25; }
html body.md-app .btn-sm { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
html body.md-app .btn-block, html body.md-app .btn[style*="width:100%"], html body.md-app .btn[style*="width: 100%"] { display: flex; }
html body.md-app .row > [class*="col-"] > .btn-premium-action[style*="100%"] { width: 100%; }
html body.md-app .x_panel_title, html body.md-app .x_title { flex-wrap: wrap; row-gap: 8px; }
html body.md-app .x_panel_title .panel-header-title-text, html body.md-app .x_title h3 { min-width: 0; }
html body.md-app .text-right > .btn, html body.md-app .text-right > .btn-premium-action { margin-bottom: 4px; }

/* cards / stat tiles / grids reflow by available width, not by fixed counts */
html body.md-app .metrics_row { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; gap: 26px 20px !important; }
html body.md-app .metric_card .count { font-size: clamp(20px, 1.2vw + 12px, 30px) !important; overflow-wrap: anywhere; word-break: normal; }
html body.md-app .metric_card { min-width: 0; }
html body.md-app .md-card-chart canvas { max-width: 100%; height: auto; }
html body.md-app .welcome-user-banner { flex-wrap: wrap; gap: 12px; }
html body.md-app .workflow_steps_bar, html body.md-app .step_bar { flex-wrap: wrap; }
html body.md-app .nav-tabs, html body.md-app .nav-tabs-custom { max-width: 100%; }
html body.md-app .nav-tabs > li > a, html body.md-app .nav-tabs-custom > li > a { white-space: normal; text-align: center; }

/* top bar never overflows */
html body.md-app .top_nav { flex-wrap: nowrap; min-width: 0; }
html body.md-app .top_nav .system_title_block { flex: 1 1 auto; overflow: hidden; }
html body.md-app .top_nav_right_side_wrapper { flex-wrap: nowrap; min-width: 0; }
html body.md-app .top_nav .hr-clock { white-space: nowrap; }
@media (max-width: 1280px) {
  html body.md-app .theme-switch-wrapper .mode-label-text span { display: none; }
  html body.md-app .top_nav .hr-clock { display: none; }
}

/* modals fit the viewport at any size */
html body.md-app .modal-dialog { max-width: calc(100vw - 20px); }
html body.md-app .modal-dialog:not(.modal-sm) { width: min(var(--md-modal-w, 600px), calc(100vw - 24px)); }
html body.md-app .modal-dialog.modal-lg { --md-modal-w: 900px; }
html body.md-app .modal-dialog.modal-sm { width: min(400px, calc(100vw - 24px)); }
html body.md-app .modal-content { max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
html body.md-app .modal-body { overflow-y: auto; overflow-x: auto; flex: 1 1 auto; min-height: 0; }
html body.md-app .modal-header, html body.md-app .modal-footer { flex: 0 0 auto; }
html body.md-app .modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
html body.md-app .modal-footer .btn + .btn { margin-left: 0; }
html body.md-app .modal-card-box { max-width: calc(100vw - 20px) !important; max-height: 92vh; overflow-y: auto; }
html body .swal2-popup { max-width: calc(100vw - 20px); }

/* body blur would trap fixed modals inside the (tall) page — never blur the body itself */
html body.md-app.my-swal-blur-class { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body.md-app .modal-backdrop.in { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* big / ultra-wide monitors: keep proportions, avoid tiny UI */
@media (min-width: 1921px) {
  html body.md-app .right_col { padding-left: 16px !important; padding-right: 28px !important; }
  html body.md-app .top_nav { margin-right: 28px !important; }
}
@media (min-width: 2560px) {
  html body.md-app .x_panel { padding: 26px !important; }
}
/* short laptop screens: give the sidebar menu more room */
@media (max-height: 720px) {
  html body.md-app .brand_area { padding: 10px 14px 6px !important; }
  html body.md-app .logo_box { min-height: 48px; max-height: 64px; }
  html body.md-app .logo_box img { max-height: 48px !important; }
  html body.md-app .sidebar-menu ul li { margin: 2px 12px !important; }
  html body.md-app .sidebar-menu ul li a { padding: 8px 12px !important; }
}
/* tablets / phones */
@media (max-width: 991px) {
  html body.md-app .modal-dialog:not(.modal-sm) { width: calc(100vw - 20px); margin: 10px auto; }
  html body.md-app .right_col .row { margin-left: -6px; margin-right: -6px; }
  html body.md-app .right_col .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
  html body.md-app .btn-premium-action, html body.md-app .btn { max-width: 100%; }
}
@media (max-width: 768px) {
  html body.md-app input, html body.md-app select, html body.md-app textarea, html body.md-app .form-control { font-size: 16px !important; }
  html body.md-app .x_panel_title .btn, html body.md-app .x_panel_title .btn-premium-action { flex: 1 1 auto; }
  html body.md-app .metric_card { min-height: 96px; }
  html body.md-app .top_nav .btn-lang-toggle span { display: none; }
}

} /* end @media screen */

/* the theme never touches print output */
@media print {
  .md-fixed-plugin, .md-toast, .md-sb-user { display: none !important; }
}