/* ============================================================
   FINEX — Financial Accounting Suite
   Visual identity: institutional finance + deep emerald
   BY IMAGYNEX
   ============================================================ */

:root {
    /* Core palette — derived from financial governance world */
    --steel-950: #07120f;   /* deep well / night rig */
    --steel-900: #0d1b18;
    --steel-850: #12241f;
    --steel-800: #183029;
    --steel-700: #244338;
    --steel-600: #3b6254;
    --steel-500: #66877b;
    --steel-400: #86a49a;
    --steel-300: #a6bdb4;
    --steel-200: #d2dfda;
    --steel-100: #eff7f3;

    --amber:      #178f63;   /* deep emerald — the signature */
    --amber-dim:  #0f6e4b;
    --amber-soft: rgba(23,143,99,0.16);

    --teal:       #22b08a;   /* gauge / instrument green */
    --teal-soft:  rgba(34,176,138,0.13);

    --crude:      #2fa36e;   /* crude / pipe rust accent */
    --danger:     #e25555;
    --danger-soft:rgba(226,85,85,0.12);
    --ok:         #43c478;
    --ok-soft:    rgba(67,196,120,0.12);

    --paper:      #f4f6f9;
    --line:       rgba(255,255,255,0.07);
    --line-strong:rgba(255,255,255,0.12);

    --sidebar-w: 248px;
    --header-h: 62px;
    --radius: 10px;
    --radius-sm: 7px;

    --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Global SVG guard — icons never stretch beyond their intended box */
svg { width: 18px; height: 18px; flex-shrink: 0; }

html, body {
    height: 100%;
    background: var(--steel-950);
    color: var(--steel-100);
    font-family: var(--font-en);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body[dir="rtl"] { font-family: var(--font-ar); }
body[dir="rtl"] .mono-keep { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--steel-900); }
::-webkit-scrollbar-thumb { background: var(--steel-700); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--steel-600); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.login-brandside {
    position: relative;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(23,143,99,0.14) 0%, transparent 50%),
        linear-gradient(160deg, var(--steel-900) 0%, var(--steel-950) 100%);
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-inline-end: 1px solid var(--line);
}
/* subtle rig-derrick line art */
.login-brandside::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000 0%, transparent 75%);
            mask-image: radial-gradient(80% 80% at 70% 30%, #000 0%, transparent 75%);
    opacity: 0.5;
    pointer-events: none;
}
.login-formside {
    background: var(--steel-900);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 6px; }
.login-card .sub { color: var(--steel-300); font-size: 13px; margin-bottom: 30px; }

.brand-mark {
    display: flex; align-items: center; gap: 13px;
    position: relative; z-index: 1;
}
.brand-logo {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.brand-logo svg { width: 26px; height: 26px; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text .name { font-size: 21px; font-weight: 800; letter-spacing: 1px; color: var(--steel-100); }
.brand-text .name .rig, .brand-text .name .nex { color: var(--steel-100); -webkit-text-fill-color: var(--steel-100); }
.brand-text .tg { font-size: 11px; color: var(--steel-300); letter-spacing: 0.3px; margin-top: 1px; }

.brand-hero { position: relative; z-index: 1; }
.brand-hero h2 {
    font-size: 34px; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.8px; max-width: 14ch;
}
.brand-hero h2 em { color: var(--amber); font-style: normal; }
.brand-hero p { color: var(--steel-300); margin-top: 14px; max-width: 42ch; font-size: 14px; }

.brand-stats { display: flex; gap: 34px; position: relative; z-index: 1; }
.brand-stats .stat .n { font-size: 26px; font-weight: 800; color: var(--steel-100); }
.brand-stats .stat .l { font-size: 11px; color: var(--steel-300); letter-spacing: 0.4px; text-transform: uppercase; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--steel-300); margin-bottom: 7px; font-weight: 500; }
.field input, .field select, .field textarea {
    width: 100%;
    background: var(--steel-850);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--steel-100);
    padding: 11px 13px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-soft);
}
.field-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 22px; }
.field-row label { display: flex; align-items: center; gap: 7px; color: var(--steel-300); font-size: 13px; cursor: pointer; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 13.5px; font-weight: 600;
    transition: transform .08s, filter .15s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--amber); color: #031b13; width: 100%; padding: 12px; font-size: 14.5px; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--steel-200); }
.btn-ghost:hover { border-color: var(--steel-500); background: var(--steel-800); }
.btn-soft { background: var(--steel-800); border-color: var(--line-strong); color: var(--steel-100); }
.btn-soft:hover { background: var(--steel-700); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-amber-soft { background: var(--amber-soft); color: var(--amber); border-color: rgba(23,143,99,0.35); }
.btn-amber-soft:hover { background: rgba(23,143,99,0.24); }

.lang-toggle {
    position: absolute; top: 26px; inset-inline-end: 26px; z-index: 5;
    background: var(--steel-850); border: 1px solid var(--line-strong);
    border-radius: 20px; padding: 7px 15px; font-size: 12.5px; font-weight: 600;
    color: var(--steel-200); display: inline-flex; align-items: center; gap: 7px;
}
.lang-toggle:hover { border-color: var(--amber); color: var(--amber); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
    background: var(--steel-900);
    border-inline-end: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.sidebar-nav { padding: 12px 12px 20px; flex: 1; }
.nav-group { font-size: 10.5px; letter-spacing: 1px; color: var(--steel-500); font-weight: 700; padding: 16px 12px 7px; }
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--steel-300); font-size: 13.5px; font-weight: 500;
    margin-bottom: 2px; transition: background .12s, color .12s;
    position: relative;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: var(--steel-800); color: var(--steel-100); }
