/*
 * Reference UI design system
 * Dense RTL enterprise dashboard inspired by the supplied visual reference.
 * Loaded last so existing PHP markup and application behavior remain intact.
 */
:root {
  --ref-app-bg: #f7f7fb;
  --ref-surface: #ffffff;
  --ref-surface-soft: #fbfbfe;
  --ref-surface-muted: #f6f6fb;
  --ref-sidebar: #fefeff;
  --ref-border: #e7e7f0;
  --ref-border-soft: #efeff5;
  --ref-text: #292640;
  --ref-text-2: #74778b;
  --ref-text-3: #a1a3b2;
  --ref-primary: #5568d8;
  --ref-primary-hover: #4659c8;
  --ref-primary-soft: #f0efff;
  --ref-purple: #7965e7;
  --ref-purple-soft: #f3efff;
  --ref-green: #44b966;
  --ref-green-soft: #eef9f1;
  --ref-orange: #f2a12d;
  --ref-orange-soft: #fff6e9;
  --ref-red: #ef5350;
  --ref-red-soft: #fff0f0;
  --ref-blue: #4f7edd;
  --ref-blue-soft: #eef4ff;
  --ref-cyan: #2aa9b5;
  --ref-cyan-soft: #ebf9fa;
  --ref-radius: 10px;
  --ref-radius-sm: 7px;
  --ref-radius-xs: 5px;
  --ref-shadow: 0 1px 2px rgba(32, 31, 57, .025), 0 5px 18px rgba(63, 55, 112, .035);
  --ref-shadow-hover: 0 3px 16px rgba(63, 55, 112, .075);
  --ref-sidebar-w: 236px;
  --ref-gap: 10px;
  --ref-control-h: 40px;

  /* Bridge legacy variables to the new system. */
  --app-sidebar-w: var(--ref-sidebar-w);
  --bg: var(--ref-app-bg);
  --surface: var(--ref-surface);
  --text: var(--ref-text);
  --muted: var(--ref-text-2);
  --primary: var(--ref-primary);
  --primary-dark: var(--ref-primary-hover);
  --danger: var(--ref-red);
  --success: var(--ref-green);
  --border: var(--ref-border);
  --shadow: var(--ref-shadow);
  --shadow-soft: var(--ref-shadow);
  --glass-blur: 0px;
  --color-background-primary: var(--ref-surface);
  --color-background-secondary: var(--ref-app-bg);
  --color-background-tertiary: var(--ref-surface-muted);
  --color-background-info: var(--ref-primary-soft);
  --color-border-primary: #d8d9e7;
  --color-border-secondary: var(--ref-border);
  --color-border-tertiary: var(--ref-border-soft);
  --color-border-info: var(--ref-primary);
  --color-text-primary: var(--ref-text);
  --color-text-secondary: var(--ref-text-2);
  --color-text-tertiary: var(--ref-text-3);
  --color-text-info: var(--ref-primary);
  --color-text-danger: var(--ref-red);
  --border-radius-lg: var(--ref-radius);
  --border-radius-md: var(--ref-radius-sm);
}

.theme-dark {
  --ref-app-bg: #151625;
  --ref-surface: #1d1f31;
  --ref-surface-soft: #212338;
  --ref-surface-muted: #26283f;
  --ref-sidebar: #191b2b;
  --ref-border: #32354c;
  --ref-border-soft: #2a2d43;
  --ref-text: #f1f2f8;
  --ref-text-2: #b6b9ca;
  --ref-text-3: #85899f;
  --ref-primary: #8f91ff;
  --ref-primary-hover: #a4a6ff;
  --ref-primary-soft: rgba(143,145,255,.14);
  --ref-purple-soft: rgba(121,101,231,.16);
  --ref-green-soft: rgba(68,185,102,.14);
  --ref-orange-soft: rgba(242,161,45,.14);
  --ref-red-soft: rgba(239,83,80,.14);
  --ref-blue-soft: rgba(79,126,221,.16);
  --ref-shadow: 0 5px 20px rgba(0,0,0,.16);
  --ref-shadow-hover: 0 8px 24px rgba(0,0,0,.24);
}
.theme-navy {
  --ref-app-bg: #081827;
  --ref-surface: #10263a;
  --ref-surface-soft: #122c43;
  --ref-surface-muted: #17334d;
  --ref-sidebar: #0d2133;
  --ref-border: #24425d;
  --ref-border-soft: #1d3851;
  --ref-text: #eef7ff;
  --ref-text-2: #b5cbe0;
  --ref-text-3: #7f9ab4;
  --ref-primary: #55bce8;
  --ref-primary-hover: #7acdf0;
  --ref-primary-soft: rgba(85,188,232,.14);
  --ref-purple-soft: rgba(121,101,231,.18);
  --ref-green-soft: rgba(68,185,102,.14);
  --ref-orange-soft: rgba(242,161,45,.14);
  --ref-red-soft: rgba(239,83,80,.14);
  --ref-blue-soft: rgba(79,126,221,.18);
}
.theme-neon-rose {
  --ref-app-bg: #160d1d;
  --ref-surface: #25142e;
  --ref-surface-soft: #2b1736;
  --ref-surface-muted: #321b3e;
  --ref-sidebar: #201128;
  --ref-border: #45264f;
  --ref-border-soft: #382041;
  --ref-text: #fff3fb;
  --ref-text-2: #e8bedb;
  --ref-text-3: #b889aa;
  --ref-primary: #ed6cb2;
  --ref-primary-hover: #f38fc6;
  --ref-primary-soft: rgba(237,108,178,.15);
  --ref-purple-soft: rgba(121,101,231,.18);
  --ref-green-soft: rgba(68,185,102,.14);
  --ref-orange-soft: rgba(242,161,45,.14);
  --ref-red-soft: rgba(239,83,80,.14);
  --ref-blue-soft: rgba(79,126,221,.18);
}

