:root {
    --sidebar-bg: #0f172a;
    --sidebar-bg-2: #111c33;
    --sidebar-fg: #cbd5e1;
    --sidebar-active: #2563eb;
    --brand: #2563eb;
    --ink: #1e293b;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #f1f5f9;
    --pos: #059669;
    --neg: #dc2626;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

/* ---------- App shell ---------- */
/* Fixed-height shell: the chrome (sidebar/topbar/tab bar) stays put and each
   tab scrolls inside its own pane, so opening several screens never scrolls the
   whole window. */
/* 100dvh (dynamic viewport height) tracks the *visible* area on mobile — plain
   100vh spans behind the browser's URL/tool bars, which pushed the sticky bottom
   action bar (Save / Cancel) off the bottom of the screen where it could not be
   tapped. dvh keeps 100vh as the fallback for browsers that don't support it. */
.app-shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }

.sidebar {
    width: 250px; background: var(--sidebar-bg); color: var(--sidebar-fg);
    position: fixed; top: 0; bottom: 0; left: 0; overflow: hidden; z-index: 30;
    display: flex; flex-direction: column;
}
.sidebar .brand {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem;
    font-size: 1.15rem; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar .brand i { color: #38bdf8; font-size: 1.35rem; }
.nav-menu { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .5rem 0 1rem; }

/* ---------- Sidebar footer: signed-in user + logout (pinned to the bottom) ---------- */
.sidebar-footer {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .7rem .85rem;
    background: var(--sidebar-bg);
}
.sb-user { display: flex; align-items: center; gap: .6rem; }
.sb-avatar {
    width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px;
    display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--ds-accent, #0D9488) 0%, var(--ds-accent-active, #115E59) 100%);
}
.sb-user-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.sb-user-name { color: #fff; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-meta { color: var(--ds-slate-400, #94A3B8); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-logout-form { margin: 0; flex: 0 0 auto; }
.sb-logout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 1.05rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--ds-slate-300, #CBD5E1);
    transition: background-color .15s, color .15s, border-color .15s;
}
.sb-logout:hover { background: rgba(225,29,72,.16); border-color: rgba(225,29,72,.45); color: #FECDD3; }
.sb-logout:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(225,29,72,.35); }
.nav-section {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .08em;
    color: #64748b; padding: 1rem 1.25rem .35rem;
}
.nav-menu .nav-link {
    display: flex; align-items: center; gap: .65rem; padding: .55rem 1.25rem;
    color: var(--sidebar-fg); font-size: .9rem; text-decoration: none; border-left: 3px solid transparent;
}
.nav-menu .nav-link i { width: 18px; text-align: center; opacity: .85; }
.nav-menu .nav-link:hover { background: var(--sidebar-bg-2); color: #fff; }
.nav-menu .nav-link.active { background: var(--sidebar-bg-2); color: #fff; border-left-color: var(--sidebar-active); }

/* ---------- Collapsible accordion groups ---------- */
.nav-group-header {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: transparent; border: 0; cursor: pointer; text-align: left;
    font-family: inherit; font-weight: inherit;
}
.nav-group-header:hover { color: #94a3b8; }
.nav-group-header .nav-caret { font-size: .7rem; opacity: .7; transition: transform .18s ease; }
.nav-group.collapsed .nav-group-header .nav-caret { transform: rotate(-90deg); }
.nav-group-body { overflow: hidden; }
.nav-group.collapsed .nav-group-body { display: none; }

/* ---------- Nested transaction sub-menus (Purchase / Sales / ...) ---------- */
.nav-subgroup .nav-subheader {
    font-size: .86rem; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--sidebar-fg); padding-top: .5rem; padding-bottom: .5rem;
}
.nav-subgroup .nav-subheader > span { display: flex; align-items: center; gap: .65rem; }
.nav-subgroup .nav-subheader:hover { background: var(--sidebar-bg-2); color: #fff; }
.nav-subgroup .nav-subheader .nav-caret { font-size: .65rem; }
.nav-menu .nav-link.nav-sublink { padding-left: 2.6rem; font-size: .86rem; }
.nav-menu .nav-link.nav-sublink i { font-size: .7rem; }

.main { margin-left: 250px; flex: 1; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; }

/* ---------- Collapsible sidebar (desktop icon rail) ---------- */
.sidebar { transition: width .18s ease; }
.main { transition: margin-left .18s ease; }
.ea-menu-btn {
    border: none; background: transparent; color: var(--muted); font-size: 1.35rem; line-height: 1;
    width: 38px; height: 38px; align-items: center; justify-content: center; cursor: pointer; border-radius: 9px;
    transition: background-color .15s, color .15s;
}
.ea-menu-btn:hover { background: #eef2ff; color: var(--brand); }

@media (min-width: 992px) {
    .sidebar-collapsed .sidebar { width: 72px; }
    .sidebar-collapsed .main { margin-left: 72px; }
    .sidebar-collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sidebar-collapsed .sidebar .brand span { display: none; }
    /* font-size:0 hides the raw label text node while the icon keeps its own size */
    .sidebar-collapsed .nav-menu .nav-link { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; font-size: 0; }
    .sidebar-collapsed .nav-menu .nav-link i { font-size: 1.15rem; opacity: 1; }
    .sidebar-collapsed .nav-section { font-size: 0; padding: .55rem 0; justify-content: center; }
    .sidebar-collapsed .nav-section::after { content: ""; display: block; height: 1px; background: rgba(255,255,255,.09); margin: 0 .9rem; }
    /* In the icon rail, the accordion is disabled: hide carets and always show every group's items */
    .sidebar-collapsed .nav-group-header { pointer-events: none; }
    .sidebar-collapsed .nav-caret { display: none; }
    .sidebar-collapsed .nav-group.collapsed .nav-group-body { display: block; }

    /* Collapsed footer: just the avatar stacked over the logout icon, centered */
    .sidebar-collapsed .sidebar-footer { padding: .6rem 0; }
    .sidebar-collapsed .sb-user { flex-direction: column; gap: .5rem; }
    .sidebar-collapsed .sb-user-info { display: none; }
}

/* Hover tooltip for the collapsed icon rail (floated on <body>, positioned by JS) */
.ea-nav-tip {
    position: fixed; z-index: 1080; pointer-events: none;
    background: #0f172a; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.1;
    padding: .38rem .62rem; border-radius: 7px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(2,6,23,.28);
    transform: translateY(-50%); opacity: 0; transition: opacity .12s ease;
}
.ea-nav-tip.show { opacity: 1; }
.ea-nav-tip::before {
    content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    border: 5px solid transparent; border-right-color: #0f172a;
}

.topbar {
    height: 60px; background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 20;
}
.topbar .context { display: flex; gap: .5rem; flex-wrap: wrap; }
.badge-ctx {
    background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
    padding: .28rem .6rem; border-radius: 6px; font-size: .78rem; font-weight: 600;
}
/* Branch / Year badges are buttons (they open the Branch Change popup) but must
   read exactly like the static Company badge next to them. */
.badge-ctx-btn { cursor: pointer; font-family: inherit; line-height: inherit; display: inline-flex; align-items: center; gap: .3rem; }
.badge-ctx-btn:hover { background: #dbeafe; border-color: #bfdbfe; }
.badge-ctx-btn .bx-caret { font-size: .7rem; opacity: .65; }

.topbar .user-area { margin-left: auto; display: flex; align-items: center; font-size: .88rem; color: var(--muted); }

.content { padding: 1.5rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.page-head h4 { margin: 0; font-weight: 700; }

/* ---------- Cards / tables ---------- */
.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-weight: 600; }
.form-label { font-weight: 600; font-size: .82rem; color: #475569; }

/* ---------- Data grid: toolbar ---------- */
.dataTables_wrapper .ea-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-bottom: .9rem;
}
.dataTables_wrapper .ea-toolbar-l,
.dataTables_wrapper .ea-toolbar-r { display: flex; align-items: center; gap: .5rem; margin: 0; }
.dataTables_wrapper .dataTables_filter { margin: 0; }
.dataTables_wrapper .dataTables_filter label {
    margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); font-weight: 600;
}

/* "Show rows" segmented control */
.ea-pagelen { display: flex; align-items: center; gap: .55rem; }
.ea-pagelen-lbl {
    font-size: .82rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: .35rem;
}
.ea-pagelen-lbl i { color: var(--brand); }
.ea-seg {
    display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: .2rem; gap: .12rem; box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.ea-seg button {
    border: none; background: transparent; border-radius: 999px; padding: .3rem .72rem;
    font-size: .82rem; font-weight: 700; color: var(--muted); cursor: pointer; line-height: 1;
    transition: color .15s, background-color .15s, box-shadow .15s;
}
.ea-seg button:hover { color: var(--brand); background: #eff6ff; }
.ea-seg button.active {
    color: #fff; background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
}

.dataTables_wrapper .dataTables_filter input {
    border-radius: 999px; border: 1px solid var(--line); padding: .45rem .95rem .45rem 2.1rem;
    min-width: 15rem; font-size: .88rem; background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E")
        no-repeat .8rem center;
    transition: border-color .15s, box-shadow .15s;
}
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}
.ea-adv-toggle { border-radius: 999px; font-weight: 600; }
.ea-adv-toggle.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Data grid: advanced search panel ---------- */
.ea-adv-search {
    background: #f8fafc; border: 1px solid var(--line); border-radius: 12px;
    padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.ea-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.ea-adv-field { display: flex; flex-direction: column; gap: .25rem; }
.ea-adv-field label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--muted);
}
.ea-adv-field input { border-radius: 8px; }
.ea-adv-field-wide { grid-column: span 2; }
.ea-adv-range { display: flex; align-items: center; gap: .4rem; }
.ea-adv-range input { flex: 1 1 0; min-width: 0; }
.ea-adv-sep { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.ea-adv-actions { display: flex; justify-content: flex-end; margin-top: .85rem; }
@media (max-width: 575px) { .ea-adv-field-wide { grid-column: auto; } }

/* ---------- Data grid: colored card accent ---------- */
.card:has(.dataTable) { position: relative; overflow: hidden; }
.card:has(.dataTable)::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #ec4899 100%);
}

/* ---------- Data grid: table ---------- */
table.dataTable { border-collapse: separate !important; border-spacing: 0; }
table.dataTable thead th {
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    font-weight: 700; color: #3730a3; border-bottom: 2px solid #c7d2fe;
    padding-top: .7rem; padding-bottom: .7rem; white-space: nowrap;
}
table.dataTable thead th:first-child { border-top-left-radius: 10px; }
table.dataTable thead th:last-child { border-top-right-radius: 10px; }
.table td, .table th { vertical-align: middle; }
table.dataTable tbody td { padding-top: .6rem; padding-bottom: .6rem; font-size: .9rem; border-bottom: 1px solid #eef2f7; }
table.dataTable tbody td:first-child { font-weight: 700; color: #1d4ed8; }
table.dataTable tbody tr:nth-child(even) > td { background-color: #f8faff; }
table.dataTable.table-hover tbody tr { transition: background-color .12s; }
table.dataTable.table-hover tbody tr:hover > td { background-color: #eaf1ff; }
table.dataTable tbody tr:hover .btn-outline-secondary { border-color: #cbd5e1; }
/* sort arrows tinted to match the indigo header */
table.dataTable thead th.sorting:before, table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before, table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before, table.dataTable thead th.sorting_desc:after {
    color: #6366f1;
}

/* ---------- Data grid: footer ---------- */
.dataTables_wrapper .ea-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap; margin-top: .9rem;
}
.dataTables_wrapper .dataTables_info { padding: 0; font-size: .82rem; color: var(--muted); }
.dataTables_wrapper .dataTables_paginate { margin: 0; }
.dataTables_wrapper .pagination { margin: 0; gap: .25rem; }
.dataTables_wrapper .pagination .page-link {
    border-radius: 8px; border: 1px solid var(--line); color: var(--ink);
    padding: .32rem .65rem; font-size: .82rem; display: flex; align-items: center;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--brand); border-color: var(--brand); color: #fff;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link { color: #cbd5e1; background: #fff; }
.dataTables_wrapper .pagination .page-link:hover {
    background: #eff6ff; border-color: #bfdbfe; color: var(--brand);
}
.dataTables_wrapper .pagination .page-item.active .page-link:hover { color: #fff; }
.dataTables_wrapper .pagination .page-link:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.14); }

@media (max-width: 575px) {
    .dataTables_wrapper .ea-toolbar,
    .dataTables_wrapper .ea-foot { flex-direction: column; align-items: stretch; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
}

/* ---------- Dashboard KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.kpi {
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
}
.kpi .kpi-icon {
    width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center;
    font-size: 1.3rem; color: #fff; flex-shrink: 0;
}
.kpi .kpi-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi .kpi-value { font-size: 1.4rem; font-weight: 700; }
.i-sales { background: #2563eb; } .i-purchase { background: #7c3aed; }
.i-collect { background: #059669; } .i-pay { background: #db2777; }
.i-out { background: #d97706; } .i-recv { background: #0891b2; } .i-payb { background: #dc2626; }

/* ---------- Auth ---------- */
.auth-body {
    min-height: 100vh; display: grid; place-items: center;
    background: radial-gradient(1200px 600px at 20% -10%, #1e3a8a 0%, transparent 55%), #0f172a;
    padding: 1.5rem;
}
.auth-wrap { width: 100%; max-width: 430px; }
.auth-card { background: #fff; border-radius: 14px; padding: 1.75rem; box-shadow: 0 20px 45px rgba(2,6,23,.45); }
.auth-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.35rem; }
.auth-brand i { font-size: 2rem; color: #2563eb; }
.auth-title { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.auth-sub { font-size: .8rem; color: var(--muted); }
.auth-footer { text-align: center; color: #94a3b8; font-size: .78rem; margin-top: 1rem; }
.auth-links { display: flex; justify-content: space-between; font-size: .82rem; margin-top: .25rem; }

.line-table td { padding: .35rem; }
.totals-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; }
.totals-box .row-t { display: flex; justify-content: space-between; padding: .2rem 0; }
.totals-box .grand { font-size: 1.15rem; font-weight: 700; border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .5rem; }

/* ---------- Mobile: the sidebar is a slide-over drawer ----------
   Below lg the menu overlays the page instead of reserving a column. An
   overlay with no way out is a trap — which is exactly what it was: the
   hamburger that opened it ends up UNDERNEATH the panel, so once open the
   menu could not be closed again. It now ships with three ways out: the X
   in its own header, the dimmed backdrop behind it, and Esc. Tapping any
   menu entry closes it too (see _Layout.cshtml). */
.sb-close {
    display: none; margin-left: auto; flex: 0 0 auto; padding: 0;
    width: 34px; height: 34px; border-radius: 9px;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    color: #e2e8f0; font-size: .95rem; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sb-close:hover, .sb-close:focus-visible { background: rgba(255,255,255,.16); color: #fff; outline: none; }
[dir="rtl"] .sb-close { margin-left: 0; margin-right: auto; }

/* Sits between the topbar (z 20) and the drawer (z 30) so it dims the page
   without ever covering the panel it belongs to. */
.ea-backdrop {
    position: fixed; inset: 0; z-index: 25; background: rgba(2,6,23,.55);
    opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.ea-backdrop.show { opacity: 1; visibility: visible; }
@media (min-width: 992px) { .ea-backdrop { display: none; } }

@media (max-width: 991.98px) {
    /* Never wider than the screen it slides over — on a small phone a fixed
       250px leaves too little of the page visible to aim the dismiss tap at.
       dvh for the same reason .app-shell uses it: top:0/bottom:0 spans the
       LARGE viewport on iOS, which runs the signed-in user + logout row at the
       bottom of the panel in behind Safari's toolbar. */
    .sidebar {
        width: min(250px, 84vw); transform: translateX(-100%); transition: transform .22s ease;
        bottom: auto; height: 100vh; height: 100dvh;
    }
    .sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(2,6,23,.5); }
    .main { margin-left: 0; }
    .sb-close { display: inline-flex; }
    .topbar { padding: 0 .85rem; gap: .6rem; }
    .content { padding: 1rem; }
}

/* A grid wider than the phone must scroll inside its own card, not drag the
   page sideways with it. Full width and no scroller on desktop, so nothing
   about the existing tables changes there. */
.ea-tblscroll { width: 100%; }
@media (max-width: 991.98px) {
    .ea-tblscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ea-tblscroll > table { min-width: 100%; }
}

/* ---------- In-app tabs (ERP multi-screen workspace) ----------
   A menu click opens the target screen as a tab inside the content area
   (each tab is an isolated <iframe>, so screens keep their own state and
   never collide). Mirrors the Zoho/Tally/SAP/QuickBooks tab strip. */
.ea-tabbar {
    display: flex; align-items: stretch; gap: 3px;
    flex: 0 0 auto; min-height: 40px; padding: 6px 8px 0;
    background: #e6ecf4; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.ea-tabbar::-webkit-scrollbar { height: 6px; }
.ea-tabbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.ea-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    max-width: 220px; padding: .4rem .65rem; position: relative; top: 1px;
    background: #f1f5f9; color: #475569; font-size: .83rem; font-weight: 600;
    border: 1px solid var(--line); border-bottom: none;
    border-radius: 8px 8px 0 0; white-space: nowrap; cursor: pointer; user-select: none;
    transition: background-color .12s, color .12s;
}
.ea-tab:hover { background: #fbfdff; color: var(--ink); }
.ea-tab.active { background: #fff; color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand); }
.ea-tab .ea-tab-icon { font-size: .9rem; opacity: .85; }
.ea-tab .ea-tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ea-tab .ea-tab-close {
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
    width: 17px; height: 17px; margin-left: .1rem; border-radius: 50%;
    font-size: 1rem; color: #94a3b8;
}
.ea-tab .ea-tab-close:hover { background: #e2e8f0; color: var(--neg); }

.ea-tabs { flex: 1 1 auto; position: relative; min-height: 0; background: var(--bg); }
.ea-tab-pane { position: absolute; inset: 0; display: none; overflow: auto; }
.ea-tab-pane.active { display: block; }
.ea-tab-pane > iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.ea-tabs-empty {
    display: flex; height: 100%; align-items: center; justify-content: center;
    color: var(--muted); font-size: .9rem; text-align: center; padding: 2rem;
}

/* Overlay a tab pane draws while its screen loads, and when the load fails.
   Without it a failed iframe is just a white rectangle (see _Layout.cshtml). */
.ea-pane-status {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .75rem; background: #fff; color: var(--muted); text-align: center; padding: 2rem;
}
.ea-pane-status.failed .bi { font-size: 1.75rem; }
.ea-pane-status-text { font-size: .9rem; line-height: 1.5; }

/* Embedded (in-tab) render: no shell chrome, screen fills the iframe. */
body.ea-embed { background: #fff; }
body.ea-embed .content { padding: 1.25rem 1.5rem; }

/* ==================== RTL (Arabic) ====================
   Bootstrap RTL (bootstrap.rtl.min.css) flips its own components; these rules
   mirror the custom app-shell chrome — the fixed sidebar and the content
   offset — which Bootstrap does not own. Loaded for every dir="rtl" page. */
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .main { margin-left: 0; margin-right: 250px; }
[dir="rtl"] .nav-menu .nav-link { border-left: 0; border-right: 3px solid transparent; }
[dir="rtl"] .nav-menu .nav-link.active { border-right-color: var(--sidebar-active); }
[dir="rtl"] .nav-menu .nav-link.nav-sublink { padding-left: 0; padding-right: 2.6rem; }
[dir="rtl"] .topbar .user-area { margin-left: 0; margin-right: auto; }

@media (min-width: 992px) {
    [dir="rtl"] .sidebar-collapsed .main { margin-right: 72px; margin-left: 0; }
}
@media (max-width: 991.98px) {
    [dir="rtl"] .sidebar { transform: translateX(100%); }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
    [dir="rtl"] .main { margin-right: 0; }
}

/* Language switcher shown on the auth (login) pages */
.auth-lang { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.auth-lang i { color: var(--muted); }
.auth-lang a { color: var(--muted); text-decoration: none; }
.auth-lang a:hover { color: var(--brand); }
.auth-lang a.active { color: var(--brand); font-weight: 700; }
.auth-lang .sep { color: var(--line); }
.auth-lang-select { width: auto; min-width: 130px; font-size: .85rem; }

/* ===== Purchase Invoice redesign ===== */
.pi-card { border: 1px solid var(--line); border-radius: 10px; }
.pi-card-head { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #f8fafc, #f1f5f9); border-radius: 10px 10px 0 0; }
.pi-card-head span { font-weight: 700; letter-spacing: .04em; font-size: .8rem; color: #334155; margin-inline-start: auto; }
.pi-card .form-label { font-size: .72rem; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem; }
.pi-card .req { color: #dc2626; }
.pi-rate { max-width: 90px; text-align: right; }

/* ---- Currency + exchange rate (.input-group.pi-cur) ----
   Every transaction header and line modal pairs a currency <select> with its
   exchange-rate box in one input group. The rate kept dropping onto a second
   line, half-width and detached from the select above it:
     · a currency list long enough for site.js to upgrade it to Select2 is
       replaced by a .select2-container, which Bootstrap's input-group sizing
       does not know about — it renders at width:100% and pushes the rate out;
     · a narrow column (md, or a zoomed window) wraps the group for the same
       reason, because .input-group is flex-wrap: wrap by default.
   Pin the pair to a single line: the list takes the space that is left, the
   rate keeps a fixed width, and both stretch to the same height. */
.pi-cur { flex-wrap: nowrap; }
.pi-cur > .form-select { flex: 1 1 auto; width: 1%; min-width: 0; }
.pi-cur > .pi-rate { flex: 0 0 90px; width: 90px; }

/* Select2 swaps the <select> for its own container, so it has to be told the
   same thing — including squaring the edge it shares with the rate box, which
   Bootstrap's :not(:first-child) radius rules can't reach inside the widget. */
.pi-cur > .select2-container { flex: 1 1 auto; width: auto !important; min-width: 0; }
.pi-cur > .select2-container .select2-selection { height: 100%; }
.pi-cur > .select2-container:not(:last-child) .select2-selection {
    border-start-end-radius: 0; border-end-end-radius: 0;
}
.pi-cur > .select2-container:not(:last-child) + .pi-rate { margin-inline-start: -1px; }
.pi-grid th { font-size: .68rem; letter-spacing: .03em; color: #475569; white-space: nowrap; }
.pi-grid td, .pi-grid th { vertical-align: middle; }
.pi-total { background: #f8fafc; font-weight: 600; }
.pi-modal-head { background: linear-gradient(90deg, #0f172a, #1e293b); color: #fff; }
.pi-modal-head .modal-title { font-weight: 600; }
.pi-sub { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #334155; font-size: .85rem; margin: .25rem 0 .75rem; }
.pi-sub-ic { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }
.pi-block { border: 1px solid var(--line); border-radius: 8px; padding: .75rem; height: 100%; background: #fcfdfe; }
.pi-block .form-label { font-size: .68rem; font-weight: 600; color: #64748b; text-transform: uppercase; margin-bottom: .15rem; }
.pi-block .req { color: #dc2626; }
.pi-item-img-wrap { display: inline-flex; padding: .35rem; border: 1px solid var(--line); border-radius: 8px; background: #fcfdfe; }
.pi-item-img { max-height: 120px; max-width: 100%; object-fit: contain; border-radius: 6px; }
.si-item-img { display: block; margin-top: .35rem; max-height: 64px; max-width: 100%; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; padding: .2rem; background: #fcfdfe; }