.nav-item.active { background: var(--amber-soft); color: var(--amber); }
.nav-item.active::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--amber);
}
.nav-badge {
    margin-inline-start: auto; background: var(--steel-700); color: var(--steel-200);
    font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
}
.nav-item.active .nav-badge { background: var(--amber); color: #031b13; }

/* ---- Header ---- */
.main-col { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    height: var(--header-h);
    background: rgba(18,24,33,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 16px;
    padding: 0 22px;
    position: sticky; top: 0; z-index: 40;
}
.topbar .crumbs { font-size: 13px; color: var(--steel-300); }
.topbar .crumbs b { color: var(--steel-100); font-weight: 600; }
.searchbox {
    margin-inline-start: auto;
    display: flex; align-items: center; gap: 8px;
    background: var(--steel-850); border: 1px solid var(--line-strong);
    border-radius: 20px; padding: 7px 14px; min-width: 220px;
}
.searchbox input { background: none; border: none; color: var(--steel-100); font-size: 13px; width: 100%; outline: none; }
.searchbox svg { width: 15px; height: 15px; color: var(--steel-500); }
.topbar-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center; background: var(--steel-850);
    border: 1px solid var(--line-strong); color: var(--steel-300);
    position: relative;
}
.topbar-icon:hover { color: var(--amber); border-color: var(--amber); }
.topbar-icon .dot { position: absolute; top: 8px; inset-inline-end: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.avatar {
    width: 36px; height: 36px; border-radius: 9px;
    background: linear-gradient(135deg, var(--teal), #178f83);
    display: grid; place-items: center; font-weight: 700; color: #031b13; font-size: 13px;
}

/* ---- Content ---- */
.content { padding: 26px; flex: 1; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .titles h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.page-head .titles p { color: var(--steel-300); font-size: 13.5px; margin-top: 4px; max-width: 70ch; }
.page-head .actions { margin-inline-start: auto; display: flex; gap: 9px; flex-wrap: wrap; }

.demo-banner {
    display: flex; align-items: center; gap: 10px;
    background: var(--amber-soft); border: 1px solid rgba(23,143,99,0.32);
    color: var(--amber); border-radius: var(--radius-sm);
    padding: 9px 14px; font-size: 12.5px; margin-bottom: 20px;
}
.demo-banner svg { width: 16px; height: 16px; flex-shrink: 0; }
.big-icon svg, svg.big-icon { width: 40px; height: 40px; opacity: .4; }

/* ---- KPI cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi {
    background: var(--steel-900); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px;
    position: relative; overflow: hidden;
}
.kpi::after {
    content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 3px; height: 100%;
    background: var(--accent, var(--amber));
}
.kpi .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kpi .kpi-icn { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft, var(--amber-soft)); color: var(--accent, var(--amber)); }
.kpi .kpi-icn svg { width: 19px; height: 19px; }
.kpi .kpi-trend { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); }
.kpi .kpi-trend.down { background: var(--danger-soft); color: var(--danger); }
.kpi .kpi-val { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.kpi .kpi-label { font-size: 12.5px; color: var(--steel-300); margin-top: 2px; }

/* ---- Cards / panels ---- */
.panel { background: var(--steel-900); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.panel-head h3 { font-size: 15px; font-weight: 700; }
.panel-head .panel-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- Tables ---- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
    text-align: start; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
    color: var(--steel-500); font-weight: 700; padding: 12px 16px;
    border-bottom: 1px solid var(--line); background: var(--steel-850);
}
.tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--steel-200); }
.tbl tbody tr:hover { background: var(--steel-850); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .jobid { font-family: var(--font-mono); color: var(--amber); font-weight: 600; font-size: 12.5px; }

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.draft { background: var(--steel-800); color: var(--steel-300); }
.chip.pending { background: var(--amber-soft); color: var(--amber); }
.chip.approved { background: var(--ok-soft); color: var(--ok); }
.chip.dispatched { background: var(--teal-soft); color: var(--teal); }
.chip.completed { background: rgba(86,105,127,0.18); color: var(--steel-200); }
.chip.returned { background: var(--danger-soft); color: var(--danger); }

.row-actions { display: flex; gap: 6px; }
.icon-btn {
    width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
    background: var(--steel-800); border: 1px solid var(--line-strong); color: var(--steel-300);
}
.icon-btn:hover { color: var(--amber); border-color: var(--amber); }
.icon-btn svg { width: 15px; height: 15px; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; overflow-x: auto; }
.tab {
    padding: 13px 14px; font-size: 13px; font-weight: 600; color: var(--steel-300);
    border-bottom: 2px solid transparent; white-space: nowrap; background: none; border-top: none; border-inline: none;
}
.tab:hover { color: var(--steel-100); }
.tab.active { color: var(--amber); border-bottom-color: var(--amber); }
.tab .cnt { margin-inline-start: 6px; font-size: 11px; background: var(--steel-800); padding: 1px 7px; border-radius: 9px; color: var(--steel-300); }
.tab.active .cnt { background: var(--amber-soft); color: var(--amber); }

/* ---- Traceability chain ---- */
.chain { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px; }
.chain-node {
    flex: 1; min-width: 110px; text-align: center; padding: 14px 8px;
    position: relative;
}
.chain-node:not(:last-child)::after {
    content: ""; position: absolute; top: 28px; inset-inline-end: -6px;
    width: 12px; height: 2px; background: var(--steel-600);
}
body[dir="rtl"] .chain-node:not(:last-child)::after { transform: scaleX(-1); }
.chain-dot {
    width: 38px; height: 38px; border-radius: 11px; margin: 0 auto 9px;
    display: grid; place-items: center; background: var(--steel-800);
    border: 1px solid var(--line-strong); color: var(--steel-300);
}
.chain-dot svg { width: 18px; height: 18px; }
.chain-node.done .chain-dot { background: var(--ok-soft); color: var(--ok); border-color: rgba(67,196,120,0.3); }
.chain-node.active .chain-dot { background: var(--amber); color: #031b13; border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.chain-node .lbl { font-size: 11.5px; color: var(--steel-300); }
.chain-node.active .lbl { color: var(--amber); font-weight: 600; }

/* ---- Integration cards ---- */
.integ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.integ-card {
    background: var(--steel-900); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px; display: flex; flex-direction: column; gap: 14px;
    transition: border-color .15s, transform .1s;
}
.integ-card:hover { border-color: var(--steel-600); }
.integ-card .ic-top { display: flex; align-items: center; gap: 12px; }
.integ-logo {
    width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center;
    font-weight: 800; font-size: 17px; color: #fff; flex-shrink: 0;
}
.integ-card .ic-name { font-weight: 700; font-size: 15px; }
.integ-card .ic-type { font-size: 12px; color: var(--steel-300); }
.integ-card .ic-stat { margin-inline-start: auto; }
.integ-meter { height: 6px; border-radius: 4px; background: var(--steel-800); overflow: hidden; }
.integ-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--amber)); }
.integ-card .ic-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--steel-300); }

