/* ---------------------------------------------------------------- design tokens */
@font-face { font-family: "Noto Sans Arabic"; src: url("../lib/noto-sans-arabic/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../lib/noto-sans-arabic/noto-sans-arabic-arabic-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Noto Sans Arabic"; src: url("../lib/noto-sans-arabic/noto-sans-arabic-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --am-navy: #0b2545;          /* sidebar: navy */
    --am-navy-2: #13315c;        /* top bar */
    --am-blue: #1e63c4;          /* primary: blue */
    --am-blue-hover: #174fa0;
    --am-blue-active: #123f80;
    --am-blue-soft: #e8f0fb;
    --am-accent: #3fd6c6;        /* turquoise: logo mark, highlights */
    --am-green: #2f9e44;
    --am-orange: #c9573a;        /* warm accent: coral (warnings / maintenance), never yellow */
    --am-red: #c5221f;
    --am-teal: #0f9488;
    --am-bg: #f2f5f9;
    --am-card: #ffffff;
    --am-border: #e0e7f0;
    --am-text-muted: #5d6b7d;
    --sidebar-w: 248px;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
}
html[lang="ar"] { --bs-body-font-family: "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif; }

body { background: var(--am-bg); font-size: .925rem; }

/* ---------------------------------------------------------------- shell */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--am-navy); color: #c6d4e8;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: .75rem .5rem 2rem; z-index: 1040;
}
.app-sidebar .brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; padding: .5rem .75rem 1rem; }
.app-sidebar .brand i { color: var(--am-accent); }
.app-sidebar .nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; color: #7f95b8; padding: 1rem .75rem .35rem; }
.app-sidebar .nav-link { color: #d8e3f3; border-radius: .4rem; padding: .45rem .75rem; display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.app-sidebar .nav-link i { width: 1.1rem; text-align: center; opacity: .85; }
.app-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-sidebar .nav-link.active { background: var(--am-blue); color: #fff; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { background: var(--am-navy-2); color: #fff; display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; position: sticky; top: 0; z-index: 1030; }
.topbar-search { position: relative; align-items: center; max-width: 360px; flex: 1; }
.topbar-search i { position: absolute; inset-inline-start: .6rem; color: #8aa3c8; }
.topbar-search input { padding-inline-start: 2rem; background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.topbar-search input::placeholder { color: #b3c5e0; }
.btn-topbar { color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-topbar:hover { background: rgba(255,255,255,.1); color: #fff; }
.tenant-chip { color: #fff; text-decoration: none; font-size: .85rem; background: rgba(255,255,255,.12); padding: .25rem .6rem; border-radius: 1rem; white-space: nowrap; }
.lang-select { width: auto; background-color: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.lang-select option { color: #000; }
.notif-count { position: absolute; top: -6px; inset-inline-end: -6px; font-size: .65rem; }
.app-content { padding: 1.25rem; flex: 1; }
.app-footer { padding: .75rem 1.25rem; color: var(--am-text-muted); font-size: .8rem; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; transform: translateX(-100%); transition: transform .2s ease; }
    .rtl .app-sidebar { transform: translateX(100%); }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
    .app-content { padding: .75rem; }
}

/* ---------------------------------------------------------------- page elements */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.35rem; margin: 0; font-weight: 600; color: #1b2a41; }
.card { border-color: var(--am-border); border-radius: .6rem; }
.card-header { background: #fff; font-weight: 600; border-bottom-color: var(--am-border); }
.table { --bs-table-hover-bg: #f3f7fc; }
.table > :not(caption) > * > * { padding: .55rem .6rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--am-text-muted); background: #f8fafc; white-space: nowrap; }
.table td { vertical-align: middle; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--am-text-muted); }
.empty-state i { font-size: 2.2rem; display: block; margin-bottom: .5rem; }
.filters .form-control, .filters .form-select { min-width: 140px; }
.dl-grid { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; gap: .35rem 1rem; margin: 0; }
.dl-grid dt { color: var(--am-text-muted); font-weight: 500; }
.dl-grid dd { margin: 0; overflow-wrap: anywhere; }
.badge { font-weight: 500; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-inline-end: .3rem; }
.dot-good { background: var(--am-green); } .dot-fair { background: var(--am-orange); } .dot-poor { background: var(--am-red); } .dot-unknown { background: #adb5bd; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding-inline-start: 1.5rem; padding-bottom: .9rem; border-inline-start: 2px solid var(--am-border); margin-inline-start: .4rem; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -7px; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--am-blue); }
.qr-box svg { width: 140px; height: 140px; }
.tree-indent { display: inline-block; }

/* ---------------------------------------------------------------- dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpi { border-radius: .5rem; color: #fff; padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.kpi:hover { color: #fff; filter: brightness(1.05); }
.kpi .kpi-label { font-size: .82rem; opacity: .95; display: flex; align-items: center; gap: .4rem; }
.kpi .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.kpi .kpi-sub { font-size: .75rem; opacity: .85; }
.kpi-blue { background: linear-gradient(135deg, #1a5bb8, #2f7fe0); }
.kpi-green { background: linear-gradient(135deg, #237a39, #2f9e44); }
.kpi-orange { background: linear-gradient(135deg, #b6472d, #de7458); }
.kpi-navy { background: linear-gradient(135deg, #0f2f5c, #1d4f8f); }
.kpi-teal { background: linear-gradient(135deg, #0d8f84, #22b8a7); }
.kpi-red { background: linear-gradient(135deg, #b3261e, #d93a2f); }
.chart-box { position: relative; height: 240px; }
.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--am-border); }
.stat-list li:last-child { border-bottom: 0; }
.stat-list .val { font-size: 1.3rem; font-weight: 700; color: var(--am-navy-2); }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--am-border); font-size: .875rem; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list .ico { width: 1.8rem; height: 1.8rem; border-radius: .35rem; display: grid; place-items: center; color: #fff; flex: 0 0 auto; background: var(--am-blue); }
.integration-note { font-size: .78rem; color: var(--am-text-muted); }

/* ---------------------------------------------------------------- auth */
.auth-body { background: radial-gradient(circle at top, #1d4e89, var(--am-navy) 60%); min-height: 100vh; }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 430px; border: 0; }
.auth-logo { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--am-blue), #8e9aa5); color: #fff; display: inline-grid; place-items: center; font-size: 1.6rem; }

/* ---------------------------------------------------------------- labels / print */
.label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr)); gap: 4mm; }
.asset-label { border: 1px dashed #999; padding: 3mm; display: flex; gap: 3mm; align-items: center; break-inside: avoid; background: #fff; }
.asset-label > svg { width: 26mm; height: 26mm; flex: 0 0 auto; }
.asset-label .code { font-weight: 700; font-family: ui-monospace, Consolas, monospace; }
.asset-label .name { font-size: .8rem; }
.asset-label .label-text { min-width: 0; flex: 1 1 auto; }
.label-barcode { width: 46mm; max-width: 100%; margin: 1mm 0; }
.label-barcode svg { display: block; width: 100%; height: 9mm; }
.barcode-preview { border: 1px dashed #c8d1de; border-radius: .5rem; padding: .5rem .75rem; background: #fff; max-width: 22rem; }
@media print {
    .app-sidebar, .app-topbar, .app-footer, .no-print, .breadcrumb, .alert { display: none !important; }
    .app-content { padding: 0; }
    body { background: #fff; }
    .asset-label { border-color: #ccc; }
}
#qr-reader { max-width: 420px; }

/* ---- central sterilization unit ---- */
.steril-tabs { flex-wrap: wrap; }
.steril-tabs .nav-link { padding: .4rem .75rem; font-size: .9rem; }
.cycle-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.cycle-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .5rem; border-radius: .5rem;
    background: #fff; border: 1px solid #dfe5ee; color: #1b2a41; text-decoration: none; text-align: center; }
.cycle-step:hover { border-color: var(--am-blue); color: var(--am-blue-hover); }
.cycle-step i { font-size: 1.3rem; color: var(--am-blue); }
.cycle-step .cycle-count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.cycle-step .cycle-label { font-size: .78rem; color: #5b6b80; }
.cycle-step.cycle-warn { border-color: #de7458; background: #fdf0ec; }
.cycle-step.cycle-warn i { color: var(--am-orange); }
.scan-station #scanInput { letter-spacing: .05em; }
.scan-actions .btn-lg { min-height: 3.2rem; }
.steril-label svg { width: 30mm; height: 30mm; }

/* Validation summary is rendered empty (with this class) when the form has no errors: keep it out of sight. */
.validation-summary-valid { display: none !important; }

/* ---------------------------------------------------------------- date picker (flatpickr, themed to the app) */
.dp-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235f6b7a' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .65rem center; background-size: 14px; padding-right: 2.1rem; cursor: pointer; }
.dp-input.form-control-sm { background-position: right .5rem center; background-size: 12px; padding-right: 1.8rem; }
[dir="rtl"] .dp-input { background-position: left .65rem center; padding-right: .75rem; padding-left: 2.1rem; }
.dp-input[readonly] { background-color: var(--bs-body-bg, #fff); }

.flatpickr-calendar { font-family: var(--bs-body-font-family); border-radius: .75rem; border: 1px solid var(--am-border);
    box-shadow: 0 12px 32px rgba(11, 46, 89, .16), 0 2px 6px rgba(11, 46, 89, .08); width: 316px; padding: .35rem .35rem .25rem; }
.flatpickr-calendar.hasTime.noCalendar { width: 200px; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months { padding: .25rem .25rem .35rem; align-items: center; }
.flatpickr-months .flatpickr-month { height: 36px; color: var(--am-navy); }
.flatpickr-current-month { font-size: 1rem; font-weight: 600; padding-top: 6px; }
.flatpickr-current-month .cur-month { font-weight: 600; }
.flatpickr-current-month input.cur-year { font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { top: .5rem; height: 32px; width: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--am-navy); }
.flatpickr-months .flatpickr-prev-month { left: .35rem; }
.flatpickr-months .flatpickr-next-month { right: .35rem; }
.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { background: var(--am-blue-soft); color: var(--am-blue); }
.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { font-size: .95rem; }
span.flatpickr-weekday { color: var(--am-text-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { width: 100%; min-width: 0; max-width: none; }
.flatpickr-day { border-radius: .5rem; height: 38px; line-height: 38px; max-width: 42px; color: #1d2733; font-size: .875rem; border: 1px solid transparent; }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--am-blue-soft); border-color: var(--am-blue-soft); }
.flatpickr-day.today { border-color: var(--am-blue); color: var(--am-blue); font-weight: 600; }
.flatpickr-day.today:hover, .flatpickr-day.today:focus { background: var(--am-blue-soft); border-color: var(--am-blue); color: var(--am-blue); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus, .flatpickr-day.selected.today {
    background: var(--am-blue); border-color: var(--am-blue); color: #fff; font-weight: 600; box-shadow: 0 2px 6px rgba(30, 99, 196, .35); }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #aab4c2; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: #c8d0db; background: transparent; text-decoration: line-through; cursor: not-allowed; }
.flatpickr-time { border-top: 1px solid var(--am-border) !important; margin-top: .25rem; }
.flatpickr-time input, .flatpickr-time .flatpickr-am-pm { font-size: 1rem; font-weight: 600; color: var(--am-navy); }
.flatpickr-time input:hover, .flatpickr-time input:focus { background: var(--am-blue-soft); }
.dp-footer { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem .35rem .3rem; border-top: 1px solid var(--am-border); margin-top: .35rem; }
.dp-chip { border: 1px solid #cbd8ea; background: #f3f7fc; color: var(--am-navy-2); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem;
    line-height: 1.4; cursor: pointer; }
.dp-chip:hover { background: var(--am-blue); border-color: var(--am-blue); color: #fff; }
.dp-chip-clear { margin-inline-start: auto; background: transparent; border-color: transparent; color: var(--am-red); }
.dp-chip-clear:hover { background: #fdecea; border-color: #f5c2bf; color: var(--am-red); }
.flatpickr-calendar[dir="rtl"] .flatpickr-prev-month { left: auto; right: .35rem; transform: scaleX(-1); }
.flatpickr-calendar[dir="rtl"] .flatpickr-next-month { right: auto; left: .35rem; transform: scaleX(-1); }

/* ---------------------------------------------------------------- brand theme (Bootstrap overrides)
   One palette: navy surfaces, blue primary, turquoise highlights (AssetHub mark), coral for warnings; no yellow.
   Bootstrap's default blue (#0d6efd) and yellow warning (#ffc107) are replaced everywhere. */
:root {
    --bs-primary: #1e63c4; --bs-primary-rgb: 30, 99, 196;
    --bs-primary-text-emphasis: #174fa0; --bs-primary-bg-subtle: #e8f0fb; --bs-primary-border-subtle: #b5cdee;
    --bs-link-color: #1e63c4; --bs-link-color-rgb: 30, 99, 196; --bs-link-hover-color: #174fa0; --bs-link-hover-color-rgb: 23, 79, 160;
    --bs-warning: #c24d32; --bs-warning-rgb: 194, 77, 50;
    --bs-warning-text-emphasis: #7e301e; --bs-warning-bg-subtle: #fcece7; --bs-warning-border-subtle: #f0bfb1;
    --bs-info: #0f9488; --bs-info-rgb: 15, 148, 136;
    --bs-info-text-emphasis: #0b6158; --bs-info-bg-subtle: #e4f6f4; --bs-info-border-subtle: #a4dcd5;
    --bs-focus-ring-color: rgba(30, 99, 196, .25);
}
.btn-primary { --bs-btn-bg: #1e63c4; --bs-btn-border-color: #1e63c4; --bs-btn-hover-bg: #174fa0; --bs-btn-hover-border-color: #174fa0;
    --bs-btn-active-bg: #123f80; --bs-btn-active-border-color: #123f80; --bs-btn-disabled-bg: #1e63c4; --bs-btn-disabled-border-color: #1e63c4; --bs-btn-focus-shadow-rgb: 30, 99, 196; }
.btn-outline-primary { --bs-btn-color: #1e63c4; --bs-btn-border-color: #1e63c4; --bs-btn-hover-bg: #1e63c4; --bs-btn-hover-border-color: #1e63c4;
    --bs-btn-active-bg: #174fa0; --bs-btn-active-border-color: #174fa0; --bs-btn-disabled-color: #1e63c4; --bs-btn-disabled-border-color: #1e63c4; --bs-btn-focus-shadow-rgb: 30, 99, 196; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #c24d32; --bs-btn-border-color: #c24d32; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #a33f28; --bs-btn-hover-border-color: #a33f28;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #7e301e; --bs-btn-active-border-color: #7e301e; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #c24d32; --bs-btn-disabled-border-color: #c24d32; --bs-btn-focus-shadow-rgb: 194, 77, 50; }
.btn-outline-warning { --bs-btn-color: #c24d32; --bs-btn-border-color: #c24d32; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c24d32; --bs-btn-hover-border-color: #c24d32;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #a33f28; --bs-btn-active-border-color: #a33f28; --bs-btn-disabled-color: #c24d32; --bs-btn-disabled-border-color: #c24d32; --bs-btn-focus-shadow-rgb: 194, 77, 50; }
.btn-outline-info { --bs-btn-color: #0f9488; --bs-btn-border-color: #0f9488; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0f9488; --bs-btn-hover-border-color: #0f9488;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0c7a70; --bs-btn-active-border-color: #0c7a70; }
.text-bg-warning, .text-bg-info { color: #fff !important; }
.bg-warning.text-dark, .badge.bg-warning { color: #fff !important; }
.form-control:focus, .form-select:focus { border-color: #8fb4e6; box-shadow: 0 0 0 .25rem rgba(30, 99, 196, .2); }
.form-check-input:focus { border-color: #8fb4e6; box-shadow: 0 0 0 .25rem rgba(30, 99, 196, .2); }
.form-check-input:checked { background-color: #1e63c4; border-color: #1e63c4; }
.form-range::-webkit-slider-thumb { background-color: #1e63c4; }
.pagination { --bs-pagination-color: #1e63c4; --bs-pagination-hover-color: #174fa0; --bs-pagination-focus-color: #174fa0;
    --bs-pagination-active-bg: #1e63c4; --bs-pagination-active-border-color: #1e63c4; --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(30, 99, 196, .2); }
.nav-pills { --bs-nav-pills-link-active-bg: #1e63c4; }
.nav { --bs-nav-link-color: #1e63c4; --bs-nav-link-hover-color: #174fa0; }
.dropdown-menu { --bs-dropdown-link-active-bg: #1e63c4; }
.list-group { --bs-list-group-active-bg: #1e63c4; --bs-list-group-active-border-color: #1e63c4; }
.progress, .progress-stacked { --bs-progress-bar-bg: #1e63c4; }
.accordion { --bs-accordion-active-color: #174fa0; --bs-accordion-active-bg: #e8f0fb; --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(30, 99, 196, .2); }

/* ---------------------------------------------------------------- blue -> turquoise highlights */
.app-sidebar .brand i { color: #3fd6c6; }
.app-sidebar .nav-link.active { background: linear-gradient(135deg, #1e63c4 0%, #1690b8 60%, #14a89a 100%); color: #fff; }
.auth-logo { background: linear-gradient(135deg, #1e63c4 0%, #1690b8 55%, #19b5a5 100%); color: #fff; box-shadow: 0 6px 18px rgba(25, 181, 165, .3); }
.table a:not(.btn) { font-weight: 600; text-decoration: none; }
.table a:not(.btn):hover { text-decoration: underline; }

/* ---------------------------------------------------------------- sidebar accordion */
.app-sidebar .nav-group-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    background: transparent; border: 0; border-radius: .4rem; text-align: start; cursor: pointer; margin-top: .35rem; padding: .55rem .75rem; }
.app-sidebar .nav-group-toggle:hover { color: #d8e3f3; background: rgba(255,255,255,.05); }
.app-sidebar .nav-group-toggle:focus-visible { outline: 2px solid #3fd6c6; outline-offset: 1px; }
.app-sidebar .nav-group-toggle i { font-size: .7rem; transition: transform .2s ease; }
.app-sidebar .nav-group.open > .nav-group-toggle { color: #fff; }
.app-sidebar .nav-group.open > .nav-group-toggle i { transform: rotate(180deg); }
.app-sidebar .nav-group-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.app-sidebar .nav-group-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.app-sidebar .nav-group.open > .nav-group-items { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .app-sidebar .nav-group-items, .app-sidebar .nav-group-toggle i { transition: none; } }

/* ---------------------------------------------------------------- sign-in (split layout) */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #f5f8fc; }
.auth-hero { position: relative; overflow: hidden; color: #dbe6f5; padding: 3rem 4rem 2rem; display: flex; flex-direction: column;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(30, 99, 196, .45), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(25, 181, 165, .18), transparent 50%),
        linear-gradient(160deg, #0b2545 0%, #0a1c36 100%); }
.auth-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 48px 48px; }
.auth-hero > * { position: relative; }
.auth-brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-weight: 700; font-size: 1.6rem; text-decoration: none; letter-spacing: -.01em; }
.auth-brand .auth-brand-mark { width: 44px; height: 44px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, #1e63c4 0%, #1690b8 55%, #19b5a5 100%); box-shadow: 0 6px 18px rgba(25, 181, 165, .3); }
.auth-brand .auth-brand-hub { color: #3fd6c6; }
.auth-hero-body { margin: auto 0; max-width: 560px; padding: 2.5rem 0; }
.auth-eyebrow { color: #3fd6c6; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.auth-hero h2 { color: #fff; font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 1rem; }
.auth-lead { font-size: 1.05rem; line-height: 1.6; color: #b9cbe4; margin-bottom: 2rem; }
.auth-line { display: block; width: 200px; height: 24px; margin-bottom: 2.5rem; }
.auth-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.auth-features li { display: flex; align-items: center; gap: .75rem; color: #dbe6f5; }
.auth-features li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #19b5a5; box-shadow: 0 0 0 4px rgba(25, 181, 165, .18); flex: 0 0 auto; }
.auth-foot { font-size: .8rem; color: #7f95b8; }
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-form { width: 100%; max-width: 440px; }
.auth-form h1 { font-size: 2rem; font-weight: 700; color: #0b2545; letter-spacing: -.015em; margin-bottom: 1.75rem; }
.auth-form .form-label { font-weight: 600; font-size: .9rem; color: #1b2a41; }
.auth-form .form-control { min-height: 50px; border-radius: .6rem; border-color: #d3dceb; }
.auth-field { position: relative; }
.auth-field > i { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: #6b7a90; pointer-events: none; }
.auth-field > .form-control { padding-inline-start: 2.6rem; }
.auth-field > .auth-eye { position: absolute; inset-inline-end: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #4b5b70;
    width: 40px; height: 40px; border-radius: .5rem; display: grid; place-items: center; }
.auth-field > .auth-eye:hover { background: #eef3fa; }
.auth-field.has-eye > .form-control { padding-inline-end: 3rem; }
.auth-form .btn-auth { min-height: 54px; border-radius: .7rem; font-weight: 600; font-size: 1.05rem;
    background: linear-gradient(135deg, #1e63c4, #2f7fe0); border: 0; color: #fff; box-shadow: 0 8px 20px rgba(30, 99, 196, .28); }
.auth-form .btn-auth:hover { background: linear-gradient(135deg, #174fa0, #1e63c4); color: #fff; }
.auth-langs { display: inline-flex; gap: .25rem; padding: .3rem; border: 1px solid #dde5f0; border-radius: 999px; background: #fff; margin-top: 2rem; }
.auth-langs button { border: 0; background: transparent; border-radius: 999px; padding: .35rem .85rem; font-size: .88rem; color: #4b5b70; }
.auth-langs button:hover { background: #eef3fa; }
.auth-langs button.active { background: #0b2545; color: #fff; font-weight: 600; }
.auth-mobile-brand { display: none; }
@media (max-width: 991.98px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-hero { display: none; }
    .auth-mobile-brand { display: inline-flex; margin-bottom: 1.75rem; }
    .auth-mobile-brand.auth-brand { color: #0b2545; }
    .auth-mobile-brand .auth-brand-hub { color: #0f9488; }
}
.app-sidebar .nav-group:not(.open) .nav-group-inner { visibility: hidden; transition: visibility 0s .22s; }

/* ---------------------------------------------------------------- image code (captcha) */
.captcha-box { border: 1px solid #dde5f0; border-radius: .8rem; padding: .25rem 1rem 1rem; background: #fff; }
.captcha-box legend { float: none; width: auto; font-size: 1rem; font-weight: 600; color: #0b2545; padding: 0 .4rem; margin: 0 0 0 -.4rem; }
.captcha-hint { font-size: .85rem; color: #5d6b7d; margin-bottom: .6rem; }
.captcha-row { display: flex; align-items: center; gap: .75rem; }
.captcha-img { border-radius: .4rem; border: 1px solid #dde5f0; background: #eef2f7; max-width: 100%; height: auto; }
.captcha-refresh { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #dde5f0; background: #fff; color: #0b2545; display: grid; place-items: center;
    flex: 0 0 auto; box-shadow: 0 1px 3px rgba(11, 37, 69, .08); }
.captcha-refresh:hover { background: #eef3fa; }
.captcha-refresh:disabled { opacity: .6; }
.captcha-input { min-height: 50px; letter-spacing: .2em; text-transform: uppercase; }
.captcha-input::placeholder { letter-spacing: normal; text-transform: none; }