h1:focus {
    outline: none;
}

/* ---- Print form pages ---- */
.print-toolbar { padding: 8px 12px; background: #f4f4f4; border-bottom: 1px solid #ddd; display: flex; gap: 8px; }
.print-page { max-width: 800px; margin: 12px auto; padding: 24px 28px; background: #fff; color: #000;
    border: 1px solid #ccc; font-family: "Times New Roman", serif; font-size: 13px; line-height: 1.5; }
.print-page h2, .print-page h3 { text-align: center; margin: 2px 0; }
.print-page .company { text-align: center; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
.print-page .company .nm { font-size: 18px; font-weight: bold; }
.print-page table.fields { width: 100%; border-collapse: collapse; margin: 8px 0; }
.print-page table.fields td { padding: 3px 6px; vertical-align: top; }
.print-page table.grid { width: 100%; border-collapse: collapse; margin: 8px 0; }
.print-page table.grid th, .print-page table.grid td { border: 1px solid #000; padding: 4px 6px; }
.print-page .sign { display: flex; justify-content: space-between; margin-top: 48px; }
.print-page .placeholder { color: #444; background: #fffbe6; border: 1px dashed #d4b106; padding: 8px; margin: 8px 0; }
@media print {
    .no-print { display: none !important; }
    .print-page { border: none; margin: 0; max-width: 100%; }
    body { background: #fff; }
}

/* ---- Grouped tabular print reports (bare PrintFrame pages, e.g. Advance Issue print) ---- */
.adv-print-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.adv-print-table th { background: #cc0000; color: #fff; font-weight: bold; padding: 5px 6px; border: 1px solid #000; text-align: center; white-space: nowrap; }
.adv-print-table td { padding: 4px 6px; border: 1px solid #000; text-align: center; }
.adv-print-table td.left { text-align: left; }
.adv-print-table tr:nth-child(even) td { background: #f5f5f5; }
.adv-print-table .unit-hdr td { background: #fff !important; color: #cc0000 !important; font-weight: bold; text-align: left; padding: 5px 8px; border: 2px solid #cc0000; }
.adv-print-table .total-row td { font-weight: bold; background: #e0e0e0 !important; }
body.plain-print .adv-print-table .unit-hdr { display: none !important; }
@media print {
    .adv-print-table th { background: #cc0000 !important; color: #fff !important; }
    .adv-print-table .total-row td { background: #e0e0e0 !important; }
    .adv-print-table .unit-hdr td { background: #fff !important; color: #cc0000 !important; }
    .adv-print-table tr:nth-child(even) td { background: #f5f5f5 !important; }
}

/* Drag-and-drop report canvas — geometry/padding come from inline ElCss (shared with print) */
.cv-el { cursor: move; user-select: none; }
.cv-el.sel { outline: 2px solid #2684ff; outline-offset: 0; }
.cv-el .cv-rz { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px;
    background: #2684ff; border: 1px solid #fff; cursor: nwse-resize; }

/* Per-row "Print" forms dropdown in the employee report grid */
.print-forms-dd { position: relative; display: inline-block; }
.print-forms-dd > summary { list-style: none; cursor: pointer; }
.print-forms-dd > summary::-webkit-details-marker { display: none; }
.print-forms-menu { position: absolute; right: 0; z-index: 1000; background: #fff; border: 1px solid #ccc;
    border-radius: 6px; min-width: 180px; padding: 4px 0; }
.print-forms-menu a { display: block; padding: 5px 12px; font-size: 12px; color: #212529; text-decoration: none; white-space: nowrap; }
.print-forms-menu a:hover { background: #fff3ec; color: var(--primary-dark); }

/* Keep native <select> option text readable (guard against inherited light colors) */
select.form-select option,
select.form-control option {
    color: #212529;
    background: #fff;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===================== Vibe.MetroErp orange-red theme ===================== */
:root {
    --primary-color: #FD6F01;   /* bright */
    --primary-dark:  #BB1900;   /* deep   */
    --primary-gradient: linear-gradient(45deg, #BB1900, #FD6F01);
}

body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 13px;
    background: #f4f6f9;
}

.btn-primary {
    background: var(--primary-gradient);
    border: none;
}
.btn-primary:hover { filter: brightness(1.07); }

/* Bootstrap accent overrides so blue 'primary' follows the orange-red theme */
.bg-primary { background: var(--primary-gradient) !important; }
.text-primary { color: var(--primary-color) !important; }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.badge.bg-primary { background: var(--primary-gradient) !important; }

/* ---- Auth screens (login / company) ---- */
.auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(45deg, #BB1900, #FD6F01);
    padding: 20px;
}
.auth-card {
    width: 400px; max-width: 95%; background: #fff;
    border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.4);
    overflow: hidden;
}
.auth-head { text-align: center; padding: 26px 20px 10px; }
.auth-head img { max-height: 70px; margin-bottom: 10px; }
.auth-head h5 { margin: 0; font-weight: 700; color: var(--primary-dark); }
.auth-head p { margin: 2px 0 0; color: #888; font-size: 12px; }
.auth-body { padding: 18px 28px 28px; }
.auth-body .form-control { padding: 10px 12px; }
.auth-btn {
    width: 100%; padding: 11px; border: none; border-radius: 8px;
    color: #fff; font-weight: 700; letter-spacing: .3px;
    background: var(--primary-gradient);
}
.auth-btn:hover { filter: brightness(1.07); }
/* Forgot-password extras */
.auth-links, .auth-links a { color: var(--primary-dark); font-size: 12px; text-decoration: none; }
.auth-links a:hover, a.auth-links:hover { text-decoration: underline; }
.auth-note { font-size: 12px; color: #555; background: #fff7ef; border: 1px solid #fde0c4; border-radius: 8px; padding: 8px 10px; }
.auth-note.ok { background: #eefaf1; border-color: #c7ecd2; }
.auth-code { text-align: center; font-size: 22px !important; letter-spacing: 10px; font-weight: 700; }
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 0; }
.auth-steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; background: #eee; color: #999; transition: .2s; }
.auth-steps span.on { background: var(--primary-gradient); color: #fff; }
.auth-steps i { width: 36px; height: 2px; background: #eee; transition: .2s; }
.auth-steps i.on { background: var(--primary-color); }
.auth-done { width: 56px; height: 56px; margin: 4px auto 10px; border-radius: 50%; display: grid; place-items: center;
    font-size: 28px; color: #fff; background: #2e9e5b; animation: vibe-fade .25s ease both; }

/* ---- App shell ---- */
.app-topbar {
    min-height: 58px; display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; padding: 8px 16px; color: #fff;
    background: var(--primary-gradient);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.topbar-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topbar-pills .pill { padding: 4px 11px; font-size: 11px; }
.app-topbar img { height: 38px; background:#fff; border-radius:4px; padding:2px; }
.app-topbar .title { font-weight: 700; font-size: 16px; }
.app-topbar .spacer { flex: 1; }
.app-topbar .user-chip { font-size: 12px; opacity: .95; }
.app-topbar .logout-btn {
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4);
    color: #fff; border-radius: 6px; padding: 5px 14px; font-size: 12px;
}
.app-topbar .logout-btn:hover { background: rgba(255,255,255,.3); }

/* ---- Topbar notifications dropdown (crisp, rounded, soft) ---- */
.topbar-alerts { position: relative; }
.alerts-btn { display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff;
    border-radius: 999px; padding: 5px 13px; font-size: 12px; cursor: pointer; transition: background .15s ease; }
.alerts-btn:hover { background: rgba(255,255,255,.3); }
.alerts-btn .ab-ic { font-size: 13px; line-height: 1; }
.alerts-dot { background: #fff; color: var(--primary-dark); border-radius: 999px;
    font-size: 10px; font-weight: 800; padding: 1px 7px; min-width: 18px; text-align: center; line-height: 1.5; }
.alerts-backdrop { position: fixed; inset: 0; z-index: 1090; }
.alerts-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1100;
    width: 290px; background: #fff; border-radius: 16px; padding: 8px; border: 1px solid #f0f1f3;
    box-shadow: 0 18px 50px rgba(17,17,26,.22); animation: vibe-rise .18s cubic-bezier(.22,.61,.36,1) both; }
.alerts-menu::before { content: ""; position: absolute; right: 18px; top: -6px; width: 12px; height: 12px;
    background: #fff; border-left: 1px solid #f0f1f3; border-top: 1px solid #f0f1f3; transform: rotate(45deg); }
.alerts-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #9aa0a6; padding: 6px 10px 8px; }
.alert-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    color: #3a3f47; transition: background .12s ease; }
.alert-row:hover { background: #f6f7f9; }
.alert-row .ad { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.alert-row .al { flex: 1; font-size: 12.5px; }
.alert-row .av { font-weight: 700; font-size: 12.5px; color: var(--primary-dark); }
.ad-green { background: #28a745; } .ad-blue { background: #2b6cb0; } .ad-cyan { background: #17a2b8; }
.ad-dark { background: #343a40; } .ad-red { background: #c0392b; } .ad-amber { background: #e0820a; }

/* ---- Notification pill strip ---- */
.pill-strip {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 16px; background: #fff; border-bottom: 1px solid #eee;
}
.pill-strip .spacer { flex: 1; }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    border: none; border-radius: 999px; padding: 5px 14px;
    font-size: 12px; font-weight: 600; color: #fff; text-decoration: none;
    cursor: pointer; white-space: nowrap;
}
.pill:hover { filter: brightness(1.08); color: #fff; }
.pill .pill-c { background: rgba(255,255,255,.3); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.pill-green { background: #28a745; }
.pill-blue  { background: #2b6cb0; }
.pill-cyan  { background: #17a2b8; }
.pill-dark  { background: #343a40; }
.pill-red   { background: #c0392b; }
.pill-amber { background: #e0820a; }
.pill-log   { background: var(--primary-gradient); }

.app-body { display: flex; height: calc(100vh - 58px); overflow: hidden; }
/* ---- Crisp, Apple-style sidebar (rounded inset items, hairline dividers, no heavy bars) ---- */
.app-sidebar { width: 230px; background: #fff; color: #4a4f57; padding: 10px 10px;
    border-right: 1px solid #f0f1f3; box-shadow: none; display: flex; flex-direction: column; overflow-y: auto; }
.app-sidebar .sidebar-bottom { margin-top: auto; border-top: 1px solid #f1f2f4; padding-top: 8px; }
.app-sidebar .sidebar-bottom .nav-link { color: var(--primary-dark); font-weight: 600; }

/* generic sidebar links: rounded, inset, soft hover; active = gradient pill (no left bar) */
.app-sidebar .nav-link {
    color: #4a4f57; padding: 9px 12px; display: flex; align-items: center; gap: 10px;
    border-radius: 10px; font-size: 12.5px; margin: 1px 1px; border-left: none;
    transition: background .15s ease, color .15s ease;
}
.app-sidebar .nav-link:hover { background: #f6f7f9; color: var(--primary-dark); }
.app-sidebar .nav-link.active { background: var(--primary-gradient); color: #fff !important; font-weight: 600; }

.nav-home { font-weight: 700; color: var(--primary-dark) !important; }
.nav-home.active { color: #fff !important; }

.menu-search { padding: 6px 2px 8px; }
.menu-search input { font-size: 12px; border-radius: 9px; background: #f6f7f9; border-color: #eef0f2; }

/* group header: rounded hover, no hard top divider */
.menu-grp {
    display: flex; align-items: center; gap: 6px; cursor: pointer; margin: 1px 1px;
    padding: 8px 12px; font-size: 12px; font-weight: 600; color: #6b7077; border-radius: 10px;
    border-top: none; user-select: none; transition: background .15s ease, color .15s ease;
}
.menu-grp:hover { background: #f6f7f9; color: var(--primary-dark); }
.menu-grp.open { color: var(--primary-dark); background: transparent; }
.menu-grp .caret { font-size: 9px; width: 10px; color: #b3b8bf; transition: color .15s ease; }
.menu-grp.open .caret { color: var(--primary-color); }
.menu-grp .menu-grp-name { flex: 1; letter-spacing: .01em; }
.menu-grp .menu-badge { background: #eef0f3; color: #8a909a; border-radius: 999px;
    font-size: 9px; padding: 1px 7px; font-weight: 700; }
.menu-grp.open .menu-badge { background: var(--primary-gradient); color: #fff; }

/* Active group (contains the page you're currently on) — a stronger, standing highlight distinct
   from "open" (which only means expanded, and can apply to several groups you've browsed through
   at once). Active stays highlighted whether or not the group is expanded. */
.menu-grp.active { color: var(--primary-dark); background: #fff3ec; font-weight: 700; }
.menu-grp.active .caret { color: var(--primary-color); }
.menu-grp.active .menu-badge { background: var(--primary-gradient); color: #fff; }

.menu-items { background: transparent; padding: 0 0 4px; }
.menu-item { padding: 7px 12px 7px 28px !important; font-size: 12px; border-left: none; border-radius: 10px; }
.menu-item.disabled { color: #c2c6cc; cursor: not-allowed; }
.menu-item:not(.disabled):hover { background: #fff3ec; color: var(--primary-dark); }
.menu-item.active { background: var(--primary-gradient); color: #fff !important; border-left: none; font-weight: 600; }
.app-sidebar .grp { color: #9aa0a6; font-size: 10px; text-transform: uppercase; padding: 14px 14px 4px; letter-spacing: .5px; }
.app-content { flex: 1; padding: 18px 22px; overflow-y: auto; }

/* ---- Tabs: rounded corners + orange-red borders ---- */
.nav-tabs { border-bottom: none; gap: 8px; }
.nav-tabs .nav-link {
    border: 1.5px solid var(--primary-color);
    border-radius: 10px;
    color: var(--primary-color);
    font-weight: 600;
    padding: 8px 20px;
    margin-bottom: 0;
    background: #fff;
}
.nav-tabs .nav-link:hover { background: #fff3ec; color: var(--primary-dark); border-color: var(--primary-color); }
.nav-tabs .nav-link.active {
    background: var(--primary-gradient);
    color: #fff !important;
    border-color: var(--primary-color);
}

/* ===================== Seamless look + elegant motion ===================== */

/* ---- Elegant entrance / hover animations ---- */
@keyframes vibe-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vibe-fade { from { opacity: 0; } to { opacity: 1; } }

.app-content { animation: vibe-fade .25s ease both; }
.card { border: none; border-radius: 14px; box-shadow: 0 6px 22px rgba(17,17,26,.06);
    animation: vibe-rise .4s cubic-bezier(.22,.61,.36,1) both; transition: box-shadow .2s ease, transform .2s ease; }
.stat-card { animation: vibe-rise .45s cubic-bezier(.22,.61,.36,1) both; }
.card-title { letter-spacing: .2px; }

/* honour reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .app-content, .card, .stat-card, .table tbody tr { animation: none !important; }
}

/* ---- Seamless (border-less) data lists ---- */
/* Wrap tables in a soft, rounded, shadowed surface and strip the boxed grid lines. */
.table-responsive { background: #fff; border-radius: 14px; box-shadow: 0 6px 22px rgba(17,17,26,.06);
    padding: 4px 6px; }
.card .table-responsive { background: transparent; box-shadow: none; padding: 0; }

.table { --bs-table-bg: transparent; margin-bottom: 0; border-color: transparent; }
/* neutralise ALL cell borders (incl. table-bordered) -> only a soft bottom divider remains */
.table > :not(caption) > * > * {
    border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
    border-bottom: 1px solid #f1f2f4 !important; box-shadow: none !important;
    padding: 5px 10px; vertical-align: middle;
}
.table > tbody > tr:last-child > * { border-bottom: 0 !important; }
.table thead th {
    background: transparent !important; color: #9097a1 !important; font-weight: 600;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 2px solid #eef0f2 !important;
}
.table tbody tr { transition: background .15s ease; animation: vibe-fade .3s ease both; }
.table-hover > tbody > tr:hover > * { background: #fff7f2 !important; }
.table > tbody > tr.table-primary > * { background: #ffe9dc !important; }

/* Approval-status row colouring for the Client master grids (legacy GridView colours):
   approved=green, pending=orange, cancelled=yellow, rejected=red. */
.table > tbody > tr.row-approved > * { background: #e7f6ec !important; }
.table > tbody > tr.row-pending  > * { background: #fff3e0 !important; }
.table > tbody > tr.row-cancel   > * { background: #fffde0 !important; }
.table > tbody > tr.row-reject   > * { background: #fdecea !important; }
.table > tbody > tr.row-approved:hover > *, .table > tbody > tr.row-pending:hover > *,
.table > tbody > tr.row-cancel:hover > *, .table > tbody > tr.row-reject:hover > * { filter: brightness(.98); }
.master-legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.78rem; color:#555; margin:.25rem 0 .5rem; }
.master-legend span { display:inline-flex; align-items:center; gap:.35rem; }
.master-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid rgba(0,0,0,.1); }

/* date inputs: align with the orange-red theme + a tap-friendly picker */
input[type=date] { cursor: pointer; }
input[type=date]:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .15rem rgba(253,111,1,.18); }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; filter: invert(34%) sepia(89%) saturate(2000%) hue-rotate(2deg); }
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--primary-color); box-shadow: 0 0 0 .15rem rgba(253,111,1,.15); }

/* buttons get a gentle lift */
.btn { transition: transform .12s ease, filter .12s ease, box-shadow .12s ease; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn-success:not(:disabled):active, .btn-primary:not(:disabled):active { transform: translateY(0); }

/* list-group (autocomplete) softening */
.list-group { border-radius: 10px; overflow: hidden; }
.list-group-item-action:hover { background: #fff7f2; color: var(--primary-dark); }

/* ---- Collapsible sidebar ---- */
.app-sidebar { transition: width .22s ease, padding .22s ease; }
.app-body.sidebar-collapsed .app-sidebar {
    width: 0; padding-left: 0; padding-right: 0; border-right: none; overflow: hidden;
}
.sidebar-toggle {
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff;
    width: 34px; height: 32px; border-radius: 8px; font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.32); }

/* ===================== Mobile / small-screen support ===================== */
@media (max-width: 768px) {
    /* Topbar: let it wrap, shrink, and drop the count pills (they're on the dashboard) */
    .app-topbar { padding: 6px 10px; gap: 8px; }
    .app-topbar .title { font-size: 14px; }
    .app-topbar .user-chip { font-size: 11px; }
    .topbar-pills { display: none; }
    /* alerts stays, but icon-only to save room */
    .alerts-btn .ab-lbl { display: none; }
    .alerts-menu { width: 260px; }

    /* Shell flows naturally and the document scrolls (no fixed 100vh-minus-58 trap) */
    .app-body { display: block; height: auto; overflow: visible; }
    .app-content { flex: none; padding: 12px; overflow-x: auto; overflow-y: visible; }

    /* Sidebar becomes an off-canvas overlay, hidden until the ☰ toggle opens it */
    .app-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1050; width: 260px;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 16px rgba(0,0,0,.35); overflow-y: auto;
    }
    /* the toggle adds .sidebar-collapsed -> on mobile that means "slide the overlay in" */
    .app-body.sidebar-collapsed .app-sidebar {
        width: 260px; padding: 14px 0; border-right: 1px solid #ececec; overflow-y: auto;
        transform: translateX(0);
    }

    /* keep wide data tables scrollable instead of bursting the viewport */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-body { padding: 12px; }
    .container-fluid { padding-left: 8px; padding-right: 8px; }
}

/* ===================== Crisp "Apple-style" refinements ===================== */
/* Softer, more generous radii across the shell + controls (less boxy). */
.card { border-radius: 18px; }
.table-responsive { border-radius: 16px; }
.form-control, .form-select, .btn,
.input-group > .form-control, .input-group > .form-select { border-radius: 10px; }
.form-control-sm, .form-select-sm, .btn-sm { border-radius: 9px; }
.form-control, .form-select { border-color: #e2e6ea; }
.list-group { border-radius: 12px; }
.border.rounded, .rounded { border-radius: 12px !important; }
.border { border-color: #edeff2 !important; }
label.form-label.small, .form-label.small { color: #8a909a; font-weight: 600; letter-spacing: .01em; }

/* Universal crisp tables — applies to EVERY page. Uses `body ...` so it out-specifies the
   per-page `.xxx-grid th/td { border: 1px ... !important }` rules (which otherwise tie the base
   `.table` rule on specificity and win by cascade order, keeping pages boxy). Strips vertical
   rules; leaves a hairline row divider + a frosted, sticky, uppercase header. Per-page padding /
   font-size (density) is preserved. Print/report-designer pages don't use `.table`, so untouched. */
body .table > :not(caption) > * > * {
    border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
    border-bottom: 1px solid #f1f2f4 !important; box-shadow: none !important;
}
body .table > tbody > tr:last-child > * { border-bottom: 0 !important; }
body .table thead th {
    background: rgba(249,250,251,.94) !important; color: #8a909a !important; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #e9ebef !important;
}
body .table tfoot td, body .table tfoot th {
    border-top: 1px solid #e9ebef !important; border-bottom: 0 !important;
    background: #fcfcfd !important; color: #3a3f47 !important; font-weight: 700;
}
/* sticky header only inside a scrolling surface */
body .table-responsive .table thead th { position: sticky; top: 0; z-index: 2;
    backdrop-filter: saturate(180%) blur(8px); }
/* duplicate-row highlight (Salary Process) stays crisp, not a hard box */
.dup-row > td { background: #fff1f0 !important; }
/* dense report grids: a touch tighter than body, set centrally (no per-page font-size) */
.table-responsive .table { font-size: .8rem; }

/* key-value detail table (Employee Query Screen) */
.borderless-kv td { padding: 3px 8px !important; }
.borderless-kv td:nth-child(odd) { color: #8a909a; width: 18%; font-weight: 600; }
.recovery th, .recovery td { padding: 3px 8px !important; }

/* Shared lightweight modal (report pages) — soft, floaty, rounded. */
.modal-backdrop-cust { position: fixed; inset: 0; background: rgba(20,22,28,.4);
    backdrop-filter: blur(2px); z-index: 1040; animation: vibe-fade .15s ease both; }
.modal-cust {
    /* NOTE: centering uses the standalone `translate` property, not `transform`, on purpose - the
       vibe-rise entrance animation below also animates `transform` (translateY slide), and since
       animation-fill-mode:both holds its own transform value for the element's entire lifetime, a
       `transform: translate(-50%,-50%)` here would get silently overridden forever and the modal would
       never actually be centered (it'd sit with its top-left corner at viewport-center instead). `translate`
       is an independent CSS property from `transform` and composes with it, so this can't happen. */
    position: fixed; top: 50%; left: 50%; translate: -50% -50%; z-index: 1050;
    background: #fff; border-radius: 18px; padding: 20px 22px; width: 95%; max-width: 460px;
    box-shadow: 0 24px 70px rgba(17,17,26,.28); animation: vibe-rise .22s cubic-bezier(.22,.61,.36,1) both;
}
.text-maroon { color: var(--primary-dark); }

/* 2026-08-18: tried offsetting .modal-cust right by half the sidebar width to visually center it in the
   content area instead of the full viewport - user said that made it look off-center to the right
   whenever the sidebar was open, i.e. plain true-viewport centering (top:50%;left:50%;translate:-50%,-50%
   above) is what's actually wanted. Don't reintroduce a sidebar-width offset here. */

/* Wider modal sizes - use these instead of an inline max-width so every wide modal automatically gets
   the same overflow-safety cap (never wider than the viewport minus room for the sidebar). */
.modal-cust.modal-cust-lg { max-width: min(900px, calc(100vw - 300px)); }
.modal-cust.modal-cust-md { max-width: min(800px, calc(100vw - 300px)); }

/* Company selection cards */
.comp-card {
    cursor: pointer; border: 1px solid #e3e6ec; border-radius: 12px;
    padding: 22px; text-align: center; transition: .15s; background: #fff;
}
.comp-card:hover { border-color: var(--primary-color); box-shadow: 0 8px 24px rgba(253,111,1,.22); transform: translateY(-2px); }
.comp-card img { max-height: 64px; margin-bottom: 12px; }
.comp-card .cname { font-weight: 700; color: var(--primary-dark); }

/* Page-help ("?") button — floats over the current page's content, always visible regardless of
   scroll, shows what that page is for + how to use it. Content is looked up by route in
   PageHelpContent.cs; the button/panel only render when that route has an entry. */
.page-help-btn {
    position: fixed; top: 70px; right: 26px; z-index: 1075;
    width: 34px; height: 34px; border-radius: 50%; border: none;
    background: var(--primary-gradient); color: #fff; font-weight: 800; font-size: 16px;
    box-shadow: 0 6px 18px rgba(187,25,0,.35); cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    transition: transform .15s ease;
}
.page-help-btn:hover { transform: scale(1.08); }
.page-help-backdrop { position: fixed; inset: 0; background: rgba(20,22,28,.35);
    backdrop-filter: blur(1.5px); z-index: 1076; animation: vibe-fade .15s ease both; }
.page-help-panel {
    position: fixed; top: 114px; right: 26px; z-index: 1077;
    width: 360px; max-width: calc(100vw - 40px); max-height: calc(100vh - 150px); overflow-y: auto;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(17,17,26,.3);
    animation: vibe-rise .2s cubic-bezier(.22,.61,.36,1) both;
}
.page-help-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; background: var(--primary-gradient); color: #fff;
    border-radius: 14px 14px 0 0; font-weight: 700; font-size: .95rem;
}
.page-help-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1;
    opacity: .85; cursor: pointer; }
.page-help-close:hover { opacity: 1; }
.page-help-body { padding: 14px 16px 16px; }
.page-help-label { text-transform: uppercase; letter-spacing: .06em; font-size: .68rem;
    font-weight: 700; color: #a3a9b3; margin: 10px 0 4px; }
.page-help-label:first-child { margin-top: 0; }
.page-help-purpose { font-size: .85rem; color: #3a3f47; margin: 0; line-height: 1.5; }
.page-help-steps { margin: 0; padding-left: 18px; font-size: .84rem; color: #3a3f47; line-height: 1.55; }
.page-help-steps li { margin-bottom: 5px; }
.page-help-steps li:last-child { margin-bottom: 0; }
@media (max-width: 576px) {
    .page-help-btn { top: 64px; right: 14px; }
    .page-help-panel { top: 106px; right: 10px; left: 10px; width: auto; }
}

/* ===== Arjun chat panel — floating bottom-right button + right-side assistant panel ===== */
/* Ruthie (Google Fonts, OFL) self-hosted so the button looks the same without internet access. */
@font-face {
    font-family: 'Ruthie';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ruthie.woff2') format('woff2');
}
.arjun-fab {
    position: fixed; bottom: 26px; right: 26px; z-index: 1080;
    width: 54px; height: 54px; border-radius: 50%; border: none;
    background: var(--primary-gradient); color: #fff;
    font-family: 'Ruthie', cursive; font-weight: 400; font-size: 40px; padding-top: 4px;
    box-shadow: 0 10px 26px rgba(187,25,0,.4); cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1;
    transition: transform .15s ease;
}
.arjun-fab:hover { transform: scale(1.08); }
.arjun-backdrop { position: fixed; inset: 0; background: rgba(20,22,28,.3); z-index: 1081; animation: vibe-fade .15s ease both; }
.arjun-panel {
    position: fixed; bottom: 96px; right: 26px; z-index: 1082;
    width: 380px; max-width: calc(100vw - 32px); height: min(620px, calc(100vh - 140px));
    background: #fff; border-radius: 16px; box-shadow: 0 26px 64px rgba(17,17,26,.32);
    display: flex; flex-direction: column; overflow: hidden;
    animation: vibe-rise .2s cubic-bezier(.22,.61,.36,1) both;
}
.arjun-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    background: var(--primary-gradient); color: #fff; flex: 0 0 auto;
}
.arjun-head .arjun-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Ruthie', cursive; font-weight: 400; font-size: 24px; padding-top: 2px;
}
.arjun-head .arjun-title { font-weight: 700; font-size: .95rem; line-height: 1.1; }
.arjun-head .arjun-subtitle { font-size: .7rem; opacity: .85; }
.arjun-head .arjun-close { margin-left: auto; background: none; border: none; color: #fff; font-size: 20px; opacity: .85; cursor: pointer; }
.arjun-head .arjun-close:hover { opacity: 1; }
.arjun-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; background: #f7f7fa; }
.arjun-msg { max-width: 86%; margin-bottom: 10px; padding: 9px 12px; border-radius: 12px; font-size: .84rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.arjun-msg-user { margin-left: auto; background: var(--primary-color); color: #fff; border-bottom-right-radius: 3px; }
.arjun-msg-arjun { margin-right: auto; background: #fff; color: #2c2f36; border: 1px solid #e7e7ee; border-bottom-left-radius: 3px; }
.arjun-msg-arjun.arjun-err { border-color: #f2c2c2; background: #fff6f6; color: #7a2020; }
.arjun-actions { display: flex; gap: 8px; margin-top: 8px; white-space: normal; }
.arjun-actions button { border: none; border-radius: 6px; padding: 5px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.arjun-accept { background: #1f7a3a; color: #fff; }
.arjun-accept-regen { background: #0b5ed7; color: #fff; }
.arjun-reject { background: #fff; color: #8B0000; border: 1px solid #8B0000 !important; }
.arjun-actions button:disabled { opacity: .45; cursor: default; }
.arjun-decided { margin-top: 6px; font-size: .75rem; color: #6b7280; font-style: italic; white-space: normal; }
.arjun-typing { color: #9aa0aa; font-size: .78rem; font-style: italic; padding: 2px 4px 10px; }
.arjun-foot { flex: 0 0 auto; padding: 10px; border-top: 1px solid #eee; display: flex; gap: 8px; background: #fff; }
.arjun-foot input { flex: 1; border: 1px solid #dcdce3; border-radius: 10px; padding: 9px 12px; font-size: .85rem; }
.arjun-foot input:focus { outline: none; border-color: var(--primary-color); }
.arjun-foot button { background: var(--primary-gradient); color: #fff; border: none; border-radius: 10px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.arjun-foot button:disabled { opacity: .5; cursor: default; }
.arjun-voice-input { flex: 0 0 auto; font-size: .76rem; max-width: 150px; }
.arjun-voice-hint { font-size: .68rem; color: #9aa0aa; align-self: center; }
.arjun-mic-btn { background: var(--primary-gradient); color: #fff; border: none; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: .78rem; cursor: pointer; flex: 0 0 auto; }
.arjun-mic-btn:disabled { opacity: .5; cursor: default; }
.arjun-mic-recording { background: #d32f2f; animation: arjun-mic-pulse 1.4s ease-in-out infinite; }
@keyframes arjun-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (max-width: 576px) {
    .arjun-fab { bottom: 16px; right: 16px; }
    .arjun-panel { bottom: 0; right: 0; left: 0; width: auto; height: 78vh; border-radius: 16px 16px 0 0; }
}

/* ===================== Dark mode (toggle beside Logout; html[data-bs-theme=dark]) ===================== */
/* Bootstrap 5.3 themes its own components from data-bs-theme; this block re-colours everything app.css
   and the pages hard-code. Brand in dark: the deep red #BB1900 is unreadable as text on a dark surface
   (about 2.5:1 contrast), so text/accents move to a light ember orange and filled surfaces use a slightly
   deeper red->orange gradient that keeps white text readable. Same family, so it still reads as Metro. */
[data-bs-theme=dark] {
    --primary-color: #FB8C3C;   /* accents, borders, focus */
    --primary-dark:  #FFA066;   /* text that was deep red  */
    --primary-gradient: linear-gradient(45deg, #A3290C, #E8620F);
    --vibe-bg: #15171c; --vibe-surface: #1e2128; --vibe-raised: #262a33;
    --vibe-line: #2f343d; --vibe-text: #e3e6ea; --vibe-muted: #9aa1ab;
    --vibe-tint: rgba(251,140,60,.13);
    --bs-body-bg: var(--vibe-bg); --bs-body-color: var(--vibe-text);
    --bs-secondary-bg: var(--vibe-raised); --bs-tertiary-bg: var(--vibe-raised);
    --bs-border-color: var(--vibe-line);
    color-scheme: dark;
}
[data-bs-theme=dark] body { background: var(--vibe-bg); color: var(--vibe-text); }
.theme-btn { margin-right: 6px; }

/* shell */
[data-bs-theme=dark] .app-sidebar { background: var(--vibe-surface); color: #c9cdd3; border-right-color: var(--vibe-line); }
[data-bs-theme=dark] .app-sidebar .nav-link,
[data-bs-theme=dark] .menu-grp { color: #c9cdd3; }
[data-bs-theme=dark] .app-sidebar .nav-link:hover, [data-bs-theme=dark] .menu-grp:hover,
[data-bs-theme=dark] .menu-item:not(.disabled):hover, [data-bs-theme=dark] .menu-grp.active { background: var(--vibe-tint); color: var(--primary-dark); }
[data-bs-theme=dark] .app-sidebar .sidebar-bottom { border-top-color: var(--vibe-line); }
[data-bs-theme=dark] .menu-grp .menu-badge { background: var(--vibe-raised); color: var(--vibe-muted); }
[data-bs-theme=dark] .menu-item.disabled { color: #5d636d; }
[data-bs-theme=dark] .menu-search input { background: var(--vibe-raised); border-color: var(--vibe-line); color: var(--vibe-text); }
[data-bs-theme=dark] .pill-strip { background: var(--vibe-surface); border-bottom-color: var(--vibe-line); }
[data-bs-theme=dark] .app-topbar img { background: #fff; }

/* "FY 2026-2027" in the user chip opens Change Financial Year */
.user-chip .fy-wrap { white-space: nowrap; }
.user-chip .fy-select { background: rgba(255,255,255,.18); color: inherit; border: 1px solid rgba(255,255,255,.45); border-radius: 6px;
    font-size: 12px; padding: 0 4px; margin-left: 2px; cursor: pointer; }
.user-chip .fy-select option { color: #1d2125; background: #fff; }

/* ---- Topbar server-jobs indicator (JobStatusIcon.razor) — same look as the alerts button ---- */
/* ---- Activity indicator: iPhone Duo style 3-in-1 round glyph in the topbar (JobStatusIcon) ---- */
.duo-wrap { position: relative; display: flex; align-items: center; }
.duo { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 4px; border: 0; border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer; transition: background .2s, transform .15s; }
.duo:hover { background: rgba(255,255,255,.14); }
.duo:active { transform: scale(.94); }
.duo svg { width: 30px; height: 30px; overflow: visible; }
.duo svg circle { fill: none; }
.duo-trk, .duo-arc { stroke-width: 3; stroke-linecap: round; transform: rotate(120deg); transform-origin: 18px 18px; }
.duo-trk { stroke: rgba(255,255,255,.28); }
.duo-arc { stroke: #fff; transition: stroke-dasharray .45s ease, stroke .3s; }
.duo-slide { animation: duo-slide 1.5s ease-in-out infinite alternate; }
@keyframes duo-slide { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -60.5; } }
.duo-glyph path, .duo-glyph circle { stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.duo-glyph text { fill: #fff; font-size: 11.5px; font-weight: 700; font-family: system-ui, "Segoe UI", sans-serif; }
.duo-glyph .duo-idle { fill: rgba(255,255,255,.5); stroke: none; }
.duo-dot { fill: rgba(255,255,255,.28) !important; transition: fill .3s; }
.duo-dot.on { fill: #fff !important; }
.duo-dot.on-other { fill: #d0a8ff !important; }
.duo-other .duo-arc { stroke: #d0a8ff; }
.duo-ok .duo-arc, .duo-ok .duo-glyph path { stroke: #4cd964; }
.duo-bad .duo-arc, .duo-bad .duo-glyph path, .duo-warn .duo-arc, .duo-warn .duo-glyph path { stroke: #ff6b5e; }
.duo-warn .duo-arc { stroke: #ffcc00; }
.duo-ok svg, .duo-bad svg { animation: duo-pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes duo-pop { 40% { transform: scale(1.18); } }
.duo-pct { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.duo-new { position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
/* task list (TaskIcon) — same glyph and card as the activity circle */
.duo-dot.late { fill: #ff6b5e !important; }
.task-card { width: 400px; }
.task-tabs { display: flex; gap: 4px; }
.task-tabs a { font-size: 12px; font-weight: 600; color: #8a9099; text-decoration: none; padding: 4px 10px; border-radius: 99px; }
.task-tabs a b { font-weight: 700; margin-left: 2px; }
.task-tabs a.on { background: #edf2fb; color: var(--primary-dark, #2b6cb0); }
.task-add-btn { border-radius: 99px; font-size: 12px; padding: 2px 12px; }
.task-new { background: #f6f7f9; border-radius: 12px; padding: 8px; margin: 8px 4px 4px; animation: vibe-rise .18s ease both; }
.task-row { display: flex; gap: 10px; align-items: flex-start; }
.task-row.done .isl-row-title { text-decoration: line-through; color: #9aa0a6; }
.task-row.late { box-shadow: inset 3px 0 0 #e5534b; }
.task-chk { margin-top: 3px; flex: 0 0 auto; cursor: pointer; }
.task-note { white-space: pre-wrap; }
.task-rep { color: var(--primary-dark, #2b6cb0); font-weight: 600; }
.task-del { color: #b0b5bc; text-decoration: none; font-size: 12px; padding: 0 2px; }
.task-del:hover { color: #c0392b; }
[data-bs-theme=dark] .task-new { background: var(--vibe-raised); }
[data-bs-theme=dark] .task-tabs a.on { background: var(--vibe-raised); color: var(--vibe-text); }
.duo-backdrop { position: fixed; inset: 0; z-index: 1099; }
@media (prefers-reduced-motion: reduce) { .duo-slide, .duo svg { animation: none !important; } }
/* list card: same look as the Alerts dropdown; scrolling happens inside so the scrollbar stays within the corners */
.duo-card { position: absolute; right: 0; top: calc(100% + 10px); z-index: 1100; width: 380px; max-width: calc(100vw - 24px);
    background: #fff; color: #3a3f47; border-radius: 16px; padding: 6px; border: 1px solid #f0f1f3;
    box-shadow: 0 18px 50px rgba(17,17,26,.22); animation: vibe-rise .18s cubic-bezier(.22,.61,.36,1) both; }
.duo-card::before { content: ""; position: absolute; right: 14px; top: -6px; width: 12px; height: 12px;
    background: #fff; border-left: 1px solid #f0f1f3; border-top: 1px solid #f0f1f3; transform: rotate(45deg); }
.duo-scroll { max-height: min(70vh, 520px); overflow-y: auto; padding: 2px 4px 2px 2px; border-radius: 12px;
    scrollbar-width: thin; scrollbar-color: #c9ced6 transparent; }
.duo-scroll::-webkit-scrollbar { width: 6px; }
.duo-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.duo-scroll::-webkit-scrollbar-thumb { background: #c9ced6; border-radius: 99px; }
.isl-head { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9aa0a6; padding: 6px 10px 6px; }
.isl-head span { text-transform: none; font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.isl-row { padding: 8px 10px; border-radius: 10px; margin: 2px 0; transition: background .12s ease; }
.isl-row:hover { background: #f6f7f9; }
.isl-row-top { display: flex; justify-content: space-between; gap: 8px; }
.isl-row-title { font-size: 12.5px; font-weight: 600; word-break: break-word; }
.isl-st { font-size: 11px; font-weight: 700; white-space: nowrap; }
.isl-st.st-done { color: #1e8e3e; } .isl-st.st-running, .isl-st.st-queued { color: #2b6cb0; }
.isl-st.st-failed, .isl-st.st-interrupted { color: #c0392b; }
.isl-meta { font-size: 11px; color: #8a9099; margin-top: 2px; }
.isl-err { color: #c0392b; }
.isl-bar { height: 5px; border-radius: 99px; background: #edf0f4; margin-top: 6px; overflow: hidden; }
.isl-bar i { display: block; height: 100%; border-radius: 99px; background: #2b6cb0; transition: width .4s ease; }
.isl-bar i.indef { background: linear-gradient(90deg, transparent, #2b6cb0, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: isl-slide 1.2s linear infinite; }
@keyframes isl-slide { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.isl-links { display: flex; gap: 12px; margin-top: 4px; }
.isl-links a { font-size: 11.5px; color: var(--primary-dark, #2b6cb0); text-decoration: none; }
.isl-links a:hover { text-decoration: underline; }
.isl-result { font-size: 11.5px; background: #f6f7f9; border-radius: 8px; padding: 6px 8px; margin-top: 4px; }
[data-bs-theme=dark] .duo-card, [data-bs-theme=dark] .duo-card::before { background: var(--vibe-surface); color: var(--vibe-text); border-color: var(--vibe-line); }
[data-bs-theme=dark] .isl-row:hover, [data-bs-theme=dark] .isl-result { background: var(--vibe-raised); }
[data-bs-theme=dark] .isl-bar { background: var(--vibe-line); }
[data-bs-theme=dark] .duo-scroll { scrollbar-color: var(--vibe-line) transparent; }
[data-bs-theme=dark] .duo-scroll::-webkit-scrollbar-thumb { background: var(--vibe-line); }
@media (max-width: 768px) { .duo-card { width: 290px; } }
@media (prefers-reduced-motion: reduce) { .duo-card, .isl-bar i.indef { animation: none !important; } }

/* surfaces */
[data-bs-theme=dark] .card, [data-bs-theme=dark] .table-responsive, [data-bs-theme=dark] .modal-cust,
[data-bs-theme=dark] .comp-card, [data-bs-theme=dark] .auth-card, [data-bs-theme=dark] .page-help-panel,
[data-bs-theme=dark] .arjun-panel, [data-bs-theme=dark] .alerts-menu, [data-bs-theme=dark] .alerts-menu::before,
[data-bs-theme=dark] .print-forms-menu { background: var(--vibe-surface); color: var(--vibe-text); border-color: var(--vibe-line); }
[data-bs-theme=dark] .card .table-responsive { background: transparent; }
[data-bs-theme=dark] .card, [data-bs-theme=dark] .table-responsive { box-shadow: 0 6px 22px rgba(0,0,0,.35); }
[data-bs-theme=dark] .alert-row { color: #c9cdd3; }
[data-bs-theme=dark] .alert-row:hover, [data-bs-theme=dark] .list-group-item-action:hover,
[data-bs-theme=dark] .print-forms-menu a:hover { background: var(--vibe-tint); }
[data-bs-theme=dark] .print-forms-menu a { color: var(--vibe-text); }
[data-bs-theme=dark] .auth-head p, [data-bs-theme=dark] .auth-note { color: var(--vibe-muted); }
[data-bs-theme=dark] .auth-note { background: var(--vibe-raised); border-color: var(--vibe-line); }
[data-bs-theme=dark] .page-help-purpose, [data-bs-theme=dark] .page-help-steps { color: #c9cdd3; }

/* tables */
[data-bs-theme=dark] body .table > :not(caption) > * > * { border-bottom-color: var(--vibe-line) !important; color: var(--vibe-text); }
[data-bs-theme=dark] body .table thead th { background: rgba(38,42,51,.96) !important; color: var(--vibe-muted) !important; border-bottom-color: var(--vibe-line) !important; }
[data-bs-theme=dark] body .table tfoot td, [data-bs-theme=dark] body .table tfoot th { background: var(--vibe-raised) !important; color: var(--vibe-text) !important; border-top-color: var(--vibe-line) !important; }
[data-bs-theme=dark] .table-hover > tbody > tr:hover > * { background: var(--vibe-tint) !important; }
[data-bs-theme=dark] .table > tbody > tr.table-primary > * { background: rgba(251,140,60,.2) !important; }
[data-bs-theme=dark] .table > tbody > tr.row-approved > * { background: rgba(40,167,69,.16) !important; }
[data-bs-theme=dark] .table > tbody > tr.row-pending  > * { background: rgba(253,126,20,.16) !important; }
[data-bs-theme=dark] .table > tbody > tr.row-cancel   > * { background: rgba(255,193,7,.14) !important; }
[data-bs-theme=dark] .table > tbody > tr.row-reject   > * { background: rgba(220,53,69,.16) !important; }
[data-bs-theme=dark] .dup-row > td { background: rgba(220,53,69,.16) !important; }
[data-bs-theme=dark] .master-legend { color: var(--vibe-muted); }

/* controls */
[data-bs-theme=dark] .form-control, [data-bs-theme=dark] .form-select { border-color: var(--vibe-line); }
[data-bs-theme=dark] .border { border-color: var(--vibe-line) !important; }
[data-bs-theme=dark] select.form-select option, [data-bs-theme=dark] select.form-control option { color: var(--vibe-text); background: var(--vibe-surface); }
[data-bs-theme=dark] label.form-label.small, [data-bs-theme=dark] .form-label.small,
[data-bs-theme=dark] .borderless-kv td:nth-child(odd) { color: var(--vibe-muted); }
[data-bs-theme=dark] .nav-tabs .nav-link { background: var(--vibe-surface); }
[data-bs-theme=dark] .nav-tabs .nav-link:hover { background: var(--vibe-tint); }
[data-bs-theme=dark] .btn-light { background: var(--vibe-raised); border-color: var(--vibe-line) !important; color: var(--vibe-text); }
[data-bs-theme=dark] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(70%) sepia(60%) saturate(900%) hue-rotate(340deg); }

/* Arjun */
[data-bs-theme=dark] .arjun-body { background: var(--vibe-bg); }
[data-bs-theme=dark] .arjun-msg-arjun { background: var(--vibe-raised); color: var(--vibe-text); border-color: var(--vibe-line); }
[data-bs-theme=dark] .arjun-foot { background: var(--vibe-surface); border-top-color: var(--vibe-line); }
[data-bs-theme=dark] .arjun-foot input { background: var(--vibe-raised); border-color: var(--vibe-line); color: var(--vibe-text); }

/* Pages that hard-code light colours inline (style="background:#f8f9fa" etc., about 60 places in 32 pages):
   re-coloured here instead of touching each page. Printable documents (.print-page) keep paper colours. */
[data-bs-theme=dark] [style*="background:#f8f9fa"]:not(.print-page *), [data-bs-theme=dark] [style*="background: #f8f9fa"]:not(.print-page *),
[data-bs-theme=dark] [style*="background:#fafafa"]:not(.print-page *), [data-bs-theme=dark] [style*="background: #fafafa"]:not(.print-page *),
[data-bs-theme=dark] [style*="background:#f5f5f5"]:not(.print-page *), [data-bs-theme=dark] [style*="background:#eee"]:not(.print-page *) { background: var(--vibe-raised) !important; }
[data-bs-theme=dark] [style*="background:#fff;"]:not(.print-page *), [data-bs-theme=dark] [style*="background: #fff;"]:not(.print-page *),
[data-bs-theme=dark] [style$="background:#fff"]:not(.print-page *), [data-bs-theme=dark] [style$="background: #fff"]:not(.print-page *) { background: var(--vibe-surface) !important; }
[data-bs-theme=dark] [style*="background:#fff3ec"]:not(.print-page *) { background: var(--vibe-tint) !important; }
[data-bs-theme=dark] [style*="color:#555"]:not(.print-page *), [data-bs-theme=dark] [style*="color: #555"]:not(.print-page *),
[data-bs-theme=dark] [style*="color:#444"]:not(.print-page *), [data-bs-theme=dark] [style*="color: #333"]:not(.print-page *),
[data-bs-theme=dark] [style*="color:#000"]:not(.print-page *) { color: var(--vibe-text) !important; }
[data-bs-theme=dark] .print-page { background: #fff; color: #000; }

/* Dark versions of light colours set in individual pages' <style> blocks (dashboard tiles, ledgers,
   import error rows, labels). Printable sheets (wage report, ID cards) deliberately stay white. */
[data-bs-theme=dark] .notif-tile, [data-bs-theme=dark] .dh-tile { background: var(--vibe-surface); box-shadow: 0 2px 12px rgba(0,0,0,.35); }
[data-bs-theme=dark] .notif-tile .nt-frac, [data-bs-theme=dark] .dh-tile .dh-val { color: var(--vibe-text); }
[data-bs-theme=dark] .dh-tile.dh-alert { background: rgba(224,130,10,.14); }
[data-bs-theme=dark] .dh-note { background: rgba(224,130,10,.10); color: #e5c07b; border-bottom-color: var(--vibe-line); }
[data-bs-theme=dark] .dh-table th { background: var(--vibe-raised); color: var(--vibe-muted); }
[data-bs-theme=dark] .dh-ok { color: #5fd38a; }
[data-bs-theme=dark] .legend-row, [data-bs-theme=dark] .vibe-lbl, [data-bs-theme=dark] .lbl,
[data-bs-theme=dark] .wage-slip-belt, [data-bs-theme=dark] .wage-slip-meta { color: var(--vibe-muted); }
[data-bs-theme=dark] .chip { background: var(--vibe-raised); border-color: var(--vibe-line); }
[data-bs-theme=dark] .lg-given, [data-bs-theme=dark] .bl-out, [data-bs-theme=dark] .cl-dr { background: rgba(251,140,60,.15); color: #ffb38a; border-color: rgba(251,140,60,.35); }
[data-bs-theme=dark] .lg-recovered, [data-bs-theme=dark] .bl-in, [data-bs-theme=dark] .cl-cr { background: rgba(40,167,69,.15); color: #7fdc9f; border-color: rgba(40,167,69,.35); }
[data-bs-theme=dark] tr.lg-month td { background: var(--vibe-raised); color: #c9cdd3; }
[data-bs-theme=dark] .adv-import-grid tr.row-error td, [data-bs-theme=dark] .ci-grid tr.row-error td,
[data-bs-theme=dark] .att-grid tr.row-error td { background: rgba(220,53,69,.22) !important; }
[data-bs-theme=dark] .vibe-sec { background: var(--vibe-tint); }
[data-bs-theme=dark] .ledger-summary .ledger-tile.lt-muted { background: var(--vibe-raised); color: var(--vibe-text); border-color: var(--vibe-line); }
[data-bs-theme=dark] .narration-input .narration-head { background: var(--vibe-raised); color: var(--vibe-muted); border-color: var(--vibe-line); }

/* ---- Report grids: Search / Filter by / Group by (GridToolbar + GridGroupRow) ---- */
.grid-toolbar .gt-search { max-width: 220px; }
.grid-toolbar .gt-sel { width: auto; max-width: 220px; }
tr.grid-group-row td { background: var(--vibe-tint, #fdeee9) !important; color: var(--primary-dark); font-weight: 700;
    border-top: 2px solid var(--primary-color) !important; white-space: normal; }
tr.grid-group-row .gg-meta { font-weight: 400; margin-left: 10px; color: var(--bs-secondary-color); }
tr.grid-group-row .gg-tot { font-weight: 400; margin-left: 14px; color: var(--bs-body-color); }