/* ---- Modal ---- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(6,9,13,0.72);
    backdrop-filter: blur(3px); z-index: 100;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal {
    background: var(--steel-900); border: 1px solid var(--line-strong);
    border-radius: 14px; width: 100%; max-width: 620px; max-height: 88vh;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h3 { font-size: 16px; font-weight: 700; }
.modal-head .close { margin-inline-start: auto; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--steel-800); color: var(--steel-300); border: 1px solid var(--line-strong); }
.modal-head .close:hover { color: var(--danger); border-color: var(--danger); }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px){ .form-grid { grid-template-columns: 1fr; } }

/* ---- Footer ---- */
.app-footer {
    text-align: center; padding: 16px; font-size: 11px; letter-spacing: 2px;
    color: var(--steel-500); border-top: 1px solid var(--line); font-weight: 700;
}
.app-footer span { color: var(--amber); }

/* ---- Toast ---- */
.toast-wrap { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--steel-800); border: 1px solid var(--line-strong);
    border-inline-start: 3px solid var(--amber);
    border-radius: 9px; padding: 12px 16px; font-size: 13px; min-width: 240px;
    display: flex; align-items: center; gap: 10px;
    animation: slideIn .25s ease;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.toast svg { width: 17px; height: 17px; color: var(--amber); flex-shrink: 0; }
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Mini info rows ---- */
.info-list { display: flex; flex-direction: column; gap: 0; }
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--steel-300); }
.info-row .v { color: var(--steel-100); font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 900px){
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset-inline-start: -260px; z-index: 90; transition: inset-inline-start .25s; width: 248px; }
    .sidebar.open { inset-inline-start: 0; }
    .login-wrap { grid-template-columns: 1fr; }
    .login-brandside { display: none; }
}
.menu-btn { display: none; width: 36px; height: 36px; border-radius: 9px; place-items: center; background: var(--steel-850); border: 1px solid var(--line-strong); color: var(--steel-200); }
@media (max-width: 900px){ .menu-btn { display: grid; } }

/* ============================================================
   WORKFLOW / PROCESS MAPS
   ============================================================ */
.wf-intro { color: var(--steel-300); font-size: 13.5px; max-width: 80ch; margin-bottom: 4px; }

.wf-lane {
    background: var(--steel-900); border: 1px solid var(--line);
    border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
}
.wf-lane-head {
    display: flex; align-items: center; gap: 11px; padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--lane-tint, var(--amber-soft)), transparent 70%);
}
.wf-lane-head .wf-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--steel-850); color: var(--lane-c, var(--amber)); flex-shrink: 0; }
.wf-lane-head h3 { font-size: 15px; font-weight: 700; }
.wf-lane-head .wf-tag { margin-inline-start: auto; font-size: 11px; color: var(--steel-400); font-family: var(--font-mono); }
.wf-lane-body { padding: 20px 18px; }

