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; }
}

/* 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); }

/* ---- 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 {
    position: fixed; top: 50%; left: 50%; transform: 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); }

/* 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; }
}