html { background: var(--ref-app-bg); }
html, body { min-width: 0; overflow-x: hidden; }
body {
  margin: 0 !important;
  background: var(--ref-app-bg) !important;
  color: var(--ref-text) !important;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { display: none !important; }
::selection { background: var(--ref-primary-soft); color: var(--ref-text); }
* { scrollbar-color: #d7d8e5 transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d7d8e5; border-radius: 10px; }

/* App shell */
.page-shell { min-height: 100vh; background: var(--ref-app-bg); }
.hdr-main {
  width: auto !important;
  min-width: 0;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 10px 18px !important;
}
.page-shell > footer {
  border-top: 1px solid var(--ref-border-soft) !important;
  color: var(--ref-text-3) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Desktop right sidebar */
@media (min-width: 901px) {
  body:not(.layout-top-header-index) .hdr {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: var(--ref-sidebar-w) !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--ref-sidebar) !important;
    border: 0 !important;
    border-left: 1px solid var(--ref-border) !important;
    box-shadow: -2px 0 12px rgba(54,48,94,.025) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 300;
  }
  body:not(.layout-top-header-index) .hdr-inner {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 12px 10px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
  }
  body:not(.layout-top-header-index) .hdr-logo {
    width: 100% !important;
    min-height: 52px !important;
    padding: 3px 4px 10px !important;
    margin: 0 0 2px !important;
    gap: 9px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ref-border-soft) !important;
  }
  body:not(.layout-top-header-index) .hdr-logo-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
  }
  body:not(.layout-top-header-index) .hdr-logo-text {
    color: var(--ref-text) !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    line-height: 1.5 !important;
  }
  body:not(.layout-top-header-index) .hdr-logo-sub {
    color: var(--ref-text-3) !important;
    font-size: 9px !important;
  }
  body:not(.layout-top-header-index) .hdr-sep { display: none !important; }
  body:not(.layout-top-header-index) .hdr-nav {
    width: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 2px 1px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item,
  body:not(.layout-top-header-index) .hdr-nav-parent {
    position: relative;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ref-radius-sm) !important;
    background: transparent !important;
    color: var(--ref-text-2) !important;
    box-shadow: none !important;
    font-size: 11.4px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: right !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease !important;
  }
  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item::before {
    content: "";
    width: 19px;
    height: 19px;
    margin-left: 7px;
    flex: 0 0 19px;
    border-radius: 5px;
    background: var(--ref-surface-muted);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
  }
  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item:hover,
  body:not(.layout-top-header-index) .hdr-nav-parent:hover {
    background: var(--ref-surface-muted) !important;
    color: var(--ref-text) !important;
    border-color: var(--ref-border-soft) !important;
  }
  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item.active,
  body:not(.layout-top-header-index) .hdr-nav-parent.active,
  body:not(.layout-top-header-index) .hdr-nav-group.active > .hdr-nav-parent {
    background: var(--ref-primary-soft) !important;
    color: var(--ref-primary) !important;
    border-color: #e6e1ff !important;
    font-weight: 750 !important;
  }
  body:not(.layout-top-header-index) .hdr-nav > .hdr-nav-item.active::after,
  body:not(.layout-top-header-index) .hdr-nav-group.active > .hdr-nav-parent::after {
    content: "";
    position: absolute;
    inset: 6px -2px 6px auto;
    width: 3px;
    border-radius: 4px 0 0 4px;
    background: var(--ref-purple);
  }
  body:not(.layout-top-header-index) .hdr-nav-group {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: var(--ref-radius-sm) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body:not(.layout-top-header-index) .hdr-nav-parent-label { gap: 7px !important; min-width: 0; }
  body:not(.layout-top-header-index) .hdr-nav-icon,
  body:not(.layout-top-header-index) .hdr-nav-subitem-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    background: var(--ref-surface-muted) !important;
    font-size: 0 !important;
  }
  body:not(.layout-top-header-index) .hdr-nav-icon .ref-icon,
  body:not(.layout-top-header-index) .hdr-nav-subitem-icon .ref-icon { width: 13px; height: 13px; }
  body:not(.layout-top-header-index) .hdr-nav-title { font-size: 11.4px !important; font-weight: 600 !important; }
  body:not(.layout-top-header-index) .hdr-nav-caret {
    color: var(--ref-text-3) !important;
    font-size: 10px !important;
    transition: transform .15s ease !important;
  }
  body:not(.layout-top-header-index) .hdr-nav-group.open .hdr-nav-caret { transform: rotate(180deg); }
  body:not(.layout-top-header-index) .hdr-nav-submenu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    max-height: 208px !important;
    margin: 2px 0 4px !important;
    padding: 3px 5px 3px 1px !important;
    border: 0 !important;
    border-right: 1px solid var(--ref-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }
  body:not(.layout-top-header-index) .hdr-nav-group.open > .hdr-nav-submenu,
  body:not(.layout-top-header-index) .hdr-nav-group.active > .hdr-nav-submenu { display: block !important; }
  body:not(.layout-top-header-index) .hdr-nav-subitem {
    min-height: 30px !important;
    margin: 0 0 1px !important;
    padding: 6px 7px !important;
    border-radius: 6px !important;
    color: var(--ref-text-2) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 10.8px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
  }
  body:not(.layout-top-header-index) .hdr-nav-subitem:hover,
  body:not(.layout-top-header-index) .hdr-nav-subitem.active {
    color: var(--ref-primary) !important;
    background: var(--ref-primary-soft) !important;
  }
  body:not(.layout-top-header-index) .hdr-right {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: grid !important;
    gap: 5px !important;
    padding: 7px 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid var(--ref-border-soft) !important;
  }
  body:not(.layout-top-header-index) .hdr-theme-switcher,
  body:not(.layout-top-header-index) .hdr-theme-btn,
  body:not(.layout-top-header-index) .hdr-user,
  body:not(.layout-top-header-index) .hdr-logout { width: 100% !important; }
  body:not(.layout-top-header-index) .hdr-theme-btn,
  body:not(.layout-top-header-index) .hdr-user,
  body:not(.layout-top-header-index) .hdr-logout {
    min-height: 34px !important;
    padding: 6px 8px !important;
    border: 1px solid var(--ref-border) !important;
    border-radius: var(--ref-radius-sm) !important;
    color: var(--ref-text-2) !important;
    background: var(--ref-surface) !important;
    box-shadow: none !important;
  }
  body:not(.layout-top-header-index) .hdr-user { min-height: 42px !important; }
  body:not(.layout-top-header-index) .hdr-avatar { width: 27px !important; height: 27px !important; border-radius: 7px !important; }
  body:not(.layout-top-header-index) .hdr-user-name { color: var(--ref-text) !important; font-size: 10.8px !important; }
  body:not(.layout-top-header-index) .hdr-user-role span { border-radius: 5px !important; font-size: 8.5px !important; }
  body:not(.layout-top-header-index) .hdr-logout { justify-content: flex-start !important; color: var(--ref-text-2) !important; }
  body:not(.layout-top-header-index) .hdr-logout:hover { background: var(--ref-red-soft) !important; color: var(--ref-red) !important; }
  body:not(.layout-top-header-index) .hdr-main {
    padding: 8px 8px 16px 8px !important;
    padding-inline-start: calc(var(--ref-sidebar-w) + 8px) !important;
  }
  body:not(.layout-top-header-index) .page-shell > footer {
    margin: 0 !important;
    padding-inline-start: calc(var(--ref-sidebar-w) + 12px) !important;
    padding-inline-end: 12px !important;
  }
}