/* horizontal step flow */
.wf-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.wf-step {
    flex: 1; min-width: 130px; max-width: 200px;
    background: var(--steel-850); border: 1px solid var(--line-strong);
    border-radius: 9px; padding: 12px 13px; position: relative;
    display: flex; flex-direction: column; gap: 3px;
}
.wf-step .n { font-family: var(--font-mono); font-size: 10px; color: var(--lane-c, var(--amber)); font-weight: 700; }
.wf-step .t { font-size: 12.5px; font-weight: 600; color: var(--steel-100); line-height: 1.3; }
.wf-step .d { font-size: 11px; color: var(--steel-400); }
.wf-arrow { display: flex; align-items: center; justify-content: center; color: var(--steel-600); padding: 0 6px; flex-shrink: 0; }
.wf-arrow svg { width: 18px; height: 18px; }
body[dir="rtl"] .wf-arrow svg { transform: scaleX(-1); }

/* decision diamond inline */
.wf-decision {
    flex: 0 0 auto; min-width: 120px; text-align: center;
    background: var(--amber-soft); border: 1px solid rgba(23,143,99,0.38);
    border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 3px;
    color: var(--amber);
}
.wf-decision .t { font-size: 12.5px; font-weight: 700; }
.wf-decision .d { font-size: 10.5px; color: var(--steel-300); }

/* branch outcomes */
.wf-branches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.wf-branch {
    flex: 1; min-width: 140px;
    border: 1px solid var(--line-strong); border-radius: 9px; padding: 11px 13px;
    background: var(--steel-850);
}
.wf-branch .bt { font-size: 12px; font-weight: 700; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.wf-branch .bt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bc, var(--steel-500)); }
.wf-branch .bd { font-size: 11px; color: var(--steel-400); }

/* approval ladder */
.wf-ladder { display: flex; flex-direction: column; gap: 0; }
.wf-rung { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.wf-rung:last-child { border-bottom: none; }
.wf-rung .lvl { width: 26px; height: 26px; border-radius: 7px; background: var(--lane-c, var(--amber)); color: #031b13; display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.wf-rung .rn { font-size: 13px; font-weight: 600; color: var(--steel-100); }
.wf-rung .ra { margin-inline-start: auto; font-size: 11px; color: var(--ok); font-weight: 600; }

/* ============================================================
   LIGHT THEME (day mode) — toggled via .light on <html>/<body>
   ============================================================ */
html.light, html.light body, .light {
    --steel-950: #eef1f6;   /* page background */
    --steel-900: #ffffff;   /* panels / sidebar */
    --steel-850: #f4f7fa;   /* subtle fills, table head */
    --steel-800: #eaeef3;   /* hover */
    --steel-700: #dde3ea;
    --steel-600: #c4ccd6;
    --steel-500: #8a99ab;
    --steel-300: #5d6b7e;   /* muted text */
    --steel-200: #36424f;
    --steel-100: #161d27;   /* main text */

    --line: rgba(15,30,50,0.08);
    --line-strong: rgba(15,30,50,0.14);

    --amber-soft: rgba(245,166,35,0.16);
    --teal-soft:  rgba(31,182,166,0.14);
    --ok-soft:    rgba(40,160,90,0.14);
    --danger-soft:rgba(210,60,60,0.12);

    --topbar-bg: rgba(255,255,255,0.88);
    --overlay-bg: rgba(20,30,45,0.45);
}
html.light body { background: var(--steel-950); color: var(--steel-100); }

/* topbar + overlay use variables so both themes work */
.topbar { background: var(--topbar-bg, rgba(18,24,33,0.85)); }
.modal-overlay { background: var(--overlay-bg, rgba(6,9,13,0.72)); }

/* light-mode shadows for depth (dark theme stays flat) */
html.light .kpi,
html.light .panel,
html.light .integ-card,
html.light .wf-lane,
html.light .modal { box-shadow: 0 1px 3px rgba(15,30,50,0.06), 0 1px 2px rgba(15,30,50,0.04); }
html.light .sidebar { box-shadow: 1px 0 3px rgba(15,30,50,0.04); }
html.light .login-formside { background: var(--steel-900); }
html.light .login-brandside {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(245,166,35,0.14) 0%, transparent 50%),
        linear-gradient(160deg, #1a222e 0%, #0f1620 100%);
}
/* keep brand side dark even in light mode (hero panel), text stays light there */
html.light .login-brandside .brand-text .name,
html.light .login-brandside .brand-hero h2,
html.light .login-brandside .brand-stats .stat .n { color: #fff; }
html.light .login-brandside .brand-text .name .rig,
html.light .login-brandside .brand-text .name .nex { color: #fff; -webkit-text-fill-color: #fff; }
html.light .login-brandside .brand-hero h2 em { color: var(--amber); }

/* theme toggle icon swap */
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
html.light .theme-toggle .ic-sun { display: block; }
html.light .theme-toggle .ic-moon { display: none; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle.login-theme {
    position: absolute; top: 24px; inset-inline-end: 140px; z-index: 5;
}

/* ============================================================
   MOBILE — proper responsive support
   ============================================================ */
/* table horizontal scroll wrapper */
.tbl-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* sidebar backdrop on mobile */
.sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(6,9,13,0.55);
    z-index: 80; backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 900px) {
    .panel-body.flush { overflow-x: auto; }       /* tables scroll */
    .tbl { min-width: 640px; }                      /* force scroll, no squish */
    .content { padding: 16px; }
    .topbar { padding: 0 12px; gap: 10px; }
    .searchbox { display: none; }                   /* free up space on mobile */
    .lang-toggle { padding: 7px 11px; font-size: 12px; }
    .lang-toggle span:not(.name) { }                /* keep label */
    .page-head .titles h1 { font-size: 19px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi .kpi-val { font-size: 23px; }
    .wf-step, .wf-decision, .wf-branch { min-width: 120px; }
}

@media (max-width: 560px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .page-head { flex-direction: column; }
    .page-head .actions { margin-inline-start: 0; width: 100%; }
    .page-head .actions .btn { flex: 1; justify-content: center; }
    .lang-toggle { font-size: 0; padding: 8px; }    /* icon only */
    .lang-toggle svg { font-size: 14px; }
    .modal { max-height: 92vh; }
    .modal-foot { flex-wrap: wrap; }
    .modal-foot .btn { flex: 1; justify-content: center; }
    .wf-flow { flex-direction: column; }
    .wf-step, .wf-decision { max-width: none; width: 100%; }
    .wf-arrow { transform: rotate(90deg); padding: 4px 0; }
    body[dir="rtl"] .wf-arrow svg { transform: none; }   /* vertical: point down, not flipped */
    .chain { gap: 4px; }
    .brand-text .tg { display: block; }              /* show tagline under logo on mobile */
    .app-footer { font-size: 10px; letter-spacing: 1px; }
}

/* ============================================================
   PAIRED TOP CONTROLS (language + theme together)
   ============================================================ */
.top-controls { display: inline-flex; align-items: center; gap: 8px; }
/* on login, float the pair to the top corner */
.login-wrap ~ .top-controls, body > .top-controls {
    position: absolute; top: 24px; inset-inline-end: 26px; z-index: 6;
}

/* ============================================================
   KILL ALL BLUE — amber-first interaction states
   ============================================================ */
:root { --focus: var(--amber); }

/* form controls use amber, never blue */
input, textarea, select, button, a { accent-color: var(--amber); }
html, body { -webkit-tap-highlight-color: rgba(23,143,99,0.32); }

/* remove default focus ring everywhere, add amber focus-visible ring */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
    border-radius: 4px;
}
/* inputs/selects get an amber ring instead of the browser blue glow */
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-soft);
}
/* buttons: amber focus ring, no blue frame */
button:focus-visible, .btn:focus-visible, a.btn:focus-visible,
.icon-btn:focus-visible, .nav-item:focus-visible, .lang-toggle:focus-visible,
.tab:focus-visible, .close:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
    box-shadow: none;
}

/* text selection — amber tint, no blue */
::selection { background: rgba(245,166,35,0.30); color: inherit; }
::-moz-selection { background: rgba(245,166,35,0.30); color: inherit; }

/* checkbox / radio accent */
input[type="checkbox"], input[type="radio"] { accent-color: var(--amber); }

/* kill Chrome autofill blue/yellow background + blue text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--steel-100);
    -webkit-box-shadow: 0 0 0 1000px var(--steel-850) inset;
    caret-color: var(--amber);
    transition: background-color 9999s ease-out 0s;
}
html.light input:-webkit-autofill,
html.light input:-webkit-autofill:hover,
html.light input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--steel-100);
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

/* date/time picker indicator tint (kills blue calendar accent where supported) */
input[type="date"], input[type="month"], input[type="time"], input[type="datetime-local"] { accent-color: var(--amber); color-scheme: dark; }
html.light input[type="date"], html.light input[type="month"],
html.light input[type="time"], html.light input[type="datetime-local"] { color-scheme: light; }

/* links never default-blue */
a { color: inherit; }

/* ============================================================
   CODE PROTECTION — discourage text/content lifting
   (form fields stay selectable for usability)
   ============================================================ */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}
img, svg { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

/* ============================================================
   SWIM-LANE — end-to-end operation workflow
   ============================================================ */
.swim {
    background: var(--steel-900); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
}
.swim-row { display: grid; grid-template-columns: 190px 1fr; border-bottom: 1px solid var(--line); }
.swim-row:last-child { border-bottom: none; }
.swim-label {
    display: flex; align-items: center; gap: 11px; padding: 16px;
    background: var(--steel-850); border-inline-end: 1px solid var(--line);
}
.swim-label .si { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--lane-c,var(--amber)); color: #15110a; flex-shrink: 0; }
.swim-label .sn { font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--steel-100); }
.swim-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 14px 16px; }
.swim-node {
    background: var(--steel-850); border: 1px solid var(--line-strong);
    border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 600;
    color: var(--steel-100); position: relative; max-width: 168px; line-height: 1.3;
}
.swim-node .doc { position: absolute; top: -8px; inset-inline-start: -8px; width: 19px; height: 19px; border-radius: 50%; background: var(--amber); color: #15110a; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.swim-node.doc-node { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.4); color: #c4b5fd; }
.swim-node.sub-node { background: rgba(217,119,43,0.12); border-color: rgba(217,119,43,0.4); color: var(--crude); }
.swim-node.cond-node { background: var(--teal-soft); border-color: rgba(31,182,166,0.4); color: var(--teal); }
.swim-dec {
    background: var(--amber-soft); border: 1px solid rgba(245,166,35,0.4);
    color: var(--amber); border-radius: 8px; padding: 9px 12px; font-size: 12px; font-weight: 700;
    text-align: center; max-width: 150px;
}
.swim-arr { color: var(--steel-600); display: flex; align-items: center; padding: 0 5px; }
.swim-arr svg { width: 16px; height: 16px; }
body[dir="rtl"] .swim-arr svg { transform: scaleX(-1); }
.swim-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 18px; }
.swim-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--steel-300); }
.swim-legend .sw { width: 22px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); }
@media (max-width: 760px){
    .swim-row { grid-template-columns: 1fr; }
    .swim-label { border-inline-end: none; border-bottom: 1px solid var(--line); }
    .swim-flow { padding: 12px; }
}