/* Public top header — follows every active theme instead of staying white. */
body.layout-top-header-index .hdr {
  background: color-mix(in srgb, var(--ref-surface) 96%, transparent) !important;
  border-bottom: 1px solid var(--ref-border) !important;
  box-shadow: 0 2px 12px rgba(54,48,94,.045) !important;
  color: var(--ref-text) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
body.layout-top-header-index.theme-dark .hdr,
body.layout-top-header-index.theme-navy .hdr,
body.layout-top-header-index.theme-neon-rose .hdr {
  background: color-mix(in srgb, var(--ref-surface) 94%, transparent) !important;
  border-bottom-color: var(--ref-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
}
body.layout-top-header-index .hdr-inner { height: 56px !important; max-width: 1180px !important; }
body.layout-top-header-index .hdr-logo-text { color: var(--ref-text) !important; }
body.layout-top-header-index .hdr-logo-sub { color: var(--ref-text-3) !important; }
body.layout-top-header-index .hdr-nav-item,
body.layout-top-header-index .hdr-theme-btn {
  border-radius: 7px !important;
  box-shadow: none !important;
}
body.layout-top-header-index .hdr-nav-item.active {
  background: var(--ref-primary-soft) !important;
  color: var(--ref-primary) !important;
}
body.layout-top-header-index .hdr-theme-btn {
  background: var(--ref-surface-muted) !important;
  border-color: var(--ref-border) !important;
  color: var(--ref-text-2) !important;
}
body.layout-top-header-index .hdr-theme-btn:hover {
  background: var(--ref-primary-soft) !important;
  color: var(--ref-primary) !important;
}
body.layout-top-header-index .hdr-theme-menu {
  background: color-mix(in srgb, var(--ref-surface) 97%, transparent) !important;
  border-color: var(--ref-border) !important;
}
body.layout-top-header-index .hdr-main { padding-top: 70px !important; }

/* Common surfaces */
.card,
[class$="-card"],
[class*="-card "],
[class$="-box"],
[class*="-box "],
.dashboard-widget,
.dashboard-hero,
.dashboard-stat-card {
  border: 1px solid var(--ref-border) !important;
  border-radius: var(--ref-radius) !important;
  background: var(--ref-surface) !important;
  box-shadow: var(--ref-shadow) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.card:hover,
[class$="-card"]:hover,
[class*="-card "]:hover,
.dashboard-widget:hover,
.dashboard-stat-card:hover {
  transform: none !important;
  border-color: #ddddea !important;
  box-shadow: var(--ref-shadow-hover) !important;
}
.card { padding: 16px !important; margin-bottom: var(--ref-gap) !important; }

/* Common page titles/headers */
:is(
  .adm-header,.cn-head,.us-header,.st-header,.pf-header,.tk-header,.sv-header,
  .at-header,.logs-header,.acc-header,.am-page-header,.cp-head,.ct-header,.cu-header,
  .cl-head,.mv-head,.sr-header,.pt-head,.pro-page-header,.pro-header,.db-header
) {
  border-color: var(--ref-border) !important;
  background: linear-gradient(180deg, var(--ref-surface), var(--ref-surface-soft)) !important;
  box-shadow: none !important;
}
:is(
  .adm-title,.cn-title,.us-title,.st-title,.pf-title,.tk-title,.sv-title,
  .at-header-title,.logs-title,.acc-title,.am-page-title,.cp-title,.ct-header-title,
  .cu-header-title,.cl-title,.mv-title,.sr-title,.pt-title,.pro-page-title,.dashboard-title
) {
  color: var(--ref-text) !important;
  font-weight: 750 !important;
  letter-spacing: -.015em !important;
}
:is(
  .adm-sub,.cn-sub,.us-sub,.st-sub,.pf-sub,.tk-sub,.sv-sub,
  .at-header-sub,.logs-sub,.acc-sub,.am-form-header-sub,.cp-sub,.ct-header-sub,
  .cu-header-sub,.cl-sub,.mv-sub,.sr-sub,.pt-sub,.dashboard-subtitle
) { color: var(--ref-text-2) !important; }

/* Controls */
button,
input,
select,
textarea,
.btn,
[class$="-btn"],
[class*="-btn "] {
  font-family: inherit !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea,
[class$="-input"],
[class*="-input "],
[class$="-select"],
[class*="-select "],
[class$="-textarea"],
[class*="-textarea "] {
  min-height: var(--ref-control-h) !important;
  padding: 9px 11px !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: var(--ref-radius-sm) !important;
  color: var(--ref-text) !important;
  background: var(--ref-surface) !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 12px !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
textarea,
[class$="-textarea"],
[class*="-textarea "] { min-height: 96px !important; resize: vertical; }
input:focus,
select:focus,
textarea:focus,
[class$="-input"]:focus,
[class$="-select"]:focus,
[class$="-textarea"]:focus {
  border-color: color-mix(in srgb, var(--ref-primary) 65%, var(--ref-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ref-primary-soft) 88%, transparent) !important;
}
input::placeholder, textarea::placeholder { color: var(--ref-text-3) !important; opacity: 1; }
label,[class$="-label"],[class*="-label "] { color: var(--ref-text-2) !important; font-size: 11.5px !important; font-weight: 600 !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ref-primary); }

button,
.btn,
[class$="-btn"],
[class*="-btn "] {
  min-height: 36px;
  border: 1px solid var(--ref-border) !important;
  border-radius: var(--ref-radius-sm) !important;
  padding: 8px 12px !important;
  background: var(--ref-surface) !important;
  color: var(--ref-text) !important;
  box-shadow: none !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  transform: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
}
button:hover,
.btn:hover,
[class$="-btn"]:hover,
[class*="-btn "]:hover {
  transform: none !important;
  filter: none !important;
  background: var(--ref-surface-muted) !important;
  border-color: #d9d9e7 !important;
}
:is(
  button[type="submit"],.btn-primary,.primary,.db-btn,.idx-form-btn,.am-submit-btn,
  .ct-btn-submit,.cu-btn-submit,.nt-btn-submit,.pro-btn-primary,.dashboard-btn.primary
) {
  border-color: var(--ref-primary) !important;
  background: var(--ref-primary) !important;
  color: #fff !important;
}
:is(
  button[type="submit"],.btn-primary,.primary,.db-btn,.idx-form-btn,.am-submit-btn,
  .ct-btn-submit,.cu-btn-submit,.nt-btn-submit,.pro-btn-primary,.dashboard-btn.primary
):hover { background: var(--ref-primary-hover) !important; border-color: var(--ref-primary-hover) !important; }
:is(.danger,.btn-danger,[class*="danger"],.db-card-item-btn-delete,.at-btn-delete,.cn-btn-danger) {
  color: var(--ref-red) !important;
  background: var(--ref-red-soft) !important;
  border-color: color-mix(in srgb,var(--ref-red) 25%,var(--ref-border)) !important;
}
button:disabled,[disabled] { opacity: .55 !important; cursor: not-allowed !important; }
:focus-visible { outline: 2px solid color-mix(in srgb,var(--ref-primary) 62%,transparent) !important; outline-offset: 2px !important; }

/* Tables */
.table,
table[class],
.dashboard-table,
.db-table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--ref-text) !important;
  background: var(--ref-surface) !important;
  font-size: 11.5px !important;
}
.table th,.table td,
table[class] th,table[class] td,
.dashboard-table th,.dashboard-table td,
.db-table th,.db-table td {
  padding: 10px 11px !important;
  border-bottom: 1px solid var(--ref-border-soft) !important;
  text-align: right !important;
  vertical-align: middle !important;
}
.table th,table[class] th,.dashboard-table th,.db-table th {
  color: var(--ref-text-2) !important;
  background: var(--ref-surface-soft) !important;
  font-weight: 700 !important;
  font-size: 10.8px !important;
  white-space: nowrap;
}
table[class] tbody tr:hover td,
.dashboard-table tbody tr:hover td,
.db-table tbody tr:hover td { background: var(--ref-primary-soft) !important; }
[class*="scroll"], [class*="table-wrap"] { scrollbar-gutter: stable; }

/* Pills, statuses and alerts */
.badge,.status-pill,[class*="pill"],[class*="badge"] {
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 650 !important;
}
.alert,[class*="alert-success"],[class*="alert-error"],.hdr-flash-success,.hdr-flash-error {
  border-radius: var(--ref-radius-sm) !important;
  border: 1px solid var(--ref-border) !important;
  box-shadow: var(--ref-shadow) !important;
  backdrop-filter: none !important;
}
.hdr-flash-success { background: var(--ref-green-soft) !important; color: #238544 !important; }
.hdr-flash-error { background: var(--ref-red-soft) !important; color: #b63a38 !important; }

/* Modals and dropdowns */
[class*="modal-overlay"], [class$="-modal"]:has(> [class*="modal-"]) {
  background: rgba(28,27,48,.38) !important;
  backdrop-filter: blur(2px) !important;
}
[class*="modal-content"],[class*="modal-card"],[class$="-modal-body"],.hdr-theme-menu {
  border: 1px solid var(--ref-border) !important;
  border-radius: var(--ref-radius) !important;
  background: var(--ref-surface) !important;
  box-shadow: 0 18px 50px rgba(35,32,65,.16) !important;
}

/* Admin dashboard: dimensions and density closely follow the reference image. */
.dashboard-pro {
  --dp-bg: var(--ref-app-bg);
  --dp-card: var(--ref-surface);
  --dp-card-2: var(--ref-surface-soft);
  --dp-border: var(--ref-border);
  --dp-muted: var(--ref-text-3);
  --dp-text: var(--ref-text);
  --dp-blue: var(--ref-blue);
  --dp-sky: var(--ref-cyan);
  --dp-green: var(--ref-green);
  --dp-orange: var(--ref-orange);
  --dp-red: var(--ref-red);
  --dp-purple: var(--ref-purple);
  --dp-slate: #778094;
  --dp-radius: var(--ref-radius);
  --dp-radius-sm: var(--ref-radius-sm);
  --dp-shadow: var(--ref-shadow);
  --dp-shadow-soft: var(--ref-shadow);
  max-width: none !important;
  gap: 9px !important;
  padding-bottom: 8px !important;
}
.dashboard-hero {
  min-height: 106px !important;
  padding: 15px 18px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, var(--ref-surface) 0%, #fbfaff 58%, #f6f3ff 100%) !important;
}
.theme-dark .dashboard-hero,.theme-navy .dashboard-hero,.theme-neon-rose .dashboard-hero {
  background: linear-gradient(135deg,var(--ref-surface),var(--ref-surface-soft)) !important;
}
.dashboard-hero::before {
  display: block !important;
  inset: -60px auto auto -30px !important;
  width: 170px !important;
  height: 170px !important;
  background: radial-gradient(circle,rgba(121,101,231,.075),transparent 67%) !important;
}
.dashboard-hero::after { display: none !important; }
.dashboard-hero-inner { align-items: center !important; gap: 12px !important; }
.dashboard-kicker { margin-bottom: 7px !important; gap: 6px !important; color: var(--ref-text-2) !important; font-size: 10px !important; }
.dashboard-kicker span {
  padding: 3px 8px !important;
  border: 1px solid var(--ref-border) !important;
  border-radius: 6px !important;
  background: var(--ref-surface) !important;
  font-weight: 600 !important;
}
.dashboard-hero h1 { font-size: clamp(21px,2vw,27px) !important; font-weight: 800 !important; line-height: 1.4 !important; }
.dashboard-hero p { margin-top: 4px !important; max-width: 800px !important; color: var(--ref-text-2) !important; font-size: 10.8px !important; line-height: 1.75 !important; }
.dashboard-hero-meta { margin-top: 7px !important; gap: 7px !important; font-size: 9.8px !important; }
.dashboard-hero-actions { min-width: 250px !important; gap: 6px !important; align-self: flex-end !important; }
.dashboard-btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 10.2px !important; font-weight: 650 !important; }
.dashboard-btn .ref-icon { width: 13px; height: 13px; }
.dashboard-stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 9px !important; }
.dashboard-stat-card {
  min-height: 82px !important;
  padding: 11px 12px !important;
  overflow: hidden !important;
}
.dashboard-stat-card::after {
  display: block !important;
  inset: auto -18px -34px auto !important;
  width: 82px !important;
  height: 82px !important;
  border-radius: 22px 0 0 0 !important;
  transform: rotate(45deg) !important;
  background: color-mix(in srgb,var(--dp-accent,var(--ref-blue)) 10%,transparent) !important;
}
.stat-top { align-items: center !important; flex-direction: row-reverse !important; }
.stat-icon {
  width: 29px !important;
  height: 29px !important;
  border-radius: 7px !important;
  font-size: 0 !important;
  background: color-mix(in srgb,var(--dp-accent,var(--ref-blue)) 10%,var(--ref-surface)) !important;
  border-color: color-mix(in srgb,var(--dp-accent,var(--ref-blue)) 16%,var(--ref-border)) !important;
}
.stat-icon .ref-icon { width: 15px; height: 15px; }
.stat-label { color: var(--ref-text-2) !important; font-size: 10.2px !important; font-weight: 600 !important; }
.stat-value { margin-top: 5px !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1.15 !important; }
.stat-hint { margin-top: 3px !important; color: var(--ref-text-3) !important; font-size: 8.8px !important; line-height: 1.45 !important; }
.dashboard-grid { grid-template-columns: minmax(0,1.05fr) minmax(300px,1fr) !important; gap: 9px !important; }
.dashboard-grid.equal { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.dashboard-widget { overflow: hidden !important; }
.dashboard-widget-header {
  min-height: 42px !important;
  padding: 9px 11px !important;
  border-bottom: 1px solid var(--ref-border-soft) !important;
  background: var(--ref-surface) !important;
  align-items: center !important;
}
.dashboard-widget-title { font-size: 11.8px !important; font-weight: 750 !important; }
.dashboard-widget-sub { margin-top: 1px !important; font-size: 8.8px !important; line-height: 1.5 !important; }
.dashboard-widget-body { padding: 9px 11px !important; }
.dashboard-alert-list { gap: 5px !important; }
.dashboard-alert-item {
  min-height: 32px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  background: var(--ref-surface) !important;
}
.dashboard-alert-item:hover { transform: none !important; background: var(--ref-surface-soft) !important; }
.alert-main { gap: 7px !important; }
.alert-dot { width: 5px !important; height: 5px !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--dp-accent,var(--ref-orange)) 10%,transparent) !important; }
.alert-title { max-width: 410px !important; color: var(--ref-text) !important; font-size: 9.7px !important; font-weight: 650 !important; }
.alert-meta { margin-top: 1px !important; max-width: 410px !important; font-size: 8.2px !important; }
.dashboard-badge { padding: 3px 6px !important; border-radius: 5px !important; font-size: 8.5px !important; font-weight: 650 !important; }
.badge-blue{background:var(--ref-blue-soft)!important;color:#3566c4!important;border-color:#dce8ff!important}
.badge-green{background:var(--ref-green-soft)!important;color:#27884a!important;border-color:#d9f0df!important}
.badge-orange{background:var(--ref-orange-soft)!important;color:#bf7718!important;border-color:#fae7c8!important}
.badge-red{background:var(--ref-red-soft)!important;color:#c13f3c!important;border-color:#f8dcdc!important}
.badge-purple{background:var(--ref-purple-soft)!important;color:#6954c9!important;border-color:#e5defe!important}
.badge-slate{background:#f2f4f8!important;color:#657083!important;border-color:#e5e8ee!important}
.dashboard-mini-metrics { gap: 6px !important; }
.mini-metric { min-height: 50px !important; padding: 7px !important; border-radius: 7px !important; background: var(--ref-surface-soft) !important; border-color: var(--ref-border-soft) !important; }
.mini-metric b { font-size: 15px !important; }
.mini-metric span { font-size: 8.5px !important; }
.status-split { gap: 6px !important; }
.status-row { min-height: 27px !important; gap: 8px !important; font-size: 9px !important; }
.status-track { height: 4px !important; background: var(--ref-surface-muted) !important; }
.status-fill { border-radius: 6px !important; }
.status-count { font-size: 9px !important; }
.dashboard-table { min-width: 690px !important; font-size: 9.5px !important; }
.dashboard-table th,.dashboard-table td { padding: 7px 8px !important; }
.dashboard-link { min-height: 26px !important; padding: 4px 7px !important; border-radius: 5px !important; font-size: 8.8px !important; }
.ticket-title { font-size: 9.4px !important; }
.ticket-sub { font-size: 8px !important; }
.chart-bars { min-height: 130px !important; }
.chart-bar i { border-radius: 4px 4px 1px 1px !important; }

/* User portal dashboard */
.db-card { margin-bottom: 9px !important; overflow: hidden !important; }
.db-header { min-height: 44px !important; padding: 10px 12px !important; border-bottom: 1px solid var(--ref-border-soft) !important; }
.db-body { padding: 11px 12px !important; }
.db-card-item { border: 1px solid var(--ref-border) !important; border-radius: 7px !important; background: var(--ref-surface) !important; box-shadow: none !important; }
.db-card-item > b { color: var(--ref-text) !important; font-size: 19px !important; }
.db-pill { padding: 3px 6px !important; }

/* Authentication pages */
.idx-auth-card {
  width: min(1040px,calc(100% - 32px)) !important;
  min-height: 570px !important;
  grid-template-columns: minmax(300px,.85fr) minmax(390px,1.15fr) !important;
  margin: 18px auto !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.idx-auth-left {
  background: linear-gradient(145deg,#4f62d2 0%,#735fdc 52%,#5a75de 100%) !important;
}
.idx-auth-left::before { opacity: .16 !important; animation: none !important; }
.idx-left-content { padding: 34px 24px !important; gap: 22px !important; }
.idx-hero-image { width: 170px !important; height: 170px !important; filter: drop-shadow(0 12px 30px rgba(25,20,67,.18)) !important; }
.idx-features-list { gap: 9px !important; }
.idx-feature-item {
  padding: 9px 11px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.18) !important;
  backdrop-filter: none !important;
}
.idx-feature-item:hover { transform: none !important; background: rgba(255,255,255,.15) !important; }
.idx-feature-text { font-size: 11px !important; }
.idx-feature-icon { font-size: 0 !important; }
.idx-feature-icon .ref-icon { width: 16px; height: 16px; color: #fff; }
.idx-auth-right { width: auto !important; padding: 48px 56px !important; background: var(--ref-surface) !important; }
.idx-form-header { margin-bottom: 22px !important; }
.idx-form-title { color: var(--ref-text) !important; font-size: 24px !important; font-weight: 800 !important; }
.idx-form-subtitle { font-size: 11.5px !important; }
.idx-form { gap: 13px !important; }
.idx-form-group { gap: 5px !important; }
.idx-form-label { letter-spacing: 0 !important; text-transform: none !important; }
.idx-form-input { min-height: 42px !important; }
.idx-form-btn { min-height: 42px !important; }
.idx-logo-badge { width: 38px !important; height: 38px !important; border-radius: 8px !important; border-width: 1px !important; }

/* Empty states */
[class*="empty"] { color: var(--ref-text-3) !important; }
.dashboard-empty-state,.db-empty,[class$="-empty"] { padding: 24px 14px !important; }

/* Utility SVG icon */
.ref-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ref-icon.fill { fill: currentColor; stroke: none; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --ref-sidebar-w: 220px; }
  .dashboard-stat-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 900px) {
  body { font-size: 13px; }
  .hdr {
    height: 54px !important;
    background: var(--ref-surface) !important;
    border-bottom: 1px solid var(--ref-border) !important;
    box-shadow: 0 2px 10px rgba(54,48,94,.04) !important;
    backdrop-filter: none !important;
  }
  .hdr-inner { height: 54px !important; padding: 0 12px !important; }
  .hdr-logo-icon { width: 30px !important; height: 30px !important; border-radius: 7px !important; }
  .hdr-logo-text { font-size: 11px !important; }
  .hdr-hamburger { min-width: 36px !important; min-height: 36px !important; padding: 7px !important; }
  .hdr-main { padding: 66px 10px 16px !important; }
  .hdr-mobile-menu { background: rgba(24,23,42,.38) !important; backdrop-filter: blur(2px) !important; }
  .hdr-mobile-menu-content {
    width: min(310px,88vw) !important;
    background: var(--ref-sidebar) !important;
    border-left: 1px solid var(--ref-border) !important;
    border-radius: 0 !important;
    box-shadow: -12px 0 36px rgba(28,26,51,.15) !important;
  }
  .hdr-mobile-menu-header { padding: 15px 13px !important; border-radius: 0 !important; background: var(--ref-surface-soft) !important; }
  .hdr-mobile-menu-title { font-size: 12px !important; color: var(--ref-text) !important; }
  .hdr-mobile-menu-subtitle { color: var(--ref-text-2) !important; font-size: 10px !important; }
  .hdr-mobile-menu-item,.hdr-mobile-group summary {
    min-height: 39px !important;
    margin: 2px 6px !important;
    padding: 8px 9px !important;
    border-radius: 7px !important;
    color: var(--ref-text-2) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    font-size: 11.5px !important;
  }
  .hdr-mobile-menu-item.active { background: var(--ref-primary-soft) !important; color: var(--ref-primary) !important; }
  .hdr-mobile-menu-item-icon { width: 23px !important; height: 23px !important; font-size: 0 !important; border-radius: 6px !important; background: var(--ref-surface-muted) !important; }
  .hdr-mobile-menu-item-icon .ref-icon { width: 14px; height: 14px; }
  .hdr-mobile-group { border: 1px solid var(--ref-border-soft) !important; border-radius: 7px !important; background: var(--ref-surface) !important; }
  .hdr-mobile-submenu { background: var(--ref-surface-soft) !important; border-color: var(--ref-border-soft) !important; }
  .dashboard-pro { gap: 9px !important; }
  .dashboard-hero { padding: 14px !important; }
  .dashboard-hero-actions { width: 100%; min-width: 0 !important; justify-content: flex-start !important; }
  .dashboard-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .dashboard-grid,.dashboard-grid.equal { grid-template-columns: 1fr !important; }
  .idx-auth-card { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .idx-auth-left { display: none !important; }
  .idx-auth-right { padding: 34px 28px !important; }
}
@media (max-width: 600px) {
  .hdr-main { padding-inline: 8px !important; }
  .dashboard-hero { min-height: 0 !important; }
  .dashboard-hero-inner { display: block !important; }
  .dashboard-hero h1 { font-size: 20px !important; }
  .dashboard-hero-actions { margin-top: 12px !important; display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .dashboard-btn { width: 100% !important; }
  .dashboard-stat-grid { grid-template-columns: 1fr !important; }
  .dashboard-stat-card { min-height: 78px !important; }
  .dashboard-widget-header { align-items: flex-start !important; }
  .dashboard-alert-item { align-items: flex-start !important; }
  .alert-title,.alert-meta { max-width: 62vw !important; }
  .idx-auth-card { width: calc(100% - 16px) !important; margin: 8px auto !important; }
  .idx-auth-right { padding: 28px 18px !important; }
  .idx-form-row { grid-template-columns: 1fr !important; }
  .card,[class$="-card"],[class*="-card "] { border-radius: 9px !important; }
  table[class] { min-width: 680px; }
}

/* Final visual-audit refinements: match the reference grid reading order and vertical density. */
.dashboard-grid { direction: ltr !important; }
.dashboard-grid > * { direction: rtl !important; }
.dashboard-stat-card { height: 80px !important; min-height: 80px !important; padding: 8px 10px !important; }
.stat-icon { width: 26px !important; height: 26px !important; }
.stat-icon .ref-icon { width: 14px !important; height: 14px !important; }
.stat-value { margin-top: 2px !important; font-size: 18px !important; }
.stat-hint { margin-top: 1px !important; font-size: 8.2px !important; }
.dashboard-widget-header { min-height: 38px !important; padding: 7px 10px !important; }
.dashboard-widget-body { padding: 7px 10px !important; }
.dashboard-alert-item { min-height: 28px !important; padding: 4px 7px !important; }
.dashboard-alert-list { gap: 4px !important; }
.status-row { min-height: 24px !important; }
.dashboard-chart { min-height: 112px !important; }
.chart-bars { min-height: 105px !important; height: 105px !important; }
@media (max-width: 900px) {
  .dashboard-grid { direction: rtl !important; }
  .dashboard-stat-card { height: auto !important; min-height: 78px !important; }
}

/* Navigation icon cleanup and mobile shell hardening. */
@media (min-width: 901px) {
  body:not(.layout-top-header-index) .hdr-nav > a.hdr-nav-item::before { display: none !important; }
  body:not(.layout-top-header-index) .hdr-nav > a.hdr-nav-item > .ref-icon {
    width: 20px !important;
    height: 20px !important;
    padding: 3px !important;
    margin-left: 7px !important;
    border-radius: 5px !important;
    background: var(--ref-surface-muted) !important;
  }
}
.hdr-hamburger { display: none !important; }
@media (max-width: 900px) {
  .hdr-nav,.hdr-right,.hdr-sep { display: none !important; }
  .hdr-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: auto !important;
    background: var(--ref-surface) !important;
    color: var(--ref-text) !important;
  }
  .hdr-logo { margin-left: auto !important; }
}

/* V1.0.0 mobile header quick actions and logout confirmation */
.hdr-mobile-actions{display:none}
.mobile-logout-modal{display:none}
@media (max-width:900px){
  body:not(.layout-top-header-index) .hdr{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:58px!important;
    z-index:900!important;
  }
  body:not(.layout-top-header-index) .hdr-inner{
    position:relative!important;
    width:100%!important;
    height:58px!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:0 10px!important;
    direction:rtl!important;
  }
  body:not(.layout-top-header-index) .hdr-hamburger{
    position:static!important;
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    border:1px solid var(--ref-border)!important;
    border-radius:9px!important;
    background:var(--ref-surface-soft)!important;
    color:var(--ref-text)!important;
    box-shadow:none!important;
  }
  body:not(.layout-top-header-index) .hdr-logo{
    position:static!important;
    grid-column:2!important;
    grid-row:1!important;
    transform:none!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    justify-self:start!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
  }
  body:not(.layout-top-header-index) .hdr-logo > div:last-child{min-width:0!important}
  body:not(.layout-top-header-index) .hdr-logo-text,
  body:not(.layout-top-header-index) .hdr-logo-sub{text-align:right!important;max-width:28vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .hdr-mobile-actions{
    grid-column:3!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    direction:rtl!important;
  }
  .hdr-mobile-action{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--ref-border)!important;
    border-radius:9px!important;
    background:var(--ref-surface-soft)!important;
    color:var(--ref-text-2)!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .hdr-mobile-action:hover,.hdr-mobile-action:focus-visible{background:var(--ref-primary-soft)!important;color:var(--ref-primary)!important;border-color:color-mix(in srgb,var(--ref-primary) 30%,var(--ref-border))!important;outline:none!important}
  .hdr-mobile-action-danger:hover,.hdr-mobile-action-danger:focus-visible{background:var(--ref-red-soft)!important;color:var(--ref-red)!important;border-color:color-mix(in srgb,var(--ref-red) 32%,var(--ref-border))!important}
  .hdr-mobile-action svg,.mobile-logout-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body:not(.layout-top-header-index) .hdr-main{padding-top:70px!important}
  body:not(.layout-top-header-index) .page-shell > footer{margin-top:14px!important}

  .mobile-logout-modal.is-open{display:flex;position:fixed;inset:0;z-index:1300;align-items:center;justify-content:center;padding:18px}
  .mobile-logout-backdrop{position:absolute;inset:0;background:rgba(25,24,42,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .mobile-logout-dialog{position:relative;width:min(360px,100%);padding:20px;border:1px solid var(--ref-border);border-radius:12px;background:var(--ref-surface);box-shadow:0 24px 70px rgba(30,27,65,.20);text-align:center;color:var(--ref-text)}
  .mobile-logout-icon{width:44px;height:44px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--ref-red-soft);color:var(--ref-red)}
  .mobile-logout-dialog h2{margin:0;font-size:16px;font-weight:800;color:var(--ref-text)}
  .mobile-logout-dialog p{margin:7px 0 16px;font-size:12px;line-height:1.8;color:var(--ref-text-2)}
  .mobile-logout-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mobile-logout-cancel,.mobile-logout-confirm{min-height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;font-size:12px;font-weight:750;text-decoration:none;box-shadow:none;transform:none}
  .mobile-logout-cancel{border:1px solid var(--ref-border);background:var(--ref-surface-soft);color:var(--ref-text)}
  .mobile-logout-confirm{border:1px solid var(--ref-red);background:var(--ref-red);color:#fff}
}
@media (max-width:380px){
  body:not(.layout-top-header-index) .hdr-inner{grid-template-columns:42px minmax(0,1fr) auto!important;gap:5px!important;padding-inline:7px!important}
  .hdr-mobile-action{width:38px!important;height:38px!important;min-width:38px!important}
  body:not(.layout-top-header-index) .hdr-hamburger{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}
  body:not(.layout-top-header-index) .hdr-logo-icon{display:none!important}
  body:not(.layout-top-header-index) .hdr-logo-text{max-width:24vw!important}
}