/* ============================================================
   APPROVALS INBOX
   ============================================================ */
.bell-link { position: relative; }
.bell-count {
    position: absolute; top: -5px; inset-inline-end: -5px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--amber); color: #15110a; font-size: 10.5px; font-weight: 800;
    display: grid; place-items: center; border: 2px solid var(--steel-900);
}
html.light .bell-count { border-color: var(--steel-900); }

/* approval row */
.appr-type {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 7px;
}
.appr-type svg { width: 14px; height: 14px; }
.appr-type.job { background: var(--amber-soft); color: var(--amber); }
.appr-type.ticket { background: var(--teal-soft); color: var(--teal); }
.appr-type.bonus { background: rgba(217,119,43,0.14); color: var(--crude); }
.appr-type.invoice { background: var(--teal-soft); color: var(--teal); }
.appr-type.store { background: rgba(86,105,127,0.2); color: var(--steel-200); }
.appr-type.po { background: rgba(167,139,250,0.14); color: #c4b5fd; }

.appr-stage { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--steel-300); }
.appr-stage .pill { background: var(--steel-800); border: 1px solid var(--line-strong); border-radius: 6px; padding: 1px 7px; font-size: 11px; color: var(--steel-200); }
.appr-stage .pill.me { background: var(--amber); color: #15110a; border-color: var(--amber); font-weight: 700; }

.appr-actions { display: flex; gap: 6px; }
.btn-approve { background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(67,196,120,0.3); }
.btn-approve:hover { background: rgba(67,196,120,0.2); }
.btn-return { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(226,85,85,0.3); }
.btn-return:hover { background: rgba(226,85,85,0.2); }

.appr-check { width: 17px; height: 17px; accent-color: var(--amber); cursor: pointer; }
.bulk-bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px;
    background: var(--amber-soft); border: 1px solid rgba(23,143,99,0.32);
    border-radius: var(--radius-sm); margin-bottom: 16px;
}
.bulk-bar .cnt { font-weight: 700; color: var(--amber); }
.bulk-bar .sp { margin-inline-start: auto; }

/* ============================================================
   NOTIFICATIONS — bell dropdown + full page
   ============================================================ */
.bell-wrap { position: relative; }
.notif-panel {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 60;
    width: 360px; max-width: calc(100vw - 24px);
    background: var(--steel-900); border: 1px solid var(--line-strong);
    border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    overflow: hidden; display: none;
}
.notif-panel.open { display: block; animation: slideIn .18s ease; }
.notif-phead { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notif-phead h4 { font-size: 14px; font-weight: 700; }
.notif-phead .mark { margin-inline-start: auto; font-size: 12px; color: var(--amber); font-weight: 600; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
    display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line);
    transition: background .12s; cursor: pointer;
}
.notif-item:hover { background: var(--steel-850); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(245,166,35,0.04); }
.notif-item.unread::before { content: ""; position: absolute; }
.notif-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.notif-ic svg { width: 18px; height: 18px; }
.notif-ic.crit { background: var(--danger-soft); color: var(--danger); }
.notif-ic.warn { background: var(--amber-soft); color: var(--amber); }
.notif-ic.info { background: var(--teal-soft); color: var(--teal); }
.notif-ic.ok { background: var(--ok-soft); color: var(--ok); }
.notif-body { flex: 1; min-width: 0; }
.notif-body .nt { font-size: 13px; font-weight: 600; color: var(--steel-100); line-height: 1.35; }
.notif-body .nd { font-size: 12px; color: var(--steel-300); margin-top: 2px; }
.notif-body .nm { font-size: 11px; color: var(--steel-500); margin-top: 4px; }
.notif-dotnew { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex-shrink: 0; margin-top: 5px; }
.notif-pfoot { padding: 12px 16px; text-align: center; border-top: 1px solid var(--line); }
.notif-pfoot a { font-size: 13px; font-weight: 600; color: var(--amber); }

/* full page notif cards */
.notif-feed { display: flex; flex-direction: column; }
.notif-feed .notif-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 9px; background: var(--steel-900); position: relative; }
.notif-feed .notif-item.unread { border-color: rgba(23,143,99,0.32); }
.notif-day { font-size: 11px; letter-spacing: 1px; color: var(--steel-500); font-weight: 700; margin: 14px 0 10px; }

@media (max-width: 560px){
    .notif-panel { position: fixed; top: var(--header-h); inset-inline: 8px; width: auto; }
}

/* ============================================================
   MASTER DATA — entity rail + table
   ============================================================ */
.md-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 16px; align-items: start; }
.md-rail { background: var(--steel-900); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.md-rail-head { padding: 13px 16px; font-size: 11px; letter-spacing: 1px; font-weight: 700; color: var(--steel-500); border-bottom: 1px solid var(--line); }
.md-ent {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: start;
    padding: 11px 16px; background: none; border: none; border-bottom: 1px solid var(--line);
    color: var(--steel-300); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s;
}
.md-ent:last-child { border-bottom: none; }
.md-ent svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; }
.md-ent:hover { background: var(--steel-850); color: var(--steel-100); }
.md-ent.active { background: var(--amber-soft); color: var(--amber); position: relative; }
.md-ent.active::before { content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--amber); }
.md-ent .cnt { margin-inline-start: auto; font-size: 11px; background: var(--steel-800); color: var(--steel-300); padding: 1px 8px; border-radius: 10px; }
.md-ent.active .cnt { background: var(--amber); color: #15110a; }
@media (max-width: 820px){
    .md-wrap { grid-template-columns: 1fr; }
    .md-rail { display: flex; overflow-x: auto; }
    .md-rail-head { display: none; }
    .md-ent { border-bottom: none; border-inline-end: 1px solid var(--line); white-space: nowrap; }
    .md-ent.active::before { inset-inline-start: 8px; inset-block-end: 0; top: auto; height: 3px; width: auto; inset-inline-end: 8px; }
}

/* ============================================================
   GLOBAL SEARCH
   ============================================================ */
.searchbox { position: relative; }
.search-results {
    position: absolute; top: calc(100% + 10px); inset-inline-start: 0;
    width: 420px; max-width: calc(100vw - 40px); z-index: 70;
    background: var(--steel-900); border: 1px solid var(--line-strong);
    border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.45);
    overflow: hidden; display: none; max-height: 440px; overflow-y: auto;
}
.search-results.open { display: block; animation: slideIn .16s ease; }
.sr-group { padding: 9px 14px 4px; font-size: 10.5px; letter-spacing: 1px; font-weight: 700; color: var(--steel-500); }
.sr-item { display: flex; align-items: center; gap: 11px; padding: 10px 14px; cursor: pointer; transition: background .12s; }
.sr-item:hover, .sr-item.sel { background: var(--steel-850); }
.sr-ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: var(--steel-800); color: var(--steel-300); }
.sr-ic svg { width: 16px; height: 16px; }
.sr-ic.job { background: var(--amber-soft); color: var(--amber); }
.sr-ic.ticket { background: var(--teal-soft); color: var(--teal); }
.sr-ic.customer { background: rgba(167,139,250,0.14); color: #c4b5fd; }
.sr-ic.invoice { background: var(--teal-soft); color: var(--teal); }
.sr-ic.incident { background: var(--danger-soft); color: var(--danger); }
.sr-ic.well, .sr-ic.asset { background: rgba(217,119,43,0.14); color: var(--crude); }
.sr-body { flex: 1; min-width: 0; }
.sr-body .l { font-size: 13px; font-weight: 600; color: var(--steel-100); }
.sr-body .l b { color: var(--amber); font-weight: 700; }
.sr-body .s { font-size: 11.5px; color: var(--steel-400); }
.sr-type { font-size: 10.5px; color: var(--steel-500); font-family: var(--font-mono); }
.sr-empty { padding: 24px; text-align: center; color: var(--steel-400); font-size: 13px; }
.sr-hint { padding: 9px 14px; font-size: 11px; color: var(--steel-500); border-top: 1px solid var(--line); display: flex; gap: 12px; }
.sr-hint kbd { background: var(--steel-800); border: 1px solid var(--line-strong); border-radius: 4px; padding: 1px 6px; font-size: 10.5px; font-family: var(--font-mono); }

/* ============================================================
   ROLES & ACCESS — permission matrix
   ============================================================ */
.perm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.perm-table th { text-align: center; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--steel-500); font-weight: 700; padding: 12px 10px; border-bottom: 1px solid var(--line); background: var(--steel-850); }
.perm-table th:first-child { text-align: start; }
.perm-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.perm-table td:first-child { text-align: start; font-weight: 600; color: var(--steel-100); }
.perm-table tr:last-child td { border-bottom: none; }
.perm-table tbody tr:hover { background: var(--steel-850); }
.perm { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; }
.perm.full { background: var(--ok-soft); color: var(--ok); }
.perm.edit { background: var(--amber-soft); color: var(--amber); }
.perm.view { background: var(--teal-soft); color: var(--teal); }
.perm.none { background: var(--steel-800); color: var(--steel-500); }
.role-card { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--steel-900); }
.role-card .ri { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); flex-shrink: 0; }
.role-card .rn { font-weight: 700; font-size: 14px; }
.role-card .rc { font-size: 12px; color: var(--steel-300); }
.role-card .rb { margin-inline-start: auto; }

/* login mobile brand (shown only when brandside is hidden) */
.login-mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-mobile-brand img { width: 42px; height: 42px; object-fit: contain; }
.login-mobile-brand .name { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--steel-100); }
.login-mobile-brand .name .rig, .login-mobile-brand .name .nex { color: var(--steel-100); -webkit-text-fill-color: var(--steel-100); }
@media (max-width: 900px){ .login-mobile-brand { display: flex; } }

/* mobile in-app: show a small logo in the topbar next to menu button */
.topbar-logo { display: none; width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
@media (max-width: 900px){ .topbar-logo { display: block; } }


/* ============================================================
   FINEX ADDITIONS — international financial interface
   ============================================================ */
.logo-wordmark { height: 44px; width: auto; display:block; }
.sidebar .logo-wordmark { max-width: 166px; }
.brand-logo.logo-finex { width: 48px; height: 48px; border-radius: 12px; border:1px solid var(--line-strong); background: var(--steel-850); }
.login-card .brand-mark { margin-bottom: 28px; }
.login-actions { display:flex; gap:10px; align-items:center; margin-top: 18px; }
.login-actions .btn { width: 100%; }
.system-pill { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--line-strong); border-radius:20px; color:var(--steel-300); font-size:12px; background:rgba(255,255,255,0.03); }
.system-pill svg { width:14px; height:14px; color:var(--amber); }
.hero-metrics { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:24px; max-width: 520px; }
.hero-metric { padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,0.03); }
.hero-metric .v { font-size:22px; font-weight:800; color:var(--steel-100); }
.hero-metric .l { font-size:11px; color:var(--steel-300); margin-top:3px; }
.finex-watermark { position:absolute; inset-inline-end:8%; top:14%; width:240px; height:240px; border-radius:50%; border:1px solid var(--line); opacity:.18; }
.finex-watermark::before, .finex-watermark::after { content:""; position:absolute; inset:38px; border:1px solid var(--line-strong); border-radius:50%; }
.finex-watermark::after { inset:78px; background:var(--amber-soft); }
.badge { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 9px; font-size:11.5px; font-weight:700; border:1px solid transparent; white-space:nowrap; }
.badge.ok { color:var(--ok); background:var(--ok-soft); border-color:rgba(67,196,120,.22); }
.badge.warn { color:#d7a132; background:rgba(215,161,50,.12); border-color:rgba(215,161,50,.24); }
.badge.info { color:#58b8ff; background:rgba(88,184,255,.12); border-color:rgba(88,184,255,.22); }
.badge.danger { color:var(--danger); background:var(--danger-soft); border-color:rgba(226,85,85,.22); }
.badge.neutral { color:var(--steel-200); background:var(--steel-800); border-color:var(--line-strong); }
.currency { font-family:var(--font-mono); font-weight:700; letter-spacing:-.3px; }
.mini-ledger { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.ledger-card { background:var(--steel-850); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; }
.ledger-card .h { color:var(--steel-300); font-size:12px; }
.ledger-card .v { color:var(--steel-100); font-size:20px; font-weight:800; margin-top:4px; }
.ledger-card .s { color:var(--steel-400); font-size:11px; margin-top:2px; }
.metric-bars { display:flex; flex-direction:column; gap:14px; }
.metric-row { display:grid; grid-template-columns: 160px 1fr 54px; gap:12px; align-items:center; }
body[dir="rtl"] .metric-row { grid-template-columns: 170px 1fr 54px; }
.bar-track { height:8px; background:var(--steel-800); border-radius:6px; overflow:hidden; border:1px solid var(--line); }
.bar-fill { display:block; height:100%; background:linear-gradient(90deg, var(--amber-dim), var(--amber)); border-radius:6px; }
.w-14{width:14%}.w-22{width:22%}.w-38{width:38%}.w-45{width:45%}.w-56{width:56%}.w-63{width:63%}.w-71{width:71%}.w-76{width:76%}.w-82{width:82%}.w-89{width:89%}.w-94{width:94%}
.statement-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; }
.account-code { font-family:var(--font-mono); font-size:12px; color:var(--steel-400); }
.doc-stack { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:14px; }
.doc-card { background:var(--steel-850); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; gap:12px; align-items:flex-start; }
.doc-card .doc-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--amber-soft); color:var(--amber); flex-shrink:0; }
.doc-card h4 { font-size:13.5px; margin-bottom:3px; }
.doc-card p { color:var(--steel-300); font-size:12px; }
.plate-card { display:grid; grid-template-columns: 1fr 280px; gap:18px; }
.price-card { background:linear-gradient(160deg, var(--steel-850), var(--steel-900)); border:1px solid var(--line-strong); border-radius:var(--radius); padding:18px; }
.price-card .big { font-size:34px; font-weight:800; color:var(--amber); line-height:1; }
.price-card .lbl { color:var(--steel-300); font-size:12px; margin-top:5px; }
.audit-chain { display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.audit-step { padding:14px; background:var(--steel-850); border:1px solid var(--line); border-radius:var(--radius-sm); }
.audit-step .n { color:var(--amber); font-family:var(--font-mono); font-weight:800; font-size:11px; }
.audit-step .t { color:var(--steel-100); font-weight:700; font-size:13px; margin-top:4px; }
.audit-step .d { color:var(--steel-300); font-size:11.5px; margin-top:2px; }
.app-footer a { color: var(--amber); }
.search-results { position:absolute; top:44px; inset-inline-start:0; inset-inline-end:0; background:var(--steel-900); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:0 18px 45px rgba(0,0,0,.35); overflow:hidden; display:none; z-index:80; }
.search-results.open { display:block; }
.sr-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); }
.sr-item:hover { background:var(--steel-850); }
.sr-ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--amber-soft); color:var(--amber); flex-shrink:0; }
.sr-body .l { font-size:12.5px; font-weight:700; }
.sr-body .s { font-size:11px; color:var(--steel-300); }
.sr-empty { padding:14px; color:var(--steel-300); font-size:12px; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80; }
.sidebar-backdrop.show { display:block; }
@media (max-width: 900px){ .statement-grid,.plate-card{grid-template-columns:1fr}.hero-metrics{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr}.searchbox{min-width:0;flex:1}.brand-stats{display:none}.finex-watermark{display:none} }