/* ============================================================
   Alasai UI System v1
   Shared cards, forms, icons and motion.
   Navigation shell is intentionally outside this layer.
   ============================================================ */

:root {
    --ui-blue: #4F6FE8;
    --ui-violet: #7659E8;
    --ui-cyan: #2C9EB8;
    --ui-green: #2FA574;
    --ui-amber: #D49325;
    --ui-coral: #D96652;
    --ui-surface: rgba(255,255,255,.76);
    --ui-surface-strong: rgba(248,250,255,.93);
    --ui-surface-soft: rgba(235,240,250,.62);
    --ui-stroke: rgba(255,255,255,.72);
    --ui-stroke-strong: rgba(119,137,183,.25);
    --ui-shadow: 0 12px 32px rgba(35,48,96,.10), inset 0 1px 0 rgba(255,255,255,.82);
    --ui-shadow-hover: 0 18px 42px rgba(35,48,96,.16), inset 0 1px 0 rgba(255,255,255,.9);
    --ui-radius-xl: 22px;
    --ui-radius-lg: 18px;
    --ui-radius-md: 14px;
    --ui-ease: cubic-bezier(.2,.8,.25,1);
}

html[data-theme="dark"] {
    --ui-surface: rgba(28,35,47,.78);
    --ui-surface-strong: rgba(29,36,49,.94);
    --ui-surface-soft: rgba(38,46,60,.72);
    --ui-stroke: rgba(255,255,255,.11);
    --ui-stroke-strong: rgba(255,255,255,.16);
    --ui-shadow: 0 14px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06);
    --ui-shadow-hover: 0 20px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.09);
}

/* ---------- authenticated application gate ---------- */
html.auth-pending {
    overflow: hidden;
}

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: auto;
    color: var(--theme-ink, #17213c);
    background:
        radial-gradient(circle at 18% 18%, rgba(79,111,232,.22), transparent 34%),
        radial-gradient(circle at 85% 82%, rgba(47,165,116,.18), transparent 32%),
        linear-gradient(145deg, var(--theme-surface, #edf2ff) 0%, var(--theme-surface, #f8faff) 48%, var(--theme-surface, #eef8f5) 100%);
}

.auth-gate[hidden] { display: none; }

.auth-card {
    width: min(100%, 440px);
    padding: 34px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.88));
    border-radius: 28px;
    background: var(--theme-glass, rgba(255,255,255,.82));
    box-shadow: 0 28px 80px rgba(34,48,94,.18), inset 0 1px 0 var(--theme-highlight, #fff);
    backdrop-filter: blur(24px) saturate(130%);
}

.auth-brand {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: var(--theme-glass, rgba(255,255,255,.9));
    box-shadow: 0 12px 30px rgba(44,66,135,.14);
}

.auth-logo { width: 58px; height: 58px; object-fit: contain; }
.auth-heading { text-align: center; }
.auth-eyebrow { margin: 0 0 8px; color: var(--theme-ink, #4f6fe8); font-size: .83rem; font-weight: 800; }
.auth-heading h1 { margin: 0; color: var(--theme-ink, #17213c); font-size: clamp(1.65rem, 5vw, 2rem); line-height: 1.45; }
.auth-heading > p:last-child { margin: 8px 0 26px; color: var(--theme-ink, #68728b); font-size: .92rem; line-height: 1.8; }
.auth-form { display: grid; gap: 17px; }
.auth-field { display: grid; gap: 7px; color: var(--theme-ink, #303b58); font-size: .88rem; font-weight: 750; }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap > i { position: absolute; inset-inline-start: 14px; z-index: 1; color: var(--theme-ink, #78839d); font-size: 1.2rem; pointer-events: none; }
.auth-input-wrap input {
    width: 100%;
    min-height: 50px;
    padding: 10px 46px 10px 46px;
    border: 1px solid var(--theme-stroke, #d6ddef);
    border-radius: 14px;
    outline: 0;
    color: var(--theme-ink, #17213c);
    background: var(--theme-glass, rgba(248,250,255,.92));
    font: inherit;
    direction: ltr;
    text-align: start;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.auth-input-wrap input:focus { border-color: #4f6fe8; background: var(--theme-surface, #fff); box-shadow: 0 0 0 4px rgba(79,111,232,.14); }
.auth-password-toggle {
    position: absolute;
    inset-inline-end: 6px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    color: var(--theme-ink, #66718c);
    background: transparent;
    cursor: pointer;
}
.auth-password-toggle:hover { background: rgba(79,111,232,.09); color: var(--theme-ink, #405fd0); }
.auth-password-toggle:focus-visible, .auth-submit:focus-visible { outline: 3px solid rgba(79,111,232,.35); outline-offset: 2px; }
.auth-message { min-height: 22px; margin: -4px 0 -5px; color: var(--theme-ink, #c43e45); font-size: .84rem; line-height: 1.55; }
.auth-message.is-success { color: var(--theme-ink, #21835a); }
.auth-submit {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #496ce4, #6855dc);
    box-shadow: 0 12px 24px rgba(79,91,212,.25);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(79,91,212,.32); }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-submit.is-loading i { animation: authSpin .8s linear infinite; }
.auth-footnote { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 20px 0 0; color: var(--theme-ink, #778199); font-size: .78rem; }
.auth-footnote i { color: var(--theme-ink, #2fa574); font-size: 1rem; }

html[data-theme="dark"] .auth-gate {
    color: #f4f6ff;
    background: radial-gradient(circle at 20% 15%, rgba(79,111,232,.25), transparent 35%), radial-gradient(circle at 82% 84%, rgba(47,165,116,.16), transparent 32%), #111722;
}
html[data-theme="dark"] .auth-card { border-color: rgba(255,255,255,.1); background: rgba(28,35,49,.88); box-shadow: 0 28px 80px rgba(0,0,0,.42); }
html[data-theme="dark"] .auth-brand { background: rgba(255,255,255,.08); box-shadow: none; }
html[data-theme="dark"] .auth-heading h1, html[data-theme="dark"] .auth-field { color: #f4f6ff; }
html[data-theme="dark"] .auth-heading > p:last-child, html[data-theme="dark"] .auth-footnote { color: #a9b2c8; }
html[data-theme="dark"] .auth-input-wrap input { color: #f4f6ff; border-color: rgba(255,255,255,.14); background: rgba(12,18,28,.7); }
html[data-theme="dark"] .auth-input-wrap input:focus { border-color: #7891ef; background: rgba(12,18,28,.95); }
@keyframes authSpin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
    /* Top-align instead of vertically centering: on a phone, centering pushes the form down
       far enough that the on-screen keyboard (opened for username/password) covers it. */
    .auth-gate { padding: 14px; align-items: start; padding-top: 20px; }
    .auth-card { padding: 26px 20px; border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .auth-submit, .auth-input-wrap input { transition: none; } }

/* ---------- page color language ---------- */
#mainContent .view { --ui-tone: var(--ui-blue); --ui-tone-2: var(--ui-violet); }
#view-pumps { --ui-tone: var(--ui-cyan); --ui-tone-2: #287BB7; }
#view-employees { --ui-tone: var(--ui-violet); --ui-tone-2: var(--ui-blue); }
#view-employees .employee-section-tabs { display:flex; flex-wrap:wrap; gap:6px; width:max-content; max-width:100%; margin:0 0 18px; padding:4px; border-radius:14px; background:var(--theme-glass, rgba(224,230,247,.65)); }
#view-employees .employee-section-tabs .filter-tab { min-height:39px; padding-inline:16px; border-radius:10px; }
#view-employees .employee-section-tabs .filter-tab.active { color:#fff; background:linear-gradient(135deg,#7362DD,#5375E8); box-shadow:0 6px 14px rgba(83,111,232,.2); }
#view-finance,
#view-sales,
#view-salaries,
#view-till { --ui-tone: var(--ui-green); --ui-tone-2: var(--ui-cyan); }
#view-expenses,
#view-expenses-details { --ui-tone: var(--ui-coral); --ui-tone-2: var(--ui-amber); }
:is(#view-customers,#view-employee-accounts) { --ui-tone: #4778D8; --ui-tone-2: var(--ui-violet); }
#view-sales-details { --ui-tone: var(--ui-green); --ui-tone-2: #3F83CF; }
#view-reports,
#view-reports-financial,
#view-reports-shift,
#view-reports-tanks,
#view-reports-accounts,
#view-reports-compare,
#view-reports-journal,
#view-reports-capital { --ui-tone: #5A72D9; --ui-tone-2: #755AD8; }
#view-profile { --ui-tone: #3B89C8; --ui-tone-2: #39A68A; }

#mainContent .content-wrap {
    position: relative;
}

#mainContent .view.active .content-wrap {
    animation: uiPageEnter .38s var(--ui-ease) both;
}

#mainContent .page-title {
    color: var(--text1);
    letter-spacing: -.35px;
    line-height: 1.45;
}

#mainContent .page-title--compact {
    position: relative;
    width: fit-content;
    padding-bottom: 5px;
}

#mainContent .page-title--compact::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-tone), var(--ui-tone-2));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-tone) 25%, transparent);
}

#mainContent .page-sub,
#mainContent .greet {
    color: var(--text-muted-on-glass);
}

/* ---------- shared liquid surfaces ---------- */
#mainContent .view:not(#view-dashboard):not(#view-tanks) :is(
    .card:not(.sales-hero-card):not(.expenses-hero-card):not(.finance-profit-card):not(.finance-debt-card),
    .metric-card,
    .finance-card,
    .sales-trend-card,
    .pump-card,
    .profile-card,
    .profile-header,
    .emp-form-section,
    .work-record-stats-panel,
    .leave-stat-tile,
    .ledger-card,
    .info-box
) {
    border: 1px solid var(--ui-stroke);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 10%, transparent), transparent 38%),
        linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-surface-soft) 82%, transparent));
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(15px) saturate(145%);
    -webkit-backdrop-filter: blur(15px) saturate(145%);
}

#mainContent .view:not(#view-dashboard):not(#view-tanks) :is(
    .emp-list-section,
    .emp-status-card,
    .work-record-filter-cal,
    .till2-sec,
    .till2-month,
    .till2-signed,
    .salary-info-header,
    .logo-code-box,
    .preview-box,
    .date-picker-popover
) {
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 9%, transparent), transparent 38%),
        linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-surface-soft) 82%, transparent));
    box-shadow: var(--ui-shadow);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#mainContent .view:not(#view-dashboard):not(#view-tanks) :is(
    .card:not(.sales-hero-card):not(.expenses-hero-card):not(.finance-profit-card):not(.finance-debt-card),
    .metric-card,
    .finance-card,
    .sales-trend-card,
    .pump-card,
    .profile-card,
    .profile-header,
    .emp-form-section,
    .work-record-stats-panel,
    .leave-stat-tile,
    .ledger-card
) {
    border-radius: var(--ui-radius-lg);
}

#mainContent :is(.card-section, .card-section-tight, .card-narrow, .card-narrow-spaced) {
    padding: 18px;
}

#mainContent :is(.finance-grid, .grid3, .fuel-group-grid) {
    gap: 14px;
}

#mainContent :is(
    .finance-card,
    .metric-card,
    .sales-trend-card,
    .leave-stat-tile,
    .pump-card,
    .sales-details-card,
    .profile-card
) {
    transition: transform .22s var(--ui-ease), border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#mainContent :is(
    .finance-card,
    .metric-card,
    .sales-trend-card,
    .leave-stat-tile,
    .pump-card,
    .sales-details-card,
    .profile-card
):hover {
    border-color: color-mix(in srgb, var(--ui-tone) 27%, var(--ui-stroke));
    box-shadow: var(--ui-shadow-hover);
}

#mainContent :is(.finance-card, .sales-details-card, .profile-card)[onclick]:hover,
#mainContent .ui-interactive:hover {
    transform: translateY(-2px);
}

/* Hero surfaces remain solid for operational readability. */
#mainContent :is(.sales-hero-card, .expenses-hero-card, .finance-profit-card, .till2-hero) {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.35));
    border-radius: var(--ui-radius-xl);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--ui-tone) 22%, rgba(27,37,78,.14)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
    overflow: hidden;
}

#mainContent :is(.sales-hero-card, .finance-profit-card.is-positive) {
    color: #fff;
    background:
        radial-gradient(circle at 8% 0%, var(--theme-highlight, rgba(255,255,255,.18)), transparent 32%),
        linear-gradient(135deg, #145B43, #1B7D5A 48%, #207B70);
}

#mainContent :is(.expenses-hero-card, .finance-profit-card.is-negative) {
    color: #fff;
    background:
        radial-gradient(circle at 8% 0%, var(--theme-highlight, rgba(255,255,255,.17)), transparent 32%),
        linear-gradient(135deg, #7A3022, #A84735 50%, #C15F34);
}

#mainContent :is(.sales-hero-card, .expenses-hero-card, .finance-profit-card) :is(.sales-fuel-chip, .finance-profit-chip) {
    border-color: var(--theme-stroke, rgba(255,255,255,.24));
    color: #fff;
    background: var(--theme-highlight, rgba(255,255,255,.12));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.16));
}

#mainContent :is(.sales-hero-card, .expenses-hero-card, .finance-profit-card) :is(.sales-fuel-chip-label, .sales-fuel-chip-unit, .finance-profit-label, .finance-profit-breakdown) {
    color: rgba(255,255,255,.82);
}

/* ---------- section headings and icon system ---------- */
#mainContent :is(.section-title-icon, .section-label, .alerts-title, .compare-title, .tasks-title, .profile-section-head, .cash-section-subhead) {
    color: var(--text1);
    font-weight: 850;
}

#mainContent .section-title-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

#mainContent .section-title-icon > i {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.68));
    border-radius: 12px;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ui-tone) 68%, var(--theme-surface, #fff)), var(--ui-tone-2));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--ui-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
}

#mainContent :is(
    .metric-icon,
    .finance-card-icon,
    .sales-trend-icon,
    .profile-meta-icon,
    .work-record-stat-icon,
    .till2-sec-icon,
    .till2-step-icon,
    .acct-tab-icon,
    .emp-perm-icon,
    .pump-fuel-icon-circle
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ui-tone) 18%, var(--theme-stroke, rgba(255,255,255,.7)));
    color: var(--ui-tone);
    background: color-mix(in srgb, var(--ui-tone) 10%, var(--theme-glass, rgba(255,255,255,.58)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72)), 0 6px 16px color-mix(in srgb, var(--ui-tone) 9%, transparent);
}

#mainContent :is(
    .activity-row-icon,
    .finance-feed-icon,
    .work-record-icon,
    .emp-list-section-icon,
    .emp-status-icon,
    .sales-fuel-chip-icon,
    .profile-avatar,
    .employee-avatar,
    .emp-row-avatar,
    .pump-avatar
) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ui-tone) 18%, var(--theme-stroke, rgba(255,255,255,.7)));
    color: var(--ui-tone);
    background: color-mix(in srgb, var(--ui-tone) 10%, var(--theme-glass, rgba(255,255,255,.58)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72)), 0 6px 16px color-mix(in srgb, var(--ui-tone) 9%, transparent);
}

#mainContent :is(.metric-icon, .finance-card-icon, .sales-trend-icon, .work-record-stat-icon, .till2-sec-icon) {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
}

#mainContent :is(.metric-icon, .finance-card-icon, .sales-trend-icon, .work-record-stat-icon, .till2-sec-icon) i {
    font-size: 21px;
}

#mainContent .ti,
.overlay .modal .ti {
    line-height: 1;
}

/* ---------- buttons and segmented controls ---------- */
#mainContent :is(.btn, .back-to-finance-btn, .back-btn-prominent, .pill-btn, .acct-pill-btn),
.overlay .modal .btn {
    min-height: 44px;
    margin-top: 20px;
    border-radius: 13px;
    font-weight: 800;
    transition: transform .18s var(--ui-ease), box-shadow .18s ease, border-color .18s ease, color .18s ease, background .18s ease, filter .18s ease;
}

#mainContent :is(.btn-primary, .acct-pill-btn-solid),
.overlay .modal:not(.inventory-form-modal) .btn-primary {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.34));
    color: #fff;
    background: linear-gradient(135deg, var(--ui-tone, var(--accent-solid)), var(--ui-tone-2, #7659E8));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 24%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}

#mainContent :is(.btn, .back-to-finance-btn, .back-btn-prominent, .pill-btn, .acct-pill-btn):hover,
.overlay .modal .btn:hover:not(:disabled) {
    filter: saturate(108%);
}

#mainContent :is(.btn, .back-to-finance-btn, .back-btn-prominent, .pill-btn, .acct-pill-btn):active,
.overlay .modal .btn:active:not(:disabled) {
    transform: translateY(0) scale(.975);
}

/* Permission-denied actions stay visible so employees understand what exists,
   while their muted treatment and tooltip make the read-only state explicit. */
#mainContent .permission-action-disabled,
.overlay .permission-action-disabled {
    border-color: color-mix(in srgb, var(--text2) 24%, transparent) !important;
    color: color-mix(in srgb, var(--text2) 82%, transparent) !important;
    background: color-mix(in srgb, var(--text2) 10%, var(--panel)) !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
    opacity: .62 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

#mainContent .permission-action-disabled:hover,
#mainContent .permission-action-disabled:active,
.overlay .permission-action-disabled:hover,
.overlay .permission-action-disabled:active {
    border-color: color-mix(in srgb, var(--text2) 24%, transparent) !important;
    color: color-mix(in srgb, var(--text2) 82%, transparent) !important;
    background: color-mix(in srgb, var(--text2) 10%, var(--panel)) !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
    transform: none !important;
}

#mainContent .permission-action-disabled i,
.overlay .permission-action-disabled i {
    color: currentColor !important;
}

#mainContent :is(.back-to-finance-btn, .back-btn-prominent) {
    border: 1px solid var(--ui-stroke);
    color: var(--text1);
    background: var(--ui-surface);
    box-shadow: 0 7px 18px rgba(38,50,97,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

#mainContent :is(.back-to-finance-btn, .back-btn-prominent):hover {
    border-color: color-mix(in srgb, var(--ui-tone) 28%, var(--ui-stroke));
    color: var(--ui-tone);
    background: color-mix(in srgb, var(--ui-tone) 8%, var(--ui-surface));
}

#mainContent :is(.filter-tabs, .accounts-search-wrap) {
    border: 1px solid var(--ui-stroke);
    border-radius: 15px;
    background: color-mix(in srgb, var(--ui-surface) 76%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.66));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

#mainContent :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn, .profile-rail-btn, .acct-tab-btn),
.overlay .modal :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn) {
    border: 1px solid var(--ui-stroke-strong);
    border-radius: 12px;
    color: var(--text1);
    background: color-mix(in srgb, var(--ui-surface-strong) 84%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.7)), 0 5px 13px rgba(35,48,102,.045);
    transition: transform .18s var(--ui-ease), border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

#mainContent :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn, .profile-rail-btn, .acct-tab-btn):hover,
.overlay .modal :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn):hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 38%, var(--ui-stroke-strong));
    color: var(--ui-tone, var(--accent-solid));
    background: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 8%, var(--ui-surface-strong));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
}

#mainContent :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn, .profile-rail-btn, .acct-tab-btn):active,
.overlay .modal :is(.quick-btn, .paymethod-btn, .btn-add-type, .date-picker-nav, .date-picker-today-btn):active:not(:disabled) {
    transform: scale(.97);
}

#mainContent .filter-tab {
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text2);
    font-weight: 750;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#mainContent .filter-tab:hover {
    color: var(--ui-tone);
    background: color-mix(in srgb, var(--ui-tone) 8%, transparent);
}

#mainContent .filter-tab.active {
    border-color: var(--theme-stroke, rgba(255,255,255,.34));
    color: #fff;
    background: linear-gradient(135deg, var(--ui-tone), var(--ui-tone-2));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--ui-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24));
}

/* ---------- data-entry surfaces ---------- */
#mainContent :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.overlay .modal:not(.inventory-form-modal) .field :is(input, select, textarea),
.overlay .modal:not(.inventory-form-modal) .date-picker-field,
.overlay .modal:not(.inventory-form-modal) .modal-search-field input {
    min-height: 46px;
    border: 1px solid var(--ui-stroke-strong);
    border-radius: 13px;
    color: var(--text1);
    background: var(--ui-surface-strong);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82)), 0 5px 14px rgba(35,48,102,.045);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#mainContent :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):hover,
.overlay .modal:not(.inventory-form-modal) .field :is(input, select, textarea):hover,
.overlay .modal:not(.inventory-form-modal) .date-picker-field:hover {
    border-color: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 30%, var(--ui-stroke-strong));
}

#mainContent :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus,
.overlay .modal:not(.inventory-form-modal) .field :is(input, select, textarea):focus,
.overlay .modal:not(.inventory-form-modal) .date-picker-field.open,
.overlay .modal:not(.inventory-form-modal) .modal-search-field input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 68%, var(--theme-stroke, #fff));
    background: color-mix(in srgb, var(--panel) 95%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 14%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#mainContent textarea,
.overlay .modal:not(.inventory-form-modal) textarea {
    min-height: 86px;
    resize: vertical;
}

#mainContent :is(input, textarea)::placeholder,
.overlay .modal :is(input, textarea)::placeholder {
    color: var(--text2);
    opacity: .83;
}

#mainContent input[type="checkbox"],
#mainContent input[type="radio"],
.overlay .modal input[type="checkbox"],
.overlay .modal input[type="radio"] {
    accent-color: var(--ui-tone, var(--accent-solid));
}

#mainContent .field label,
.overlay .modal:not(.inventory-form-modal) .field > label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text1);
    font-size: 13px;
    font-weight: 800;
}

.ui-label-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 18%, var(--theme-stroke, rgba(255,255,255,.7)));
    border-radius: 8px;
    color: var(--ui-tone, var(--accent-solid));
    background: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 8%, var(--theme-glass, rgba(255,255,255,.48)));
    font-size: 13px;
}

.overlay .modal:not(.inventory-form-modal) :is(.field-icon, .emp-field-icon) > i {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 10px;
    color: var(--text2);
    background: var(--theme-glass, rgba(255,255,255,.54));
    transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ui-ease);
}

.overlay .modal:not(.inventory-form-modal) :is(.field-icon, .emp-field-icon):focus-within > i {
    color: #fff;
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    background: linear-gradient(145deg, color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 66%, var(--theme-surface, #fff)), var(--ui-tone, var(--accent-solid)));
    box-shadow: 0 6px 15px color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 22%, transparent);
    transform: translateY(-50%) scale(1.04);
}


/* Start-work pump picker: the complete card is the touch target, not a tiny checkbox. */
.overlay .modal .work-session-pump-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
    padding: 9px;
}

.overlay .modal .fuel-checkbox.work-session-pump-option {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    align-items: center;
    min-height: 62px;
    gap: 11px;
    margin: 0;
    padding: 10px 11px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 19%, var(--theme-stroke, rgba(255,255,255,.76)));
    border-radius: 14px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.47));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
    cursor: pointer;
    transition: transform .2s var(--ui-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.overlay .modal .work-session-pump-option > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    opacity: 0;
    clip-path: inset(50%);
}

.overlay .modal .work-session-pump-option:hover {
    border-color: color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 56%, var(--theme-stroke, rgba(255,255,255,.82)));
    background: color-mix(in srgb, var(--pump-tint, var(--ui-tone)) 20%, var(--theme-glass, rgba(255,255,255,.64)));
    transform: translateY(-1px);
}

.overlay .modal .work-session-pump-option:focus-within {
    border-color: var(--pump-tone, var(--ui-tone));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8));
}

.overlay .modal .work-session-pump-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 78%, var(--theme-stroke, #fff));
    background: linear-gradient(135deg, color-mix(in srgb, var(--pump-tint, var(--ui-tone)) 46%, var(--theme-glass, rgba(255,255,255,.8))), var(--theme-glass, rgba(255,255,255,.62)));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 16%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

/* Pump/base entry follows the same clear, card-based decision model as start work. */
.overlay .modal.pump-entry-modal {
    --ui-tone: #4F7BE8;
    --ui-tone-2: #7660E8;
    width: min(400px, calc(100vw - 28px));
    padding: 11px;
    /* Dropdowns are overlay content, never clipped modal content. */
    overflow: visible;
    background:
        radial-gradient(circle at 0% 100%, rgba(79,123,232,.18), transparent 48%),
        radial-gradient(circle at 100% 0%, rgba(91,199,212,.17), transparent 43%),
        linear-gradient(145deg, var(--theme-glass, rgba(209,222,240,.94)), rgba(164,183,211,.9));
}

.overlay .pump-entry-modal .pump-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 13px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 17px;
    background: linear-gradient(145deg, var(--theme-glass, rgba(251,253,255,.94)), var(--theme-glass, rgba(220,230,246,.8)));
    box-shadow: 0 10px 22px rgba(39,54,109,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}

.overlay .pump-entry-modal .pump-modal-head h3 {
    flex: 1;
    margin: 0;
    color: var(--text1);
    font-size: 18px;
    font-weight: 850;
}

.overlay .pump-entry-modal .pump-modal-head-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #62AFE7, var(--ui-tone));
    box-shadow: 0 8px 17px rgba(79,123,232,.26), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.45));
    font-size: 21px;
}

.overlay .pump-entry-modal .pump-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 6px 5px;
    overflow: visible;
}

.overlay .pump-entry-modal .field {
    margin: 0;
}

.overlay .pump-entry-modal .pump-fuel-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 0;
}

.overlay .pump-entry-modal .pump-fuel-option {
    position: relative;
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pump-tone) 20%, var(--theme-stroke, rgba(255,255,255,.76)));
    border-radius: 14px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.43));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
    cursor: pointer;
    transition: transform .2s var(--ui-ease), border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.overlay .pump-entry-modal .pump-fuel-option > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    clip-path: inset(50%);
}

.overlay .pump-entry-modal .pump-fuel-option:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--pump-tone) 58%, var(--theme-stroke, rgba(255,255,255,.86)));
    background: color-mix(in srgb, var(--pump-tint) 23%, var(--theme-glass, rgba(255,255,255,.64)));
}

.overlay .pump-entry-modal .pump-fuel-option:focus-within {
    border-color: var(--pump-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pump-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

.overlay .pump-entry-modal .pump-fuel-check {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--pump-tone) 26%, var(--theme-stroke, rgba(255,255,255,.78)));
    border-radius: 50%;
    color: transparent;
    background: var(--theme-glass, rgba(255,255,255,.58));
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}

.overlay .pump-entry-modal .pump-fuel-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--pump-tone);
    background: color-mix(in srgb, var(--pump-tint) 68%, var(--theme-glass, rgba(255,255,255,.58)));
    font-size: 17px;
}

.overlay .pump-entry-modal .pump-fuel-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--pump-tone) 75%, var(--theme-stroke, #fff));
    background: linear-gradient(135deg, color-mix(in srgb, var(--pump-tint) 53%, var(--theme-glass, rgba(255,255,255,.83))), var(--theme-glass, rgba(255,255,255,.62)));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--pump-tone) 16%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.overlay .pump-entry-modal .pump-fuel-option:has(input:checked) .pump-fuel-check {
    border-color: var(--pump-tone);
    color: #fff;
    background: var(--pump-tone);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--pump-tone) 32%, transparent);
}

.overlay .pump-entry-modal .pump-status-select {
    position: relative;
    z-index: 20;
}

/* Shared stacking policy: an expanded menu must sit above fields and actions. */
.overlay .modal .has-liquid-select.is-open,
.overlay .modal .pump-status-select[data-open="true"] {
    z-index: 100;
}

.overlay .pump-entry-modal .pump-status-field:has(.pump-status-select[data-open="true"]) {
    position: relative;
    z-index: 100;
}

.overlay .pump-entry-modal .pump-status-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    clip-path: inset(50%);
    pointer-events: none;
}

.overlay .pump-entry-modal .pump-status-trigger {
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 14px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.69));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    cursor: pointer;
    text-align: start;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.overlay .pump-entry-modal .pump-status-trigger:hover,
.overlay .pump-entry-modal .pump-status-select[data-open="true"] .pump-status-trigger {
    border-color: color-mix(in srgb, var(--ui-tone) 63%, var(--theme-stroke, #fff));
    background: var(--theme-glass, rgba(255,255,255,.85));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-tone) 16%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}

.overlay .pump-entry-modal .pump-status-trigger > .ti-chevron-down {
    color: var(--ui-tone);
    transition: transform .2s var(--ui-ease);
}

.overlay .pump-entry-modal .pump-status-select[data-open="true"] .pump-status-trigger > .ti-chevron-down {
    transform: rotate(180deg);
}

.overlay .pump-entry-modal .pump-status-trigger-icon,
.overlay .pump-entry-modal .pump-status-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.overlay .pump-entry-modal .pump-status-trigger-icon {
    width: 34px;
    height: 34px;
    color: var(--ui-tone);
    background: color-mix(in srgb, var(--ui-tone) 13%, var(--theme-glass, rgba(255,255,255,.65)));
}

.overlay .pump-entry-modal .pump-status-value {
    font-size: 14px;
    font-weight: 780;
}

.overlay .pump-entry-modal .pump-status-menu {
    position: absolute;
    z-index: 10;
    inset-inline: 0;
    top: calc(100% + 7px);
    display: none;
    gap: 6px;
    padding: 7px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.86));
    border-radius: 15px;
    background: linear-gradient(145deg, var(--theme-glass, rgba(244,248,255,.97)), var(--theme-glass, rgba(214,226,244,.93)));
    box-shadow: 0 18px 32px rgba(26,41,84,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.overlay .pump-entry-modal .pump-status-select[data-open="true"] .pump-status-menu {
    display: grid;
    animation: pumpStatusMenuIn .2s var(--ui-ease) both;
}

@keyframes pumpStatusMenuIn {
    from { opacity: 0; transform: translateY(-5px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay .pump-entry-modal .pump-status-option {
    min-height: 45px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--text1);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 760;
    text-align: start;
    transition: background .18s ease, border-color .18s ease;
}

.overlay .pump-entry-modal .pump-status-option:hover {
    background: var(--theme-glass, rgba(255,255,255,.58));
}

.overlay .pump-entry-modal .pump-status-option-icon {
    width: 32px;
    height: 32px;
}

.overlay .pump-entry-modal .pump-status-option-icon.active { color: var(--theme-ink, #168A5E); background: rgba(87,202,142,.16); }
.overlay .pump-entry-modal .pump-status-option-icon.maintenance { color: var(--theme-ink, #B87816); background: rgba(224,167,57,.17); }
.overlay .pump-entry-modal .pump-status-selected { color: transparent; }

.overlay .pump-entry-modal .pump-status-option.is-selected {
    border-color: color-mix(in srgb, var(--ui-tone) 31%, var(--theme-stroke, rgba(255,255,255,.8)));
    background: color-mix(in srgb, var(--ui-tone) 11%, var(--theme-glass, rgba(255,255,255,.58)));
}

.overlay .pump-entry-modal .pump-status-option.is-selected .pump-status-selected { color: var(--ui-tone); }

.overlay .pump-entry-modal .modal-actions {
    position: relative;
    z-index: 1;
    margin: 8px 6px 3px;
}

html[data-theme="dark"] .overlay .modal.pump-entry-modal {
    background: linear-gradient(145deg, rgba(42,53,71,.96), rgba(25,34,47,.94));
}

html[data-theme="dark"] .overlay .pump-entry-modal .pump-modal-head {
    background: linear-gradient(145deg, rgba(49,61,79,.94), rgba(30,39,53,.9));
}

html[data-theme="dark"] .overlay .pump-entry-modal .pump-status-menu {
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(44,56,75,.97), rgba(27,37,51,.95));
}

.work-session-pump-icon,
.work-session-pump-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

.work-session-pump-icon {
    width: 38px;
    height: 38px;
    color: var(--pump-tone, var(--ui-tone));
    background: color-mix(in srgb, var(--pump-tint, var(--ui-tone)) 54%, var(--theme-glass, rgba(255,255,255,.72)));
    font-size: 19px;
}

.work-session-pump-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    text-align: right;
}

.work-session-pump-copy strong {
    overflow: hidden;
    color: var(--text1);
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-session-pump-copy small {
    overflow: hidden;
    color: var(--text2);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-session-pump-check {
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 26%, var(--theme-stroke, rgba(255,255,255,.9)));
    color: transparent;
    background: var(--theme-glass, rgba(255,255,255,.64));
    font-size: 16px;
    transition: transform .2s var(--ui-ease), color .2s ease, background .2s ease, box-shadow .2s ease;
}

.work-session-pump-option:has(input:checked) .work-session-pump-check {
    color: #fff;
    background: var(--pump-tone, var(--ui-tone));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--pump-tone, var(--ui-tone)) 34%, transparent);
    transform: scale(1.05);
}

/* ---------- pump page: operational staff board and shift timeline ---------- */
#view-pumps .pumps-primary-section {
    --board-tone: var(--ui-blue);
    margin-bottom: 2px;
}

#view-pumps #pumpGrid {
    direction: rtl;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    justify-content: start;
    gap: 16px;
}

html[dir="ltr"] #view-pumps #pumpGrid { direction: ltr; }

#view-pumps .pumps-section-heading {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--text1);
    font-size: 16px;
    font-weight: 850;
}

#view-pumps .pumps-settings-btn { min-height: 42px; }

#view-pumps .work-board-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#view-pumps .section-count {
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--board-tone) 18%, var(--theme-stroke, rgba(255,255,255,.76)));
    border-radius: 99px;
    color: var(--board-tone);
    background: color-mix(in srgb, var(--board-tone) 9%, var(--theme-glass, rgba(255,255,255,.58)));
    font-size: 11.5px;
    font-weight: 800;
}

#view-pumps .pump-card {
    --pump-tone: var(--accent-solid);
    --pump-tint: var(--accent-tint-bg);
    min-height: 304px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--pump-tone) 24%, var(--theme-stroke, rgba(255,255,255,.82)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 17%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tint) 58%, var(--theme-glass, rgba(255,255,255,.82))), var(--theme-glass, rgba(238,243,253,.66)));
    box-shadow: 0 15px 30px color-mix(in srgb, var(--pump-tone) 10%, rgba(25,38,77,.08)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#view-pumps .pump-card.fuel-petrol {
    --pump-tone: #FF8A0A;
    --pump-tint: rgba(255,138,10,.16);
}

#view-pumps .pump-card.fuel-diesel {
    --pump-tone: #2FCB83;
    --pump-tint: rgba(47,203,131,.16);
}

#view-pumps .pump-card.fuel-cng {
    --pump-tone: #2E9AF4;
    --pump-tint: rgba(46,154,244,.16);
}

#view-pumps .pump-card.busy {
    border-color: color-mix(in srgb, var(--pump-tone) 36%, var(--theme-stroke, rgba(255,255,255,.8)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 26%, transparent), transparent 44%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tint) 72%, var(--theme-glass, rgba(255,255,255,.84))), var(--theme-glass, rgba(235,242,252,.64)));
}

#view-pumps .pump-card.free {
    min-height: 304px;
    border-color: color-mix(in srgb, var(--pump-tone) 25%, var(--theme-stroke, rgba(255,255,255,.8)));
}

#view-pumps .pump-card.is-inactive {
    min-height: 304px;
    filter: saturate(.68);
    border-color: color-mix(in srgb, var(--warning) 26%, var(--theme-stroke, rgba(255,255,255,.75)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--warning) 13%, transparent), transparent 44%),
        linear-gradient(145deg, var(--theme-glass, rgba(246,246,249,.76)), var(--theme-glass, rgba(228,233,242,.6)));
}

#view-pumps .pump-card-header { align-items: center; margin-bottom: 10px; }

#view-pumps .pump-card .pump-fuel-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--pump-tone);
    background: color-mix(in srgb, var(--pump-tint) 68%, var(--theme-glass, rgba(255,255,255,.72)));
    border: 1px solid color-mix(in srgb, var(--pump-tone) 20%, var(--theme-stroke, rgba(255,255,255,.82)));
    box-shadow: 0 8px 16px color-mix(in srgb, var(--pump-tone) 16%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#view-pumps .pump-card .pump-fuel-icon-circle i { color: var(--pump-tone); }

#view-pumps .pump-card-edit-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-color: color-mix(in srgb, var(--pump-tone) 16%, var(--theme-stroke, rgba(255,255,255,.82)));
    color: var(--text2);
    background: var(--theme-glass, rgba(255,255,255,.48));
}

#view-pumps .pump-card-accent {
    height: 6px;
    margin-bottom: 11px;
    overflow: hidden;
    border-radius: 99px;
    background: color-mix(in srgb, var(--pump-tone) 17%, var(--theme-glass, rgba(255,255,255,.62)));
    box-shadow: inset 0 1px 2px rgba(25,38,77,.1);
}

#view-pumps .pump-card-accent span {
    display: block;
    width: 86%;
    height: 100%;
    border-radius: inherit;
    background: var(--pump-tone);
    box-shadow: 0 0 10px color-mix(in srgb, var(--pump-tone) 36%, transparent);
}

#view-pumps .pump-card.busy .pump-card-accent span { width: 100%; background: var(--pump-tone); }
#view-pumps .pump-card.is-inactive .pump-card-accent span { width: 100%; background: var(--text2); opacity: .55; }

#view-pumps .pump-card-operation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    margin-bottom: 10px;
}

#view-pumps .pump-card-operation-row > .pump-status-pill { margin: 0; flex-shrink: 0; }

#view-pumps .pump-card-employee {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#view-pumps .pump-card-employee-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
}

#view-pumps .pump-card-employee-copy span {
    color: var(--text2);
    font-size: 10.5px;
}

#view-pumps .pump-card-employee-copy strong {
    overflow: hidden;
    color: var(--text1);
    font-size: 12px;
    font-weight: 820;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-pumps .pump-card-employee .pump-avatar { width: 36px; height: 36px; flex-basis: 36px; }

#view-pumps .pump-avatar-placeholder {
    color: var(--text2);
    background: var(--theme-glass, rgba(255,255,255,.58)) !important;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
}

#view-pumps .pump-card-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

#view-pumps .pump-card-metric {
    position: relative;
    min-width: 0;
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 9px 34px 9px 10px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 12px;
    background: var(--theme-glass, rgba(255,255,255,.5));
    box-shadow: 0 7px 15px rgba(28,45,91,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

[dir="ltr"] #view-pumps .pump-card-metric { padding: 9px 10px 9px 34px; }

#view-pumps .pump-card-metric > span { color: var(--text2); font-size: 10.5px; }

#view-pumps .pump-card-metric > strong {
    overflow: hidden;
    color: var(--text1);
    font-size: 11.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-pumps .pump-card-metric > i {
    position: absolute;
    inset-inline-start: 10px;
    inset-block-end: 12px;
    color: var(--pump-tone);
    font-size: 18px;
}

#view-pumps .pump-card.busy .pump-card-metric > i { color: var(--pump-tone); }

#view-pumps .pump-card-last-shift {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: var(--text2);
    font-size: 10.5px;
}

#view-pumps .pump-card-last-shift strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text1);
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-pumps .pump-card-body {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 13px 0;
    border-block: 1px dashed color-mix(in srgb, var(--pump-tone) 17%, transparent);
}

#view-pumps .pump-card-body:empty { display: none; }

#view-pumps .pump-worker { width: 100%; margin-top: 0; }

#view-pumps .pump-worker-time {
    display: grid;
    gap: 2px;
    margin-top: 4px;
    color: var(--text2);
    font-size: 11.5px;
}

#view-pumps .pump-duration-value { color: var(--text1); font-weight: 800; }

#view-pumps .pump-card-direct-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    padding-top: 11px;
}

#view-pumps .pump-card-direct-actions .btn {
    width: 100%;
    min-height: 43px;
    justify-content: center;
    border-radius: 12px;
    font-weight: 820;
}

#view-pumps .pump-card-direct-actions:has(.pump-end-action) { grid-template-columns: 1fr; }

#view-pumps .pump-edit-action {
    border-color: color-mix(in srgb, var(--pump-tone) 18%, var(--theme-stroke, rgba(255,255,255,.82)));
    color: color-mix(in srgb, var(--pump-tone) 76%, var(--text1));
    background: color-mix(in srgb, var(--pump-tint) 38%, var(--theme-glass, rgba(255,255,255,.64)));
}

#view-pumps .pump-end-action {
    border: 1px solid color-mix(in srgb, var(--pump-tone) 35%, var(--theme-stroke, rgba(255,255,255,.72)));
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pump-tone) 88%, var(--theme-surface, #fff)), var(--pump-tone));
    box-shadow: 0 8px 17px color-mix(in srgb, var(--pump-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32));
}

#view-pumps .pump-end-action:hover,
#view-pumps .pump-end-action:focus-visible {
    color: #fff;
    background: color-mix(in srgb, var(--pump-tone) 84%, #111827);
    border-color: var(--pump-tone);
}

html[data-theme="dark"] #view-pumps .pump-card {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 18%, transparent), transparent 44%),
        linear-gradient(145deg, rgba(26,34,53,.86), rgba(17,24,39,.72));
}

html[data-theme="dark"] #view-pumps .pump-card.busy {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 28%, transparent), transparent 44%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tone) 13%, rgba(26,34,53,.88)), rgba(17,24,39,.76));
}

/* Keep pump state/fuel identity above the shared glass-surface defaults. */
#mainContent #view-pumps .pump-card {
    border-color: color-mix(in srgb, var(--pump-tone) 30%, var(--theme-stroke, rgba(255,255,255,.82)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 22%, transparent), transparent 44%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tint) 68%, var(--theme-glass, rgba(255,255,255,.82))), var(--theme-glass, rgba(238,243,253,.64)));
    box-shadow: 0 15px 30px color-mix(in srgb, var(--pump-tone) 13%, rgba(25,38,77,.08)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

#mainContent #view-pumps .pump-card.busy {
    border-color: color-mix(in srgb, var(--pump-tone) 44%, var(--theme-stroke, rgba(255,255,255,.78)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 30%, transparent), transparent 45%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tint) 78%, var(--theme-glass, rgba(255,255,255,.86))), var(--theme-glass, rgba(233,241,252,.66)));
}

#mainContent #view-pumps .pump-card.is-inactive {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--theme-stroke, rgba(255,255,255,.76)));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--warning) 20%, transparent), transparent 45%),
        linear-gradient(145deg, var(--theme-glass, rgba(247,246,242,.78)), var(--theme-glass, rgba(228,233,242,.62)));
}

#mainContent #view-pumps .pump-card:hover {
    border-color: color-mix(in srgb, var(--pump-tone) 48%, var(--theme-stroke, rgba(255,255,255,.8)));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--pump-tone) 18%, rgba(25,38,77,.1)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}

#mainContent #view-pumps .pump-card.busy:hover {
    border-color: color-mix(in srgb, var(--pump-tone) 58%, var(--theme-stroke, rgba(255,255,255,.76)));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--pump-tone) 20%, rgba(25,38,77,.1)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}

html[data-theme="dark"] #mainContent #view-pumps .pump-card {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 24%, transparent), transparent 46%),
        linear-gradient(145deg, rgba(26,34,53,.9), rgba(17,24,39,.76));
}

html[data-theme="dark"] #mainContent #view-pumps .pump-card.busy {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--pump-tone) 32%, transparent), transparent 46%),
        linear-gradient(145deg, color-mix(in srgb, var(--pump-tone) 15%, rgba(26,34,53,.9)), rgba(17,24,39,.78));
}

#mainContent #view-pumps .pump-card.busy .pump-status-pill {
    color: color-mix(in srgb, var(--pump-tone) 82%, var(--theme-ink, #17203b));
    background: color-mix(in srgb, var(--pump-tint) 66%, var(--theme-glass, rgba(255,255,255,.7)));
}

#mainContent #view-pumps .pump-card.busy .pump-status-pill .status-dot { background: var(--pump-tone); }

#mainContent #view-pumps .pump-card.free .pump-status-pill {
    color: color-mix(in srgb, var(--pump-tone) 82%, var(--theme-ink, #17203b));
    background: color-mix(in srgb, var(--pump-tint) 64%, var(--theme-glass, rgba(255,255,255,.68)));
}

#mainContent #view-pumps .pump-card.free .pump-status-pill .status-dot { background: var(--pump-tone); }

#mainContent #view-pumps .pump-card.is-inactive {
    --pump-tone: var(--text2) !important;
    --pump-tint: var(--panel-2) !important;
    filter: saturate(.45);
}

@media (max-width: 760px) {
    #view-pumps #pumpGrid { grid-template-columns: 1fr; gap: 12px; }
}

#view-pumps .work-board-card,
#view-pumps .shift-history-board {
    --board-tone: var(--ui-blue);
    position: relative;
    overflow: hidden;
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--board-tone) 11%, transparent), transparent 36%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.76)), var(--theme-glass, rgba(228,236,250,.6)));
    box-shadow: 0 15px 32px rgba(28,45,91,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

#view-pumps .work-board-card { padding: 14px; }

#view-pumps .shift-history-board { --board-tone: var(--ui-violet); }

#view-pumps .shift-history-board { margin-top: 14px; opacity: .94; }

#view-pumps .work-board-heading {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    margin-bottom: 9px;
    color: var(--text1);
    font-size: 16px;
    font-weight: 850;
}

#view-pumps .work-board-heading-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--board-tone) 21%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 10px;
    color: var(--board-tone);
    background: color-mix(in srgb, var(--board-tone) 11%, var(--theme-glass, rgba(255,255,255,.65)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));
}

#view-pumps #employeeTable {
    display: grid;
    gap: 7px;
}

#view-pumps .work-board-employee {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 64px;
    gap: 12px;
    margin: 0;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--board-tone) 14%, var(--theme-stroke, rgba(255,255,255,.84)));
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.54));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
    animation: shiftBoardReveal .34s var(--ui-ease) both;
}

#view-pumps .work-board-employee::before {
    content: '';
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 99px;
    background: var(--board-tone);
    opacity: .75;
}

#view-pumps .work-board-employee.is-working { --board-tone: #1AA573; }
#view-pumps .work-board-employee.is-available { --board-tone: var(--ui-violet); }

#view-pumps .work-board-employee:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--board-tone) 36%, var(--theme-stroke, rgba(255,255,255,.88)));
    background: color-mix(in srgb, var(--board-tone) 7%, var(--theme-glass, rgba(255,255,255,.68)));
    box-shadow: 0 12px 24px color-mix(in srgb, var(--board-tone) 11%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#view-pumps .work-board-employee .employee-row-left { gap: 11px; }

#view-pumps .work-board-employee .employee-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border: 2px solid color-mix(in srgb, var(--board-tone) 24%, var(--theme-stroke, rgba(255,255,255,.9)));
    color: #fff;
    box-shadow: 0 7px 15px color-mix(in srgb, var(--board-tone) 22%, transparent);
}

#view-pumps .work-board-employee .employee-name {
    margin: 0 0 4px;
    color: var(--text1);
    font-size: 14px;
    font-weight: 850;
}

#view-pumps .work-board-employee .employee-status-line { margin: 0; }

#view-pumps .work-board-employee .employee-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    margin: 0;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--board-tone) 15%, var(--theme-stroke, rgba(255,255,255,.75)));
    border-radius: 99px;
    color: color-mix(in srgb, var(--board-tone) 72%, var(--text1));
    background: color-mix(in srgb, var(--board-tone) 8%, var(--theme-glass, rgba(255,255,255,.56)));
    font-size: 11.5px;
    font-weight: 760;
}

#view-pumps .work-board-employee .employee-row-actions { gap: 7px; }

#view-pumps .work-board-employee .employee-row-actions .btn {
    min-width: 126px;
    min-height: 40px;
    justify-content: center;
    border-radius: 13px;
    font-weight: 820;
}

#view-pumps .work-board-employee .btn-end-shift {
    border-color: rgba(235,115,81,.28);
    color: var(--theme-ink, #B94E36);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,231,222,.96)), var(--theme-glass, rgba(255,200,181,.8)));
    box-shadow: 0 7px 15px rgba(217,95,62,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
}

#view-pumps .work-board-employee.long-shift-alert {
    --board-tone: #DE664A;
    color: var(--text1);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,243,239,.85)), var(--theme-glass, rgba(255,221,211,.7)));
    animation: shiftBoardReveal .34s var(--ui-ease) both, longShiftBorderPulse 2.2s ease-in-out infinite .35s;
}

#view-pumps .work-board-employee.long-shift-alert .employee-name,
#view-pumps .work-board-employee.long-shift-alert .employee-status { color: var(--text1); }

@keyframes shiftBoardReveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes longShiftBorderPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(222,102,74,0), inset 0 1px 0 rgba(255,255,255,.84); }
    50% { box-shadow: 0 0 0 4px rgba(222,102,74,.13), inset 0 1px 0 rgba(255,255,255,.84); }
}

#view-pumps .shift-history-board-head {
    align-items: center;
    min-height: 37px;
}

#view-pumps .shift-history-board .work-record-list {
    display: grid;
    gap: 7px;
    padding: 8px;
    overflow: visible;
    border-color: color-mix(in srgb, var(--board-tone) 15%, var(--theme-stroke, rgba(255,255,255,.78)));
    background: var(--theme-highlight, rgba(255,255,255,.34));
}

#view-pumps .shift-history-board .work-record-list.is-preview {
    gap: 6px;
    padding: 6px;
}

#view-pumps .shift-history-board .work-record-list.is-preview .work-record-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 56px;
    padding: 7px 10px;
}

#view-pumps .shift-history-board .work-record-list.is-preview .work-record-num { display: none; }

#view-pumps .shift-history-preview-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 9px;
}

#view-pumps .shift-history-board .work-record-day-divider {
    min-height: 30px;
    margin: 3px 2px 1px;
    padding: 4px 8px;
    border-radius: 10px;
    color: var(--text1);
    background: color-mix(in srgb, var(--board-tone) 9%, var(--theme-glass, rgba(255,255,255,.5)));
    font-size: 11.5px;
    font-weight: 760;
}

#view-pumps .shift-history-board .work-record-row {
    display: grid;
    grid-template-columns: 25px 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--board-tone) 12%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.58));
    animation: shiftBoardReveal .32s var(--ui-ease) both;
}

#view-pumps .shift-history-board .work-record-num {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--board-tone);
    background: color-mix(in srgb, var(--board-tone) 11%, var(--theme-glass, rgba(255,255,255,.65)));
    font-size: 11px;
    font-weight: 850;
}

#view-pumps .shift-history-board .work-record-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 17px;
}

#view-pumps .shift-history-board .work-record-body { min-width: 0; }

#view-pumps .shift-history-board .work-record-title {
    overflow: hidden;
    color: var(--text1);
    font-size: 12.5px;
    font-weight: 790;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-pumps .shift-history-board .work-record-time {
    margin-top: 3px;
    color: var(--text2);
    font-size: 11.5px;
}

#view-pumps .shift-history-board .work-record-amount {
    min-width: 115px;
    padding-inline: 9px;
    color: var(--board-tone) !important;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
}

@media (max-width: 640px) {
    #view-pumps .pumps-settings-btn span { display: none; }
    #view-pumps .pump-card { min-height: 290px; }
    #view-pumps .work-board-employee {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }
    #view-pumps .work-board-employee .employee-row-actions,
    #view-pumps .work-board-employee .employee-row-actions .btn { width: 100%; }
    #view-pumps .shift-history-board .work-record-row {
        grid-template-columns: 23px 34px minmax(0, 1fr);
    }
    #view-pumps .shift-history-board .work-record-list.is-preview .work-record-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    #view-pumps .shift-history-board .work-record-list.is-preview .work-record-amount {
        grid-column: 2;
    }
    #view-pumps .shift-history-board .work-record-amount {
        grid-column: 3;
        min-width: 0;
        padding: 0;
        text-align: right;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-pumps :is(.work-board-employee, .work-record-row) { animation: none !important; }
}

/* ---------- employee work records: readable calendar + operational timeline ---------- */
#view-employees .work-records-full-view {
    --records-blue:#536FE8;
    --records-violet:#7B62E9;
    --records-green:#2FA96D;
    --records-gold:#D49325;
    padding:20px;
    border-color:var(--theme-stroke, rgba(255,255,255,.82));
    background:linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.79)), var(--theme-glass, rgba(236,242,255,.64)));
    box-shadow:0 18px 38px rgba(63,77,151,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}
#view-employees .work-records-topbar { margin-bottom:17px; padding-bottom:14px; border-bottom:1px solid rgba(101,121,201,.16); }
#view-employees .work-records-topbar > div { display:flex; gap:8px; }
#view-employees .work-records-page-title { margin-bottom:4px; }
#view-employees .work-records-page-title .section-title-icon { color:var(--text1); font-size:19px; font-weight:880; }
#view-employees .work-records-page-title .section-title-icon i { color:#fff; background:linear-gradient(145deg, #8873EA, #536FE8); box-shadow:0 7px 14px rgba(83,111,232,.22); }
#view-employees .work-records-range { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; color:var(--text2); font-size:12.5px; font-weight:700; }
#view-employees .work-records-range span { flex:0 0 auto; padding:5px 9px; border-radius:999px; color:var(--theme-ink, #4966D7); background:rgba(83,111,232,.1); font-weight:850; }

#view-employees .work-records-full-view .work-record-filter-row { gap:14px; align-items:stretch; }
#view-employees .work-records-full-view .work-record-filter-cal,
#view-employees .work-records-full-view .work-record-stats-panel {
    min-height:294px;
    padding:15px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius:20px;
    background:linear-gradient(140deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(237,243,255,.58)));
    box-shadow:0 10px 25px rgba(68,83,154,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .work-records-full-view .work-record-stats-head { min-height:30px; margin-bottom:10px; color:var(--text1); font-weight:850; }
#view-employees .work-records-full-view .work-record-stats-head i { width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#fff; background:linear-gradient(145deg, #8873EA, #536FE8); box-shadow:0 5px 12px rgba(83,111,232,.2); }
#view-employees .work-records-full-view .sd-nav-header { min-height:40px; margin-bottom:7px; }
#view-employees .work-records-full-view .date-picker-nav { width:37px; height:37px; border-radius:12px; border-color:rgba(83,111,232,.16); background:var(--theme-glass, rgba(255,255,255,.73)); transition:transform .18s var(--ui-ease), border-color .18s ease, color .18s ease, box-shadow .18s ease; }
#view-employees .work-records-full-view .date-picker-nav:hover { color:var(--records-blue); border-color:rgba(83,111,232,.42); box-shadow:0 6px 14px rgba(83,111,232,.13); transform:translateY(-1px); }
#view-employees .work-records-full-view .sd-nav-month { color:var(--text1); font-size:15px; font-weight:880; }
#view-employees .work-records-full-view .date-picker-weekdays { margin-bottom:6px; color:var(--text2); font-size:11.5px; font-weight:850; }
#view-employees .work-records-full-view .wr-cal-grid { gap:4px; margin-bottom:9px; }
#view-employees .work-records-full-view .wr-cal-cell {
    position:relative;
    min-height:34px;
    padding:0;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--text1);
    background:transparent;
    font-family:inherit;
    font-size:12.5px;
    font-weight:760;
    cursor:pointer;
    transition:transform .18s var(--ui-ease), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#view-employees .work-records-full-view .wr-cal-cell:hover { color:var(--records-blue); background:rgba(83,111,232,.1); transform:translateY(-1px); }
#view-employees .work-records-full-view .wr-cal-cell:focus-visible { outline:3px solid rgba(83,111,232,.3); outline-offset:2px; }
#view-employees .work-records-full-view .wr-cal-cell.is-picked { color:#fff; border-color:var(--theme-stroke, rgba(255,255,255,.74)); background:linear-gradient(145deg,#8068E9,#526CE7); box-shadow:0 7px 16px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3)); }
#view-employees .work-records-full-view .wr-cal-marks { position:absolute; inset:auto 0 3px; justify-content:center; gap:3px; }
#view-employees .work-records-full-view .wr-cal-dot { width:5px; height:5px; box-shadow:0 0 0 2px var(--theme-highlight, rgba(255,255,255,.48)); }
#view-employees .work-records-full-view .wr-cal-cell.is-picked .wr-cal-dot { background:var(--theme-surface, #fff); box-shadow:none; }
#view-employees .work-records-full-view .wr-cal-legend { justify-content:flex-start; gap:13px; padding-top:9px; border-top:1px solid rgba(91,111,190,.12); color:var(--text2); font-size:11.5px; font-weight:700; }
#view-employees .work-records-full-view .wr-cal-legend .wr-cal-dot { width:7px; height:7px; box-shadow:none; }
#view-employees .work-records-full-view .work-record-filter-active { margin-top:10px; padding:8px 10px; border:1px solid rgba(83,111,232,.18); border-radius:12px; background:rgba(83,111,232,.08); }

#view-employees .work-records-full-view .work-record-stats-list { gap:8px; }
#view-employees .work-records-full-view .work-record-stat-item { min-height:50px; padding:8px 10px; border:1px solid rgba(99,119,203,.12); border-radius:13px; background:var(--theme-glass, rgba(255,255,255,.62)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.83)); transition:transform .18s var(--ui-ease), box-shadow .18s ease, border-color .18s ease; }
#view-employees .work-records-full-view .work-record-stat-item:hover { transform:translateY(-1px); border-color:rgba(83,111,232,.32); box-shadow:0 7px 15px rgba(83,111,232,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.83)); }
#view-employees .work-records-full-view .work-record-stat-item.is-total { color:#fff; border-color:transparent; background:linear-gradient(135deg, #6E73E6, #8065DB); }
#view-employees .work-records-full-view .work-record-stat-item.is-total :is(.work-record-stat-label,.work-record-stat-value) { color:#fff !important; }

#view-employees .work-records-full-view .work-record-list { margin-top:17px; padding:4px; border:1px solid var(--theme-stroke, rgba(255,255,255,.76)); border-radius:20px; background:var(--theme-glass, rgba(255,255,255,.42)); }
#view-employees .work-records-full-view .work-record-day-divider { min-height:35px; margin:8px 4px 4px; padding:0 10px; border-radius:10px; color:var(--theme-ink, #4C68D9); background:rgba(83,111,232,.09); }
#view-employees .work-records-full-view .work-record-day-label { font-weight:860; }
#view-employees .work-records-full-view .work-record-day-count { padding:4px 8px; border-radius:999px; color:var(--theme-ink, #506DD8); background:var(--theme-glass, rgba(255,255,255,.72)); font-size:11px; font-weight:850; }
#view-employees .work-records-full-view .work-record-row { min-height:67px; display:grid; grid-template-columns:29px 42px minmax(0,1fr) auto; gap:10px; margin:0 4px 6px; padding:10px 12px; border:1px solid rgba(97,117,201,.16); border-radius:14px; background:var(--theme-glass, rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease; }
#view-employees .work-records-full-view .work-record-row:hover { transform:translateY(-1px); border-color:rgba(83,111,232,.42); box-shadow:0 9px 18px rgba(83,111,232,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#view-employees .work-records-full-view .work-record-num { width:29px; height:29px; margin:0; color:var(--theme-ink, #5870DC); background:rgba(83,111,232,.1); font-size:11px; font-weight:860; }
#view-employees .work-records-full-view .work-record-icon { width:42px; height:42px; border-radius:13px; font-size:19px; }
#view-employees .work-records-full-view .work-record-title { color:var(--text1); font-size:13px; font-weight:850; }
#view-employees .work-records-full-view .work-record-time { margin-top:3px; color:var(--text2); font-size:11.5px; font-weight:700; }
#view-employees .work-records-full-view .work-record-amount { min-width:124px; padding:7px 9px; border-radius:10px; background:rgba(47,169,109,.08); text-align:center; font-size:12.5px; font-weight:880; }

@media (max-width:700px) {
    #view-employees .work-records-full-view { padding:14px; }
    #view-employees .work-records-topbar { align-items:flex-start; }
    #view-employees .work-records-topbar > div { flex-wrap:wrap; justify-content:flex-end; }
    #view-employees .work-records-full-view .work-record-row { grid-template-columns:27px 39px minmax(0,1fr); }
    #view-employees .work-records-full-view .work-record-amount { grid-column:3; justify-self:start; min-width:0; }
}
@media (max-width:460px) {
    #view-employees .work-records-topbar { flex-direction:column; }
    #view-employees .work-records-topbar > div { width:100%; }
    #view-employees .work-records-topbar .btn { flex:1; }
    #view-employees .work-records-range { align-items:flex-start; flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .work-records-full-view :is(.work-record-row,.work-record-stat-item,.wr-cal-cell,.date-picker-nav) { transition:none !important; }
}

/* Expense correction document — audit-first responsive form */
.overlay .modal.expense-correction-modal {
    --correction-tone:#B46A23;
    --correction-tone-rgb:180,106,35;
    width:min(920px,calc(100vw - 36px));
    max-width:none;
    max-height:calc(100dvh - 32px);
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:0;
    padding:14px;
    overflow:hidden;
    border:1px solid rgba(var(--correction-tone-rgb),.28);
    border-radius:26px;
    background:radial-gradient(circle at 100% 0%,rgba(var(--correction-tone-rgb),.16),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(245,247,252,.98)),var(--theme-glass, rgba(218,225,238,.96)));
    box-shadow:0 28px 78px rgba(25,34,52,.34),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}
.overlay .modal.sale-correction-modal { --correction-tone:#7656D9;--correction-tone-rgb:118,86,217; }
.sale-correction-fields-grid>.sale-correction-fuel-field,.sale-correction-fields-grid>.sale-correction-payment-field,.sale-correction-fields-grid>.sale-correction-debtor-field { grid-column:1/-1; }
.sale-correction-fields-grid .fuel-tile-row { margin:0; }
.sale-correction-fields-grid .fuel-tile { min-height:76px; }
.sale-correction-fields-grid .paymethod-row { margin:0; }
.sale-correction-fields-grid .customer-search-results { position:relative;z-index:5;max-height:150px;overflow-y:auto; }
.expense-correction-head { min-height:76px;display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.9));border-radius:19px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.94)),rgba(var(--correction-tone-rgb),.1));box-shadow:0 10px 24px rgba(41,52,75,.09),inset 0 1px 0 var(--theme-highlight, #fff); }
.expense-correction-head-icon { width:48px;height:48px;display:grid;place-items:center;flex:0 0 48px;border-radius:15px;color:#fff;background:linear-gradient(135deg,#D18B43,var(--correction-tone));box-shadow:0 9px 20px rgba(var(--correction-tone-rgb),.28); }
.expense-correction-head-icon i { font-size:23px; }
.expense-correction-head-copy { min-width:0;flex:1; }
.expense-correction-head-copy>span { color:var(--correction-tone);font-size:10px;font-weight:900;letter-spacing:.08em; }
.expense-correction-head-copy h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:900;line-height:1.45; }
.expense-correction-head-copy p { margin:2px 0 0;color:var(--text2);font-size:12px;font-weight:750; }
.expense-correction-close { width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border:1px solid rgba(var(--correction-tone-rgb),.18);border-radius:14px;color:var(--text2);background:var(--theme-glass, rgba(255,255,255,.66));cursor:pointer;transition:color .2s ease,background .2s ease,border-color .2s ease; }
.expense-correction-close:hover { color:#fff;border-color:var(--correction-tone);background:var(--correction-tone); }
.expense-correction-close:focus-visible { outline:3px solid rgba(var(--correction-tone-rgb),.24);outline-offset:2px; }
.expense-correction-summary { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 2px 0; }
.expense-correction-summary>div { min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;column-gap:9px;padding:10px 12px;border:1px solid rgba(var(--correction-tone-rgb),.14);border-radius:15px;background:var(--theme-glass, rgba(255,255,255,.67)); }
.expense-correction-summary i { grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:var(--correction-tone);background:rgba(var(--correction-tone-rgb),.11);font-size:19px; }
.expense-correction-summary span { color:var(--text2);font-size:10.5px;font-weight:750; }
.expense-correction-summary strong { min-width:0;color:var(--text1);font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.expense-correction-body { min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);gap:12px;padding:12px 2px;overflow-y:auto;scrollbar-gutter:stable; }
.expense-correction-fields,.expense-correction-reason-panel { min-width:0;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.82));border-radius:18px;background:var(--theme-glass, rgba(255,255,255,.58));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8)); }
.expense-correction-reason-panel { align-self:start;border-color:rgba(var(--correction-tone-rgb),.2);background:linear-gradient(145deg,var(--theme-glass, rgba(255,252,248,.86)),rgba(var(--correction-tone-rgb),.08)); }
.expense-correction-section-title { display:flex;align-items:center;gap:10px;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid rgba(80,96,126,.12); }
.expense-correction-section-title>i { width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:12px;color:var(--correction-tone);background:rgba(var(--correction-tone-rgb),.1);font-size:19px; }
.expense-correction-section-title div { min-width:0;display:grid;gap:2px; }
.expense-correction-section-title strong { color:var(--text1);font-size:13.5px;font-weight:900; }
.expense-correction-section-title span { color:var(--text2);font-size:10.5px;font-weight:650;line-height:1.45; }
.expense-correction-fields-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start; }
.expense-correction-fields-grid>.field,.expense-correction-fields-grid>.info-box,.expense-correction-fields-grid>.preview-box,.expense-correction-fields-grid>.handover-outstanding-note { margin:0;min-width:0; }
.expense-correction-fields-grid>.field:has(.attach-files-wrap),.expense-correction-fields-grid>.field:has(textarea),.expense-correction-fields-grid>.info-box,.expense-correction-fields-grid>.preview-box,.expense-correction-fields-grid>.handover-outstanding-note { grid-column:1/-1; }
.overlay .expense-correction-modal .field>label { display:flex;align-items:center;gap:5px;margin-bottom:7px;color:var(--text1);font-size:12px;font-weight:850; }
.overlay .expense-correction-modal :is(input,select,textarea) { min-height:48px;border-radius:13px;background:var(--theme-glass, rgba(255,255,255,.82)); }
.overlay .expense-correction-modal :is(input,select,textarea):focus { border-color:var(--correction-tone);box-shadow:0 0 0 3px rgba(var(--correction-tone-rgb),.16); }
.overlay .expense-correction-modal textarea { min-height:94px;resize:vertical;line-height:1.7; }
.expense-required-mark { color:var(--theme-ink, #C23878);font-size:16px;line-height:1; }
.expense-correction-reason-panel small { display:flex;align-items:flex-start;gap:6px;margin-top:9px;color:var(--text2);font-size:10.5px;font-weight:650;line-height:1.65; }
.expense-correction-reason-panel small i { margin-top:3px;color:var(--correction-tone);font-size:14px; }
.overlay .expense-correction-modal .attach-files-wrap { display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px;align-items:start; }
.overlay .expense-correction-modal .btn-add-type { width:100%;min-height:44px;justify-content:center;border:1px dashed rgba(var(--correction-tone-rgb),.36);border-radius:12px;color:var(--correction-tone);background:rgba(var(--correction-tone-rgb),.07); }
.overlay .expense-correction-modal .attach-files-list { min-width:0;max-height:104px;display:flex;flex-wrap:wrap;gap:7px;overflow-y:auto; }
.overlay .expense-correction-modal .attach-file-chip { max-width:100%;min-width:0; }
.overlay .expense-correction-modal .attach-file-name { min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.expense-correction-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;margin:0;padding:12px 2px 2px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.75)); }
.overlay .expense-correction-modal .expense-correction-foot .btn { min-height:48px;border-radius:14px; }
.overlay .expense-correction-modal .expense-correction-foot .btn-primary { background:linear-gradient(135deg,#C77B31,var(--correction-tone));box-shadow:0 9px 20px rgba(var(--correction-tone-rgb),.25); }
html[data-theme="dark"] .overlay .modal.expense-correction-modal { background:radial-gradient(circle at 100% 0%,rgba(var(--correction-tone-rgb),.18),transparent 40%),linear-gradient(145deg,rgba(27,35,50,.98),rgba(19,26,39,.98)); }
html[data-theme="dark"] .expense-correction-head,html[data-theme="dark"] .expense-correction-fields,html[data-theme="dark"] .expense-correction-reason-panel,html[data-theme="dark"] .expense-correction-summary>div { border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.045); }
html[data-theme="dark"] .overlay .expense-correction-modal :is(input,select,textarea) { background:rgba(7,13,24,.54); }
@media (max-width:760px) {
    .overlay .modal.expense-correction-modal { width:min(540px,calc(100vw - 18px));max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }
    .expense-correction-summary,.expense-correction-body { display:flex;flex-direction:column;overflow:visible; }
    .expense-correction-summary { flex:0 0 auto; }
    .expense-correction-body { flex:0 0 auto; }
    .expense-correction-fields-grid { grid-template-columns:1fr; }
    .expense-correction-fields-grid>* { grid-column:1!important; }
    .expense-correction-foot { position:static;flex:0 0 auto; }
}
@media (max-width:430px) {
    .overlay .modal.expense-correction-modal { padding:9px;border-radius:20px; }
    .expense-correction-head { min-height:66px;padding:9px 10px; }
    .expense-correction-head-icon { width:42px;height:42px;flex-basis:42px; }
    .expense-correction-head-copy h3 { font-size:16px; }
    .expense-correction-summary>div,.expense-correction-fields,.expense-correction-reason-panel { padding:11px; }
    .overlay .expense-correction-modal .attach-files-wrap { grid-template-columns:1fr; }
    .expense-correction-foot { grid-template-columns:1fr; }
    .expense-correction-foot #ee_cancelBtn { grid-row:2; }
    .expense-correction-foot #es_cancelBtn { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) {
    .expense-correction-close,.overlay .expense-correction-modal .btn { transition:none!important; }
}

/* Financial and people records — scoped overrides for legacy, higher-specificity
   list styles that do not inherit the unified operational-record treatment. */
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-row {
    min-height:72px;
    grid-template-columns:29px 44px minmax(0,1fr) auto;
    gap:11px;
    padding:11px 13px;
}
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon {
    width:44px;
    height:44px;
    border-radius:14px;
}
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon i { font-size:21px; }
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-title {
    font-size:15.5px;
    font-weight:820;
    line-height:1.65;
}
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-time {
    font-size:13px;
    font-weight:720;
    line-height:1.55;
}
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-amount {
    font-size:14px;
    font-weight:880;
}
:is(#view-sales-details,#view-expenses-details) .sd-buyer-row {
    min-height:76px;
    padding:11px 13px;
    transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
    animation:recordRowReveal .34s var(--ui-ease) both;
}
:is(#view-sales-details,#view-expenses-details) .sd-buyer-row:hover { transform:translateY(-2px); }
:is(#view-sales-details,#view-expenses-details) .sd-buyer-avatar {
    width:44px;
    height:44px;
    font-size:20px;
}
:is(#view-sales-details,#view-expenses-details) .sd-buyer-name { font-size:15px; font-weight:820; line-height:1.55; }
:is(#view-sales-details,#view-expenses-details) .sd-buyer-meta { font-size:12.5px; line-height:1.55; }
:is(#view-sales-details,#view-expenses-details) :is(.sd-buyer-value,.sd-buyer-amount) { font-size:14px; font-weight:850; }

#view-employees #employeesListWrap .emp-row {
    min-height:86px;
    padding:12px 14px;
    animation:recordRowReveal .34s var(--ui-ease) both;
}
#view-employees #employeesListWrap .emp-row-avatar {
    width:56px;
    height:56px;
    font-size:22px;
}
#view-employees #employeesListWrap .emp-row-name { font-size:16px; font-weight:850; line-height:1.5; }
#view-employees #employeesListWrap .emp-row-meta-item {
    min-height:32px;
    margin-top:0;
    font-size:12.5px;
    line-height:1.55;
}
#view-employees #employeesListWrap .emp-row-meta-item i {
    width:22px;
    height:22px;
    font-size:13px;
}
#view-employees #employeesListWrap .emp-row-status {
    min-height:36px;
    margin-top:0;
    padding:7px 11px;
    font-size:12.5px;
}
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-title {
    font-size:15.5px;
    font-weight:820;
    line-height:1.65;
}
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-time { font-size:13px; }
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-icon {
    width:44px;
    height:44px;
    flex-basis:44px;
}

:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) {
    min-height:82px;
    padding:12px 14px;
    animation:recordRowReveal .34s var(--ui-ease) both;
    transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee):hover { transform:translateY(-2px); }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-avatar {
    width:48px;
    height:48px;
    font-size:20px;
    transition:transform .22s var(--ui-ease),box-shadow .22s ease;
}
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee):hover .employee-avatar { transform:scale(1.06); }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-name {
    font-size:16px;
    font-weight:850;
    line-height:1.5;
}
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-status {
    font-size:13px;
    line-height:1.55;
}
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .balance-pill {
    min-height:34px;
    font-size:13px;
    font-weight:850;
}
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .balance-pill i { font-size:16px; }

:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr {
    animation:ledgerRecordReveal .3s var(--ui-ease) both;
    transition:background-color .2s ease,box-shadow .2s ease;
}
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr:nth-child(2) { animation-delay:.025s; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr:nth-child(3) { animation-delay:.05s; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr:nth-child(4) { animation-delay:.075s; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr:nth-child(5) { animation-delay:.1s; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td {
    padding-block:12px;
    font-size:13.5px;
    line-height:1.65;
}
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td:nth-child(4) {
    font-size:14.5px;
    font-weight:760;
}
:is(#customerProfileWrap,#employeeAccountProfileWrap) :is(.ledger-amount-value,.ledger-status-cell) { font-size:13.5px; font-weight:850; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody i { font-size:16px; }

@keyframes ledgerRecordReveal {
    from { opacity:0; transform:translateY(7px); }
    to { opacity:1; transform:translateY(0); }
}

@media (max-width:640px) {
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-row {
        grid-template-columns:25px 40px minmax(0,1fr);
        gap:9px;
        padding:10px;
    }
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon {
        width:40px;
        height:40px;
    }
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-title,
    #view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-title { font-size:14.5px; }
    #view-employees #employeesListWrap .emp-row-name,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-name { font-size:15px; }
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-avatar { width:44px; height:44px; }
    :is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td { font-size:13px; }
    :is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td:nth-child(4) { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
    :is(#view-sales-details,#view-expenses-details) .sd-buyer-row,
    #view-employees #employeesListWrap .emp-row,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee),
    :is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr { animation:none !important; transition:none !important; }
    :is(#view-sales-details,#view-expenses-details) .sd-buyer-row:hover,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee):hover,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee):hover .employee-avatar { transform:none !important; }
}

/* Finance context test: the selected tab lends its own semantic hue to the
   surrounding shell. The mix stays deliberately pale so content contrast and
   the product's blue identity remain stable. */
body.finance-context-theme {
    --finance-context-tone: var(--ui-green);
    --finance-context-bg: var(--success-bg);
}

body.finance-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb,var(--finance-context-tone) 25%,transparent) 0%, transparent 43%),
        radial-gradient(circle at 87% 20%, color-mix(in srgb,var(--finance-context-tone) 18%,#4f6ef7 7%) 0%, transparent 42%),
        radial-gradient(circle at 28% 94%, color-mix(in srgb,var(--finance-context-tone) 13%,#ff8a3c 4%) 0%, transparent 46%),
        radial-gradient(circle at 94% 82%, color-mix(in srgb,var(--finance-context-tone) 11%,transparent) 0%, transparent 40%);
    transition:background .38s var(--ui-ease);
}

body.finance-context-theme :is(.top-bar,.sidebar) {
    border-color:color-mix(in srgb,var(--finance-context-tone) 18%,var(--theme-stroke, rgba(255,255,255,.72)));
    box-shadow:0 14px 38px color-mix(in srgb,var(--finance-context-tone) 9%,rgba(35,48,96,.10)), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
    transition:border-color .3s ease,box-shadow .3s ease;
}

body.finance-context-theme #mainContent :is(
    #view-sales,
    #view-sales-details,
    #view-expenses,
    #view-expenses-details,
    #view-salaries,
    #view-customers,
    #view-till
) {
    --ui-tone:var(--finance-context-tone);
    --ui-tone-2:color-mix(in srgb,var(--finance-context-tone) 72%,var(--ui-blue));
}

body.finance-context-theme #mainContent .finance-tabbar {
    border-color:color-mix(in srgb,var(--finance-context-tone) 22%,var(--theme-stroke, rgba(255,255,255,.82)));
    background:
        radial-gradient(circle at 82% 0%,color-mix(in srgb,var(--finance-context-tone) 12%,transparent),transparent 42%),
        linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--finance-context-bg) 30%,var(--ui-surface-soft)));
    box-shadow:0 14px 34px color-mix(in srgb,var(--finance-context-tone) 10%,rgba(35,48,96,.08)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

html[data-theme="dark"] body.finance-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--finance-context-tone) 28%,transparent) 0%,transparent 44%),
        radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--finance-context-tone) 20%,#4f6ef7 6%) 0%,transparent 42%),
        radial-gradient(circle at 30% 94%,color-mix(in srgb,var(--finance-context-tone) 16%,transparent) 0%,transparent 46%);
}

/* Profile subsection context: each workspace temporarily lends the hue of its
   launcher card to the whole application shell. Leaving profile restores the
   base theme because none of the permanent design tokens are overwritten. */
body.profile-context-theme {
    --profile-context-tone:#D88908;
    --profile-context-deep:#A85B00;
    --profile-context-soft:#FFF6DF;
}

body.profile-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--profile-context-tone) 29%,transparent) 0%,transparent 43%),
        radial-gradient(circle at 87% 20%,color-mix(in srgb,var(--profile-context-tone) 23%,white 3%) 0%,transparent 42%),
        radial-gradient(circle at 28% 94%,color-mix(in srgb,var(--profile-context-deep) 16%,transparent) 0%,transparent 46%),
        radial-gradient(circle at 94% 82%,color-mix(in srgb,var(--profile-context-tone) 13%,transparent) 0%,transparent 40%);
    transition:background .38s var(--ui-ease);
}

body.profile-context-theme :is(.top-bar,.sidebar) {
    border-color:color-mix(in srgb,var(--profile-context-tone) 24%,var(--theme-stroke, rgba(255,255,255,.72)));
    background:
        radial-gradient(circle at 82% 0%,color-mix(in srgb,var(--profile-context-tone) 10%,transparent),transparent 48%),
        linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--profile-context-soft) 36%,var(--ui-surface-soft)));
    box-shadow:0 14px 38px color-mix(in srgb,var(--profile-context-tone) 13%,rgba(35,48,96,.10)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

body.profile-context-theme #mainContent #view-profile {
    --ui-tone:var(--profile-context-tone);
    --ui-tone-2:color-mix(in srgb,var(--profile-context-tone) 78%,white);
}

body.profile-context-theme :is(.top-bar-icon-btn.active,.sidebar .nav-item.active) {
    color:var(--profile-context-deep);
    border-color:color-mix(in srgb,var(--profile-context-tone) 30%,transparent);
    background:color-mix(in srgb,var(--profile-context-soft) 72%,var(--ui-surface));
}

html[data-theme="dark"] body.profile-context-theme {
    --profile-context-soft:color-mix(in srgb,var(--profile-context-tone) 16%,#15192B);
}

html[data-theme="dark"] body.profile-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--profile-context-tone) 32%,transparent) 0%,transparent 44%),
        radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--profile-context-tone) 23%,transparent) 0%,transparent 42%),
        radial-gradient(circle at 30% 94%,color-mix(in srgb,var(--profile-context-deep) 19%,transparent) 0%,transparent 46%);
}

/* Reports context: mirrors the finance treatment while using each report's
   existing semantic color. Charts and text retain their own data colors. */
body.reports-context-theme {
    --reports-context-tone: #5A72D9;
    --reports-context-bg: rgba(90,114,217,.14);
}

body.reports-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--reports-context-tone) 24%,transparent) 0%,transparent 43%),
        radial-gradient(circle at 87% 20%,color-mix(in srgb,var(--reports-context-tone) 18%,#4f6ef7 7%) 0%,transparent 42%),
        radial-gradient(circle at 28% 94%,color-mix(in srgb,var(--reports-context-tone) 13%,#2fbfa6 4%) 0%,transparent 46%),
        radial-gradient(circle at 94% 82%,color-mix(in srgb,var(--reports-context-tone) 10%,transparent) 0%,transparent 40%);
    transition:background .38s var(--ui-ease);
}

body.reports-context-theme :is(.top-bar,.sidebar) {
    border-color:color-mix(in srgb,var(--reports-context-tone) 18%,var(--theme-stroke, rgba(255,255,255,.72)));
    box-shadow:0 14px 38px color-mix(in srgb,var(--reports-context-tone) 9%,rgba(35,48,96,.10)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
    transition:border-color .3s ease,box-shadow .3s ease;
}

body.reports-context-theme #mainContent :is(
    #view-reports-financial,
    #view-reports-shift,
    #view-reports-tanks,
    #view-reports-accounts,
    #view-reports-compare,
    #view-reports-journal,
    #view-reports-capital
) {
    --ui-tone:var(--reports-context-tone);
    --ui-tone-2:color-mix(in srgb,var(--reports-context-tone) 72%,var(--ui-blue));
}

body.reports-context-theme #mainContent .reports-tabbar {
    border-color:color-mix(in srgb,var(--reports-context-tone) 22%,var(--theme-stroke, rgba(255,255,255,.82)));
    background:
        radial-gradient(circle at 82% 0%,color-mix(in srgb,var(--reports-context-tone) 12%,transparent),transparent 42%),
        linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--reports-context-bg) 30%,var(--ui-surface-soft)));
    box-shadow:0 14px 34px color-mix(in srgb,var(--reports-context-tone) 10%,rgba(35,48,96,.08)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
    transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

html[data-theme="dark"] body.reports-context-theme::before {
    background:
        radial-gradient(circle at 18% 12%,color-mix(in srgb,var(--reports-context-tone) 28%,transparent) 0%,transparent 44%),
        radial-gradient(circle at 86% 18%,color-mix(in srgb,var(--reports-context-tone) 20%,#4f6ef7 6%) 0%,transparent 42%),
        radial-gradient(circle at 30% 94%,color-mix(in srgb,var(--reports-context-tone) 16%,transparent) 0%,transparent 46%);
}

/* ---------- employee profile: lively metrics and readable daily-hours timeline ---------- */
#view-employees #employeeProfileSummary .employee-summary-metric {
    --summary-tone: #5E67E8;
    --summary-tint: rgba(94,103,232,.13);
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--summary-tone) 18%, var(--theme-stroke, rgba(255,255,255,.76)));
    background:
        radial-gradient(circle at 100% 0%, var(--summary-tint), transparent 47%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(229,237,250,.61)));
    transition: transform .2s var(--ui-ease), border-color .2s ease, box-shadow .2s ease;
}
#view-employees #employeeProfileSummary .employee-summary-metric::after {
    content: '';
    position: absolute;
    inset: auto -18% -70% 40%;
    height: 100px;
    border-radius: 50%;
    background: var(--summary-tint);
    filter: blur(12px);
    pointer-events: none;
}
#view-employees #employeeProfileSummary .employee-summary-metric:hover {
    border-color: color-mix(in srgb, var(--summary-tone) 42%, var(--theme-stroke, rgba(255,255,255,.82)));
    box-shadow: 0 15px 28px color-mix(in srgb, var(--summary-tone) 15%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    transform: translateY(-3px);
}
#view-employees #employeeProfileSummary .employee-summary-metric.is-salary { --summary-tone:#2FA96D; --summary-tint:rgba(47,169,109,.14); }
#view-employees #employeeProfileSummary .employee-summary-metric.is-leave { --summary-tone:#D49B17; --summary-tint:rgba(212,155,23,.14); }
#view-employees #employeeProfileSummary .employee-summary-metric.is-contact { --summary-tone:#3887E8; --summary-tint:rgba(56,135,232,.14); }
#view-employees #employeeProfileSummary .employee-summary-metric .metric-icon {
    position: relative;
    z-index: 1;
    width: 43px;
    height: 43px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 14px;
    color: #fff !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--summary-tone) 78%, var(--theme-surface, #fff)), var(--summary-tone)) !important;
    box-shadow: 0 7px 15px color-mix(in srgb, var(--summary-tone) 23%, transparent);
}
#view-employees #employeeProfileSummary .employee-summary-metric .metric-label { position:relative; z-index:1; color:var(--text2); font-weight:760; }
#view-employees #employeeProfileSummary .employee-summary-metric .metric-value { position:relative; z-index:1; color:var(--text1); font-weight:880; }

#view-employees .employee-daily-hours-card {
    --work-tone: #665FE4;
    padding: 16px;
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    background:
        radial-gradient(circle at 100% 0%, rgba(102,95,228,.11), transparent 40%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.75)), var(--theme-glass, rgba(224,232,247,.56)));
}
#view-employees .employee-daily-hours-card .profile-section-head { min-height:44px; margin-bottom:11px; }
#view-employees .employee-daily-hours-card .section-title-icon { color:var(--text1); font-weight:860; }
#view-employees .employee-daily-hours-card .section-title-icon > i { color:#fff; background:linear-gradient(145deg, #8068E9, #526CE7); box-shadow:0 7px 15px rgba(87,91,218,.22); }
#view-employees .employee-daily-hours-card .work-record-list {
    display: grid;
    gap: 8px;
    padding: 8px;
    border-color: rgba(102,95,228,.16);
    background: var(--theme-highlight, rgba(255,255,255,.34));
}
#view-employees .employee-daily-hours-card .work-record-day-divider {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1px 2px;
    padding: 5px 9px;
    border-radius: 11px;
    color: var(--theme-ink, #5665D7);
    background: rgba(91,105,224,.1);
    font-weight: 800;
}
#view-employees .employee-daily-hours-card .work-record-row {
    display: grid;
    grid-template-columns: 25px 38px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    margin: 0;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--work-tone) 15%, var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius: 14px;
    background: var(--theme-glass, rgba(255,255,255,.66));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    animation: employeeHoursRowEnter .32s var(--ui-ease) both;
    transition: transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease;
}
#view-employees .employee-daily-hours-card .work-record-row:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--work-tone) 43%, var(--theme-stroke, rgba(255,255,255,.84))); box-shadow:0 9px 19px color-mix(in srgb, var(--work-tone) 12%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
#view-employees .employee-daily-hours-card .work-record-num { width:25px; height:25px; margin:0; color:var(--work-tone); background:color-mix(in srgb, var(--work-tone) 11%, var(--theme-glass, rgba(255,255,255,.72))); font-size:11px; font-weight:850; }
#view-employees .employee-daily-hours-card .work-record-icon { width:38px; height:38px; border-radius:12px; color:var(--work-tone); background:color-mix(in srgb, var(--work-tone) 13%, var(--theme-glass, rgba(255,255,255,.74))); font-size:18px; }
#view-employees .employee-daily-hours-card .work-record-title { color:var(--text1); font-size:13px; font-weight:850; }
#view-employees .employee-daily-hours-card .work-record-time { margin-top:3px; color:var(--text2); font-size:11.5px; }
#view-employees .employee-daily-hours-card .work-record-amount { min-width:124px; padding:7px 10px; border-radius:11px; color:var(--work-tone); background:color-mix(in srgb, var(--work-tone) 9%, var(--theme-glass, rgba(255,255,255,.7))); font-size:12px; font-weight:850; text-align:center; }
@keyframes employeeHoursRowEnter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 620px) {
    #view-employees .employee-daily-hours-card .work-record-row { grid-template-columns:24px 36px minmax(0,1fr); }
    #view-employees .employee-daily-hours-card .work-record-amount { grid-column:3; justify-self:start; min-width:0; }
}
@media (prefers-reduced-motion: reduce) {
    #view-employees :is(.employee-summary-metric, .employee-daily-hours-card .work-record-row) { animation:none !important; transition:none !important; }
}

/* ---------- employee profile: financial, record and leave sections ---------- */
#view-employees .employee-profile-section-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top: 14px;
}
#view-employees .employee-profile-section-card {
    --section-card-tone:#665fe4;
    position:relative;
    overflow:hidden;
    min-height:118px;
    display:grid;
    grid-template-columns:54px minmax(0,1fr) 36px;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid color-mix(in srgb,var(--section-card-tone) 20%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:20px;
    color:var(--text1);
    background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--section-card-tone) 15%,transparent),transparent 45%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.82)),var(--theme-glass, rgba(225,233,247,.62)));
    box-shadow:0 14px 30px rgba(38,49,97,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    font:inherit;
    text-align:start;
    cursor:pointer;
    transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
#view-employees .employee-profile-section-card:hover {
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--section-card-tone) 48%,var(--theme-stroke, rgba(255,255,255,.7)));
    box-shadow:0 18px 36px color-mix(in srgb,var(--section-card-tone) 16%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
#view-employees .employee-profile-section-card:focus-visible { outline:3px solid color-mix(in srgb,var(--section-card-tone) 48%,transparent); outline-offset:3px; }
#view-employees .employee-profile-section-card.is-green { --section-card-tone:#38a66e; }
#view-employees .employee-profile-section-card.is-blue { --section-card-tone:#4f7be8; }
#view-employees .employee-profile-section-card.is-rose { --section-card-tone:#d86374; }
#view-employees .employee-profile-section-card.is-amber { --section-card-tone:#d69a18; }
#view-employees .employee-profile-section-icon,
#view-employees .employee-profile-section-arrow { display:inline-flex; align-items:center; justify-content:center; }
#view-employees .employee-profile-section-icon { width:54px; height:54px; border-radius:17px; color:#fff; background:linear-gradient(145deg,color-mix(in srgb,var(--section-card-tone) 72%,var(--theme-surface, #fff)),var(--section-card-tone)); box-shadow:0 9px 20px color-mix(in srgb,var(--section-card-tone) 27%,transparent); font-size:25px; }
#view-employees .employee-profile-section-copy { min-width:0; display:grid; gap:7px; }
#view-employees .employee-profile-section-copy strong { font-size:16px; font-weight:880; }
#view-employees .employee-profile-section-copy small { color:var(--text2); font-size:12px; font-weight:750; }
#view-employees .employee-profile-section-arrow { width:36px; height:36px; border-radius:12px; color:var(--section-card-tone); background:color-mix(in srgb,var(--section-card-tone) 10%,var(--theme-glass, rgba(255,255,255,.72))); font-size:19px; transition:transform .2s var(--ui-ease),background .2s ease; }
#view-employees .employee-profile-section-card:hover .employee-profile-section-arrow { transform:translateX(-3px); background:color-mix(in srgb,var(--section-card-tone) 17%,var(--theme-glass, rgba(255,255,255,.72))); }
#view-employees .employee-profile-section-card:last-child:nth-child(odd) { grid-column:1 / -1; }
@media (max-width:700px) {
    #view-employees .employee-profile-section-grid { grid-template-columns:1fr; gap:10px; }
    #view-employees .employee-profile-section-card { min-height:96px; grid-template-columns:48px minmax(0,1fr) 34px; gap:11px; padding:14px; border-radius:17px; }
    #view-employees .employee-profile-section-card:last-child:nth-child(odd) { grid-column:auto; }
    #view-employees .employee-profile-section-icon { width:48px; height:48px; border-radius:15px; font-size:22px; }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .employee-profile-section-card,
    #view-employees .employee-profile-section-arrow { transition:none !important; }
}

#view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) {
    --section-tone: #6C63E7;
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--section-tone) 12%, transparent), transparent 39%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.76)), var(--theme-glass, rgba(224,233,248,.56)));
    box-shadow: 0 15px 31px rgba(38,49,97,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .employee-salaries-card { --section-tone:#38A66E; }
#view-employees .employee-handover-card { --section-tone:#7962E5; }
#view-employees .employee-records-card { --section-tone:#4F7BE8; }
#view-employees .employee-leaves-card { --section-tone:#D69A18; }
#view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) .profile-section-head {
    min-height: 45px;
    gap: 10px;
    margin-bottom: 12px;
}
#view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) .section-title-icon { color:var(--text1); font-weight:870; }
#view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) .section-title-icon > i {
    color:#fff;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.62));
    background:linear-gradient(145deg, color-mix(in srgb, var(--section-tone) 72%, var(--theme-surface, #fff)), var(--section-tone));
    box-shadow:0 7px 15px color-mix(in srgb, var(--section-tone) 23%, transparent);
}
#view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) .profile-section-head .btn { min-height:38px; border-radius:12px; }

#view-employees .employee-salaries-card .info-box,
#view-employees .employee-handover-card .history-entry {
    margin: 0 0 10px;
    min-height: 52px;
    border-color: color-mix(in srgb, var(--section-tone) 15%, var(--theme-stroke, rgba(255,255,255,.78)));
    border-radius: 14px;
    background: color-mix(in srgb, var(--section-tone) 6%, var(--theme-glass, rgba(255,255,255,.68)));
}
#view-employees .employee-salaries-card .ledger-table-wrap {
    margin:0;
    border-color: rgba(56,166,110,.19);
    background: var(--theme-glass, rgba(255,255,255,.38));
}
#view-employees .employee-salaries-card .ledger-table tbody tr { transition: background .18s ease; }
#view-employees .employee-salaries-card .ledger-table tbody tr:hover { background:rgba(56,166,110,.08); }

#view-employees .employee-salaries-card .salary-payment-list {
    display:grid;
    gap:8px;
    padding:8px;
    border:1px solid rgba(56,166,110,.19);
    border-radius:16px;
    background:var(--theme-highlight, rgba(255,255,255,.34));
}
#view-employees .employee-salaries-card .salary-payment-list-item {
    display:grid;
    grid-template-columns:25px 39px minmax(0,1fr) auto minmax(122px,auto);
    align-items:center;
    gap:10px;
    min-height:68px;
    padding:10px 11px;
    border:1px solid color-mix(in srgb, var(--salary-row-tone) 17%, var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:14px;
    background:linear-gradient(135deg, color-mix(in srgb, var(--salary-row-tint) 38%, var(--theme-glass, rgba(255,255,255,.76))), var(--theme-glass, rgba(255,255,255,.62)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease;
}
#view-employees .employee-salaries-card .salary-payment-list-item:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--salary-row-tone) 45%, var(--theme-stroke, rgba(255,255,255,.82))); box-shadow:0 9px 18px color-mix(in srgb, var(--salary-row-tone) 12%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
.salary-payment-list-seq { width:25px; height:25px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; color:var(--salary-row-tone); background:color-mix(in srgb, var(--salary-row-tint) 72%, var(--theme-glass, rgba(255,255,255,.6))); font-size:11px; font-weight:850; }
.salary-payment-list-icon { width:39px; height:39px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; color:var(--salary-row-tone); background:color-mix(in srgb, var(--salary-row-tint) 80%, var(--theme-glass, rgba(255,255,255,.56))); font-size:19px; }
.salary-payment-list-main { min-width:0; display:grid; gap:3px; }
.salary-payment-list-main strong { overflow:hidden; color:var(--text1); font-size:13px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.salary-payment-list-main small { display:flex; align-items:center; gap:4px; color:var(--text2); font-size:11.5px; }
.salary-payment-list-main small i { color:var(--salary-row-tone); font-size:13px; }
.salary-payment-list-status { padding:5px 8px; border-radius:999px; color:var(--salary-row-tone); background:color-mix(in srgb, var(--salary-row-tint) 78%, var(--theme-glass, rgba(255,255,255,.6))); font-size:11px; font-weight:800; white-space:nowrap; }
.salary-payment-list-amount { min-width:122px; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:8px 10px; border-radius:11px; color:var(--salary-row-tone); background:var(--theme-glass, rgba(255,255,255,.66)); font-size:12px; font-weight:880; white-space:nowrap; }
.salary-payment-list-amount i { font-size:15px; }
@media (max-width:700px) {
    #view-employees .employee-salaries-card .salary-payment-list-item { grid-template-columns:25px 38px minmax(0,1fr); }
    .salary-payment-list-status { grid-column:3; justify-self:start; }
    .salary-payment-list-amount { grid-column:3; justify-self:start; min-width:0; }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .employee-salaries-card .salary-payment-list-item { transition:none !important; }
}

#view-employees .employee-handover-card .handover-outstanding-note {
    margin:0 0 10px;
    border-radius:14px;
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}
#view-employees .employee-handover-card .history-entry { padding:0; overflow:hidden; }
#view-employees .employee-handover-card .history-item { min-height:52px; padding:11px 13px; }

#view-employees .employee-records-card .work-record-list {
    display:grid;
    gap:8px;
    padding:8px;
    border-color:rgba(79,123,232,.17);
    background:var(--theme-highlight, rgba(255,255,255,.34));
}
#view-employees .employee-records-card .work-record-day-divider {
    min-height:31px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 1px 2px;
    padding:5px 9px;
    border-radius:11px;
    color:var(--theme-ink, #4873D3);
    background:rgba(79,123,232,.1);
    font-weight:800;
}
#view-employees .employee-records-card .work-record-row {
    display:grid;
    grid-template-columns:25px 38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    min-height:64px;
    margin:0;
    padding:10px 11px;
    border:1px solid rgba(79,123,232,.15);
    border-radius:14px;
    background:var(--theme-glass, rgba(255,255,255,.67));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease;
}
#view-employees .employee-records-card .work-record-row:hover { transform:translateY(-1px); border-color:rgba(79,123,232,.42); box-shadow:0 9px 18px rgba(79,123,232,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); }
#view-employees .employee-records-card .work-record-num { width:25px; height:25px; margin:0; color:var(--theme-ink, #4F7BE8); background:rgba(79,123,232,.11); font-weight:850; }
#view-employees .employee-records-card .work-record-icon { width:38px; height:38px; border-radius:12px; font-size:18px; }
#view-employees .employee-records-card .work-record-title { color:var(--text1); font-size:13px; font-weight:850; }
#view-employees .employee-records-card .work-record-time { margin-top:3px; color:var(--text2); font-size:11.5px; }
#view-employees .employee-records-card .work-record-amount { min-width:116px; padding:7px 10px; border-radius:11px; background:rgba(79,123,232,.08); font-size:12px; font-weight:850; text-align:center; }

#view-employees .employee-leaves-card .leave-stats-row { gap:10px; margin-bottom:13px; }
#view-employees .employee-leaves-card .leave-stat-tile {
    position:relative;
    overflow:hidden;
    min-height:72px;
    display:grid;
    place-content:center;
    border:1px solid color-mix(in srgb, var(--section-tone) 18%, var(--theme-stroke, rgba(255,255,255,.78)));
    border-radius:14px;
    background:var(--theme-glass, rgba(255,255,255,.6));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}
#view-employees .employee-leaves-card .leave-stat-tile:nth-child(2) { --section-tone:#38A66E; }
#view-employees .employee-leaves-card .leave-stat-tile:nth-child(3) { --section-tone:#D69A18; }
#view-employees .employee-leaves-card .leave-stat-tile-value { font-size:19px; font-weight:880; }
#view-employees .employee-leaves-card .leave-stat-tile-label { font-weight:720; }

@media (max-width:620px) {
    #view-employees :is(.employee-salaries-card, .employee-handover-card, .employee-records-card, .employee-leaves-card) { padding:13px; }
    #view-employees .employee-records-card .work-record-row { grid-template-columns:24px 36px minmax(0,1fr); }
    #view-employees .employee-records-card .work-record-amount { grid-column:3; justify-self:start; min-width:0; }
    #view-employees .employee-leaves-card .profile-section-head > div:last-child { flex-wrap:wrap; justify-content:flex-end; }
}

/* ---------- finance landing: unified tab-style navigation ---------- */
#mainContent .finance-tabbar {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;
    margin:0 0 24px;
    padding:5px;
    overflow:hidden;
    border:1px solid var(--ui-stroke);
    border-radius:var(--ui-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb,var(--ui-green) 8%,transparent), transparent 42%),
        linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-soft) 82%,transparent));
    box-shadow:var(--ui-shadow);
    backdrop-filter:blur(15px) saturate(145%);
    -webkit-backdrop-filter:blur(15px) saturate(145%);
}

#mainContent .finance-tabbar .finance-tab-item {
    position:relative;
    min-width:0;
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin: 5px;
    padding:12px 10px 14px;
    border:0;
    border-inline-end:1px solid var(--ui-stroke-strong);
    border-radius:13px;
    color:var(--text1);
    background:transparent;
    box-shadow:none;
    font:inherit;
    text-align:start;
    cursor:pointer;
    isolation:isolate;
    transition:background .2s var(--ui-ease), color .2s ease, box-shadow .2s var(--ui-ease);
}

#mainContent .finance-tabbar .finance-tab-item:last-child { border-inline-end:0; }

#mainContent .finance-tabbar .finance-tab-item::after {
    content:'';
    position:absolute;
    inset-inline:14px;
    bottom:3px;
    height:3px;
    border-radius:999px;
    background:var(--finance-tab-tone);
    opacity:0;
    transform:scaleX(.45);
    transition:opacity .2s ease, transform .2s var(--ui-ease);
}

#mainContent .finance-tabbar .finance-tab-item:hover,
#mainContent .finance-tabbar .finance-tab-item:focus-visible,
#mainContent .finance-tabbar .finance-tab-item.active {
    color:var(--finance-tab-tone);
    background:color-mix(in srgb,var(--finance-tab-bg) 78%,var(--ui-surface-strong));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--finance-tab-tone) 20%,transparent);
    outline:none;
}

#mainContent .finance-tabbar .finance-tab-item:focus-visible {
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--finance-tab-tone) 55%,transparent), 0 0 0 3px color-mix(in srgb,var(--finance-tab-tone) 16%,transparent);
}

#mainContent .finance-tabbar .finance-tab-item:is(:hover,:focus-visible,.active)::after {
    opacity:1;
    transform:scaleX(1);
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-icon {
    width:34px;
    height:34px;
    border-radius:10px;
    color:var(--finance-tab-tone);
    background:var(--finance-tab-bg);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--finance-tab-tone) 12%,transparent);
    transform:none;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-icon i { font-size:18px; }

#mainContent .finance-tabbar .finance-tab-copy {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-title,
#mainContent .finance-tabbar .finance-tab-item .finance-card-value {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    font-size:13px;
    font-weight:850;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-value {
    margin:0;
    color:var(--text2);
    font-size:11.5px;
    font-weight:700;
}

@media (max-width:1180px) {
    #mainContent .finance-tabbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
    #mainContent .finance-tabbar .finance-tab-item:nth-child(3) { border-inline-end:0; }
    #mainContent .finance-tabbar .finance-tab-item:nth-child(-n+3) { border-bottom:1px solid var(--ui-stroke-strong); }
}

@media (max-width:620px) {
    #mainContent .finance-tabbar {
        display:flex;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
        scroll-snap-type:x proximity;
    }
    #mainContent .finance-tabbar .finance-tab-item {
        min-width:154px;
        min-height:78px;
        flex:0 0 154px;
        border-bottom:0 !important;
        scroll-snap-align:start;
    }
    #mainContent .finance-tabbar .finance-tab-item:nth-child(3) { border-inline-end:1px solid var(--ui-stroke-strong); }
    #mainContent .finance-tabbar .finance-tab-item:last-child { border-inline-end:0; }
}

@media (prefers-reduced-motion:reduce) {
    #mainContent .finance-tabbar .finance-tab-item,
    #mainContent .finance-tabbar .finance-tab-item::after { transition:none; }
}

.finance-inline-shell { margin-bottom:20px; }
.finance-inline-shell .finance-inline-title { margin-bottom:12px; }
:is(#view-sales,#view-expenses,#view-salaries,#view-till) > .content-wrap > .back-to-finance-btn { display:none; }

/* Mobile already exposes every finance destination in the hamburger menu.
   Remove the duplicate tab strip (and its repeated "Finance" heading) so
   narrow screens keep their full width and never create horizontal scroll. */
@media (max-width:760px) {
    #mainContent .finance-tabbar,
    #mainContent .finance-inline-shell {
        display:none;
    }
}

/* Professional flat finance navigation: semantic tabs, not cards. */
#mainContent .finance-tabbar {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding:0 4px;
    overflow:visible;
    border:0;
    border-bottom:1px solid color-mix(in srgb,var(--text2) 18%,transparent);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

#mainContent .finance-tabbar .finance-tab-item {
    min-height:66px;
    gap:8px;
    padding:10px 8px 13px;
    border:0 !important;
    border-radius:0;
    color:var(--text2);
    background:transparent;
    box-shadow:none;
    transition:color .2s ease;
}

#mainContent .finance-tabbar .finance-tab-item:hover,
#mainContent .finance-tabbar .finance-tab-item:focus-visible,
#mainContent .finance-tabbar .finance-tab-item.active {
    color:var(--text1);
    background:transparent;
    box-shadow:none;
}

#mainContent .finance-tabbar .finance-tab-item:focus-visible {
    border-radius:8px;
    outline:2px solid color-mix(in srgb,var(--finance-tab-tone) 55%,transparent);
    outline-offset:-3px;
}

#mainContent .finance-tabbar .finance-tab-item::after {
    inset-inline:24%;
    bottom:-1px;
    height:3px;
    background:var(--finance-tab-tone);
    transform:scaleX(.25);
}

#mainContent .finance-tabbar .finance-tab-item:is(:hover,:focus-visible,.active)::after {
    opacity:1;
    transform:scaleX(1);
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-icon {
    width:26px;
    height:26px;
    border-radius:0;
    color:var(--finance-tab-tone);
    background:transparent;
    box-shadow:none;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-icon i { font-size:20px; }

#mainContent .finance-tabbar .finance-tab-copy {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    overflow:hidden;
    color:inherit;
    font-size:15px;
    font-weight:850;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (min-width:761px) and (max-width:980px) {
    #mainContent .finance-tabbar { gap:2px; }
    #mainContent .finance-tabbar .finance-tab-item {
        min-height:58px;
        gap:5px;
        padding-inline:4px;
    }
    #mainContent .finance-tabbar .finance-tab-item .finance-card-title { font-size:14px; }
}

/* Finance navigation surface: separated from the page without turning tabs
   back into individual cards. Motion is restrained and layout-safe. */
#mainContent .finance-tabbar {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding:6px 10px;
    border:1px solid color-mix(in srgb,#4268c9 17%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:16px;
    background:
        radial-gradient(circle at 88% -35%,rgba(74,190,196,.16),transparent 43%),
        linear-gradient(135deg,var(--theme-glass, rgba(224,234,255,.88)),var(--theme-glass, rgba(238,248,250,.78)) 52%,var(--theme-glass, rgba(231,237,255,.82)));
    box-shadow:0 12px 28px rgba(45,67,126,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    backdrop-filter:blur(14px) saturate(112%);
    -webkit-backdrop-filter:blur(14px) saturate(112%);
    animation:financeTabsEnter .45s var(--ui-ease) both;
}

#mainContent .finance-tabbar::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:-80% -22%;
    background:linear-gradient(105deg,transparent 38%,var(--theme-highlight, rgba(255,255,255,.34)) 50%,transparent 62%);
    transform:translateX(34%);
    pointer-events:none;
    animation:financeTabsAmbient 8s ease-in-out 1s infinite alternate;
}

#mainContent .finance-tabbar .finance-tab-item {
    position:relative;
    z-index:1;
    border-radius:11px;
    transition:color .22s ease,background-color .22s ease,transform .22s var(--ui-ease);
}

#mainContent .finance-tabbar .finance-tab-item:hover,
#mainContent .finance-tabbar .finance-tab-item:focus-visible {
    background:var(--theme-highlight, rgba(255,255,255,.34));
    transform:translateY(-1px);
}

#mainContent .finance-tabbar .finance-tab-item.active {
    color:var(--theme-ink, #0f172a);
    background:color-mix(in srgb,var(--finance-tab-tone) 19%,var(--theme-glass, rgba(255,255,255,.74)));
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb,var(--finance-tab-tone) 44%,transparent),
        0 6px 15px color-mix(in srgb,var(--finance-tab-tone) 16%,transparent);
    font-weight:850;
}

#mainContent .finance-tabbar .finance-tab-item.active .finance-card-title {
    color:var(--theme-ink, #0f172a);
    font-weight:920;
}

#mainContent .finance-tabbar .finance-tab-item.active .finance-card-icon {
    border:1px solid color-mix(in srgb,var(--finance-tab-tone) 55%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--finance-tab-tone) 20%,var(--theme-glass, rgba(255,255,255,.78)));
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-icon {
    transition:transform .22s var(--ui-ease),filter .22s ease;
}

#mainContent .finance-tabbar .finance-tab-item:is(:hover,:focus-visible,.active) .finance-card-icon {
    transform:translateY(-1px) scale(1.06);
    filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--finance-tab-tone) 22%,transparent));
}

#mainContent .finance-tabbar .finance-tab-item.active::after {
    inset-inline:15%;
    height:4px;
    box-shadow:0 0 12px color-mix(in srgb,var(--finance-tab-tone) 62%,transparent);
}

@keyframes financeTabsEnter {
    from { opacity:0; transform:translateY(8px) scale(.995); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

@keyframes financeTabsAmbient {
    from { transform:translateX(34%); }
    to { transform:translateX(-34%); }
}

@media (prefers-reduced-motion:reduce) {
    #mainContent .finance-tabbar,
    #mainContent .finance-tabbar::before,
    #mainContent .finance-tabbar .finance-tab-item,
    #mainContent .finance-tabbar .finance-card-icon {
        animation:none !important;
        transition:none !important;
    }
}

/* Fuel intake decision and live purchase total */
.overlay .fuel-intake-choice-modal{width:min(560px,calc(100vw - 24px));padding:16px;border:1px solid color-mix(in srgb,var(--success) 30%,var(--border));border-radius:26px;background:linear-gradient(155deg,color-mix(in srgb,var(--panel) 94%,#e8fff2),var(--panel));box-shadow:0 30px 85px rgba(15,35,55,.3);animation:fuel-intake-enter .3s cubic-bezier(.2,.8,.2,1)}
.fuel-intake-choice-head{display:flex;gap:13px;align-items:flex-start;padding:14px;border:1px solid color-mix(in srgb,var(--success) 22%,var(--border));border-radius:19px;background:color-mix(in srgb,var(--panel) 84%,var(--success-bg))}.fuel-intake-choice-head>span{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#4dc997,#1c9367);box-shadow:0 10px 24px rgba(28,147,103,.24)}.fuel-intake-choice-head>span i{font-size:25px}.fuel-intake-choice-head small{color:var(--success);font-weight:850}.fuel-intake-choice-head h3{margin:2px 0 5px;font-size:20px;color:var(--text1)}.fuel-intake-choice-head p{margin:0;color:var(--text2);font-size:12px;line-height:1.75}
.fuel-intake-choice-grid{display:grid;gap:11px;margin:14px 0}.fuel-intake-choice{width:100%;min-height:88px;display:grid;grid-template-columns:52px minmax(0,1fr) 24px;align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-radius:18px;text-align:start;color:var(--text1);background:color-mix(in srgb,var(--panel) 92%,transparent);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}.fuel-intake-choice:hover,.fuel-intake-choice:focus-visible{transform:translateY(-2px);outline:0;box-shadow:0 12px 26px rgba(20,45,70,.13)}.fuel-intake-choice.is-purchase:hover,.fuel-intake-choice.is-purchase:focus-visible{border-color:#2aad78;background:color-mix(in srgb,var(--panel) 88%,#dff8ea)}.fuel-intake-choice.is-adjustment:hover,.fuel-intake-choice.is-adjustment:focus-visible{border-color:#d19a28;background:color-mix(in srgb,var(--panel) 90%,#fff3cf)}.fuel-intake-choice-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;font-size:25px}.is-purchase .fuel-intake-choice-icon{color:#167a56;background:#dff7eb}.is-adjustment .fuel-intake-choice-icon{color:#9a6810;background:#fff0c6}.fuel-intake-choice>span:nth-child(2){display:grid;gap:5px}.fuel-intake-choice strong{font-size:15px}.fuel-intake-choice small{color:var(--text2);font-size:11.5px;line-height:1.55}.fuel-intake-choice>i{color:var(--text3);font-size:20px}.fuel-intake-choice-cancel{width:100%;min-height:44px}
[dir="ltr"] .fuel-intake-choice>i{transform:scaleX(-1)}
.fuel-purchase-total{display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;align-items:center;padding:12px;border:1px solid rgba(var(--fp-tone-rgb),.24);border-radius:16px;background:linear-gradient(135deg,rgba(var(--fp-tone-rgb),.12),rgba(var(--fp-tone-rgb),.04));overflow:hidden}.fuel-purchase-total-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(145deg,var(--fp-tone),var(--fp-tone-deep));box-shadow:0 8px 18px rgba(var(--fp-tone-rgb),.22)}.fuel-purchase-total>span:last-child{display:grid;gap:2px;min-width:0}.fuel-purchase-total small{color:var(--text2);font-size:11px;font-weight:750}.fuel-purchase-total strong{direction:ltr;text-align:start;color:var(--text1);font-size:18px;font-weight:900;white-space:normal}.fuel-purchase-total em{color:var(--text3);font-size:10.5px;font-style:normal}
@keyframes fuel-intake-enter{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:520px){.overlay .fuel-intake-choice-modal{padding:11px;border-radius:21px}.fuel-intake-choice-head{padding:12px}.fuel-intake-choice{min-height:82px;padding:11px}.fuel-intake-choice-head h3{font-size:17px}.fuel-purchase-total strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.overlay .fuel-intake-choice-modal{animation:none}.fuel-intake-choice{transition:none}.fuel-intake-choice:hover,.fuel-intake-choice:focus-visible{transform:none}}

/* Keep every finance destination on the same line. Narrow desktop widths
   scroll the row instead of moving the final destinations underneath. */
#mainContent .finance-tabbar {
    grid-template-columns:repeat(6,minmax(0,1fr));
}
#mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    white-space:nowrap;
}
@media (min-width:761px) and (max-width:1200px) {
    #mainContent .finance-tabbar {
        display:flex;
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
    }
    #mainContent .finance-tabbar .finance-tab-item {
        flex:0 0 158px;
        min-width:158px;
    }
}

/* Reports use the same flat, persistent navigation language as Finance. */
#mainContent .reports-inline-shell { margin-bottom:18px; }
#mainContent .reports-inline-title { margin-bottom:12px; }

#mainContent .reports-tabbar {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:7px;
    margin:0 0 20px;
    padding:6px 9px;
    border:1px solid color-mix(in srgb,#4268c9 17%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:16px;
    background:
        radial-gradient(circle at 88% -35%,rgba(74,190,196,.16),transparent 43%),
        linear-gradient(135deg,var(--theme-glass, rgba(224,234,255,.88)),var(--theme-glass, rgba(238,248,250,.78)) 52%,var(--theme-glass, rgba(231,237,255,.82)));
    box-shadow:0 12px 28px rgba(45,67,126,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    backdrop-filter:blur(14px) saturate(112%);
    -webkit-backdrop-filter:blur(14px) saturate(112%);
    animation:financeTabsEnter .45s var(--ui-ease) both;
}

#mainContent .reports-tabbar::before {
    content:'';
    position:absolute;
    z-index:-1;
    inset:-80% -22%;
    background:linear-gradient(105deg,transparent 38%,var(--theme-highlight, rgba(255,255,255,.34)) 50%,transparent 62%);
    transform:translateX(34%);
    pointer-events:none;
    animation:financeTabsAmbient 8s ease-in-out 1s infinite alternate;
}

#mainContent .reports-tab-item {
    position:relative;
    z-index:1;
    min-width:0;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:9px 6px 13px;
    border:0;
    border-radius:11px;
    color:var(--text2);
    background:transparent;
    font:inherit;
    text-align:start;
    cursor:pointer;
    transition:color .22s ease,background-color .22s ease,transform .22s var(--ui-ease),box-shadow .22s ease;
}

#mainContent .reports-tab-item::after {
    content:'';
    position:absolute;
    inset-inline:24%;
    bottom:0;
    height:3px;
    border-radius:999px;
    background:var(--reports-tab-tone);
    opacity:0;
    transform:scaleX(.25);
    transition:opacity .22s ease,transform .22s var(--ui-ease);
}

#mainContent .reports-tab-item:hover,
#mainContent .reports-tab-item:focus-visible {
    color:var(--text1);
    background:var(--theme-glass, rgba(255,255,255,.36));
    transform:translateY(-1px);
}

#mainContent .reports-tab-item:focus-visible {
    outline:3px solid color-mix(in srgb,var(--reports-tab-tone) 52%,transparent);
    outline-offset:-3px;
}

#mainContent .reports-tab-item.active {
    color:var(--theme-ink, #0f172a);
    background:color-mix(in srgb,var(--reports-tab-tone) 19%,var(--theme-glass, rgba(255,255,255,.74)));
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--reports-tab-tone) 44%,transparent),0 6px 15px color-mix(in srgb,var(--reports-tab-tone) 16%,transparent);
}

#mainContent .reports-tab-item:is(:hover,:focus-visible,.active)::after {
    opacity:1;
    transform:scaleX(1);
}

#mainContent .reports-tab-item.active::after {
    inset-inline:15%;
    height:4px;
    box-shadow:0 0 12px color-mix(in srgb,var(--reports-tab-tone) 62%,transparent);
}

#mainContent .reports-tab-icon {
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:8px;
    color:var(--reports-tab-tone);
    font-size:20px;
    transition:transform .22s var(--ui-ease),filter .22s ease,background-color .22s ease,border-color .22s ease;
}

#mainContent .reports-tab-item:is(:hover,:focus-visible,.active) .reports-tab-icon {
    transform:translateY(-1px) scale(1.06);
    filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--reports-tab-tone) 22%,transparent));
}

#mainContent .reports-tab-item.active .reports-tab-icon {
    border-color:color-mix(in srgb,var(--reports-tab-tone) 55%,transparent);
    background:color-mix(in srgb,var(--reports-tab-tone) 20%,var(--theme-glass, rgba(255,255,255,.78)));
}

#mainContent .reports-tab-copy { min-width:0; display:flex; align-items:center; justify-content:center; }
#mainContent .reports-tab-title {
    overflow:hidden;
    color:inherit;
    font-size:15px;
    font-weight:850;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#mainContent .reports-tab-item.active .reports-tab-title { color:var(--theme-ink, #0f172a); font-weight:920; }

@media (min-width:761px) and (max-width:1180px) {
    #mainContent .reports-tabbar { grid-template-columns:repeat(4,minmax(0,1fr)); }
    #mainContent .reports-tab-item { min-height:58px; }
}

@media (min-width:761px) {
    #mainContent .reports-inline-shell + .back-to-finance-btn { display:none; }
}

@media (max-width:760px) {
    #mainContent .reports-tabbar,
    #mainContent .reports-inline-shell { display:none; }

    /* The reports landing is the menu on a phone, so its tabs stay, as tiles two by two like the finance menu. */
    #mainContent #reportsLandingGrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 10px;
    }

    #mainContent #reportsLandingGrid .reports-tab-item {
        min-height: 58px;
        border: 1px solid var(--border);
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion:reduce) {
    #mainContent .reports-tabbar,
    #mainContent .reports-tabbar::before,
    #mainContent .reports-tab-item,
    #mainContent .reports-tab-item::after,
    #mainContent .reports-tab-icon {
        animation:none !important;
        transition:none !important;
    }
}

/* ---------- employees directory: readable horizontal records ---------- */
#view-employees #employeesListWrap .emp-list-section {
    position:relative;
    overflow:hidden;
    padding:18px;
    border:1px solid rgba(91,111,190,.16);
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0%,rgba(83,111,232,.08),transparent 35%),
        linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.72)),var(--theme-glass, rgba(231,238,251,.54)));
    box-shadow:0 16px 36px rgba(46,61,123,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

#view-employees #employeesListWrap .emp-list-section-head {
    min-height:44px;
    gap:10px;
    margin-bottom:12px;
    padding:0 2px 12px;
    border-bottom:1px solid rgba(83,111,232,.14);
}

#view-employees #employeesListWrap .emp-list-section-icon {
    width:34px;
    height:34px;
    border-radius:11px;
}

#view-employees #employeesListWrap .emp-list-section-title {
    color:var(--theme-ink, #17213b);
    font-size:15px;
    font-weight:880;
}

#view-employees #employeesListWrap .emp-list-section-count {
    min-width:34px;
    padding:4px 10px;
    color:var(--theme-ink, #405174);
    background:var(--theme-glass, rgba(255,255,255,.66));
    font-size:12px;
    font-weight:850;
}

#view-employees #employeesListWrap .emp-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

#view-employees #employeesListWrap .emp-row {
    --emp-tone:#4f72df;
    position:relative;
    min-width:0;
    min-height:88px;
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto 18px;
    grid-template-rows:1fr;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid color-mix(in srgb,var(--emp-tone) 19%,rgba(133,150,201,.2));
    border-inline-start:1px solid var(--border);
    border-radius:15px;
    background:var(--theme-glass, rgba(255,255,255,.64));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    cursor:pointer;
    transition:transform .2s var(--ui-ease),border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}

#view-employees #employeesListWrap .emp-row::before { display:none; }
#view-employees #employeesListWrap .emp-row.is-busy { --emp-tone:#258a57; }
#view-employees #employeesListWrap .emp-row.is-free { --emp-tone:#2f70d8; }
#view-employees #employeesListWrap .emp-row.is-leave { --emp-tone:#a86f08; }
#view-employees #employeesListWrap .emp-row.is-off,
#view-employees #employeesListWrap .emp-row.is-inactive { --emp-tone:#737e90; opacity:.82; }

#view-employees #employeesListWrap .emp-row:hover {
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--emp-tone) 48%,rgba(133,150,201,.2));
    background:var(--theme-glass, rgba(255,255,255,.84));
    box-shadow:0 11px 24px color-mix(in srgb,var(--emp-tone) 13%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

#view-employees #employeesListWrap .emp-row:focus-visible {
    outline:3px solid color-mix(in srgb,var(--emp-tone) 45%,transparent);
    outline-offset:2px;
}

#view-employees #employeesListWrap .emp-row-avatar {
    position:static;
    grid-column:1;
    grid-row:1;
    width:56px;
    height:56px;
    border:3px solid var(--theme-stroke, rgba(255,255,255,.92)) !important;
    outline:2px solid color-mix(in srgb,var(--emp-tone) 72%,transparent);
    outline-offset:0;
    background:var(--theme-glass, rgba(242,246,255,.92));
    box-shadow:0 6px 15px color-mix(in srgb,var(--emp-tone) 18%,transparent);
    font-size:19px;
    transform:none;
}

#view-employees #employeesListWrap .emp-row:hover .emp-row-avatar {
    transform:scale(1.04);
    box-shadow:0 8px 19px color-mix(in srgb,var(--emp-tone) 25%,transparent);
}

#view-employees #employeesListWrap .emp-row-body {
    grid-column:2;
    grid-row:1;
    width:auto;
    min-width:0;
    display:block;
    text-align:start;
}

#view-employees #employeesListWrap .emp-row-name-line {
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:8px;
}

#view-employees #employeesListWrap .emp-row-name {
    color:var(--theme-ink, #17213b);
    font-size:15px;
    font-weight:880;
    line-height:1.45;
}

#view-employees #employeesListWrap .emp-row-id {
    order:initial;
    color:var(--emp-tone);
    background:color-mix(in srgb,var(--emp-tone) 10%,var(--theme-glass, rgba(255,255,255,.76)));
    border:1px solid color-mix(in srgb,var(--emp-tone) 20%,transparent);
    font-size:10.5px;
    font-weight:850;
}

#view-employees #employeesListWrap .emp-row-meta {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:5px 12px;
    margin-top:7px;
}

#view-employees #employeesListWrap .emp-row-meta-item {
    min-width:0;
    max-width:100%;
    justify-content:flex-start;
    padding:0;
    border:0;
    border-radius:0;
    color:var(--theme-ink, #53617c);
    background:transparent;
    font-size:11.5px;
    font-weight:700;
}

#view-employees #employeesListWrap .emp-row-meta-item i {
    width:20px;
    height:20px;
    color:var(--emp-tone);
    background:color-mix(in srgb,var(--emp-tone) 9%,var(--theme-glass, rgba(255,255,255,.7)));
}

#view-employees #employeesListWrap .emp-row-status {
    grid-column:3;
    grid-row:1;
    width:auto;
    max-width:170px;
    margin:0;
    padding:7px 10px;
    border:1px solid color-mix(in srgb,var(--emp-tone) 22%,transparent);
    border-radius:10px;
    color:var(--emp-tone) !important;
    background:color-mix(in srgb,var(--emp-tone) 9%,var(--theme-glass, rgba(255,255,255,.76))) !important;
    font-size:11px;
    font-weight:820;
    overflow:hidden;
    text-overflow:ellipsis;
}

#view-employees #employeesListWrap .emp-row-chevron {
    position:static;
    grid-column:4;
    grid-row:1;
    display:block !important;
    color:var(--emp-tone);
    opacity:.55;
    transform:none;
    transition:opacity .2s ease,transform .2s var(--ui-ease);
}

#view-employees #employeesListWrap .emp-row:hover .emp-row-chevron {
    opacity:1;
    transform:translateX(-2px);
}

html[dir="ltr"] #view-employees #employeesListWrap .emp-row:hover .emp-row-chevron { transform:translateX(2px); }

@media (max-width:1150px) {
    #view-employees #employeesListWrap .emp-list { grid-template-columns:1fr; }
}

@media (max-width:680px) {
    #view-employees #employeesListWrap .emp-list-section { padding:12px; border-radius:17px; }
    #view-employees #employeesListWrap .emp-row {
        min-height:104px;
        grid-template-columns:50px minmax(0,1fr) 16px;
        grid-template-rows:auto auto;
        gap:8px 10px;
        padding:11px;
    }
    #view-employees #employeesListWrap .emp-row-avatar { width:50px; height:50px; }
    #view-employees #employeesListWrap .emp-row-body { grid-column:2; grid-row:1; }
    #view-employees #employeesListWrap .emp-row-name-line { flex-wrap:wrap; gap:5px; }
    #view-employees #employeesListWrap .emp-row-name { font-size:14px; }
    #view-employees #employeesListWrap .emp-row-meta { display:grid; gap:4px; }
    #view-employees #employeesListWrap .emp-row-status {
        grid-column:2;
        grid-row:2;
        justify-self:start;
        max-width:100%;
        padding:5px 8px;
    }
    #view-employees #employeesListWrap .emp-row-chevron { grid-column:3; grid-row:1 / span 2; }
}

@media (prefers-reduced-motion:reduce) {
    #view-employees #employeesListWrap :is(.emp-row,.emp-row-avatar,.emp-row-chevron) {
        animation:none !important;
        transition:none !important;
    }
}

/* Employee directory visual v3: colorful horizontal feature cards inspired
   by the reference, while preserving all operational information. */
#view-employees #employeesListWrap .emp-list-section-title { font-size:17px; font-weight:900; }
#view-employees #employeesListWrap .emp-list-section-count { font-size:13px; font-weight:880; }
#view-employees #employeesListWrap .emp-list { gap:14px; }

#view-employees #employeesListWrap .emp-row {
    min-height:136px;
    grid-template-columns:68px minmax(0,1fr) 44px;
    grid-template-rows:auto auto;
    gap:8px 14px;
    padding:18px;
    border:1px solid color-mix(in srgb,var(--emp-tone) 24%,var(--theme-stroke, rgba(255,255,255,.76)));
    border-inline-start-width:1px;
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--emp-tone) 18%,transparent),transparent 48%),
        linear-gradient(140deg,var(--theme-glass, rgba(255,255,255,.8)),color-mix(in srgb,var(--emp-tone) 7%,var(--theme-glass, rgba(237,242,253,.72))));
    box-shadow:0 14px 32px rgba(47,58,108,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    overflow:hidden;
    isolation:isolate;
    transition:transform .26s var(--ui-ease),border-color .22s ease,background .22s ease,box-shadow .26s ease;
}

#view-employees #employeesListWrap .emp-row::after {
    content:'';
    position:absolute;
    z-index:-1;
    width:150px;
    height:150px;
    inset:-90px -70px auto auto;
    border-radius:50%;
    background:color-mix(in srgb,var(--emp-tone) 18%,transparent);
    filter:blur(12px);
    opacity:.65;
    transform:scale(.8);
    transition:opacity .28s ease,transform .32s var(--ui-ease);
    pointer-events:none;
}

#view-employees #employeesListWrap .emp-row:hover {
    transform:translateY(-4px) scale(1.006);
    border-color:color-mix(in srgb,var(--emp-tone) 58%,var(--theme-stroke, rgba(255,255,255,.72)));
    background:
        radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--emp-tone) 25%,transparent),transparent 52%),
        linear-gradient(140deg,var(--theme-glass, rgba(255,255,255,.93)),color-mix(in srgb,var(--emp-tone) 10%,var(--theme-glass, rgba(238,243,253,.82))));
    box-shadow:0 20px 40px color-mix(in srgb,var(--emp-tone) 17%,rgba(42,52,99,.08)),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}

#view-employees #employeesListWrap .emp-row:hover::after { opacity:1; transform:scale(1.2); }

#view-employees #employeesListWrap .emp-row.is-selected {
    border-color:var(--emp-tone);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--emp-tone) 22%,transparent),0 22px 44px color-mix(in srgb,var(--emp-tone) 22%,transparent);
    animation:employeeDirectorySelect .24s var(--ui-ease) both;
}

#view-employees #employeesListWrap .emp-row.is-selected::after { opacity:1; transform:scale(1.45); }

#view-employees #employeesListWrap .emp-row-avatar {
    grid-column:1;
    grid-row:1 / span 2;
    width:68px;
    height:68px;
    border:3px solid var(--theme-stroke, rgba(255,255,255,.92)) !important;
    border-radius:19px;
    outline:0;
    color:#fff !important;
    background:linear-gradient(145deg,color-mix(in srgb,var(--emp-tone) 74%,var(--theme-surface, #fff)),var(--emp-tone));
    box-shadow:0 10px 22px color-mix(in srgb,var(--emp-tone) 27%,transparent);
    font-size:22px;
}

#view-employees #employeesListWrap .emp-row-avatar img { border-radius:15px; }

#view-employees #employeesListWrap .emp-row:hover .emp-row-avatar {
    transform:translateY(-2px) rotate(-2deg) scale(1.06);
    box-shadow:0 14px 28px color-mix(in srgb,var(--emp-tone) 36%,transparent);
}

html[dir="ltr"] #view-employees #employeesListWrap .emp-row:hover .emp-row-avatar { transform:translateY(-2px) rotate(2deg) scale(1.06); }

#view-employees #employeesListWrap .emp-row-body {
    grid-column:2;
    grid-row:1;
    width:100%;
    align-self:end;
    text-align:start;
}

#view-employees #employeesListWrap .emp-row-name-line {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    text-align:start;
}

#view-employees #employeesListWrap .emp-row-name {
    width:100%;
    color:var(--theme-ink, #111b34);
    font-size:18px;
    font-weight:920;
    line-height:1.45;
    text-align:start;
}

#view-employees #employeesListWrap .emp-row-id {
    order:initial;
    align-self:flex-start;
    padding:4px 9px;
    color:color-mix(in srgb,var(--emp-tone) 78%,var(--theme-ink, #17213b));
    background:color-mix(in srgb,var(--emp-tone) 11%,var(--theme-glass, rgba(255,255,255,.74)));
    border-color:color-mix(in srgb,var(--emp-tone) 24%,transparent);
    font-size:12px;
    font-weight:880;
}

#view-employees #employeesListWrap .emp-row-meta { margin-top:9px; gap:6px 14px; }
#view-employees #employeesListWrap .emp-row-meta-item {
    color:var(--theme-ink, #45536f);
    font-size:13.5px;
    font-weight:760;
    line-height:1.5;
}

#view-employees #employeesListWrap .emp-row-meta-item i {
    width:23px;
    height:23px;
    font-size:14px;
}

#view-employees #employeesListWrap .emp-row-status {
    grid-column:2;
    grid-row:2;
    justify-self:start;
    align-self:start;
    width:auto;
    max-width:100%;
    min-height:32px;
    padding:6px 11px;
    border-color:color-mix(in srgb,var(--emp-tone) 23%,transparent);
    color:color-mix(in srgb,var(--emp-tone) 78%,var(--theme-ink, #17213b)) !important;
    background:color-mix(in srgb,var(--emp-tone) 10%,var(--theme-glass, rgba(255,255,255,.74))) !important;
    font-size:13px;
    font-weight:850;
}

#view-employees #employeesListWrap .emp-row-chevron {
    grid-column:3;
    grid-row:1 / span 2;
    align-self:center;
    width:42px;
    height:42px;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    color:var(--emp-tone);
    background:color-mix(in srgb,var(--emp-tone) 10%,var(--theme-glass, rgba(255,255,255,.68)));
    opacity:1;
    transform:none;
    transition:color .22s ease,background-color .22s ease,transform .24s var(--ui-ease),box-shadow .22s ease;
}

#view-employees #employeesListWrap .emp-row:hover .emp-row-chevron,
#view-employees #employeesListWrap .emp-row.is-selected .emp-row-chevron {
    color:#fff;
    background:var(--emp-tone);
    box-shadow:0 8px 18px color-mix(in srgb,var(--emp-tone) 32%,transparent);
    transform:translateX(-3px) scale(1.06);
}

html[dir="ltr"] #view-employees #employeesListWrap .emp-row:hover .emp-row-chevron,
html[dir="ltr"] #view-employees #employeesListWrap .emp-row.is-selected .emp-row-chevron { transform:translateX(3px) scale(1.06); }

@keyframes employeeDirectorySelect {
    0% { transform:translateY(-4px) scale(1.006); }
    55% { transform:translateY(-3px) scale(.988); }
    100% { transform:translateY(-4px) scale(1.012); }
}

@media (max-width:680px) {
    #view-employees #employeesListWrap .emp-row {
        min-height:130px;
        grid-template-columns:58px minmax(0,1fr) 38px;
        grid-template-rows:auto auto;
        gap:7px 10px;
        padding:14px 12px;
        border-radius:17px;
    }
    #view-employees #employeesListWrap .emp-row-avatar { width:58px; height:58px; border-radius:16px; }
    #view-employees #employeesListWrap .emp-row-avatar img { border-radius:12px; }
    #view-employees #employeesListWrap .emp-row-name { font-size:16.5px; }
    #view-employees #employeesListWrap .emp-row-id { font-size:11.5px; }
    #view-employees #employeesListWrap .emp-row-meta { display:flex; gap:4px 9px; }
    #view-employees #employeesListWrap .emp-row-meta-item { font-size:12.5px; }
    #view-employees #employeesListWrap .emp-row-status { grid-column:2; grid-row:2; }
    #view-employees #employeesListWrap .emp-row-chevron { grid-column:3; grid-row:1 / span 2; width:36px; height:36px; }
}

@media (prefers-reduced-motion:reduce) {
    #view-employees #employeesListWrap .emp-row.is-selected { animation:none !important; }
    #view-employees #employeesListWrap .emp-row::after { transition:none !important; }
}

@media (prefers-reduced-motion:reduce) {
    #view-employees .employee-records-card .work-record-row { transition:none !important; }
}

/* ---------- leave entry: dashboard-inspired calendar and clear paid state ---------- */
.overlay .modal.leave-entry-modal { --leave-tone:#D49325; --leave-blue:#625FE5; }
.overlay .leave-entry-modal .leave-entry-calendar {
    padding:10px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius:17px;
    background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.55)), var(--theme-glass, rgba(221,229,245,.46)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}
.overlay .leave-entry-modal .leave-entry-calendar .date-picker-header { min-height:42px; margin-bottom:7px; }
.overlay .leave-entry-modal .leave-entry-calendar .date-picker-nav { width:38px; height:38px; border-radius:12px; }
.overlay .leave-entry-modal .leave-entry-calendar .date-picker-month-label { color:var(--text1); font-size:15px; font-weight:860; }
.overlay .leave-entry-modal .leave-entry-calendar .cal-weekdays { margin-bottom:5px; color:var(--text2); font-size:11.5px; font-weight:800; }
.overlay .leave-entry-modal .leave-entry-calendar .cal-grid { gap:4px; }
.overlay .leave-entry-modal .leave-entry-calendar .multi-pick-cell {
    min-height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:10px;
    color:var(--text1);
    font-size:13px;
    font-weight:720;
    cursor:pointer;
    transition:transform .18s var(--ui-ease), color .18s ease, background .18s ease, box-shadow .18s ease;
}
.overlay .leave-entry-modal .leave-entry-calendar .multi-pick-cell:hover { color:var(--leave-blue); background:rgba(98,95,229,.1); transform:translateY(-1px); }
.overlay .leave-entry-modal .leave-entry-calendar .multi-pick-cell.selected {
    color:#fff;
    border-color:var(--theme-stroke, rgba(255,255,255,.74));
    background:linear-gradient(145deg, #8068E9, #526CE7);
    box-shadow:0 7px 16px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
    font-weight:850;
    transform:none;
}
.overlay .leave-entry-modal .leave-entry-calendar .multi-pick-cell.today:not(.selected) { color:var(--leave-blue); background:rgba(98,95,229,.1); }
.overlay .leave-entry-modal .leave-entry-calendar .multi-pick-cell.today.selected { outline:2px solid rgba(118,89,232,.72); outline-offset:2px; box-shadow:0 7px 16px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3)); }

.overlay .leave-entry-modal .leave-day-list { gap:7px; max-height:170px; }
.overlay .leave-entry-modal .leave-day-chip { min-height:42px; padding:7px 9px 7px 7px; border:1px solid rgba(98,95,229,.18); border-radius:12px; background:var(--theme-glass, rgba(255,255,255,.68)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
.overlay .leave-entry-modal .leave-day-chip-remove { width:28px; height:28px; border-radius:9px; color:var(--theme-ink, #6A70D8); background:rgba(98,95,229,.1); }

.overlay .leave-entry-modal .leave-paymethod-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; }
.overlay .leave-entry-modal .leave-paymethod-row .paymethod-btn {
    min-height:62px;
    display:grid;
    grid-template-columns:32px minmax(0,1fr) 20px;
    align-items:center;
    gap:8px;
    padding:9px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius:15px;
    color:var(--text1);
    background:var(--theme-glass, rgba(255,255,255,.52));
    font-size:12.5px;
    font-weight:830;
    transition:transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.overlay .leave-entry-modal .leave-paymethod-row .paymethod-btn:hover { transform:translateY(-1px); }
.leave-pay-icon { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; color:var(--theme-ink, #6D73DC); background:rgba(98,95,229,.11); font-size:17px; }
.leave-pay-check { color:transparent; font-size:19px; }
.overlay .leave-entry-modal .leave-paymethod-row .paymethod-btn.leave-paid.active { border-color:rgba(48,169,109,.72); color:var(--theme-ink, #24734D); background:linear-gradient(135deg, var(--theme-glass, rgba(224,248,235,.9)), var(--theme-glass, rgba(255,255,255,.72))); box-shadow:0 8px 18px rgba(47,169,109,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.overlay .leave-entry-modal .leave-paymethod-row .leave-paid.active .leave-pay-icon { color:#fff; background:#2FA96D; box-shadow:0 5px 11px rgba(47,169,109,.23); }
.overlay .leave-entry-modal .leave-paymethod-row .paymethod-btn.leave-unpaid.active { border-color:rgba(212,147,37,.72); color:var(--theme-ink, #865C0A); background:linear-gradient(135deg, var(--theme-glass, rgba(255,245,213,.94)), var(--theme-glass, rgba(255,255,255,.72))); box-shadow:0 8px 18px rgba(212,147,37,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.overlay .leave-entry-modal .leave-paymethod-row .leave-unpaid.active .leave-pay-icon { color:#fff; background:#D49325; box-shadow:0 5px 11px rgba(212,147,37,.23); }
.overlay .leave-entry-modal .leave-paymethod-row .paymethod-btn.active .leave-pay-check { color:currentColor; }
.overlay .leave-entry-modal #lv_deductionNote { margin:0; border-radius:14px; }

/* The leave list follows the same compact transaction-card language as salary records. */
#view-employees .employee-leaves-card .leave-group { margin:0 0 12px; padding:8px; border:1px solid rgba(212,154,24,.16); border-radius:16px; background:var(--theme-highlight, rgba(255,255,255,.34)); }
#view-employees .employee-leaves-card .leave-group:last-child { margin-bottom:0; }
#view-employees .employee-leaves-card .leave-group-header { min-height:34px; margin:0 1px 6px; padding:5px 8px; border:0; border-radius:11px; background:rgba(212,154,24,.1); }
#view-employees .employee-leaves-card .leave-group-title { color:var(--text1); font-weight:850; }
#view-employees .employee-leaves-card .leave-group-count { color:var(--theme-ink, #9A6D10); font-weight:760; }
#view-employees .employee-leaves-card .leave-entry-row { min-height:62px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; margin:0 0 7px; padding:10px 11px; border:1px solid rgba(212,154,24,.14); border-radius:13px; background:var(--theme-glass, rgba(255,255,255,.68)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease; }
#view-employees .employee-leaves-card .leave-entry-row:last-child { margin-bottom:0; }
#view-employees .employee-leaves-card .leave-entry-row:hover { transform:translateY(-1px); border-color:rgba(212,154,24,.4); box-shadow:0 8px 17px rgba(212,154,24,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); }
#view-employees .employee-leaves-card .leave-entry-icon { width:38px; height:38px; border-radius:12px; }
#view-employees .employee-leaves-card .leave-entry-type { font-size:13px; font-weight:850; }
#view-employees .employee-leaves-card .leave-entry-date { margin-top:3px; font-size:11.5px; }
@media (max-width:520px) { .overlay .leave-entry-modal .leave-paymethod-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .overlay .leave-entry-modal :is(.multi-pick-cell, .paymethod-btn), #view-employees .employee-leaves-card .leave-entry-row { transition:none !important; } }

/* ---------- salary payment: fixed controls with a focused operational flow ---------- */
.overlay .modal.salary-expense-modal {
    --salary-tone: #7B4DFF;
    --salary-tone-2: #5E5BEF;
    --salary-tone-rgb: 123,77,255;
    width: min(520px, calc(100vw - 28px));
    max-height: min(760px, calc(100dvh - 32px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 12px;
    overflow: hidden;
    border-color: rgba(var(--salary-tone-rgb),.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--salary-tone-rgb),.23), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(var(--salary-tone-rgb),.1), transparent 34%),
        linear-gradient(145deg, var(--theme-glass, rgba(224,233,248,.92)), var(--theme-glass, rgba(174,190,216,.84)));
    box-shadow: 0 26px 70px rgba(28,34,67,.3), 0 0 0 1px rgba(var(--salary-tone-rgb),.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.salary-expense-modal-head {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 18px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.86)), rgba(var(--salary-tone-rgb),.1));
    box-shadow: 0 10px 22px rgba(41,52,105,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

.salary-expense-title-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 14px;
    background: linear-gradient(145deg, var(--salary-tone), var(--salary-tone-2));
    box-shadow: 0 8px 17px rgba(var(--salary-tone-rgb),.3), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
    font-size: 21px;
}

.salary-expense-eyebrow { display: block; color: var(--salary-tone); font-size: 11px; font-weight: 800; }
.salary-expense-modal-head h3 { margin: 2px 0 0; color: var(--text1); font-size: 19px; font-weight: 880; }

.salary-expense-modal-body {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-left: -12px;
    padding: 14px 3px 12px 12px;
    scrollbar-gutter: auto;
}

.overlay .salary-expense-modal .field { margin: 0; }
.overlay .salary-expense-modal .field > label { color: var(--text1); font-size: 13px; font-weight: 840; }
.overlay .salary-expense-modal .modal-search-field { min-height: 49px; border-radius: 14px; }
.overlay .salary-expense-modal .modal-search-field:focus-within { box-shadow: 0 0 0 3px rgba(var(--salary-tone-rgb),.18), 0 10px 18px rgba(54,59,126,.09); }

.overlay .salary-expense-modal .customer-search-results {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 6px;
    max-height: 190px;
    margin-top: 8px;
    padding: 4px;
    border-radius: 15px;
    background: var(--theme-glass, rgba(255,255,255,.4));
}

.overlay .salary-expense-modal .salary-search-result {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    border-radius: 13px;
    color: var(--text1);
    text-align: inherit;
    font: inherit;
    background: var(--theme-glass, rgba(255,255,255,.7));
    cursor: pointer;
    transition: transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.overlay .salary-expense-modal .salary-search-result:hover,
.overlay .salary-expense-modal .salary-search-result:focus-visible {
    border-color: rgba(107,92,231,.52);
    outline: none;
    background: var(--theme-glass, rgba(244,243,255,.92));
    box-shadow: 0 7px 15px rgba(80,75,183,.13);
    transform: translateY(-1px);
}

.salary-search-result-avatar {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--salary-tone), var(--salary-tone-2));
    font-weight: 850;
}
.salary-search-result b, .salary-search-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.salary-search-result b { font-size: 13px; }
.salary-search-result small { margin-top: 2px; color: var(--text2); font-size: 11px; }
.salary-search-result > i { color: var(--salary-tone); font-size: 18px; }

.salary-payment-summary {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 17px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(247,249,255,.76)), var(--theme-glass, rgba(222,229,246,.58)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    animation: salarySummaryEnter .28s var(--ui-ease) both;
}
.salary-payment-summary .salary-info-header { margin: 0 0 3px; }
.salary-payment-summary .info-box { margin: 0; min-height: 48px; border-radius: 12px; }
.salary-payment-summary .handover-outstanding-note { margin: 2px 0 0; border-radius: 12px; }

.overlay .salary-expense-modal .salary-advance-field .fuel-checkbox-row { margin: 0; }
.overlay .salary-expense-modal .salary-advance-field .salary-advance-option {
    min-height: 50px;
    display: grid;
    grid-template-columns: 26px minmax(0,1fr) 26px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(217,159,47,.38);
    border-radius: 14px;
    color: var(--theme-ink, #72510E);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,246,213,.86)), var(--theme-glass, rgba(255,255,255,.62)));
    font-size: 12.5px;
    font-weight: 780;
    cursor: pointer;
}
.overlay .salary-expense-modal .salary-advance-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    clip-path: inset(50%);
}
.salary-advance-check {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(193,138,10,.34);
    border-radius: 9px;
    color: transparent;
    background: var(--theme-glass, rgba(255,255,255,.7));
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s var(--ui-ease);
}
.salary-advance-check i { font-size: 15px; }
.overlay .salary-expense-modal .salary-advance-option:has(input:checked) .salary-advance-check {
    border-color: #C18A0A;
    color: #fff;
    background: #C18A0A;
    box-shadow: 0 5px 11px rgba(193,138,10,.24);
    transform: scale(1.04);
}
.overlay .salary-expense-modal .salary-advance-option:has(input:checked) {
    border-color: rgba(193,138,10,.68);
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,243,198,.94)), var(--theme-glass, rgba(255,255,255,.72)));
}
.overlay .salary-expense-modal .salary-advance-option:focus-within { outline: 3px solid rgba(193,138,10,.2); outline-offset: 2px; }
.overlay .salary-expense-modal .salary-advance-icon { color: var(--theme-ink, #C18A0A); font-size: 18px; }

.salary-amount-input { position: relative; }
.overlay .salary-expense-modal .salary-amount-input input { padding-inline-start: 48px; font-size: 18px; font-weight: 850; }
.salary-amount-input > i {
    position: absolute;
    inset-inline-start: 9px;
    top: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--salary-tone);
    background: rgba(var(--salary-tone-rgb),.12);
    transform: translateY(-50%);
}

.overlay .salary-expense-modal .salary-expense-modal-foot {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0,1fr) 116px;
    gap: 9px;
    margin: 0;
    padding: 11px 2px 2px;
    border-top: 1px solid var(--theme-stroke, rgba(255,255,255,.66));
    background: linear-gradient(180deg, var(--theme-highlight, rgba(199,211,233,.2)), var(--theme-glass, rgba(202,213,234,.5)));
}
.overlay .salary-expense-modal .salary-expense-modal-foot .btn { min-height: 46px; }
.overlay .salary-expense-modal .salary-expense-modal-foot .btn-primary { background: linear-gradient(135deg, var(--salary-tone), var(--salary-tone-2)); }

.salary-till-source {
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 24px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--salary-tone-rgb),.3);
    border-radius: 14px;
    color: var(--theme-ink, #5535B7);
    background: linear-gradient(135deg, rgba(var(--salary-tone-rgb),.11), var(--theme-glass, rgba(255,255,255,.72)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    font-size: 14px;
    font-weight: 850;
}
.salary-till-source-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(145deg, var(--salary-tone), var(--salary-tone-2));
    box-shadow: 0 6px 14px rgba(var(--salary-tone-rgb),.25);
    font-size: 17px;
}
.salary-till-source > i { color: var(--salary-tone); font-size: 19px; }

@keyframes salarySummaryEnter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }

@media (max-width: 760px) {
    .overlay .modal.salary-expense-modal .salary-expense-modal-foot { grid-template-columns: minmax(0,1fr) 116px; }
}

@media (prefers-reduced-motion: reduce) {
    .salary-payment-summary { animation: none !important; }
    .overlay .salary-expense-modal .salary-search-result { transition: none !important; }
}

/* ---------- salary payment: spacious desktop workspace, vertical mobile flow ---------- */
@media (min-width: 901px) {
    .overlay .modal.salary-expense-modal {
        width: min(940px, calc(100vw - 56px));
        max-width: none;
        height: min(680px, calc(100dvh - 36px));
        max-height: calc(100dvh - 36px);
        grid-template-rows: 76px minmax(0, 1fr) 78px;
        padding: 14px;
        overflow: hidden;
    }

    .salary-expense-modal-body {
        grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
        align-items: stretch;
        gap: 14px;
        margin: 0;
        padding: 14px 0;
        overflow: visible;
    }

    .salary-expense-employee-panel,
    .salary-expense-payment-panel {
        position: relative;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 14px;
        border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
        border-radius: 19px;
        background: linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.68)), var(--theme-glass, rgba(226,234,248,.54)));
        box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)), 0 12px 26px rgba(47,58,107,.08);
    }

    .salary-expense-employee-panel {
        background:
            radial-gradient(circle at 100% 0%, rgba(var(--salary-tone-rgb),.14), transparent 40%),
            linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(226,234,248,.55)));
    }

    .salary-expense-payment-panel {
        background:
            radial-gradient(circle at 100% 0%, rgba(var(--salary-tone-rgb),.13), transparent 42%),
            linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(231,226,248,.55)));
    }

    .overlay .salary-expense-modal .salary-search-field { position: relative; z-index: 8; }
    .overlay .salary-expense-modal .customer-search-results {
        position: absolute;
        inset-inline: 0;
        top: calc(100% + 2px);
        max-height: min(220px, 35dvh);
        overflow-y: auto;
        border: 1px solid rgba(107,92,231,.2);
        background: var(--theme-glass, rgba(238,243,253,.96));
        box-shadow: 0 18px 35px rgba(35,45,94,.2);
        backdrop-filter: blur(18px);
    }

    .salary-payment-summary { flex: 1 1 auto; align-content: start; }
    .overlay .salary-expense-modal .salary-expense-modal-foot {
        align-items: center;
        padding: 12px 2px 8px;
    }
}

.salary-expense-employee-panel,
.salary-expense-payment-panel { min-width: 0; }

.salary-payment-panel-head {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(72,93,145,.15);
}
.salary-payment-panel-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, var(--salary-tone), var(--salary-tone-2));
    box-shadow: 0 7px 15px rgba(var(--salary-tone-rgb),.26), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
    font-size: 18px;
}
.salary-payment-panel-head b,
.salary-payment-panel-head small { display: block; }
.salary-payment-panel-head b { color: var(--text1); font-size: 13.5px; font-weight: 880; }
.salary-payment-panel-head small { margin-top: 2px; color: var(--text2); font-size: 10.5px; }
.overlay .salary-expense-modal .customer-search-results:empty { display: none; }
.overlay .salary-expense-modal textarea { min-height: 66px; resize: none; }
.overlay .salary-expense-modal .salary-expense-modal-foot .btn {
    transition: transform .2s var(--ui-ease), box-shadow .2s ease, filter .2s ease;
}
.overlay .salary-expense-modal .salary-expense-modal-foot .btn:not(:disabled):hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
}
.overlay .salary-expense-modal .salary-expense-modal-foot .btn-primary:not(:disabled):hover {
    box-shadow: 0 12px 22px rgba(82,83,211,.26);
}

@media (max-width: 900px) {
    .overlay .modal.salary-expense-modal {
        width: min(480px, calc(100vw - 18px));
        max-width: none;
        max-height: calc(100dvh - 18px);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
    }
    .salary-expense-modal-head { flex: 0 0 auto; }
    .salary-expense-modal-body {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow: visible;
        margin: 0;
        padding: 12px 0;
    }
    .salary-expense-employee-panel,
    .salary-expense-payment-panel {
        display: flex;
        flex-direction: column;
        gap: 11px;
        padding: 12px;
        border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
        border-radius: 17px;
        background: var(--theme-glass, rgba(255,255,255,.44));
        box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
    }
    .overlay .salary-expense-modal .customer-search-results {
        max-height: 210px;
        overflow-y: auto;
    }
    .overlay .salary-expense-modal .salary-expense-modal-foot {
        position: static;
        flex: 0 0 auto;
        grid-template-columns: minmax(0,1fr) 108px;
    }
}

@media (max-width: 420px) {
    .overlay .modal.salary-expense-modal { padding: 10px; }
    .salary-expense-modal-head { min-height: 66px; padding: 10px 12px; }
    .salary-expense-title-icon { width: 40px; height: 40px; }
    .overlay .salary-expense-modal .salary-expense-modal-foot { grid-template-columns: 1fr; }
    .overlay .salary-expense-modal .salary-expense-modal-foot #se_cancelBtn { grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .overlay .salary-expense-modal .salary-expense-modal-foot .btn { transition: none !important; }
}

/* ---------- fuel purchase: fuel-aware desktop workspace ---------- */
.overlay .modal.fuel-purchase-modal {
    --fp-tone: #D89A08;
    --fp-tone-rgb: 216,154,8;
    --fp-tone-deep: #A86E00;
    display: grid;
    box-sizing: border-box;
    grid-template-rows: auto minmax(0,1fr) auto;
    gap: 0;
    padding: 14px;
    overflow: hidden;
    border-color: rgba(var(--fp-tone-rgb),.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--fp-tone-rgb),.22), transparent 38%),
        radial-gradient(circle at 0% 100%, rgba(var(--fp-tone-rgb),.1), transparent 35%),
        linear-gradient(145deg, var(--theme-glass, rgba(225,234,247,.94)), var(--theme-glass, rgba(178,193,217,.88)));
    box-shadow: 0 26px 70px rgba(26,34,67,.3), 0 0 0 1px rgba(var(--fp-tone-rgb),.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.overlay .modal.fuel-purchase-modal[data-fuel="diesel"] { --fp-tone:#4C9B52; --fp-tone-rgb:76,155,82; --fp-tone-deep:#32713A; }
.overlay .modal.fuel-purchase-modal[data-fuel="cng"] { --fp-tone:#3C84E6; --fp-tone-rgb:60,132,230; --fp-tone-deep:#285EAF; }

.fuel-purchase-modal-head {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 18px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.88)), rgba(var(--fp-tone-rgb),.09));
    box-shadow: 0 10px 22px rgba(41,52,105,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
.fuel-purchase-title-icon,
.fuel-purchase-panel-head > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(145deg, var(--fp-tone), var(--fp-tone-deep));
    box-shadow: 0 8px 17px rgba(var(--fp-tone-rgb),.27), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32));
}
.fuel-purchase-title-icon { width:44px; height:44px; border-radius:14px; font-size:21px; }
.fuel-purchase-modal-head span:not(.fuel-purchase-title-icon) { color:var(--fp-tone-deep); font-size:11px; font-weight:800; }
.fuel-purchase-modal-head h3 { margin:2px 0 0; color:var(--text1); font-size:19px; font-weight:880; }

.fuel-purchase-modal-body { min-height:0; display:grid; gap:14px; padding:14px 2px 22px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.fuel-purchase-main-panel,
.fuel-purchase-meta-panel {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:9px;
    padding:14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius:19px;
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--fp-tone-rgb),.12), transparent 43%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(226,234,248,.55)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)), 0 12px 25px rgba(45,57,104,.08);
    transition:border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.fuel-purchase-panel-head { min-height:42px; display:flex; align-items:center; gap:9px; padding-bottom:9px; border-bottom:1px solid rgba(var(--fp-tone-rgb),.18); }
.fuel-purchase-panel-head > span { width:34px; height:34px; border-radius:11px; font-size:17px; }
.fuel-purchase-panel-head b { color:var(--text1); font-size:13.5px; font-weight:880; }
.overlay .fuel-purchase-modal .field { margin:0; }
.overlay .fuel-purchase-modal .field > label { color:var(--text1); font-size:12.5px; font-weight:840; }
.overlay .fuel-purchase-modal :is(input,select,textarea):focus { border-color:var(--fp-tone); box-shadow:0 0 0 3px rgba(var(--fp-tone-rgb),.16); }
.overlay .fuel-purchase-modal textarea { min-height:58px; resize:none; }
.overlay .fuel-purchase-modal .fuel-tile-row { gap:9px; }
.overlay .fuel-purchase-modal .fuel-tile { min-height:78px; padding:10px 8px; border-radius:14px; }
.overlay .fuel-purchase-modal .fuel-tile.active { border-color:var(--fp-tone); box-shadow:0 8px 19px rgba(var(--fp-tone-rgb),.18), inset 0 0 0 1px rgba(var(--fp-tone-rgb),.12); }
.overlay .fuel-purchase-modal .fuel-tile:focus-visible { outline:3px solid rgba(var(--fp-tone-rgb),.22); outline-offset:2px; }
.overlay .fuel-purchase-modal .field-system-note { margin:0; padding:9px 11px; border-color:rgba(var(--fp-tone-rgb),.2); background:rgba(var(--fp-tone-rgb),.07); }
.overlay .fuel-purchase-modal .attach-files-list { max-height:72px; overflow-y:auto; }

.overlay .fuel-purchase-modal .fuel-purchase-modal-foot {
    position:relative;
    z-index:40;
    display:grid;
    grid-template-columns:minmax(0,1fr) 132px;
    gap:10px;
    align-items:center;
    margin:0;
    padding:12px 2px 8px;
    border-top:1px solid var(--theme-stroke, rgba(255,255,255,.68));
    background:linear-gradient(180deg, var(--theme-highlight, rgba(199,211,233,.16)), rgba(var(--fp-tone-rgb),.07));
}
.overlay .fuel-purchase-modal .fuel-purchase-modal-foot .btn { min-height:46px; transition:transform .2s var(--ui-ease), box-shadow .2s ease, background .28s ease; }
.overlay .fuel-purchase-modal .fuel-purchase-modal-foot .btn-primary { background:linear-gradient(135deg, var(--fp-tone), var(--fp-tone-deep)); box-shadow:0 9px 19px rgba(var(--fp-tone-rgb),.23); }
.overlay .fuel-purchase-modal .fuel-purchase-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }

@media (min-width:901px) {
    .overlay .modal.fuel-purchase-modal {
        width:min(1000px, calc(100vw - 56px));
        max-width:none;
        height:min(760px, calc(100dvh - 32px));
        max-height:calc(100dvh - 32px);
        grid-template-rows:76px minmax(0,1fr) 78px;
    }
    .fuel-purchase-modal-body { grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); align-items:start; }
    .fuel-purchase-meta-panel {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:auto;
        align-content:start;
        gap:8px 10px;
    }
    .fuel-purchase-meta-panel > :is(.fuel-purchase-panel-head,.fuel-checkbox-row,.field-system-note,#fp_externalFunding_sourceField) { grid-column:1 / -1; }
    .fuel-purchase-meta-panel > .field { min-width:0; }
    .fuel-purchase-meta-panel .attach-files-wrap { min-height:48px; }
}

/* Managed fuel-purchase selects stay readable in RTL/LTR and above nearby fields. */
.fuel-purchase-select-control { position:relative; min-width:0; z-index:5; }
.fuel-purchase-select-control.is-open { z-index:80; }
.fuel-purchase-select-control > select,
.fuel-purchase-native-select { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; opacity:0!important; pointer-events:none!important; }
.fuel-purchase-select-trigger { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid rgba(var(--fp-tone-rgb),.2); border-radius:13px; color:var(--text1); background:var(--theme-glass,rgba(255,255,255,.76)); box-shadow:inset 0 1px 0 var(--theme-highlight,rgba(255,255,255,.9)); cursor:pointer; text-align:start; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.fuel-purchase-select-trigger > span { min-width:0; display:flex; align-items:center; gap:9px; }
.fuel-purchase-select-trigger > span > i { width:28px; height:28px; display:grid; flex:0 0 28px; place-items:center; border-radius:9px; color:var(--fp-tone-deep); background:rgba(var(--fp-tone-rgb),.12); }
.fuel-purchase-select-trigger strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:820; }
.fuel-purchase-select-control.is-open .fuel-purchase-select-trigger,.fuel-purchase-select-trigger:focus-visible { border-color:var(--fp-tone); outline:none; box-shadow:0 0 0 3px rgba(var(--fp-tone-rgb),.16); }
.fuel-purchase-select-menu { position:absolute; inset-inline:0; top:calc(100% + 6px); display:none; max-height:220px; padding:6px; overflow:auto; border:1px solid rgba(var(--fp-tone-rgb),.28); border-radius:14px; background:var(--theme-glass,rgba(249,251,255,.98)); box-shadow:0 18px 38px rgba(28,39,77,.25),inset 0 1px 0 var(--theme-highlight,#fff); }
.fuel-purchase-select-control.is-open .fuel-purchase-select-menu { display:grid; gap:4px; animation:fuelSelectReveal .18s var(--ui-ease) both; }
.fuel-purchase-select-option { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 9px; border:1px solid transparent; border-radius:10px; color:var(--text1); background:transparent; cursor:pointer; text-align:start; }
.fuel-purchase-select-option > span { display:flex; align-items:center; gap:8px; }
.fuel-purchase-select-option > span i { color:var(--fp-tone-deep); }
.fuel-purchase-select-option > .ti-check { color:transparent; }
.fuel-purchase-select-option:hover,.fuel-purchase-select-option:focus-visible { border-color:rgba(var(--fp-tone-rgb),.26); outline:none; background:rgba(var(--fp-tone-rgb),.09); }
.fuel-purchase-select-option.active { border-color:rgba(var(--fp-tone-rgb),.4); color:var(--fp-tone-deep); background:rgba(var(--fp-tone-rgb),.14); }
.fuel-purchase-select-option.active > .ti-check { color:var(--fp-tone); }
@keyframes fuelSelectReveal { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:900px) {
    .overlay .modal.fuel-purchase-modal {
        width:min(520px, calc(100vw - 18px));
        max-width:none;
        max-height:calc(100dvh - 18px);
        display:flex;
        flex-direction:column;
        overflow-y:auto;
        overscroll-behavior:contain;
    }
    .fuel-purchase-modal-head { flex:0 0 auto; }
    .fuel-purchase-modal-body { flex:0 0 auto; display:flex; flex-direction:column; padding:12px 0; overflow:visible; }
    .fuel-purchase-main-panel,
    .fuel-purchase-meta-panel { padding:12px; }
    .overlay .fuel-purchase-modal .fuel-purchase-modal-foot { position:static; flex:0 0 auto; grid-template-columns:minmax(0,1fr) 112px; }
}

@media (max-width:420px) {
    .overlay .modal.fuel-purchase-modal { padding:10px; }
    .fuel-purchase-modal-head { min-height:66px; padding:10px 12px; }
    .fuel-purchase-title-icon { width:40px; height:40px; }
    .overlay .fuel-purchase-modal .fuel-purchase-modal-foot { grid-template-columns:1fr; }
    .overlay .fuel-purchase-modal .fuel-purchase-modal-foot #fp_cancelBtn { grid-row:2; }
}

@media (prefers-reduced-motion:reduce) {
    .overlay .modal.fuel-purchase-modal,
    .fuel-purchase-main-panel,
    .fuel-purchase-meta-panel,
    .overlay .fuel-purchase-modal .fuel-purchase-modal-foot .btn,
    .fuel-purchase-select-menu { animation:none!important; transition:none !important; }
}

/* Permission-gated destructive actions. */
.record-delete-btn { width:36px; height:36px; display:inline-grid; flex:0 0 36px; place-items:center; padding:0; border:1px solid rgba(204,72,65,.24); border-radius:11px; color:#b8443f; background:rgba(255,239,237,.75); cursor:pointer; transition:color .18s ease,background .18s ease,border-color .18s ease; }
.record-delete-btn:hover,.record-delete-btn:focus-visible { color:#fff; border-color:#c84a43; outline:none; background:#c84a43; }
.responsibility-card-actions { display:grid; align-content:center; gap:7px; }
.responsibility-delete-btn { color:#b8443f!important; border-color:rgba(204,72,65,.24)!important; background:rgba(255,239,237,.68)!important; }
.responsibility-delete-btn:hover { color:#fff!important; background:#c84a43!important; }
.destructive-confirm-modal { width:min(430px,calc(100vw - 28px)); display:grid; grid-template-columns:58px minmax(0,1fr); gap:14px; padding:22px; text-align:start; }
.destructive-confirm-icon { width:56px; height:56px; display:grid; place-items:center; border-radius:18px; color:#fff; background:linear-gradient(145deg,#e45f55,#b83232); box-shadow:0 12px 24px rgba(184,50,50,.26); font-size:25px; }
.destructive-confirm-copy h3 { margin:0 0 5px; color:var(--text1); font-size:18px; }
.destructive-confirm-copy strong { display:block; color:#b83232; font-size:13px; }
.destructive-confirm-copy p { margin:8px 0 0; color:var(--text2); font-size:12px; line-height:1.75; }
.destructive-confirm-modal .modal-actions { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:9px; margin:4px 0 0; }
.destructive-confirm-modal .btn-danger { color:#fff; border-color:#bd3d37; background:linear-gradient(135deg,#df5b52,#b83232); }
@media(max-width:520px){.destructive-confirm-modal{grid-template-columns:1fr}.destructive-confirm-icon{width:48px;height:48px}.destructive-confirm-modal .modal-actions{grid-column:auto;grid-template-columns:1fr}.responsibility-card-actions{grid-column:2;grid-template-columns:1fr 1fr}}

/* ---------- bills: orange operational workspace and managed type picker ---------- */
.overlay .modal.bill-expense-modal {
    --bill-tone:#D69A08;
    --bill-tone-rgb:214,154,8;
    --bill-tone-deep:#A96C00;
    box-sizing:border-box;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:0;
    padding:14px;
    overflow:hidden;
    border-color:rgba(var(--bill-tone-rgb),.38);
    background:
        radial-gradient(circle at 100% 0%, rgba(var(--bill-tone-rgb),.22), transparent 39%),
        radial-gradient(circle at 0% 100%, rgba(var(--bill-tone-rgb),.1), transparent 34%),
        linear-gradient(145deg, var(--theme-glass, rgba(226,234,247,.95)), var(--theme-glass, rgba(181,195,218,.88)));
    box-shadow:0 26px 70px rgba(29,36,68,.3), 0 0 0 1px rgba(var(--bill-tone-rgb),.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
.bill-expense-modal-head {
    min-height:72px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.84));
    border-radius:18px;
    background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.88)),rgba(var(--bill-tone-rgb),.1));
    box-shadow:0 10px 22px rgba(41,52,105,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
.bill-expense-title-icon,
.bill-expense-panel-head > span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    color:#fff;
    background:linear-gradient(145deg,var(--bill-tone),var(--bill-tone-deep));
    box-shadow:0 8px 17px rgba(var(--bill-tone-rgb),.28),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32));
}
.bill-expense-title-icon { width:44px;height:44px;border-radius:14px;font-size:21px; }
.bill-expense-modal-head span:not(.bill-expense-title-icon) { color:var(--bill-tone-deep);font-size:11px;font-weight:800; }
.bill-expense-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.bill-expense-modal-body { min-height:0;display:grid;gap:14px;padding:14px 0; }
.bill-expense-main-panel,
.bill-expense-meta-panel {
    min-width:0;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:11px;
    padding:14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius:19px;
    background:
        radial-gradient(circle at 100% 0%,rgba(var(--bill-tone-rgb),.12),transparent 43%),
        linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.73)),var(--theme-glass, rgba(228,234,247,.56)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)),0 12px 25px rgba(45,57,104,.08);
}
.bill-expense-panel-head { min-height:44px;display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(var(--bill-tone-rgb),.2); }
.bill-expense-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.bill-expense-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .bill-expense-modal .field { margin:0; }
.overlay .bill-expense-modal .field > label { color:var(--text1);font-size:12.5px;font-weight:840; }
.overlay .bill-expense-modal :is(input,select,textarea,.date-picker-field):focus,
.overlay .bill-expense-modal .date-picker-field.open { border-color:var(--bill-tone);box-shadow:0 0 0 3px rgba(var(--bill-tone-rgb),.17); }
.overlay .bill-expense-modal textarea { min-height:72px;resize:none; }
.bill-type-control-row { display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:stretch; }
.bill-type-picker { position:relative;min-width:0; }
.bill-type-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.bill-type-trigger {
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 13px;
    border:1px solid rgba(var(--bill-tone-rgb),.32);
    border-radius:14px;
    color:var(--text1);
    background:var(--theme-glass, rgba(255,255,255,.75));
    font:inherit;
    font-weight:780;
    cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.bill-type-trigger:hover,.bill-type-trigger[aria-expanded="true"] { border-color:var(--bill-tone);background:var(--theme-glass, rgba(255,248,243,.94));box-shadow:0 0 0 3px rgba(var(--bill-tone-rgb),.14); }
.bill-type-trigger > i { color:var(--bill-tone);transition:transform .18s ease; }
.bill-type-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.bill-type-menu {
    position:absolute;
    z-index:40;
    inset-inline:0;
    top:calc(100% + 7px);
    display:grid;
    gap:5px;
    max-height:210px;
    overflow-y:auto;
    padding:7px;
    border:1px solid rgba(var(--bill-tone-rgb),.28);
    border-radius:15px;
    background:var(--theme-glass, rgba(247,241,236,.97));
    box-shadow:0 18px 36px rgba(67,40,26,.22),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter:blur(18px);
}
.bill-type-menu[hidden] { display:none; }
.bill-type-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:740;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.bill-type-option:hover,.bill-type-option:focus-visible { outline:none;border-color:rgba(var(--bill-tone-rgb),.28);background:rgba(var(--bill-tone-rgb),.1);transform:translateX(-2px); }
.bill-type-option > i { color:transparent; }
.bill-type-option.active { color:var(--bill-tone-deep);border-color:rgba(var(--bill-tone-rgb),.35);background:rgba(var(--bill-tone-rgb),.14); }
.bill-type-option.active > i { color:var(--bill-tone); }
.bill-recorder-picker { position:relative; }
.bill-recorder-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.bill-recorder-trigger {
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 13px;
    border:1px solid rgba(var(--bill-tone-rgb),.3);
    border-radius:14px;
    color:var(--text1);
    background:var(--theme-glass, rgba(255,255,255,.75));
    text-align:inherit;
    font:inherit;
    font-weight:760;
    cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.bill-recorder-trigger:hover,.bill-recorder-trigger[aria-expanded="true"] { border-color:var(--bill-tone);background:var(--theme-glass, rgba(255,252,241,.95));box-shadow:0 0 0 3px rgba(var(--bill-tone-rgb),.14); }
.bill-recorder-trigger > i { color:var(--bill-tone);transition:transform .18s ease; }
.bill-recorder-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.bill-recorder-menu {
    position:absolute;
    z-index:40;
    inset-inline:0;
    top:calc(100% + 7px);
    display:grid;
    gap:5px;
    max-height:210px;
    overflow-y:auto;
    padding:7px;
    border:1px solid rgba(var(--bill-tone-rgb),.3);
    border-radius:15px;
    background:var(--theme-glass, rgba(249,246,234,.98));
    box-shadow:0 18px 36px rgba(76,58,19,.22),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter:blur(18px);
}
.bill-recorder-menu[hidden] { display:none; }
.bill-recorder-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:730;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.bill-recorder-option:hover,.bill-recorder-option:focus-visible { outline:none;border-color:rgba(var(--bill-tone-rgb),.3);background:rgba(var(--bill-tone-rgb),.11);transform:translateX(-2px); }
.bill-recorder-option > i { color:transparent; }
.bill-recorder-option.active { color:var(--bill-tone-deep);border-color:rgba(var(--bill-tone-rgb),.36);background:rgba(var(--bill-tone-rgb),.15); }
.bill-recorder-option.active > i { color:var(--bill-tone); }
.overlay .bill-expense-modal .bill-delete-type-btn { color:var(--theme-ink, #B94635);border-color:rgba(196,69,53,.24);background:var(--theme-glass, rgba(255,241,238,.74)); }
.overlay .bill-expense-modal .bill-delete-type-btn:hover:not(:disabled) { color:#fff;border-color:#C64D3E;background:#C64D3E; }
.overlay .bill-expense-modal .bill-delete-type-btn:disabled { opacity:.42;cursor:not-allowed; }
.overlay .bill-expense-modal .attach-files-list { max-height:78px;overflow-y:auto; }
.overlay .bill-expense-modal .bill-expense-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.7));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,211,233,.16)),rgba(var(--bill-tone-rgb),.08)); }
.overlay .bill-expense-modal .bill-expense-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .bill-expense-modal .bill-expense-modal-foot .btn-primary { background:linear-gradient(135deg,var(--bill-tone),var(--bill-tone-deep));box-shadow:0 9px 19px rgba(var(--bill-tone-rgb),.25); }
.overlay .bill-expense-modal .bill-expense-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }

.overlay > .date-picker-popover.bill-date-popover.is-portal { border-color:rgba(214,154,8,.34);background:linear-gradient(145deg,var(--theme-glass, rgba(255,253,246,.98)),var(--theme-glass, rgba(247,235,200,.97)));box-shadow:0 20px 42px rgba(91,65,18,.24); }
.overlay > .bill-date-popover .date-picker-month-label { color:var(--theme-ink, #805400);font-weight:880; }
.overlay > .bill-date-popover .date-picker-nav { color:var(--theme-ink, #A96C00);border-color:rgba(214,154,8,.26);background:var(--theme-glass, rgba(255,255,255,.74)); }
.overlay > .bill-date-popover .date-picker-nav:hover { border-color:#D69A08;background:rgba(214,154,8,.13); }
.overlay > .bill-date-popover .date-picker-day:hover { color:var(--theme-ink, #805400);background:rgba(214,154,8,.15); }
.overlay > .bill-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#D69A08,#A96C00)!important;box-shadow:0 7px 14px rgba(169,108,0,.27)!important; }
.overlay > .bill-date-popover .date-picker-today-btn { color:var(--theme-ink, #805400);border-color:rgba(214,154,8,.26);background:rgba(214,154,8,.12); }

@media (min-width:901px) {
    .overlay .modal.bill-expense-modal { width:min(940px,calc(100vw - 56px));max-width:none;height:min(690px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 78px; }
    .bill-expense-modal-body { grid-template-columns:minmax(0,1.06fr) minmax(350px,.94fr);overflow:visible; }
}
@media (max-width:900px) {
    .overlay .modal.bill-expense-modal { width:min(520px,calc(100vw - 18px));max-width:none;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }
    .bill-expense-modal-head { flex:0 0 auto; }
    .bill-expense-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }
    .bill-expense-main-panel,.bill-expense-meta-panel { padding:12px; }
    .bill-type-control-row { grid-template-columns:minmax(0,1fr) 1fr; }
    .bill-type-picker { grid-column:1 / -1; }
    .overlay .bill-expense-modal .bill-expense-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; }
}
@media (max-width:420px) {
    .overlay .modal.bill-expense-modal { padding:10px; }
    .bill-expense-modal-head { min-height:66px;padding:10px 12px; }
    .bill-expense-title-icon { width:40px;height:40px; }
    .overlay .bill-expense-modal .bill-expense-modal-foot { grid-template-columns:1fr; }
    .overlay .bill-expense-modal .bill-expense-modal-foot #be_cancelBtn { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) {
    .bill-type-trigger,.bill-type-option,.bill-recorder-trigger,.bill-recorder-option,.overlay .bill-expense-modal .bill-expense-modal-foot .btn { transition:none !important; }
}

/* ---------- repairs: coral maintenance workspace ---------- */
.overlay .modal.repair-expense-modal {
    --repair-tone:#EE7658;
    --repair-tone-rgb:238,118,88;
    --repair-tone-deep:#D8573D;
    box-sizing:border-box;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    gap:0;
    padding:14px;
    overflow:hidden;
    border-color:rgba(var(--repair-tone-rgb),.4);
    background:radial-gradient(circle at 100% 0%,rgba(var(--repair-tone-rgb),.22),transparent 40%),radial-gradient(circle at 0% 100%,rgba(var(--repair-tone-rgb),.09),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(229,235,247,.96)),var(--theme-glass, rgba(184,197,219,.9)));
    box-shadow:0 26px 70px rgba(29,36,68,.3),0 0 0 1px rgba(var(--repair-tone-rgb),.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
.repair-expense-modal-head {
    min-height:72px;display:flex;align-items:center;gap:12px;padding:11px 14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;
    background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.9)),rgba(var(--repair-tone-rgb),.11));
    box-shadow:0 10px 22px rgba(41,52,105,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}
.repair-expense-title-icon,.repair-expense-panel-head > span {
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;
    background:linear-gradient(145deg,var(--repair-tone),var(--repair-tone-deep));
    box-shadow:0 8px 17px rgba(var(--repair-tone-rgb),.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32));
}
.repair-expense-title-icon { width:44px;height:44px;border-radius:14px;font-size:21px; }
.repair-expense-modal-head span:not(.repair-expense-title-icon) { color:var(--repair-tone-deep);font-size:11px;font-weight:800; }
.repair-expense-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.repair-expense-modal-body { min-height:0;display:grid;gap:14px;padding:14px 0; }
.repair-expense-main-panel,.repair-expense-meta-panel {
    min-width:0;min-height:0;display:flex;flex-direction:column;gap:11px;padding:14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;
    background:radial-gradient(circle at 100% 0%,rgba(var(--repair-tone-rgb),.12),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.75)),var(--theme-glass, rgba(228,234,247,.57)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(45,57,104,.08);
}
.repair-expense-panel-head { min-height:44px;display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(var(--repair-tone-rgb),.22); }
.repair-expense-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.repair-expense-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .repair-expense-modal .field { margin:0; }
.overlay .repair-expense-modal .field > label { color:var(--text1);font-size:12.5px;font-weight:840; }
.overlay .repair-expense-modal :is(input,select,textarea,.date-picker-field):focus,.overlay .repair-expense-modal .date-picker-field.open { border-color:var(--repair-tone);box-shadow:0 0 0 3px rgba(var(--repair-tone-rgb),.17); }
.overlay .repair-expense-modal textarea { min-height:86px;resize:none; }
.repair-recorder-picker { position:relative; }
.repair-recorder-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.repair-recorder-trigger {
    width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;
    border:1px solid rgba(var(--repair-tone-rgb),.3);border-radius:14px;color:var(--text1);background:var(--theme-glass, rgba(255,255,255,.78));
    text-align:inherit;font:inherit;font-weight:760;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.repair-recorder-trigger:hover,.repair-recorder-trigger[aria-expanded="true"] { border-color:var(--repair-tone);background:var(--theme-glass, rgba(255,247,244,.96));box-shadow:0 0 0 3px rgba(var(--repair-tone-rgb),.15); }
.repair-recorder-trigger > i { color:var(--repair-tone);transition:transform .18s ease; }
.repair-recorder-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.repair-recorder-menu {
    position:absolute;z-index:40;inset-inline:0;top:calc(100% + 7px);display:grid;gap:5px;max-height:210px;overflow-y:auto;padding:7px;
    border:1px solid rgba(var(--repair-tone-rgb),.32);border-radius:15px;background:var(--theme-glass, rgba(255,245,241,.98));
    box-shadow:0 18px 36px rgba(91,48,37,.23),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));backdrop-filter:blur(18px);
}
.repair-recorder-menu[hidden] { display:none; }
.repair-recorder-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:730;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.repair-recorder-option:hover,.repair-recorder-option:focus-visible { outline:none;border-color:rgba(var(--repair-tone-rgb),.3);background:rgba(var(--repair-tone-rgb),.11);transform:translateX(-2px); }
.repair-recorder-option > i { color:transparent; }
.repair-recorder-option.active { color:var(--repair-tone-deep);border-color:rgba(var(--repair-tone-rgb),.37);background:rgba(var(--repair-tone-rgb),.16); }
.repair-recorder-option.active > i { color:var(--repair-tone); }
.overlay .repair-expense-modal .attach-files-list { max-height:78px;overflow-y:auto; }
.overlay .repair-expense-modal .repair-expense-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,211,233,.15)),rgba(var(--repair-tone-rgb),.09)); }
.overlay .repair-expense-modal .repair-expense-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .repair-expense-modal .repair-expense-modal-foot .btn-primary { background:linear-gradient(135deg,#E9981A,var(--repair-tone));box-shadow:0 9px 19px rgba(var(--repair-tone-rgb),.28); }
.overlay .repair-expense-modal .repair-expense-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }
.overlay > .date-picker-popover.repair-date-popover.is-portal { border-color:rgba(238,118,88,.38);background:linear-gradient(145deg,var(--theme-glass, rgba(255,250,248,.99)),var(--theme-glass, rgba(250,220,210,.97)));box-shadow:0 20px 42px rgba(91,48,37,.25); }
.overlay > .repair-date-popover .date-picker-month-label { color:var(--theme-ink, #A83E29);font-weight:880; }
.overlay > .repair-date-popover .date-picker-nav { color:var(--theme-ink, #D8573D);border-color:rgba(238,118,88,.28);background:var(--theme-glass, rgba(255,255,255,.76)); }
.overlay > .repair-date-popover .date-picker-nav:hover { border-color:#EE7658;background:rgba(238,118,88,.14); }
.overlay > .repair-date-popover .date-picker-day:hover { color:var(--theme-ink, #A83E29);background:rgba(238,118,88,.16); }
.overlay > .repair-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#EE7658,#D8573D)!important;box-shadow:0 7px 14px rgba(216,87,61,.29)!important; }
.overlay > .repair-date-popover .date-picker-today-btn { color:var(--theme-ink, #A83E29);border-color:rgba(238,118,88,.28);background:rgba(238,118,88,.13); }
@media (min-width:901px) {
    .overlay .modal.repair-expense-modal { width:min(900px,calc(100vw - 56px));max-width:none;height:min(650px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 78px; }
    .repair-expense-modal-body { grid-template-columns:minmax(0,1fr) minmax(350px,1fr);overflow:visible; }
}
@media (max-width:900px) {
    .overlay .modal.repair-expense-modal { width:min(520px,calc(100vw - 18px));max-width:none;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }
    .repair-expense-modal-head { flex:0 0 auto; }
    .repair-expense-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }
    .repair-expense-main-panel,.repair-expense-meta-panel { padding:12px; }
    .overlay .repair-expense-modal .repair-expense-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; }
}
@media (max-width:420px) {
    .overlay .modal.repair-expense-modal { padding:10px; }
    .repair-expense-modal-head { min-height:66px;padding:10px 12px; }
    .repair-expense-title-icon { width:40px;height:40px; }
    .overlay .repair-expense-modal .repair-expense-modal-foot { grid-template-columns:1fr; }
    .overlay .repair-expense-modal .repair-expense-modal-foot #re_cancelBtn { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) {
    .repair-recorder-trigger,.repair-recorder-option,.overlay .repair-expense-modal .repair-expense-modal-foot .btn { transition:none !important; }
}

/* ---------- daily expenses: green operational workspace ---------- */
.overlay .modal.daily-expense-modal {
    --daily-tone:#37B878;--daily-tone-rgb:55,184,120;--daily-tone-deep:#168A58;
    box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:14px;overflow:hidden;
    border-color:rgba(var(--daily-tone-rgb),.4);
    background:radial-gradient(circle at 100% 0%,rgba(var(--daily-tone-rgb),.22),transparent 40%),radial-gradient(circle at 0% 100%,rgba(var(--daily-tone-rgb),.1),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(229,239,243,.96)),var(--theme-glass, rgba(184,202,216,.9)));
    box-shadow:0 26px 70px rgba(24,54,53,.3),0 0 0 1px rgba(var(--daily-tone-rgb),.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
.daily-expense-modal-head { min-height:72px;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.91)),rgba(var(--daily-tone-rgb),.12));box-shadow:0 10px 22px rgba(31,73,70,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.daily-expense-title-icon,.daily-expense-panel-head > span { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,var(--daily-tone),var(--daily-tone-deep));box-shadow:0 8px 17px rgba(var(--daily-tone-rgb),.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32)); }
.daily-expense-title-icon { width:44px;height:44px;border-radius:14px;font-size:21px; }
.daily-expense-modal-head span:not(.daily-expense-title-icon) { color:var(--daily-tone-deep);font-size:11px;font-weight:800; }
.daily-expense-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.daily-expense-modal-body { min-height:0;display:grid;gap:14px;padding:14px 0; }
.daily-expense-main-panel,.daily-expense-meta-panel { min-width:0;min-height:0;display:flex;flex-direction:column;gap:11px;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;background:radial-gradient(circle at 100% 0%,rgba(var(--daily-tone-rgb),.12),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.76)),var(--theme-glass, rgba(226,239,239,.58)));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(35,78,75,.08); }
.daily-expense-panel-head { min-height:44px;display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(var(--daily-tone-rgb),.22); }
.daily-expense-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.daily-expense-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .daily-expense-modal .field { margin:0; }
.overlay .daily-expense-modal .field > label { color:var(--text1);font-size:12.5px;font-weight:840; }
.overlay .daily-expense-modal :is(input,select,textarea,.date-picker-field):focus,.overlay .daily-expense-modal .date-picker-field.open { border-color:var(--daily-tone);box-shadow:0 0 0 3px rgba(var(--daily-tone-rgb),.17); }
.overlay .daily-expense-modal textarea { min-height:100px;resize:none; }
.daily-buyer-picker { position:relative; }
.daily-buyer-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.daily-buyer-trigger { width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid rgba(var(--daily-tone-rgb),.3);border-radius:14px;color:var(--text1);background:var(--theme-glass, rgba(255,255,255,.78));text-align:inherit;font:inherit;font-weight:760;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.daily-buyer-trigger:hover,.daily-buyer-trigger[aria-expanded="true"] { border-color:var(--daily-tone);background:var(--theme-glass, rgba(244,255,249,.96));box-shadow:0 0 0 3px rgba(var(--daily-tone-rgb),.15); }
.daily-buyer-trigger > i { color:var(--daily-tone);transition:transform .18s ease; }
.daily-buyer-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.daily-buyer-menu { position:absolute;z-index:40;inset-inline:0;top:calc(100% + 7px);display:grid;gap:5px;max-height:210px;overflow-y:auto;padding:7px;border:1px solid rgba(var(--daily-tone-rgb),.32);border-radius:15px;background:var(--theme-glass, rgba(241,253,247,.98));box-shadow:0 18px 36px rgba(28,76,58,.23),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));backdrop-filter:blur(18px); }
.daily-buyer-menu[hidden] { display:none; }
.daily-buyer-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:730;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.daily-buyer-option:hover,.daily-buyer-option:focus-visible { outline:none;border-color:rgba(var(--daily-tone-rgb),.3);background:rgba(var(--daily-tone-rgb),.11);transform:translateX(-2px); }
.daily-buyer-option > i { color:transparent; }
.daily-buyer-option.active { color:var(--daily-tone-deep);border-color:rgba(var(--daily-tone-rgb),.37);background:rgba(var(--daily-tone-rgb),.16); }
.daily-buyer-option.active > i { color:var(--daily-tone); }
.overlay .daily-expense-modal .daily-expense-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,218,226,.15)),rgba(var(--daily-tone-rgb),.09)); }
.overlay .daily-expense-modal .daily-expense-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .daily-expense-modal .daily-expense-modal-foot .btn-primary { background:linear-gradient(135deg,var(--daily-tone),#259E9F);box-shadow:0 9px 19px rgba(var(--daily-tone-rgb),.28); }
.overlay .daily-expense-modal .daily-expense-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }
.overlay > .date-picker-popover.daily-date-popover.is-portal { border-color:rgba(55,184,120,.38);background:linear-gradient(145deg,var(--theme-glass, rgba(248,255,251,.99)),var(--theme-glass, rgba(210,243,226,.97)));box-shadow:0 20px 42px rgba(28,76,58,.25); }
.overlay > .daily-date-popover .date-picker-month-label { color:var(--theme-ink, #0D7347);font-weight:880; }
.overlay > .daily-date-popover .date-picker-nav { color:var(--theme-ink, #168A58);border-color:rgba(55,184,120,.28);background:var(--theme-glass, rgba(255,255,255,.76)); }
.overlay > .daily-date-popover .date-picker-nav:hover { border-color:#37B878;background:rgba(55,184,120,.14); }
.overlay > .daily-date-popover .date-picker-day:hover { color:var(--theme-ink, #0D7347);background:rgba(55,184,120,.16); }
.overlay > .daily-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#37B878,#168A58)!important;box-shadow:0 7px 14px rgba(22,138,88,.29)!important; }
.overlay > .daily-date-popover .date-picker-today-btn { color:var(--theme-ink, #0D7347);border-color:rgba(55,184,120,.28);background:rgba(55,184,120,.13); }
@media (min-width:901px) {
    .overlay .modal.daily-expense-modal { width:min(900px,calc(100vw - 56px));max-width:none;height:min(620px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 78px; }
    .daily-expense-modal-body { grid-template-columns:minmax(0,1fr) minmax(350px,1fr);overflow:visible; }
}
@media (max-width:900px) {
    .overlay .modal.daily-expense-modal { width:min(520px,calc(100vw - 18px));max-width:none;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }
    .daily-expense-modal-head { flex:0 0 auto; }
    .daily-expense-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }
    .daily-expense-main-panel,.daily-expense-meta-panel { padding:12px; }
    .overlay .daily-expense-modal .daily-expense-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; }
}
@media (max-width:420px) {
    .overlay .modal.daily-expense-modal { padding:10px; }
    .daily-expense-modal-head { min-height:66px;padding:10px 12px; }
    .daily-expense-title-icon { width:40px;height:40px; }
    .overlay .daily-expense-modal .daily-expense-modal-foot { grid-template-columns:1fr; }
    .overlay .daily-expense-modal .daily-expense-modal-foot #de_cancelBtn { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) {
    .daily-buyer-trigger,.daily-buyer-option,.overlay .daily-expense-modal .daily-expense-modal-foot .btn { transition:none !important; }
}

/* ---------- government payments: blue institutional workspace ---------- */
.overlay .modal.government-payment-modal { --government-tone:#2F7BEA;--government-tone-rgb:47,123,234;--government-tone-deep:#185AC7;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:14px;overflow:hidden;border-color:rgba(var(--government-tone-rgb),.42);background:radial-gradient(circle at 100% 0%,rgba(var(--government-tone-rgb),.22),transparent 40%),radial-gradient(circle at 0% 100%,rgba(var(--government-tone-rgb),.09),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(229,236,249,.97)),var(--theme-glass, rgba(183,198,222,.9)));box-shadow:0 26px 70px rgba(25,42,79,.31),0 0 0 1px rgba(var(--government-tone-rgb),.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
.government-payment-modal-head { min-height:72px;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.91)),rgba(var(--government-tone-rgb),.12));box-shadow:0 10px 22px rgba(38,60,109,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.government-payment-title-icon,.government-payment-panel-head > span { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,var(--government-tone),var(--government-tone-deep));box-shadow:0 8px 17px rgba(var(--government-tone-rgb),.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32)); }
.government-payment-title-icon { width:44px;height:44px;border-radius:14px;font-size:21px; }
.government-payment-modal-head span:not(.government-payment-title-icon) { color:var(--government-tone-deep);font-size:11px;font-weight:800; }
.government-payment-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.government-payment-modal-body { min-height:0;display:grid;gap:14px;padding:14px 0; }
.government-payment-main-panel,.government-payment-meta-panel { min-width:0;min-height:0;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;background:radial-gradient(circle at 100% 0%,rgba(var(--government-tone-rgb),.12),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.76)),var(--theme-glass, rgba(225,233,247,.58)));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(39,58,102,.08); }
.government-payment-panel-head { min-height:42px;display:flex;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid rgba(var(--government-tone-rgb),.22); }
.government-payment-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.government-payment-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .government-payment-modal .field { margin:0; }
.overlay .government-payment-modal .field > label { color:var(--text1);font-size:12.5px;font-weight:840; }
.overlay .government-payment-modal :is(input,select,textarea,.date-picker-field):focus,.overlay .government-payment-modal .date-picker-field.open { border-color:var(--government-tone);box-shadow:0 0 0 3px rgba(var(--government-tone-rgb),.17); }
.overlay .government-payment-modal textarea { min-height:72px;resize:none; }
.government-payment-type-row { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch; }
.government-type-picker,.government-recorder-picker { position:relative;min-width:0; }
.government-type-picker > select,.government-recorder-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.government-type-trigger,.government-recorder-trigger { width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid rgba(var(--government-tone-rgb),.3);border-radius:14px;color:var(--text1);background:var(--theme-glass, rgba(255,255,255,.79));text-align:inherit;font:inherit;font-weight:760;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.government-type-trigger:hover,.government-type-trigger[aria-expanded="true"],.government-recorder-trigger:hover,.government-recorder-trigger[aria-expanded="true"] { border-color:var(--government-tone);background:var(--theme-glass, rgba(245,249,255,.97));box-shadow:0 0 0 3px rgba(var(--government-tone-rgb),.15); }
.government-type-trigger > i,.government-recorder-trigger > i { color:var(--government-tone);transition:transform .18s ease; }
.government-type-trigger[aria-expanded="true"] > i,.government-recorder-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.government-type-menu,.government-recorder-menu { position:absolute;z-index:40;inset-inline:0;top:calc(100% + 7px);display:grid;gap:5px;max-height:210px;overflow-y:auto;padding:7px;border:1px solid rgba(var(--government-tone-rgb),.32);border-radius:15px;background:var(--theme-glass, rgba(242,247,255,.98));box-shadow:0 18px 36px rgba(30,56,104,.23),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));backdrop-filter:blur(18px); }
.government-type-menu[hidden],.government-recorder-menu[hidden] { display:none; }
.government-type-option,.government-recorder-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:730;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.government-type-option:hover,.government-type-option:focus-visible,.government-recorder-option:hover,.government-recorder-option:focus-visible { outline:none;border-color:rgba(var(--government-tone-rgb),.3);background:rgba(var(--government-tone-rgb),.11);transform:translateX(-2px); }
.government-type-option > i,.government-recorder-option > i { color:transparent; }
.government-type-option.active,.government-recorder-option.active { color:var(--government-tone-deep);border-color:rgba(var(--government-tone-rgb),.37);background:rgba(var(--government-tone-rgb),.15); }
.government-type-option.active > i,.government-recorder-option.active > i { color:var(--government-tone); }
.overlay .government-payment-modal .btn-add-type { color:var(--government-tone-deep);border-color:rgba(var(--government-tone-rgb),.26);background:var(--theme-glass, rgba(241,247,255,.86)); }
.overlay .government-payment-modal .btn-add-type:hover { color:#fff;border-color:var(--government-tone);background:var(--government-tone); }
.overlay .government-payment-modal .attach-files-list { max-height:64px;overflow-y:auto; }
.overlay .government-payment-modal .government-payment-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,211,233,.15)),rgba(var(--government-tone-rgb),.09)); }
.overlay .government-payment-modal .government-payment-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .government-payment-modal .government-payment-modal-foot .btn-primary { background:linear-gradient(135deg,var(--government-tone),var(--government-tone-deep));box-shadow:0 9px 19px rgba(var(--government-tone-rgb),.28); }
.overlay .government-payment-modal .government-payment-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }
.overlay > .date-picker-popover.government-date-popover.is-portal { border-color:rgba(47,123,234,.38);background:linear-gradient(145deg,var(--theme-glass, rgba(248,251,255,.99)),var(--theme-glass, rgba(211,226,251,.97)));box-shadow:0 20px 42px rgba(30,56,104,.25); }
.overlay > .government-date-popover .date-picker-month-label { color:var(--theme-ink, #174C9D);font-weight:880; }
.overlay > .government-date-popover .date-picker-nav { color:var(--theme-ink, #185AC7);border-color:rgba(47,123,234,.28);background:var(--theme-glass, rgba(255,255,255,.76)); }
.overlay > .government-date-popover .date-picker-nav:hover { border-color:#2F7BEA;background:rgba(47,123,234,.14); }
.overlay > .government-date-popover .date-picker-day:hover { color:var(--theme-ink, #174C9D);background:rgba(47,123,234,.16); }
.overlay > .government-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#2F7BEA,#185AC7)!important;box-shadow:0 7px 14px rgba(24,90,199,.29)!important; }
.overlay > .government-date-popover .date-picker-today-btn { color:var(--theme-ink, #174C9D);border-color:rgba(47,123,234,.28);background:rgba(47,123,234,.13); }
@media (min-width:901px) { .overlay .modal.government-payment-modal { width:min(940px,calc(100vw - 56px));max-width:none;height:min(680px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 78px; }.government-payment-modal-body { grid-template-columns:minmax(0,1.06fr) minmax(350px,.94fr);overflow:visible; } }
@media (max-width:900px) { .overlay .modal.government-payment-modal { width:min(520px,calc(100vw - 18px));max-width:none;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }.government-payment-modal-head { flex:0 0 auto; }.government-payment-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }.government-payment-main-panel,.government-payment-meta-panel { padding:12px; }.overlay .government-payment-modal .government-payment-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; } }
@media (max-width:420px) { .overlay .modal.government-payment-modal { padding:10px; }.government-payment-modal-head { min-height:66px;padding:10px 12px; }.government-payment-title-icon { width:40px;height:40px; }.government-payment-type-row { grid-template-columns:1fr; }.overlay .government-payment-modal .government-payment-modal-foot { grid-template-columns:1fr; }.overlay .government-payment-modal .government-payment-modal-foot #gp_cancelBtn { grid-row:2; } }
@media (prefers-reduced-motion:reduce) { .government-type-trigger,.government-recorder-trigger,.government-type-option,.government-recorder-option,.overlay .government-payment-modal .government-payment-modal-foot .btn { transition:none !important; } }

/* ---------- other expenses: slate workspace with coral action ---------- */
.overlay .modal.other-expense-modal { --other-tone:#4B5568;--other-tone-rgb:75,85,104;--other-tone-deep:#30394A;--other-action:#FF7961;box-sizing:border-box;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:0;padding:14px;overflow:hidden;border-color:rgba(var(--other-tone-rgb),.42);background:radial-gradient(circle at 100% 0%,rgba(var(--other-tone-rgb),.2),transparent 40%),radial-gradient(circle at 0% 100%,rgba(255,121,97,.1),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(231,235,244,.97)),var(--theme-glass, rgba(184,195,214,.91)));box-shadow:0 26px 70px rgba(25,31,45,.32),0 0 0 1px rgba(var(--other-tone-rgb),.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
.other-expense-modal-head { min-height:72px;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.91)),rgba(var(--other-tone-rgb),.1));box-shadow:0 10px 22px rgba(35,43,61,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.other-expense-title-icon,.other-expense-panel-head > span { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,var(--other-tone),var(--other-tone-deep));box-shadow:0 8px 17px rgba(var(--other-tone-rgb),.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28)); }
.other-expense-title-icon { width:44px;height:44px;border-radius:14px;font-size:22px; }
.other-expense-modal-head span:not(.other-expense-title-icon) { color:var(--other-tone-deep);font-size:11px;font-weight:800; }
.other-expense-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.other-expense-modal-body { min-height:0;display:grid;gap:14px;padding:14px 0; }
.other-expense-main-panel,.other-expense-meta-panel { min-width:0;min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;background:radial-gradient(circle at 100% 0%,rgba(var(--other-tone-rgb),.1),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.77)),var(--theme-glass, rgba(227,232,242,.59)));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(37,44,61,.08); }
.other-expense-panel-head { min-height:44px;display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(var(--other-tone-rgb),.2); }
.other-expense-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.other-expense-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .other-expense-modal .field { margin:0; }
.overlay .other-expense-modal .field > label { color:var(--text1);font-size:12.5px;font-weight:840; }
.overlay .other-expense-modal :is(input,select,textarea,.date-picker-field):focus,.overlay .other-expense-modal .date-picker-field.open { border-color:var(--other-tone);box-shadow:0 0 0 3px rgba(var(--other-tone-rgb),.17); }
.other-recorder-picker { position:relative; }
.other-recorder-picker > select { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none; }
.other-recorder-trigger { width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 13px;border:1px solid rgba(var(--other-tone-rgb),.3);border-radius:14px;color:var(--text1);background:var(--theme-glass, rgba(255,255,255,.79));text-align:inherit;font:inherit;font-weight:760;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.other-recorder-trigger:hover,.other-recorder-trigger[aria-expanded="true"] { border-color:var(--other-tone);background:var(--theme-glass, rgba(248,249,252,.97));box-shadow:0 0 0 3px rgba(var(--other-tone-rgb),.15); }
.other-recorder-trigger > i { color:var(--other-tone);transition:transform .18s ease; }
.other-recorder-trigger[aria-expanded="true"] > i { transform:rotate(180deg); }
.other-recorder-menu { position:absolute;z-index:40;inset-inline:0;top:calc(100% + 7px);display:grid;gap:5px;max-height:210px;overflow-y:auto;padding:7px;border:1px solid rgba(var(--other-tone-rgb),.32);border-radius:15px;background:var(--theme-glass, rgba(245,247,251,.98));box-shadow:0 18px 36px rgba(35,42,57,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));backdrop-filter:blur(18px); }
.other-recorder-menu[hidden] { display:none; }
.other-recorder-option { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 11px;border:1px solid transparent;border-radius:11px;color:var(--text1);background:transparent;text-align:inherit;font:inherit;font-weight:730;cursor:pointer;transition:background .17s ease,border-color .17s ease,transform .17s var(--ui-ease); }
.other-recorder-option:hover,.other-recorder-option:focus-visible { outline:none;border-color:rgba(var(--other-tone-rgb),.3);background:rgba(var(--other-tone-rgb),.11);transform:translateX(-2px); }
.other-recorder-option > i { color:transparent; }
.other-recorder-option.active { color:var(--other-tone-deep);border-color:rgba(var(--other-tone-rgb),.36);background:rgba(var(--other-tone-rgb),.15); }
.other-recorder-option.active > i { color:var(--other-tone); }
.overlay .other-expense-modal .attach-files-list { max-height:110px;overflow-y:auto; }
.overlay .other-expense-modal .other-expense-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,207,221,.15)),rgba(255,121,97,.08)); }
.overlay .other-expense-modal .other-expense-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .other-expense-modal .other-expense-modal-foot .btn-primary { background:linear-gradient(135deg,#FF8B72,var(--other-action));box-shadow:0 9px 19px rgba(255,121,97,.3); }
.overlay .other-expense-modal .other-expense-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }
.overlay > .date-picker-popover.other-date-popover.is-portal { border-color:rgba(75,85,104,.38);background:linear-gradient(145deg,var(--theme-glass, rgba(250,251,253,.99)),var(--theme-glass, rgba(222,226,235,.98)));box-shadow:0 20px 42px rgba(35,42,57,.26); }
.overlay > .other-date-popover .date-picker-month-label { color:var(--theme-ink, #30394A);font-weight:880; }
.overlay > .other-date-popover .date-picker-nav { color:var(--theme-ink, #3C4659);border-color:rgba(75,85,104,.26);background:var(--theme-glass, rgba(255,255,255,.78)); }
.overlay > .other-date-popover .date-picker-nav:hover { border-color:#4B5568;background:rgba(75,85,104,.13); }
.overlay > .other-date-popover .date-picker-day:hover { color:var(--theme-ink, #30394A);background:rgba(75,85,104,.14); }
.overlay > .other-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#5F6B80,#30394A)!important;box-shadow:0 7px 14px rgba(48,57,74,.29)!important; }
.overlay > .other-date-popover .date-picker-today-btn { color:var(--theme-ink, #30394A);border-color:rgba(75,85,104,.28);background:rgba(75,85,104,.11); }
@media (min-width:901px) { .overlay .modal.other-expense-modal { width:min(900px,calc(100vw - 56px));max-width:none;height:min(610px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);grid-template-rows:76px minmax(0,1fr) 78px; }.other-expense-modal-body { grid-template-columns:minmax(0,1fr) minmax(350px,1fr);overflow:visible; } }
@media (max-width:900px) { .overlay .modal.other-expense-modal { width:min(520px,calc(100vw - 18px));max-width:none;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain; }.other-expense-modal-head { flex:0 0 auto; }.other-expense-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }.other-expense-main-panel,.other-expense-meta-panel { padding:12px; }.overlay .other-expense-modal .other-expense-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; } }
@media (max-width:420px) { .overlay .modal.other-expense-modal { padding:10px; }.other-expense-modal-head { min-height:66px;padding:10px 12px; }.other-expense-title-icon { width:40px;height:40px; }.overlay .other-expense-modal .other-expense-modal-foot { grid-template-columns:1fr; }.overlay .other-expense-modal .other-expense-modal-foot #oe_cancelBtn { grid-row:2; } }
@media (prefers-reduced-motion:reduce) { .other-recorder-trigger,.other-recorder-option,.overlay .other-expense-modal .other-expense-modal-foot .btn { transition:none !important; } }

/* ---------- customers & accounts: clear account cards and glass filters ---------- */
:is(#view-customers,#view-employee-accounts) #customersListWrap {
    --accounts-tone: var(--ui-violet);
}

:is(#view-customers,#view-employee-accounts) .tanks-topbar {
    padding: 16px 18px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0%, rgba(117,95,232,.15), transparent 39%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.76)), var(--theme-glass, rgba(229,235,250,.62)));
    box-shadow: 0 14px 30px rgba(37,51,101,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

:is(#view-customers,#view-employee-accounts) .tank-controls-row {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 14px 0 18px;
    padding: 11px 13px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.75));
    border-radius: 17px;
    background: var(--theme-glass, rgba(255,255,255,.52));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

:is(#view-customers,#view-employee-accounts) .filter-tabs {
    gap: 5px;
    padding: 4px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(224,230,247,.65));
}

:is(#view-customers,#view-employee-accounts) .filter-tab {
    min-height: 38px;
    padding-inline: 13px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 780;
}

:is(#view-customers,#view-employee-accounts) .filter-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accounts-tone), #5D7CEA);
    box-shadow: 0 6px 14px rgba(103,88,220,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(#view-customers,#view-employee-accounts) .sort-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 760;
}

:is(#view-customers,#view-employee-accounts) .sort-label > i {
    color: var(--accounts-tone);
    font-size: 15px;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-select {
    position: relative;
    z-index: 5;
    min-width: 195px;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-select.is-open { z-index: 100; }

:is(#view-customers,#view-employee-accounts) .accounts-sort-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-trigger {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius: 12px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.74));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 760;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-trigger-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-trigger-copy > i { color: var(--accounts-tone); font-size: 16px; }
:is(#view-customers,#view-employee-accounts) .accounts-sort-chevron { color: var(--text2); transition: transform .2s var(--ui-ease); }

:is(#view-customers,#view-employee-accounts) .accounts-sort-select.is-open .accounts-sort-trigger,
:is(#view-customers,#view-employee-accounts) .accounts-sort-trigger:focus-visible {
    outline: 0;
    border-color: var(--accounts-tone);
    background: var(--theme-glass, rgba(255,255,255,.92));
    box-shadow: 0 0 0 3px rgba(117,95,232,.17), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-select.is-open .accounts-sort-chevron { transform: rotate(180deg); }

:is(#view-customers,#view-employee-accounts) .accounts-sort-menu {
    position: absolute;
    z-index: 120;
    inset-inline: 0;
    top: calc(100% + 8px);
    display: none;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.87));
    border-radius: 15px;
    background: linear-gradient(145deg, var(--theme-glass, rgba(247,249,255,.97)), var(--theme-glass, rgba(220,228,248,.93)));
    box-shadow: 0 18px 34px rgba(34,45,94,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-select.is-open .accounts-sort-menu { display: grid; animation: accountsSortMenuIn .2s var(--ui-ease) both; }
@keyframes accountsSortMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

:is(#view-customers,#view-employee-accounts) .accounts-sort-option {
    min-height: 39px;
    display: grid;
    grid-template-columns: 21px minmax(0,1fr) 20px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text1);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 730;
    text-align: right;
}

:is(#view-customers,#view-employee-accounts) .accounts-sort-option > i:first-child { color: var(--accounts-tone); font-size: 15px; }
:is(#view-customers,#view-employee-accounts) .accounts-sort-option > i:last-child { opacity: 0; color: var(--accounts-tone); }
:is(#view-customers,#view-employee-accounts) .accounts-sort-option:hover { background: var(--theme-glass, rgba(255,255,255,.64)); }
:is(#view-customers,#view-employee-accounts) .accounts-sort-option.is-active { border-color: rgba(117,95,232,.2); background: rgba(117,95,232,.1); }
:is(#view-customers,#view-employee-accounts) .accounts-sort-option.is-active > i:last-child { opacity: 1; }

:is(#view-customers,#view-employee-accounts) .section-title-icon {
    min-height: 37px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 9px !important;
    color: var(--text1);
    font-size: 15px;
    font-weight: 840;
}

:is(#view-customers,#view-employee-accounts) .section-title-icon > i {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--accounts-tone);
    background: rgba(117,95,232,.11);
}

:is(#view-customers,#view-employee-accounts) :is(.card-narrow, .card-narrow-spaced) {
    padding: 10px;
    overflow: visible;
    border-color: var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 18px;
    background: linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.73)), var(--theme-glass, rgba(232,238,250,.57)));
    box-shadow: 0 13px 28px rgba(35,48,96,.085), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

:is(#view-customers,#view-employee-accounts) :is(#customersList, #employeeAccountsList) {
    display: grid;
    gap: 8px;
}

:is(#view-customers,#view-employee-accounts) .account-entry {
    --account-tone: var(--accounts-tone);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    min-height: 72px;
    gap: 13px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--account-tone) 13%, var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius: 15px;
    background: var(--theme-glass, rgba(255,255,255,.54));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));
    animation: accountEntryIn .32s var(--ui-ease) both;
}

:is(#view-customers,#view-employee-accounts) .account-entry--employee { --account-tone: #3D8DE8; }
:is(#view-customers,#view-employee-accounts) .account-entry--customer { --account-tone: #7461E6; }

:is(#view-customers,#view-employee-accounts) .account-entry::before {
    content: '';
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 99px;
    background: var(--account-tone);
    opacity: .75;
}

:is(#view-customers,#view-employee-accounts) .account-entry:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--account-tone) 34%, var(--theme-stroke, rgba(255,255,255,.88)));
    background: color-mix(in srgb, var(--account-tone) 6%, var(--theme-glass, rgba(255,255,255,.68)));
    box-shadow: 0 11px 22px color-mix(in srgb, var(--account-tone) 10%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

:is(#view-customers,#view-employee-accounts) .account-entry .employee-row-left { gap: 11px; }

:is(#view-customers,#view-employee-accounts) .account-entry .employee-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    border: 2px solid color-mix(in srgb, var(--account-tone) 23%, var(--theme-stroke, rgba(255,255,255,.9)));
    color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--account-tone) 19%, transparent);
}

:is(#view-customers,#view-employee-accounts) .account-entry .employee-name {
    margin-bottom: 4px;
    color: var(--text1);
    font-size: 14px;
    font-weight: 850;
}

:is(#view-customers,#view-employee-accounts) .account-entry .employee-status {
    overflow: hidden;
    display: block;
    max-width: 52ch;
    margin: 0;
    color: var(--text2);
    font-size: 11.5px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#view-customers,#view-employee-accounts) .account-entry .balance-pill {
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 820;
}

@keyframes accountEntryIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

html[data-theme="dark"] :is(#view-customers,#view-employee-accounts) :is(.tanks-topbar, .tank-controls-row, .card-narrow, .card-narrow-spaced) {
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(43,53,70,.9), rgba(26,35,49,.84));
}

html[data-theme="dark"] :is(#view-customers,#view-employee-accounts) .accounts-sort-menu {
    border-color: rgba(255,255,255,.13);
    background: linear-gradient(145deg, rgba(45,56,75,.98), rgba(28,37,52,.95));
}

@media (max-width: 640px) {
    :is(#view-customers,#view-employee-accounts) .tank-controls-row { grid-template-columns: 1fr; }
    :is(#view-customers,#view-employee-accounts) .accounts-sort-group { justify-content: space-between; }
    :is(#view-customers,#view-employee-accounts) .accounts-sort-select { min-width: min(220px, 68vw); }
    :is(#view-customers,#view-employee-accounts) .filter-tabs { width: 100%; }
    :is(#view-customers,#view-employee-accounts) .filter-tab { flex: 1; padding-inline: 7px; }
    :is(#view-customers,#view-employee-accounts) .account-entry { grid-template-columns: 1fr; gap: 8px; }
    :is(#view-customers,#view-employee-accounts) .account-entry .employee-row-actions { width: 100%; justify-content: flex-end; }
    :is(#view-customers,#view-employee-accounts) .account-entry .employee-status { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#view-customers,#view-employee-accounts) :is(.account-entry, .accounts-sort-menu) { animation: none !important; }
}

/* ---------- employee profile: balanced information header and action rail ---------- */
#view-employees .profile-card {
    --profile-tone: var(--ui-blue);
    padding: 16px;
    overflow: hidden;
    border-color: var(--theme-stroke, rgba(255,255,255,.8));
    background:
        radial-gradient(circle at 0% 100%, rgba(103,89,226,.12), transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(79,123,232,.13), transparent 37%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(228,236,250,.62)));
    box-shadow: 0 18px 38px rgba(35,49,98,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#view-employees .profile-card .profile-status-row {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 10px 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb,var(--profile-tone) 12%,var(--theme-stroke, rgba(255,255,255,.7)));
}

#view-employees .profile-card .profile-status-row .employee-profile-identity-copy { min-width:0; }
#view-employees .profile-card .employee-profile-status-badges { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
#view-employees .profile-card .profile-status-row .profile-name { margin:0; }
#view-employees .profile-card .profile-status-row .profile-id { margin-top:4px; }

#view-employees .profile-card .profile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 222px;
    align-items: start;
    gap: 20px;
    padding: 10px;
}

#view-employees .profile-card .profile-header-main {
    min-width: 0;
    display:block;
}

#view-employees .employee-profile-identity {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

#view-employees .employee-profile-identity-copy { min-width:0; }

#view-employees .employee-profile-identity .profile-name {
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#view-employees .employee-profile-identity .profile-id { margin-top:5px; }

#view-employees .profile-card .profile-avatar {
    width: 158px;
    height: 220px;
    flex-basis: 158px;
    border: 4px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 28px;
    box-shadow: 0 16px 32px rgba(61,95,208,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.36));
    font-size: 42px;
}

#view-employees .profile-card .profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:24px; }

#view-employees .employee-profile-photo-panel {
    width:222px;
    min-height:250px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius:18px;
    background:var(--theme-glass, rgba(255,255,255,.4));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-employees .profile-card .profile-header-info { min-width: 0; }

#view-employees .profile-card .profile-header-info { margin-top:11px; }

#view-employees .profile-card .profile-name {
    margin-bottom: 2px;
    color: var(--text1);
    font-size: 19px;
    font-weight: 880;
    letter-spacing: -.15px;
}

#view-employees .profile-card .profile-id {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 8px;
    color: var(--text2);
    background: var(--theme-glass, rgba(255,255,255,.54));
    font-size: 11.5px;
    font-weight: 760;
}

#view-employees .profile-card .profile-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 11px;
}

#view-employees .profile-card .profile-meta-item {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 5px 8px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 12px;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
}

#view-employees .profile-card .profile-meta-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 14px;
}

#view-employees .profile-card .profile-meta-label { font-size: 10.5px; font-weight: 720; }
#view-employees .profile-card .profile-meta-value { font-size: 11.5px; font-weight: 810; }

#view-employees .profile-action-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    padding: 5px;
    width: auto;
    margin-top: 10px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.4));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

#view-employees .profile-rail-btn {
    min-height: 44px;
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 820;
    line-height: 1.2;
    animation: profileRailReveal .3s var(--ui-ease) both;
    transition: transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

#view-employees .profile-rail-btn:nth-child(1) { animation-delay: 60ms; }
#view-employees .profile-rail-btn:nth-child(2) { animation-delay: 105ms; }
#view-employees .profile-rail-btn:nth-child(3) { animation-delay: 150ms; }
#view-employees .profile-rail-btn:nth-child(4) { animation-delay: 195ms; }

#view-employees .profile-rail-btn > i:not(.acct-full-profile-arrow),
#view-employees .profile-rail-btn .acct-full-profile-label > i {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 15px;
}

#view-employees .profile-rail-btn .acct-full-profile-label {
    flex: 1;
    gap: 8px;
}

#view-employees .profile-rail-btn .acct-full-profile-arrow {
    margin-inline-start: auto;
    color: currentColor;
    opacity: .74;
    transition: transform .18s var(--ui-ease);
}

#view-employees .profile-rail-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #4C7DEB, #6261E6);
    box-shadow: 0 8px 17px rgba(79,107,222,.27), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.31));
}

#view-employees .profile-rail-btn--primary .acct-full-profile-label > i { color: var(--theme-ink, #4B75DD); background: var(--theme-glass, rgba(255,255,255,.88)); }

#view-employees .profile-rail-btn--secondary {
    color: var(--theme-ink, #2E5CBA);
    border-color: rgba(73,125,220,.2);
    background: var(--theme-glass, rgba(237,244,255,.84));
}

#view-employees .profile-rail-btn--secondary > i { color: var(--theme-ink, #2E6DCF); background: rgba(91,157,235,.15); }

#view-employees .profile-rail-btn.btn-excel {
    color: var(--theme-ink, #147C54);
    border-color: rgba(43,167,111,.2);
    background: var(--theme-glass, rgba(232,249,240,.82));
}

#view-employees .profile-rail-btn.btn-excel > i { color: var(--theme-ink, #178C5E); background: rgba(67,186,128,.15); }

#view-employees .profile-rail-btn--tertiary {
    padding: 8px 10px;
    color: var(--theme-ink, #6E5C98);
    border: 1px solid rgba(118,98,178,.2);
    background: var(--theme-glass, rgba(247,244,255,.76));
    font-size: 12.5px;
    font-weight: 800;
}

#view-employees .profile-rail-btn--tertiary > i { color: var(--theme-ink, #765EC0); background: rgba(118,94,192,.13); }

#view-employees .profile-rail-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 17px rgba(42,58,118,.16), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.7));
}

#view-employees .profile-rail-btn--primary:hover { color: #fff; background: linear-gradient(135deg, #3C6FE0, #534EDB); }
#view-employees .profile-rail-btn:hover .acct-full-profile-arrow { transform: translateX(-3px); }
html[dir="rtl"] #view-employees .profile-rail-btn:hover .acct-full-profile-arrow { transform: translateX(3px); }

#view-employees .profile-rail-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(79,123,232,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
}

#view-employees #employeeProfileSummary {
    gap: 12px;
    margin-top: 14px;
}

#view-employees #employeeProfileSummary .metric-card {
    min-height: 84px;
    padding: 13px;
    border-radius: 16px;
    background: var(--theme-glass, rgba(255,255,255,.62));
    box-shadow: 0 11px 23px rgba(37,50,98,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

@keyframes profileRailReveal {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

html[dir="rtl"] #view-employees .profile-rail-btn { animation-name: profileRailRevealRtl; }
@keyframes profileRailRevealRtl { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

html[data-theme="dark"] #view-employees .profile-card,
html[data-theme="dark"] #view-employees .profile-action-rail,
html[data-theme="dark"] #view-employees .employee-profile-photo-panel,
html[data-theme="dark"] #view-employees .profile-meta-item {
    border-color: rgba(255,255,255,.12);
    background: rgba(34,44,60,.8);
}

@media (max-width: 800px) {
    #view-employees .profile-card .profile-header { grid-template-columns: 1fr; }
    #view-employees .employee-profile-photo-panel { width:100%; min-height:150px; }
    #view-employees .profile-card .profile-avatar { width:128px; height:128px; flex-basis:200px; border-radius:24px; }
    #view-employees .profile-card .profile-avatar img { border-radius:20px; }
}

@media (max-width: 520px) {
    #view-employees .profile-card { padding: 12px; }
    #view-employees .profile-card .profile-header-main { align-items: flex-start; gap: 10px; }
    #view-employees .profile-card .profile-status-row { align-items:flex-start; flex-wrap:wrap; margin-inline:4px; }
    #view-employees .profile-card .profile-avatar { width:112px; height:112px; flex-basis:112px; }
    #view-employees .profile-action-rail {
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        margin-inline:4px;
        scrollbar-width:thin;
    }
    #view-employees .profile-rail-btn { min-width:168px; min-height:46px; flex:0 0 168px; scroll-snap-align:start; }
}

@media (prefers-reduced-motion: reduce) {
    #view-employees .profile-rail-btn { animation: none !important; }
}

/* ---------- employee modal: permissions and employment status ---------- */
.overlay .modal .emp-form-section {
    --permission-tone: var(--ui-blue);
    padding: 14px;
    border-color: var(--theme-stroke, rgba(255,255,255,.8));
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(80,126,232,.12), transparent 42%),
        linear-gradient(145deg, var(--theme-glass, rgba(244,248,255,.65)), var(--theme-glass, rgba(215,226,244,.46)));
    box-shadow: 0 13px 28px rgba(31,47,94,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.overlay .modal .emp-form-section-head {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 11px;
    padding: 4px 2px;
    color: var(--text1);
    font-size: 14px;
    font-weight: 860;
}

.overlay .modal .emp-form-section-head > i {
    width: 29px;
    height: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(80,126,232,.18);
    border-radius: 10px;
    color: var(--permission-tone);
    background: rgba(80,126,232,.12);
    font-size: 16px;
}

.overlay .modal .emp-perm-list {
    display: grid;
    gap: 9px;
}

.overlay .modal .emp-perm-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 31px;
    align-items: center;
    min-height: 70px;
    gap: 10px;
    margin: 0;
    padding: 10px 11px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 17%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 15px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
    cursor: pointer;
    animation: permissionCardEnter .3s var(--ui-ease) both;
    transition: transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.overlay .modal .emp-perm-item:nth-child(1) { animation-delay: 40ms; }
.overlay .modal .emp-perm-item:nth-child(2) { animation-delay: 80ms; }
.overlay .modal .emp-perm-item:nth-child(3) { animation-delay: 120ms; }

.overlay .modal .emp-perm-item::before {
    content: '';
    position: absolute;
    inset: 11px auto 11px 0;
    width: 3px;
    border-radius: 99px;
    background: var(--tone);
    opacity: 0;
    transition: opacity .18s ease;
}

.overlay .modal .emp-perm-item:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tone) 42%, var(--theme-stroke, rgba(255,255,255,.88)));
    background: color-mix(in srgb, var(--tone-bg) 44%, var(--theme-glass, rgba(255,255,255,.64)));
    box-shadow: 0 9px 19px color-mix(in srgb, var(--tone) 11%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.overlay .modal .emp-perm-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--tone) 69%, var(--theme-stroke, rgba(255,255,255,.86)));
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone-bg) 68%, var(--theme-glass, rgba(255,255,255,.8))), var(--theme-glass, rgba(255,255,255,.57)));
    box-shadow: 0 9px 20px color-mix(in srgb, var(--tone) 14%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.overlay .modal .emp-perm-item:has(input:checked)::before { opacity: .88; }

.overlay .modal .emp-perm-item:focus-within {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 23%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}

.overlay .modal .emp-perm-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--tone) 21%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 13px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone-bg) 72%, var(--theme-glass, rgba(255,255,255,.56)));
    font-size: 19px;
    transition: transform .22s var(--ui-ease), color .22s ease, background .22s ease, box-shadow .22s ease;
}

.overlay .modal .emp-perm-item:has(input:checked) .emp-perm-icon {
    color: #fff;
    background: var(--tone);
    box-shadow: 0 7px 14px color-mix(in srgb, var(--tone) 30%, transparent);
    transform: scale(1.04);
}

.overlay .modal .emp-perm-body { gap: 3px; }
.overlay .modal .emp-perm-title { color: var(--text1); font-size: 13.5px; font-weight: 850; }
.overlay .modal .emp-perm-sub { color: var(--text2); font-size: 11.5px; font-weight: 650; line-height: 1.45; }
.overlay .modal .emp-perm-item:has(input:checked) .emp-perm-title { color: color-mix(in srgb, var(--tone) 78%, var(--text1)); }

.overlay .modal .emp-perm-switch {
    width: 29px;
    height: 29px;
}

.overlay .modal .emp-perm-track {
    border: 1px solid color-mix(in srgb, var(--tone) 21%, var(--theme-stroke, rgba(255,255,255,.84)));
    border-radius: 50%;
    background: var(--theme-glass, rgba(255,255,255,.66));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.overlay .modal .emp-perm-switch input:checked + .emp-perm-track {
    border-color: var(--tone);
    background: var(--tone);
    box-shadow: 0 5px 11px color-mix(in srgb, var(--tone) 28%, transparent);
}

.overlay .modal .emp-status-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid var(--theme-stroke, rgba(255,255,255,.56));
}

.overlay .modal .emp-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 21px;
    align-items: center;
    min-height: 74px;
    gap: 8px;
    margin: 0;
    padding: 9px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tone) 18%, var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius: 14px;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8));
    cursor: pointer;
    animation: permissionCardEnter .32s var(--ui-ease) both;
    transition: transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.overlay .modal .emp-status-card:nth-child(2) { animation-delay: 70ms; }

.overlay .modal .emp-status-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tone) 46%, var(--theme-stroke, rgba(255,255,255,.86)));
}

.overlay .modal .emp-status-card:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

.overlay .modal .emp-status-card:has(input:checked) {
    border-color: color-mix(in srgb, var(--tone) 68%, var(--theme-stroke, rgba(255,255,255,.86)));
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone-bg) 72%, var(--theme-glass, rgba(255,255,255,.82))), var(--theme-glass, rgba(255,255,255,.58)));
    box-shadow: 0 9px 19px color-mix(in srgb, var(--tone) 14%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

.overlay .modal .emp-status-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone-bg) 72%, var(--theme-glass, rgba(255,255,255,.56)));
    font-size: 18px;
}

.overlay .modal .emp-status-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
    align-content: center;
}

.overlay .modal .emp-status-card:has(input:checked) .emp-status-icon { color: #fff; background: var(--tone); }
.overlay .modal .emp-status-label { color: var(--text1); font-size: 13px; font-weight: 850; line-height: 1.3; }
.overlay .modal .emp-status-sub { color: var(--text2); font-size: 10.5px; font-weight: 650; line-height: 1.35; }
.overlay .modal .emp-status-badge { color: transparent; font-size: 20px; }
.overlay .modal .emp-status-card:has(input:checked) .emp-status-badge { color: var(--tone); }

/* Date pickers use the same stacking contract as liquid selects: they are never
   covered by the next form section, and their selected day mirrors the dashboard. */
.overlay .modal .date-picker {
    position: relative;
    z-index: 1;
}

.overlay .modal .date-picker:has(.date-picker-field.open),
.overlay .modal .field:has(.date-picker-field.open),
.overlay .modal .emp-form-section:has(.date-picker-field.open) {
    position: relative;
    z-index: 130;
    overflow: visible;
}

.overlay .modal .date-picker-popover,
.overlay > .date-picker-popover.is-portal {
    z-index: 131;
    width: min(300px, calc(100vw - 48px));
    padding: 12px;
    border-color: var(--theme-stroke, rgba(255,255,255,.82));
    border-radius: 16px;
    background:
        radial-gradient(circle at 86% 0%, rgba(116,104,233,.14), transparent 38%),
        linear-gradient(145deg, var(--theme-glass, rgba(250,252,255,.94)), var(--theme-glass, rgba(227,235,250,.9)));
    box-shadow: 0 18px 38px rgba(28,40,88,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.overlay .modal .date-picker-popover.opens-up:not(.is-portal) {
    top: auto;
    bottom: calc(100% + 6px);
}

/* The calendar is portalled to the overlay while open, so a scrollable modal
   never clips it or forces the user to scroll just to choose a date. */
.overlay > .date-picker-popover.is-portal {
    position: fixed;
    inset: auto;
    z-index: 1000;
}

.overlay .modal .date-picker-grid,
.overlay > .date-picker-popover.is-portal .date-picker-grid { gap: 4px; }

.overlay .modal .date-picker-day,
.overlay > .date-picker-popover.is-portal .date-picker-day {
    min-height: 34px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
    transition: transform .18s var(--ui-ease), color .18s ease, background .18s ease, box-shadow .18s ease;
}

.overlay .modal .date-picker-day:hover,
.overlay > .date-picker-popover.is-portal .date-picker-day:hover {
    color: var(--ui-tone, var(--accent-solid));
    background: color-mix(in srgb, var(--ui-tone, var(--accent-solid)) 10%, var(--theme-glass, rgba(255,255,255,.78)));
    transform: translateY(-1px);
}

.overlay .modal .date-picker-day.selected,
.overlay > .date-picker-popover.is-portal .date-picker-day.selected {
    color: #fff;
    font-weight: 850;
    border-color: var(--theme-stroke, rgba(255,255,255,.74));
    background: linear-gradient(145deg, #8068E9, #526CE7);
    box-shadow: 0 7px 16px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}

@keyframes permissionCardEnter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

html[data-theme="dark"] .overlay .modal .emp-form-section {
    border-color: rgba(255,255,255,.13);
    background: linear-gradient(145deg, rgba(44,55,73,.8), rgba(27,36,50,.76));
}

html[data-theme="dark"] .overlay .modal :is(.emp-perm-item, .emp-status-card) {
    border-color: rgba(255,255,255,.12);
    background: rgba(20,29,42,.38);
}

@media (max-width: 480px) {
    .overlay .modal .emp-status-toggle { grid-template-columns: 1fr; }
}

/* Mobile permissions — show every category, with no hidden horizontal rail. */
@media (max-width: 820px) {
    .employee-account-modal--advanced .employee-permissions-panel {
        gap: 10px;
        padding: 11px;
        background:
            radial-gradient(circle at 100% 0%, rgba(74, 103, 226, .12), transparent 34%),
            var(--theme-glass, rgba(249, 251, 255, .86));
    }

    .employee-account-modal--advanced .employee-permissions-head {
        align-items: center;
        padding: 2px 2px 10px;
        border-bottom: 1px solid rgba(96, 112, 193, .17);
    }

    .employee-account-modal--advanced .employee-permission-browser {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        overflow: visible;
    }

    .employee-account-modal--advanced .employee-permission-category-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        width: 100%;
        padding: 0;
        overflow: visible;
        scroll-snap-type: none;
    }

    .employee-account-modal--advanced .employee-permission-category {
        min-width: 0;
        min-height: 72px;
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
        gap: 7px;
        padding: 8px;
        border: 1px solid rgba(95, 111, 176, .16);
        border-radius: 14px;
        color: var(--theme-ink, #344057);
        background: var(--theme-glass, rgba(255, 255, 255, .66));
        box-shadow: 0 5px 13px rgba(52, 65, 123, .05);
        scroll-snap-align: none;
    }

    .employee-account-modal--advanced .employee-permission-category > i:first-child {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 18px;
    }

    .employee-account-modal--advanced .employee-permission-category > span {
        align-content: center;
        gap: 3px;
    }

    .employee-account-modal--advanced .employee-permission-category b {
        overflow: visible;
        color: inherit;
        font-size: 11.5px;
        font-weight: 900;
        line-height: 1.35;
        text-overflow: clip;
        white-space: normal;
    }

    .employee-account-modal--advanced .employee-permission-category small {
        font-size: 10px;
        font-weight: 850;
        line-height: 1.25;
    }

    .employee-account-modal--advanced .employee-permission-category > i:last-child {
        display: none;
    }

    .employee-account-modal--advanced .employee-permission-category.active {
        color: var(--group-tone);
        border-color: rgba(var(--group-tone-rgb), .55);
        background: linear-gradient(145deg, var(--theme-glass, rgba(255, 255, 255, .94)), rgba(var(--group-tone-rgb), .14));
        box-shadow:
            0 0 0 2px rgba(var(--group-tone-rgb), .1),
            0 8px 18px rgba(var(--group-tone-rgb), .13);
    }

    .employee-account-modal--advanced .employee-permission-category.active::after {
        content: "";
        position: absolute;
        inset-inline: 12px;
        bottom: 5px;
        height: 3px;
        border-radius: 999px;
        background: var(--group-tone);
    }

    .employee-account-modal--advanced .employee-permission-category {
        position: relative;
    }

    .employee-account-modal--advanced .employee-permission-groups {
        width: 100%;
        padding: 0;
    }

    .employee-account-modal--advanced .employee-permission-group,
    .employee-account-modal--advanced .employee-permission-group[data-permission-group] {
        width: 100%;
        padding: 12px;
        border-radius: 17px;
        box-shadow: 0 8px 18px rgba(52, 66, 124, .07);
    }

    .employee-account-modal--advanced .employee-permission-group > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .employee-account-modal--advanced .employee-permission-item > span {
        min-height: 50px;
        font-size: 14px;
    }
}

@media (max-width: 390px) {
    .employee-account-modal--advanced .employee-permission-category-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Employee workspace top bar — single-row mobile navigation. */
@media (max-width: 760px) {
    html.employee-workspace-mode .top-bar:not(.search-open) {
        box-sizing: border-box;
        width: calc(100% - 20px);
        min-height: 66px;
        display: grid;
        grid-template-columns: 44px 44px minmax(48px, 1fr) 44px 44px !important;
        grid-template-rows: 48px;
        align-items: center;
        gap: 6px;
        margin: 10px 10px 0;
        padding: 8px 10px;
        border-radius: 20px;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-nav-group {
        grid-column: 1;
        grid-row: 1;
        width: 44px;
        min-width: 44px;
        display: grid;
        place-items: center;
        gap: 0;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #authAccountBtn {
        grid-column: 2;
        grid-row: 1;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-brand {
        grid-column: 3;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        justify-content: center;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #topBarNotifications {
        grid-column: 4;
        grid-row: 1;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #authLogoutBtn {
        grid-column: 5;
        grid-row: 1;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) :is(
        .top-bar-hamburger,
        #authAccountBtn,
        #notificationBellBtn,
        #authLogoutBtn
    ) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        place-self: center;
        border-radius: 13px;
        font-size: 21px;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-logo {
        width: auto;
        max-width: 46px;
        height: 40px;
        object-fit: contain;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-brand > [data-i18n="brandName"] {
        display: none;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-nav-group > :not(.top-bar-hamburger) {
        display: none;
    }
}

@media (max-width: 370px) {
    html.employee-workspace-mode .top-bar:not(.search-open) {
        grid-template-columns: 42px 42px minmax(36px, 1fr) 42px 42px !important;
        gap: 4px;
        padding-inline: 7px;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) :is(
        .top-bar-hamburger,
        #authAccountBtn,
        #notificationBellBtn,
        #authLogoutBtn
    ) {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .overlay .modal :is(.emp-perm-item, .emp-status-card) { animation: none !important; transition: none !important; }
}

/* ---------- dashboard activity journal ---------- */
#view-dashboard .dashboard-journal-card {
    --journal-tone: var(--ui-violet);
    padding: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--journal-tone) 14%, transparent), transparent 37%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(234,239,251,.64)));
}

#view-dashboard .dashboard-journal-head {
    min-height: 48px;
    align-items: baseline;
    margin: 0 0 10px !important;
    padding: 4px 4px 4px 8px;
    display: flex;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius: 14px;
    background: var(--theme-glass, rgba(255,255,255,.46));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#view-dashboard .dashboard-journal-head .section-label {
    display: inline-flex;
    align-items: center;
    margin-right: 10px;
    gap: 8px;
    font-size: 15px;
    font-weight: 850;
}

#view-dashboard .dashboard-journal-head .section-label::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #90A6FF, var(--journal-tone));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--journal-tone) 12%, transparent);
}

#view-dashboard .dashboard-journal-head .filter-tab {
    min-height: 38px;
    padding-inline: 12px;
    border: 1px solid color-mix(in srgb, var(--journal-tone) 18%, var(--theme-stroke, rgba(255,255,255,.8)));
    color: var(--journal-tone);
    background: var(--theme-glass, rgba(255,255,255,.67));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-dashboard #activityLogTabs {
    gap: 6px;
    min-height: 48px;
    margin: 0 0 10px !important;
    padding: 5px;
    border: 1px solid rgba(124,143,194,.16);
    border-radius: 14px;
    background: var(--theme-glass, rgba(220,227,247,.45));
}

#view-dashboard #activityLogTabs .filter-tab {
    flex: 1 1 auto;
    min-height: 38px;
    padding-inline: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 12.5px;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s var(--ui-ease);
}

#view-dashboard #activityLogTabs .filter-tab:hover {
    color: var(--journal-tone);
    background: var(--theme-glass, rgba(255,255,255,.55));
}

#view-dashboard #activityLogTabs .filter-tab:focus-visible,
#view-dashboard .dashboard-journal-head .filter-tab:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--journal-tone) 25%, transparent);
}

#view-dashboard #activityLogTabs .filter-tab.active {
    border-color: color-mix(in srgb, var(--journal-tone) 28%, var(--theme-stroke, rgba(255,255,255,.88)));
    color: #fff;
    background: linear-gradient(135deg, #6F86F0, var(--journal-tone));
    box-shadow: 0 7px 15px color-mix(in srgb, var(--journal-tone) 22%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.26));
}

#view-dashboard .activity-log-scroll {
    display: grid;
    gap: 8px;
    max-height: 312px;
    padding: 2px 5px 2px 2px;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--journal-tone) 44%, transparent) transparent;
}

#view-dashboard .dashboard-activity-entry {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#view-dashboard .dashboard-activity-entry:hover {
    background: transparent;
}

#view-dashboard .activity-row {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) max-content;
    gap: 11px;
    min-width: 0;
    padding: 10px 12px;
    border-color: color-mix(in srgb, var(--activity-tone, var(--journal-tone)) 18%, var(--theme-stroke, rgba(255,255,255,.82)));
    border-inline-start:1px solid var(--border);
    border-radius: 14px;
    background: var(--theme-glass, rgba(255,255,255,.53));
}

#view-dashboard .activity-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--activity-tone, var(--journal-tone)) 40%, var(--theme-stroke, rgba(255,255,255,.84)));
    background: color-mix(in srgb, var(--activity-tone, var(--journal-tone)) 7%, var(--theme-glass, rgba(255,255,255,.67)));
}

#view-dashboard .activity-row-icon {
    width: 38px;
    height: 38px;
}

#view-dashboard .activity-row-text {
    min-width: 0;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.75;
}

#view-dashboard .activity-row-when {
    align-items: flex-start;
    min-width: 88px;
    padding-inline-start: 10px;
    border-inline-start: 1px solid color-mix(in srgb, var(--activity-tone, var(--journal-tone)) 13%, transparent);
}

#view-dashboard .activity-row-time {
    color: var(--text1);
    font-size: 12px;
    font-weight: 850;
}

#view-dashboard .activity-row-date {
    color: var(--text2);
    font-size: 10.5px;
    font-weight: 650;
    white-space: nowrap;
}

#view-dashboard .activity-log-scroll::-webkit-scrollbar { width: 5px; }
#view-dashboard .activity-log-scroll::-webkit-scrollbar-track { background: transparent; }
#view-dashboard .activity-log-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--journal-tone) 44%, transparent);
}

html[data-theme="dark"] #view-dashboard .dashboard-journal-card {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--journal-tone) 18%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(38,46,60,.88), rgba(25,31,43,.82));
}

html[data-theme="dark"] #view-dashboard :is(.dashboard-journal-head, #activityLogTabs, .activity-row) {
    border-color: rgba(255,255,255,.11);
    background: rgba(15,21,31,.42);
}

html[data-theme="dark"] #view-dashboard #activityLogTabs .filter-tab:hover,
html[data-theme="dark"] #view-dashboard .dashboard-journal-head .filter-tab {
    background: rgba(255,255,255,.08);
}

@media (max-width: 560px) {
    #view-dashboard .dashboard-journal-card { padding: 11px; }
    #view-dashboard #activityLogTabs { overflow-x: auto; }
    #view-dashboard #activityLogTabs .filter-tab { flex: 0 0 auto; }
    #view-dashboard .activity-row {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
    }
    #view-dashboard .activity-row-icon { width: 34px; height: 34px; }
    #view-dashboard .activity-row-when {
        grid-column: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 7px;
        min-width: 0;
        padding: 4px 0 0;
        border-inline-start: 0;
    }
}

/* ---------- dashboard calendar month picker ---------- */
#view-dashboard .task-month-picker {
    position: relative;
    flex: 1;
    min-width: 0;
    z-index: 4;
}

#view-dashboard .add-task-row { margin-bottom: 8px; }

#view-dashboard .cal-cell.is-picked:not(.today) {
    color: #fff;
    font-weight: 850;
    background: linear-gradient(145deg, #8068E9, #526CE7);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    box-shadow: 0 7px 16px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}

#view-dashboard .cal-cell.today.is-picked {
    outline: 2px solid rgba(118,89,232,.72);
    outline-offset: 2px;
}

/* The picker lives at the bottom of the calendar card; let its popover escape the decorative card clip. */
#view-dashboard .side-card:has(.task-month-picker.is-open) {
    z-index: 12;
    overflow: visible;
}

#view-dashboard .task-month-picker > select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#view-dashboard .task-month-trigger {
    width: 100%;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid rgba(109,129,211,.26);
    border-radius: 12px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.72));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#view-dashboard .task-month-trigger i {
    color: var(--ui-violet);
    font-size: 16px;
    transition: transform .2s var(--ui-ease);
}

#view-dashboard .task-month-picker.is-open .task-month-trigger,
#view-dashboard .task-month-trigger:focus-visible {
    outline: 0;
    border-color: var(--ui-violet);
    background: var(--theme-glass, rgba(255,255,255,.9));
    box-shadow: 0 0 0 3px rgba(118,89,232,.18), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

#view-dashboard .task-month-picker.is-open .task-month-trigger i { transform: rotate(180deg); }

#view-dashboard .task-month-menu {
    position: absolute;
    z-index: 20;
    inset: auto 0 calc(100% + 7px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--theme-glass, rgba(245,248,255,.94));
    box-shadow: 0 18px 40px rgba(37,50,102,.20), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    transform: translateY(5px) scale(.98);
    transform-origin: bottom center;
    transition: opacity .18s ease, transform .18s var(--ui-ease), visibility .18s ease, max-height .18s ease, padding .18s ease;
}

#view-dashboard .task-month-picker.is-open .task-month-menu {
    max-height: 184px;
    padding: 6px;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    border-color: rgba(116,89,232,.24);
    transform: translateY(0) scale(1);
}

#view-dashboard .task-month-option {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text1);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

#view-dashboard .task-month-option i { opacity: 0; color: var(--ui-violet); }

#view-dashboard .task-month-option:hover,
#view-dashboard .task-month-option:focus-visible {
    outline: 0;
    border-color: rgba(118,89,232,.18);
    color: var(--ui-violet);
    background: rgba(118,89,232,.09);
}

#view-dashboard .task-month-option.is-selected {
    color: #fff;
    background: linear-gradient(135deg, #7D64E8, #536CE8);
    box-shadow: 0 5px 11px rgba(89,93,220,.2);
}

#view-dashboard .task-month-option.is-selected i { opacity: 1; color: #fff; }

html[data-theme="dark"] #view-dashboard .task-month-trigger,
html[data-theme="dark"] #view-dashboard .task-month-menu {
    border-color: rgba(255,255,255,.13);
    color: #EDF2FF;
    background: rgba(25,33,47,.91);
}

html[data-theme="dark"] #view-dashboard .task-month-option { color: #E7EDFA; }
html[data-theme="dark"] #view-dashboard .task-month-option:hover { background: rgba(124,105,232,.2); }

@media (prefers-reduced-motion: reduce) {
    #view-dashboard :is(.task-month-trigger, .task-month-trigger i, .task-month-menu, .task-month-option) { transition: none; }
}

#mainContent .select-wrap .select-arrow,
.overlay .modal .select-wrap .select-arrow {
    color: var(--ui-tone, var(--accent-solid));
}

/* ---------- modal language ---------- */
.overlay {
    background: rgba(21,29,49,.56);
    backdrop-filter: blur(7px) saturate(115%);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
}

.overlay .modal:not(.inventory-form-modal) {
    --ui-tone: var(--ui-blue);
    --ui-tone-2: var(--ui-violet);
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.74));
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 12%, transparent), transparent 37%),
        linear-gradient(145deg, var(--theme-glass, rgba(225,231,242,.95)), var(--theme-glass, rgba(183,195,216,.91)));
    box-shadow: 0 28px 72px rgba(23,33,72,.28), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    animation: uiModalEnter .34s var(--ui-ease) both;
}

.overlay .modal:not(.inventory-form-modal) > h3.ui-modal-title {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -8px -8px 16px;
    padding: 10px 12px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.67));
    border-radius: 17px;
    background: linear-gradient(135deg, var(--theme-glass, rgba(247,249,253,.8)), var(--theme-glass, rgba(211,220,235,.69)));
    box-shadow: 0 9px 22px rgba(33,45,91,.09), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.83));
    font-size: 17px;
    font-weight: 850;
}

.ui-modal-title-icon,
.overlay .modal:not(.inventory-form-modal) > h3.ui-modal-title > i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.76));
    border-radius: 14px;
    color: #fff !important;
    font-size: 21px !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--ui-tone) 68%, var(--theme-surface, #fff)), var(--ui-tone-2));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-tone) 23%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));
}

.overlay .modal:not(.inventory-form-modal) .modal-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(105px,.38fr);
    gap: 9px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.overlay .modal:not(.inventory-form-modal) .modal-actions .btn {
    width: 100%;
}

/* ---------- rows, lists and tables ---------- */
#mainContent :is(
    .activity-row,
    .finance-feed-row,
    .sale-row,
    .employee-row,
    .emp-row,
    .customer-result-row,
    .cash-location-row,
    .cash-handover-row,
    .history-entry,
    .work-record-row,
    .sd-buyer-row,
    .price-list-row,
    .profile-meta-item,
    .emp-perm-item,
    .till2-step
) {
    border: 1px solid color-mix(in srgb, var(--ui-tone) 10%, var(--ui-stroke-strong));
    border-radius: 14px;
    background: color-mix(in srgb, var(--ui-surface-strong) 78%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.64));
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ui-ease);
}

#mainContent :is(.access-checkbox-row, .fuel-tile, .sales-fuel-chip, .work-record-stat-item, .till2-note, .leave-day-chip) {
    border: 1px solid color-mix(in srgb, var(--ui-tone) 11%, var(--ui-stroke-strong));
    border-radius: 13px;
    background: color-mix(in srgb, var(--ui-surface-strong) 74%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.6));
}

#mainContent :is(
    .activity-row,
    .finance-feed-row,
    .sale-row,
    .employee-row,
    .emp-row,
    .customer-result-row,
    .cash-location-row,
    .cash-handover-row,
    .history-entry,
    .work-record-row,
    .sd-buyer-row,
    .profile-meta-item,
    .emp-perm-item,
    .till2-step
):hover {
    border-color: color-mix(in srgb, var(--ui-tone) 25%, var(--ui-stroke-strong));
    background: color-mix(in srgb, var(--ui-tone) 6%, var(--ui-surface-strong));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-tone) 8%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

#mainContent :is(.ledger-table-wrap, .work-record-list, .cash-ledger-list) {
    border: 1px solid var(--ui-stroke);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ui-surface) 75%, transparent);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.62));
    overflow: auto;
}

#mainContent .ledger-table {
    border-collapse: separate;
    border-spacing: 0 6px;
}

#mainContent .ledger-table th {
    color: var(--text2);
    background: color-mix(in srgb, var(--ui-tone) 6%, var(--ui-surface-soft));
    font-size: 12px;
    font-weight: 850;
}

#mainContent .ledger-table tbody tr {
    transition: background .18s ease, box-shadow .18s ease;
}

#mainContent .ledger-table tbody tr:hover {
    background: color-mix(in srgb, var(--ui-tone) 6%, var(--ui-surface-strong));
}

/* ---------- finance: outstanding customer debt + transaction timeline ---------- */
#view-finance .finance-debt-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--theme-stroke, rgba(255, 218, 214, .66)) !important;
    background: linear-gradient(115deg, #8E2027 0%, #BF3136 53%, #E2554C 100%) !important;
    color: #fff;
    box-shadow: 0 14px 30px rgba(174, 39, 42, .30), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24));
    animation: debtCardEnter .42s var(--ui-ease) both, debtCardPulse 2.8s ease-in-out 1s infinite;
}

#view-finance .finance-debt-card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    inset: -110px -55px auto auto;
    border-radius: 50%;
    background: var(--theme-highlight, rgba(255,255,255,.13));
    pointer-events: none;
}

#view-finance .finance-debt-card .finance-hero-icon {
    position: relative;
    width: 54px;
    height: 54px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.28));
    background: rgba(88, 12, 18, .28);
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.14)), 0 8px 18px rgba(82,10,15,.18);
}

#view-finance .finance-debt-card .finance-hero-icon::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.2));
    border-radius: 11px;
    animation: debtIconPulse 1.9s ease-in-out infinite;
}

#view-finance .finance-debt-card .finance-hero-icon i { position: relative; z-index: 1; font-size: 27px; }
#view-finance .finance-debt-card .finance-hero-label { color: rgba(255,255,255,.88); font-weight: 780; }
#view-finance .finance-debt-card .finance-hero-value { color: #fff; text-shadow: 0 2px 10px rgba(79, 9, 13, .22); }

@keyframes debtCardEnter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes debtCardPulse { 0%, 100% { box-shadow: 0 14px 30px rgba(174,39,42,.30), inset 0 1px 0 rgba(255,255,255,.24); } 50% { box-shadow: 0 17px 36px rgba(174,39,42,.40), inset 0 1px 0 rgba(255,255,255,.24); } }
@keyframes debtIconPulse { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .85; transform: scale(1); } }

#view-finance .finance-feed-list {
    display: grid;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--ui-stroke);
    border-radius: 16px;
    background: color-mix(in srgb, var(--ui-surface) 75%, transparent);
}

#view-finance .finance-feed-day-divider {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 3px 1px;
    padding: 5px 9px;
    border-radius: 10px;
    color: var(--ui-blue);
    background: color-mix(in srgb, var(--ui-blue) 9%, var(--ui-surface-strong));
}

#view-finance .finance-feed-day-label { font-size: 12px; font-weight: 850; }
#view-finance .finance-feed-day-count { padding: 4px 8px; border-radius: 999px; background: var(--ui-surface-strong); font-size: 11px; font-weight: 850; }

#view-finance .finance-feed-row {
    min-height: 62px;
    display: grid;
    grid-template-columns: 27px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 0 3px;
    padding: 9px 11px;
}

#view-finance .finance-feed-num {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--ui-blue);
    background: color-mix(in srgb, var(--ui-blue) 10%, var(--ui-surface-strong));
    font-size: 11px;
    font-weight: 850;
}

#view-finance .finance-feed-icon { width: 40px; height: 40px; border-radius: 12px; }
#view-finance .finance-feed-body { min-width: 0; display: grid; gap: 3px; }
#view-finance .finance-feed-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 850; }
#view-finance .finance-feed-time { font-size: 11.5px; }
#view-finance .finance-feed-amount { min-width: 108px; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, currentColor 8%, var(--ui-surface-strong)); text-align: center; font-size: 12px; font-weight: 880; }

/* ---------- salaries: payroll KPIs and operational employee rows ---------- */
#view-salaries #salariesSummaryRow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

#view-salaries .salary-summary-card {
    --salary-stat-tone: #4F6FE8;
    --salary-stat-bg: rgba(79,111,232,.14);
    position: relative;
    min-height: 92px;
    overflow: hidden;
    align-items: center;
    padding: 15px 16px;
    border-color: color-mix(in srgb, var(--salary-stat-tone) 18%, var(--theme-stroke, rgba(255,255,255,.66)));
    background:
        radial-gradient(circle at 88% 13%, color-mix(in srgb, var(--salary-stat-tone) 18%, transparent), transparent 32%),
        linear-gradient(145deg, var(--theme-glass, rgba(248,250,255,.86)), var(--theme-glass, rgba(224,232,246,.74)));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--salary-stat-tone) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}

#view-salaries .salary-summary-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    bottom: 15px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--salary-stat-tone) 66%, var(--theme-surface, #fff)), var(--salary-stat-tone));
    box-shadow: 0 0 14px color-mix(in srgb, var(--salary-stat-tone) 42%, transparent);
;display:none!important;}

#view-salaries .salary-summary-card .metric-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--salary-stat-tone) 16%, var(--theme-stroke, rgba(255,255,255,.78)));
    color: var(--salary-stat-tone);
    background: color-mix(in srgb, var(--salary-stat-bg) 70%, var(--theme-glass, rgba(255,255,255,.76)));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--salary-stat-tone) 13%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
}

#view-salaries .salary-summary-card .metric-icon::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid color-mix(in srgb, var(--salary-stat-tone) 18%, transparent);
    border-radius: 10px;
    animation: summaryIconPulse 2.4s ease-in-out infinite;
}

#view-salaries .salary-summary-card .metric-icon i { position: relative; z-index: 1; font-size: 22px; }
#view-salaries .salary-summary-copy { position: relative; z-index: 1; min-width: 0; }
#view-salaries .salary-summary-card .metric-label { font-size: 12.5px; font-weight: 820; }
#view-salaries .salary-summary-card .metric-value { color: var(--text1); font-size: 20px; font-weight: 900; line-height: 1.25; }

#view-salaries .card-narrow {
    padding: 12px;
}

#view-salaries .salary-list {
    display: grid;
    gap: 7px;
}

#view-salaries .salary-row-card {
    --salary-row-tone: #4F6FE8;
    --salary-row-tint: rgba(79,111,232,.14);
    position: relative;
    min-height: 68px;
    display: grid;
    grid-template-columns: 30px 44px minmax(0,1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--salary-row-tone) 16%, var(--ui-stroke-strong));
    border-radius: 15px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--salary-row-tint) 35%, var(--theme-glass, rgba(255,255,255,.72))), var(--theme-glass, rgba(255,255,255,.58)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.68));
    cursor: pointer;
    transition: transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#view-salaries .salary-row-card:hover,
#view-salaries .salary-row-card:focus-visible {
    outline: 0;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--salary-row-tone) 36%, var(--ui-stroke-strong));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--salary-row-tone) 10%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
}

#view-salaries .salary-row-num,
#view-salaries .salary-row-avatar,
#view-salaries .salary-row-status,
#view-salaries .salary-row-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#view-salaries .salary-row-num {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--salary-row-tone);
    background: color-mix(in srgb, var(--salary-row-tint) 72%, var(--theme-glass, rgba(255,255,255,.62)));
    font-size: 11px;
    font-weight: 850;
}

#view-salaries .salary-row-avatar {
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, var(--salary-row-tone), color-mix(in srgb, var(--salary-row-tone) 62%, #516FE8));
    font-size: 17px;
    font-weight: 880;
    box-shadow: 0 8px 16px color-mix(in srgb, var(--salary-row-tone) 15%, transparent);
}

#view-salaries .salary-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
#view-salaries .salary-row-main { min-width: 0; display: grid; gap: 3px; }
#view-salaries .salary-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text1); font-size: 13.5px; font-weight: 880; }
#view-salaries .salary-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); font-size: 11.5px; font-weight: 750; }

#view-salaries .salary-row-status {
    gap: 5px;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--salary-row-tone);
    background: color-mix(in srgb, var(--salary-row-tint) 76%, var(--theme-glass, rgba(255,255,255,.62)));
    font-size: 11.5px;
    font-weight: 820;
    white-space: nowrap;
}

#view-salaries .salary-row-status i { font-size: 15px; }

#view-salaries .salary-row-amount {
    min-width: 116px;
    padding: 8px 10px;
    border-radius: 12px;
    color: var(--salary-row-tone);
    background: var(--theme-glass, rgba(255,255,255,.66));
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

:is(#view-salaries .salary-row-card.is-owed, #view-salaries .salary-row-card.is-credit) .salary-row-amount {
    background: color-mix(in srgb, var(--salary-row-tint) 46%, var(--theme-glass, rgba(255,255,255,.75)));
}

:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list {
    display: grid;
    gap: 6px;
    padding: 5px;
}

:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-day-divider { min-height: 34px; margin: 4px 3px 1px; padding: 5px 9px; border-radius: 10px; color: var(--ui-blue); background: color-mix(in srgb, var(--ui-blue) 9%, var(--ui-surface-strong)); }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-day-count { padding: 4px 8px; border-radius: 999px; background: var(--ui-surface-strong); }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-row { min-height: 62px; display: grid; grid-template-columns: 27px 40px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0 3px; padding: 9px 11px; }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-num { width: 27px; height: 27px; border-radius: 9px; color: var(--work-tone); background: color-mix(in srgb, var(--work-tone) 10%, var(--ui-surface-strong)); }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-icon { width: 40px; height: 40px; border-radius: 12px; }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-title { font-size: 13px; font-weight: 850; }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-time { margin-top: 3px; font-size: 11.5px; }
:is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-amount { min-width: 108px; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--work-tone) 8%, var(--ui-surface-strong)); text-align: center; font-size: 12px; font-weight: 880; }

/* Correction documents use explicit accounting semantics: purple marks the
   superseded original, red the automatic reversal and green the valid entry. */
#view-sales .sale-history-record:is(.is-reversal,.is-replacement,.is-corrected) {
    border-color: color-mix(in srgb, var(--work-tone) 34%, var(--theme-stroke, rgba(255,255,255,.64)));
    background: linear-gradient(100deg, color-mix(in srgb, var(--work-tone) 9%, var(--theme-glass, rgba(255,255,255,.88))), var(--theme-glass, rgba(255,255,255,.72)));
    box-shadow:none;
}
#view-sales .sale-history-record:is(.is-reversal,.is-replacement,.is-corrected) .work-record-icon {
    color: var(--work-tone);
    background: color-mix(in srgb, var(--work-tone) 14%, var(--theme-glass, rgba(255,255,255,.86)));
}
#view-sales .sale-history-record:is(.is-reversal,.is-replacement,.is-corrected) .work-record-amount {
    color: var(--work-tone);
    background: color-mix(in srgb, var(--work-tone) 10%, var(--theme-glass, rgba(255,255,255,.8)));
}
#view-sales .sale-history-record.is-reversal .work-record-amount { text-decoration: line-through; text-decoration-thickness: 1.5px; }
#view-sales .sale-correction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: 8px;
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, var(--work-tone) 22%, transparent);
    border-radius: 999px;
    color: var(--work-tone);
    background: color-mix(in srgb, var(--work-tone) 10%, var(--theme-glass, rgba(255,255,255,.78)));
    font-size: 10.5px;
    font-weight: 850;
    white-space: nowrap;
}
#view-sales .sale-correction-reason {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: color-mix(in srgb, var(--work-tone) 78%, var(--text2));
    font-size: 10.5px;
    font-weight: 700;
}
/* The employee's note on a credit sale, in the sales list and the customer account */
.sale-note-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
}
.sale-note-line i {
    flex: none;
    font-size: 14px;
}
html[data-theme="dark"] #view-sales .sale-history-record:is(.is-reversal,.is-replacement,.is-corrected) {
    background: linear-gradient(100deg, color-mix(in srgb, var(--work-tone) 14%, rgba(22,28,48,.9)), rgba(25,31,52,.78));
}

/* One semantic record language for dashboards, journals and reports. */
.semantic-record .activity-row {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--record-tone) 28%, var(--theme-stroke, rgba(255,255,255,.7)));
    border-inline-start:1px solid var(--border);
    border-radius: 15px;
    background: linear-gradient(105deg, color-mix(in srgb, var(--record-tone) 8%, var(--theme-glass, rgba(255,255,255,.9))), var(--theme-glass, rgba(255,255,255,.7)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));
}
.semantic-record .activity-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--record-tone);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--record-tone) 16%, transparent);
}
.semantic-record-content { min-width:0; display:grid; gap:5px; }
.semantic-record-badge {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--record-tone);
    background: color-mix(in srgb, var(--record-tone) 11%, var(--theme-glass, rgba(255,255,255,.78)));
    font-size: 10.5px;
    font-weight: 850;
}
.semantic-record .activity-row-text { display:block; font-weight:800; line-height:1.65; }
.semantic-record .activity-row-when {
    min-width:116px;
    padding-inline-start:10px;
    border-inline-start:1px solid color-mix(in srgb, var(--record-tone) 22%, transparent);
}
.semantic-inline-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin-inline-start:6px;
    padding:3px 7px;
    border-radius:999px;
    color:var(--work-tone);
    background:color-mix(in srgb, var(--work-tone) 11%, var(--theme-glass, rgba(255,255,255,.78)));
    font-size:10.5px;
    font-weight:850;
}
.semantic-work-record {
    border-color:color-mix(in srgb, var(--work-tone) 28%, var(--theme-stroke, rgba(255,255,255,.7)));
    border-inline-start:1px solid var(--border);
    background:linear-gradient(105deg,color-mix(in srgb,var(--work-tone) 7%,var(--theme-glass, rgba(255,255,255,.9))),var(--theme-glass, rgba(255,255,255,.72)));
}
/* Existing employee, shift, till and report records already expose a semantic
   --work-tone; give them the same visual grammar without duplicating markup. */
.work-record-row[style*="--work-tone"] {
    border-inline-start:1px solid var(--border);
    background:linear-gradient(105deg,color-mix(in srgb,var(--work-tone) 7%,var(--theme-glass, rgba(255,255,255,.9))),var(--theme-glass, rgba(255,255,255,.72)));
}
.work-record-row[style*="--work-tone"] .work-record-icon {
    box-shadow:0 7px 16px color-mix(in srgb,var(--work-tone) 15%,transparent);
}
.ledger-card tbody tr:has(.ledger-status-cell.is-debt) { box-shadow:none; }
.ledger-card tbody tr:has(.ledger-status-cell.is-paid) { box-shadow:none; }
.ledger-card tbody tr:has(.ledger-status-cell.is-warning) { box-shadow:none; }
html[dir="ltr"] .ledger-card tbody tr:has(.ledger-status-cell.is-debt) { box-shadow:none; }
html[dir="ltr"] .ledger-card tbody tr:has(.ledger-status-cell.is-paid) { box-shadow:none; }
html[dir="ltr"] .ledger-card tbody tr:has(.ledger-status-cell.is-warning) { box-shadow:none; }
.semantic-work-record.record-reversal .work-record-amount { text-decoration:line-through; text-decoration-thickness:1.5px; }
html[data-theme="dark"] .semantic-record .activity-row {
    background: linear-gradient(105deg, color-mix(in srgb, var(--record-tone) 13%, rgba(22,28,48,.92)), rgba(25,31,52,.8));
}
html[data-theme="dark"] .semantic-work-record {
    background:linear-gradient(105deg,color-mix(in srgb,var(--work-tone) 12%,rgba(22,28,48,.92)),rgba(25,31,52,.8));
}
html[data-theme="dark"] .work-record-row[style*="--work-tone"] {
    background:linear-gradient(105deg,color-mix(in srgb,var(--work-tone) 12%,rgba(22,28,48,.92)),rgba(25,31,52,.8));
}
@media (max-width:620px) {
    .semantic-record .activity-row { grid-template-columns:38px minmax(0,1fr); }
    .semantic-record .activity-row-icon { width:38px; height:38px; }
    .semantic-record .activity-row-when { grid-column:2; display:flex; gap:7px; min-width:0; padding:0; border:0; }
}

/* ---------- sales details: dashboard-inspired calendar, storage bars and buyers ---------- */
#view-sales-details .sd-toolbar { align-items:stretch; }
#view-sales-details #sdModeTabs {
    flex:1 1 720px;
    display:grid;
    grid-template-columns:minmax(270px,.72fr) minmax(420px,1.28fr);
    gap:10px;
    padding:0;
    overflow:visible;
    background:transparent;
    box-shadow:none;
}
#view-sales-details .sd-period-presets {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    padding:6px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius:17px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(248,250,255,.82)),var(--theme-glass, rgba(221,229,243,.68)));
    box-shadow:0 10px 24px rgba(45,58,113,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}
#view-sales-details .sd-period-presets .filter-tab {
    min-height:58px;
    border:1px solid rgba(91,108,157,.13);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.58));
    font-weight:850;
}
#view-sales-details .sd-period-presets .filter-tab:hover { transform:translateY(-1px);border-color:rgba(83,111,232,.28); }
#view-sales-details .sd-period-presets .filter-tab.active { color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--ui-blue),#3F83CF);box-shadow:0 8px 17px rgba(63,108,207,.23); }
#view-sales-details .sd-range-card {
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:12px;
    padding:8px 10px;
    border:1px solid rgba(83,111,232,.18);
    border-radius:17px;
    background:radial-gradient(circle at 100% 0%,rgba(83,111,232,.12),transparent 45%),linear-gradient(145deg,var(--theme-glass, rgba(249,251,255,.88)),var(--theme-glass, rgba(224,232,247,.73)));
    box-shadow:0 10px 24px rgba(45,58,113,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ui-ease);
}
#view-sales-details .sd-range-card.active { border-color:rgba(83,111,232,.48);box-shadow:0 0 0 3px rgba(83,111,232,.1),0 12px 27px rgba(45,58,113,.12); }
#view-sales-details .sd-range-card-title { display:inline-flex;align-items:center;gap:7px;color:var(--text1);font-size:12px;font-weight:880;white-space:nowrap; }
#view-sales-details .sd-range-card-title i { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(145deg,var(--ui-blue),#3F83CF);box-shadow:0 6px 13px rgba(63,108,207,.24);font-size:16px; }
#view-sales-details .sd-range-fields { min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:end;gap:6px; }
#view-sales-details .sd-range-field { min-width:0;display:grid;gap:3px; }
#view-sales-details .sd-range-field small { padding-inline:4px;color:var(--text2);font-size:9.5px;font-weight:820; }
#view-sales-details .sd-range-field .date-picker-field { min-height:42px;padding:7px 10px;border-color:rgba(83,111,232,.18);border-radius:11px;background:var(--theme-glass, rgba(255,255,255,.72));font-size:11.5px;font-weight:820;cursor:pointer; }
#view-sales-details .sd-range-field .date-picker-field:hover,#view-sales-details .sd-range-field .date-picker-field.open { border-color:var(--ui-blue);box-shadow:0 0 0 3px rgba(83,111,232,.12); }
#view-sales-details .sd-range-field .date-picker-field.is-empty { color:var(--text2); }
#view-sales-details .sd-range-field .date-picker-field i { color:var(--ui-blue); }
#view-sales-details .sd-range-separator { width:24px;height:42px;display:grid;place-items:center;color:var(--ui-blue); }
#view-sales-details .sd-layout--full { grid-template-columns:minmax(0,1fr); }
.date-picker-popover.sales-range-date-popover.is-portal { border-color:rgba(83,111,232,.32);background:linear-gradient(145deg,var(--theme-glass, rgba(249,251,255,.99)),var(--theme-glass, rgba(220,230,249,.98)));box-shadow:0 20px 42px rgba(39,58,111,.24); }
.sales-range-date-popover .date-picker-month-label { color:var(--theme-ink, #3558B5);font-weight:880; }
.sales-range-date-popover .date-picker-day:hover { color:var(--theme-ink, #29499B);background:rgba(83,111,232,.14); }
.sales-range-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,var(--ui-blue),#3F83CF)!important;box-shadow:0 7px 14px rgba(63,108,207,.28)!important; }
.sales-range-date-popover .date-picker-today-btn { color:var(--theme-ink, #29499B);border-color:rgba(83,111,232,.24);background:rgba(83,111,232,.11); }
@media (max-width:1100px) {
    #view-sales-details #sdModeTabs { grid-template-columns:1fr; }
}
@media (max-width:650px) {
    #view-sales-details .sd-toolbar { display:grid; }
    #view-sales-details #sdModeTabs { display:grid;grid-template-columns:1fr; }
    #view-sales-details .sd-range-card { grid-template-columns:1fr;align-items:stretch; }
    #view-sales-details .sd-range-card-title { justify-content:flex-start; }
    #view-sales-details .sd-range-fields { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
}
@media (max-width:390px) {
    #view-sales-details .sd-range-fields { grid-template-columns:1fr; }
    #view-sales-details .sd-range-separator { width:100%;height:18px;transform:rotate(-90deg); }
}
@media (prefers-reduced-motion:reduce) {
    #view-sales-details :is(.sd-range-card,.sd-period-presets .filter-tab) { transition:none!important; }
}

/* Compact sales range controls: inherit the green/teal identity of this page. */
#view-sales-details .sd-toolbar { gap:8px;margin-bottom:12px; }
#view-sales-details #sdFuelTabs { min-height:54px;padding:4px;border-color:rgba(47,169,109,.18);background:linear-gradient(145deg,var(--theme-glass, rgba(248,253,251,.86)),var(--theme-glass, rgba(220,239,233,.68))); }
#view-sales-details #sdFuelTabs .filter-tab { min-height:44px;padding:7px 11px; }
#view-sales-details #sdModeTabs { grid-template-columns:minmax(230px,.66fr) minmax(390px,1.34fr);gap:8px; }
#view-sales-details .sd-period-presets { gap:5px;padding:4px;border-color:rgba(47,169,109,.2);border-radius:15px;background:linear-gradient(145deg,var(--theme-glass, rgba(248,253,251,.86)),var(--theme-glass, rgba(220,239,233,.7)));box-shadow:0 8px 19px rgba(36,96,76,.08),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
#view-sales-details .sd-period-presets .filter-tab { min-height:46px;padding:6px 9px;border-radius:10px; }
#view-sales-details .sd-period-presets .filter-tab:hover { border-color:rgba(47,169,109,.32); }
#view-sales-details .sd-period-presets .filter-tab.active { background:linear-gradient(135deg,var(--ui-tone),#2C9F89);box-shadow:0 7px 15px rgba(47,169,109,.24); }
#view-sales-details .sd-range-card { gap:8px;padding:5px 8px;border-color:rgba(47,169,109,.22);border-radius:15px;background:radial-gradient(circle at 100% 0%,rgba(47,169,109,.13),transparent 45%),linear-gradient(145deg,var(--theme-glass, rgba(249,253,252,.9)),var(--theme-glass, rgba(219,238,233,.74)));box-shadow:0 8px 19px rgba(36,96,76,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#view-sales-details .sd-range-card.active { border-color:rgba(47,169,109,.52);box-shadow:0 0 0 3px rgba(47,169,109,.1),0 9px 21px rgba(36,96,76,.11); }
#view-sales-details .sd-range-card-title { gap:5px;font-size:11px; }
#view-sales-details .sd-range-card-title i { width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,var(--ui-tone),#2C9F89);box-shadow:0 5px 11px rgba(47,169,109,.23);font-size:14px; }
#view-sales-details .sd-range-fields { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:4px; }
#view-sales-details .sd-range-field { gap:1px; }
#view-sales-details .sd-range-field small { font-size:8.5px;line-height:1.2; }
#view-sales-details .sd-range-field .date-picker-field { min-height:38px;padding:5px 8px;border-color:rgba(47,169,109,.2);border-radius:10px;font-size:10.5px; }
#view-sales-details .sd-range-field .date-picker-field:hover,#view-sales-details .sd-range-field .date-picker-field.open { border-color:var(--ui-tone);box-shadow:0 0 0 3px rgba(47,169,109,.12); }
#view-sales-details .sd-range-field .date-picker-field i,#view-sales-details .sd-range-separator { color:var(--ui-tone); }
#view-sales-details .sd-range-separator { width:18px;height:38px;font-size:13px; }
.date-picker-popover.sales-range-date-popover.is-portal { position:fixed;inset:auto;z-index:1000;border-color:rgba(47,169,109,.34);background:linear-gradient(145deg,var(--theme-glass, rgba(248,254,252,.99)),var(--theme-glass, rgba(211,239,230,.98)));box-shadow:0 20px 42px rgba(31,87,68,.24); }
.sales-range-date-popover .date-picker-month-label { color:var(--theme-ink, #16784F); }
.sales-range-date-popover .date-picker-nav { color:var(--theme-ink, #1C8E60);border-color:rgba(47,169,109,.25);background:var(--theme-glass, rgba(255,255,255,.78)); }
.sales-range-date-popover .date-picker-day:hover { color:var(--theme-ink, #126542);background:rgba(47,169,109,.14); }
.sales-range-date-popover.date-picker-popover.is-portal .date-picker-day.selected {
    color:#fff!important;
    background:linear-gradient(145deg,#087A4D,#075F3D)!important;
    box-shadow:0 7px 15px rgba(7,95,61,.34)!important;
    text-shadow:0 1px 1px rgba(0,0,0,.2);
    font-weight:900;
}
.sales-range-date-popover .date-picker-today-btn { color:var(--theme-ink, #126542);border-color:rgba(47,169,109,.25);background:rgba(47,169,109,.11); }
@media (max-width:1100px) {
    #view-sales-details #sdModeTabs { grid-template-columns:1fr; }
}

/* Expense details: compact coral date-range controls, matching the page identity. */
#view-expenses-details .sd-toolbar { align-items:stretch;gap:8px;margin-bottom:12px; }
#view-expenses-details #edCategoryTabs { min-height:54px;padding:4px;border-color:rgba(217,124,112,.2);background:linear-gradient(145deg,var(--theme-glass, rgba(255,250,249,.87)),var(--theme-glass, rgba(245,224,220,.7))); }
#view-expenses-details #edCategoryTabs .filter-tab { min-height:44px;padding:7px 10px; }
#view-expenses-details #edCategoryTabs .filter-tab.active { color:#fff;background:linear-gradient(135deg,#D97C70,#B9564B);box-shadow:0 7px 15px rgba(185,86,75,.24); }
#view-expenses-details #edModeTabs { flex:1 1 720px;display:grid;grid-template-columns:minmax(230px,.66fr) minmax(390px,1.34fr);gap:8px;padding:0;overflow:visible;background:transparent;box-shadow:none; }
#view-expenses-details .ed-period-presets { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;border:1px solid rgba(217,124,112,.2);border-radius:15px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,250,249,.87)),var(--theme-glass, rgba(245,224,220,.7)));box-shadow:0 8px 19px rgba(111,62,57,.08),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#view-expenses-details .ed-period-presets .filter-tab { min-height:46px;padding:6px 9px;border:1px solid rgba(181,91,79,.12);border-radius:10px;background:var(--theme-glass, rgba(255,255,255,.58));font-weight:850; }
#view-expenses-details .ed-period-presets .filter-tab:hover { transform:translateY(-1px);border-color:rgba(217,124,112,.34); }
#view-expenses-details .ed-period-presets .filter-tab.active { color:#fff;border-color:transparent;background:linear-gradient(135deg,#D97C70,#B9564B);box-shadow:0 7px 15px rgba(185,86,75,.24); }
#view-expenses-details .ed-range-card { min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:5px 8px;border:1px solid rgba(217,124,112,.23);border-radius:15px;background:radial-gradient(circle at 100% 0%,rgba(217,124,112,.14),transparent 45%),linear-gradient(145deg,var(--theme-glass, rgba(255,251,250,.91)),var(--theme-glass, rgba(244,224,220,.76)));box-shadow:0 8px 19px rgba(111,62,57,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.91));transition:border-color .2s ease,box-shadow .2s ease; }
#view-expenses-details .ed-range-card.active { border-color:rgba(185,86,75,.54);box-shadow:0 0 0 3px rgba(217,124,112,.11),0 9px 21px rgba(111,62,57,.11); }
#view-expenses-details .ed-range-card-title { display:inline-flex;align-items:center;gap:5px;color:var(--text1);font-size:11px;font-weight:880;white-space:nowrap; }
#view-expenses-details .ed-range-card-title i { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(145deg,#D97C70,#B9564B);box-shadow:0 5px 11px rgba(185,86,75,.24);font-size:14px; }
#view-expenses-details .ed-range-fields { min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:end;gap:4px; }
#view-expenses-details .ed-range-field { min-width:0;display:grid;gap:1px; }
#view-expenses-details .ed-range-field small { padding-inline:4px;color:var(--text2);font-size:8.5px;font-weight:820;line-height:1.2; }
#view-expenses-details .ed-range-field .date-picker-field { min-height:38px;padding:5px 8px;border-color:rgba(217,124,112,.21);border-radius:10px;background:var(--theme-glass, rgba(255,255,255,.73));font-size:10.5px;font-weight:820;cursor:pointer; }
#view-expenses-details .ed-range-field .date-picker-field:hover,#view-expenses-details .ed-range-field .date-picker-field.open { border-color:#D97C70;box-shadow:0 0 0 3px rgba(217,124,112,.13); }
#view-expenses-details .ed-range-field .date-picker-field.is-empty { color:var(--text2); }
#view-expenses-details .ed-range-field .date-picker-field i,#view-expenses-details .ed-range-separator { color:var(--theme-ink, #C46257); }
#view-expenses-details .ed-range-separator { width:18px;height:38px;display:grid;place-items:center;font-size:13px; }
#view-expenses-details .ed-layout--full { grid-template-columns:minmax(0,1fr); }
.date-picker-popover.expense-range-date-popover.is-portal { position:fixed;inset:auto;z-index:1000;border-color:rgba(217,124,112,.36);background:linear-gradient(145deg,var(--theme-glass, rgba(255,251,250,.99)),var(--theme-glass, rgba(247,220,215,.98)));box-shadow:0 20px 42px rgba(103,54,49,.25); }
.expense-range-date-popover .date-picker-month-label { color:var(--theme-ink, #A9443A);font-weight:880; }
.expense-range-date-popover .date-picker-nav { color:var(--theme-ink, #B9564B);border-color:rgba(217,124,112,.27);background:var(--theme-glass, rgba(255,255,255,.79)); }
.expense-range-date-popover .date-picker-nav:hover { border-color:#D97C70;background:rgba(217,124,112,.13); }
.expense-range-date-popover .date-picker-day:hover { color:var(--theme-ink, #963C33);background:rgba(217,124,112,.15); }
.expense-range-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,#B94F43,#93372F)!important;box-shadow:0 7px 15px rgba(147,55,47,.35)!important;text-shadow:0 1px 1px rgba(0,0,0,.2);font-weight:900; }
.expense-range-date-popover .date-picker-today-btn { color:var(--theme-ink, #963C33);border-color:rgba(217,124,112,.27);background:rgba(217,124,112,.12); }
@media (max-width:1100px) { #view-expenses-details #edModeTabs { grid-template-columns:1fr; } }
@media (max-width:650px) { #view-expenses-details .sd-toolbar { display:grid; }#view-expenses-details #edModeTabs { display:grid;grid-template-columns:1fr; }#view-expenses-details .ed-range-card { grid-template-columns:1fr;align-items:stretch; }#view-expenses-details .ed-range-card-title { justify-content:flex-start; }#view-expenses-details .ed-range-fields { grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); } }
@media (max-width:390px) { #view-expenses-details .ed-range-fields { grid-template-columns:1fr; }#view-expenses-details .ed-range-separator { width:100%;height:18px;transform:rotate(-90deg); } }
@media (prefers-reduced-motion:reduce) { #view-expenses-details :is(.ed-range-card,.ed-period-presets .filter-tab) { transition:none!important; } }

/* Report details: compact shared period controls with per-report color identity. */
#mainContent .reports-layout--full {
    grid-template-columns:minmax(0,1fr);
    gap:14px;
}

#mainContent .reports-period-controls {
    --report-tone:var(--reports-context-tone);
    --report-tint:var(--reports-context-bg);
    min-width:0;
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(460px,1.28fr);
    gap:9px;
    margin-bottom:0;
}

#mainContent .reports-period-presets {
    min-width:0;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    padding:5px;
    border:1px solid color-mix(in srgb,var(--report-tone) 20%,var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius:15px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.82)),color-mix(in srgb,var(--report-tint) 58%,var(--theme-glass, rgba(225,233,247,.7))));
    box-shadow:0 8px 20px color-mix(in srgb,var(--report-tone) 9%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

#mainContent .reports-period-presets .filter-tab {
    min-width:0;
    min-height:46px;
    padding:6px 7px;
    border:1px solid color-mix(in srgb,var(--report-tone) 12%,transparent);
    border-radius:10px;
    background:var(--theme-glass, rgba(255,255,255,.58));
    font-weight:850;
    transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

#mainContent .reports-period-presets .filter-tab:hover { transform:translateY(-1px);border-color:color-mix(in srgb,var(--report-tone) 36%,transparent); }
#mainContent .reports-period-presets .filter-tab.active {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--report-tone),color-mix(in srgb,var(--report-tone) 76%,#14213d));
    box-shadow:0 7px 15px color-mix(in srgb,var(--report-tone) 28%,transparent);
}

#mainContent .reports-range-card {
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:5px 8px;
    border:1px solid color-mix(in srgb,var(--report-tone) 22%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:15px;
    background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--report-tone) 13%,transparent),transparent 46%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.86)),color-mix(in srgb,var(--report-tint) 62%,var(--theme-glass, rgba(224,232,246,.72))));
    box-shadow:0 8px 20px color-mix(in srgb,var(--report-tone) 10%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    transition:border-color .2s ease,box-shadow .2s ease;
}

#mainContent .reports-range-card.active { border-color:color-mix(in srgb,var(--report-tone) 58%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--report-tone) 11%,transparent),0 9px 21px color-mix(in srgb,var(--report-tone) 13%,transparent); }
#mainContent .reports-range-title { display:inline-flex;align-items:center;gap:5px;color:var(--text1);font-size:11px;font-weight:880;white-space:nowrap; }
#mainContent .reports-range-title i { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:linear-gradient(145deg,var(--report-tone),color-mix(in srgb,var(--report-tone) 76%,#14213d));box-shadow:0 5px 11px color-mix(in srgb,var(--report-tone) 27%,transparent);font-size:14px; }
#mainContent .reports-range-fields { min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);align-items:end;gap:4px; }
#mainContent .reports-range-field { min-width:0;display:grid;gap:1px; }
#mainContent .reports-range-field small { padding-inline:4px;color:var(--text2);font-size:8.5px;font-weight:820;line-height:1.2; }
#mainContent .reports-range-field .date-picker-field { min-height:38px;padding:5px 8px;border-color:color-mix(in srgb,var(--report-tone) 21%,transparent);border-radius:10px;background:var(--theme-glass, rgba(255,255,255,.73));font-size:10.5px;font-weight:820;cursor:pointer; }
#mainContent .reports-range-field .date-picker-field:is(:hover,.open) { border-color:var(--report-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--report-tone) 13%,transparent); }
#mainContent .reports-range-field .date-picker-field.is-empty { color:var(--text2); }
#mainContent .reports-range-field .date-picker-field i,
#mainContent .reports-range-separator { color:var(--report-tone); }
#mainContent .reports-range-separator { width:18px;height:38px;display:grid;place-items:center;font-size:13px; }

.date-picker-popover.reports-range-date-popover.is-portal { position:fixed;inset:auto;z-index:1000;border-color:color-mix(in srgb,var(--report-tone) 38%,transparent);background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.99)),color-mix(in srgb,var(--report-tint) 78%,var(--theme-glass, rgba(232,238,249,.98))));box-shadow:0 20px 42px color-mix(in srgb,var(--report-tone) 24%,rgba(28,39,73,.18)); }
.reports-range-date-popover .date-picker-month-label { color:color-mix(in srgb,var(--report-tone) 82%,var(--theme-ink, #17213a));font-weight:880; }
.reports-range-date-popover .date-picker-nav { color:var(--report-tone);border-color:color-mix(in srgb,var(--report-tone) 27%,transparent);background:var(--theme-glass, rgba(255,255,255,.8)); }
.reports-range-date-popover .date-picker-nav:hover { border-color:var(--report-tone);background:color-mix(in srgb,var(--report-tone) 13%,var(--theme-glass, rgba(255,255,255,.8))); }
.reports-range-date-popover .date-picker-day:hover { color:color-mix(in srgb,var(--report-tone) 78%,var(--theme-ink, #111827));background:color-mix(in srgb,var(--report-tone) 15%,transparent); }
.reports-range-date-popover.date-picker-popover.is-portal .date-picker-day.selected { color:#fff!important;background:linear-gradient(145deg,color-mix(in srgb,var(--report-tone) 88%,#111827),color-mix(in srgb,var(--report-tone) 68%,#111827))!important;box-shadow:0 7px 15px color-mix(in srgb,var(--report-tone) 38%,transparent)!important;text-shadow:0 1px 1px rgba(0,0,0,.22);font-weight:900; }
.reports-range-date-popover .date-picker-today-btn { color:color-mix(in srgb,var(--report-tone) 82%,var(--theme-ink, #17213a));border-color:color-mix(in srgb,var(--report-tone) 28%,transparent);background:color-mix(in srgb,var(--report-tone) 12%,var(--theme-glass, rgba(255,255,255,.72))); }

@media (max-width:1100px) { #mainContent .reports-period-controls { grid-template-columns:1fr; } }
@media (max-width:650px) {
    #mainContent .reports-period-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #mainContent .reports-range-card { grid-template-columns:1fr;align-items:stretch; }
    #mainContent .reports-range-fields { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); }
}
@media (max-width:390px) { #mainContent .reports-range-fields { grid-template-columns:1fr; }#mainContent .reports-range-separator { width:100%;height:16px;transform:rotate(-90deg); } }
@media (prefers-reduced-motion:reduce) { #mainContent :is(.reports-range-card,.reports-period-presets .filter-tab) { transition:none!important; } }
:is(#view-sales-details, #view-expenses-details) :is(#sdSummaryRow, #edSummaryRow) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card {
    --summary-tone: var(--ui-blue);
    --summary-bg: rgba(83,111,232,.13);
    position: relative;
    min-height: 92px;
    overflow: hidden;
    align-items: center;
    padding: 15px 16px;
    border-color: color-mix(in srgb, var(--summary-tone) 18%, var(--theme-stroke, rgba(255,255,255,.66)));
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--summary-tone) 18%, transparent), transparent 32%),
        linear-gradient(145deg, var(--theme-glass, rgba(248,250,255,.86)), var(--theme-glass, rgba(224,232,246,.74)));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--summary-tone) 9%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
    animation: uiSurfaceEnter .34s var(--ui-ease) both;
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 15px;
    bottom: 15px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--summary-tone) 66%, var(--theme-surface, #fff)), var(--summary-tone));
    box-shadow: 0 0 14px color-mix(in srgb, var(--summary-tone) 42%, transparent);
;display:none!important;}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card::after {
    content: '';
    position: absolute;
    inset: auto -22px -42px auto;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--summary-tone) 9%, transparent);
    pointer-events: none;
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--summary-tone) 33%, var(--theme-stroke, rgba(255,255,255,.68)));
    box-shadow: 0 19px 42px color-mix(in srgb, var(--summary-tone) 15%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card .metric-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--summary-tone) 16%, var(--theme-stroke, rgba(255,255,255,.78)));
    color: var(--summary-tone);
    background: color-mix(in srgb, var(--summary-tone) 11%, var(--theme-glass, rgba(255,255,255,.76)));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--summary-tone) 13%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.76));
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card .metric-icon::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid color-mix(in srgb, var(--summary-tone) 18%, transparent);
    border-radius: 10px;
    animation: summaryIconPulse 2.4s ease-in-out infinite;
}

:is(#view-sales-details, #view-expenses-details) .sd-summary-card .metric-icon i { position: relative; z-index: 1; font-size: 22px; }
:is(#view-sales-details, #view-expenses-details) .sd-summary-copy { position: relative; z-index: 1; min-width: 0; }
:is(#view-sales-details, #view-expenses-details) .sd-summary-card .metric-label { font-size: 12.5px; font-weight: 820; }
:is(#view-sales-details, #view-expenses-details) .sd-summary-card .metric-value { color: var(--text1); font-size: 20px; font-weight: 900; line-height: 1.25; }

#view-sales-details .sd-rate-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 7px;
}

#view-sales-details .sd-summary-card--rates {
    align-items: flex-start;
}

#view-sales-details .sd-summary-card--rates .metric-icon {
    width: 38px;
    height: 38px;
}

#view-sales-details .sd-summary-card--rates .sd-summary-copy {
    width: 100%;
}

#view-sales-details .sd-rate-chip {
    --rate-tone: var(--petrol);
    --rate-bg: var(--petrol-bg);
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr) auto;
    align-items: center;
    gap: 5px;
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--rate-tone) 16%, var(--theme-stroke, rgba(255,255,255,.64)));
    border-radius: 10px;
    background: color-mix(in srgb, var(--rate-tone) 8%, var(--theme-glass, rgba(255,255,255,.62)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.62));
    animation: uiSurfaceEnter .32s var(--ui-ease) both;
}

#view-sales-details .sd-rate-chip-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--rate-tone);
    background: var(--rate-bg);
}

#view-sales-details .sd-rate-chip-copy {
    min-width: 0;
    display: contents;
}

#view-sales-details .sd-rate-chip-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text2);
    font-size: 10.5px;
    font-weight: 800;
}

#view-sales-details .sd-rate-chip-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rate-tone);
    font-size: 12.5px;
    font-weight: 900;
    text-align: end;
}

@keyframes summaryIconPulse {
    0%, 100% { opacity: .35; transform: scale(.92); }
    50% { opacity: .8; transform: scale(1); }
}

:is(#view-sales-details, #view-expenses-details) .sd-nav-card {
    padding: 16px;
    border-color: var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(circle at 84% 0%, rgba(83,111,232,.14), transparent 34%),
        linear-gradient(145deg, var(--theme-glass, rgba(248,250,255,.84)), var(--theme-glass, rgba(221,229,243,.72)));
    box-shadow: 0 18px 42px rgba(45,58,113,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}

:is(#view-sales-details, #view-expenses-details) .sd-calendar-kicker {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 7px 10px;
    border-radius: 12px;
    color: var(--text2);
    background: var(--theme-glass, rgba(255,255,255,.6));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
    font-size: 11.5px;
    font-weight: 800;
}

:is(#view-sales-details, #view-expenses-details) .sd-calendar-kicker i { color: var(--ui-violet); font-size: 16px; }
:is(#view-sales-details, #view-expenses-details) .sd-calendar-panel { display: grid; gap: 8px; }

:is(#view-sales-details, #view-expenses-details) .sd-nav-header {
    min-height: 38px;
    margin-bottom: 0;
    padding: 3px;
    border-radius: 13px;
    background: var(--theme-glass, rgba(255,255,255,.48));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.74));
}

:is(#view-sales-details, #view-expenses-details) .sd-nav-year,
:is(#view-sales-details, #view-expenses-details) .sd-nav-month {
    color: var(--text1);
    font-size: 14px;
    font-weight: 880;
}

:is(#view-sales-details, #view-expenses-details) .date-picker-nav {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border-color: rgba(83,111,232,.18);
    background: var(--theme-glass, rgba(255,255,255,.73));
}

:is(#view-sales-details, #view-expenses-details) .date-picker-nav:hover:not(:disabled),
:is(#view-sales-details, #view-expenses-details) .date-picker-nav:focus-visible {
    color: var(--ui-violet);
    border-color: rgba(83,111,232,.38);
    box-shadow: 0 7px 15px rgba(83,111,232,.14);
}

:is(#view-sales-details, #view-expenses-details) .date-picker-weekdays {
    margin: 4px 0 2px;
    color: var(--text2);
    font-size: 11.5px;
    font-weight: 850;
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-grid {
    gap: 4px;
    margin-bottom: 0;
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell,
:is(#view-sales-details, #view-expenses-details) .sd-year-cell {
    border: 1px solid transparent;
    border-radius: 11px;
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--ui-ease);
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell {
    min-height: 34px;
    padding: 3px 0;
    font-weight: 800;
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell.has-sales:not(.today) {
    color: var(--ui-blue);
    background: rgba(83,111,232,.08);
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell:hover,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell:hover,
:is(#view-sales-details, #view-expenses-details) .sd-year-cell:hover,
:is(#view-sales-details, #view-expenses-details) .sd-cal-cell:focus-visible,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell:focus-visible,
:is(#view-sales-details, #view-expenses-details) .sd-year-cell:focus-visible {
    outline: 0;
    color: var(--ui-violet);
    border-color: rgba(118,89,232,.2);
    background: rgba(118,89,232,.1);
    transform: translateY(-1px);
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell.today,
:is(#view-sales-details, #view-expenses-details) .sd-cal-cell.is-picked,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell.active,
:is(#view-sales-details, #view-expenses-details) .sd-year-cell.active {
    color: #fff;
    border-color: var(--theme-stroke, rgba(255,255,255,.72));
    background: linear-gradient(145deg, #8068E9, #526CE7);
    box-shadow: 0 8px 17px rgba(87,91,218,.24), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell .dot,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell .dot {
    width: 5px;
    height: 5px;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(43,180,111,.12);
}

:is(#view-sales-details, #view-expenses-details) .sd-cal-cell.today .dot,
:is(#view-sales-details, #view-expenses-details) .sd-month-cell.active .dot { background: var(--theme-surface, #fff); box-shadow: none; }

:is(#view-sales-details #sdChartCard, #view-expenses-details #edChartCard) {
    overflow: hidden;
    border-color: var(--theme-stroke, rgba(255,255,255,.72));
    background:
        radial-gradient(circle at 13% 12%, rgba(43,180,111,.1), transparent 28%),
        linear-gradient(145deg, var(--theme-glass, rgba(248,250,255,.86)), var(--theme-glass, rgba(222,230,244,.72)));
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-wrap {
    padding: 12px 4px 0;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-chart {
    min-width: max(100%, calc(var(--sdbar-count, 31) * 28px));
    height: 268px;
    display: grid;
    grid-template-columns: repeat(var(--sdbar-count, 31), minmax(22px, 1fr));
    align-items: end;
    gap: 5px;
    padding: 0 8px 12px;
    border-bottom: 1px solid rgba(101,121,201,.18);
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-col {
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-inline: 2px;
    border-radius: 12px 12px 4px 4px;
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-col.is-selected {
    background: linear-gradient(180deg, rgba(83,111,232,.13), rgba(83,111,232,.04));
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-stack {
    width: 76%;
    max-width: 28px;
    min-width: 10px;
    min-height: 18px;
    border-radius: 999px 999px 6px 6px;
    background: rgba(83,111,232,.12);
    box-shadow: 0 5px 12px rgba(40,67,132,.14), inset 0 1px 3px rgba(20,30,62,.12);
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-seg {
    position: relative;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sdbar-color, var(--ui-tone)) 66%, var(--theme-surface, #fff)), var(--sdbar-color, var(--ui-tone)));
    box-shadow: inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.32));
}

#view-sales-details #sdChart .sdbar-seg.fuel-petrol {
    background: linear-gradient(90deg, #ffb648, #ff8f1f);
    box-shadow: 0 0 10px rgba(255,150,20,.45), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.34));
}

#view-sales-details #sdChart .sdbar-seg.fuel-diesel {
    background: linear-gradient(90deg, #3fd383, #17a866);
    box-shadow: 0 0 10px rgba(30,190,110,.42), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.3));
}

#view-sales-details #sdChart .sdbar-seg.fuel-cng {
    background: linear-gradient(90deg, #57b0ff, #2478e0);
    box-shadow: 0 0 10px rgba(45,140,255,.42), inset 0 1px 2px var(--theme-highlight, rgba(255,255,255,.3));
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-seg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 42%, var(--theme-highlight, rgba(255,255,255,.28)) 50%, transparent 58%);
    transform: translateX(100%);
    animation: tankCapsuleShimmer 5.6s ease-in-out infinite;
    animation-delay: calc(1s + var(--sdbar-delay, 0ms));
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-value,
:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-day-pill {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.62));
    background: var(--theme-glass, rgba(255,255,255,.74));
    box-shadow: 0 5px 12px rgba(37,50,102,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8));
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-days {
    min-width: max(100%, calc(var(--sdbar-count, 31) * 28px));
    display: grid;
    grid-template-columns: repeat(var(--sdbar-count, 31), minmax(22px, 1fr));
    gap: 5px;
    margin-top: 8px;
    padding: 0 8px;
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-day {
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    text-align: center;
    line-height: 22px;
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-day-pill {
    display: inline-flex;
    min-width: 24px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    line-height: 1;
}

:is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-day-pill {
    color: #fff;
    background: linear-gradient(135deg, #526CE7, #8068E9);
}

:is(#view-sales-details, #view-expenses-details) .trend-chart-legend {
    justify-content: flex-end;
    padding: 8px 10px 0;
}

:is(#view-sales-details, #view-expenses-details) .trend-legend-dot {
    width: 9px;
    height: 9px;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

:is(#view-sales-details #sdCustomersCard, #view-expenses-details #edBreakdownCard) {
    overflow: hidden;
}

:is(#view-sales-details #sdCustomersList, #view-expenses-details #edBreakdownList) {
    display: grid;
    gap: 7px;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-row {
    display: grid;
    grid-template-columns: 30px 42px minmax(0,1fr) auto;
    gap: 10px;
    min-height: 66px;
    padding: 10px;
    border-bottom: 0;
    --buyer-tone: var(--ui-violet);
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-row::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 999px;
    background: var(--buyer-tone);
;display:none!important;}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-rank {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--buyer-tone) 10%, var(--ui-surface-strong));
    color: var(--buyer-tone);
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-avatar {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--buyer-tone) 18%, var(--ui-stroke-strong));
    background: color-mix(in srgb, var(--buyer-tone) 11%, var(--ui-surface-strong));
    color: var(--buyer-tone);
    font-weight: 880;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    font-weight: 850;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 750;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-meta i { color: var(--buyer-tone); font-size: 14px; }

:is(#view-sales-details, #view-expenses-details) .sd-buyer-meter {
    height: 5px;
    margin-top: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--buyer-tone) 8%, var(--ui-surface-soft));
    overflow: hidden;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-meter span {
    display: block;
    width: var(--buyer-share, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--buyer-tone) 66%, var(--theme-surface, #fff)), var(--buyer-tone));
    animation: uiBarGrow .55s var(--ui-ease) both;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-value {
    min-width: 118px;
    padding: 7px 9px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--buyer-tone) 7%, var(--ui-surface-strong));
    text-align: center;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-revenue {
    color: var(--text1);
    font-size: 13px;
    font-weight: 880;
}

:is(#view-sales-details, #view-expenses-details) .sd-buyer-amount {
    margin-top: 3px;
    color: var(--text2);
    font-weight: 750;
}

@keyframes uiBarGrow {
    from { transform: scaleX(0); transform-origin: right; }
    to { transform: scaleX(1); transform-origin: right; }
}

@media (max-width: 700px) {
    #view-finance .finance-feed-row { grid-template-columns: 25px 38px minmax(0, 1fr); }
    #view-finance .finance-feed-icon { width: 38px; height: 38px; }
    #view-finance .finance-feed-amount { grid-column: 3; justify-self: start; min-width: 0; }
    #view-salaries #salariesSummaryRow { grid-template-columns: 1fr; }
    #view-salaries .salary-summary-card { min-height: 86px; }
    #view-salaries .salary-row-card { grid-template-columns: 28px 40px minmax(0,1fr); }
    #view-salaries .salary-row-avatar { width: 40px; height: 40px; }
    #view-salaries .salary-row-status,
    #view-salaries .salary-row-amount { grid-column: 3; justify-self: start; min-width: 0; }
    :is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-row { grid-template-columns: 25px 38px minmax(0, 1fr); }
    :is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-icon { width: 38px; height: 38px; }
    :is(#view-sales, #view-sales-details, #view-expenses, #view-expenses-details) .work-record-list .work-record-amount { grid-column: 3; justify-self: start; min-width: 0; }
    :is(#view-sales-details #sdSummaryRow, #view-expenses-details #edSummaryRow) { grid-template-columns: 1fr; }
    :is(#view-sales-details, #view-expenses-details) .sd-summary-card { min-height: 86px; }
    :is(#view-sales-details, #view-expenses-details) .sd-buyer-row { grid-template-columns: 28px 40px minmax(0,1fr); }
    :is(#view-sales-details, #view-expenses-details) .sd-buyer-value { grid-column: 3; justify-self: start; min-width: 0; }
    :is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-chart,
    :is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-days {
        min-width: max(100%, calc(var(--sdbar-count, 31) * 25px));
        gap: 3px;
        padding-inline: 2px;
    }
    :is(#view-sales-details #sdChart, #view-expenses-details #edChart) .sdbar-chart { height: 220px; }
}

/* ---------- empty, notice and status states ---------- */
#mainContent :is(.empty, .empty-state-text, .acct-ledger-empty, .task-empty, .sales-hero-empty, .ledger-empty-cell) {
    border: 1px dashed color-mix(in srgb, var(--ui-tone) 25%, var(--ui-stroke-strong));
    border-radius: 16px;
    padding-right: 10px;
    color: var(--text2);
    background: color-mix(in srgb, var(--ui-tone) 5%, var(--theme-highlight, rgba(255,255,255,.28)));
}

#mainContent :is(.alert-row, .handover-outstanding-note, .work-record-filter-active),
.overlay .modal :is(.form-required-notice, .field-error-msg, .handover-outstanding-note) {
    border-radius: 13px;
    box-shadow: 0 8px 20px rgba(38,49,91,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.54));
}

#mainContent :is(.balance-pill, .sale-badge, .employee-status, .salary-status-badge, .leave-status-badge, .finance-profit-status-badge) {
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.58));
    border-radius: 999px;
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.58));
    font-weight: 800;
}

/* ---------- motion ---------- */
.profile-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.profile-action-grid .profile-action-card { position:relative; overflow:hidden; animation:profile-card-arrive .55s cubic-bezier(.22,1,.36,1) var(--card-delay,0ms) backwards; transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease; }
.profile-action-grid .profile-action-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.28) 48%,transparent 70%); transform:translateX(-120%); transition:transform .65s ease; }
.profile-action-grid .profile-action-card:hover::after,.profile-action-grid .profile-action-card:focus-visible::after { transform:translateX(120%); }
.profile-action-grid .profile-action-card:active { transform:translateY(-1px) scale(.98); }
.profile-action-grid .profile-action-icon { transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .3s ease; }
.profile-action-grid .profile-action-card:hover .profile-action-icon { transform:translateY(-2px) scale(1.09) rotate(-5deg); box-shadow:0 8px 22px color-mix(in srgb,var(--profile-tone) 28%,transparent); }
.profile-action-grid .profile-card--logout { --profile-tone:#dc5263; }
#authLogoutBtn[hidden] { display:none !important; }
#authAccountBtn.has-employee-photo { padding:3px; overflow:hidden; }
#authAccountBtn.has-employee-photo img { display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.employee-profile-logout { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border:1px solid color-mix(in srgb,#dc5263 28%,var(--theme-stroke)); border-radius:18px; background:color-mix(in srgb,#dc5263 9%,var(--theme-glass)); color:var(--text1); cursor:pointer; font:inherit; transition:transform .25s ease,box-shadow .25s ease; }
.employee-profile-logout span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#dc5263; color:white; font-size:22px; }
.employee-profile-logout:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(220,82,99,.18); }
.employee-profile-logout:focus-visible { outline:3px solid #dc5263; outline-offset:3px; }
.employee-profile-logout:disabled { opacity:.6; cursor:wait; }
.employee-profile-navigation{display:flex;align-items:center;margin-bottom:12px}.employee-profile-dashboard-back{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 16px;border:1px solid color-mix(in srgb,var(--accent-solid) 28%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--panel) 91%,var(--accent-solid) 9%);color:var(--text1);box-shadow:0 8px 22px color-mix(in srgb,var(--accent-solid) 9%,transparent);cursor:pointer;font:inherit;font-size:12px;font-weight:900;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}.employee-profile-dashboard-back i{font-size:18px;color:var(--accent-solid)}.employee-profile-dashboard-back:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--accent-solid) 55%,var(--border));background:color-mix(in srgb,var(--panel) 82%,var(--accent-solid) 18%);box-shadow:0 10px 26px color-mix(in srgb,var(--accent-solid) 15%,transparent);transform:translateY(-1px)}.employee-profile-dashboard-back:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-solid) 35%,transparent);outline-offset:3px}
@media(max-width:700px) { .employee-profile-reference-header { flex-wrap:wrap; }.employee-profile-logout { padding:9px 12px; } }
@media(prefers-reduced-motion:reduce) { .employee-profile-logout { transition:none; }.employee-profile-logout:hover { transform:none; } }
@media(max-width:640px){.employee-profile-navigation{margin-bottom:10px}.employee-profile-dashboard-back{width:100%;min-height:48px}}
@media(prefers-reduced-motion:reduce){.employee-profile-dashboard-back{transition:none}.employee-profile-dashboard-back:is(:hover,:focus-visible){transform:none}}
.profile-card--logout .profile-action-copy strong { color:color-mix(in srgb,var(--profile-tone) 80%,var(--text1)); }
.profile-action-card[aria-busy='true'] { opacity:.65; cursor:wait; }
@keyframes profile-card-arrive { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce) { .profile-action-grid .profile-action-card,.profile-action-grid .profile-action-icon { animation:none; transition:none; }.profile-action-grid .profile-action-card::after { display:none; }.profile-action-grid .profile-action-card:hover .profile-action-icon { transform:none; } }
.profile-action-card { --profile-tone:var(--ui-blue,#5574e7); min-height:124px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; width:100%; padding:14px 6px; border:1px solid color-mix(in srgb,var(--profile-tone) 16%,var(--theme-stroke, rgba(255,255,255,.78))); border-radius:18px; color:var(--text1); background:linear-gradient(135deg,color-mix(in srgb,var(--profile-tone) 12%,var(--theme-glass, rgba(255,255,255,.9))),var(--theme-glass, rgba(255,255,255,.56))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)),0 6px 18px rgba(39,55,108,.06); text-align:center; cursor:pointer; transition:transform .2s var(--ui-ease),box-shadow .2s ease,border-color .2s ease; }
.profile-action-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--profile-tone) 42%,var(--ui-stroke-strong)); box-shadow:0 17px 30px color-mix(in srgb,var(--profile-tone) 18%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8)); }
.profile-action-card:focus-visible { outline:3px solid color-mix(in srgb,var(--profile-tone) 35%,transparent); outline-offset:3px; }
.profile-card--blue { --profile-tone:#4f71e8; }.profile-card--violet { --profile-tone:#7759d8; }.profile-card--green { --profile-tone:#22a56d; }.profile-card--cyan { --profile-tone:#218bb6; }.profile-card--amber { --profile-tone:#c9851c; }
.profile-action-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--profile-tone); font-size:24px; box-shadow:0 8px 15px color-mix(in srgb,var(--profile-tone) 27%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35)); transition:transform .2s var(--ui-ease); }
.profile-action-card:hover .profile-action-icon { transform:scale(1.08); }.profile-action-copy { min-width:0; }.profile-action-copy strong { color:var(--text1); font-size:13px; font-weight:800; line-height:1.65; }.profile-action-copy small,.profile-action-arrow { display:none; }
.profile-back-btn { margin-bottom:14px; }.profile-detail-card { max-width:1060px; }.profile-settings-form .station-form-section { margin-top:22px; padding-top:20px; border-top:1px solid var(--ui-stroke-strong); }.profile-settings-form .station-form-section h2 { margin:0 0 14px; color:var(--text1); font-size:15px; font-weight:900; }.station-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.station-fields--three { grid-template-columns:repeat(3,minmax(0,1fr)); }.station-fields .field { margin:0; }.station-fields .field span { display:block; margin-bottom:7px; font-size:12px; font-weight:800; color:var(--text2); }.station-fields input.ltr { direction:ltr; text-align:left; }.profile-save-row { display:flex; justify-content:flex-start; margin-top:24px; }.logo-file-note { margin:-4px 0 12px; color:var(--text2); font-size:12px; font-weight:700; }

/* ---------- main profile: cash-custody role and employee access ---------- */
.profile-access-page { position:relative; isolation:isolate; display:grid; gap:16px; max-width:1060px; }
.profile-access-page .profile-detail-card { max-width:none; }
.till-role-settings-card,
.employee-access-settings-card {
    position:relative;
    overflow:visible;
    padding:18px;
    border-color:var(--theme-stroke, rgba(255,255,255,.82));
    background:radial-gradient(circle at 100% 0%,rgba(98,105,229,.13),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(222,232,249,.56)));
    box-shadow:0 16px 34px rgba(38,49,97,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
.profile-access-page:has(.till-attendant-select-control.is-open) .till-role-settings-card { z-index:100; }
.profile-access-page:has(.till-attendant-select-control.is-open) .employee-access-settings-card { z-index:1; }
.employee-access-settings-card { background:radial-gradient(circle at 100% 0%,rgba(88,115,230,.11),transparent 36%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(226,234,250,.55))); }
.profile-access-card-head { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-access-card-head .section-title-icon { margin:0; color:var(--text1); font-size:15px; font-weight:900; }
.profile-access-card-head .section-title-icon > i { color:#fff; background:linear-gradient(145deg,#8872ec,#5b66df); box-shadow:0 7px 15px rgba(93,102,223,.24); }
.profile-access-head-badge,.profile-access-count { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:5px 9px; border-radius:10px; color:var(--theme-ink, #5263c9); background:rgba(92,105,223,.1); font-size:11px; font-weight:800; white-space:nowrap; }
.profile-access-count { min-width:28px; justify-content:center; color:#fff; background:linear-gradient(145deg,#8670e8,#5966dd); box-shadow:0 5px 11px rgba(91,102,221,.24); }
.till-role-settings-card .backup-sub { margin:6px 0 17px; line-height:1.7; }
.till-attendant-field { position:relative; z-index:1; margin:0; }
.till-attendant-field:has(.till-attendant-select-control.is-open) { z-index:20; }
.till-attendant-field > label { display:block; margin:0 0 7px; color:var(--text2); font-size:12px; font-weight:800; }
.till-attendant-select-control { position:relative; }
.till-attendant-select-control > select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; clip-path:inset(50%); }
.till-attendant-select-trigger { width:100%; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 11px; border:1px solid rgba(99,111,226,.25); border-radius:16px; color:var(--text1); background:var(--theme-glass, rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); cursor:pointer; text-align:start; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.till-attendant-select-trigger:hover,.till-attendant-select-control.is-open .till-attendant-select-trigger { border-color:#6875e5; background:var(--theme-glass, rgba(255,255,255,.9)); box-shadow:0 0 0 3px rgba(102,116,229,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }
.till-attendant-select-trigger:focus-visible { outline:3px solid rgba(102,116,229,.26); outline-offset:2px; }
.till-attendant-trigger-person { min-width:0; display:flex; align-items:center; gap:10px; }
.till-attendant-trigger-person > span:last-child { min-width:0; display:grid; gap:2px; }
.till-attendant-trigger-person strong { overflow:hidden; font-size:13px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.till-attendant-trigger-person small { color:var(--text2); font-size:11px; font-weight:700; }
.till-attendant-select-trigger > i { color:var(--theme-ink, #6675df); font-size:19px; transition:transform .2s var(--ui-ease); }
.till-attendant-select-control.is-open .till-attendant-select-trigger > i { transform:rotate(180deg); }
.till-attendant-option-avatar { width:37px; height:37px; display:grid; flex:0 0 37px; place-items:center; overflow:hidden; border-radius:12px; color:#fff; background:linear-gradient(145deg,#7b8aef,#5865d9); font-size:14px; font-weight:850; box-shadow:0 5px 11px rgba(83,99,215,.19); }
.till-attendant-option-avatar img { width:100%; height:100%; object-fit:cover; }
.till-attendant-select-menu { position:absolute; inset:calc(100% + 7px) 0 auto; z-index:30; display:none; max-height:278px; padding:7px; overflow:auto; border:1px solid var(--theme-stroke, rgba(255,255,255,.86)); border-radius:17px; background:linear-gradient(145deg,var(--theme-glass, rgba(250,252,255,.97)),var(--theme-glass, rgba(224,233,250,.95))); box-shadow:0 18px 38px rgba(37,49,95,.22),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }
.till-attendant-select-control.is-open .till-attendant-select-menu { display:grid; gap:5px; animation:permissionCardEnter .18s var(--ui-ease) both; }
.till-attendant-select-option { display:grid; grid-template-columns:37px minmax(0,1fr) 25px; align-items:center; gap:10px; min-height:55px; padding:8px; border:1px solid transparent; border-radius:13px; color:var(--text1); background:transparent; cursor:pointer; text-align:start; transition:background .18s ease,border-color .18s ease,transform .18s var(--ui-ease); }
.till-attendant-select-option:hover,.till-attendant-select-option:focus-visible { border-color:rgba(99,112,226,.27); background:rgba(103,117,228,.09); outline:none; transform:translateY(-1px); }
.till-attendant-select-option.active { border-color:rgba(95,108,223,.4); background:linear-gradient(135deg,rgba(102,117,229,.18),var(--theme-glass, rgba(255,255,255,.64))); }
.till-attendant-option-copy { min-width:0; display:grid; gap:2px; }.till-attendant-option-copy strong { overflow:hidden; font-size:12.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.till-attendant-option-copy small { color:var(--text2); font-size:10.5px; font-weight:700; }.till-attendant-select-option > .ti-check { color:transparent; font-size:18px; }.till-attendant-select-option.active > .ti-check { color:var(--theme-ink, #5c69dc); }
.profile-role-history { margin-top:16px; padding-top:14px; border-top:1px solid rgba(99,111,226,.16); }.profile-role-history-head { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:var(--text2); font-size:11.5px; font-weight:800; }.profile-role-history-head i { color:var(--theme-ink, #6875df); font-size:15px; }.profile-role-history-list { display:grid; gap:7px; }.profile-role-history-item { display:grid; grid-template-columns:35px minmax(0,1fr) auto; align-items:center; gap:9px; min-height:59px; padding:8px 10px; border:1px solid rgba(99,111,226,.17); border-radius:14px; background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(237,242,255,.62))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); transition:transform .18s var(--ui-ease),border-color .18s ease,box-shadow .18s ease; }.profile-role-history-item:hover { transform:translateY(-1px); border-color:rgba(91,108,221,.4); box-shadow:0 8px 17px rgba(52,67,134,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }.profile-role-history-item.is-active { border-color:rgba(47,169,109,.35); background:linear-gradient(135deg,rgba(47,169,109,.12),var(--theme-glass, rgba(255,255,255,.75))); }.profile-role-history-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; color:var(--theme-ink, #6473e0); background:rgba(100,115,224,.13); font-size:17px; }.profile-role-history-item.is-active .profile-role-history-icon { color:#fff; background:linear-gradient(145deg,#38aa71,#23875a); box-shadow:0 5px 11px rgba(44,158,101,.23); }.profile-role-history-copy { min-width:0; display:grid; gap:3px; }.profile-role-history-copy strong { overflow:hidden; color:var(--text1); font-size:12.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.profile-role-history-copy small { display:flex; align-items:center; gap:4px; color:var(--text2); font-size:10.5px; font-weight:700; }.profile-role-history-copy small i { color:var(--theme-ink, #6574df); font-size:12px; }.profile-role-history-state { padding:5px 7px; border-radius:999px; color:var(--theme-ink, #6070da); background:rgba(100,115,224,.1); font-size:10px; font-weight:800; white-space:nowrap; }.profile-role-history-item.is-active .profile-role-history-state { color:var(--theme-ink, #27865a); background:rgba(47,169,109,.13); }
.employee-access-list { display:grid; gap:8px; }
.employee-access-card { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:76px; padding:10px 12px; border:1px solid rgba(100,119,225,.2); border-radius:16px; background:var(--theme-glass, rgba(255,255,255,.52)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82)); transition:transform .18s var(--ui-ease),border-color .18s ease,box-shadow .18s ease; }
.employee-access-card:hover { transform:translateY(-1px); border-color:rgba(94,110,223,.42); box-shadow:0 9px 19px rgba(55,67,131,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.employee-access-identity { min-width:0; display:flex; align-items:center; gap:10px; }.employee-access-avatar { width:42px; height:42px; display:grid; flex:0 0 42px; place-items:center; overflow:hidden; border:2px solid var(--theme-stroke, rgba(255,255,255,.82)); border-radius:50%; color:#fff; background:linear-gradient(145deg,#5874e7,#3f59cf); box-shadow:0 5px 12px rgba(64,83,195,.2); font-size:14px; font-weight:850; }.employee-access-avatar img { width:100%; height:100%; object-fit:cover; }.employee-access-copy { min-width:0; display:grid; gap:3px; }.employee-access-copy strong { overflow:hidden; color:var(--text1); font-size:13px; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.employee-access-copy span { color:var(--text2); font-size:11px; font-weight:700; }.employee-access-level { margin-inline-start:5px; padding:4px 8px; border-radius:999px; font-size:10.5px; font-weight:800; white-space:nowrap; }.employee-access-level.is-full { color:var(--theme-ink, #27865a); background:rgba(47,169,109,.12); }.employee-access-level.is-limited { color:var(--theme-ink, #a97012); background:rgba(212,149,24,.13); }.employee-access-actions { flex:0 0 auto; }.employee-access-actions .pill-btn { min-height:36px; border-color:rgba(91,108,221,.2); background:var(--theme-glass, rgba(244,247,255,.7)); }.employee-access-actions .pill-btn:hover { border-color:rgba(91,108,221,.46); background:var(--theme-glass, rgba(235,240,255,.9)); }
@media (max-width:620px) { .till-role-settings-card,.employee-access-settings-card { padding:14px; }.profile-access-head-badge { max-width:42%; overflow:hidden; text-overflow:ellipsis; }.employee-access-card { align-items:flex-start; flex-direction:column; }.employee-access-identity { width:100%; }.employee-access-level { margin-inline-start:auto; }.employee-access-actions,.employee-access-actions .pill-btn { width:100%; }.till-attendant-select-menu { max-height:240px; } }
@media (prefers-reduced-motion:reduce) { .till-attendant-select-trigger,.till-attendant-select-trigger > i,.till-attendant-select-option,.employee-access-card { animation:none !important; transition:none !important; } }

/* ---------- employee access management dashboard ---------- */
.employee-access-settings-card { padding:20px;overflow:hidden; }
.employee-access-dashboard { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:15px 0 12px; }
.employee-access-stat { --stat-tone:#4f6fe8;--stat-rgb:79,111,232;min-width:0;display:flex;align-items:center;gap:10px;min-height:76px;padding:11px;border:1px solid rgba(var(--stat-rgb),.17);border-radius:16px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.72)),rgba(var(--stat-rgb),.075)); }
.employee-access-stat.is-active { --stat-tone:#2fa574;--stat-rgb:47,165,116; }
.employee-access-stat.is-unavailable { --stat-tone:#d96652;--stat-rgb:217,102,82; }
.employee-access-stat > span { width:40px;height:40px;display:grid;flex:0 0 40px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,var(--stat-tone),color-mix(in srgb,var(--stat-tone) 70%,#324466));box-shadow:0 7px 14px rgba(var(--stat-rgb),.2);font-size:19px; }
.employee-access-stat > div { min-width:0;display:grid;gap:3px; }
.employee-access-stat small { overflow:hidden;color:var(--text2);font-size:10px;font-weight:750;text-overflow:ellipsis;white-space:nowrap; }
.employee-access-stat strong { color:var(--text1);font-size:18px;font-weight:900; }
.employee-access-search { min-height:48px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:12px;padding:6px 11px;border:1px solid rgba(79,111,232,.18);border-radius:14px;background:var(--theme-glass, rgba(255,255,255,.62));transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.employee-access-search:focus-within { border-color:#4f6fe8;background:var(--theme-glass, rgba(255,255,255,.86));box-shadow:0 0 0 3px rgba(79,111,232,.1); }
.employee-access-search > i { color:var(--theme-ink, #4f6fe8);font-size:18px; }
.employee-access-search input { width:100%;padding:7px 2px;border:0!important;outline:0!important;color:var(--text1);background:transparent!important;box-shadow:none!important;font:inherit;font-size:12px;font-weight:700; }
.employee-access-search input::placeholder { color:var(--text2);opacity:.78; }
.employee-access-search kbd { min-width:25px;padding:3px 6px;border:1px solid rgba(91,108,163,.15);border-radius:7px;color:var(--text2);background:var(--theme-glass, rgba(240,244,252,.8));font:inherit;font-size:11px;text-align:center; }
.employee-access-column-head { display:grid;grid-template-columns:minmax(210px,1.1fr) minmax(260px,1.4fr) 150px;gap:12px;padding:0 13px 7px;color:var(--text2);font-size:9.5px;font-weight:800; }
.employee-access-managed-list { display:grid;gap:7px; }
.employee-access-card--managed { position:relative;display:grid;grid-template-columns:minmax(210px,1.1fr) minmax(260px,1.4fr) 150px;gap:12px;min-height:76px;padding:10px 12px;border-radius:15px;overflow:hidden; }
.employee-access-card--managed::before { content:'';position:absolute;inset:10px 0 10px auto;width:3px;border-radius:3px;background:#64748b; }
.employee-access-card--managed.is-active::before { background:#2fa574; }
.employee-access-card--managed.is-disabled::before { background:#d96652; }
.employee-access-card--managed.is-locked { border-color:rgba(220,74,69,.35);background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.72)),var(--theme-glass, rgba(255,229,225,.52))); }
.employee-access-card--managed.is-locked::before { background:#dc4a45;box-shadow:0 0 0 5px rgba(220,74,69,.1); }
.employee-access-card--managed .employee-access-avatar { width:46px;height:46px;flex-basis:46px;border-radius:14px;background:linear-gradient(145deg,#6875df,#4f6fe8); }
.employee-access-card--managed .employee-access-copy strong { font-size:13.5px; }
.employee-access-card--managed .employee-access-copy span { direction:ltr;text-align:start;font-size:10.5px; }
.employee-access-account-meta { min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:6px; }
.employee-access-account-meta > span { min-width:0;display:flex;align-items:center;gap:5px;overflow:hidden;padding:6px 7px;border-radius:9px;color:var(--text2);background:rgba(93,110,165,.06);font-size:10px;font-weight:750;text-overflow:ellipsis;white-space:nowrap; }
.employee-access-account-meta > span > i { flex:0 0 auto;color:var(--theme-ink, #6875df);font-size:13px; }
.employee-access-state.is-active { color:var(--theme-ink, #27865a)!important;background:rgba(47,165,116,.1)!important; }
.employee-access-state.is-active i { color:var(--theme-ink, #2fa574)!important; }
.employee-access-state.is-disabled { color:var(--theme-ink, #b4474e)!important;background:rgba(217,102,82,.1)!important; }
.employee-access-state.is-disabled i { color:var(--theme-ink, #d96652)!important; }
.employee-access-state.is-locked { color:var(--theme-ink, #a9363e)!important;background:rgba(220,74,69,.12)!important; }
.employee-access-state.is-locked i { color:var(--theme-ink, #dc4a45)!important; }
.employee-access-lock-alert { grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(220,74,69,.22);border-radius:11px;color:var(--theme-ink, #a9363e);background:rgba(220,74,69,.07);font-size:11px;font-weight:750; }
.employee-access-lock-alert i { flex:0 0 auto;color:var(--theme-ink, #dc4a45);font-size:17px; }
.employee-access-actions { min-width:0; }
.employee-access-manage-btn { width:100%;min-height:42px!important;display:grid!important;grid-template-columns:20px minmax(0,1fr) 15px;align-items:center;gap:6px;margin:0!important;padding:7px 9px!important;border-color:rgba(79,111,232,.2)!important;color:var(--theme-ink, #4f61c9)!important;background:rgba(79,111,232,.08)!important;font-size:10.5px!important; }
.employee-access-manage-btn > span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.employee-access-manage-btn > i:last-child { opacity:.55; }
.employee-access-manage-btn:hover { border-color:rgba(79,111,232,.42)!important;background:rgba(79,111,232,.13)!important; }
.employee-access-search-empty { min-height:120px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text2);font-size:12px;font-weight:750; }
.employee-access-search-empty[hidden] { display:none; }
.employee-access-search-empty i { color:var(--theme-ink, #6875df);font-size:21px; }
html[data-theme="dark"] .employee-access-stat,html[data-theme="dark"] .employee-access-search,html[data-theme="dark"] .employee-access-card--managed { border-color:rgba(255,255,255,.09);background:rgba(20,28,40,.58); }
html[data-theme="dark"] .employee-access-account-meta > span { background:rgba(255,255,255,.045); }
@media (max-width:1050px) { .employee-access-column-head { display:none; }.employee-access-card--managed { grid-template-columns:minmax(190px,1fr) minmax(250px,1.3fr) 135px; }.employee-access-account-meta { grid-template-columns:1fr 1fr; }.employee-access-account-meta > span:last-child { display:none; } }
@media (max-width:760px) { .employee-access-dashboard { grid-template-columns:1fr; }.employee-access-stat { min-height:64px; }.employee-access-card--managed { grid-template-columns:minmax(0,1fr) 120px; }.employee-access-account-meta { grid-column:1/-1;grid-row:2; }.employee-access-actions { grid-column:2;grid-row:1; } }
@media (max-width:520px) { .employee-access-settings-card { padding:14px; }.employee-access-card--managed { display:grid;grid-template-columns:1fr;gap:9px;padding:12px; }.employee-access-actions,.employee-access-account-meta { grid-column:auto;grid-row:auto; }.employee-access-account-meta { grid-template-columns:1fr; }.employee-access-account-meta > span:last-child { display:flex; }.employee-access-manage-btn { font-size:11px!important; } }

/* Employee access — bold, glanceable management surface. */
.employee-access-settings-card { position:relative;padding:26px;border-color:rgba(94,110,223,.23);background:radial-gradient(circle at 100% 0%,rgba(106,83,225,.2),transparent 34%),radial-gradient(circle at 0% 100%,rgba(45,165,116,.1),transparent 32%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.91)),var(--theme-glass, rgba(226,234,250,.7)));box-shadow:0 24px 54px rgba(37,49,103,.14),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));isolation:isolate; }
.employee-access-settings-card::after { content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 20%,var(--theme-glass, rgba(255,255,255,.38)) 48%,transparent 72%);transform:translateX(110%);animation:employeeAccessSheen .75s .16s cubic-bezier(.22,1,.36,1) both; }
.employee-access-hero { display:flex;align-items:center;gap:17px;margin:-2px 0 22px;padding:3px 2px 18px;border-bottom:1px solid rgba(91,108,221,.16); }
.employee-access-hero-icon { width:64px;height:64px;display:grid;flex:0 0 64px;place-items:center;border:1px solid var(--theme-stroke, rgba(255,255,255,.72));border-radius:21px;color:#fff;background:linear-gradient(145deg,#8268eb,#506be0);box-shadow:0 13px 28px rgba(79,92,205,.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.36));font-size:32px;animation:employeeAccessIconIn .5s .06s cubic-bezier(.2,.8,.2,1) both; }
.employee-access-hero-copy { min-width:0;flex:1; }.employee-access-hero .profile-access-card-head { min-height:auto;justify-content:flex-start;gap:10px; }.employee-access-hero .section-title-icon { font-size:22px;font-weight:950;letter-spacing:-.025em; }.employee-access-hero-copy p { margin:6px 0 0;color:var(--text2);font-size:13px;font-weight:720;line-height:1.7; }
.employee-access-hero .profile-access-count { min-width:34px;min-height:34px;padding:5px 10px;border-radius:12px;font-size:15px;font-weight:950; }
.employee-access-dashboard { gap:13px;margin:0 0 16px; }
.employee-access-stat { min-height:96px;gap:13px;padding:15px;border-radius:20px;box-shadow:0 10px 24px rgba(var(--stat-rgb),.08),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));transition:transform .22s var(--ui-ease),border-color .22s ease,box-shadow .22s ease;animation:employeeAccessRise .42s var(--ui-ease) both; }
.employee-access-stat:nth-child(2){animation-delay:.055s}.employee-access-stat:nth-child(3){animation-delay:.11s}.employee-access-stat:hover { transform:translateY(-3px);border-color:rgba(var(--stat-rgb),.34);box-shadow:0 15px 30px rgba(var(--stat-rgb),.14),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)); }
.employee-access-stat > span { width:54px;height:54px;flex-basis:54px;border-radius:17px;font-size:27px;box-shadow:0 10px 21px rgba(var(--stat-rgb),.27); }
.employee-access-stat small { font-size:12px;font-weight:820; }.employee-access-stat strong { font-size:25px;font-weight:950;line-height:1; }
.employee-access-search { min-height:58px;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;margin-bottom:16px;padding:7px 14px;border-radius:17px;box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.employee-access-search > i { font-size:23px; }.employee-access-search input { font-size:14px;font-weight:780; }.employee-access-search kbd { min-width:31px;padding:5px 7px;border-radius:9px;font-size:13px; }
.employee-access-column-head { grid-template-columns:minmax(220px,1.1fr) minmax(270px,1.4fr) 166px;padding:0 16px 9px;font-size:11px; }
.employee-access-managed-list { gap:10px; }.employee-access-card--managed { grid-template-columns:minmax(220px,1.1fr) minmax(270px,1.4fr) 166px;gap:14px;min-height:96px;padding:14px 15px;border-radius:19px;background:var(--theme-glass, rgba(255,255,255,.64));animation:employeeAccessRise .42s var(--ui-ease) both; }
.employee-access-card--managed::before { inset:15px 0 15px auto;width:4px;border-radius:4px;transition:inset .2s ease,box-shadow .2s ease; }.employee-access-card--managed:hover { transform:translateY(-3px);box-shadow:0 15px 30px rgba(55,67,131,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)); }.employee-access-card--managed:hover::before { inset:9px 0;box-shadow:0 0 15px currentColor; }
.employee-access-card--managed .employee-access-avatar { width:58px;height:58px;flex-basis:58px;border-radius:18px;font-size:19px;box-shadow:0 9px 20px rgba(64,83,195,.25); }.employee-access-identity { gap:13px; }.employee-access-card--managed .employee-access-copy { gap:5px; }.employee-access-card--managed .employee-access-copy strong { font-size:16px;font-weight:930; }.employee-access-card--managed .employee-access-copy span { font-size:12px;font-weight:760; }
.employee-access-account-meta { gap:8px; }.employee-access-account-meta > span { min-height:36px;gap:7px;padding:8px 9px;border-radius:11px;font-size:11.5px;font-weight:800; }.employee-access-account-meta > span > i { font-size:17px; }
.employee-access-manage-btn { min-height:49px!important;grid-template-columns:24px minmax(0,1fr) 18px;gap:8px;padding:9px 11px!important;border-radius:13px!important;font-size:12px!important;font-weight:880!important;transition:transform .2s var(--ui-ease),border-color .2s ease,background .2s ease,box-shadow .2s ease!important; }.employee-access-manage-btn > i { font-size:18px; }.employee-access-manage-btn:hover { transform:translateY(-2px);box-shadow:0 9px 18px rgba(79,111,232,.14); }.employee-access-manage-btn:focus-visible { outline:3px solid rgba(79,111,232,.28);outline-offset:2px; }
html[data-theme="dark"] .employee-access-settings-card { border-color:rgba(139,126,255,.18);background:radial-gradient(circle at 100% 0%,rgba(106,83,225,.18),transparent 36%),linear-gradient(145deg,rgba(25,32,47,.94),rgba(18,25,38,.9));box-shadow:0 24px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06); }
@keyframes employeeAccessRise { from { opacity:0;transform:translateY(12px) scale(.985) } to { opacity:1;transform:none } }
@keyframes employeeAccessIconIn { from { opacity:0;transform:scale(.72) rotate(8deg) } to { opacity:1;transform:none } }
@keyframes employeeAccessSheen { from { transform:translateX(110%) } to { transform:translateX(-110%) } }
@media (max-width:1050px) { .employee-access-card--managed { grid-template-columns:minmax(200px,1fr) minmax(250px,1.25fr) 148px; }.employee-access-column-head { grid-template-columns:minmax(200px,1fr) minmax(250px,1.25fr) 148px; } }
@media (max-width:760px) { .employee-access-settings-card { padding:20px; }.employee-access-dashboard { grid-template-columns:repeat(3,minmax(0,1fr)); }.employee-access-stat { min-height:112px;flex-direction:column;align-items:flex-start; }.employee-access-card--managed { grid-template-columns:minmax(0,1fr) 138px; }.employee-access-account-meta { grid-column:1/-1;grid-row:2; }.employee-access-actions { grid-column:2;grid-row:1; } }
@media (max-width:560px) { .employee-access-settings-card { padding:16px; }.employee-access-hero { align-items:flex-start;gap:13px;margin-bottom:17px; }.employee-access-hero-icon { width:54px;height:54px;flex-basis:54px;border-radius:17px;font-size:27px; }.employee-access-hero .section-title-icon { font-size:19px; }.employee-access-hero-copy p { font-size:12px; }.employee-access-dashboard { grid-template-columns:1fr;gap:9px; }.employee-access-stat { min-height:74px;flex-direction:row;align-items:center;padding:11px 12px; }.employee-access-stat > span { width:46px;height:46px;flex-basis:46px;font-size:23px; }.employee-access-stat strong { font-size:22px; }.employee-access-card--managed { grid-template-columns:1fr;gap:12px;padding:14px; }.employee-access-card--managed .employee-access-avatar { width:54px;height:54px;flex-basis:54px; }.employee-access-actions,.employee-access-account-meta { grid-column:auto;grid-row:auto; }.employee-access-account-meta { grid-template-columns:1fr; }.employee-access-account-meta > span:last-child { display:flex; } }
@media (prefers-reduced-motion:reduce) { .employee-access-settings-card::after,.employee-access-hero-icon,.employee-access-stat,.employee-access-card--managed { animation:none!important; }.employee-access-stat,.employee-access-card--managed,.employee-access-manage-btn { transition:none!important; } }

.employee-access-level.is-disabled { color:var(--theme-ink, #b4474e); background:rgba(217,102,82,.12); }
.employee-access-level.is-empty { color:var(--theme-ink, #66718c); background:rgba(102,113,140,.11); }
.employee-account-notice { min-height:76px; display:flex; align-items:center; justify-content:center; gap:9px; padding:18px; border:1px dashed rgba(91,108,221,.28); border-radius:16px; color:var(--text2); font-size:13px; font-weight:750; }
.employee-account-notice.is-error { color:var(--theme-ink, #b4474e); border-color:rgba(217,102,82,.3); background:rgba(217,102,82,.06); }
.employee-account-notice button { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:10px; color:inherit; background:var(--theme-glass, rgba(255,255,255,.65)); cursor:pointer; }
.employee-account-modal { width:min(94vw,720px); max-height:min(90vh,820px); overflow:auto; }
.employee-account-modal-head { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.employee-account-modal-head > span { width:48px; height:48px; display:grid; flex:0 0 48px; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(145deg,#5874e7,#7259df); box-shadow:0 9px 20px rgba(84,91,205,.24); font-size:22px; }
.employee-account-modal-head h3 { margin:0; color:var(--text1); font-size:17px; }
.employee-account-modal-head p { margin:4px 0 0; color:var(--text2); font-size:12px; direction:ltr; text-align:start; }
.employee-account-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; padding:16px; border:1px solid rgba(99,117,214,.16); border-radius:18px; background:var(--theme-glass, rgba(241,245,255,.5)); }
.employee-account-fields .field { margin:0; }
.employee-account-fields .field > span { display:block; margin-bottom:7px; color:var(--text1); font-size:12px; font-weight:800; }
.employee-account-fields input,.employee-account-fields select { width:100%; min-height:46px; border:1px solid rgba(104,122,182,.28); border-radius:12px; color:var(--text1); background:var(--ui-surface-strong); font:inherit; }
.employee-account-fields input { padding:8px 12px; }
.employee-account-fields select { padding:8px 10px; cursor:pointer; }
.employee-account-fields input:focus,.employee-account-fields select:focus { outline:3px solid rgba(79,111,232,.17); border-color:#5a72db; }
.employee-account-fields small { display:block; margin-top:6px; color:var(--text2); font-size:10.5px; line-height:1.55; }
.employee-account-password { position:relative; }
.employee-account-password input { padding-inline-end:48px; }
.employee-account-password button { position:absolute; right: 0; margin-right: 5px; inset-inline-end:4px; top:3px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:9px; color:var(--text2); background:transparent; cursor:pointer; }
.employee-account-password button:hover { color:var(--theme-ink, #4f6fe8); background:rgba(79,111,232,.09); }
.employee-account-active { grid-column:1/-1; min-height:48px; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; color:var(--text1); background:rgba(47,165,116,.08); font-size:12px; font-weight:800; cursor:pointer; }
.employee-account-active input { position:absolute; opacity:0; pointer-events:none; }
.employee-account-switch { position:relative; width:42px; height:24px; flex:0 0 42px; border-radius:999px; background:#aab2c5; transition:background .18s ease; }
.employee-account-switch::after { content:''; position:absolute; top:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:var(--theme-surface, #fff); box-shadow:0 2px 5px rgba(0,0,0,.2); transition:transform .18s ease; }
.employee-account-active input:checked + .employee-account-switch { background:#2fa574; }
.employee-account-active input:checked + .employee-account-switch::after { transform:translateX(18px); }
[dir="rtl"] .employee-account-active input:checked + .employee-account-switch::after { transform:translateX(-18px); }
.employee-account-active input:focus-visible + .employee-account-switch { outline:3px solid rgba(79,111,232,.3); outline-offset:2px; }
html[data-theme="dark"] .employee-account-fields { background:rgba(18,25,38,.48); border-color:rgba(255,255,255,.11); }
html[data-theme="dark"] .employee-account-notice button { background:rgba(255,255,255,.08); }
@media (max-width:620px) { .employee-account-modal { width:96vw; padding:17px; }.employee-account-fields { grid-template-columns:1fr; padding:12px; }.employee-account-active { grid-column:auto; }.employee-account-modal .access-checkbox-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .employee-account-switch,.employee-account-switch::after { transition:none; } }

/* ---------- advanced employee role & permission workspace ---------- */
.overlay .modal.employee-account-modal--advanced {
    --access-tone:#665FE5;
    --access-tone-rgb:102,95,229;
    box-sizing:border-box;
    width:min(1040px,calc(100vw - 48px));
    max-width:none;
    height:min(730px,calc(100dvh - 28px));
    max-height:calc(100dvh - 28px);
    display:grid;
    grid-template-rows:68px minmax(0,1fr) auto 70px;
    gap:0;
    padding:14px;
    overflow:hidden;
    border:1px solid rgba(var(--access-tone-rgb),.38);
    border-radius:25px;
    background:radial-gradient(circle at 100% 0%,rgba(var(--access-tone-rgb),.21),transparent 40%),radial-gradient(circle at 0% 100%,rgba(60,145,198,.1),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(230,235,248,.97)),var(--theme-glass, rgba(181,196,220,.92)));
    box-shadow:0 28px 76px rgba(26,35,72,.36),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
.employee-account-modal--advanced .employee-account-modal-head { min-height:64px;margin:0;padding:9px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.92)),rgba(var(--access-tone-rgb),.11));box-shadow:0 10px 22px rgba(42,53,104,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)); }
.employee-account-modal--advanced .employee-account-modal-body { min-height:0;display:grid;grid-template-columns:minmax(330px,.82fr) minmax(0,1.45fr);gap:14px;padding:14px 0; }
.employee-account-identity-panel,.employee-permissions-panel { min-width:0;min-height:0;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;background:radial-gradient(circle at 100% 0%,rgba(var(--access-tone-rgb),.1),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.77)),var(--theme-glass, rgba(227,234,248,.6)));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(42,52,101,.08); }
.employee-account-identity-panel { display:flex;flex-direction:column;gap:12px;overflow-y:auto;scrollbar-gutter:stable; }
.employee-account-lock-alert { display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid rgba(220,74,69,.28);border-radius:13px;color:var(--theme-ink, #8f3038);background:linear-gradient(135deg,rgba(220,74,69,.12),rgba(255,181,91,.09)); }
.employee-account-lock-alert > i { flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#dc4a45;font-size:18px;box-shadow:0 7px 15px rgba(220,74,69,.2); }
.employee-account-lock-alert div { display:grid;gap:3px;line-height:1.55; }
.employee-account-lock-alert b { font-size:12px; }
.employee-account-lock-alert span { font-size:10.5px;font-weight:650; }
html[data-theme="dark"] :is(.employee-access-lock-alert,.employee-account-lock-alert) { color:#ffaaa5;background:rgba(220,74,69,.12); }
.employee-permissions-panel { display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:11px;overflow:hidden; }
.employee-account-panel-title { min-width:0;display:flex;align-items:center;gap:10px; }
.employee-account-panel-title > span { width:38px;height:38px;display:grid;flex:0 0 38px;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,var(--access-tone),#4A58C9);box-shadow:0 7px 15px rgba(var(--access-tone-rgb),.25);font-size:18px; }
.employee-account-panel-title > div { min-width:0;display:grid;gap:2px; }
.employee-account-panel-title b { color:var(--text1);font-size:13.5px;font-weight:880; }
.employee-account-panel-title small { color:var(--text2);font-size:10.5px;line-height:1.5; }
.employee-account-modal--advanced .employee-account-fields { display:grid;grid-template-columns:1fr;gap:11px;margin:0;padding:0;border:0;background:transparent; }
.employee-role-section { display:grid;gap:8px; }
.employee-role-section > span { color:var(--text1);font-size:12px;font-weight:840; }
.employee-role-presets { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
.employee-role-card { min-height:48px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(103,119,178,.22);border-radius:12px;color:var(--text2);background:var(--theme-glass, rgba(255,255,255,.54));font:inherit;font-size:11.5px;font-weight:800;text-align:start;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease; }
.employee-role-card > i { width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--access-tone);background:rgba(var(--access-tone-rgb),.1);font-size:15px; }
.employee-role-card:hover,.employee-role-card:focus-visible { outline:none;border-color:rgba(var(--access-tone-rgb),.52);background:var(--theme-glass, rgba(255,255,255,.84)); }
.employee-role-card.active { color:var(--theme-ink, #4D49BB);border-color:rgba(var(--access-tone-rgb),.55);background:rgba(var(--access-tone-rgb),.13);box-shadow:0 0 0 3px rgba(var(--access-tone-rgb),.09); }
.employee-permissions-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(var(--access-tone-rgb),.19); }
.employee-permissions-head > strong { flex:0 0 auto;padding:5px 9px;border-radius:999px;color:var(--theme-ink, #514BC3);background:rgba(var(--access-tone-rgb),.12);font-size:10.5px;font-weight:850; }
.employee-permission-all { position:relative;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid rgba(var(--access-tone-rgb),.25);border-radius:14px;color:var(--text1);background:rgba(var(--access-tone-rgb),.07);cursor:pointer; }
.employee-permission-all input,.employee-permission-item input { position:absolute;opacity:0;pointer-events:none; }
.employee-permission-all > span { display:grid;grid-template-columns:28px 1fr;align-items:center;column-gap:8px; }
.employee-permission-all > span > i { grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#fff;background:var(--access-tone); }
.employee-permission-all b { font-size:12px;font-weight:850; }.employee-permission-all small { color:var(--text2);font-size:9.5px; }
.employee-permission-all > i { width:24px;height:24px;display:grid;place-items:center;border:2px solid rgba(100,113,161,.28);border-radius:8px;color:transparent; }
.employee-permission-all:has(input:checked) { border-color:rgba(var(--access-tone-rgb),.5);background:rgba(var(--access-tone-rgb),.13); }
.employee-permission-all:has(input:checked) > i { color:#fff;border-color:var(--access-tone);background:var(--access-tone); }
.employee-permission-groups { min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;padding:2px 3px 2px 6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable; }
.employee-account-field { gap:5px; }
.employee-account-password-meta { display:flex;justify-content:space-between;gap:10px;min-height:18px; }
.employee-account-password-meta small:last-child { flex:0 0 auto;color:var(--text2);font-weight:800; }
.employee-account-field-error { display:none;min-height:18px;color:var(--theme-ink, #b9364f)!important;font-size:10.5px!important;font-weight:800!important;line-height:1.55; }
.employee-account-field.has-error .employee-account-field-error { display:block; }
.employee-account-field.has-error input { border-color:#cf4960!important;box-shadow:0 0 0 3px rgba(207,73,96,.12)!important; }
.employee-account-form-error { display:none;align-items:center;min-height:36px;margin:0 2px;padding:7px 11px;border:1px solid rgba(207,73,96,.25);border-radius:11px;color:var(--theme-ink, #a82f46);background:rgba(207,73,96,.09);font-size:11px;font-weight:800; }
.employee-account-form-error.is-visible { display:flex; }
.employee-permission-group { min-width:0;margin:0;padding:9px;border:1px solid rgba(100,117,174,.18);border-radius:14px;background:var(--theme-glass, rgba(255,255,255,.46)); }
.employee-permission-group legend { display:flex;align-items:center;gap:6px;padding:0 5px;color:var(--text1);font-size:10.5px;font-weight:850; }
.employee-permission-group legend i { color:var(--access-tone);font-size:14px; }
.employee-permission-group > div { display:grid;gap:5px;margin-top:4px; }
.employee-permission-item { position:relative;display:block;cursor:pointer; }
.employee-permission-item > span { min-height:34px;display:flex;align-items:center;gap:7px;padding:6px 8px;border:1px solid transparent;border-radius:9px;color:var(--text2);font-size:10.5px;font-weight:740;line-height:1.45;transition:border-color .16s ease,background .16s ease,color .16s ease; }
.employee-permission-item > span i { width:18px;height:18px;display:grid;flex:0 0 18px;place-items:center;border:1.5px solid rgba(99,112,157,.3);border-radius:6px;color:transparent;font-size:12px; }
.employee-permission-item:hover > span,.employee-permission-item:focus-within > span { border-color:rgba(var(--access-tone-rgb),.26);background:rgba(var(--access-tone-rgb),.06); }
.employee-permission-item:has(input:checked) > span { color:var(--theme-ink, #4E4AB8);background:rgba(var(--access-tone-rgb),.1); }
.employee-permission-item:has(input:checked) > span i { color:#fff;border-color:var(--access-tone);background:var(--access-tone); }
.employee-account-modal--advanced .employee-account-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,211,233,.15)),rgba(var(--access-tone-rgb),.08)); }
.employee-account-modal--advanced .employee-account-modal-foot .btn { min-height:46px; }
.employee-account-modal--advanced .employee-account-modal-foot .btn-primary { background:linear-gradient(135deg,var(--access-tone),#4E63DF);box-shadow:0 9px 19px rgba(var(--access-tone-rgb),.27); }
html[data-theme="dark"] .employee-account-modal--advanced .employee-account-modal-head,html[data-theme="dark"] :is(.employee-account-identity-panel,.employee-permissions-panel) { border-color:rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(47,58,76,.95),rgba(30,39,53,.92)); }
html[data-theme="dark"] .employee-role-card,html[data-theme="dark"] .employee-permission-group { background:rgba(15,22,34,.4);border-color:rgba(255,255,255,.1); }
@media (max-width:820px) { .overlay .modal.employee-account-modal--advanced { width:min(560px,calc(100vw - 18px));height:auto;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;padding:12px;overflow-y:auto; }.employee-account-modal--advanced .employee-account-modal-body { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0; }.employee-account-identity-panel,.employee-permissions-panel { overflow:visible; }.employee-permission-groups { max-height:none;overflow:visible; }.employee-account-modal--advanced .employee-account-modal-foot { position:static;grid-template-columns:minmax(0,1fr) 112px; } }

.self-worktime-modal--multi{width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}.self-worktime-assignment-group{display:grid;gap:9px;margin-top:13px;padding:12px;border:1px solid var(--border);border-radius:17px;background:var(--panel-2)}.self-worktime-assignment-group>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.self-worktime-assignment-group>div:first-child small{color:var(--text2);font-size:11px}.self-worktime-assignment-group .self-worktime-pump-grid{margin:0}.self-worktime-pump.is-none{--self-pump-tone:var(--text2)}
@media(max-width:620px){.self-worktime-modal--multi{width:calc(100vw - 16px);padding:14px}.self-worktime-assignment-group{padding:9px}.self-worktime-assignment-group>div:first-child{align-items:flex-start;flex-direction:column;gap:2px}}
@media (max-width:480px) { .overlay .modal.employee-account-modal--advanced { padding:10px; }.employee-role-presets,.employee-permission-groups { grid-template-columns:1fr; }.employee-account-modal--advanced .employee-account-modal-foot { grid-template-columns:1fr; }.employee-account-modal--advanced .employee-account-modal-foot #acc_cancelBtn { grid-row:2; }.employee-permissions-head { align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { .employee-role-card,.employee-permission-item > span { transition:none!important; } }

/* ---------- access workspace redesign: wide, scannable and category-colored ---------- */
.overlay .modal.employee-account-modal--advanced {
    width:min(1260px,calc(100vw - 36px));
    height:min(820px,calc(100dvh - 24px));
    grid-template-rows:76px minmax(0,1fr) auto 72px;
    padding:16px;
    border-radius:28px;
}
.employee-account-modal--advanced .employee-account-modal-head {
    min-height:72px;
    padding:11px 18px;
    border-radius:20px;
}
.employee-account-modal--advanced .employee-account-modal-head > span {
    width:52px;
    height:52px;
    flex-basis:52px;
    border-radius:16px;
    background:linear-gradient(145deg,#7659e8,#4f6fe8);
}
.employee-account-modal--advanced .employee-account-modal-head h3 { font-size:19px; }
.employee-account-modal--advanced .employee-account-modal-head p { font-size:12.5px; }
.employee-account-modal--advanced .employee-account-modal-body {
    grid-template-columns:minmax(350px,.72fr) minmax(0,1.7fr);
    gap:18px;
    padding:16px 0;
}
.employee-account-identity-panel,.employee-permissions-panel {
    padding:17px;
    border-radius:21px;
}
.employee-permissions-panel { gap:13px; }
.employee-account-panel-title > span { width:42px;height:42px;flex-basis:42px;border-radius:13px; }
.employee-account-panel-title b { font-size:14.5px; }
.employee-account-panel-title small { font-size:11.5px; }
.employee-permissions-head { padding-bottom:12px; }
.employee-permissions-head > strong { padding:7px 11px;font-size:11.5px; }
.employee-permission-all { min-height:60px;padding:10px 14px;border-radius:16px; }
.employee-permission-all b { font-size:13px; }
.employee-permission-all small { font-size:10.5px; }
.employee-permission-groups { gap:12px;padding:4px 4px 4px 8px; }
.employee-permission-group {
    --group-tone:#665fe5;
    --group-tone-rgb:102,95,229;
    padding:11px;
    border-color:rgba(var(--group-tone-rgb),.2);
    border-radius:17px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.72)),rgba(var(--group-tone-rgb),.075));
    box-shadow:0 8px 18px rgba(var(--group-tone-rgb),.055),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}
.employee-permission-group[data-permission-group="overview"] { --group-tone:#4f6fe8;--group-tone-rgb:79,111,232; }
.employee-permission-group[data-permission-group="inventory"] { --group-tone:#e59c22;--group-tone-rgb:229,156,34; }
.employee-permission-group[data-permission-group="operations"] { --group-tone:#2c9eb8;--group-tone-rgb:44,158,184; }
.employee-permission-group[data-permission-group="sales"] { --group-tone:#2fa574;--group-tone-rgb:47,165,116; }
.employee-permission-group[data-permission-group="expenses"] { --group-tone:#d96652;--group-tone-rgb:217,102,82; }
.employee-permission-group[data-permission-group="people"] { --group-tone:#db5b8c;--group-tone-rgb:219,91,140; }
.employee-permission-group[data-permission-group="cash"] { --group-tone:#8b65d9;--group-tone-rgb:139,101,217; }
.employee-permission-group[data-permission-group="reports"] { --group-tone:#397fce;--group-tone-rgb:57,127,206; }
.employee-permission-group[data-permission-group="system"] { --group-tone:#64748b;--group-tone-rgb:100,116,139; }
.employee-permission-group legend { width:100%;padding:0 2px 5px; }
.employee-permission-group-heading { width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px; }
.employee-permission-group-heading > i {
    width:34px;height:34px;display:grid;place-items:center;border-radius:11px;
    color:#fff!important;background:linear-gradient(145deg,var(--group-tone),color-mix(in srgb,var(--group-tone) 72%,#263a67));
    box-shadow:0 6px 13px rgba(var(--group-tone-rgb),.23);font-size:16px!important;
}
.employee-permission-group-heading > b { color:var(--text1);font-size:12px;font-weight:880;line-height:1.45; }
.employee-permission-group-heading > small { min-width:25px;padding:3px 7px;border-radius:999px;color:var(--group-tone);background:rgba(var(--group-tone-rgb),.11);font-size:10px;font-weight:900;text-align:center; }
.employee-permission-group > div { gap:6px;margin-top:5px; }
.employee-permission-item > span { min-height:39px;padding:7px 9px;border-radius:11px;font-size:11.25px; }
.employee-permission-item:hover > span,.employee-permission-item:focus-within > span { border-color:rgba(var(--group-tone-rgb),.3);background:rgba(var(--group-tone-rgb),.075); }
.employee-permission-item:has(input:checked) > span { color:color-mix(in srgb,var(--group-tone) 82%,var(--theme-ink, #16213d));background:rgba(var(--group-tone-rgb),.13); }
.employee-permission-item:has(input:checked) > span i { color:#fff;border-color:var(--group-tone);background:var(--group-tone);box-shadow:0 3px 8px rgba(var(--group-tone-rgb),.2); }
.employee-role-card { min-height:52px;border-radius:14px; }
.employee-role-card:nth-child(1) { --role-tone:#4f6fe8; }
.employee-role-card:nth-child(2) { --role-tone:#d49325; }
.employee-role-card:nth-child(3) { --role-tone:#2fa574; }
.employee-role-card:nth-child(4) { --role-tone:#7659e8; }
.employee-role-card > i { color:var(--role-tone,var(--access-tone));background:color-mix(in srgb,var(--role-tone,var(--access-tone)) 12%,transparent); }
.employee-role-card.active { color:var(--role-tone,var(--theme-ink, #4d49bb));border-color:color-mix(in srgb,var(--role-tone,#665fe5) 55%,transparent);background:color-mix(in srgb,var(--role-tone,#665fe5) 13%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--role-tone,#665fe5) 9%,transparent); }
html[data-theme="dark"] .employee-permission-group { background:linear-gradient(145deg,rgba(15,22,34,.62),rgba(var(--group-tone-rgb),.09));border-color:rgba(var(--group-tone-rgb),.25);box-shadow:none; }
html[data-theme="dark"] .employee-permission-item:has(input:checked) > span { color:color-mix(in srgb,var(--group-tone) 62%,#fff); }
@media (min-width:1280px) {
    .overlay .modal.employee-account-modal--advanced { width:min(1440px,calc(100vw - 52px)); }
    .employee-account-modal--advanced .employee-account-modal-body { grid-template-columns:minmax(370px,.7fr) minmax(0,1.9fr); }
    .employee-permission-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px) {
    .overlay .modal.employee-account-modal--advanced { width:min(620px,calc(100vw - 16px));height:auto;max-height:calc(100dvh - 12px);padding:12px;border-radius:21px; }
    .employee-account-modal--advanced .employee-account-modal-head { min-height:64px;padding:9px 12px; }
    .employee-account-modal--advanced .employee-account-modal-body { gap:12px;padding:12px 0; }
}

/* ---------- permission browser: one focused category instead of a card wall ---------- */
.employee-permission-browser {
    min-height:0;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:14px;
    overflow:hidden;
}
.employee-permission-category-nav {
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:3px 3px 3px 7px;
    overflow-y:auto;
    scrollbar-width:thin;
}
.employee-permission-category {
    --group-tone:#665fe5;
    --group-tone-rgb:102,95,229;
    min-height:50px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 18px;
    align-items:center;
    gap:9px;
    padding:7px 9px;
    border:1px solid transparent;
    border-radius:13px;
    color:var(--text2);
    background:transparent;
    font:inherit;
    text-align:start;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.employee-permission-category[data-permission-target="overview"] { --group-tone:#4f6fe8;--group-tone-rgb:79,111,232; }
.employee-permission-category[data-permission-target="inventory"] { --group-tone:#d49325;--group-tone-rgb:212,147,37; }
.employee-permission-category[data-permission-target="operations"] { --group-tone:#2c9eb8;--group-tone-rgb:44,158,184; }
.employee-permission-category[data-permission-target="sales"] { --group-tone:#2fa574;--group-tone-rgb:47,165,116; }
.employee-permission-category[data-permission-target="expenses"] { --group-tone:#d96652;--group-tone-rgb:217,102,82; }
.employee-permission-category[data-permission-target="people"] { --group-tone:#db5b8c;--group-tone-rgb:219,91,140; }
.employee-permission-category[data-permission-target="cash"] { --group-tone:#8b65d9;--group-tone-rgb:139,101,217; }
.employee-permission-category[data-permission-target="reports"] { --group-tone:#397fce;--group-tone-rgb:57,127,206; }
.employee-permission-category[data-permission-target="system"] { --group-tone:#64748b;--group-tone-rgb:100,116,139; }
.employee-permission-category > i:first-child {
    width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
    color:var(--group-tone);background:rgba(var(--group-tone-rgb),.11);font-size:16px;
}
.employee-permission-category > span { min-width:0;display:grid;gap:2px; }
.employee-permission-category b { overflow:hidden;color:inherit;font-size:11.5px;font-weight:850;text-overflow:ellipsis;white-space:nowrap; }
.employee-permission-category small { color:var(--text2);font-size:9.5px;font-weight:750; }
.employee-permission-category > i:last-child { opacity:.35;font-size:14px; }
.employee-permission-category:hover,.employee-permission-category:focus-visible { outline:none;border-color:rgba(var(--group-tone-rgb),.22);background:rgba(var(--group-tone-rgb),.06); }
.employee-permission-category.active { color:var(--group-tone);border-color:rgba(var(--group-tone-rgb),.34);background:rgba(var(--group-tone-rgb),.12); }
.employee-permission-category.active > i:first-child { color:#fff;background:var(--group-tone);box-shadow:0 6px 13px rgba(var(--group-tone-rgb),.22); }
.employee-permission-category.active > i:last-child { opacity:1; }
.employee-permission-category.has-selection small { color:var(--group-tone); }
.employee-permission-groups {
    display:block;
    min-height:0;
    padding:0;
    overflow-y:auto;
}
.employee-permission-group,
.employee-permission-group[data-permission-group] {
    min-height:100%;
    padding:18px;
    border:1px solid rgba(var(--group-tone-rgb),.2);
    border-radius:18px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.7)),rgba(var(--group-tone-rgb),.055));
    box-shadow:none;
}
.employee-permission-group[hidden] { display:none!important; }
.employee-permission-group legend { width:auto;padding:0 7px 12px; }
.employee-permission-group-heading { display:flex;align-items:center;gap:11px; }
.employee-permission-group-heading > i { width:42px;height:42px;border-radius:13px;font-size:19px!important; }
.employee-permission-group-heading > span { display:grid;gap:2px; }
.employee-permission-group-heading > span > b { color:var(--text1);font-size:14px;font-weight:900; }
.employee-permission-group-heading > span > small { color:var(--text2);font-size:10.5px;font-weight:750; }
.employee-permission-group > div { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:5px; }
.employee-permission-item > span { min-height:48px;padding:9px 11px;border:1px solid rgba(99,112,157,.14);border-radius:12px;background:var(--theme-glass, rgba(255,255,255,.42));font-size:11.5px; }
.employee-permission-item > span > b { font-weight:780;line-height:1.55; }
html[data-theme="dark"] .employee-permission-category.active { background:rgba(var(--group-tone-rgb),.17); }
html[data-theme="dark"] .employee-permission-group[data-permission-group] { background:linear-gradient(145deg,rgba(15,22,34,.55),rgba(var(--group-tone-rgb),.07)); }
html[data-theme="dark"] .employee-permission-item > span { background:rgba(15,22,34,.28);border-color:rgba(255,255,255,.08); }
@media (max-width:1050px) {
    .employee-permission-browser { grid-template-columns:190px minmax(0,1fr); }
    .employee-permission-group > div { grid-template-columns:1fr; }
}
@media (max-width:820px) {
    .employee-permission-browser { display:flex;flex-direction:column;gap:10px;overflow:visible; }
    .employee-permission-category-nav { flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:2px 2px 7px;scroll-snap-type:x proximity; }
    .employee-permission-category { min-width:170px;scroll-snap-align:start; }
    .employee-permission-category > i:last-child { transform:rotate(-90deg); }
    .employee-permission-groups { overflow:visible; }
    .employee-permission-group,.employee-permission-group[data-permission-group] { min-height:0;padding:14px; }
}
@media (max-width:480px) {
    .employee-permission-category { min-width:155px;grid-template-columns:30px minmax(0,1fr); }
    .employee-permission-category > i:first-child { width:30px;height:30px; }
    .employee-permission-category > i:last-child { display:none; }
    .employee-permission-group > div { grid-template-columns:1fr; }
}

/* ---------- permission-built employee workspace ---------- */
@media(min-width:761px){html.employee-workspace-mode #mainSidebar { display:flex!important; }}
@media(max-width:760px){html.employee-workspace-mode #mainSidebar:not(.mobile-open){display:none!important}html.employee-workspace-mode #mainSidebar.mobile-open{display:flex!important}}
/* Access control marks unavailable destinations with the native hidden
   attribute. Sidebar flex rules must never make those entries visible. */
html.employee-workspace-mode #mainSidebar [hidden] { display:none!important; }
html.employee-workspace-mode :is(#topBarSearch,#topBarNotifications,.top-bar-hamburger)[hidden] { display:none!important; }
html.employee-workspace-mode .app { display:flex; }
html.employee-workspace-mode .main { width:auto;padding:26px 32px; }
html.employee-workspace-mode .top-bar { grid-template-columns:auto minmax(0,1fr) auto; }
html.employee-workspace-mode .top-bar-brand { justify-self:center; }
.employee-home-btn { width:auto!important;min-width:44px;gap:7px;padding-inline:12px!important;color:var(--theme-ink, #5262d8);background:rgba(82,98,216,.1);font-size:11.5px;font-weight:850;white-space:nowrap;cursor:pointer; }
.employee-home-btn span { display:inline-block; }
.employee-workspace { max-width:1080px;margin:0 auto;padding:8px 0 34px; }
.employee-workspace-hero { position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:154px;padding:25px 27px;border:1px solid var(--theme-stroke, rgba(255,255,255,.82));border-radius:25px;background:radial-gradient(circle at 4% 0%,var(--theme-glass, rgba(255,255,255,.86)),transparent 36%),radial-gradient(circle at 100% 100%,rgba(92,96,226,.2),transparent 43%),linear-gradient(140deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(220,229,247,.63)));box-shadow:0 20px 48px rgba(36,48,101,.14),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.employee-workspace-hero::after { content:'';position:absolute;width:220px;height:220px;inset-inline-end:-80px;top:-125px;border-radius:50%;background:rgba(106,92,226,.12);filter:blur(3px);pointer-events:none; }
.employee-workspace-identity { position:relative;z-index:1;display:flex;align-items:center;gap:17px;min-width:0; }
.employee-workspace-avatar { width:66px;height:66px;display:grid;flex:0 0 66px;place-items:center;border:2px solid var(--theme-stroke, rgba(255,255,255,.85));border-radius:21px;color:#fff;background:linear-gradient(145deg,#7b6bea,#5069dc);box-shadow:0 12px 25px rgba(82,91,210,.28),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35));font-size:29px; }
.employee-workspace-avatar{padding:0;overflow:hidden;cursor:pointer;transition:transform .2s var(--ui-ease),box-shadow .2s ease}.employee-workspace-avatar img{width:100%;height:100%;object-fit:cover}.employee-workspace-avatar:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(82,91,210,.34),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35))}.employee-workspace-avatar:focus-visible{outline:3px solid rgba(79,105,224,.35);outline-offset:4px}.employee-profile-open-link{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:0;border:0;color:var(--theme-ink, #5268d8);background:transparent;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.employee-profile-open-link:hover{text-decoration:underline}.employee-profile-open-link:focus-visible{outline:2px solid #5268d8;outline-offset:4px;border-radius:4px}

/* Employee self-service profile: same registered fields, strictly read-only. */
.employee-self-profile-overlay{z-index:120;display:grid;place-items:center;padding:18px;background:rgba(22,30,58,.38);backdrop-filter:blur(13px)}.employee-self-profile{width:min(1000px,calc(100vw - 30px));max-height:calc(100dvh - 30px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border:1px solid var(--theme-stroke, rgba(255,255,255,.82));border-radius:28px;background:linear-gradient(145deg,var(--theme-glass, rgba(252,253,255,.97)),var(--theme-glass, rgba(241,245,255,.94)));box-shadow:0 32px 80px rgba(35,48,100,.26),inset 0 1px 0 var(--theme-highlight, #fff)}.employee-self-profile-head{position:relative;display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:15px;padding:20px 22px;border-bottom:1px solid rgba(78,101,181,.13);background:radial-gradient(circle at 82% 10%,rgba(88,112,228,.2),transparent 38%),var(--theme-glass, rgba(255,255,255,.72))}.employee-self-profile-photo{width:74px;height:74px;display:grid;place-items:center;overflow:hidden;border:3px solid var(--theme-stroke, #fff);border-radius:23px;color:#fff;background:linear-gradient(145deg,#7b6bea,#5069dc);box-shadow:0 10px 24px rgba(72,89,194,.24);font-size:30px}.employee-self-profile-photo img{width:100%;height:100%;object-fit:cover}.employee-self-profile-head small{color:var(--theme-ink, #5869c9);font-size:11px;font-weight:850}.employee-self-profile-head h2{margin:3px 0;color:var(--text1);font-size:22px}.employee-self-profile-head p{margin:0;color:var(--text2);font-size:12px;font-weight:750}.employee-self-profile-head p span.is-active{color:var(--success)}.employee-self-profile-head p span.is-inactive{color:var(--danger)}.employee-self-readonly{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border:1px solid rgba(83,105,210,.18);border-radius:999px;color:var(--theme-ink, #5367c9);background:var(--theme-glass, rgba(238,241,255,.84));font-size:11px;font-weight:850}.employee-self-profile-close{position:absolute;inset-inline-end:13px;top:13px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(77,91,148,.15);border-radius:13px;color:var(--text2);background:var(--theme-glass, rgba(255,255,255,.8));cursor:pointer;font-size:20px}.employee-self-profile-head>.employee-self-readonly{margin-inline-end:48px}.employee-self-profile-close:hover{color:#fff;background:var(--danger)}.employee-self-profile-close:focus-visible{outline:3px solid color-mix(in srgb,var(--danger) 30%,transparent);outline-offset:2px}.employee-self-profile-scroll{overflow:auto;padding:18px;scrollbar-gutter:stable}.employee-self-profile-section{padding:17px;border:1px solid rgba(77,96,164,.12);border-radius:20px;background:var(--theme-glass, rgba(255,255,255,.72));box-shadow:0 8px 24px rgba(46,61,113,.06)}.employee-self-profile-section+.employee-self-profile-section{margin-top:14px}.employee-self-section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}.employee-self-section-title>i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#6e7fea,#5067d7);font-size:20px}.employee-self-section-title h3{margin:0;color:var(--text1);font-size:15px}.employee-self-section-title p{margin:2px 0 0;color:var(--text2);font-size:11px}.employee-self-profile-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.employee-self-profile-field{min-width:0;display:grid;grid-template-columns:39px minmax(0,1fr);align-items:center;gap:9px;padding:10px;border:1px solid rgba(74,95,170,.11);border-radius:14px;background:var(--theme-glass, rgba(246,248,255,.85))}.employee-self-profile-field>span{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;color:var(--theme-ink, #5269d5);background:rgba(82,105,213,.1);font-size:18px}.employee-self-profile-field div{min-width:0;display:grid;gap:2px}.employee-self-profile-field small{color:var(--text2);font-size:10px}.employee-self-profile-field strong{overflow:hidden;color:var(--text1);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.employee-self-permissions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.employee-self-permission{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid color-mix(in srgb,var(--permission-tone) 20%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--permission-tone) 7%,var(--panel))}.employee-self-permission.is-on{--permission-tone:var(--success)}.employee-self-permission.is-off{--permission-tone:var(--text2)}.employee-self-permission>i{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--permission-tone);background:color-mix(in srgb,var(--permission-tone) 12%,transparent);font-size:20px}.employee-self-permission span{font-size:12px;font-weight:850}.employee-self-permission b{display:flex;align-items:center;gap:5px;color:var(--permission-tone);font-size:11px}.employee-self-account-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.employee-self-account-kpis>div{display:grid;gap:5px;padding:12px;border-radius:14px;background:var(--panel-2)}.employee-self-account-kpis small{color:var(--text2);font-size:10px}.employee-self-account-kpis strong{font-size:12px}.employee-self-account-kpis .is-warning{color:var(--warning)}.employee-self-account-kpis .is-good{color:var(--success)}.employee-self-activity-list{display:grid;gap:7px;margin-top:12px}.employee-self-activity-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border-bottom:1px solid var(--border)}.employee-self-activity-row>span{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--activity-tone);background:color-mix(in srgb,var(--activity-tone) 11%,transparent)}.employee-self-activity-row>div{min-width:0;display:grid;gap:2px}.employee-self-activity-row strong{overflow:hidden;font-size:11.5px;text-overflow:ellipsis;white-space:nowrap}.employee-self-activity-row small{color:var(--text2);font-size:10px}.employee-self-activity-row>b{font-size:11px;white-space:nowrap}.employee-self-profile-empty,.till-queue-empty{padding:22px;color:var(--text2);text-align:center}

/* Till attendant handover queue: operational, compact and action first. */
.till-queue-live{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;color:var(--success);background:var(--success-bg);font-size:10px;font-weight:850}.till-queue-live i{font-size:14px}.till-attendant-handover-kpis{display:grid;grid-template-columns:.7fr 1fr 1.35fr;gap:9px;margin-bottom:13px}.till-attendant-handover-kpis>div{display:grid;gap:6px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--warning) 14%,var(--border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--warning-bg) 48%,var(--panel)),var(--panel))}.till-attendant-handover-kpis span{display:flex;align-items:center;gap:5px;color:var(--text2);font-size:10px;font-weight:750}.till-attendant-handover-kpis strong{color:var(--text1);font-size:12px}.till-attendant-payment-list-item{grid-template-columns:42px minmax(0,1fr) auto auto auto!important;min-height:66px!important;padding:9px 11px!important}.till-attendant-payment-list-item .salary-payment-list-main small{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.till-attendant-confirm-btn{min-height:42px!important;white-space:nowrap}.till-queue-empty{display:grid;place-items:center;gap:5px}.till-queue-empty>i{font-size:30px;color:var(--success)}.till-queue-empty strong{color:var(--text1)}.till-queue-empty span{font-size:11px}

html[data-theme="dark"] .employee-self-profile{border-color:rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(27,36,53,.98),rgba(18,27,42,.97))}html[data-theme="dark"] .employee-self-profile-head,html[data-theme="dark"] .employee-self-profile-section{border-color:rgba(255,255,255,.09);background:rgba(31,42,60,.76)}html[data-theme="dark"] .employee-self-profile-field{border-color:rgba(255,255,255,.08);background:rgba(17,27,42,.5)}
@media(max-width:760px){.employee-self-profile-overlay{padding:0}.employee-self-profile{width:100%;height:100dvh;max-height:none;border-radius:0}.employee-self-profile-head{grid-template-columns:58px minmax(0,1fr);padding:15px 14px}.employee-self-profile-photo{width:58px;height:58px;border-radius:18px}.employee-self-profile-head h2{font-size:17px}.employee-self-readonly{grid-column:1/-1;width:max-content;margin:0!important}.employee-self-profile-scroll{padding:11px}.employee-self-profile-section{padding:12px;border-radius:16px}.employee-self-profile-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-self-account-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.till-attendant-handover-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.till-attendant-handover-kpis>div:last-child{grid-column:1/-1}.till-attendant-payment-list-item{grid-template-columns:38px minmax(0,1fr) auto!important}.till-attendant-payment-list-item .salary-payment-list-status{display:none}.till-attendant-payment-list-item .salary-payment-list-amount{grid-column:2}.till-attendant-confirm-btn{grid-column:1/-1;width:100%}}
@media(max-width:430px){.employee-self-profile-fields,.employee-self-permissions{grid-template-columns:1fr}.employee-self-activity-row{grid-template-columns:36px minmax(0,1fr)}.employee-self-activity-row>b{grid-column:2}}
@media(prefers-reduced-motion:reduce){.employee-workspace-avatar,.employee-self-profile-close{transition:none!important}.employee-workspace-avatar:hover{transform:none}}
.employee-workspace-identity>.employee-workspace-avatar{cursor:default;transition:none}.employee-workspace-identity>.employee-workspace-avatar:hover{transform:none;box-shadow:0 12px 25px rgba(82,91,210,.28),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35))}
.employee-self-profile-page{width:min(1180px,100%);margin-inline:auto;animation:fadeInUp .28s var(--ui-ease) both}.employee-self-profile-page .employee-self-profile-welcome{margin-bottom:14px}.employee-self-profile-page .employee-self-profile{width:100%;height:auto;max-height:none;display:block;overflow:visible;border-radius:24px}.employee-self-profile-page .employee-self-profile-head{grid-template-columns:74px minmax(0,1fr);border-radius:24px 24px 0 0}.employee-self-profile-page .employee-self-profile-scroll{overflow:visible;padding:18px}.employee-self-profile-page .employee-self-profile-head>div:last-child{min-width:0}
@media(max-width:760px){.employee-self-profile-page{width:100%}.employee-self-profile-page .employee-self-profile{width:100%;height:auto;max-height:none;border-radius:18px}.employee-self-profile-page .employee-self-profile-head{grid-template-columns:58px minmax(0,1fr);border-radius:18px 18px 0 0}.employee-self-profile-page .employee-self-profile-scroll{padding:11px}.employee-self-profile-page .employee-self-profile-welcome{margin-bottom:11px}}

/* Employee profile polish and shared clickable journal drill-down. */
.employee-profile-photo-button,.employee-self-profile-photo{border:0;cursor:zoom-in}.employee-profile-photo-button:not(:disabled):hover img,.employee-self-profile-photo:not(:disabled):hover img{transform:scale(1.06)}.employee-profile-photo-button img,.employee-self-profile-photo img{transition:transform .24s var(--ui-ease)}.employee-self-profile-photo:disabled{cursor:default}.employee-self-profile-photo:focus-visible,.employee-profile-photo-button:focus-visible{outline:3px solid rgba(94,111,224,.34);outline-offset:4px}
.employee-self-profile-section{--profile-section-tone:#5870dd;position:relative;overflow:hidden;animation:employeeProfileSectionIn .38s var(--ui-ease) both;transition:transform .22s var(--ui-ease),border-color .22s ease,box-shadow .22s ease}.employee-self-profile-section:nth-child(1){--profile-section-tone:#4f70df;animation-delay:35ms}.employee-self-profile-section:nth-child(2){--profile-section-tone:#7958cf;animation-delay:75ms}.employee-self-profile-section:nth-child(3){--profile-section-tone:#20a06b;animation-delay:115ms}.employee-self-profile-section:nth-child(4){--profile-section-tone:#d08718;animation-delay:155ms}.employee-self-profile-section::before{content:"";position:absolute;inset-block:13px;inset-inline-start:0;width:4px;border-radius:0 8px 8px 0;background:var(--profile-section-tone);display:none!important;}html[dir="rtl"] .employee-self-profile-section::before{border-radius:8px 0 0 8px}.employee-self-profile-section:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--profile-section-tone) 30%,var(--border));box-shadow:0 15px 34px color-mix(in srgb,var(--profile-section-tone) 11%,transparent)}.employee-self-profile-section .employee-self-section-title>i{background:linear-gradient(145deg,color-mix(in srgb,var(--profile-section-tone) 72%,white),var(--profile-section-tone));box-shadow:0 8px 18px color-mix(in srgb,var(--profile-section-tone) 25%,transparent)}
.employee-self-journal-section{min-height:220px}.employee-self-journal-count{display:inline-flex;align-items:center;gap:6px;margin:-4px 0 10px;padding:6px 9px;border-radius:999px;color:var(--profile-section-tone);background:color-mix(in srgb,var(--profile-section-tone) 10%,transparent);font-size:10px;font-weight:850}.employee-self-journal-list{display:grid;gap:8px}.is-clickable-journal{position:relative;cursor:pointer;transition:transform .18s var(--ui-ease),border-color .18s ease,box-shadow .18s ease}.is-clickable-journal:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--activity-tone,var(--event-tone)) 35%,var(--border));box-shadow:0 10px 22px color-mix(in srgb,var(--activity-tone,var(--event-tone)) 10%,transparent)}.is-clickable-journal:focus-visible{outline:3px solid color-mix(in srgb,var(--activity-tone,var(--event-tone)) 28%,transparent);outline-offset:3px}.journal-detail-arrow{color:var(--text2);font-size:17px;transition:transform .18s ease}.is-clickable-journal:hover .journal-detail-arrow{transform:translateX(-3px)}html[dir="rtl"] .is-clickable-journal:hover .journal-detail-arrow{transform:translateX(3px)}
.journal-detail-overlay{z-index:140;display:grid;place-items:center;padding:16px;background:rgba(19,27,51,.45);backdrop-filter:blur(11px)}.journal-detail-modal{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;border:1px solid var(--theme-stroke, rgba(255,255,255,.78));border-radius:24px;background:linear-gradient(145deg,var(--panel),var(--panel-2));box-shadow:0 28px 70px rgba(24,34,75,.3)}.journal-detail-modal>header{display:grid;grid-template-columns:50px minmax(0,1fr) 42px;align-items:center;gap:11px;padding:16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,color-mix(in srgb,var(--journal-tone) 12%,var(--panel)),var(--panel))}.journal-detail-modal>header>span{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;color:#fff;background:var(--journal-tone);font-size:23px;box-shadow:0 8px 18px color-mix(in srgb,var(--journal-tone) 28%,transparent)}.journal-detail-modal header small{color:var(--journal-tone);font-size:10px;font-weight:850}.journal-detail-modal header h3{margin:2px 0 0;font-size:17px}.journal-detail-modal header button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--border);border-radius:13px;color:var(--text2);background:var(--panel);cursor:pointer;font-size:19px}.journal-detail-modal header button:hover{color:#fff;background:var(--danger)}.journal-detail-summary{margin:14px;padding:13px;border-radius:14px;color:var(--text1);background:color-mix(in srgb,var(--journal-tone) 8%,var(--panel-2));font-size:13px;font-weight:800;line-height:1.8}.journal-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:0 14px}.journal-detail-meta span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:10px;color:var(--text2);background:var(--panel-2);font-size:10px}.journal-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px}.journal-detail-grid>div{min-width:0;display:grid;gap:4px;padding:10px 11px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}.journal-detail-grid span,.journal-detail-modal footer span{color:var(--text2);font-size:10px}.journal-detail-grid strong{overflow-wrap:anywhere;font-size:12px}.journal-detail-modal footer{display:grid;gap:5px;margin:0 14px 14px;padding:10px 12px;border-radius:13px;background:var(--panel-2)}.journal-detail-modal footer bdi{overflow-wrap:anywhere;color:var(--text1);font-size:10px}
@keyframes employeeProfileSectionIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.journal-detail-grid{grid-template-columns:1fr}.journal-detail-modal{border-radius:18px}.employee-self-profile-section:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.employee-self-profile-section,.is-clickable-journal,.journal-detail-arrow,.employee-profile-photo-button img,.employee-self-profile-photo img{animation:none!important;transition:none!important}.is-clickable-journal:hover,.employee-self-profile-section:hover{transform:none}}

/* Employee financial profile: keep cash custody and payroll consequences
   visually separate so a deduction cannot be mistaken for cash still owed. */
.employee-self-profile-page{--profile-card-radius:22px}.employee-self-profile-page .employee-self-profile{border-color:color-mix(in srgb,var(--accent-solid) 18%,var(--border));background:linear-gradient(155deg,color-mix(in srgb,var(--panel) 94%,var(--theme-surface, #eef3ff)),var(--panel))}.employee-self-profile-page .employee-self-profile-scroll{display:grid;gap:16px}.employee-self-profile-page .employee-self-profile-section+.employee-self-profile-section{margin-top:0}.employee-self-profile-page .employee-self-profile-section{padding:20px;border-radius:var(--profile-card-radius);background:color-mix(in srgb,var(--panel) 94%,var(--profile-section-tone) 6%)}.employee-self-finance-section{background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 93%,var(--theme-surface, #e8fff4)),var(--panel))!important}.employee-self-account-kpis>div{position:relative;overflow:hidden;min-height:82px;padding:15px;border:1px solid color-mix(in srgb,var(--profile-section-tone) 13%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,var(--profile-section-tone) 5%)}.employee-self-account-kpis>div::after{content:"";position:absolute;inset-inline-end:-20px;inset-block-end:-24px;width:64px;height:64px;border-radius:50%;background:color-mix(in srgb,var(--profile-section-tone) 9%,transparent)}.employee-self-account-kpis strong{font-size:15px}.employee-self-activity-row.is-shortage{border:1px solid color-mix(in srgb,var(--danger) 24%,var(--border));border-radius:14px;background:var(--danger-bg)}.employee-self-activity-row.is-shortage>div strong,.employee-self-activity-row.is-shortage>b{color:var(--danger)!important}.employee-deduction-reasons{margin-top:18px;padding:16px;border:1px solid color-mix(in srgb,var(--danger) 22%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--danger-bg) 58%,var(--panel))}.employee-deduction-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}.employee-deduction-head>span{width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:13px;color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--panel));font-size:20px}.employee-deduction-head h4{margin:0;color:var(--text1);font-size:14px}.employee-deduction-head p{margin:3px 0 0;color:var(--text2);font-size:11px;line-height:1.65}.employee-deduction-list{display:grid;gap:9px}.employee-deduction-reason-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px;border:1px solid color-mix(in srgb,var(--danger) 18%,var(--border));border-radius:15px;background:var(--panel);box-shadow:0 5px 16px rgba(86,45,45,.045);animation:fadeInUp .3s var(--ui-ease) both}.employee-deduction-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;color:var(--danger);background:var(--danger-bg);font-size:20px}.employee-deduction-copy{min-width:0}.employee-deduction-copy>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.employee-deduction-copy strong{color:var(--danger);font-size:12px}.employee-deduction-copy time{color:var(--text2);font-size:10px;white-space:nowrap}.employee-deduction-copy p{margin:5px 0 0;color:var(--text1);font-size:11.5px;line-height:1.75;white-space:normal}.employee-deduction-copy p b{color:var(--text2)}.employee-deduction-copy small{display:flex;align-items:center;gap:5px;margin-top:4px;color:var(--text2);font-size:9.5px}.employee-deduction-amount{color:var(--danger);font-size:13px;white-space:nowrap}.employee-deduction-empty{display:flex;align-items:center;gap:8px;padding:12px;border-radius:13px;color:var(--success);background:var(--success-bg);font-size:11.5px;font-weight:800}.handover-shortage-panel{border-color:color-mix(in srgb,var(--danger) 34%,var(--border));background:color-mix(in srgb,var(--danger-bg) 72%,var(--panel))}.handover-shortage-panel textarea{border-color:color-mix(in srgb,var(--danger) 28%,var(--border))}.handover-confirm-summary .is-short strong{color:var(--danger)!important}
@media(max-width:700px){.employee-deduction-reason-card{grid-template-columns:38px minmax(0,1fr)}.employee-deduction-amount{grid-column:2}.employee-deduction-copy>div{align-items:flex-start;flex-direction:column;gap:2px}.employee-self-profile-page .employee-self-profile-section{padding:14px}.employee-self-account-kpis{grid-template-columns:1fr 1fr}}

/* Employee profile — compact horizontal identity card inspired by the employee registry */
.employee-profile-reference-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px;padding:20px 24px;border:1px solid color-mix(in srgb,var(--accent-solid) 17%,var(--border));border-radius:24px;background:linear-gradient(118deg,color-mix(in srgb,var(--panel) 96%,var(--theme-surface, #fff)),color-mix(in srgb,var(--panel) 86%,var(--theme-surface, #dce9ff)));box-shadow:0 18px 48px rgba(51,72,132,.09);position:relative;overflow:hidden}.employee-profile-reference-header::after{content:"";position:absolute;inset-inline-end:-60px;inset-block-start:-90px;width:250px;height:250px;border-radius:50%;background:color-mix(in srgb,var(--accent-solid) 8%,transparent);pointer-events:none}.employee-profile-reference-name{min-width:0;position:relative;z-index:1}.employee-profile-reference-name small{display:block;margin-bottom:4px;color:var(--accent-solid);font-size:10px;font-weight:850}.employee-profile-reference-name h1{margin:0;color:var(--text1);font-size:clamp(19px,2.3vw,28px);line-height:1.35}.employee-profile-reference-name span{display:block;margin-top:5px;color:var(--text2);font-size:11px;font-weight:700}.employee-profile-shift-pill{display:flex;align-items:center;gap:10px;flex:none;min-width:210px;padding:10px 12px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--panel) 84%,var(--bg2));position:relative;z-index:1}.employee-profile-shift-pill>i{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;font-size:20px}.employee-profile-shift-pill div{display:grid;gap:2px;min-width:0}.employee-profile-shift-pill small{color:var(--text2);font-size:9px}.employee-profile-shift-pill strong{overflow:hidden;color:var(--text1);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.employee-profile-shift-pill time{margin-inline-start:auto;padding:5px 8px;border-radius:9px;background:var(--panel);color:var(--text1);font-size:10px;font-weight:850}.employee-profile-shift-pill.is-running{border-color:color-mix(in srgb,var(--success) 25%,var(--border));background:color-mix(in srgb,var(--success-bg) 72%,var(--panel))}.employee-profile-shift-pill.is-running>i{color:var(--success);background:color-mix(in srgb,var(--success) 13%,var(--panel));animation:profileShiftPulse 2s ease-in-out infinite}.employee-profile-shift-pill.is-idle>i{color:var(--text2);background:var(--bg2)}
.employee-profile-reference-card{display:grid!important;grid-template-columns:190px minmax(0,1fr);align-items:stretch;gap:24px;direction:ltr;padding:24px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 97%,var(--theme-surface, #fff)),color-mix(in srgb,var(--panel) 91%,var(--theme-surface, #e7efff)))!important}.employee-profile-reference-details{min-width:0;direction:rtl}.employee-profile-reference-photo{position:relative;align-self:center;width:166px;height:218px;margin:auto;border:0;border-radius:25px;padding:5px;background:linear-gradient(145deg,var(--theme-surface, #fff),color-mix(in srgb,var(--warning) 28%,var(--theme-surface, #fff)));box-shadow:0 15px 34px rgba(48,65,112,.16);overflow:hidden;cursor:zoom-in;transition:transform .25s var(--ui-ease),box-shadow .25s var(--ui-ease)}.employee-profile-reference-photo img{width:100%;height:100%;display:block;object-fit:cover;border-radius:20px}.employee-profile-reference-photo>i{width:100%;height:100%;display:grid;place-items:center;border-radius:20px;background:var(--bg2);color:var(--accent-solid);font-size:52px}.employee-profile-reference-photo>span{position:absolute;inset-inline-end:12px;inset-block-end:12px;width:35px;height:35px;display:grid;place-items:center;border-radius:12px;color:#fff;background:rgba(24,35,72,.78);box-shadow:0 6px 16px rgba(19,29,63,.24);opacity:0;transform:translateY(5px);transition:.2s var(--ui-ease)}.employee-profile-reference-photo:hover,.employee-profile-reference-photo:focus-visible{transform:translateY(-3px);box-shadow:0 20px 42px rgba(48,65,112,.22)}.employee-profile-reference-photo:hover>span,.employee-profile-reference-photo:focus-visible>span{opacity:1;transform:none}.employee-profile-reference-photo:disabled{cursor:default}.employee-profile-reference-card .employee-self-section-title{align-items:center;margin-bottom:12px}.employee-profile-reference-card .employee-self-section-title>i{background:linear-gradient(145deg,var(--accent-solid),#7958ed);color:#fff}.employee-profile-status{display:inline-flex;align-items:center;gap:5px;margin-inline-start:auto;padding:6px 10px;border-radius:999px;font-size:10px;white-space:nowrap}.employee-profile-status.is-active{color:var(--success);background:var(--success-bg)}.employee-profile-status.is-inactive{color:var(--danger);background:var(--danger-bg)}.employee-profile-reference-card .employee-self-profile-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}.employee-profile-reference-card .employee-self-profile-field{min-height:66px;border:0;border-bottom:1px solid color-mix(in srgb,var(--accent-solid) 13%,var(--border));border-radius:0;background:transparent;box-shadow:none}.employee-profile-inline-permissions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.employee-profile-inline-permissions .employee-self-permission{min-height:58px}
.employee-profile-section-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:9px;border:1px solid color-mix(in srgb,var(--accent-solid) 14%,var(--border));border-radius:20px;background:color-mix(in srgb,var(--panel) 89%,var(--theme-surface, #f1edff));box-shadow:0 12px 30px rgba(59,66,110,.07)}.employee-profile-section-nav button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--text2);font-family:inherit;font-size:11px;font-weight:850;cursor:pointer;transition:transform .2s var(--ui-ease),background .2s,color .2s,box-shadow .2s}.employee-profile-section-nav button i{width:31px;height:31px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent-solid) 9%,var(--panel));color:var(--accent-solid);font-size:17px}.employee-profile-section-nav button:hover,.employee-profile-section-nav button:focus-visible{color:var(--accent-solid);background:var(--panel);box-shadow:0 8px 18px rgba(58,70,128,.1);transform:translateY(-2px)}#employeeProfileIdentity,#employeeProfileFinance,#employeeProfileDeductions,#employeeProfileJournal{scroll-margin-top:20px}
html[dir="ltr"] .employee-profile-reference-details{direction:ltr}
@keyframes profileShiftPulse{50%{transform:scale(1.06);box-shadow:0 0 0 7px color-mix(in srgb,var(--success) 8%,transparent)}}
@media(max-width:900px){.employee-profile-reference-card{grid-template-columns:150px minmax(0,1fr);gap:18px}.employee-profile-reference-photo{width:138px;height:184px}.employee-profile-reference-card .employee-self-profile-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.employee-profile-reference-header{align-items:stretch;flex-direction:column;padding:16px;border-radius:19px}.employee-profile-shift-pill{width:100%;min-width:0}.employee-profile-reference-card{grid-template-columns:1fr;padding:16px!important}.employee-profile-reference-photo{width:132px;height:166px}.employee-profile-reference-card .employee-self-section-title{align-items:flex-start}.employee-profile-status{margin-inline-start:0}.employee-profile-reference-card .employee-self-profile-fields{grid-template-columns:1fr}.employee-profile-inline-permissions{grid-template-columns:1fr}.employee-profile-section-nav{grid-template-columns:1fr 1fr;padding:7px;border-radius:17px}.employee-profile-section-nav button{justify-content:flex-start;min-height:48px}.employee-profile-reference-photo>span{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.employee-profile-shift-pill.is-running>i{animation:none}.employee-profile-reference-photo,.employee-profile-section-nav button{transition:none}}

/* Employee self-profile section tabs — content switching, not page scrolling */
.employee-profile-section-nav button{--profile-tab-tone:var(--accent-solid);position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--profile-tab-tone) 16%,var(--border));background:color-mix(in srgb,var(--profile-tab-tone) 5%,var(--panel));color:color-mix(in srgb,var(--profile-tab-tone) 78%,var(--text1))}.employee-profile-section-nav button.is-identity{--profile-tab-tone:#4f6fe8}.employee-profile-section-nav button.is-finance{--profile-tab-tone:#16a66c}.employee-profile-section-nav button.is-deductions{--profile-tab-tone:#df8a20}.employee-profile-section-nav button.is-journal{--profile-tab-tone:#7659df}.employee-profile-section-nav button i{color:var(--profile-tab-tone);background:color-mix(in srgb,var(--profile-tab-tone) 12%,var(--panel))}.employee-profile-section-nav button::after{content:"";position:absolute;inset-inline:18px;inset-block-end:0;height:3px;border-radius:4px 4px 0 0;background:var(--profile-tab-tone);opacity:0;transform:scaleX(.35);transition:.22s var(--ui-ease)}.employee-profile-section-nav button:is(:hover,:focus-visible){color:var(--profile-tab-tone);border-color:color-mix(in srgb,var(--profile-tab-tone) 34%,var(--border));background:color-mix(in srgb,var(--profile-tab-tone) 8%,var(--panel))}.employee-profile-section-nav button.is-active{color:#fff;border-color:transparent;background:linear-gradient(135deg,color-mix(in srgb,var(--profile-tab-tone) 86%,var(--theme-surface, #fff)),var(--profile-tab-tone));box-shadow:0 10px 24px color-mix(in srgb,var(--profile-tab-tone) 23%,transparent);transform:translateY(-2px)}.employee-profile-section-nav button.is-active i{color:var(--profile-tab-tone);background:var(--theme-surface, #fff)}.employee-profile-section-nav button.is-active::after{opacity:1;transform:scaleX(1);background:var(--theme-surface, #fff)}.employee-profile-tab-stage{display:grid;gap:16px;min-width:0;animation:employeeProfileTabIn .25s var(--ui-ease) both}.employee-profile-tab-stage>.employee-history-filter{margin:0}.employee-profile-tab-panel{margin:0!important}.employee-profile-deductions-panel{--profile-section-tone:#df8a20}.employee-profile-deductions-panel .employee-deduction-reasons{margin-top:0}.employee-profile-tab-panel#employeeProfileJournal{--profile-section-tone:#7659df}@keyframes employeeProfileTabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:640px){.employee-profile-section-nav button{justify-content:center;min-height:56px;padding-inline:8px;text-align:center}.employee-profile-section-nav button span{line-height:1.45}.employee-profile-section-nav button.is-active{transform:none}}
@media(prefers-reduced-motion:reduce){.employee-profile-tab-stage{animation:none}.employee-profile-section-nav button::after{transition:none}}

/* Employee profile tabs — flat rail, framed selection and active-tone surfaces */
.employee-self-profile-page .employee-self-profile{border-color:color-mix(in srgb,var(--employee-profile-active-tone) 24%,var(--border));background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 94%,var(--employee-profile-active-tone) 6%),var(--panel));transition:border-color .24s ease,background .24s ease}.employee-self-profile-page .employee-self-profile-scroll{background:radial-gradient(circle at 86% 4%,color-mix(in srgb,var(--employee-profile-active-tone) 8%,transparent),transparent 31%);border-radius:inherit;transition:background .24s ease}.employee-self-profile-page .employee-profile-section-nav{gap:4px;padding:6px 8px;border-color:color-mix(in srgb,var(--employee-profile-active-tone) 18%,var(--border));border-radius:21px;background:linear-gradient(110deg,color-mix(in srgb,var(--panel) 92%,var(--theme-surface, #eef1ff)),color-mix(in srgb,var(--panel) 89%,var(--employee-profile-active-tone) 11%));box-shadow:0 11px 28px color-mix(in srgb,var(--employee-profile-active-tone) 8%,transparent);transition:border-color .24s ease,background .24s ease}.employee-self-profile-page .employee-profile-section-nav button{min-height:66px;border-color:transparent;border-radius:15px;background:transparent;box-shadow:none;color:var(--text1);transform:none}.employee-self-profile-page .employee-profile-section-nav button i{width:36px;height:36px;border-radius:12px;font-size:19px}.employee-self-profile-page .employee-profile-section-nav button::after{inset-inline:20px;height:4px;border-radius:5px 5px 0 0;background:var(--profile-tab-tone)}.employee-self-profile-page .employee-profile-section-nav button:is(:hover,:focus-visible):not(.is-active){border-color:color-mix(in srgb,var(--profile-tab-tone) 22%,transparent);background:color-mix(in srgb,var(--profile-tab-tone) 9%,var(--panel));color:var(--profile-tab-tone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--profile-tab-tone) 10%,transparent)}.employee-self-profile-page .employee-profile-section-nav button:is(:hover,:focus-visible):not(.is-active)::after{opacity:.58;transform:scaleX(.72)}.employee-self-profile-page .employee-profile-section-nav button.is-active{border-color:color-mix(in srgb,var(--profile-tab-tone) 38%,var(--border));background:color-mix(in srgb,var(--profile-tab-tone) 11%,var(--panel));color:color-mix(in srgb,var(--profile-tab-tone) 86%,var(--text1));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--theme-highlight, #fff) 80%,transparent),0 8px 19px color-mix(in srgb,var(--profile-tab-tone) 12%,transparent);transform:none}.employee-self-profile-page .employee-profile-section-nav button.is-active i{color:var(--profile-tab-tone);background:color-mix(in srgb,var(--profile-tab-tone) 15%,var(--panel))}.employee-self-profile-page .employee-profile-section-nav button.is-active::after{background:var(--profile-tab-tone)}
.employee-self-profile-page .employee-profile-tab-stage>.employee-history-filter,.employee-self-profile-page .employee-profile-tab-panel{border-color:color-mix(in srgb,var(--employee-profile-active-tone) 25%,var(--border));background:linear-gradient(142deg,color-mix(in srgb,var(--panel) 96%,var(--theme-surface, #fff)),color-mix(in srgb,var(--panel) 91%,var(--employee-profile-active-tone) 9%))!important;box-shadow:0 14px 32px color-mix(in srgb,var(--employee-profile-active-tone) 8%,transparent);transition:border-color .24s ease,background .24s ease}.employee-self-profile-page .employee-profile-tab-panel{--profile-section-tone:var(--employee-profile-active-tone)}.employee-self-profile-page .employee-history-filter::before,.employee-self-profile-page .employee-profile-tab-panel::before{background:var(--employee-profile-active-tone)}.employee-self-profile-page .employee-history-filter-head>span{color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--employee-profile-active-tone) 78%,var(--theme-surface, #fff)),var(--employee-profile-active-tone));box-shadow:0 8px 18px color-mix(in srgb,var(--employee-profile-active-tone) 22%,transparent)}.employee-self-profile-page .employee-history-filter .btn-primary{border-color:var(--employee-profile-active-tone);background:var(--employee-profile-active-tone);box-shadow:0 8px 18px color-mix(in srgb,var(--employee-profile-active-tone) 20%,transparent)}
html[data-theme="dark"] .employee-self-profile-page .employee-profile-section-nav button.is-active{background:color-mix(in srgb,var(--profile-tab-tone) 24%,var(--panel));color:#fff}html[data-theme="dark"] .employee-self-profile-page .employee-profile-tab-stage>.employee-history-filter,html[data-theme="dark"] .employee-self-profile-page .employee-profile-tab-panel{background:linear-gradient(142deg,color-mix(in srgb,var(--panel) 94%,#101827),color-mix(in srgb,var(--panel) 83%,var(--employee-profile-active-tone) 17%))!important}
@media(max-width:640px){.employee-self-profile-page .employee-profile-section-nav{gap:6px}.employee-self-profile-page .employee-profile-section-nav button{min-height:62px;border:1px solid color-mix(in srgb,var(--profile-tab-tone) 13%,var(--border))}}

/* Employee profile readability and semantic field colors */
.employee-self-profile-page{font-size:15px}.employee-self-profile-page .employee-profile-reference-name small{font-size:12px}.employee-self-profile-page .employee-profile-reference-name span{font-size:13px}.employee-self-profile-page .employee-profile-shift-pill small{font-size:11px}.employee-self-profile-page .employee-profile-shift-pill strong{font-size:13px}.employee-self-profile-page .employee-profile-shift-pill>i{width:46px;height:46px;font-size:23px}.employee-self-profile-page .employee-profile-section-nav button{font-size:13px;font-weight:900}.employee-self-profile-page .employee-profile-section-nav button i{width:40px;height:40px;font-size:21px}.employee-self-profile-page .employee-self-section-title>i{width:48px;height:48px;border-radius:15px;font-size:23px}.employee-self-profile-page .employee-self-section-title h2,.employee-self-profile-page .employee-self-section-title h3{font-size:19px;font-weight:950}.employee-self-profile-page .employee-self-section-title p{font-size:12.5px;font-weight:650;line-height:1.7}.employee-self-profile-page .employee-profile-status{padding:7px 12px;font-size:11.5px;font-weight:900}.employee-self-profile-page .employee-self-profile-field{grid-template-columns:46px minmax(0,1fr);gap:11px;min-height:74px}.employee-self-profile-page .employee-self-profile-field>span{--field-tone:#4f6fe8;width:44px;height:44px;border-radius:14px;color:var(--field-tone);background:color-mix(in srgb,var(--field-tone) 12%,var(--panel));font-size:21px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--field-tone) 8%,transparent)}.employee-self-profile-page .employee-self-profile-field small{font-size:11.5px;font-weight:700}.employee-self-profile-page .employee-self-profile-field strong{font-size:14px;font-weight:950}.employee-self-profile-page .employee-self-profile-field:nth-child(1)>span{--field-tone:#376fe8}.employee-self-profile-page .employee-self-profile-field:nth-child(2)>span{--field-tone:#7a58dd}.employee-self-profile-page .employee-self-profile-field:nth-child(3)>span{--field-tone:#168fbd}.employee-self-profile-page .employee-self-profile-field:nth-child(4)>span{--field-tone:#7659df}.employee-self-profile-page .employee-self-profile-field:nth-child(5)>span{--field-tone:#b45bc2}.employee-self-profile-page .employee-self-profile-field:nth-child(6)>span{--field-tone:#0f9d89}.employee-self-profile-page .employee-self-profile-field:nth-child(7)>span{--field-tone:#e28a1d}.employee-self-profile-page .employee-self-profile-field:nth-child(8)>span{--field-tone:#168bb5}.employee-self-profile-page .employee-self-profile-field:nth-child(9)>span{--field-tone:#e36843}.employee-self-profile-page .employee-self-profile-field:nth-child(10)>span{--field-tone:#159968}.employee-self-profile-page .employee-self-profile-field:nth-child(11)>span{--field-tone:#5369d9}.employee-self-profile-page .employee-self-permission{grid-template-columns:48px minmax(0,1fr) auto;min-height:68px}.employee-self-profile-page .employee-self-permission>i{width:46px;height:46px;font-size:22px}.employee-self-profile-page .employee-self-permission span{font-size:14px;font-weight:950}.employee-self-profile-page .employee-self-permission b{font-size:12.5px;font-weight:900}.employee-self-profile-page .employee-self-account-kpis small{font-size:11.5px;font-weight:700}.employee-self-profile-page .employee-self-account-kpis strong{font-size:16px}.employee-self-profile-page .employee-self-activity-row strong{font-size:13.5px}.employee-self-profile-page .employee-self-activity-row small{font-size:11.5px}.employee-self-profile-page .employee-self-activity-row>b{font-size:13px}.employee-self-profile-page .employee-history-filter-head h3{font-size:17px}.employee-self-profile-page .employee-history-filter-head p{font-size:12px}.employee-self-profile-page .employee-deduction-copy strong{font-size:13.5px}.employee-self-profile-page .employee-deduction-copy p{font-size:12.5px}.employee-self-profile-page .employee-deduction-amount{font-size:14px}.employee-self-profile-page .employee-self-journal-list{font-size:13px}
@media(max-width:640px){.employee-self-profile-page{font-size:14px}.employee-self-profile-page .employee-profile-section-nav button{font-size:12px}.employee-self-profile-page .employee-profile-section-nav button i{width:36px;height:36px;font-size:19px}.employee-self-profile-page .employee-self-profile-field strong{font-size:13.5px}.employee-self-profile-page .employee-self-section-title h2,.employee-self-profile-page .employee-self-section-title h3{font-size:17px}}

/* Journal transaction details — translated, semantic and audit friendly */
.journal-detail-overlay{background:rgba(21,29,52,.52);backdrop-filter:blur(15px) saturate(110%)}.journal-detail-modal{width:min(760px,calc(100vw - 24px));border-color:color-mix(in srgb,var(--journal-tone) 24%,var(--theme-stroke, rgba(255,255,255,.8)));border-radius:28px;background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 96%,var(--theme-surface, #fff)),color-mix(in srgb,var(--panel) 90%,var(--journal-tone) 10%));box-shadow:0 34px 90px rgba(20,29,65,.34),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85));animation:journalModalIn .24s var(--ui-ease) both}.journal-detail-modal>header{grid-template-columns:58px minmax(0,1fr) 46px;gap:14px;padding:19px 21px;background:radial-gradient(circle at 12% 0,color-mix(in srgb,var(--journal-tone) 15%,transparent),transparent 38%),color-mix(in srgb,var(--panel) 93%,var(--journal-tone) 7%)}.journal-detail-modal>header>span{width:56px;height:56px;border-radius:18px;font-size:26px}.journal-detail-modal header small{font-size:11.5px}.journal-detail-modal header h3{font-size:20px;font-weight:950}.journal-detail-modal header button{width:46px;height:46px;border-radius:15px;font-size:21px;transition:.2s var(--ui-ease)}.journal-detail-modal header button:hover{transform:rotate(6deg);box-shadow:0 8px 18px color-mix(in srgb,var(--danger) 22%,transparent)}.journal-detail-body{padding:18px}.journal-detail-summary{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:start;gap:11px;margin:0 0 13px;padding:15px 16px;border:1px solid color-mix(in srgb,var(--journal-tone) 18%,var(--border));border-radius:17px;background:color-mix(in srgb,var(--journal-tone) 8%,var(--panel));font-size:14px;font-weight:850;line-height:1.9}.journal-detail-summary>i{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--journal-tone);background:color-mix(in srgb,var(--journal-tone) 13%,var(--panel));font-size:20px}.journal-detail-meta{gap:8px;padding:0;margin-bottom:13px}.journal-detail-meta span{padding:7px 10px;border:1px solid color-mix(in srgb,var(--journal-tone) 10%,var(--border));border-radius:11px;font-size:11.5px;font-weight:750}.journal-detail-meta i{color:var(--journal-tone);font-size:15px}.journal-detail-grid{gap:10px;padding:0}.journal-detail-grid>div.journal-detail-field{position:relative;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;min-height:78px;padding:12px 13px;border-color:color-mix(in srgb,var(--journal-tone) 16%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,var(--journal-tone) 6%);transition:transform .18s var(--ui-ease),border-color .18s ease,box-shadow .18s ease}.journal-detail-field:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--journal-tone) 34%,var(--border))!important;box-shadow:0 9px 20px color-mix(in srgb,var(--journal-tone) 9%,transparent)}.journal-detail-field>i{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;align-self:center;border-radius:12px;color:var(--journal-tone);background:color-mix(in srgb,var(--journal-tone) 12%,var(--panel));font-size:19px}.journal-detail-grid .journal-detail-field span{align-self:end;color:var(--text2);font-size:11px;font-weight:750}.journal-detail-grid .journal-detail-field strong{align-self:start;color:var(--text1);font-size:13.5px;font-weight:950;line-height:1.55}.journal-detail-modal footer{gap:7px;margin:12px 0 0;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--journal-tone) 25%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--journal-tone) 7%,var(--panel))}.journal-detail-modal footer span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800}.journal-detail-modal footer span i{color:var(--journal-tone);font-size:16px}.journal-detail-modal footer bdi{font-size:11.5px;font-weight:800}@keyframes journalModalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}html[data-theme="dark"] .journal-detail-modal{background:linear-gradient(150deg,color-mix(in srgb,var(--panel) 95%,#111827),color-mix(in srgb,var(--panel) 82%,var(--journal-tone) 18%))}
@media(max-width:560px){.journal-detail-body{padding:12px}.journal-detail-modal>header{grid-template-columns:48px minmax(0,1fr) 44px;padding:14px}.journal-detail-modal>header>span{width:48px;height:48px;font-size:22px}.journal-detail-modal header h3{font-size:17px}.journal-detail-summary{grid-template-columns:36px minmax(0,1fr);padding:12px;font-size:13px}.journal-detail-summary>i{width:34px;height:34px}.journal-detail-grid>div.journal-detail-field{min-height:72px}}
@media(prefers-reduced-motion:reduce){.journal-detail-modal{animation:none}.journal-detail-field,.journal-detail-modal header button{transition:none}.journal-detail-field:hover,.journal-detail-modal header button:hover{transform:none}}
@media(max-width:430px){.employee-self-account-kpis{grid-template-columns:1fr}.employee-deduction-reasons{padding:12px}}
@media(prefers-reduced-motion:reduce){.employee-deduction-reason-card{animation:none}}

/* Profile history: compact five-row previews with one shared date range. */
.employee-history-filter{position:relative;padding:18px;border:1px solid color-mix(in srgb,#3d78dc 24%,var(--border));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 92%,var(--theme-surface, #e8f2ff)),var(--panel));box-shadow:0 10px 28px rgba(40,78,145,.07);overflow:visible}.employee-history-filter::before{content:"";position:absolute;inset-block:16px;inset-inline-start:0;width:4px;border-radius:0 8px 8px 0;background:#3d78dc;display:none!important;}.employee-history-filter.is-active{border-color:color-mix(in srgb,var(--success) 34%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 90%,var(--success-bg)),var(--panel))}.employee-history-filter.is-active::before{background:var(--success)}.employee-history-filter-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}.employee-history-filter-head>span{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:14px;color:#fff;background:linear-gradient(145deg,#5b91e9,#356dcc);box-shadow:0 8px 18px rgba(53,109,204,.22);font-size:21px}.employee-history-filter-head h3{margin:0;color:var(--text1);font-size:15px}.employee-history-filter-head p{margin:3px 0 0;color:var(--text2);font-size:11px}.employee-history-filter-head>b{display:flex;align-items:center;gap:6px;margin-inline-start:auto;padding:7px 10px;border-radius:999px;color:var(--success);background:var(--success-bg);font-size:10.5px}.employee-history-filter-controls{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr) auto auto;align-items:end;gap:9px}.employee-history-filter-controls>label{display:grid;gap:6px;color:var(--text2);font-size:10.5px;font-weight:800}.employee-history-filter-controls .date-picker-field{min-height:44px;border-color:color-mix(in srgb,#3d78dc 22%,var(--border));background:var(--panel)}.employee-history-range-arrow{align-self:center;color:var(--theme-ink, #5b78bd);font-size:19px}.employee-section-record-summary{display:flex;justify-content:flex-end;margin-top:12px}.employee-section-record-summary>span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;color:var(--text2);background:var(--panel-2);font-size:10.5px;font-weight:800}.employee-history-more{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:11px;border:1px dashed color-mix(in srgb,var(--profile-section-tone) 38%,var(--border));border-radius:14px;color:var(--profile-section-tone);background:color-mix(in srgb,var(--profile-section-tone) 6%,var(--panel));font:inherit;font-size:12px;font-weight:900;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}.employee-history-more:hover{border-style:solid;background:color-mix(in srgb,var(--profile-section-tone) 11%,var(--panel));box-shadow:0 7px 18px color-mix(in srgb,var(--profile-section-tone) 10%,transparent)}.employee-history-more:focus-visible{outline:3px solid color-mix(in srgb,var(--profile-section-tone) 25%,transparent);outline-offset:2px}.employee-history-more b{min-width:25px;padding:2px 7px;border-radius:999px;color:#fff;background:var(--profile-section-tone);font-size:10px}.employee-self-activity-list,.employee-self-journal-list{min-height:0}
html[dir="ltr"] .employee-history-range-arrow{transform:rotate(180deg)}html[data-theme="dark"] .employee-history-filter{background:linear-gradient(145deg,rgba(24,39,59,.96),rgba(18,28,43,.92))}
@media(max-width:850px){.employee-history-filter-controls{grid-template-columns:1fr 1fr}.employee-history-range-arrow{display:none}.employee-history-filter-controls>.btn{width:100%}}
@media(max-width:520px){.employee-history-filter{padding:14px;border-radius:18px}.employee-history-filter-head{align-items:flex-start;flex-wrap:wrap}.employee-history-filter-head>b{width:100%;margin:0}.employee-history-filter-controls{grid-template-columns:1fr}.employee-history-filter-controls .date-picker-field{min-height:48px}}
@media(prefers-reduced-motion:reduce){.employee-history-more{transition:none}}
.employee-workspace-identity div { min-width:0; }
.employee-workspace-identity small { color:var(--theme-ink, #5953bc);font-size:11px;font-weight:850; }
.employee-workspace-identity h1 { margin:4px 0 5px;color:var(--text1);font-size:clamp(20px,3vw,29px);font-weight:950;line-height:1.35; }
.employee-workspace-identity p { max-width:620px;margin:0;color:var(--text2);font-size:12px;font-weight:650;line-height:1.8; }
.employee-workspace-role { position:relative;z-index:1;display:grid;gap:4px;min-width:130px;padding:12px 15px;border:1px solid rgba(91,96,211,.18);border-radius:15px;background:var(--theme-glass, rgba(255,255,255,.55));text-align:center; }
.employee-workspace-role span { color:var(--text2);font-size:10px;font-weight:750; }.employee-workspace-role strong { color:var(--theme-ink, #514dbc);font-size:13px;font-weight:900; }
.employee-workspace-tools { margin-top:18px;padding:19px;border:1px solid var(--theme-stroke, rgba(255,255,255,.78));border-radius:23px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.68)),var(--theme-glass, rgba(229,236,249,.48)));box-shadow:0 16px 38px rgba(38,51,102,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
/* Employee dashboard follows the admin dashboard's ungrouped card rhythm. */
.employee-workspace .employee-workspace-tools { padding:0;border:0;border-radius:0;background:transparent;box-shadow:none; }
.employee-self-worktime { --self-time-tone:#566ee2;position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;overflow:hidden;margin-top:18px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--self-time-tone) 28%,var(--theme-stroke, rgba(255,255,255,.86)));border-radius:21px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--self-time-tone) 17%,transparent),transparent 44%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.9)),color-mix(in srgb,var(--self-time-tone) 7%,var(--theme-glass, rgba(238,244,252,.8))));box-shadow:0 13px 30px color-mix(in srgb,var(--self-time-tone) 12%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }
.employee-self-worktime.is-active { --self-time-tone:#169568; }.employee-self-worktime.is-error { --self-time-tone:#c65343; }
.employee-self-worktime::before { content:"";position:absolute;z-index:-1;inset:-70px auto auto -45px;width:170px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--self-time-tone) 18%,transparent);filter:blur(25px); }
.employee-self-worktime-icon { width:56px;height:56px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--self-time-tone) 65%,var(--theme-surface, #fff)),var(--self-time-tone));box-shadow:0 10px 22px color-mix(in srgb,var(--self-time-tone) 30%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.42));font-size:26px; }
.employee-self-worktime-copy { min-width:0; }.employee-self-worktime-copy>small { color:var(--self-time-tone);font-size:10px;font-weight:900; }.employee-self-worktime-copy h2 { display:flex;align-items:center;gap:7px;margin:2px 0 3px;color:var(--text1);font-size:16px;font-weight:950; }.employee-self-worktime-copy p { margin:0;color:var(--text2);font-size:11px;font-weight:650; }
.employee-self-worktime-meta { display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:7px; }.employee-self-worktime-meta span { display:inline-flex;align-items:center;gap:5px;color:var(--text2);font-size:10.5px;font-weight:700; }.employee-self-worktime-meta i { color:var(--self-time-tone);font-size:15px; }.employee-self-worktime-meta b { color:var(--text1);font-weight:900; }
.employee-self-worktime-live-dot { width:8px;height:8px;border-radius:50%;background:#13a66d;box-shadow:0 0 0 5px rgba(19,166,109,.12);animation:selfWorktimePulse 1.8s ease-in-out infinite; }
.employee-self-worktime-action { min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:0;border-radius:14px;color:#fff;background:var(--self-time-tone);font:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 9px 20px color-mix(in srgb,var(--self-time-tone) 27%,transparent);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }.employee-self-worktime-action.is-end { background:#c64c3e; }.employee-self-worktime-action:hover { transform:translateY(-2px);filter:saturate(1.08); }.employee-self-worktime-action:focus-visible { outline:3px solid color-mix(in srgb,var(--self-time-tone) 28%,transparent);outline-offset:3px; }.employee-self-worktime-action:disabled { opacity:.55;cursor:wait;transform:none; }
@keyframes selfWorktimePulse { 50% { transform:scale(1.18);box-shadow:0 0 0 7px rgba(19,166,109,.08); } }
.self-worktime-modal { --ui-tone:#237ca7;max-width:620px!important; }.self-worktime-modal>header { display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border); }.self-worktime-modal>header>span { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;color:#fff;background:linear-gradient(145deg,#43b5ca,#3564d6);font-size:23px;box-shadow:0 8px 18px rgba(53,100,214,.24); }.self-worktime-modal h3 { margin:0;color:var(--text1);font-size:18px; }.self-worktime-modal header p { margin:3px 0 0;color:var(--text2);font-size:11px; }
.self-worktime-pump-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }.self-worktime-pump { --self-pump-tone:#3474dc;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:12px;border:1px solid color-mix(in srgb,var(--self-pump-tone) 20%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--self-pump-tone) 6%,var(--theme-glass, rgba(255,255,255,.82)));cursor:pointer;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease; }.self-worktime-pump>input { position:absolute;opacity:0;pointer-events:none; }.self-worktime-pump>span { grid-row:1 / span 2;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--self-pump-tone);background:color-mix(in srgb,var(--self-pump-tone) 13%,white);font-size:20px; }.self-worktime-pump>b { color:var(--text1);font-size:12px;font-weight:900; }.self-worktime-pump>small { color:var(--text2);font-size:10px;font-weight:650; }.self-worktime-pump>i { grid-row:1 / span 2;color:transparent;font-size:21px; }.self-worktime-pump:has(input:checked) { border-color:var(--self-pump-tone);background:color-mix(in srgb,var(--self-pump-tone) 11%,white);box-shadow:0 0 0 3px color-mix(in srgb,var(--self-pump-tone) 11%,transparent); }.self-worktime-pump:has(input:checked)>i { color:var(--self-pump-tone); }.self-worktime-pump:focus-within { outline:3px solid color-mix(in srgb,var(--self-pump-tone) 22%,transparent);outline-offset:2px; }
html[data-theme="dark"] .employee-self-worktime { background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--self-time-tone) 18%,transparent),transparent 45%),linear-gradient(145deg,rgba(36,44,58,.94),rgba(22,29,41,.9));border-color:color-mix(in srgb,var(--self-time-tone) 30%,rgba(255,255,255,.1));box-shadow:0 15px 34px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08); }.self-worktime-pump { color-scheme:light; } html[data-theme="dark"] .self-worktime-pump { color-scheme:dark;background:color-mix(in srgb,var(--self-pump-tone) 10%,rgba(22,29,41,.9)); } html[data-theme="dark"] .self-worktime-pump:has(input:checked) { background:color-mix(in srgb,var(--self-pump-tone) 16%,rgba(22,29,41,.9)); }
.employee-quick-actions { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px; }
.employee-workspace .employee-workspace-tools>.employee-workspace-section-head { padding:0 4px; }
.employee-workspace .employee-shortcut-grid { gap:14px; }
.employee-dashboard-widgets { display:grid;gap:18px;margin-top:18px; }
.employee-dashboard-main-grid { display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,.82fr);grid-template-rows:auto auto;gap:18px;align-items:stretch; }
.employee-dashboard-main-grid>.compare-card { grid-column:1;grid-row:1;min-height:0;margin:0; }
.employee-dashboard-main-grid>.price-widget { grid-column:1;grid-row:2;min-height:0;margin:0; }
.employee-dashboard-main-grid>.employee-calendar-card { grid-column:2;grid-row:1 / span 2;margin:0; }
.employee-dashboard-main-grid :is(.compare-card,.price-widget,.side-card),.employee-dashboard-journal { border-color:var(--theme-stroke, rgba(255,255,255,.83));box-shadow:0 16px 38px rgba(38,51,102,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.93)); }
.employee-task-month { width:100%;min-height:45px;padding:8px 12px;border:1px solid rgba(113,95,225,.2);border-radius:13px;color:var(--text1);background:var(--theme-glass, rgba(255,255,255,.74));font:inherit;font-size:11.5px;font-weight:800;cursor:pointer; }
.employee-task-month:focus-visible { outline:3px solid rgba(113,95,225,.2);outline-offset:2px; }
.employee-dashboard-journal { margin:0!important; }
.employee-dashboard-journal .dashboard-journal-head { margin-bottom:8px; }
.employee-journal-tabs .filter-tab:disabled { opacity:.8;cursor:default; }
html[data-theme="dark"] .employee-dashboard-main-grid :is(.compare-card,.price-widget,.side-card),html[data-theme="dark"] .employee-dashboard-journal { border-color:rgba(255,255,255,.11); }
html[data-theme="dark"] .employee-task-month { border-color:rgba(255,255,255,.12);background:rgba(21,29,41,.72); }
.employee-overview { margin-top:18px;padding:19px;border:1px solid var(--theme-stroke, rgba(255,255,255,.78));border-radius:23px;background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.68)),var(--theme-glass, rgba(229,236,249,.48)));box-shadow:0 16px 38px rgba(38,51,102,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
.employee-overview-grid { display:grid;grid-template-columns:minmax(0,.85fr) minmax(280px,1fr);gap:14px; }
.employee-overview-card { min-width:0;padding:15px;border:1px solid color-mix(in srgb,var(--overview-card-tone) 24%,var(--theme-stroke, rgba(255,255,255,.85)));border-radius:18px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--overview-card-tone) 13%,transparent),transparent 43%),var(--theme-glass, rgba(255,255,255,.66));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.employee-overview-card.is-rates { --overview-card-tone:#16A3A5; }.employee-overview-card.is-calendar { --overview-card-tone:#D99016; }.employee-overview-card.is-journal { --overview-card-tone:#7B4DFF;grid-column:1 / -1; }
.employee-overview-card>header { display:flex;align-items:center;gap:8px;margin-bottom:12px; }.employee-overview-card>header>i { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:var(--overview-card-tone);font-size:18px;box-shadow:0 7px 15px color-mix(in srgb,var(--overview-card-tone) 25%,transparent); }.employee-overview-card h3 { flex:1;margin:0;color:var(--text1);font-size:13px;font-weight:900; }.employee-overview-card>header>strong { color:var(--overview-card-tone);font-size:11px;font-weight:850; }
.employee-rate-list { display:grid;gap:8px; }.employee-rate-list>div { min-height:45px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--overview-tone) 8%,var(--theme-glass, rgba(255,255,255,.7))); }.employee-rate-list span { display:flex;align-items:center;gap:7px;color:var(--text2);font-size:11px;font-weight:780; }.employee-rate-list i { color:var(--overview-tone);font-size:17px; }.employee-rate-list strong { color:var(--overview-tone);font-size:12px;font-weight:900; }
.employee-mini-weekdays,.employee-mini-calendar { display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center; }.employee-mini-weekdays { margin-bottom:5px;color:var(--text2);font-size:9px;font-weight:800; }.employee-mini-calendar span { position:relative;min-height:27px;display:grid;place-items:center;border-radius:8px;color:var(--text2);font-size:10.5px;font-weight:750; }.employee-mini-calendar .is-today { color:#fff;background:var(--overview-card-tone);box-shadow:0 5px 11px color-mix(in srgb,var(--overview-card-tone) 28%,transparent); }.employee-mini-calendar .has-task::after { content:'';position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:#E56B55; }
.employee-personal-journal { display:grid;gap:7px; }.employee-personal-journal>div { display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:48px;padding:7px 9px;border-radius:12px;background:var(--theme-glass, rgba(255,255,255,.52)); }.employee-personal-journal>div>span { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:var(--overview-tone);background:color-mix(in srgb,var(--overview-tone) 12%,var(--theme-glass, rgba(255,255,255,.7))); }.employee-personal-journal p { margin:0;color:var(--text1);font-size:11px;font-weight:750;line-height:1.6; }.employee-personal-journal time { color:var(--text1);font-size:10.5px;font-weight:850;text-align:end; }.employee-personal-journal time small { display:block;margin-top:2px;color:var(--text2);font-size:9px;font-weight:650; }.employee-overview-empty { padding:18px!important;color:var(--text2)!important;text-align:center; }
.employee-workspace-section-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;padding:0 3px; }
.employee-workspace-section-head h2 { margin:0 0 3px;color:var(--text1);font-size:16px;font-weight:920; }.employee-workspace-section-head p { margin:0;color:var(--text2);font-size:11px;font-weight:650; }.employee-workspace-section-head>span { min-width:35px;height:35px;display:grid;place-items:center;border-radius:12px;color:#fff;background:linear-gradient(145deg,#7665e9,#5269dc);font-size:12px;font-weight:900; }
.employee-shortcut-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; }
.employee-shortcut { --employee-shortcut-tone:#536ee2;--employee-shortcut-delay:0ms;position:relative;isolation:isolate;min-width:0;min-height:142px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;padding:18px 13px 16px;border:1px solid color-mix(in srgb,var(--employee-shortcut-tone) 24%,var(--theme-stroke, rgba(255,255,255,.9)));border-radius:19px;color:var(--text1);background:radial-gradient(circle at 50% 10%,color-mix(in srgb,var(--employee-shortcut-tone) 14%,transparent),transparent 48%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.84)),color-mix(in srgb,var(--employee-shortcut-tone) 8%,var(--theme-glass, rgba(240,245,252,.72))));font:inherit;text-align:center;cursor:pointer;box-shadow:0 10px 24px color-mix(in srgb,var(--employee-shortcut-tone) 10%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease,box-shadow .22s ease,background .22s ease;animation:employeeShortcutReveal .46s cubic-bezier(.2,.8,.2,1) var(--employee-shortcut-delay) both; }
.employee-shortcut::before { content:"";position:absolute;z-index:-1;top:-56px;left:50%;width:126px;height:100px;border-radius:50%;background:color-mix(in srgb,var(--employee-shortcut-tone) 17%,transparent);filter:blur(22px);transform:translateX(-50%);transition:opacity .22s ease,transform .22s ease; }
.employee-shortcut::after { content:"";position:absolute;inset:1px 12px auto;height:1px;background:linear-gradient(90deg,transparent,var(--theme-glass, rgba(255,255,255,.95)),transparent); }
.employee-shortcut:hover,.employee-shortcut:focus-visible { outline:none;transform:translateY(-4px);border-color:color-mix(in srgb,var(--employee-shortcut-tone) 48%,var(--theme-stroke, #fff));background:radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--employee-shortcut-tone) 20%,transparent),transparent 52%),linear-gradient(145deg,var(--theme-surface, #fff),color-mix(in srgb,var(--employee-shortcut-tone) 10%,var(--theme-surface, #f4f7fc)));box-shadow:0 17px 32px color-mix(in srgb,var(--employee-shortcut-tone) 18%,transparent),inset 0 1px 0 var(--theme-highlight, #fff); }
.employee-shortcut:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb,var(--employee-shortcut-tone) 22%,transparent),0 17px 32px color-mix(in srgb,var(--employee-shortcut-tone) 18%,transparent),inset 0 1px 0 var(--theme-highlight, #fff); }
.employee-shortcut:active { transform:translateY(-1px); }
.employee-shortcut-icon { width:52px;height:52px;display:grid;flex:0 0 52px;place-items:center;border:1px solid var(--theme-stroke, rgba(255,255,255,.72));border-radius:50%;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--employee-shortcut-tone) 66%,var(--theme-surface, #fff)),var(--employee-shortcut-tone));box-shadow:0 9px 19px color-mix(in srgb,var(--employee-shortcut-tone) 28%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.42));font-size:24px;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease; }
.employee-shortcut:hover .employee-shortcut-icon,.employee-shortcut:focus-visible .employee-shortcut-icon { transform:translateY(-2px) rotate(-4deg);box-shadow:0 12px 24px color-mix(in srgb,var(--employee-shortcut-tone) 36%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.48)); }
.employee-shortcut strong { width:100%;overflow-wrap:anywhere;color:var(--text1);font-size:12.5px;font-weight:900;line-height:1.65;text-align:center; }
@keyframes employeeShortcutReveal { from { opacity:0;transform:translateY(10px) scale(.97); } to { opacity:1;transform:translateY(0) scale(1); } }
.employee-workspace-empty { display:grid;justify-items:center;gap:7px;padding:35px 16px;border:1px dashed rgba(91,100,174,.28);border-radius:18px;color:var(--text2);text-align:center; }.employee-workspace-empty>span { width:50px;height:50px;display:grid;place-items:center;border-radius:16px;color:var(--theme-ink, #665ed9);background:rgba(102,94,217,.11);font-size:23px; }.employee-workspace-empty strong { color:var(--text1);font-size:13px; }.employee-workspace-empty p { margin:0;font-size:11px; }
html[data-theme="dark"] :is(.employee-workspace-hero,.employee-workspace-tools,.employee-overview) { border-color:rgba(255,255,255,.11);background:radial-gradient(circle at 100% 0%,rgba(111,91,226,.16),transparent 42%),linear-gradient(145deg,rgba(38,45,59,.92),rgba(24,30,41,.84));box-shadow:0 20px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08); }
html[data-theme="dark"] .employee-overview-card { background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--overview-card-tone) 16%,transparent),transparent 43%),rgba(23,30,42,.72);border-color:color-mix(in srgb,var(--overview-card-tone) 30%,rgba(255,255,255,.1)); }.employee-personal-journal>div { border:1px solid var(--theme-stroke, rgba(255,255,255,.06)); }
html[data-theme="dark"] .employee-workspace-role { border-color:rgba(255,255,255,.1);background:rgba(20,26,37,.55); }
html[data-theme="dark"] .employee-shortcut { border-color:color-mix(in srgb,var(--employee-shortcut-tone) 30%,rgba(255,255,255,.1));background:radial-gradient(circle at 50% 8%,color-mix(in srgb,var(--employee-shortcut-tone) 18%,transparent),transparent 52%),linear-gradient(145deg,rgba(34,42,57,.88),rgba(22,29,41,.82));box-shadow:0 12px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.09); }
@media(max-width:980px){.employee-shortcut-grid,.employee-quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:720px){html.employee-workspace-mode .app{display:flex;flex-direction:column}html.employee-workspace-mode .main{padding:17px}.employee-workspace-hero{align-items:flex-start;flex-direction:column;padding:20px}.employee-workspace-role{min-width:0;text-align:start}.employee-overview-grid{grid-template-columns:1fr}.employee-overview-card.is-journal{grid-column:auto}.employee-shortcut-grid,.employee-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));}.employee-workspace-section-head{align-items:flex-start}.employee-workspace-section-head p{line-height:1.65}}
@media(max-width:620px){.employee-self-worktime{grid-template-columns:auto minmax(0,1fr)}.employee-self-worktime-action{grid-column:1 / -1;width:100%}.self-worktime-pump-grid{grid-template-columns:1fr}}
@media(max-width:820px){.employee-dashboard-main-grid{grid-template-columns:1fr;grid-template-rows:auto}.employee-dashboard-main-grid>.compare-card,.employee-dashboard-main-grid>.price-widget,.employee-dashboard-main-grid>.employee-calendar-card{grid-column:1;grid-row:auto}}
@media(max-width:520px){.employee-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:450px){.employee-workspace-identity{align-items:flex-start}.employee-workspace-avatar{width:52px;height:52px;flex-basis:52px;border-radius:17px;font-size:23px}.employee-workspace-tools{padding:13px}.employee-shortcut-grid{gap:10px}.employee-shortcut{min-height:126px;padding-inline:9px}.employee-shortcut-icon{width:48px;height:48px;flex-basis:48px;font-size:22px}.employee-workspace-section-head>span{display:none}}
@media(max-width:340px){.employee-shortcut-grid,.employee-quick-actions{grid-template-columns:1fr}}
@media(max-width:450px){.employee-home-btn span{display:none}.employee-home-btn{padding-inline:10px!important}.employee-overview{padding:13px}.employee-personal-journal>div{grid-template-columns:32px minmax(0,1fr)}.employee-personal-journal time{grid-column:2;text-align:start}}
@media(prefers-reduced-motion:reduce){.employee-shortcut,.employee-shortcut-icon,.employee-self-worktime-live-dot{animation:none;transition:none}.employee-shortcut:hover,.employee-shortcut:focus-visible,.employee-shortcut:hover .employee-shortcut-icon,.employee-shortcut:focus-visible .employee-shortcut-icon{transform:none}}

/* Profile access is language-aware: Dari stays on IRANSans; all other locales
   inherit their language font configured on the document root. */
html[lang="fa"] .profile-access-page,
html[lang="fa"] .profile-access-page :is(button, input, select) { font-family:'IRANSans',sans-serif; }
html:not([lang="fa"]) .profile-access-page,
html:not([lang="fa"]) .profile-access-page :is(button, input, select) { font-family:inherit; }

.till-attendant-confirm-modal { --ui-tone:#6473df; --ui-tone-2:#7559e8; width:min(420px,calc(100vw - 32px)); padding:24px; text-align:center; }
.till-attendant-confirm-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 10px; border:1px solid var(--theme-stroke, rgba(255,255,255,.7)); border-radius:17px; color:#fff; background:linear-gradient(145deg,#8170eb,#5967de); box-shadow:0 10px 22px rgba(91,103,220,.25),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32)); font-size:25px; }.till-attendant-confirm-modal h3 { margin:0 0 8px; color:var(--text1); font-size:17px; font-weight:900; }.till-attendant-confirm-modal .page-sub { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin:0; color:var(--text2); font-size:12px; }.till-attendant-confirm-modal .page-sub strong { color:var(--text1); font-weight:850; }.till-attendant-confirm-modal .page-sub i { color:var(--theme-ink, #6473df); }.till-attendant-confirm-note { display:flex; align-items:center; justify-content:center; gap:6px; margin:17px 0 0; padding:10px 12px; border:1px solid rgba(212,149,24,.2); border-radius:12px; color:var(--theme-ink, #9b6816); background:rgba(212,149,24,.1); font-size:11.5px; font-weight:750; }.till-attendant-confirm-note i { font-size:16px; }.till-attendant-confirm-modal .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:17px; }.till-attendant-confirm-modal .modal-actions .btn { margin:0; }.till-attendant-confirm-overlay { z-index:1200; }
@media (max-width:480px) { .profile-role-history-item { grid-template-columns:35px minmax(0,1fr); }.profile-role-history-state { grid-column:2; justify-self:start; }.till-attendant-confirm-modal { padding:19px; }.till-attendant-confirm-modal .modal-actions { grid-template-columns:1fr; } }

/* Configurable operational responsibilities: definitions only; assignments and
   access rules deliberately come in a later phase. */
.responsibility-definitions-card { position:relative; overflow:hidden; padding:18px; border-color:var(--theme-stroke, rgba(255,255,255,.82)); background:radial-gradient(circle at 0% 0%,rgba(45,169,109,.12),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(224,239,238,.58))); box-shadow:0 16px 34px rgba(38,49,97,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
.responsibility-definitions-card .profile-access-card-head .section-title-icon > i { background:linear-gradient(145deg,#48af79,#28895d); box-shadow:0 7px 15px rgba(39,143,94,.23); }.responsibility-definitions-card .profile-access-card-head .btn { min-height:38px; margin:0; white-space:nowrap; }.responsibility-definitions-sub { margin:6px 0 11px; line-height:1.75; }.responsibility-plan-note { display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:9px 10px; border:1px solid rgba(47,169,109,.18); border-radius:12px; color:var(--theme-ink, #397255); background:rgba(47,169,109,.08); font-size:11px; font-weight:700; line-height:1.65; }.responsibility-plan-note i { flex:0 0 auto; margin-top:1px; color:var(--theme-ink, #2f9866); font-size:16px; }
.responsibility-definition-list { display:grid; gap:8px; }.responsibility-definition-card { display:grid; grid-template-columns:43px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:82px; padding:10px 11px; border:1px solid color-mix(in srgb,var(--responsibility-tone) 20%,var(--theme-stroke, rgba(255,255,255,.82))); border-radius:16px; background:linear-gradient(135deg,color-mix(in srgb,var(--responsibility-tone) 7%,var(--theme-glass, rgba(255,255,255,.8))),var(--theme-glass, rgba(255,255,255,.57))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); transition:transform .18s var(--ui-ease),border-color .18s ease,box-shadow .18s ease; }.responsibility-definition-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--responsibility-tone) 48%,var(--theme-stroke, rgba(255,255,255,.82))); box-shadow:0 9px 19px color-mix(in srgb,var(--responsibility-tone) 12%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }.responsibility-definition-card.is-inactive { opacity:.68; filter:saturate(.58); }.responsibility-definition-icon { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:var(--responsibility-tone); background:color-mix(in srgb,var(--responsibility-tone) 14%,var(--theme-glass, rgba(255,255,255,.68))); font-size:21px; }.responsibility-definition-copy { min-width:0; }.responsibility-definition-title { display:flex; align-items:center; gap:7px; min-width:0; }.responsibility-definition-title strong { overflow:hidden; color:var(--text1); font-size:13px; font-weight:880; text-overflow:ellipsis; white-space:nowrap; }.responsibility-definition-status { flex:0 0 auto; padding:3px 7px; border-radius:999px; font-size:10px; font-weight:800; }.responsibility-definition-status.is-active { color:var(--theme-ink, #27865a); background:rgba(47,169,109,.12); }.responsibility-definition-status.is-inactive { color:var(--theme-ink, #8e6a2f); background:rgba(212,149,24,.13); }.responsibility-definition-copy p { overflow:hidden; margin:3px 0 6px; color:var(--text2); font-size:11px; font-weight:650; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }.responsibility-definition-meta { display:flex; flex-wrap:wrap; gap:5px 9px; color:var(--text2); font-size:10px; font-weight:700; }.responsibility-definition-meta span { display:inline-flex; align-items:center; gap:3px; }.responsibility-definition-meta i { color:var(--responsibility-tone); font-size:12px; }.responsibility-edit-btn { min-height:36px; margin:0; border-color:color-mix(in srgb,var(--responsibility-tone) 21%,var(--theme-stroke, rgba(255,255,255,.78))); background:var(--theme-glass, rgba(255,255,255,.58)); white-space:nowrap; }
.responsibility-empty { display:grid; justify-items:center; gap:8px; padding:19px 12px; border:1px dashed rgba(47,169,109,.28); border-radius:16px; color:var(--text2); text-align:center; }.responsibility-empty > span { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:var(--theme-ink, #369666); background:rgba(47,169,109,.11); font-size:21px; }.responsibility-empty strong { color:var(--text1); font-size:12px; }.responsibility-empty .btn { min-height:36px; margin:0; }
.responsibility-definition-modal { --ui-tone:#2f9866; --ui-tone-2:#25885b; width:min(680px,calc(100vw - 32px)); padding:20px; }.responsibility-modal-head { display:flex; align-items:center; gap:10px; margin:0 0 17px; }.responsibility-modal-head-icon { width:43px; height:43px; display:grid; flex:0 0 43px; place-items:center; border-radius:14px; color:#fff; background:linear-gradient(145deg,#47ad78,#27895d); box-shadow:0 8px 17px rgba(39,139,93,.22); font-size:21px; }.responsibility-modal-head h3 { margin:0 0 2px; color:var(--text1); font-size:16px; font-weight:900; }.responsibility-modal-head p { margin:0; color:var(--text2); font-size:11px; font-weight:650; line-height:1.5; }.responsibility-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.responsibility-definition-modal .field { position:relative; z-index:1; margin:0; }.responsibility-definition-modal .field:has(.responsibility-select-control.is-open) { z-index:30; }.responsibility-definition-modal .field > span { display:block; margin:0 0 6px; color:var(--text2); font-size:11.5px; font-weight:800; }.responsibility-name-field,.responsibility-description-field { grid-column:1 / -1; }.responsibility-definition-modal textarea { min-height:72px; }
.responsibility-select-control { position:relative; }.responsibility-select-control > select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; clip-path:inset(50%); }.responsibility-select-trigger { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border:1px solid rgba(47,152,102,.2); border-radius:13px; color:var(--text1); background:var(--theme-glass, rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); cursor:pointer; text-align:start; transition:border-color .18s ease,background .18s ease,box-shadow .18s ease; }.responsibility-select-trigger > span { min-width:0; display:flex; align-items:center; gap:7px; }.responsibility-select-trigger strong { overflow:hidden; font-size:12px; font-weight:780; text-overflow:ellipsis; white-space:nowrap; }.responsibility-select-trigger > span > i { width:25px; height:25px; display:grid; flex:0 0 25px; place-items:center; border-radius:8px; color:var(--theme-ink, #2b9362); background:rgba(47,169,109,.1); font-size:14px; }.responsibility-select-trigger > .ti-chevron-down { flex:0 0 auto; color:var(--theme-ink, #2f9866); font-size:17px; transition:transform .18s var(--ui-ease); }.responsibility-select-control.is-open .responsibility-select-trigger,.responsibility-select-trigger:hover { border-color:#2f9866; background:var(--theme-glass, rgba(255,255,255,.9)); box-shadow:0 0 0 3px rgba(47,152,102,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }.responsibility-select-trigger:focus-visible { outline:3px solid rgba(47,152,102,.25); outline-offset:2px; }.responsibility-select-control.is-open .responsibility-select-trigger > .ti-chevron-down { transform:rotate(180deg); }.responsibility-select-menu { position:absolute; inset:calc(100% + 6px) 0 auto; z-index:80; display:none; max-height:228px; padding:6px; overflow:auto; border:1px solid var(--theme-stroke, rgba(255,255,255,.88)); border-radius:14px; background:linear-gradient(145deg,var(--theme-glass, rgba(251,253,255,.98)),var(--theme-glass, rgba(225,237,249,.96))); box-shadow:0 17px 34px rgba(31,47,89,.25),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }.responsibility-select-control.is-open .responsibility-select-menu { display:grid; gap:4px; animation:permissionCardEnter .16s var(--ui-ease) both; }.responsibility-select-option { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:40px; padding:7px 8px; border:1px solid transparent; border-radius:10px; color:var(--text1); background:transparent; cursor:pointer; text-align:start; transition:background .16s ease,border-color .16s ease,transform .16s var(--ui-ease); }.responsibility-select-option > span { min-width:0; display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:760; }.responsibility-select-option > span > i { width:23px; height:23px; display:grid; flex:0 0 23px; place-items:center; border-radius:7px; color:var(--theme-ink, #2f9866); background:rgba(47,169,109,.1); font-size:13px; }.responsibility-select-option > .ti-check { color:transparent; font-size:16px; }.responsibility-select-option:hover,.responsibility-select-option:focus-visible { border-color:rgba(47,152,102,.24); background:rgba(47,169,109,.08); outline:none; transform:translateY(-1px); }.responsibility-select-option.active { border-color:rgba(47,152,102,.36); color:var(--theme-ink, #227a50); background:linear-gradient(135deg,rgba(47,169,109,.16),var(--theme-glass, rgba(255,255,255,.7))); }.responsibility-select-option.active > .ti-check { color:var(--theme-ink, #2f9866); }

/* Employee responsibility picker: clear selected state, available roles, and locked assignments. */
.employee-responsibility-select-control { position:relative; }.employee-responsibility-select-control > select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; clip-path:inset(50%); }.employee-responsibility-select-trigger { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px; border:1px solid rgba(47,169,109,.31); border-radius:13px; color:var(--text1); background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.94)),var(--theme-glass, rgba(235,248,242,.78))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); cursor:pointer; text-align:start; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }.employee-responsibility-select-trigger > span { min-width:0; display:flex; align-items:center; gap:8px; }.employee-responsibility-select-trigger strong { overflow:hidden; font-size:12px; font-weight:820; text-overflow:ellipsis; white-space:nowrap; }.employee-responsibility-select-trigger > span > i { width:27px; height:27px; display:grid; flex:0 0 27px; place-items:center; border-radius:9px; color:#fff; background:linear-gradient(145deg,#44ad76,#278b5d); box-shadow:0 5px 11px rgba(39,139,93,.25); font-size:15px; }.employee-responsibility-select-trigger > .ti-chevron-down { flex:0 0 auto; color:var(--theme-ink, #278b5d); font-size:18px; transition:transform .18s var(--ui-ease); }.employee-responsibility-select-control.is-open .employee-responsibility-select-trigger,.employee-responsibility-select-trigger:hover { border-color:#278b5d; background:var(--theme-surface, #fff); box-shadow:0 0 0 3px rgba(47,169,109,.15),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }.employee-responsibility-select-control.is-open .employee-responsibility-select-trigger > .ti-chevron-down { transform:rotate(180deg); }.employee-responsibility-select-trigger:focus-visible { outline:3px solid rgba(47,169,109,.25); outline-offset:2px; }.employee-responsibility-select-menu { position:absolute; inset:calc(100% + 7px) 0 auto; z-index:130; display:none; gap:5px; max-height:260px; padding:7px; overflow:auto; border:1px solid var(--theme-stroke, rgba(255,255,255,.86)); border-radius:15px; background:linear-gradient(145deg,var(--theme-glass, rgba(253,255,254,.98)),var(--theme-glass, rgba(221,240,232,.97))); box-shadow:0 18px 38px rgba(31,47,89,.25),inset 0 1px 0 var(--theme-highlight, #fff); }.employee-responsibility-select-control.is-open .employee-responsibility-select-menu { display:grid; animation:permissionCardEnter .16s var(--ui-ease) both; }.employee-responsibility-option { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:43px; padding:7px 9px; border:1px solid transparent; border-radius:11px; color:var(--text1); background:transparent; cursor:pointer; text-align:start; transition:background .16s ease,border-color .16s ease,transform .16s var(--ui-ease); }.employee-responsibility-option > span { min-width:0; display:flex; align-items:center; gap:8px; }.employee-responsibility-option strong { overflow:hidden; font-size:11.5px; font-weight:780; text-overflow:ellipsis; white-space:nowrap; }.employee-responsibility-option > span > i { width:24px; height:24px; display:grid; flex:0 0 24px; place-items:center; border-radius:8px; color:var(--theme-ink, #278b5d); background:rgba(47,169,109,.11); font-size:14px; }.employee-responsibility-option > .ti-check { color:transparent; font-size:17px; }.employee-responsibility-option:hover,.employee-responsibility-option:focus-visible { border-color:rgba(47,169,109,.25); background:rgba(47,169,109,.09); outline:none; transform:translateY(-1px); }.employee-responsibility-option.active { border-color:rgba(47,169,109,.4); color:var(--theme-ink, #1f7d50); background:linear-gradient(135deg,rgba(47,169,109,.16),var(--theme-glass, rgba(255,255,255,.74))); }.employee-responsibility-option.active > .ti-check { color:var(--theme-ink, #278b5d); }.employee-responsibility-option.is-unavailable { color:var(--text2); background:rgba(113,124,153,.08); cursor:not-allowed; }.employee-responsibility-option.is-unavailable > span > i { color:var(--theme-ink, #7b8498); background:rgba(113,124,153,.12); }.employee-responsibility-option.is-unavailable small { color:var(--theme-ink, #a06a22); font-size:9.5px; font-weight:760; white-space:nowrap; }
.emp-sales-permission-note { display:none; align-items:center; gap:7px; grid-column:1 / -1; padding:8px 10px; border:1px solid rgba(212,149,24,.23); border-radius:11px; color:var(--theme-ink, #94691e); background:rgba(212,149,24,.1); font-size:10.5px; font-weight:760; line-height:1.6; }.emp-sales-permission-note i { font-size:15px; }.emp-perm-list.is-unavailable .emp-sales-permission-note { display:flex; }.emp-perm-list.is-unavailable .emp-perm-item { opacity:.48; filter:saturate(.45); cursor:not-allowed; }.emp-perm-list.is-unavailable .emp-perm-item input { pointer-events:none; }

/* Long labels wrap inside the popup; only its vertical axis is scrollable. */
.employee-responsibility-select-menu {
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.employee-responsibility-option {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.employee-responsibility-option > span {
  flex:1 1 auto;
  overflow:hidden;
}
.employee-responsibility-option strong {
  min-width:0;
  overflow:visible;
  overflow-wrap:anywhere;
  line-height:1.55;
  text-overflow:clip;
  white-space:normal;
}
.employee-responsibility-option > .ti-check { flex:0 0 auto; }
.employee-responsibility-option.is-unavailable small {
  max-width:34%;
  flex:0 0 auto;
  line-height:1.45;
  overflow-wrap:anywhere;
  text-align:end;
  white-space:normal;
}

/* Employee form: persistent actions and an elevated responsibility menu. */
.emp-modal-glass { isolation:isolate; }.emp-modal-glass .emp-modal-sticky-head { position:sticky; top:-24px; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-24px -24px 12px; padding:18px 24px 12px; background:linear-gradient(180deg,var(--theme-glass, rgba(240,246,255,.99)) 78%,var(--theme-glass, rgba(240,246,255,.94))); border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:0 10px 18px -17px rgba(31,47,89,.7); }.emp-modal-glass .emp-modal-sticky-head h3 { margin:0; }.emp-modal-glass .emp-modal-sticky-head .photo-upload-wrap { margin:0; }.emp-modal-glass .emp-modal-sticky-actions { position:sticky; bottom:-24px; z-index:60; margin:14px -24px -24px; padding:13px 24px 18px; background:linear-gradient(0deg,var(--theme-glass, rgba(240,246,255,.99)) 78%,var(--theme-glass, rgba(240,246,255,.94))); border-radius:0 0 var(--r-lg) var(--r-lg); box-shadow:0 -10px 18px -17px rgba(31,47,89,.7); }.emp-modal-glass .emp-form-section:has(.employee-responsibility-select-control.is-open) { position:relative; z-index:140; }.emp-modal-glass .employee-responsibility-select-control.is-open { z-index:150; }html[lang="fa"] .employee-responsibility-select-control,html[lang="fa"] .employee-responsibility-select-control :is(button,select,strong,small) { font-family:'IRANSans',sans-serif; }
html[data-theme="dark"] .emp-modal-glass .emp-modal-sticky-head { background:linear-gradient(180deg,rgba(32,39,52,.99) 78%,rgba(32,39,52,.94)); }html[data-theme="dark"] .emp-modal-glass .emp-modal-sticky-actions { background:linear-gradient(0deg,rgba(32,39,52,.99) 78%,rgba(32,39,52,.94)); }
@media (max-width:480px) { .emp-modal-glass .emp-modal-sticky-head { top:-20px; margin:-24px -24px 11px; padding:15px 18px 10px; }.emp-modal-glass .emp-modal-sticky-actions { bottom:-24px; margin:13px -24px -24px; padding:11px 18px 15px; } }
.employee-modal-overlay { padding-block:0; }.employee-modal-overlay .emp-modal-glass { max-height:100dvh; scrollbar-gutter:auto; }.employee-modal-overlay .emp-modal-sticky-head,.employee-modal-overlay .emp-modal-sticky-actions { z-index:250; }.employee-modal-overlay .emp-form-section:has(.employee-responsibility-select-control.is-open) { z-index:140; }.employee-modal-overlay .employee-responsibility-select-control.is-open { z-index:150; }

/* Redesigned employee form chrome: clear identity at the top and calm, decisive actions below. */
.emp-modal-glass .emp-modal-sticky-head { min-height:82px; padding-block:14px; border-bottom:1px solid rgba(100,119,225,.16); background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.18),transparent 36%),linear-gradient(135deg,var(--theme-glass, rgba(250,253,255,.99)),var(--theme-glass, rgba(229,239,252,.96))); box-shadow:0 10px 24px -22px rgba(31,47,89,.7); }.emp-modal-title-group { display:flex; align-items:center; gap:10px; min-width:0; }.emp-modal-title-icon { width:39px; height:39px; display:grid; flex:0 0 39px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#4a6fe1,#3657c7); box-shadow:0 8px 17px rgba(54,87,199,.25),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.35)); font-size:19px; }.emp-modal-title-group h3 { color:var(--text1); font-size:16px; font-weight:900; letter-spacing:-.2px; }.emp-modal-title-group p { overflow:hidden; margin:3px 0 0; color:var(--text2); font-size:10.5px; font-weight:700; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }.emp-modal-glass .emp-modal-sticky-head .photo-upload { width:48px; height:48px; border:2px solid var(--theme-stroke, rgba(255,255,255,.9)); box-shadow:0 7px 16px rgba(54,87,199,.16),0 0 0 3px rgba(74,111,225,.13); }.emp-modal-glass .emp-modal-sticky-head .photo-upload:not(:has(img)) { color:#fff; background:linear-gradient(145deg,#4a6fe1,#3657c7); }.emp-modal-glass .emp-modal-sticky-head .photo-upload:not(:has(img)) i { color:#fff; }.emp-modal-glass .emp-modal-sticky-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; padding-block:12px; border-top:1px solid rgba(100,119,225,.17); background:linear-gradient(45deg,var(--theme-glass, rgba(248,252,255,.99)),var(--theme-glass, rgba(226,239,251,.97))); box-shadow:0 -12px 25px -23px rgba(31,47,89,.72); }.emp-modal-actions-note { display:flex; align-items:center; gap:6px; color:var(--theme-ink, #4d6783); font-size:10px; font-weight:760; white-space:nowrap; }.emp-modal-actions-note i { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:var(--theme-ink, #24885b); background:rgba(47,169,109,.12); font-size:14px; }.emp-modal-action-buttons { display:flex; gap:8px; }.emp-modal-sticky-actions .btn { min-height:40px; margin:0; border-radius:12px; font-size:12px; font-weight:820; }.emp-modal-sticky-actions .btn-primary { min-width:154px; background:linear-gradient(135deg,#2eae72,#248ca3); box-shadow:0 8px 17px rgba(35,143,128,.22); }.emp-modal-sticky-actions .btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 11px 21px rgba(35,143,128,.29); }.emp-modal-sticky-actions .btn-ghost { min-width:94px; border-color:rgba(90,108,154,.2); background:var(--theme-glass, rgba(255,255,255,.7)); }.emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) { color:var(--theme-ink, #b44d43); border-color:rgba(210,98,86,.35); background:var(--theme-glass, rgba(255,244,242,.93)); }
html[data-theme="dark"] .emp-modal-glass .emp-modal-sticky-head { border-color:rgba(255,255,255,.08); background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.16),transparent 36%),linear-gradient(135deg,rgba(34,43,58,.99),rgba(27,35,48,.98)); }html[data-theme="dark"] .emp-modal-glass .emp-modal-sticky-actions { border-color:rgba(255,255,255,.08); background:linear-gradient(45deg,rgba(29,38,51,.99),rgba(24,32,44,.98)); }.emp-modal-title-icon,.emp-modal-actions-note i { animation:employeeModalChromeIn .36s var(--ui-ease) both; }@keyframes employeeModalChromeIn { from { opacity:0; transform:translateY(-5px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } }@media (prefers-reduced-motion:reduce) { .emp-modal-title-icon,.emp-modal-actions-note i { animation:none; }.emp-modal-sticky-actions .btn-primary:hover:not(:disabled) { transform:none; } }@media (max-width:560px) { .emp-modal-title-group p,.emp-modal-actions-note { display:none; }.emp-modal-sticky-actions { justify-content:flex-end; }.emp-modal-action-buttons { width:100%; }.emp-modal-sticky-actions .btn { flex:1; }.emp-modal-sticky-actions .btn-primary,.emp-modal-sticky-actions .btn-ghost { min-width:0; } }

/* Employee footer: a darker, centered action bar with no status message. */
.overlay .modal.emp-modal-glass .modal-actions.emp-modal-sticky-actions { display:flex; grid-template-columns:none; min-height:56px; direction:rtl; justify-content:center; align-items:center; gap:0; margin:10px -24px -24px; padding:7px 24px 9px; border:0; border-top:1px solid rgba(100,119,225,.16); background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.18),transparent 36%),linear-gradient(135deg,var(--theme-glass, rgba(250,253,255,.99)),var(--theme-glass, rgba(229,239,252,.96))); }.emp-modal-glass .emp-modal-action-buttons { display:flex; flex:0 0 auto; flex-direction:row; align-items:center; justify-content:center; gap:10px; direction:rtl; }.emp-modal-glass .emp-modal-sticky-actions .btn { min-height:40px; padding-inline:15px; }.emp-modal-glass .emp-modal-sticky-actions .btn-primary { min-width:190px; min-height:44px; padding-inline:24px; font-size:13px; }.emp-modal-glass .emp-modal-sticky-actions .btn-ghost { min-width:108px; color:#fff; border-color:#dc7a23; background:linear-gradient(135deg,#f39a3d,#dc7620); box-shadow:0 7px 15px rgba(207,105,26,.22); }.emp-modal-glass .emp-modal-sticky-actions .btn-ghost i { color:#fff; }.emp-modal-glass .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) { color:#fff; border-color:#c96718; background:linear-gradient(135deg,#e9892f,#cb6719); }.emp-modal-glass .emp-modal-sticky-actions .btn-primary i { font-size:17px; }
html[data-theme="dark"] .overlay .modal.emp-modal-glass .modal-actions.emp-modal-sticky-actions { border-color:rgba(255,255,255,.08); background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.16),transparent 36%),linear-gradient(135deg,rgba(34,43,58,.99),rgba(27,35,48,.98)); }
@media (max-width:560px) { .emp-modal-glass .emp-modal-sticky-actions { justify-content:center; padding-inline:18px; }.emp-modal-glass .emp-modal-action-buttons { width:100%; justify-content:center; }.emp-modal-glass .emp-modal-sticky-actions .btn { min-width:0; } }

.employee-modal-overlay .emp-photo-section {
    display:flex;
    flex-direction:column;
}

.employee-modal-overlay .modal-fields-grid > .emp-photo-section { order:1; }
.employee-modal-overlay .modal-fields-grid > .emp-identity-section { order:2; }
.employee-modal-overlay .modal-fields-grid > .emp-employment-section { order:3; }
.employee-modal-overlay .modal-fields-grid > .emp-permissions-section { order:4; }

.employee-modal-overlay .emp-photo-stage {
    width:min(100%,280px);
    aspect-ratio:3 / 4;
    position:relative;
    display:grid;
    flex:0 0 auto;
    place-items:center;
    overflow:hidden;
    margin-inline:auto;
    border:1px dashed rgba(70,111,225,.38);
    border-radius:15px;
    background:radial-gradient(circle at 50% 18%,rgba(70,173,118,.13),transparent 48%),linear-gradient(145deg,var(--theme-glass, rgba(250,253,255,.92)),var(--theme-glass, rgba(224,234,249,.78)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    cursor:pointer;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}

.employee-modal-overlay .emp-photo-stage:hover,
.employee-modal-overlay .emp-photo-stage:focus-visible {
    border-color:rgba(47,169,109,.62);
    outline:none;
    box-shadow:0 0 0 3px rgba(47,169,109,.14),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}

.employee-modal-overlay .emp-photo-stage img {
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    display:block;
    object-fit:cover;
    object-position:var(--emp-photo-x,50%) var(--emp-photo-y,50%);
}

.employee-modal-overlay .emp-photo-placeholder {
    display:grid;
    justify-items:center;
    gap:7px;
    padding:24px;
    color:var(--text2);
    text-align:center;
}

.employee-modal-overlay .emp-photo-placeholder i {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border:1px solid rgba(70,111,225,.2);
    border-radius:18px;
    color:#fff;
    background:linear-gradient(145deg,#4a6fe1,#2fa96d);
    box-shadow:0 10px 22px rgba(54,87,199,.2);
    font-size:27px;
}

.employee-modal-overlay .emp-photo-placeholder strong { color:var(--text1); font-size:14px; font-weight:850; }
.employee-modal-overlay .emp-photo-placeholder span { font-size:11px; font-weight:700; }

.employee-modal-overlay .emp-photo-position-controls {
    width:min(100%,360px);
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:10px auto 0;
    padding:9px 10px;
    border:1px solid rgba(70,111,225,.14);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.58));
}

.employee-modal-overlay .emp-photo-position-controls.is-visible { display:grid; }
.employee-modal-overlay .emp-photo-position-controls label { display:grid; gap:5px; color:var(--text2); font-size:10.5px; font-weight:780; }
.employee-modal-overlay .emp-photo-position-controls label > span { display:flex; align-items:center; justify-content:center; gap:5px; }
.employee-modal-overlay .emp-photo-position-controls input[type="range"] { width:100%; margin:0; accent-color:#3e73d5; cursor:pointer; }

.employee-modal-overlay .emp-photo-actions {
    display:grid;
    grid-template-columns:1.35fr 1fr .8fr;
    gap:8px;
    margin-top:10px;
}

.employee-modal-overlay .emp-photo-actions .emp-photo-btn {
    min-width:0;
    min-height:40px;
    margin:0;
    padding-inline:10px;
    border-radius:11px;
    font-size:11.5px;
    font-weight:800;
}

.employee-modal-overlay .emp-photo-btn.is-upload { color:#fff; border-color:#3976d3; background:linear-gradient(135deg,#4a75df,#3263c6); }
.employee-modal-overlay .emp-photo-btn.is-edit { color:var(--theme-ink, #287e56); border-color:rgba(47,169,109,.3); background:var(--theme-glass, rgba(236,250,242,.9)); }
.employee-modal-overlay .emp-photo-btn.is-delete { color:var(--theme-ink, #b34e43); border-color:rgba(210,98,86,.3); background:var(--theme-glass, rgba(255,241,239,.9)); }
.employee-modal-overlay .emp-photo-btn:disabled { opacity:.45; cursor:not-allowed; }

html[data-theme="dark"] .employee-modal-overlay .emp-photo-stage { border-color:rgba(111,137,228,.34); background:radial-gradient(circle at 50% 18%,rgba(70,173,118,.12),transparent 48%),linear-gradient(145deg,rgba(42,53,70,.92),rgba(29,38,52,.88)); }
html[data-theme="dark"] .employee-modal-overlay .emp-photo-position-controls { border-color:rgba(255,255,255,.09); background:rgba(25,34,47,.64); }
html[data-theme="dark"] .employee-modal-overlay .emp-photo-btn.is-edit { color:#8ed9af; background:rgba(47,169,109,.12); }
html[data-theme="dark"] .employee-modal-overlay .emp-photo-btn.is-delete { color:#efa097; background:rgba(210,98,86,.12); }

@media (min-width:1100px) {
    .employee-modal-overlay .modal.emp-modal-glass {
        width:min(1120px,calc(100vw - 64px));
        max-width:1120px;
        max-height:calc(100dvh - 32px);
    }

    .employee-modal-overlay .modal-2col.emp-modal-glass .modal-fields-grid {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:stretch;
        gap:12px 16px;
    }

    .employee-modal-overlay .modal-2col.emp-modal-glass .modal-fields-grid > .field-full {
        grid-column:1 / -1;
    }

    .employee-modal-overlay .emp-form-section {
        padding:12px;
    }
}

@media (max-width:560px) {
    .employee-modal-overlay .emp-photo-stage { width:min(100%,240px); }
    .employee-modal-overlay .emp-photo-position-controls { grid-template-columns:1fr; }
    .employee-modal-overlay .emp-photo-actions { grid-template-columns:1fr; }
}

/* Employee create/edit is an in-page workflow, not a dialog. */
.employee-form-page {
    width:100%;
    min-width:0;
    animation:employeeFormPageIn .24s var(--ui-ease) both;
}

.employee-form-page.employee-modal-overlay .modal.employee-form-surface {
    width:100%;
    max-width:100%;
    max-height:none;
    overflow:visible;
    box-sizing:border-box;
    margin:0 auto;
    padding:24px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius:22px;
    background:transparent;
    box-shadow:0 18px 44px rgba(31,47,89,.14),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

.employee-form-page .emp-modal-sticky-head {
    position:relative;
    inset:auto;
    z-index:2;
    justify-content:flex-start;
    margin:-24px -24px 18px;
    padding:15px 24px;
    border-radius:22px 22px 0 0;
}

.employee-form-page .employee-form-back-btn {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:8px 13px;
    border:1px solid rgba(73,96,150,.2);
    border-radius:12px;
    color:var(--theme-ink, #415676);
    background:var(--theme-glass, rgba(255,255,255,.72));
    box-shadow:0 6px 14px rgba(41,56,91,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
    cursor:pointer;
    font:inherit;
    font-size:12px;
    font-weight:820;
    transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s var(--ui-ease);
}

.employee-form-page .employee-form-back-btn:hover {
    color:var(--theme-ink, #315fc1);
    border-color:rgba(49,95,193,.34);
    background:var(--theme-glass, rgba(255,255,255,.94));
    box-shadow:0 8px 18px rgba(49,95,193,.14);
    transform:translateY(-1px);
}

.employee-form-page .employee-form-back-btn:focus-visible {
    outline:3px solid rgba(49,95,193,.24);
    outline-offset:2px;
}

/* Restore the employee form's original focus motion after moving it out of the modal. */
.employee-form-page .emp-field-icon:has(#emp_uniqueId) { --employee-field-tone:#3977dc; }
.employee-form-page .emp-field-icon:has(#emp_accountNumber) { --employee-field-tone:#7c5bd7; }
.employee-form-page .emp-field-icon:has(#emp_firstName) { --employee-field-tone:#315fc1; }
.employee-form-page .emp-field-icon:has(#emp_fatherName) { --employee-field-tone:#138f91; }
.employee-form-page .emp-field-icon:has(#emp_lastName) { --employee-field-tone:#29945f; }
.employee-form-page .emp-field-icon:has(#emp_nationalId) { --employee-field-tone:#c47a18; }
.employee-form-page .emp-field-icon:has(#emp_phone) { --employee-field-tone:#1683aa; }
.employee-form-page .emp-field-icon:has(#emp_address) { --employee-field-tone:#c7547b; }
.employee-form-page .emp-field-icon:has(#emp_salary) { --employee-field-tone:#aa7620; }

.employee-form-page .emp-field-icon > i {
    width:32px;
    height:32px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.72));
    border-radius:10px;
    color:var(--text2);
    background:var(--theme-glass, rgba(255,255,255,.56));
    transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .22s ease,transform .22s var(--ui-ease);
}

.employee-form-page .emp-field-icon :is(input,select) {
    transition:border-color .2s ease,background .2s ease,box-shadow .22s ease,transform .22s var(--ui-ease);
}

.employee-form-page .emp-field-icon:focus-within > i {
    color:#fff;
    border-color:var(--theme-stroke, rgba(255,255,255,.86));
    background:linear-gradient(145deg,color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 66%,var(--theme-surface, #fff)),var(--employee-field-tone,var(--accent-solid)));
    box-shadow:0 7px 16px color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 30%,transparent);
    transform:scale(1.08);
    animation:employeeFieldIconFocus .24s var(--ui-ease) both;
}

#employeeFormWrap.employee-form-page .emp-field-icon:focus-within :is(input,select) {
    outline:none;
    border-color:color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 72%,var(--theme-stroke, #fff));
    background:color-mix(in srgb,var(--panel) 96%,transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 16%,transparent),0 9px 20px color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 10%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    transform:translateY(-1px);
}

@keyframes employeeFieldIconFocus {
    from { opacity:.72; transform:scale(.84) rotate(-7deg); }
    to { opacity:1; transform:scale(1.08) rotate(0); }
}

/* In-page employee permissions: restore the selected cards from the former modal. */
#employeeFormWrap .emp-perm-list { display:grid; gap:9px; }
#employeeFormWrap .emp-perm-item {
    position:relative;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 31px;
    align-items:center;
    min-height:70px;
    gap:10px;
    margin:0;
    padding:10px 11px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--tone) 17%,var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius:15px;
    color:var(--text1);
    background:var(--theme-glass, rgba(255,255,255,.46));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.78));
    cursor:pointer;
    animation:permissionCardEnter .3s var(--ui-ease) both;
    transition:transform .18s var(--ui-ease),border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
#employeeFormWrap .emp-perm-item::before {
    content:'';
    position:absolute;
    inset-block:11px;
    inset-inline-start:0;
    width:3px;
    border-radius:99px;
    background:var(--tone);
    opacity:0;
    transition:opacity .18s ease;
;display:none!important;}
#employeeFormWrap .emp-perm-item:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--tone) 42%,var(--theme-stroke, rgba(255,255,255,.88))); background:color-mix(in srgb,var(--tone-bg) 44%,var(--theme-glass, rgba(255,255,255,.64))); box-shadow:0 9px 19px color-mix(in srgb,var(--tone) 11%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
#employeeFormWrap .emp-perm-item:focus-within { outline:0; box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 23%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
#employeeFormWrap .emp-perm-item:has(input:checked) { border-color:color-mix(in srgb,var(--tone) 69%,var(--theme-stroke, rgba(255,255,255,.86))); background:linear-gradient(135deg,color-mix(in srgb,var(--tone-bg) 68%,var(--theme-glass, rgba(255,255,255,.8))),var(--theme-glass, rgba(255,255,255,.57))); box-shadow:0 9px 20px color-mix(in srgb,var(--tone) 14%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#employeeFormWrap .emp-perm-item:has(input:checked)::before { opacity:.88; }
#employeeFormWrap .emp-perm-icon { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--tone) 21%,var(--theme-stroke, rgba(255,255,255,.8))); border-radius:13px; color:var(--tone); background:color-mix(in srgb,var(--tone-bg) 72%,var(--theme-glass, rgba(255,255,255,.56))); font-size:19px; transition:transform .22s var(--ui-ease),color .22s ease,background .22s ease,box-shadow .22s ease; }
#employeeFormWrap .emp-perm-item:has(input:checked) .emp-perm-icon { color:#fff; background:var(--tone); box-shadow:0 7px 14px color-mix(in srgb,var(--tone) 30%,transparent); transform:scale(1.04); animation:employeeSelectionPop .25s var(--ui-ease) both; }
#employeeFormWrap .emp-perm-body { gap:3px; }
#employeeFormWrap .emp-perm-title { color:var(--text1); font-size:13.5px; font-weight:850; }
#employeeFormWrap .emp-perm-sub { color:var(--text2); font-size:11.5px; font-weight:650; line-height:1.45; }
#employeeFormWrap .emp-perm-item:has(input:checked) .emp-perm-title { color:color-mix(in srgb,var(--tone) 78%,var(--text1)); }
#employeeFormWrap .emp-perm-switch { width:29px; height:29px; }
#employeeFormWrap .emp-perm-track { border:1px solid color-mix(in srgb,var(--tone) 21%,var(--theme-stroke, rgba(255,255,255,.84))); border-radius:50%; background:var(--theme-glass, rgba(255,255,255,.66)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#employeeFormWrap .emp-perm-switch input:checked + .emp-perm-track { border-color:var(--tone); background:var(--tone); box-shadow:0 5px 11px color-mix(in srgb,var(--tone) 28%,transparent); }

/* Active/inactive choice uses the same strong selected state as before. */
#mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-toggle { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; padding-top:11px; border-top:1px solid var(--theme-stroke, rgba(255,255,255,.56)); }
#mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-card { position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) 21px; align-items:center; min-height:74px; gap:8px; margin:0; padding:9px; overflow:hidden; border:1px solid color-mix(in srgb,var(--tone) 18%,var(--theme-stroke, rgba(255,255,255,.82))); border-radius:14px; background:var(--theme-glass, rgba(255,255,255,.48)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.8)); cursor:pointer; text-align:start; animation:permissionCardEnter .32s var(--ui-ease) both; transition:transform .18s var(--ui-ease),border-color .18s ease,background .18s ease,box-shadow .18s ease; }
#mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-card:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--tone) 46%,var(--theme-stroke, rgba(255,255,255,.86))); }
#mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-card:focus-within { box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 22%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); }
#mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-card:has(input:checked) { border-color:color-mix(in srgb,var(--tone) 68%,var(--theme-stroke, rgba(255,255,255,.86))); background:linear-gradient(135deg,color-mix(in srgb,var(--tone-bg) 72%,var(--theme-glass, rgba(255,255,255,.82))),var(--theme-glass, rgba(255,255,255,.58))); box-shadow:0 9px 19px color-mix(in srgb,var(--tone) 14%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
#employeeFormWrap .emp-status-icon { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; margin:0; border-radius:12px; color:var(--tone); background:color-mix(in srgb,var(--tone-bg) 72%,var(--theme-glass, rgba(255,255,255,.56))); font-size:18px; }
#employeeFormWrap .emp-status-copy { display:grid; min-width:0; gap:2px; align-content:center; }
#employeeFormWrap .emp-status-card:has(input:checked) .emp-status-icon { color:#fff; background:var(--tone); transform:scale(1.04); animation:employeeSelectionPop .25s var(--ui-ease) both; }
#employeeFormWrap .emp-status-label { color:var(--text1); font-size:13px; font-weight:850; line-height:1.3; }
#employeeFormWrap .emp-status-sub { color:var(--text2); font-size:10.5px; font-weight:650; line-height:1.35; }
#employeeFormWrap .emp-status-badge { position:static; color:transparent; font-size:20px; transform:none; }
#employeeFormWrap .emp-status-card:has(input:checked) .emp-status-label,#employeeFormWrap .emp-status-card:has(input:checked) .emp-status-badge { color:var(--tone); }

/* Responsibility selection mirrors the green tool treatment in the reference. */
#employeeFormWrap .employee-responsibility-select-control.has-value .employee-responsibility-select-trigger { border-color:#2f9866; background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.96)),var(--theme-glass, rgba(228,247,237,.86))); box-shadow:0 0 0 3px rgba(47,152,102,.12),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96)); }
#employeeFormWrap .employee-responsibility-select-control.has-value .employee-responsibility-select-trigger > span > i { animation:employeeSelectionPop .25s var(--ui-ease) both; }

html[data-theme="dark"] #mainContent #view-employees.view #employeeFormWrap.employee-form-page :is(.emp-perm-item,.emp-status-card) { border-color:rgba(255,255,255,.12); background:rgba(20,29,42,.38); }
html[data-theme="dark"] #mainContent #view-employees.view #employeeFormWrap.employee-form-page :is(.emp-perm-item,.emp-status-card):has(input:checked) { border-color:color-mix(in srgb,var(--tone) 72%,rgba(255,255,255,.36)); background:linear-gradient(135deg,color-mix(in srgb,var(--tone-bg) 38%,rgba(24,33,47,.86)),rgba(25,34,48,.72)); }
html[data-theme="dark"] #employeeFormWrap .emp-perm-track { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); }

@keyframes employeeSelectionPop {
    from { opacity:.7; transform:scale(.78) rotate(-7deg); }
    to { opacity:1; transform:scale(1.04) rotate(0); }
}

.employee-form-page .emp-modal-title-group { flex:1; }
.employee-form-page .emp-modal-sticky-actions {
    position:sticky;
    bottom:10px;
    z-index:20;
    margin:16px 0 0;
    padding:9px 14px;
    border:1px solid rgba(100,119,225,.16);
    border-radius:16px;
    background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.18),transparent 36%),linear-gradient(135deg,var(--theme-glass, rgba(250,253,255,.96)),var(--theme-glass, rgba(229,239,252,.94)));
    box-shadow:0 12px 30px rgba(31,47,89,.16),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter:blur(14px);
}

.employee-form-page .emp-modal-action-buttons { width:auto; }
.employee-form-page .emp-modal-sticky-actions .btn { min-height:44px; border-radius:12px; }
.employee-form-page .emp-modal-sticky-actions .btn-primary {
    min-width:210px;
    color:#fff;
    border-color:#24966a;
    background:linear-gradient(135deg,#32b77d,#238fa0);
    box-shadow:0 8px 18px rgba(35,143,128,.24);
}
.employee-form-page .emp-modal-sticky-actions .btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 11px 23px rgba(35,143,128,.31); }
.employee-form-page .emp-modal-sticky-actions .btn-primary:disabled { opacity:.68; cursor:wait; }
.employee-form-page .emp-modal-sticky-actions .btn-ghost {
    min-width:118px;
    color:#fff;
    border-color:#d77721;
    background:linear-gradient(135deg,#f39a3d,#dc7620);
    box-shadow:0 7px 15px rgba(207,105,26,.2);
}
.employee-form-page .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) { color:#fff; border-color:#c96718; background:linear-gradient(135deg,#e9892f,#cb6719); transform:translateY(-1px); }

.employee-create-launch-btn { gap:8px; overflow:hidden; }
.employee-create-launch-btn .employee-launch-arrow { font-size:16px; opacity:.72; transition:transform .2s var(--ui-ease),opacity .2s ease; }
.employee-create-launch-btn:hover .employee-launch-arrow { opacity:1; transform:translateX(-3px); }
html[lang="en"] .employee-create-launch-btn .employee-launch-arrow { transform:rotate(180deg); }
html[lang="en"] .employee-create-launch-btn:hover .employee-launch-arrow { transform:rotate(180deg) translateX(-3px); }
.employee-edit-launch-btn i { transition:transform .2s var(--ui-ease); }
.employee-edit-launch-btn:hover i { transform:rotate(-8deg); }

html[data-theme="dark"] .employee-form-page.employee-modal-overlay .modal.employee-form-surface { border-color:rgba(255,255,255,.1); background:transparent; box-shadow:0 18px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.07); }
html[data-theme="dark"] .employee-form-page .employee-form-back-btn { color:#cad6eb; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06); }
html[data-theme="dark"] .employee-form-page .emp-modal-sticky-actions { border-color:rgba(255,255,255,.09); background:radial-gradient(circle at 8% 20%,rgba(70,173,118,.16),transparent 36%),linear-gradient(135deg,rgba(34,43,58,.96),rgba(27,35,48,.94)); }
html[data-theme="dark"] .employee-form-page .emp-field-icon > i { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.07); }
html[data-theme="dark"] #employeeFormWrap.employee-form-page .emp-field-icon:focus-within > i { color:#fff; border-color:rgba(255,255,255,.74); background:linear-gradient(145deg,color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 66%,#fff),var(--employee-field-tone,var(--accent-solid))); box-shadow:0 7px 16px color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 36%,transparent); }
html[data-theme="dark"] #employeeFormWrap.employee-form-page .emp-field-icon:focus-within :is(input,select) { border-color:color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 78%,#fff); background:color-mix(in srgb,var(--panel) 92%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,var(--employee-field-tone,var(--accent-solid)) 24%,transparent),0 9px 20px rgba(0,0,0,.2); }

@keyframes employeeFormPageIn {
    from { opacity:0; transform:translateY(10px); }
    to { opacity:1; transform:translateY(0); }
}

@media (min-width:900px) {
    .employee-form-page .modal-2col.emp-modal-glass .modal-fields-grid {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:stretch;
        gap:14px 18px;
    }
}

@media (max-width:620px) {
    .employee-form-page.employee-modal-overlay .modal.employee-form-surface { padding:14px; border-radius:17px; }
    .employee-form-page .emp-modal-sticky-head { align-items:flex-start; flex-direction:column; margin:-14px -14px 14px; padding:13px 14px; border-radius:17px 17px 0 0; }
    .employee-form-page .employee-form-back-btn { min-height:40px; }
    .employee-form-page .emp-modal-action-buttons { width:100%; }
    .employee-form-page .emp-modal-sticky-actions { bottom:6px; padding:8px; }
    .employee-form-page .emp-modal-sticky-actions .btn-primary { min-width:0; flex:1.35; }
    .employee-form-page .emp-modal-sticky-actions .btn-ghost { min-width:0; flex:1; }
}

@media (max-width:480px) {
    #mainContent #view-employees.view #employeeFormWrap.employee-form-page .emp-status-toggle { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
    .employee-form-page { animation:none; }
    .employee-form-page .employee-form-back-btn:hover,
    .employee-form-page .emp-modal-sticky-actions .btn:hover,
    .employee-form-page .emp-field-icon:focus-within > i,
    .employee-form-page .emp-field-icon:focus-within :is(input,select),
    #employeeFormWrap :is(.emp-perm-item,.emp-status-card,.emp-perm-icon,.emp-status-icon),
    #employeeFormWrap .employee-responsibility-select-control.has-value .employee-responsibility-select-trigger > span > i,
    .employee-create-launch-btn:hover .employee-launch-arrow,
    .employee-edit-launch-btn:hover i { transform:none; }
    .employee-form-page .emp-field-icon:focus-within > i { animation:none; }
    #employeeFormWrap :is(.emp-perm-item,.emp-status-card,.emp-perm-icon,.emp-status-icon),
    #employeeFormWrap .employee-responsibility-select-control.has-value .employee-responsibility-select-trigger > span > i { animation:none !important; transition:none !important; }
}

/* ---------- employee form: administrative luxury workspace ---------- */
.employee-form-page {
    --employee-office-navy:#24365f;
    --employee-office-blue:#4b6fd8;
    --employee-office-gold:#c49745;
    --employee-office-line:rgba(63,82,132,.16);
}
.employee-form-page .employee-form-toolbar {
    width:100%;
    max-width:1180px;
    display:flex;
    justify-content:flex-start;
    margin:0 auto 12px;
}
.employee-form-page .employee-form-toolbar .employee-form-back-btn {
    min-height:44px;
    padding-inline:15px;
    background:var(--theme-glass, rgba(255,255,255,.82));
    box-shadow:0 9px 21px rgba(41,56,91,.11),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
.employee-form-page.employee-modal-overlay .modal.employee-form-surface {
    max-width:1180px;
    padding:22px;
    border-color:var(--theme-stroke, rgba(255,255,255,.88));
    background:
        radial-gradient(circle at 100% 0%,rgba(80,111,216,.13),transparent 31%),
        radial-gradient(circle at 0% 100%,rgba(47,169,109,.08),transparent 29%),
        linear-gradient(145deg,var(--theme-glass, rgba(250,252,255,.84)),var(--theme-glass, rgba(230,237,249,.68)));
    box-shadow:0 22px 52px rgba(34,50,94,.15),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
.employee-form-page .emp-modal-sticky-head {
    min-height:88px;
    margin:-22px -22px 20px;
    padding:17px 22px;
    border-bottom:1px solid var(--employee-office-line);
    background:
        linear-gradient(90deg,transparent 0 72%,rgba(196,151,69,.08)),
        linear-gradient(145deg,var(--theme-glass, rgba(252,253,255,.97)),var(--theme-glass, rgba(231,238,250,.94)));
}
.employee-form-page .emp-modal-sticky-head::after {
    content:"";
    position:absolute;
    inset-inline:22px;
    inset-block-end:0;
    height:2px;
    background:linear-gradient(90deg,var(--employee-office-blue),var(--employee-office-gold),transparent 72%);
    opacity:.72;
}
.employee-form-page .emp-modal-title-icon {
    width:44px;
    height:44px;
    flex-basis:44px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.46));
    border-radius:14px;
    background:linear-gradient(145deg,#5879dc,#334f9e);
    box-shadow:0 10px 22px rgba(46,70,139,.25),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38));
}
.employee-form-page .emp-modal-title-group h3 { color:var(--employee-office-navy); font-size:18px; letter-spacing:-.25px; }
.employee-form-page .emp-modal-title-group p { max-width:620px; color:var(--theme-ink, #64708b); font-size:11.5px; }
.employee-form-page .form-required-notice {
    margin:0 0 14px;
    border-radius:12px;
}
.employee-form-page .modal-fields-grid > .emp-form-section { order:initial !important; }
.employee-form-page .modal-fields-grid {
    counter-reset:employee-form-section;
}
.employee-form-page .emp-form-section {
    --employee-section-tone:var(--employee-office-blue);
    counter-increment:employee-form-section;
    position:relative;
    min-width:0;
    margin:0;
    padding:18px;
    overflow:visible;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.86));
    border-radius:18px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.78)),var(--theme-glass, rgba(242,246,253,.58)));
    box-shadow:0 12px 28px rgba(39,55,101,.09),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
.employee-form-page .emp-identity-section { --employee-section-tone:#4b6fd8; }
.employee-form-page .emp-employment-section { --employee-section-tone:#2f9866; }
.employee-form-page .emp-permissions-section { --employee-section-tone:#7a62bc; }
.employee-form-page .emp-photo-section { --employee-section-tone:#b58232; }
.employee-form-page .emp-form-section::before {
    content:"0" counter(employee-form-section);
    position:absolute;
    inset-block-start:14px;
    inset-inline-end:16px;
    color:color-mix(in srgb,var(--employee-section-tone) 68%,#fff);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}
.employee-form-page .emp-form-section-head {
    min-height:42px;
    margin:0 0 16px;
    padding:0 0 12px;
    border-bottom:1px solid color-mix(in srgb,var(--employee-section-tone) 17%,rgba(120,135,170,.14));
    color:color-mix(in srgb,var(--employee-section-tone) 72%,var(--text1));
    font-size:14px;
    font-weight:900;
}
.employee-form-page .emp-form-section-head > i {
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    display:grid;
    place-items:center;
    flex:0 0 36px;
    padding:0;
    border:1px solid color-mix(in srgb,var(--employee-section-tone) 20%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:11px;
    color:var(--employee-section-tone);
    background:color-mix(in srgb,var(--employee-section-tone) 10%,var(--theme-glass, rgba(255,255,255,.78)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    font-size:18px;
    line-height:1;
    text-align:center;
}
.employee-form-page .emp-form-section-head > i::before {
    display:block;
    width:1em;
    height:1em;
    margin:0;
    line-height:1;
}
.employee-form-page .emp-form-section .field { margin-bottom:13px; }
.employee-form-page .emp-form-section .field-row { gap:12px; }
.employee-form-page .emp-form-section .field > label {
    margin-bottom:7px;
    color:var(--theme-ink, #53617d);
    font-size:11.5px;
    font-weight:820;
}
.employee-form-page .emp-form-section :is(input,select,.date-picker-field,.employee-responsibility-select-trigger) {
    min-height:46px;
    border-color:rgba(79,98,148,.18);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.72));
}
.employee-form-page .emp-form-section input[readonly] {
    color:var(--theme-ink, #6c7891);
    background:var(--theme-glass, rgba(231,236,246,.72));
    cursor:default;
}
.employee-form-page .field-system-note { color:var(--theme-ink, #7b869c); font-size:10px; }
.employee-form-page .emp-photo-stage {
    width:min(100%,260px);
    height:198px;
    min-height:198px;
    margin-inline:auto;
    border-style:solid;
    border-color:rgba(181,130,50,.24);
    border-radius:17px;
    background:radial-gradient(circle at 50% 20%,rgba(196,151,69,.1),transparent 48%),var(--theme-glass, rgba(255,255,255,.58));
}
.employee-form-page .emp-photo-actions { margin-top:12px; }
.employee-form-page .emp-photo-btn { min-height:42px; border-radius:11px; }
.employee-form-page .profile-photo-size-note,.customer-form-page .profile-photo-size-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 0;color:var(--theme-ink,#68758d);font-size:10.5px;font-weight:720;line-height:1.65;text-align:center}.employee-form-page .profile-photo-size-note i,.customer-form-page .profile-photo-size-note i{flex:0 0 auto;color:#b58232;font-size:16px}.employee-form-page .profile-photo-error,.customer-form-page .profile-photo-error{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(198,62,55,.28);border-radius:11px;color:#a42f2a;background:rgba(255,235,232,.82);font-size:11px;font-weight:800;line-height:1.7;text-align:center}.employee-form-page .emp-photo-stage.has-error,.customer-form-page .emp-photo-stage.has-error{border-color:#cf4e47;box-shadow:0 0 0 3px rgba(207,78,71,.12)}html[data-theme="dark"] :is(.employee-form-page,.customer-form-page) .profile-photo-error{color:#ffb5ad;background:rgba(126,38,35,.28);border-color:rgba(255,130,120,.32)}
.employee-form-page .emp-modal-sticky-actions {
    bottom:10px;
    justify-content:flex-end;
    margin-top:18px;
    border-color:rgba(65,84,137,.18);
    background:linear-gradient(145deg,var(--theme-glass, rgba(252,253,255,.94)),var(--theme-glass, rgba(231,238,250,.91)));
    box-shadow:0 14px 34px rgba(31,47,89,.16),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}
.employee-form-page .emp-modal-action-buttons { width:min(100%,520px); }
.employee-form-page .emp-modal-sticky-actions .btn-primary { flex:1.35; min-width:220px; background:linear-gradient(135deg,#4f70d6,#3b58aa); border-color:#435fac; box-shadow:0 9px 20px rgba(52,78,157,.26); }
.employee-form-page .emp-modal-sticky-actions .btn-ghost { flex:1; min-width:130px; color:var(--theme-ink, #59647c); border-color:rgba(76,93,137,.22); background:var(--theme-glass, rgba(255,255,255,.75)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)); }
.employee-form-page .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) { color:var(--theme-ink, #9b4e42); border-color:rgba(185,87,70,.3); background:var(--theme-glass, rgba(255,244,242,.94)); }
.employee-form-page :is(button,input,select,[role="button"]):focus-visible {
    outline:3px solid rgba(75,111,216,.25);
    outline-offset:2px;
}

html[data-theme="dark"] .employee-form-page.employee-modal-overlay .modal.employee-form-surface {
    background:radial-gradient(circle at 100% 0%,rgba(80,111,216,.17),transparent 31%),linear-gradient(145deg,rgba(31,41,56,.96),rgba(23,32,45,.92));
}
html[data-theme="dark"] .employee-form-page .emp-modal-title-group h3 { color:var(--text1); }
html[data-theme="dark"] .employee-form-page .emp-form-section { border-color:rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(42,53,70,.78),rgba(27,36,50,.68)); }
html[data-theme="dark"] .employee-form-page .emp-form-section .field > label { color:#b9c5d9; }
html[data-theme="dark"] .employee-form-page .emp-form-section :is(input,select,.date-picker-field,.employee-responsibility-select-trigger) { border-color:rgba(255,255,255,.11); background:rgba(18,27,39,.48); }
html[data-theme="dark"] .employee-form-page .emp-form-section input[readonly] { color:#9eabc0; background:rgba(255,255,255,.045); }

@media (min-width:900px) {
    .employee-form-page .modal-2col.emp-modal-glass .modal-fields-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        align-items:start;
        gap:18px;
    }
}
@media (max-width:899px) {
    .employee-form-page .modal-fields-grid { display:grid; grid-template-columns:1fr; gap:14px; }
}
@media (max-width:620px) {
    .employee-form-page.employee-modal-overlay .modal.employee-form-surface { padding:12px; }
    .employee-form-page .emp-modal-sticky-head { margin:-12px -12px 14px; padding:14px 12px; }
    .employee-form-page .emp-form-section { padding:14px; border-radius:15px; }
    .employee-form-page .emp-modal-title-group h3 { font-size:16px; }
    .employee-form-page .emp-modal-action-buttons { width:100%; }
}
@media (max-width:430px) {
    .employee-form-page .emp-form-section .field-row { grid-template-columns:1fr; }
    .employee-form-page .emp-modal-action-buttons { flex-direction:column; }
    .employee-form-page .emp-modal-sticky-actions .btn-primary,
    .employee-form-page .emp-modal-sticky-actions .btn-ghost { width:100%; min-width:0; }
}

/* Employee form corrections: the hire calendar belongs to its field and the
   action bar is regular document content, visible only at the form's end. */
.employee-form-page #emp_hireDatePicker {
    position:relative;
    z-index:1;
}
.employee-form-page .field:has(#emp_hireDatePicker .date-picker-field.open),
.employee-form-page .emp-employment-section:has(#emp_hireDatePicker .date-picker-field.open) {
    position:relative;
    z-index:80;
    overflow:visible;
}
.employee-form-page #emp_hireDatePicker .date-picker-popover:not(.is-portal) {
    position:absolute;
    inset-block-start:calc(100% + 7px);
    inset-inline-start:0;
    top:auto;
    left:auto;
    width:min(300px,calc(100vw - 48px));
    z-index:90;
}
.employee-form-page #emp_hireDatePicker .date-picker-popover.opens-up:not(.is-portal) {
    inset-block-start:auto;
    inset-block-end:calc(100% + 7px);
}
.employee-form-page .emp-modal-sticky-actions {
    position:static;
    inset:auto;
    z-index:auto;
    justify-content:flex-start;
    margin:20px 0 0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.employee-form-page .emp-modal-action-buttons {
    width:auto;
    max-width:100%;
    justify-content:flex-start;
}
.employee-form-page .emp-modal-sticky-actions .btn-primary { flex:0 0 auto; }
.employee-form-page .emp-modal-sticky-actions .btn-ghost {
    flex:0 0 auto;
    color:#fff;
    border-color:#c9554d;
    background:linear-gradient(135deg,#e46d63,#bd443f);
    box-shadow:0 8px 17px rgba(189,68,63,.22),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.24));
}
.employee-form-page .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) {
    color:#fff;
    border-color:#ad3835;
    background:linear-gradient(135deg,#d95d55,#a93634);
    box-shadow:0 10px 21px rgba(173,56,53,.28),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.2));
}
.employee-form-page .emp-modal-sticky-actions .btn-ghost:focus-visible {
    outline-color:rgba(201,85,77,.3);
}
@media (max-width:430px) {
    .employee-form-page .emp-modal-action-buttons { width:100%; }
}

/* Employee form action dock: a full-width footer that belongs to the end of
   the card (not the viewport), with a compact RTL action group. */
.employee-form-page .emp-modal-sticky-actions {
    min-height:86px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    margin:22px -22px -22px;
    padding-top: 0px;
    border:0;
    border-top:1px solid rgba(76,98,158,.16);
    border-radius:0 0 22px 22px;
    background:
        radial-gradient(circle at 92% 10%,rgba(47,169,109,.09),transparent 34%),
        linear-gradient(145deg,var(--theme-glass, rgba(248,252,255,.9)),var(--theme-glass, rgba(228,237,250,.82)));
    box-shadow:0 -9px 24px -22px rgba(31,47,89,.55),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    animation:employeeActionDockIn .34s var(--ui-ease) both;
}
.employee-form-page .emp-modal-action-buttons {
    width:min(100%,440px);
    display:grid;
    grid-template-columns:minmax(210px,1.55fr) minmax(130px,.9fr);
    align-items:stretch;
    gap:12px;
}
.employee-form-page .emp-modal-sticky-actions .btn {
    width:100%;
    min-width:0;
    min-height:50px;
    gap:8px;
    margin:0;
    border-radius:13px;
    font-size:13px;
    font-weight:880;
    cursor:pointer;
    transition:transform .2s var(--ui-ease),box-shadow .2s ease,filter .2s ease,border-color .2s ease;
}
.employee-form-page .emp-modal-sticky-actions .btn > i {
    font-size:18px;
    transition:transform .22s var(--ui-ease);
}
.employee-form-page .emp-modal-sticky-actions .btn-primary {
    color:#fff;
    border-color:#2c9c86;
    background:linear-gradient(135deg,#35b47a 0%,#2fa58e 48%,#2d9fc0 100%);
    box-shadow:0 9px 20px rgba(39,151,132,.25),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}
.employee-form-page .emp-modal-sticky-actions .btn-primary:hover:not(:disabled) {
    transform:translateY(-2px);
    filter:saturate(1.06);
    box-shadow:0 13px 26px rgba(39,151,132,.32),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}
.employee-form-page .emp-modal-sticky-actions .btn-primary:hover:not(:disabled) > i { transform:translateY(-1px) rotate(5deg) scale(1.08); }
.employee-form-page .emp-modal-sticky-actions .btn-ghost {
    color:#fff;
    border-color:#c84f48;
    background:linear-gradient(135deg,#e36d63 0%,#d85b54 52%,#bc413d 100%);
    box-shadow:0 9px 19px rgba(190,66,61,.24),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.23));
}
.employee-form-page .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) {
    color:#fff;
    border-color:#ad3734;
    background:linear-gradient(135deg,#dc625a,#c94b46 54%,#a93432);
    transform:translateY(-2px);
    box-shadow:0 13px 25px rgba(173,55,52,.3),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.2));
}
.employee-form-page .emp-modal-sticky-actions .btn-ghost:hover:not(:disabled) > i { transform:rotate(90deg) scale(1.08); }
html[data-theme="dark"] .employee-form-page .emp-modal-sticky-actions {
    border-top-color:rgba(255,255,255,.09);
    background:radial-gradient(circle at 92% 10%,rgba(47,169,109,.1),transparent 34%),linear-gradient(145deg,rgba(35,45,60,.94),rgba(24,33,46,.9));
    box-shadow:0 -9px 24px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes employeeActionDockIn {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}
@media (max-width:620px) {
    .employee-form-page .emp-modal-sticky-actions {
        min-height:78px;
        margin:18px -12px -12px;
        padding:13px 12px;
        border-radius:0 0 17px 17px;
    }
}
@media (max-width:430px) {
    .employee-form-page .emp-modal-action-buttons { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    .employee-form-page .emp-modal-sticky-actions { animation:none; }
    .employee-form-page .emp-modal-sticky-actions .btn,
    .employee-form-page .emp-modal-sticky-actions .btn > i { transition:none; }
    .employee-form-page .emp-modal-sticky-actions .btn:hover:not(:disabled),
    .employee-form-page .emp-modal-sticky-actions .btn:hover:not(:disabled) > i { transform:none; }
}

/* ---------- customer form ---------- */
.customer-form-page .optional-tag { color:var(--theme-ink, #818ba0); font-size:10px; font-weight:720; }

/* ---------- expense category chooser: expressive administrative cards ---------- */
.expense-category-overlay { padding:20px; }
.overlay .expense-category-modal {
    --expense-launch-tone:#FF7961;
    --expense-launch-deep:#E75D47;
    width:min(590px,calc(100vw - 32px));
    max-width:590px;
    padding:18px;
    overflow:hidden;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.86));
    border-radius:23px;
    background:
        radial-gradient(circle at 100% 0%,rgba(255,121,97,.18),transparent 36%),
        radial-gradient(circle at 0% 100%,rgba(47,169,109,.09),transparent 33%),
        linear-gradient(145deg,var(--theme-glass, rgba(248,251,255,.94)),var(--theme-glass, rgba(218,228,245,.9)));
    box-shadow:0 28px 70px rgba(23,34,74,.28),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
.expense-category-head {
    display:flex;
    align-items:center;
    gap:12px;
    margin:-4px -4px 16px;
    padding:9px 9px 15px;
    border-bottom:1px solid rgba(231,93,71,.16);
}
.expense-category-head-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    flex:0 0 48px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.48));
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,var(--expense-launch-tone),var(--expense-launch-deep));
    box-shadow:0 10px 21px rgba(231,93,71,.29),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.33));
    font-size:22px;
}
.expense-category-head > div { min-width:0; display:grid; gap:2px; }
.expense-category-kicker { color:var(--theme-ink, #B94E3D); font-size:10.5px; font-weight:800; }
.overlay .expense-category-head h3 { margin:0; color:var(--text1); font-size:17px; font-weight:920; }
.expense-category-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.expense-category-card {
    position:relative;
    min-width:0;
    min-height:82px;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 30px;
    align-items:center;
    gap:10px;
    padding:11px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--category-tone) 20%,var(--theme-stroke, rgba(255,255,255,.84)));
    border-radius:16px;
    color:var(--text1);
    background:linear-gradient(145deg,color-mix(in srgb,var(--category-tint) 48%,var(--theme-glass, rgba(255,255,255,.78))),var(--theme-glass, rgba(255,255,255,.55)));
    box-shadow:0 7px 17px rgba(38,52,97,.07),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    font:inherit;
    text-align:start;
    cursor:pointer;
    animation:expenseCategoryCardIn .34s var(--ui-ease) both;
    animation-delay:calc(var(--category-index) * 42ms + 40ms);
    transition:transform .22s var(--ui-ease),border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.expense-category-card::before {
    content:"";
    position:absolute;
    inset-block:12px;
    inset-inline-start:0;
    width:3px;
    border-radius:99px;
    background:var(--category-tone);
    opacity:.72;
    transform:scaleY(.45);
    transition:transform .22s var(--ui-ease),opacity .22s ease;
;display:none!important;}
.expense-category-grid > .expense-category-card:last-child:nth-child(odd) { grid-column:1 / -1; }
.expense-category-card-icon {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--category-tone) 22%,var(--theme-stroke, rgba(255,255,255,.82)));
    border-radius:13px;
    color:var(--category-tone);
    background:color-mix(in srgb,var(--category-tint) 68%,var(--theme-glass, rgba(255,255,255,.72)));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    font-size:21px;
    transition:transform .25s var(--ui-ease),color .22s ease,background .22s ease,box-shadow .22s ease;
}
.expense-category-card-copy { min-width:0; display:grid; gap:4px; }
.expense-category-card-copy strong { overflow:hidden; color:var(--text1); font-size:13px; font-weight:880; text-overflow:ellipsis; white-space:nowrap; }
.expense-category-card-copy small { color:var(--theme-ink, #858da0); font-size:9.5px; font-weight:850; letter-spacing:.08em; }
.expense-category-card-arrow {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:var(--category-tone);
    background:var(--theme-glass, rgba(255,255,255,.52));
    opacity:.7;
    transition:transform .22s var(--ui-ease),opacity .22s ease,background .22s ease;
}
.expense-category-card:hover,
.expense-category-card:focus-visible {
    outline:0;
    transform:translateY(-3px);
    border-color:color-mix(in srgb,var(--category-tone) 58%,var(--theme-stroke, rgba(255,255,255,.85)));
    background:linear-gradient(145deg,color-mix(in srgb,var(--category-tint) 72%,var(--theme-glass, rgba(255,255,255,.82))),var(--theme-glass, rgba(255,255,255,.68)));
    box-shadow:0 15px 29px color-mix(in srgb,var(--category-tone) 16%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
.expense-category-card:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb,var(--category-tone) 24%,transparent),0 15px 29px color-mix(in srgb,var(--category-tone) 14%,transparent); }
.expense-category-card:hover::before,
.expense-category-card:focus-visible::before { opacity:1; transform:scaleY(1); }
.expense-category-card:hover .expense-category-card-icon,
.expense-category-card:focus-visible .expense-category-card-icon {
    color:#fff;
    background:var(--category-tone);
    box-shadow:0 8px 17px color-mix(in srgb,var(--category-tone) 28%,transparent);
    transform:translateY(-2px) rotate(-5deg) scale(1.06);
}
.expense-category-card:hover .expense-category-card-arrow,
.expense-category-card:focus-visible .expense-category-card-arrow { opacity:1; background:var(--theme-glass, rgba(255,255,255,.82)); transform:translateX(-3px); }
.expense-category-actions { margin-top:14px; padding-top:13px; border-top:1px solid rgba(79,98,159,.13); }
.expense-category-cancel {
    width:100%;
    min-height:46px;
    gap:7px;
    color:var(--theme-ink, #a74d47);
    border:1px solid rgba(193,80,72,.22);
    border-radius:13px;
    background:var(--theme-glass, rgba(255,246,244,.76));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
}
.expense-category-cancel:hover { color:#fff; border-color:#c6534c; background:linear-gradient(135deg,#df6a61,#bd4540); box-shadow:0 9px 19px rgba(187,68,63,.22); transform:translateY(-1px); }
@keyframes expenseCategoryCardIn { from { opacity:0; transform:translateY(9px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Backdrop clicks on data-entry dialogs are ignored. A small nudge explains
   that the dialog is protected without destroying any entered information. */
.modal.modal-explicit-dismiss-feedback { animation:protectedModalNudge .34s var(--ui-ease) both; }
@keyframes protectedModalNudge {
    0%,100% { transform:translateX(0); }
    28% { transform:translateX(4px); }
    58% { transform:translateX(-3px); }
    82% { transform:translateX(2px); }
}
html[data-theme="dark"] .overlay .expense-category-modal { border-color:rgba(255,255,255,.12); background:radial-gradient(circle at 100% 0%,rgba(255,121,97,.18),transparent 36%),linear-gradient(145deg,rgba(35,44,59,.97),rgba(22,30,42,.94)); }
html[data-theme="dark"] .expense-category-card { border-color:color-mix(in srgb,var(--category-tone) 35%,rgba(255,255,255,.1)); background:linear-gradient(145deg,color-mix(in srgb,var(--category-tint) 18%,rgba(35,44,59,.82)),rgba(22,30,42,.68)); }
html[data-theme="dark"] .expense-category-card-arrow { background:rgba(255,255,255,.06); }
html[data-theme="dark"] .expense-category-cancel { color:#efa09a; border-color:rgba(224,106,97,.25); background:rgba(224,106,97,.08); }
@media (max-width:520px) {
    .expense-category-overlay {
        align-items:center;
        padding:10px;
        padding-block-end:max(10px,env(safe-area-inset-bottom));
    }
    .overlay .expense-category-modal {
        width:100%;
        height:min(760px,calc(100dvh - 20px - env(safe-area-inset-bottom)));
        max-height:calc(100dvh - 20px - env(safe-area-inset-bottom));
        display:flex;
        flex-direction:column;
        padding:14px;
        overflow:hidden;
        box-sizing:border-box;
    }
    .expense-category-head { flex:0 0 auto;margin:-2px -2px 12px;padding:8px 8px 12px; }
    .expense-category-grid {
        min-height:0;
        flex:1 1 auto;
        grid-template-columns:1fr;
        align-content:start;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
        padding:2px 4px 8px;
    }
    .expense-category-grid > .expense-category-card:last-child:nth-child(odd) { grid-column:auto; }
    .expense-category-card { min-height:76px; }
    .expense-category-actions {
        position:relative;
        z-index:2;
        flex:0 0 auto;
        margin:0 -2px;
        padding:12px 2px 0;
        background:linear-gradient(180deg,var(--theme-highlight, rgba(205,216,234,.18)),rgba(255,121,97,.07));
    }
    .expense-category-cancel { min-height:46px;margin:0; }
}
@media (prefers-reduced-motion:reduce) {
    .expense-category-card,.expense-category-card-icon,.expense-category-card-arrow,.modal.modal-explicit-dismiss-feedback { animation:none !important; transition:none !important; }
    .expense-category-card:hover,.expense-category-card:focus-visible,.expense-category-card:hover .expense-category-card-icon,.expense-category-card:focus-visible .expense-category-card-icon,.expense-category-card:hover .expense-category-card-arrow,.expense-category-card:focus-visible .expense-category-card-arrow { transform:none; }
}

/* Keep the modal identity visible while its form scrolls. */
.responsibility-definition-modal .responsibility-modal-head { position:sticky; top:-20px; z-index:110; margin:-20px 0 14px; padding:17px 0 12px; background:linear-gradient(180deg,var(--theme-glass, rgba(240,246,255,.99)) 76%,var(--theme-highlight, rgba(240,246,255,0))); box-shadow:0 10px 17px -17px rgba(31,47,89,.65); }
html[data-theme="dark"] .responsibility-definition-modal .responsibility-modal-head { background:linear-gradient(180deg,rgba(37,47,63,.99) 76%,rgba(37,47,63,0)); }
html[lang="fa"] .profile-access-page :is(.till-attendant-select-trigger,.till-attendant-select-menu,.till-attendant-select-option,.responsibility-select-trigger,.responsibility-select-menu,.responsibility-select-option),
html[lang="fa"] .responsibility-definition-modal,
html[lang="fa"] .responsibility-definition-modal :is(button,input,textarea,select) { font-family:'IRANSans',sans-serif; }
.responsibility-color-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; margin-top:14px; padding:10px; border:1px solid rgba(47,169,109,.17); border-radius:14px; background:rgba(47,169,109,.055); }.responsibility-color-row > span { color:var(--text2); font-size:11.5px; font-weight:800; }.responsibility-color-choices { display:flex; flex-wrap:wrap; gap:7px; }.responsibility-color-choice { width:22px; height:22px; padding:0; border:2px solid transparent; border-radius:50%; background:var(--choice-color); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38)); cursor:pointer; transition:transform .16s var(--ui-ease),box-shadow .16s ease; }.responsibility-color-choice:hover { transform:scale(1.1); }.responsibility-color-choice.active { border-color:var(--theme-stroke, #fff); box-shadow:0 0 0 2px var(--choice-color),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38)); }.responsibility-active-toggle { min-height:32px; display:inline-flex; align-items:center; gap:7px; color:var(--text1); font-size:11px; font-weight:780; white-space:nowrap; cursor:pointer; }.responsibility-active-toggle input { position:absolute; width:1px; height:1px; opacity:0; }.responsibility-active-switch { width:34px; height:20px; position:relative; flex:0 0 34px; border:1px solid rgba(96,111,151,.25); border-radius:999px; background:rgba(110,124,160,.18); box-shadow:inset 0 1px 2px rgba(28,42,78,.12); transition:background .18s ease,border-color .18s ease,box-shadow .18s ease; }.responsibility-active-switch::after { content:''; position:absolute; top:3px; right:3px; width:12px; height:12px; border-radius:50%; background:var(--theme-surface, #fff); box-shadow:0 2px 5px rgba(28,42,78,.24); transition:transform .18s var(--ui-ease); }.responsibility-active-toggle input:checked + .responsibility-active-switch { border-color:#2f9866; background:linear-gradient(135deg,#45ad76,#278b5e); box-shadow:0 4px 9px rgba(47,152,102,.22); }.responsibility-active-toggle input:checked + .responsibility-active-switch::after { transform:translateX(-14px); }.responsibility-active-toggle input:focus-visible + .responsibility-active-switch { outline:3px solid rgba(47,152,102,.25); outline-offset:2px; }.responsibility-definition-modal .modal-actions { display:flex; justify-content:flex-start; margin-top:16px; }.responsibility-definition-modal .modal-actions .btn { margin:0; }
@media (max-width:650px) { .responsibility-definition-card { grid-template-columns:40px minmax(0,1fr); }.responsibility-definition-icon { width:40px; height:40px; }.responsibility-edit-btn { grid-column:2; justify-self:start; }.responsibility-form-grid { grid-template-columns:1fr; }.responsibility-name-field,.responsibility-description-field { grid-column:auto; }.responsibility-color-row { grid-template-columns:1fr; align-items:start; }.responsibility-definition-modal .modal-actions { display:grid; grid-template-columns:1fr; }.responsibility-definition-modal .modal-actions .btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { .responsibility-definition-card,.responsibility-color-choice { animation:none !important; transition:none !important; } }

/* ---------- responsibility editor redesign ---------- */
.overlay .modal.responsibility-definition-modal--redesigned {
    --ui-tone:var(--responsibility-form-tone);
    --ui-tone-2:color-mix(in srgb,var(--responsibility-form-tone) 72%,#293b72);
    width:min(980px,calc(100vw - 32px));
    max-width:none;
    max-height:calc(100dvh - 28px);
    padding:20px;
    overflow:auto;
    border:1px solid color-mix(in srgb,var(--responsibility-form-tone) 28%,var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius:25px;
    background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--responsibility-form-tone) 12%,transparent),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(244,248,255,.98)),var(--theme-glass, rgba(220,230,246,.96)));
}
.responsibility-definition-modal--redesigned .responsibility-modal-head {
    position:static;
    margin:0 0 16px;
    padding:12px 14px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.88));
    border-radius:18px;
    background:var(--theme-glass, rgba(255,255,255,.68));
    box-shadow:0 9px 20px rgba(35,49,94,.08),inset 0 1px 0 var(--theme-highlight, #fff);
}
.responsibility-definition-modal--redesigned .responsibility-modal-head-icon {
    width:50px;height:50px;flex-basis:50px;border-radius:15px;
    background:linear-gradient(145deg,var(--responsibility-form-tone),color-mix(in srgb,var(--responsibility-form-tone) 72%,#293b72));
    box-shadow:0 8px 17px color-mix(in srgb,var(--responsibility-form-tone) 24%,transparent);
}
.responsibility-definition-modal--redesigned .responsibility-modal-head h3 { font-size:18px; }
.responsibility-definition-modal--redesigned .responsibility-modal-head p { font-size:11.5px; }
.responsibility-form-layout { display:grid;grid-template-columns:minmax(0,1.45fr) minmax(275px,.72fr);gap:15px; }
.responsibility-form-main { min-width:0;display:grid;gap:13px; }
.responsibility-form-section,.responsibility-appearance-panel {
    min-width:0;padding:15px;border:1px solid rgba(91,108,169,.15);border-radius:18px;background:var(--theme-glass, rgba(255,255,255,.54));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
}
.responsibility-form-section--identity { border-inline-start:1px solid var(--border); }
.responsibility-form-section--behavior { border-inline-start:1px solid var(--border); }
.responsibility-form-section-head { display:flex;align-items:center;gap:9px;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid rgba(88,105,163,.13); }
.responsibility-form-section-head > span { width:35px;height:35px;display:grid;flex:0 0 35px;place-items:center;border-radius:11px;color:#fff;font-size:17px; }
.responsibility-form-section--identity .responsibility-form-section-head > span { background:linear-gradient(145deg,#4f6fe8,#7659e8); }
.responsibility-form-section--behavior .responsibility-form-section-head > span { background:linear-gradient(145deg,#2fa574,#218bb6); }
.responsibility-form-section-head > div { display:grid;gap:1px; }
.responsibility-form-section-head b { color:var(--text1);font-size:13px;font-weight:900; }
.responsibility-form-section-head small { color:var(--text2);font-size:10px;font-weight:650; }
.responsibility-definition-modal--redesigned .responsibility-form-grid { grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);gap:11px; }
.responsibility-definition-modal--redesigned .responsibility-name-field { grid-column:auto; }
.responsibility-definition-modal--redesigned .responsibility-description-field { grid-column:1/-1; }
.responsibility-definition-modal--redesigned textarea { min-height:94px;resize:vertical; }
.responsibility-definition-modal--redesigned .field > span { display:flex;align-items:center;gap:5px;color:var(--text1);font-size:11.5px; }
.responsibility-definition-modal--redesigned .field > span > i { color:var(--responsibility-form-tone);font-size:14px; }
.responsibility-definition-modal--redesigned :is(input,textarea) { border-color:rgba(79,111,232,.19);background:var(--theme-glass, rgba(255,255,255,.8)); }
.responsibility-definition-modal--redesigned :is(input,textarea):focus { border-color:var(--responsibility-form-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--responsibility-form-tone) 14%,transparent); }
.responsibility-behavior-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:end; }
.responsibility-active-toggle--panel { grid-column:1/-1;min-height:48px;padding:8px 11px;border:1px solid rgba(47,165,116,.18);border-radius:13px;background:rgba(47,165,116,.07); }
.responsibility-active-toggle--panel > span:last-child { display:flex;align-items:center;gap:6px; }
.responsibility-active-toggle--panel > span:last-child i { color:var(--theme-ink, #2fa574);font-size:15px; }
.responsibility-pump-toggle { border-color:color-mix(in srgb,#218bb6 25%,transparent);background:color-mix(in srgb,#218bb6 8%,transparent); }
.responsibility-pump-toggle > span:last-child { display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px; }
.responsibility-pump-toggle > span:last-child i { grid-row:1 / span 2;color:var(--theme-ink, #218bb6); }
.responsibility-pump-toggle > span:last-child b { color:var(--text1);font-size:11px;font-weight:900; }
.responsibility-pump-toggle > span:last-child small { color:var(--text2);font-size:9px;font-weight:650;line-height:1.55; }
.responsibility-appearance-panel { display:flex;flex-direction:column;gap:14px;border-color:color-mix(in srgb,var(--responsibility-form-tone) 20%,transparent);background:linear-gradient(160deg,var(--theme-glass, rgba(255,255,255,.72)),color-mix(in srgb,var(--responsibility-form-tone) 7%,var(--theme-glass, rgba(230,237,249,.72)))); }
.responsibility-live-preview { display:flex;align-items:center;gap:11px;min-height:90px;padding:13px;border:1px solid color-mix(in srgb,var(--responsibility-form-tone) 24%,transparent);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.68)); }
.responsibility-live-preview-icon { width:54px;height:54px;display:grid;flex:0 0 54px;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,var(--responsibility-form-tone),color-mix(in srgb,var(--responsibility-form-tone) 68%,#263866));box-shadow:0 9px 18px color-mix(in srgb,var(--responsibility-form-tone) 23%,transparent);font-size:24px; }
.responsibility-live-preview > div { min-width:0;display:grid;gap:3px; }
.responsibility-live-preview small { color:var(--text2);font-size:9.5px;font-weight:750; }
.responsibility-live-preview strong { overflow:hidden;color:var(--text1);font-size:13px;font-weight:900;text-overflow:ellipsis;white-space:nowrap; }
.responsibility-live-preview > div > span { color:var(--responsibility-form-tone);font-size:10.5px;font-weight:800; }
.responsibility-picker-block { display:grid;gap:9px; }
.responsibility-picker-title { display:flex;align-items:center;gap:6px;color:var(--text1);font-size:11.5px;font-weight:850; }
.responsibility-picker-title i { color:var(--responsibility-form-tone);font-size:16px; }
.responsibility-icon-gallery { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px; }
.responsibility-icon-choice { aspect-ratio:1;display:grid;place-items:center;padding:0;border:1px solid rgba(95,111,164,.16);border-radius:10px;color:var(--text2);background:var(--theme-glass, rgba(255,255,255,.58));cursor:pointer;font-size:17px;transition:border-color .16s ease,color .16s ease,background .16s ease,transform .16s var(--ui-ease); }
.responsibility-icon-choice:hover,.responsibility-icon-choice:focus-visible { outline:none;border-color:color-mix(in srgb,var(--responsibility-form-tone) 42%,transparent);color:var(--responsibility-form-tone);background:color-mix(in srgb,var(--responsibility-form-tone) 8%,var(--theme-surface, #fff));transform:translateY(-1px); }
.responsibility-icon-choice.active { border-color:var(--responsibility-form-tone);color:#fff;background:var(--responsibility-form-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--responsibility-form-tone) 11%,transparent); }
.responsibility-color-choices--expanded { display:grid;grid-template-columns:repeat(6,1fr);gap:9px; }
.responsibility-color-choices--expanded .responsibility-color-choice { width:100%;height:auto;aspect-ratio:1;border-width:3px; }
.responsibility-definition-modal--redesigned .modal-actions { display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid rgba(89,106,163,.14); }
.responsibility-definition-modal--redesigned .modal-actions .btn { width:100%;min-height:47px; }
html[data-theme="dark"] .responsibility-definition-modal--redesigned { background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--responsibility-form-tone) 13%,transparent),transparent 38%),linear-gradient(145deg,rgba(37,47,63,.99),rgba(25,33,46,.98)); }
html[data-theme="dark"] .responsibility-definition-modal--redesigned .responsibility-modal-head,html[data-theme="dark"] :is(.responsibility-form-section,.responsibility-appearance-panel,.responsibility-live-preview) { border-color:rgba(255,255,255,.1);background:rgba(24,32,45,.72); }
html[data-theme="dark"] .responsibility-icon-choice { border-color:rgba(255,255,255,.1);background:rgba(15,22,34,.5); }
@media (max-width:780px) { .responsibility-form-layout { grid-template-columns:1fr; }.responsibility-appearance-panel { order:-1; }.responsibility-icon-gallery { grid-template-columns:repeat(8,minmax(0,1fr)); }.responsibility-color-choices--expanded { grid-template-columns:repeat(8,1fr); } }
@media (max-width:560px) { .overlay .modal.responsibility-definition-modal--redesigned { width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:12px;border-radius:20px; }.responsibility-definition-modal--redesigned .responsibility-form-grid,.responsibility-behavior-grid { grid-template-columns:1fr; }.responsibility-definition-modal--redesigned .responsibility-name-field,.responsibility-definition-modal--redesigned .responsibility-description-field,.responsibility-active-toggle--panel { grid-column:auto; }.responsibility-icon-gallery { grid-template-columns:repeat(6,minmax(0,1fr)); }.responsibility-color-choices--expanded { grid-template-columns:repeat(6,1fr); }.responsibility-definition-modal--redesigned .modal-actions { grid-template-columns:1fr; } }
html[data-theme="dark"] .profile-action-card { background:linear-gradient(145deg,color-mix(in srgb,var(--profile-tone) 17%,rgba(28,35,47,.96)),rgba(24,30,41,.93)); box-shadow:0 12px 27px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.05); }
html[lang="fa"] .profile-action-card,html[lang="fa"] .profile-action-card * { font-family:'IRANSans',sans-serif; }
@media (max-width:900px) { .profile-action-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .profile-action-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.station-fields,.station-fields--three { grid-template-columns:1fr; }.profile-action-card { min-height:112px; padding:12px 5px; }.profile-action-icon { width:44px; height:44px; font-size:22px; } }
@media (prefers-reduced-motion:reduce) { .profile-action-card { transition:none !important; }.profile-action-card:hover { transform:none; } }

@keyframes uiPageEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes uiModalEnter {
    from { opacity: 0; transform: translateY(18px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes uiSurfaceEnter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#mainContent .view.active :is(
    .finance-card,
    .metric-card,
    .sales-trend-card,
    .pump-card,
    .work-record-stats-panel,
    .leave-stat-tile,
    .profile-card
) {
    animation: uiSurfaceEnter .38s var(--ui-ease) both;
}

#mainContent .view.active :is(.grid3, .finance-grid, .fuel-group-grid) > :nth-child(2) { animation-delay: 45ms; }
#mainContent .view.active :is(.grid3, .finance-grid, .fuel-group-grid) > :nth-child(3) { animation-delay: 90ms; }
#mainContent .view.active :is(.grid3, .finance-grid, .fuel-group-grid) > :nth-child(4) { animation-delay: 135ms; }

#mainContent [onclick]:not(button):not(input):not(select):not(textarea):not(a) {
    cursor: pointer;
}

#mainContent [onclick]:not(button):not(input):not(select):not(textarea):not(a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ui-tone) 25%, transparent);
    outline-offset: 3px;
}

/* ---------- dark surfaces ---------- */
html[data-theme="dark"] #mainContent .view:not(#view-dashboard):not(#view-tanks) :is(
    .card:not(.sales-hero-card):not(.expenses-hero-card):not(.finance-profit-card):not(.finance-debt-card),
    .metric-card,
    .finance-card,
    .sales-trend-card,
    .pump-card,
    .profile-card,
    .profile-header,
    .emp-form-section,
    .work-record-stats-panel,
    .leave-stat-tile,
    .ledger-card,
    .info-box
) {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 11%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(35,43,56,.86), rgba(20,26,35,.78));
}

html[data-theme="dark"] #mainContent .view:not(#view-dashboard):not(#view-tanks) :is(
    .emp-list-section,
    .emp-status-card,
    .work-record-filter-cal,
    .till2-sec,
    .till2-month,
    .till2-signed,
    .salary-info-header,
    .logo-code-box,
    .preview-box,
    .date-picker-popover
) {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 10%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(35,43,56,.86), rgba(20,26,35,.78));
}

html[data-theme="dark"] .overlay .modal:not(.inventory-form-modal) {
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--ui-tone) 12%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(38,46,60,.96), rgba(18,24,33,.94));
    box-shadow: 0 30px 76px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
}

html[data-theme="dark"] .overlay .modal:not(.inventory-form-modal) > h3.ui-modal-title {
    border-color: rgba(255,255,255,.11);
    background: linear-gradient(145deg, rgba(48,58,73,.84), rgba(27,34,45,.76));
    box-shadow: 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="dark"] #mainContent :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .overlay .modal:not(.inventory-form-modal) .field :is(input, select, textarea),
html[data-theme="dark"] .overlay .modal:not(.inventory-form-modal) .date-picker-field {
    border-color: rgba(255,255,255,.11);
    background: rgba(18,24,33,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- single-column tank form ---------- */
.overlay .tank-entry-modal {
    width: min(440px, calc(100vw - 28px));
    max-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-color: var(--theme-stroke, rgba(255,255,255,.86));
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(121,170,246,.27), transparent 41%),
        radial-gradient(circle at 0% 100%, rgba(176,139,241,.18), transparent 43%),
        linear-gradient(145deg, var(--theme-glass, rgba(214,224,239,.92)), rgba(164,181,208,.86));
    box-shadow: 0 30px 74px rgba(20,30,66,.38), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.overlay .tank-entry-modal .inventory-modal-head {
    position: relative;
    top: auto;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 68px;
    margin: 12px 12px 0;
    padding: 10px 13px;
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--form-tone) 13%, transparent), transparent 40%),
        linear-gradient(145deg, var(--theme-glass, rgba(250,252,255,.93)), var(--theme-glass, rgba(220,229,246,.78)));
    box-shadow: 0 10px 22px rgba(39,54,109,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

.overlay .tank-entry-modal .inventory-modal-head-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.overlay .tank-entry-modal .inventory-modal-head h3 { font-size: 17px; }

.overlay .tank-entry-modal .inventory-form-body.tank-form-flow {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 13px 18px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(83,110,185,.55) transparent;
}

.overlay .tank-entry-modal .inventory-form-body.tank-form-flow::-webkit-scrollbar { width: 5px; }
.overlay .tank-entry-modal .inventory-form-body.tank-form-flow::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(83,110,185,.55); }

.overlay .tank-entry-modal .inventory-form-panel {
    display: contents;
}

.overlay .tank-entry-modal .inventory-field,
.overlay .tank-entry-modal .inventory-field-grid {
    margin: 0 0 11px;
}

.overlay .tank-entry-modal .inventory-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.overlay .tank-entry-modal .inventory-field-grid .inventory-field { margin-bottom: 11px; }

.overlay .tank-entry-modal .inventory-field > label {
    margin-bottom: 5px;
    padding-inline: 2px;
    font-size: 12.5px;
    font-weight: 850;
}

.overlay .tank-entry-modal .inventory-input-wrap input,
.overlay .tank-entry-modal .inventory-input-wrap select,
.overlay .tank-entry-modal .inventory-select-trigger {
    min-height: 46px;
    border-radius: 13px;
}

.overlay .tank-entry-modal .fuel-checkbox-row {
    order: 0;
    margin: 0 0 9px;
    padding: 11px 12px;
    border-color: color-mix(in srgb, var(--form-tone) 22%, var(--theme-stroke, rgba(255,255,255,.8)));
    border-radius: 14px;
    background: color-mix(in srgb, var(--form-tone) 7%, var(--theme-glass, rgba(255,255,255,.53)));
}

.overlay .tank-entry-modal .fuel-checkbox-row .fuel-checkbox {
    min-height: 25px;
    font-size: 12.5px;
    font-weight: 760;
}

.overlay .tank-entry-modal .field-system-note {
    margin: -2px 0 11px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--text2);
    background: var(--theme-glass, rgba(227,234,248,.58));
}

.overlay .tank-entry-modal .modal-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 9px;
    margin: 4px 18px 17px;
    padding: 0;
    border: 0;
    background: transparent;
}

.overlay .tank-entry-modal .modal-actions .btn { min-height: 47px; }

html[data-theme="dark"] .overlay .tank-entry-modal .inventory-modal-head {
    background: linear-gradient(145deg, rgba(47,58,76,.94), rgba(30,39,53,.9));
}

html[data-theme="dark"] .overlay .tank-entry-modal {
    border-color: rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 100% 0%, rgba(85,121,204,.24), transparent 42%),
        linear-gradient(145deg, rgba(41,51,68,.96), rgba(23,31,44,.94));
}

/* Tank editor follows the same two-panel workspace used by expense forms. */
.overlay .modal.tank-entry-modal {
    --tank-form-tone:#6D66E8;
    --tank-form-tone-rgb:109,102,232;
    --tank-form-deep:#4F55C9;
    box-sizing:border-box;
    width:min(900px,calc(100vw - 56px));
    max-width:none;
    height:min(640px,calc(100dvh - 32px));
    max-height:calc(100dvh - 32px);
    display:grid;
    grid-template-rows:76px minmax(0,1fr) 78px;
    gap:0;
    padding:14px;
    border-color:rgba(var(--tank-form-tone-rgb),.4);
    background:radial-gradient(circle at 100% 0%,rgba(var(--tank-form-tone-rgb),.23),transparent 40%),radial-gradient(circle at 0% 100%,rgba(73,139,218,.11),transparent 36%),linear-gradient(145deg,var(--theme-glass, rgba(229,235,249,.97)),var(--theme-glass, rgba(183,198,222,.91)));
}
.overlay .tank-entry-modal .tank-entry-modal-head { min-height:72px;margin:0;padding:11px 14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.86));border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.92)),rgba(var(--tank-form-tone-rgb),.11));box-shadow:0 10px 22px rgba(39,54,109,.1),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95)); }
.overlay .tank-entry-modal .tank-entry-modal-head .inventory-modal-head-icon,.tank-entry-panel-head > span { display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff;background:linear-gradient(145deg,var(--tank-form-tone),var(--tank-form-deep));box-shadow:0 8px 17px rgba(var(--tank-form-tone-rgb),.29),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3)); }
.overlay .tank-entry-modal .tank-entry-modal-head .inventory-modal-head-icon { width:44px;height:44px;flex-basis:44px;border-radius:14px;font-size:21px; }
.overlay .tank-entry-modal .tank-entry-modal-head h3 { margin:2px 0 0;color:var(--text1);font-size:19px;font-weight:880; }
.overlay .tank-entry-modal .tank-entry-modal-head .inventory-modal-kicker { color:var(--tank-form-deep);font-size:11px;font-weight:800; }
.overlay .tank-entry-modal .inventory-form-body.tank-form-flow { display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,1fr);gap:14px;padding:14px 0;overflow:visible; }
.overlay .tank-entry-modal .inventory-form-panel { min-width:0;min-height:0;display:flex;flex-direction:column;gap:11px;padding:14px;border:1px solid var(--theme-stroke, rgba(255,255,255,.8));border-radius:19px;background:radial-gradient(circle at 100% 0%,rgba(var(--tank-form-tone-rgb),.11),transparent 43%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.77)),var(--theme-glass, rgba(226,234,248,.59)));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)),0 12px 25px rgba(42,52,101,.08);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin; }
.overlay .tank-entry-modal .inventory-form-panel * { box-sizing:border-box; }
.tank-entry-panel-head { min-height:44px;display:flex;align-items:center;gap:9px;padding-bottom:9px;border-bottom:1px solid rgba(var(--tank-form-tone-rgb),.21); }
.tank-entry-panel-head > span { width:35px;height:35px;border-radius:11px;font-size:17px; }
.tank-entry-panel-head b { color:var(--text1);font-size:13.5px;font-weight:880; }
.overlay .tank-entry-modal .inventory-field,.overlay .tank-entry-modal .inventory-field-grid,.overlay .tank-entry-modal .inventory-field-grid .inventory-field { margin:0; }
.overlay .tank-entry-modal .inventory-field-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
.overlay .tank-entry-modal .inventory-input-wrap input,.overlay .tank-entry-modal .inventory-input-wrap select,.overlay .tank-entry-modal .inventory-select-trigger { min-height:48px;border-radius:14px; }
.overlay .tank-entry-modal .inventory-input-wrap:focus-within { border-color:var(--tank-form-tone);box-shadow:0 0 0 3px rgba(var(--tank-form-tone-rgb),.16); }
.overlay .tank-entry-modal .fuel-checkbox-row { margin:0;padding:12px;border-color:rgba(var(--tank-form-tone-rgb),.24);background:rgba(var(--tank-form-tone-rgb),.07); }
.overlay .tank-entry-modal .field-system-note { margin:0;padding:11px 12px;line-height:1.75; }
.tank-entry-threshold-block { display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:12px;align-items:center;margin-top:auto;padding:12px;border:1px solid rgba(218,145,38,.24);border-radius:15px;background:rgba(255,183,61,.08); }
.tank-entry-threshold-copy { min-width:0;display:flex;align-items:center;gap:9px;color:var(--text1); }
.tank-entry-threshold-copy > i { color:var(--theme-ink, #D28A1E);font-size:20px; }
.tank-entry-threshold-copy div { display:grid;gap:2px; }
.tank-entry-threshold-copy b { font-size:12.5px;font-weight:850; }
.tank-entry-threshold-copy small { color:var(--text2);font-size:10.5px;line-height:1.55; }
.tank-entry-threshold-block .inventory-field { min-width:0; }
.overlay .tank-entry-modal .tank-entry-modal-foot { display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:center;margin:0;padding:12px 2px 8px;border-top:1px solid var(--theme-stroke, rgba(255,255,255,.72));background:linear-gradient(180deg,var(--theme-highlight, rgba(199,211,233,.15)),rgba(var(--tank-form-tone-rgb),.08)); }
.overlay .tank-entry-modal .tank-entry-modal-foot .btn { min-height:46px;transition:transform .2s var(--ui-ease),box-shadow .2s ease; }
.overlay .tank-entry-modal .tank-entry-modal-foot .btn-primary { background:linear-gradient(135deg,var(--tank-form-tone),var(--tank-form-deep));box-shadow:0 9px 19px rgba(var(--tank-form-tone-rgb),.27); }
.overlay .tank-entry-modal .tank-entry-modal-foot .btn:not(:disabled):hover { transform:translateY(-2px); }
html[data-theme="dark"] .overlay .tank-entry-modal .tank-entry-modal-head,html[data-theme="dark"] .overlay .tank-entry-modal .inventory-form-panel { border-color:rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(47,58,76,.94),rgba(30,39,53,.9)); }
html[data-theme="dark"] .tank-entry-threshold-block { background:rgba(210,138,30,.09);border-color:rgba(229,164,66,.2); }
@media (max-width:900px) {
    .overlay .modal.tank-entry-modal { width:min(520px,calc(100vw - 18px));height:auto;max-height:calc(100dvh - 18px);display:flex;flex-direction:column;padding:12px;overflow-y:auto;overscroll-behavior:contain; }
    .overlay .tank-entry-modal .tank-entry-modal-head { flex:0 0 auto; }
    .overlay .tank-entry-modal .inventory-form-body.tank-form-flow { flex:0 0 auto;display:flex;flex-direction:column;padding:12px 0;overflow:visible; }
    .overlay .tank-entry-modal .inventory-form-panel { flex:0 0 auto;padding:12px;overflow:visible; }
    .overlay .tank-entry-modal .tank-entry-modal-foot { position:static;flex:0 0 auto;grid-template-columns:minmax(0,1fr) 112px; }
}
@media (max-width:420px) {
    .overlay .modal.tank-entry-modal { padding:10px; }
    .overlay .tank-entry-modal .tank-entry-modal-head { min-height:66px;padding:10px 12px; }
    .overlay .tank-entry-modal .inventory-field-grid { grid-template-columns:1fr; }
    .tank-entry-threshold-block { grid-template-columns:1fr; }
    .overlay .tank-entry-modal .tank-entry-modal-foot { grid-template-columns:1fr; }
    .overlay .tank-entry-modal .tank-entry-modal-foot #cancelBtn { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) { .overlay .tank-entry-modal .tank-entry-modal-foot .btn { transition:none!important; } }

/* Refill and price forms share the same fixed-header liquid form shell. */
.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-color: var(--theme-stroke, rgba(255,255,255,.86));
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--form-tone) 22%, transparent), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(176,139,241,.15), transparent 44%),
        linear-gradient(145deg, var(--theme-glass, rgba(214,224,239,.92)), rgba(164,181,208,.86));
    box-shadow: 0 30px 74px rgba(20,30,66,.38), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-modal-head {
    position: relative;
    top: auto;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 68px;
    margin: 12px 12px 0;
    padding: 10px 13px;
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 50%, color-mix(in srgb, var(--form-tone) 14%, transparent), transparent 40%),
        linear-gradient(145deg, var(--theme-glass, rgba(250,252,255,.93)), var(--theme-glass, rgba(220,229,246,.78)));
    box-shadow: 0 10px 22px rgba(39,54,109,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-modal-head-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-form-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 13px 18px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--form-tone) 55%, transparent) transparent;
}

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-form-body::-webkit-scrollbar { width: 5px; }
.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-form-body::-webkit-scrollbar-thumb { border-radius: 99px; background: color-mix(in srgb, var(--form-tone) 55%, transparent); }

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .modal-actions {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 105px;
    gap: 9px;
    margin: 4px 18px 17px;
    padding: 0;
    border: 0;
    background: transparent;
}

.overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .modal-actions .btn { min-height: 47px; }

.overlay .refill-entry-modal .refill-info-card,
.overlay .price-entry-modal .inventory-price-tile {
    border-color: color-mix(in srgb, var(--form-tone) 20%, var(--theme-stroke, rgba(255,255,255,.78)));
    background: color-mix(in srgb, var(--form-tone) 6%, var(--theme-glass, rgba(255,255,255,.46)));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.72));
}

.overlay .refill-entry-modal .quick-btn {
    border-radius: 11px;
    background: var(--theme-glass, rgba(255,255,255,.62));
}

/* Refill is a single, top-to-bottom workflow: every decision and status block
   keeps the same usable width instead of competing in a two-column bento row. */
.overlay .refill-entry-modal .refill-form-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.overlay .refill-entry-modal .refill-form-flow > .inventory-form-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

.overlay .refill-entry-modal .refill-form-flow :is(.is-selector, .is-amount) {
    grid-template-columns: 1fr;
}

.overlay .refill-entry-modal .refill-form-flow .inventory-field,
.overlay .refill-entry-modal .refill-form-flow .refill-info-card,
.overlay .refill-entry-modal .refill-form-flow .quick-amounts,
.overlay .refill-entry-modal .refill-form-flow .inventory-field-hint {
    width: 100%;
    min-width: 0;
    margin-inline: 0;
}

.overlay .refill-entry-modal .refill-form-flow .inventory-field {
    align-self: stretch;
}

.overlay .refill-entry-modal .refill-form-flow .refill-info-card {
    margin-block: 0;
}

.overlay .refill-entry-modal .refill-form-flow .quick-amounts,
.overlay .refill-entry-modal .refill-form-flow .inventory-field-hint {
    grid-column: auto;
}

.overlay .refill-entry-modal .refill-form-flow .inventory-field-hint {
    min-height: 20px;
    padding: 1px 2px 0;
}

.overlay .price-entry-modal .inventory-price-grid { gap: 10px; }
.overlay .price-entry-modal .inventory-price-tile { border-radius: 15px; }

html[data-theme="dark"] .overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) {
    border-color: rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--form-tone) 20%, transparent), transparent 42%),
        linear-gradient(145deg, rgba(41,51,68,.96), rgba(23,31,44,.94));
}

html[data-theme="dark"] .overlay .inventory-form-modal:is(.refill-entry-modal, .price-entry-modal) .inventory-modal-head {
    background: linear-gradient(145deg, rgba(47,58,76,.94), rgba(30,39,53,.9));
}

html[data-theme="dark"] .overlay .tank-entry-modal .field-system-note {
    background: rgba(12,18,28,.34);
}

@media (max-width: 480px) {
    .overlay .tank-entry-modal .inventory-form-body.tank-form-flow { padding-inline: 14px; }
    .overlay .tank-entry-modal .modal-actions { margin-inline: 14px; }
}

/* ---------- tank inventory toolbar ---------- */
#view-tanks .tank-toolbar-glass {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.78));
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(74,111,232,.13), transparent 38%),
        linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(227,235,250,.54)));
    box-shadow: var(--ui-shadow);
}

#view-tanks .tank-filter-group,
#view-tanks .tank-sort-group {
    display: grid;
    gap: 6px;
}

#view-tanks .tank-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text2);
    font-size: 11.5px;
    font-weight: 800;
}

#view-tanks .tank-toolbar-label > i { color: var(--ui-blue); font-size: 14px; }

#view-tanks .tank-filter-group .filter-tabs {
    width: fit-content;
    min-height: 43px;
    padding: 4px;
    border: 1px solid rgba(79,111,232,.12);
    border-radius: 13px;
    background: var(--theme-glass, rgba(220,228,249,.58));
}

#view-tanks .tank-filter-group .filter-tab {
    min-height: 33px;
    padding-inline: 13px;
    border: 1px solid transparent;
    font-size: 12px;
    transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#view-tanks .tank-filter-group .filter-tab:hover {
    color: var(--ui-blue);
    background: var(--theme-glass, rgba(255,255,255,.5));
}

#view-tanks .tank-filter-group .filter-tab.active {
    border-color: var(--theme-stroke, rgba(255,255,255,.66));
    background: linear-gradient(135deg, #5B78E7, #5366D9);
    box-shadow: 0 6px 14px rgba(62,84,184,.2), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}

#view-tanks .tank-sort-select {
    position: relative;
    min-width: 190px;
    z-index: 3;
}

#view-tanks .tank-sort-select.is-open { z-index: 30; }

#view-tanks .tank-sort-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#view-tanks .tank-sort-trigger {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 11px;
    border: 1px solid rgba(107,129,190,.23);
    border-radius: 13px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.72));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#view-tanks .tank-sort-trigger-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

#view-tanks .tank-sort-trigger-copy > i { color: var(--ui-blue); font-size: 16px; }
#view-tanks .tank-sort-chevron { color: var(--text2); transition: transform .2s var(--ui-ease); }

#view-tanks .tank-sort-select.is-open .tank-sort-trigger,
#view-tanks .tank-sort-trigger:focus-visible {
    outline: 0;
    border-color: var(--ui-blue);
    background: var(--theme-glass, rgba(255,255,255,.92));
    box-shadow: 0 0 0 3px rgba(79,111,232,.17), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}

#view-tanks .tank-sort-select.is-open .tank-sort-chevron { transform: rotate(180deg); }

#view-tanks .tank-sort-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    inset-inline: 0;
    display: none;
    gap: 4px;
    padding: 6px;
    border: 1px solid rgba(92,116,191,.22);
    border-radius: 15px;
    background: var(--theme-glass, rgba(246,249,255,.94));
    box-shadow: 0 18px 42px rgba(32,49,112,.21), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#view-tanks .tank-sort-select.is-open .tank-sort-menu { display: grid; animation: uiTankSortIn .2s var(--ui-ease) both; }

@keyframes uiTankSortIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

#view-tanks .tank-sort-option {
    min-height: 40px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text1);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-align: right;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

#view-tanks .tank-sort-option > i:first-child { color: var(--ui-blue); font-size: 16px; }
#view-tanks .tank-sort-option > i:last-child { opacity: 0; color: #fff; }

#view-tanks .tank-sort-option:hover,
#view-tanks .tank-sort-option:focus-visible {
    outline: 0;
    color: var(--ui-blue);
    border-color: rgba(79,111,232,.16);
    background: rgba(79,111,232,.08);
}

#view-tanks .tank-sort-option.is-active {
    color: #fff;
    border-color: var(--theme-stroke, rgba(255,255,255,.65));
    background: linear-gradient(135deg, #647DE6, #5366D9);
    box-shadow: 0 5px 12px rgba(65,82,183,.2);
}

#view-tanks .tank-sort-option.is-active > i { color: #fff; }
#view-tanks .tank-sort-option.is-active > i:last-child { opacity: 1; }

html[data-theme="dark"] #view-tanks .tank-toolbar-glass,
html[data-theme="dark"] #view-tanks .tank-sort-menu {
    border-color: rgba(255,255,255,.12);
    background: rgba(27,35,48,.9);
}

html[data-theme="dark"] #view-tanks .tank-sort-trigger,
html[data-theme="dark"] #view-tanks .tank-filter-group .filter-tabs { background: rgba(18,25,36,.64); }
html[data-theme="dark"] #view-tanks .tank-sort-option { color: #E8EEFC; }

@media (max-width: 620px) {
    #view-tanks .tank-toolbar-glass { grid-template-columns: 1fr; align-items: stretch; }
    #view-tanks .tank-sort-select { min-width: 0; }
    #view-tanks .tank-filter-group .filter-tabs { width: 100%; }
    #view-tanks .tank-filter-group .filter-tab { flex: 1; }
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    #mainContent :is(.card-section, .card-section-tight, .card-narrow, .card-narrow-spaced) {
        padding: 14px;
    }

    #mainContent .section-title-icon > i {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        border-radius: 11px;
        font-size: 17px;
    }

    .overlay .modal:not(.inventory-form-modal) {
        border-radius: 19px;
    }

    .overlay .modal:not(.inventory-form-modal) > h3.ui-modal-title {
        min-height: 58px;
        border-radius: 15px;
        font-size: 16px;
    }

    .overlay .modal:not(.inventory-form-modal) .modal-actions {
        grid-template-columns: 1fr;
    }

    #mainContent .ledger-table-wrap {
        scrollbar-gutter: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mainContent .view.active .content-wrap,
    #mainContent .view.active :is(.finance-card, .metric-card, .sales-trend-card, .pump-card, .work-record-stats-panel, .leave-stat-tile, .profile-card),
    .overlay .modal:not(.inventory-form-modal) {
        animation: none !important;
    }

    #mainContent :is(.card, .finance-card, .metric-card, .sales-trend-card, .pump-card, .sales-details-card, .profile-card),
    #mainContent :is(.btn, .filter-tab, .back-to-finance-btn, .back-btn-prominent),
    .overlay .modal .btn {
        transition: none !important;
    }
}

/* ---------- all leave records: same calendar/timeline language as work records ---------- */
#view-employees .leave-records-full-view {
    --leave-records-gold:#D49325;
    --leave-records-green:#2FA96D;
    padding:20px;
    border-color:var(--theme-stroke, rgba(255,255,255,.82));
    background:linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.79)), var(--theme-glass, rgba(255,247,226,.5)));
    box-shadow:0 18px 38px rgba(115,92,49,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .leave-records-topbar { margin-bottom:17px; padding-bottom:14px; border-bottom:1px solid rgba(180,135,41,.17); }
#view-employees .leave-records-topbar > div { display:flex; gap:8px; }
#view-employees .leave-records-page-title { margin-bottom:4px; }
#view-employees .leave-records-page-title .section-title-icon { color:var(--text1); font-size:19px; font-weight:880; }
#view-employees .leave-records-page-title .section-title-icon i { color:#fff; background:linear-gradient(145deg, #E2AD4B, #C78518); box-shadow:0 7px 14px rgba(202,139,30,.22); }
#view-employees .leave-records-range { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; color:var(--text2); font-size:12.5px; font-weight:700; }
#view-employees .leave-records-range span { flex:0 0 auto; padding:5px 9px; border-radius:999px; color:var(--theme-ink, #96600D); background:rgba(212,147,37,.11); font-weight:850; }

#view-employees .leave-records-full-view .work-record-filter-row { gap:14px; align-items:stretch; }
#view-employees .leave-records-full-view .work-record-filter-cal,
#view-employees .leave-records-full-view .work-record-stats-panel {
    min-height:294px;
    padding:15px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius:20px;
    background:linear-gradient(140deg, var(--theme-glass, rgba(255,255,255,.73)), var(--theme-glass, rgba(255,246,221,.45)));
    box-shadow:0 10px 25px rgba(128,97,37,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .leave-records-full-view .work-record-stats-head { min-height:30px; margin-bottom:10px; color:var(--text1); font-weight:850; }
#view-employees .leave-records-full-view .work-record-stats-head i { width:29px; height:29px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:#fff; background:linear-gradient(145deg,#E2AD4B,#C78518); box-shadow:0 5px 12px rgba(202,139,30,.2); }
#view-employees .leave-records-full-view .sd-nav-header { min-height:40px; margin-bottom:7px; }
#view-employees .leave-records-full-view .date-picker-nav { width:37px; height:37px; border-radius:12px; border-color:rgba(212,147,37,.18); background:var(--theme-glass, rgba(255,255,255,.73)); transition:transform .18s var(--ui-ease), border-color .18s ease, color .18s ease, box-shadow .18s ease; }
#view-employees .leave-records-full-view .date-picker-nav:hover { color:var(--theme-ink, #9C6915); border-color:rgba(212,147,37,.45); box-shadow:0 6px 14px rgba(202,139,30,.13); transform:translateY(-1px); }
#view-employees .leave-records-full-view .sd-nav-month { color:var(--text1); font-size:15px; font-weight:880; }
#view-employees .leave-records-full-view .date-picker-weekdays { margin-bottom:6px; color:var(--text2); font-size:11.5px; font-weight:850; }
#view-employees .leave-records-full-view .wr-cal-grid { gap:4px; margin-bottom:9px; }
#view-employees .leave-records-full-view .leave-cal-cell { position:relative; min-height:34px; padding:0; border:1px solid transparent; border-radius:10px; color:var(--text1); background:transparent; font-family:inherit; font-size:12.5px; font-weight:760; cursor:pointer; transition:transform .18s var(--ui-ease), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; }
#view-employees .leave-records-full-view .leave-cal-cell:hover { color:var(--theme-ink, #9C6915); background:rgba(212,147,37,.1); transform:translateY(-1px); }
#view-employees .leave-records-full-view .leave-cal-cell:focus-visible { outline:3px solid rgba(212,147,37,.3); outline-offset:2px; }
#view-employees .leave-records-full-view .leave-cal-cell.is-picked { color:#fff; border-color:var(--theme-stroke, rgba(255,255,255,.74)); background:linear-gradient(145deg,#DEA23B,#C78316); box-shadow:0 7px 16px rgba(186,122,16,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.32)); }
#view-employees .leave-records-full-view .wr-cal-marks { position:absolute; inset:auto 0 3px; justify-content:center; }
#view-employees .leave-records-full-view .wr-cal-dot { width:5px; height:5px; box-shadow:0 0 0 2px var(--theme-highlight, rgba(255,255,255,.5)); }
#view-employees .leave-records-full-view .leave-cal-cell.is-picked .wr-cal-dot { background:var(--theme-surface, #fff); box-shadow:none; }
#view-employees .leave-records-full-view .wr-cal-legend { justify-content:flex-start; padding-top:9px; border-top:1px solid rgba(180,135,41,.13); color:var(--text2); font-size:11.5px; font-weight:700; }
#view-employees .leave-records-full-view .wr-cal-legend .wr-cal-dot { width:7px; height:7px; box-shadow:none; }
#view-employees .leave-records-full-view .work-record-filter-active { margin-top:10px; padding:8px 10px; border:1px solid rgba(212,147,37,.2); border-radius:12px; background:rgba(212,147,37,.08); }

#view-employees .leave-records-full-view .work-record-stats-list { gap:8px; }
#view-employees .leave-records-full-view .work-record-stat-item { min-height:54px; padding:9px 10px; border:1px solid rgba(183,140,39,.14); border-radius:13px; background:var(--theme-glass, rgba(255,255,255,.65)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.85)); transition:transform .18s var(--ui-ease), box-shadow .18s ease, border-color .18s ease; }
#view-employees .leave-records-full-view .work-record-stat-item:hover { transform:translateY(-1px); border-color:rgba(212,147,37,.38); box-shadow:0 7px 15px rgba(202,139,30,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); }
#view-employees .leave-records-full-view .work-record-stat-item.is-total { color:#fff; border-color:transparent; background:linear-gradient(135deg,#D79C35,#BE7813); }
#view-employees .leave-records-full-view .work-record-stat-item.is-total :is(.work-record-stat-label,.work-record-stat-value) { color:#fff !important; }

#view-employees .leave-records-list { display:grid; gap:11px; margin-top:17px; padding:5px; border:1px solid var(--theme-stroke, rgba(255,255,255,.75)); border-radius:20px; background:var(--theme-glass, rgba(255,255,255,.4)); }
#view-employees .leave-records-full-view .leave-group { margin:0; padding:8px; border:1px solid rgba(212,147,37,.16); border-radius:16px; background:var(--theme-glass, rgba(255,255,255,.48)); }
#view-employees .leave-records-full-view .leave-group-header { min-height:35px; margin:0 1px 7px; padding:5px 9px; border:0; border-radius:10px; color:var(--theme-ink, #90600E); background:rgba(212,147,37,.1); }
#view-employees .leave-records-full-view .leave-group-title { color:var(--text1); font-size:13px; font-weight:870; }
#view-employees .leave-records-full-view .leave-group-count { color:var(--theme-ink, #98650E); font-size:11.5px; font-weight:790; }
#view-employees .leave-records-full-view .leave-entry-row { min-height:64px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:10px; margin:0 0 7px; padding:10px 11px; border:1px solid rgba(184,143,44,.14); border-radius:13px; background:var(--theme-glass, rgba(255,255,255,.72)); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease; }
#view-employees .leave-records-full-view .leave-entry-row:last-child { margin-bottom:0; }
#view-employees .leave-records-full-view .leave-entry-row:hover { transform:translateY(-1px); border-color:rgba(212,147,37,.42); box-shadow:0 9px 18px rgba(202,139,30,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88)); }
#view-employees .leave-records-full-view .leave-entry-icon { width:40px; height:40px; border-radius:13px; }
#view-employees .leave-records-full-view .leave-entry-type { color:var(--text1); font-size:13px; font-weight:860; }
#view-employees .leave-records-full-view .leave-entry-date { margin-top:3px; color:var(--text2); font-size:11.5px; font-weight:700; }
#view-employees .leave-records-full-view .leave-status-badge { padding:6px 9px; font-size:11px; font-weight:850; }
#view-employees .leave-records-empty { margin-top:15px; padding:18px; border:1px dashed rgba(212,147,37,.34); border-radius:16px; color:var(--text2); background:var(--theme-glass, rgba(255,255,255,.42)); text-align:center; }

@media (max-width:700px) {
    #view-employees .leave-records-full-view { padding:14px; }
    #view-employees .leave-records-topbar { align-items:flex-start; }
    #view-employees .leave-records-topbar > div { flex-wrap:wrap; justify-content:flex-end; }
}
@media (max-width:460px) {
    #view-employees .leave-records-topbar { flex-direction:column; }
    #view-employees .leave-records-topbar > div { width:100%; }
    #view-employees .leave-records-topbar .btn { flex:1; }
    #view-employees .leave-records-range { align-items:flex-start; flex-direction:column; }
    #view-employees .leave-records-full-view .leave-entry-row { grid-template-columns:38px minmax(0,1fr); }
    #view-employees .leave-records-full-view .leave-status-badge { grid-column:2; justify-self:start; }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .leave-records-full-view :is(.leave-entry-row,.work-record-stat-item,.leave-cal-cell,.date-picker-nav) { transition:none !important; }
}

/* Salary deductions are standalone ledger rows, never nested inside a payment row. */
#view-employees .employee-salaries-card .salary-payment-list-item.is-debit {
    border-color:color-mix(in srgb, var(--salary-row-tone) 28%, var(--theme-stroke, rgba(255,255,255,.82)));
    background:linear-gradient(135deg, color-mix(in srgb, var(--salary-row-tint) 45%, var(--theme-glass, rgba(255,255,255,.78))), var(--theme-glass, rgba(255,255,255,.72)));
}
#view-employees .employee-salaries-card .salary-payment-list-item.is-debit .salary-payment-list-status {
    border:1px solid color-mix(in srgb, var(--salary-row-tone) 24%, transparent);
}
#view-employees .employee-salaries-card .salary-payment-list-item.is-debit .salary-payment-list-amount {
    color:var(--salary-row-tone);
    background:color-mix(in srgb, var(--salary-row-tint) 46%, var(--theme-glass, rgba(255,255,255,.75)));
}

/* ---------- sale entry: overlay-safe employee picker and unmistakable payment state ---------- */
.overlay .modal.sale-entry-modal { overflow:visible; }
.overlay .sale-entry-modal .sale-employee-select { position:relative; z-index:30; }
.overlay .sale-entry-modal .sale-employee-select[data-open="true"] { z-index:120; }
.overlay .sale-entry-modal .sale-employee-native { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.overlay .sale-entry-modal .sale-employee-trigger {
    width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:0 14px; border:1px solid rgba(47,169,109,.42); border-radius:13px;
    color:var(--text1); background:var(--theme-glass, rgba(255,255,255,.83)); font:inherit; font-weight:780; cursor:pointer;
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); transition:transform .18s var(--ui-ease), border-color .18s ease, box-shadow .18s ease;
}
.overlay .sale-entry-modal .sale-employee-trigger:hover,
.overlay .sale-entry-modal .sale-employee-select[data-open="true"] .sale-employee-trigger { border-color:#2FA96D; box-shadow:0 7px 16px rgba(47,169,109,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.overlay .sale-entry-modal .sale-employee-select[data-open="true"] .sale-employee-trigger i { transform:rotate(180deg); }
.overlay .sale-entry-modal .sale-employee-trigger > i { color:var(--theme-ink, #2FA96D); font-size:18px; transition:transform .18s var(--ui-ease); }
.overlay .sale-entry-modal .sale-employee-menu {
    position:absolute; inset:calc(100% + 7px) 0 auto; z-index:200; display:none; gap:5px; padding:7px;
    max-height:210px; overflow:auto; border:1px solid var(--theme-stroke, rgba(255,255,255,.82)); border-radius:15px;
    background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.96)), var(--theme-glass, rgba(239,247,244,.93)));
    box-shadow:0 16px 30px rgba(36,71,58,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); backdrop-filter:blur(18px);
}
.overlay .sale-entry-modal .sale-employee-select[data-open="true"] .sale-employee-menu { display:grid; animation:saleEmployeeMenuIn .18s var(--ui-ease) both; }
@keyframes saleEmployeeMenuIn { from { opacity:0; transform:translateY(-5px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
.overlay .sale-entry-modal .sale-employee-option { min-height:42px; display:grid; grid-template-columns:30px minmax(0,1fr) 20px; align-items:center; gap:9px; padding:6px 8px; border:1px solid transparent; border-radius:11px; color:var(--text1); background:transparent; font:inherit; font-size:13px; font-weight:760; text-align:right; cursor:pointer; transition:background .16s ease, border-color .16s ease, transform .16s var(--ui-ease); }
.overlay .sale-entry-modal .sale-employee-option:hover { border-color:rgba(47,169,109,.2); background:rgba(47,169,109,.09); transform:translateX(-1px); }
.overlay .sale-entry-modal .sale-employee-option-avatar { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--theme-ink, #2FA96D); background:rgba(47,169,109,.12); }
.overlay .sale-entry-modal .sale-employee-option-check { color:transparent; }
.overlay .sale-entry-modal .sale-employee-option.is-selected { border-color:rgba(47,169,109,.36); color:var(--theme-ink, #1D754A); background:linear-gradient(135deg, var(--theme-glass, rgba(222,248,234,.92)), var(--theme-glass, rgba(255,255,255,.76))); }
.overlay .sale-entry-modal .sale-employee-option.is-selected .sale-employee-option-check { color:var(--theme-ink, #2FA96D); }

.overlay .sale-entry-modal .sale-paymethod-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.overlay .sale-entry-modal .sale-paymethod-row .paymethod-btn { min-height:62px; display:grid; grid-template-columns:34px minmax(0,1fr) 21px; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(98,113,192,.16); border-radius:14px; color:var(--text1); background:var(--theme-glass, rgba(255,255,255,.64)); font-weight:850; transition:transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.overlay .sale-entry-modal .sale-paymethod-row .paymethod-btn:hover:not(:disabled) { transform:translateY(-1px); }
.overlay .sale-entry-modal .sale-paymethod-icon { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; color:var(--theme-ink, #6370DE); background:rgba(99,112,222,.11); font-size:18px; }
.overlay .sale-entry-modal .sale-paymethod-check { color:transparent; font-size:19px; }
.overlay .sale-entry-modal .sale-paymethod-row .cash.active { color:var(--theme-ink, #24734D); border-color:rgba(47,169,109,.66); background:linear-gradient(135deg, var(--theme-glass, rgba(222,248,234,.92)), var(--theme-glass, rgba(255,255,255,.74))); box-shadow:0 8px 18px rgba(47,169,109,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.overlay .sale-entry-modal .sale-paymethod-row .cash.active .sale-paymethod-icon { color:#fff; background:#2FA96D; box-shadow:0 5px 11px rgba(47,169,109,.23); }
.overlay .sale-entry-modal .sale-paymethod-row .debt.active { color:var(--theme-ink, #9A610C); border:1px solid rgba(212,147,37,.72); background:linear-gradient(135deg, var(--theme-glass, rgba(255,244,209,.94)), var(--theme-glass, rgba(255,255,255,.74))); box-shadow:0 8px 18px rgba(212,147,37,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
.overlay .sale-entry-modal .sale-paymethod-row .debt.active .sale-paymethod-icon { color:#fff; background:#D49325; box-shadow:0 5px 11px rgba(212,147,37,.23); }
.overlay .sale-entry-modal .sale-paymethod-row .paymethod-btn.active .sale-paymethod-check { color:currentColor; }
@media (max-width:480px) { .overlay .sale-entry-modal .sale-paymethod-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .overlay .sale-entry-modal :is(.sale-employee-trigger,.sale-employee-trigger > i,.sale-employee-option,.paymethod-btn) { transition:none !important; animation:none !important; } }

/* ---------- desktop sale workspace: intentionally separate from the POS kiosk ---------- */
.overlay .modal.sale-entry-modal{
    --sale-tone:#2458a6; --sale-tone-rgb:36,88,166; --sale-mint:#178464; --sale-ink:#17233d;
    width:min(980px,calc(100vw - 56px)); max-width:none; max-height:calc(100dvh - 34px); padding:14px;
    overflow:auto; border:1px solid var(--theme-stroke, rgba(255,255,255,.82)); border-radius:26px;
    color:var(--sale-ink);
    background:radial-gradient(circle at 96% 2%,rgba(48,113,196,.16),transparent 35%),linear-gradient(145deg,var(--theme-glass, rgba(248,251,255,.985)),var(--theme-glass, rgba(226,235,247,.97)));
    box-shadow:0 34px 90px rgba(17,31,63,.34),inset 0 1px 0 var(--theme-highlight, #fff);
    animation:saleWorkspaceIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.sale-entry-head{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr) 42px;align-items:center;gap:14px;min-height:92px;padding:13px 15px;border:1px solid var(--theme-stroke, rgba(255,255,255,.9));border-radius:20px;background:linear-gradient(115deg,var(--theme-glass, rgba(255,255,255,.92)),var(--theme-glass, rgba(232,241,252,.78)));box-shadow:0 10px 28px rgba(38,65,110,.09),inset 0 1px 0 var(--theme-highlight, #fff);overflow:hidden}
.sale-entry-head::after{content:'';position:absolute;width:180px;height:180px;inset:-105px auto auto 18%;border-radius:50%;background:rgba(57,137,201,.09);pointer-events:none}
.sale-entry-head-icon{position:relative;z-index:1;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,#2458a6,#258aa2);font-size:27px;box-shadow:0 10px 24px rgba(36,88,166,.24)}
.sale-entry-head div{position:relative;z-index:1;min-width:0}.sale-entry-head small{display:block;margin-bottom:1px;color:var(--sale-tone);font-size:12px;font-weight:850}.sale-entry-head h3{display:block;margin:0;color:var(--sale-ink);font-size:23px;font-weight:900;line-height:1.45}.sale-entry-head p{margin:2px 0 0;color:var(--theme-ink, #647188);font-size:13px;font-weight:600;line-height:1.65}
.sale-entry-close{position:relative;z-index:2;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(59,78,111,.13);border-radius:13px;color:var(--theme-ink, #647188);background:var(--theme-glass, rgba(255,255,255,.68));font:inherit;font-size:20px;cursor:pointer;transition:color .18s ease,background .18s ease,transform .18s var(--ui-ease)}
.sale-entry-close:hover{color:var(--danger);background:var(--danger-bg);transform:rotate(4deg)}
.sale-entry-workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:12px;margin-top:12px}
.sale-entry-panel{min-width:0;padding:16px;border:1px solid var(--theme-stroke, rgba(255,255,255,.82));border-radius:20px;background:var(--theme-glass, rgba(255,255,255,.66));box-shadow:0 12px 30px rgba(40,61,99,.07),inset 0 1px 0 var(--theme-highlight, #fff)}
.sale-entry-choice-panel{background:linear-gradient(150deg,var(--theme-glass, rgba(255,255,255,.82)),var(--theme-glass, rgba(230,239,250,.62)))}.sale-entry-checkout-panel{background:linear-gradient(150deg,var(--theme-glass, rgba(255,255,255,.86)),var(--theme-glass, rgba(229,244,239,.58)))}
.sale-entry-section-title{display:flex;align-items:center;gap:10px;margin:0 0 10px}.sale-entry-section-title>span{width:37px;height:37px;display:grid;place-items:center;flex:none;border-radius:11px;color:var(--sale-tone);background:rgba(var(--sale-tone-rgb),.1);font-size:18px}.sale-entry-section-title div{display:grid}.sale-entry-section-title strong{color:var(--sale-ink);font-size:14px;font-weight:900}.sale-entry-section-title small{color:var(--theme-ink, #748097);font-size:11.5px;font-weight:650}
.sale-entry-fuel-title,.sale-entry-payment-title{margin-top:17px}.sale-entry-checkout-panel .sale-entry-section-title>span{color:var(--sale-mint);background:rgba(23,132,100,.1)}
.overlay .sale-entry-modal .sale-entry-field{margin:0}.overlay .sale-entry-modal .sale-entry-field>label{margin-bottom:6px;color:var(--theme-ink, #556278);font-size:12.5px;font-weight:850}
.overlay .sale-entry-modal .sale-employee-trigger{min-height:54px;padding:0 15px;border:1.5px solid rgba(var(--sale-tone-rgb),.24);border-radius:14px;background:var(--theme-glass, rgba(255,255,255,.9));font-size:14px;box-shadow:0 6px 16px rgba(37,65,106,.06)}
.overlay .sale-entry-modal .sale-employee-trigger:hover,.overlay .sale-entry-modal .sale-employee-select[data-open="true"] .sale-employee-trigger{border-color:var(--sale-tone);box-shadow:0 0 0 4px rgba(var(--sale-tone-rgb),.1)}
.overlay .sale-entry-modal .sale-employee-trigger>i{color:var(--sale-tone)}
.overlay .sale-entry-modal .sale-employee-menu{border-color:rgba(var(--sale-tone-rgb),.2);background:var(--theme-glass, rgba(250,252,255,.98));box-shadow:0 20px 44px rgba(25,45,82,.22)}
.overlay .sale-entry-modal .fuel-tile-row{gap:9px}.overlay .sale-entry-modal .fuel-tile{position:relative;min-height:108px;justify-content:center;gap:8px;padding:13px 9px;border:1.5px solid rgba(57,71,99,.12);border-radius:16px;background:var(--theme-glass, rgba(255,255,255,.82));box-shadow:0 7px 17px rgba(37,56,91,.055);overflow:hidden;cursor:pointer;transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background .2s ease}
.overlay .sale-entry-modal .fuel-tile::after{content:'';position:absolute;width:54px;height:54px;inset:auto -22px -25px auto;border-radius:50%;background:var(--tile-border);opacity:.08;transform:scale(.6);transition:transform .24s var(--ui-ease),opacity .2s ease}
.overlay .sale-entry-modal .fuel-tile i{position:relative;z-index:1;font-size:29px!important}.overlay .sale-entry-modal .fuel-tile span{position:relative;z-index:1;font-size:14px;font-weight:900}
.overlay .sale-entry-modal .fuel-tile:hover:not(.is-disabled){transform:translateY(-3px);border-color:color-mix(in srgb,var(--tile-border) 55%,transparent);box-shadow:0 12px 23px color-mix(in srgb,var(--tile-border) 13%,transparent)}
.overlay .sale-entry-modal .fuel-tile.active{border:2px solid var(--tile-border);background:linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.96)),var(--tile-bg));box-shadow:0 12px 26px color-mix(in srgb,var(--tile-border) 17%,transparent),inset 0 0 0 1px var(--theme-highlight, rgba(255,255,255,.62))}
.overlay .sale-entry-modal .fuel-tile.active::after{opacity:.12;transform:scale(2.2)}.overlay .sale-entry-modal .fuel-tile.active i{animation:saleFuelIcon .38s cubic-bezier(.2,.9,.3,1) both}
.overlay .sale-entry-modal #sl_rateInfo{min-height:48px;margin-top:10px;padding:10px 13px;border:1px solid rgba(var(--sale-tone-rgb),.13);border-radius:13px;background:rgba(var(--sale-tone-rgb),.065);color:var(--theme-ink, #56637a)}.overlay .sale-entry-modal #sl_rateInfo .num{color:var(--sale-ink);font-family:Arial,sans-serif;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums}
.sale-entry-amount-wrap{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;min-height:72px;border:2px solid rgba(23,132,100,.2);border-radius:17px;background:var(--theme-surface, #fff);box-shadow:0 8px 20px rgba(38,77,66,.06);transition:border-color .18s ease,box-shadow .18s ease}
.sale-entry-amount-wrap:focus-within{border-color:var(--sale-mint);box-shadow:0 0 0 4px rgba(23,132,100,.11),0 10px 24px rgba(38,77,66,.08)}.sale-entry-amount-wrap>i{display:grid;place-items:center;color:var(--sale-mint);font-size:20px}
.overlay .sale-entry-modal .sale-entry-amount-wrap .amt-input{min-width:0;height:68px;padding:0 10px;border:0!important;background:transparent;box-shadow:none!important;color:var(--sale-ink);font:900 31px/1 Arial,sans-serif;text-align:start;font-variant-numeric:tabular-nums}
.overlay .sale-entry-modal #sl_totalPreview{position:relative;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:13px 15px;border:0;border-radius:17px;color:#fff;background:linear-gradient(125deg,#176f5a,#229277);box-shadow:0 13px 28px rgba(23,111,90,.2);overflow:hidden}.overlay .sale-entry-modal #sl_totalPreview::after{content:'+';position:absolute;inset:-35px auto auto 18px;color:rgba(255,255,255,.08);font:900 105px/1 Arial,sans-serif}.overlay .sale-entry-modal #sl_totalPreview span{position:relative;z-index:1;font-size:13px;font-weight:750}.overlay .sale-entry-modal #sl_totalPreview .num{font-family:Arial,sans-serif;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.overlay .sale-entry-modal .sale-paymethod-row .paymethod-btn{min-height:70px;border-radius:15px;background:var(--theme-glass, rgba(255,255,255,.84))}.overlay .sale-entry-modal .sale-paymethod-icon{width:39px;height:39px;border-radius:12px;font-size:20px}
.overlay .sale-entry-modal #sl_creditNote{padding:8px 10px;border-inline-start:1px solid var(--border);border-radius:8px;background:rgba(224,82,82,.07);line-height:1.6}
.overlay .sale-entry-modal .modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin:12px 2px 1px;padding-top:12px;border-top:1px solid rgba(65,82,113,.11)}.overlay .sale-entry-modal .modal-actions .btn{min-height:50px;border-radius:14px;font-weight:850}.overlay .sale-entry-modal .modal-actions .btn-primary{min-width:220px;background:linear-gradient(115deg,#176f5a,#258eaa);box-shadow:0 10px 24px rgba(24,117,103,.2)}
.overlay .sale-entry-modal :is(.sale-entry-close,.sale-employee-trigger,.sale-employee-option,.fuel-tile,.paymethod-btn,.amt-input,.modal-actions .btn):focus-visible{outline:3px solid rgba(var(--sale-tone-rgb),.27);outline-offset:3px}
@keyframes saleWorkspaceIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes saleFuelIcon{0%{transform:translateY(3px) scale(.88)}70%{transform:translateY(-2px) scale(1.16)}100%{transform:scale(1.12)}}
@media(max-width:780px){.overlay .modal.sale-entry-modal{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 20px);padding:10px;border-radius:21px}.sale-entry-head{grid-template-columns:48px minmax(0,1fr) 38px;min-height:78px;padding:10px}.sale-entry-head-icon{width:48px;height:48px;border-radius:14px;font-size:23px}.sale-entry-head h3{font-size:19px}.sale-entry-head p{display:none}.sale-entry-workspace{grid-template-columns:1fr}.sale-entry-panel{padding:13px}.overlay .sale-entry-modal .modal-actions{position:sticky;bottom:-10px;z-index:20;margin-inline:-10px;margin-bottom:-10px;padding:11px 12px;background:var(--theme-glass, rgba(242,247,252,.96));backdrop-filter:blur(16px)}}
@media(max-width:480px){.overlay .sale-entry-modal .fuel-tile{min-height:88px}.overlay .sale-entry-modal .modal-actions{display:grid;grid-template-columns:1fr}.overlay .sale-entry-modal .modal-actions .btn-primary{min-width:0}.overlay .sale-entry-modal .modal-actions .btn-ghost{grid-row:2}}
@media(prefers-reduced-motion:reduce){.overlay .modal.sale-entry-modal,.overlay .sale-entry-modal .fuel-tile.active i{animation:none!important}.overlay .sale-entry-modal :is(.sale-entry-close,.fuel-tile,.fuel-tile::after){transition:none!important}}

/* ---------- sale transaction detail: compact audit-first layout ---------- */
.overlay .modal.sale-detail-modal { width:min(960px,calc(100vw - 64px)); max-width:none; max-height:min(820px,calc(100dvh - 28px)); display:flex; flex-direction:column; gap:0; padding:12px; overflow:hidden; border-color:color-mix(in srgb,var(--sale-detail-tone) 26%,var(--theme-stroke, rgba(255,255,255,.82))); background:radial-gradient(circle at 92% 2%,color-mix(in srgb,var(--sale-detail-tone) 17%,transparent),transparent 36%),radial-gradient(circle at 5% 96%,color-mix(in srgb,var(--sale-detail-tone) 10%,transparent),transparent 32%),linear-gradient(150deg,var(--theme-glass, rgba(251,253,255,.98)),color-mix(in srgb,var(--sale-detail-tone) 8%,var(--theme-glass, rgba(232,239,249,.96)))); }
.sale-detail-head { position:relative; flex:0 0 auto; display:grid; grid-template-columns:48px minmax(0,1fr) auto 38px; align-items:center; gap:11px; min-height:72px; padding:11px 12px; border:1px solid var(--theme-stroke, rgba(255,255,255,.92)); border-radius:19px; background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.92)),color-mix(in srgb,var(--sale-detail-tone) 9%,var(--theme-glass, rgba(236,242,252,.8)))); box-shadow:0 9px 24px rgba(43,59,108,.09),inset 0 1px 0 var(--theme-highlight, #fff); }
.sale-detail-head-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; font-size:23px; box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.75)); }
.sale-detail-kicker { display:block; margin-bottom:1px; color:var(--text2); font-size:13px; font-weight:780; }
.sale-detail-head h3 { margin:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; color:var(--text1); font-size:22px!important; font-weight:900; }
.sale-detail-status { min-height:36px; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid color-mix(in srgb,var(--sale-detail-tone) 25%,transparent); border-radius:11px; color:var(--sale-detail-tone); background:color-mix(in srgb,var(--sale-detail-tone) 10%,var(--theme-glass, rgba(255,255,255,.75))); font-size:13px; font-weight:850; white-space:nowrap; }
.sale-detail-status i { font-size:17px; }
.sale-detail-close { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:12px; color:var(--text2); background:var(--theme-glass, rgba(255,255,255,.7)); font-size:19px; cursor:pointer; transition:color .18s ease,background .18s ease,border-color .18s ease; }
.sale-detail-close:hover,.sale-detail-close:focus-visible { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 35%,var(--border)); background:var(--danger-bg); outline:none; }
.sale-detail-scroll { min-height:0; display:grid; gap:11px; padding:12px 2px; overflow-x:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--sale-detail-tone) 38%,transparent) transparent; }
.sale-detail-total { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:78px; padding:14px 17px; border:1px solid color-mix(in srgb,var(--sale-detail-tone) 34%,var(--border)); border-radius:18px; background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.94)),color-mix(in srgb,var(--sale-detail-tone) 15%,var(--theme-glass, rgba(255,255,255,.72)))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 9px 24px color-mix(in srgb,var(--sale-detail-tone) 10%,transparent); }
.sale-detail-total>span { display:flex; align-items:center; gap:9px; color:var(--text2); font-size:14px; font-weight:800; }
.sale-detail-total>span i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--sale-detail-tone); box-shadow:0 6px 15px color-mix(in srgb,var(--sale-detail-tone) 25%,transparent); font-size:22px; }
.sale-detail-total strong { color:var(--sale-detail-tone); font-size:29px; font-weight:950; white-space:nowrap; filter:saturate(1.2); }
.sale-detail-total strong small { font-size:13px; font-weight:800; }
.sale-detail-total.is-reversal { border-color:rgba(217,79,79,.34); background:linear-gradient(135deg,var(--theme-glass, rgba(255,251,251,.92)),var(--theme-glass, rgba(255,225,225,.78))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 8px 22px rgba(217,79,79,.08); }
.sale-detail-total.is-reversal>span,.sale-detail-total.is-reversal strong { color:var(--theme-ink, #D94F4F); }
.sale-detail-total.is-reversal>span i { color:#fff; background:#D94F4F; box-shadow:0 6px 15px rgba(217,79,79,.23); }
.sale-detail-total.is-original { border-color:rgba(118,86,217,.34); background:linear-gradient(135deg,var(--theme-glass, rgba(253,251,255,.94)),var(--theme-glass, rgba(235,228,255,.82))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 8px 22px rgba(118,86,217,.09); }
.sale-detail-total.is-original>span,.sale-detail-total.is-original strong { color:var(--theme-ink, #7656D9); }
.sale-detail-total.is-original>span i { color:#fff; background:#7656D9; box-shadow:0 6px 15px rgba(118,86,217,.24); }
.expense-record-modal .sale-detail-total.is-expense-original { border-color:rgba(180,106,35,.36); background:linear-gradient(135deg,var(--theme-glass, rgba(255,252,247,.95)),var(--theme-glass, rgba(255,232,202,.8))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 8px 22px rgba(180,106,35,.1); }
.expense-record-modal .sale-detail-total.is-expense-original>span,.expense-record-modal .sale-detail-total.is-expense-original strong { color:var(--theme-ink, #B46A23); }
.expense-record-modal .sale-detail-total.is-expense-original>span i { color:#fff; background:#B46A23; box-shadow:0 6px 15px rgba(180,106,35,.24); }
.expense-record-modal .sale-detail-total.is-expense-reversal { border-color:rgba(194,56,120,.34); background:linear-gradient(135deg,var(--theme-glass, rgba(255,250,253,.95)),var(--theme-glass, rgba(255,224,239,.8))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 8px 22px rgba(194,56,120,.1); }
.expense-record-modal .sale-detail-total.is-expense-reversal>span,.expense-record-modal .sale-detail-total.is-expense-reversal strong { color:var(--theme-ink, #C23878); }
.expense-record-modal .sale-detail-total.is-expense-reversal>span i { color:#fff; background:#C23878; box-shadow:0 6px 15px rgba(194,56,120,.24); }
.expense-record-modal .sale-detail-total.is-expense-replacement { border-color:rgba(8,126,139,.34); background:linear-gradient(135deg,var(--theme-glass, rgba(248,254,255,.95)),var(--theme-glass, rgba(216,246,248,.82))); box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94)),0 8px 22px rgba(8,126,139,.1); }
.expense-record-modal .sale-detail-total.is-expense-replacement>span,.expense-record-modal .sale-detail-total.is-expense-replacement strong { color:var(--theme-ink, #087E8B); }
.expense-record-modal .sale-detail-total.is-expense-replacement>span i { color:#fff; background:#087E8B; box-shadow:0 6px 15px rgba(8,126,139,.24); }
.expense-record-modal .correction-chain-item.is-original>span { color:var(--theme-ink, #B46A23); }
.expense-record-modal .correction-chain-item.is-reversal>span { color:var(--theme-ink, #C23878); }
.expense-record-modal .correction-chain-item.is-replacement>span { color:var(--theme-ink, #087E8B); }
.sale-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.sale-detail-field { min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; padding:13px; border:1px solid color-mix(in srgb,var(--sale-detail-tone) 18%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--sale-detail-tone) 4%,var(--theme-glass, rgba(255,255,255,.74))); }
.sale-detail-field>i { grid-row:1/3; align-self:center; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--sale-detail-tone); background:color-mix(in srgb,var(--sale-detail-tone) 10%,transparent); font-size:21px; }
.sale-detail-field>span { color:var(--text2); font-size:12.5px; font-weight:760; }
.sale-detail-field>strong { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text1); font-size:15px; font-weight:850; overflow-wrap:anywhere; }
.sale-detail-field>strong small { color:var(--text2); font-size:12px; font-weight:750; }
.sale-detail-field.is-wide { grid-column:1/-1; }
.sale-detail-identifiers { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 112px; gap:9px; align-items:stretch; }
.sale-detail-identifiers.expense-detail-identifiers { grid-template-columns:minmax(0,1fr); }
.expense-detail-files .attach-files-list { margin-top:10px; }
.sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge) { width:100%; min-width:0; min-height:55px; margin:0; box-sizing:border-box; display:grid; grid-template-columns:22px minmax(0,1fr); align-content:center; column-gap:7px; border-radius:15px; }
.sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge)>i { grid-row:1/3; align-self:center; font-size:21px; }
.sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge)>span { align-self:end; font-size:13px; }
.sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge)>bdi { min-width:0; width:auto; padding:0!important; font-size:13px; line-height:1.4; white-space:nowrap; overflow-wrap:normal; word-break:normal; direction:ltr; unicode-bidi:isolate; }
.sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge) { color:var(--sale-detail-tone); border-color:color-mix(in srgb,var(--sale-detail-tone) 34%,transparent); background:color-mix(in srgb,var(--sale-detail-tone) 8%,var(--theme-glass, rgba(255,255,255,.7))); }
.sale-detail-qr { min-width:0; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; margin:0; padding:8px; border:1px solid color-mix(in srgb,var(--sale-detail-tone) 28%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--sale-detail-tone) 5%,var(--theme-glass, rgba(255,255,255,.76))); box-sizing:border-box; }
.sale-detail-qr img { display:block; width:76px; height:76px; border-radius:7px; background:var(--theme-surface, #fff); object-fit:contain; image-rendering:pixelated; }
.sale-detail-qr figcaption { display:flex; align-items:center; justify-content:center; gap:4px; color:var(--text2); font-size:9.5px; font-weight:800; text-align:center; }
.sale-detail-qr figcaption i { color:var(--sale-detail-tone); font-size:13px; }
.sale-detail-modal .correction-document-chain { margin:0; padding:13px; border-radius:17px; }
.sale-detail-modal .correction-document-chain { border-color:color-mix(in srgb,var(--sale-detail-tone) 27%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--sale-detail-tone) 9%,var(--theme-glass, rgba(255,255,255,.75))),var(--theme-glass, rgba(255,255,255,.55))); }
.sale-detail-modal .correction-document-chain>header { margin-bottom:10px; color:var(--sale-detail-tone); font-size:15px; }
.sale-detail-modal .correction-document-chain>header i { font-size:21px; }
.sale-detail-modal .correction-document-chain>div { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sale-detail-modal .correction-chain-item { min-width:0; display:grid; align-content:start; gap:5px; padding:10px; border-radius:12px; }
.sale-detail-modal .correction-chain-item>span { white-space:normal; font-size:13px; }
.sale-detail-modal .correction-chain-item>span i { font-size:17px; }
.sale-detail-modal .correction-chain-item>bdi { width:auto; min-width:0; font-size:12px; line-height:1.45; white-space:nowrap; overflow-wrap:normal; word-break:normal; direction:ltr; unicode-bidi:isolate; }
.sale-detail-notice { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:14px; font-size:12px; font-weight:760; line-height:1.7; }
.sale-detail-notice>i { margin-top:2px; font-size:18px; }
.sale-detail-notice.is-corrected { color:var(--theme-ink, #7448c8); background:rgba(118,86,217,.1); border:1px solid rgba(118,86,217,.2); }
.sale-detail-notice.is-correction { color:var(--theme-ink, #a54d38); background:rgba(217,102,82,.1); border:1px solid rgba(217,102,82,.2); }
.sale-detail-reason { padding:12px 14px; border:1px solid var(--border); border-radius:15px; background:var(--theme-glass, rgba(255,255,255,.62)); }
.sale-detail-reason>span { display:flex; align-items:center; gap:7px; color:var(--text2); font-size:11px; font-weight:800; }
.sale-detail-reason p { margin:7px 0 0; color:var(--text1); font-size:13px; line-height:1.75; }
.sale-detail-actions { flex:0 0 auto; display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(110px,.7fr) minmax(110px,.7fr); gap:9px!important; margin:0!important; padding:11px 2px 2px!important; border-top:1px solid color-mix(in srgb,var(--sale-detail-tone) 18%,var(--theme-stroke, rgba(255,255,255,.76))); background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sale-detail-tone) 7%,var(--theme-glass, rgba(231,238,250,.82)))); }
.sale-detail-actions .btn { min-height:50px; margin:0!important; font-size:14px; }
.sale-detail-actions .btn i { font-size:19px; }
.sale-detail-actions .btn-primary { border-color:transparent!important; background:linear-gradient(135deg,var(--sale-detail-tone),color-mix(in srgb,var(--sale-detail-tone) 72%,#163b62))!important; box-shadow:0 9px 20px color-mix(in srgb,var(--sale-detail-tone) 25%,transparent)!important; }
html[data-theme="dark"] .overlay .modal.sale-detail-modal { border-color:color-mix(in srgb,var(--sale-detail-tone) 32%,rgba(255,255,255,.12)); background:radial-gradient(circle at 92% 2%,color-mix(in srgb,var(--sale-detail-tone) 22%,transparent),transparent 38%),linear-gradient(150deg,rgba(34,43,58,.99),color-mix(in srgb,var(--sale-detail-tone) 10%,rgba(20,28,40,.99))); }
html[data-theme="dark"] :is(.sale-detail-head,.sale-detail-total,.sale-detail-field,.sale-detail-reason) { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); }
html[data-theme="dark"] .sale-detail-close { background:rgba(255,255,255,.05); }
html[data-theme="dark"] .sale-detail-qr { border-color:rgba(255,255,255,.11); background:rgba(255,255,255,.04); }
html[data-theme="dark"] .sale-detail-total:not(.is-reversal):not(.is-original) { border-color:color-mix(in srgb,var(--sale-detail-tone) 38%,rgba(255,255,255,.1)); background:linear-gradient(135deg,rgba(255,255,255,.05),color-mix(in srgb,var(--sale-detail-tone) 18%,rgba(18,25,36,.7))); }
html[data-theme="dark"] .sale-detail-total.is-reversal { border-color:rgba(239,105,105,.32); background:linear-gradient(135deg,rgba(104,43,47,.34),rgba(54,29,37,.52)); }
html[data-theme="dark"] .sale-detail-total.is-reversal>span,html[data-theme="dark"] .sale-detail-total.is-reversal strong { color:#FF8D8D; }
html[data-theme="dark"] .sale-detail-total.is-original { border-color:rgba(157,129,244,.34); background:linear-gradient(135deg,rgba(75,52,126,.36),rgba(38,30,58,.54)); }
html[data-theme="dark"] .sale-detail-total.is-original>span,html[data-theme="dark"] .sale-detail-total.is-original strong { color:#B9A2FF; }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-original { border-color:rgba(224,155,82,.36); background:linear-gradient(135deg,rgba(93,57,25,.42),rgba(50,35,25,.58)); }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-original>span,html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-original strong { color:#F0B66F; }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-reversal { border-color:rgba(235,105,166,.34); background:linear-gradient(135deg,rgba(91,35,62,.42),rgba(50,27,39,.58)); }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-reversal>span,html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-reversal strong { color:#F28DBD; }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-replacement { border-color:rgba(64,190,202,.34); background:linear-gradient(135deg,rgba(24,77,83,.42),rgba(23,45,49,.58)); }
html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-replacement>span,html[data-theme="dark"] .expense-record-modal .sale-detail-total.is-expense-replacement strong { color:#63D1DB; }
@media (max-width:600px) {
  .overlay .modal.sale-detail-modal { width:min(470px,calc(100vw - 14px)); max-width:none; max-height:calc(100dvh - 14px); padding:8px; }
  .sale-detail-head { grid-template-columns:44px minmax(0,1fr) 36px; min-height:64px; padding:9px; border-radius:16px; }
  .sale-detail-head-icon { width:44px; height:44px; }
  .sale-detail-status { grid-column:2; justify-self:start; min-height:27px; margin-top:-4px; padding:3px 7px; }
  .sale-detail-close { grid-column:3; grid-row:1/3; }
  .sale-detail-scroll { padding-block:9px; }
  .sale-detail-total { min-height:68px; padding:11px 13px; }
  .sale-detail-total strong { font-size:20px; }
  .sale-detail-grid,.sale-detail-identifiers,.sale-detail-modal .correction-document-chain>div { grid-template-columns:1fr; }
  .sale-detail-field.is-wide { grid-column:auto; }
  .sale-detail-identifiers :is(.document-number-badge,.tracking-code-badge)>bdi { width:auto; padding:0!important; font-size:12px; white-space:nowrap; }
  .sale-detail-modal .correction-chain-item>bdi { font-size:11.5px; white-space:nowrap; }
  .sale-detail-qr { min-height:0; flex-direction:row; justify-content:flex-start; padding:9px 12px; }
  .sale-detail-qr img { width:70px; height:70px; }
  .sale-detail-qr figcaption { font-size:11px; }
  .sale-detail-actions { grid-template-columns:1fr 1fr; }
  .sale-detail-actions #txn_editBtn { grid-column:1/-1; }
}
@media (min-width:601px) and (max-width:900px) { .overlay .modal.sale-detail-modal { width:calc(100vw - 32px); } }
@media (max-width:380px) { .sale-detail-actions { grid-template-columns:1fr; }.sale-detail-actions #txn_editBtn { grid-column:auto; } }
@media (prefers-reduced-motion:reduce) { .sale-detail-modal * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* ---------- employee directory: compact staff cards with clear operational state ---------- */
#view-employees #employeeGrid { display:grid; gap:18px; }
#view-employees .emp-list-section {
    --emp-section-tone:#4F6FE8;
    margin:0;
    padding:15px;
    border:1px solid var(--theme-stroke, rgba(255,255,255,.82));
    border-radius:21px;
    background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.72)), var(--theme-glass, rgba(237,243,255,.57)));
    box-shadow:0 13px 29px rgba(66,79,148,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .emp-list-section:has(.emp-row.is-inactive) { --emp-section-tone:#788397; background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.68)), var(--theme-glass, rgba(241,243,248,.59))); }
#view-employees .emp-list-section-head { min-height:38px; margin:0 0 13px; padding:0 2px 11px; border-bottom:1px solid color-mix(in srgb, var(--emp-section-tone) 16%, var(--theme-stroke, rgba(255,255,255,.82))); }
#view-employees .emp-list-section-icon { width:34px; height:34px; border-radius:12px; color:#fff; background:linear-gradient(145deg, color-mix(in srgb, var(--emp-section-tone) 72%, var(--theme-surface, #fff)), var(--emp-section-tone)); box-shadow:0 6px 13px color-mix(in srgb, var(--emp-section-tone) 22%, transparent); }
#view-employees .emp-list-section-icon.is-active { color:#fff; background:linear-gradient(145deg,#55BB83,#2E9C63); }
#view-employees .emp-list-section-icon.is-inactive { color:#fff; background:linear-gradient(145deg,#9BA5B6,#737F94); }
#view-employees .emp-list-section-title { color:var(--text1); font-size:14px; font-weight:880; }
#view-employees .emp-list-section-count { min-width:30px; padding:5px 8px; border:0; border-radius:999px; color:var(--emp-section-tone); background:color-mix(in srgb, var(--emp-section-tone) 12%, var(--theme-glass, rgba(255,255,255,.72))); font-size:11px; font-weight:880; }
#view-employees .emp-list { grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:13px; }

#view-employees .emp-row {
    position:relative;
    min-height:171px;
    grid-template-columns:56px minmax(0,1fr);
    gap:11px 12px;
    padding:15px;
    border:1px solid color-mix(in srgb, var(--emp-tone) 25%, var(--theme-stroke, rgba(255,255,255,.84)));
    border-top:1px solid color-mix(in srgb, var(--emp-tone) 25%, var(--theme-stroke, rgba(255,255,255,.84)));
    border-inline-end:1px solid var(--border);
    border-radius:17px;
    background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--emp-tone) 15%, transparent), transparent 44%), linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.81)), var(--theme-glass, rgba(242,247,255,.63)));
    box-shadow:0 9px 21px rgba(56,68,134,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
    cursor:pointer;
    overflow:visible;
    transition:transform .2s var(--ui-ease), border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#view-employees .emp-row::before { content:''; position:absolute; inset:12px auto 12px -1px; width:3px; border-radius:99px; background:var(--emp-tone); opacity:.72; }
#view-employees .emp-row:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--emp-tone) 52%, var(--theme-stroke, rgba(255,255,255,.86))); box-shadow:0 16px 29px color-mix(in srgb, var(--emp-tone) 15%, transparent), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)); }
#view-employees .emp-row:focus-visible { outline:3px solid color-mix(in srgb, var(--emp-tone) 35%, transparent); outline-offset:3px; }
#view-employees .emp-row.is-busy { --emp-tone:#2FA96D; --emp-tint:rgba(47,169,109,.13); }
#view-employees .emp-row.is-free { --emp-tone:#4F7BE8; --emp-tint:rgba(79,123,232,.12); }
#view-employees .emp-row.is-leave { --emp-tone:#D49325; --emp-tint:rgba(212,147,37,.13); }
#view-employees .emp-row.is-off,#view-employees .emp-row.is-inactive { --emp-tone:#7B8799; --emp-tint:rgba(123,135,153,.12); opacity:.93; filter:none; }
#view-employees .emp-row-avatar { width:56px; height:56px; border-width:2px; background:color-mix(in srgb, var(--emp-tint) 68%, var(--theme-glass, rgba(255,255,255,.84))); box-shadow:0 7px 15px color-mix(in srgb, var(--emp-tone) 20%, transparent); font-size:20px; margin-top: 20px; }
#view-employees .emp-row-name-line { gap:10px; display: flex; align-content: center; flex-direction: row-reverse; }
#view-employees .emp-row-name { color:var(--text1); font-size:14px; font-weight:870; }
#view-employees .emp-row-id { padding:3px 7px; border-radius:999px; font-size:10.5px; font-weight:820; }
#view-employees .emp-row-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:9px; }
#view-employees .emp-row-meta-item { min-width:0; min-height:28px; display:flex; align-items:center; gap:5px; padding:4px 6px; border:1px solid color-mix(in srgb, var(--emp-tone) 15%, var(--theme-stroke, rgba(255,255,255,.75))); border-radius:9px; background:var(--theme-glass, rgba(255,255,255,.56)); overflow:hidden; font-size:10.5px; font-weight:700; margin-top: 20px; text-overflow:ellipsis; white-space:nowrap; }
#view-employees .emp-row-meta-item i { width:18px; height:18px; flex:0 0 18px; border-radius:6px; font-size:11px; }
#view-employees .emp-row-status { min-height:36px; padding:7px 34px 7px 9px; border-radius:11px; font-size:11px; font-weight:830; margin-top: 20px; }
#view-employees .emp-row-status i { font-size:15px; }
#view-employees .emp-row-chevron { inset-inline-end:12px; bottom:11px; display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:8px; opacity:1; transform:none; color:var(--emp-tone); background:color-mix(in srgb, var(--emp-tint) 85%, var(--theme-glass, rgba(255,255,255,.7))); }
#view-employees .emp-row:hover .emp-row-chevron { transform:translateX(-2px); }
@keyframes employeeDirectoryReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
#view-employees .emp-row.fade-in-item { animation:employeeDirectoryReveal .32s var(--ui-ease) both; }
@media (max-width:650px) {
    #view-employees .emp-list-section { padding:12px; }
    #view-employees .emp-list { grid-template-columns:1fr; }
}
@media (max-width:400px) { #view-employees .emp-row-meta { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { #view-employees .emp-row { animation:none !important; transition:none !important; } }

/* ---------- employee account: profile-aligned handover and salary ledger ---------- */
#employeeAccountProfileWrap {
    --employee-account-tone:#4F71E8;
    --employee-account-mint:#2FA96D;
    --employee-account-warm:#D49325;
    display:grid;
    gap:18px;
}

#employeeAccountProfileWrap .back-btn-prominent { margin-block:0 2px; }
#employeeAccountProfileWrap .employee-account-profile-card {
    overflow:visible;
    border-color:rgba(88,112,220,.22);
    background:linear-gradient(135deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(232,240,255,.64)));
    box-shadow:0 15px 30px rgba(62,79,145,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#employeeAccountProfileWrap .profile-header { gap:20px; }
#employeeAccountProfileWrap .profile-header-main { min-width:0; }
#employeeAccountProfileWrap .profile-avatar {
    border-color:var(--theme-stroke, rgba(255,255,255,.9));
    box-shadow:0 10px 20px rgba(62,91,198,.2), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.38));
}
#employeeAccountProfileWrap .profile-meta-row { gap:8px; }
#employeeAccountProfileWrap .profile-meta-item {
    min-height:42px;
    border:1px solid rgba(89,113,210,.16);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.57));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.82));
}
#employeeAccountProfileWrap .profile-action-rail { gap:9px; min-width:190px; }
#employeeAccountProfileWrap .profile-rail-btn { min-height:43px; padding:8px 11px; }

#employeeAccountProfileWrap .employee-account-tabs {
    width:100%;
    min-height:58px;
    margin:0;
    padding:5px;
    border:1px solid rgba(84,108,215,.18);
    border-radius:17px;
    background:var(--theme-glass, rgba(255,255,255,.53));
    box-shadow:0 9px 20px rgba(66,81,151,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-indicator {
    inset:5px auto 5px 5px;
    width:calc(50% - 5px);
    border-radius:12px;
    background:linear-gradient(135deg, #4F71E8, #6C5DE9);
    box-shadow:0 7px 15px rgba(79,113,232,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}
html[dir="rtl"] #employeeAccountProfileWrap .employee-account-tabs .acct-tab-indicator { inset-inline-start:auto; inset-inline-end:5px; }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn {
    min-height:46px;
    justify-content:center;
    gap:8px;
    border-radius:12px;
    color:var(--text2);
    font-weight:850;
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn.active { color:#fff; }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-icon {
    width:29px;
    height:29px;
    border-radius:10px;
    color:var(--employee-account-tone);
    background:rgba(79,113,232,.11);
    transition:transform .2s var(--ui-ease), background .2s ease;
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn.active .acct-tab-icon { color:#fff; background:var(--theme-highlight, rgba(255,255,255,.2)); }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn:hover .acct-tab-icon { transform:rotate(-7deg) scale(1.04); }

#employeeAccountProfileWrap .ledger-card {
    margin:0;
    padding:17px;
    border:1px solid rgba(87,108,206,.18);
    border-radius:20px;
    background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.75)), var(--theme-glass, rgba(237,242,255,.56)));
    box-shadow:0 15px 30px rgba(59,72,136,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#employeeAccountProfileWrap .acct-ledger-head {
    align-items:flex-start;
    gap:14px 18px;
    margin-bottom:15px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(87,108,206,.14);
}
#employeeAccountProfileWrap .ledger-period-title { font-size:15px; font-weight:900; }
#employeeAccountProfileWrap .ledger-period-range { margin-top:5px; line-height:1.65; }
#employeeAccountProfileWrap .acct-ledger-actions { justify-content:flex-start; gap:8px; }
#employeeAccountProfileWrap .acct-pill-btn {
    min-height:40px;
    display:inline-flex;
    justify-content:center;
    padding:8px 12px;
    border-color:rgba(85,106,199,.2);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.72));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    font-weight:820;
    transition:transform .18s var(--ui-ease), border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#employeeAccountProfileWrap .acct-pill-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 16px rgba(65,82,150,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
#employeeAccountProfileWrap .acct-pill-btn:focus-visible { outline:3px solid rgba(79,113,232,.25); outline-offset:2px; }
#employeeAccountProfileWrap .acct-action-record { color:#fff; border-color:transparent; background:linear-gradient(135deg,#4F71E8,#645BE3); box-shadow:0 7px 15px rgba(79,113,232,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25)); }
#employeeAccountProfileWrap .acct-action-history { color:var(--theme-ink, #4261C8); background:var(--theme-glass, rgba(232,238,255,.78)); }
#employeeAccountProfileWrap .acct-action-settle { color:var(--theme-ink, #95610E); border-color:rgba(212,147,37,.28); background:linear-gradient(135deg,var(--theme-glass, rgba(255,245,215,.92)),var(--theme-glass, rgba(255,255,255,.75))); }
#employeeAccountProfileWrap .acct-action-deduction { color:var(--theme-ink, #B65F42); border-color:rgba(224,113,78,.24); background:var(--theme-glass, rgba(255,238,232,.8)); }
#employeeAccountProfileWrap .acct-action-print { color:var(--theme-ink, #5C5C84); }
#employeeAccountProfileWrap .acct-action-export { color:var(--theme-ink, #177951); border-color:rgba(47,169,109,.24); background:var(--theme-glass, rgba(226,248,236,.78)); }
#employeeAccountProfileWrap .acct-pill-btn:disabled { opacity:.58; cursor:not-allowed; filter:saturate(.7); }

#employeeAccountProfileWrap .ledger-table-wrap {
    margin:0;
    border-color:rgba(84,108,207,.18);
    border-radius:15px;
    background:var(--theme-glass, rgba(255,255,255,.43));
    scrollbar-color:rgba(87,107,184,.58) transparent;
}
#employeeAccountProfileWrap .ledger-table th {
    padding:12px;
    color:var(--theme-ink, #59627E);
    background:linear-gradient(135deg,var(--theme-glass, rgba(229,235,255,.92)),var(--theme-glass, rgba(244,247,255,.76)));
    font-weight:850;
}
#employeeAccountProfileWrap .ledger-table td { padding:12px; border-color:rgba(84,108,207,.11); }
#employeeAccountProfileWrap .ledger-table tbody tr { transition:background .18s ease, transform .18s var(--ui-ease); }
#employeeAccountProfileWrap .ledger-table tbody tr:hover { background:var(--theme-glass, rgba(239,244,255,.8)); }
#employeeAccountProfileWrap .ledger-status-cell.is-debt, #employeeAccountProfileWrap .ledger-amount-cell.is-debt { color:var(--theme-ink, #D96E50); }
#employeeAccountProfileWrap .ledger-status-cell.is-paid, #employeeAccountProfileWrap .ledger-amount-cell.is-paid { color:var(--theme-ink, #26945E); }
#employeeAccountProfileWrap .ledger-total-row {
    min-height:53px;
    gap:9px;
    margin-top:12px;
    padding:9px 12px;
    border-radius:14px;
    border:1px solid rgba(84,108,207,.14);
    background:var(--theme-glass, rgba(255,255,255,.58));
}
#employeeAccountProfileWrap .ledger-total-row.is-debt { border-color:rgba(221,111,78,.26); background:linear-gradient(135deg,var(--theme-glass, rgba(255,238,232,.86)),var(--theme-glass, rgba(255,255,255,.67))); }
#employeeAccountProfileWrap .ledger-total-row.is-credit { border-color:rgba(47,169,109,.25); background:linear-gradient(135deg,var(--theme-glass, rgba(226,248,236,.88)),var(--theme-glass, rgba(255,255,255,.68))); }

@media (max-width:760px) {
    #employeeAccountProfileWrap { gap:14px; }
    #employeeAccountProfileWrap .profile-header { align-items:stretch; }
    #employeeAccountProfileWrap .profile-action-rail { width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #employeeAccountProfileWrap .acct-ledger-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #employeeAccountProfileWrap .acct-pill-btn { width:100%; padding-inline:9px; }
}
@media (max-width:460px) {
    #employeeAccountProfileWrap .ledger-card { padding:13px; border-radius:17px; }
    #employeeAccountProfileWrap .employee-account-tabs .acct-tab-label { font-size:12px; }
    #employeeAccountProfileWrap .profile-action-rail, #employeeAccountProfileWrap .acct-ledger-actions { grid-template-columns:1fr; }
    #employeeAccountProfileWrap .ledger-total-row { align-items:flex-start; flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
    #employeeAccountProfileWrap :is(.acct-tab-icon,.acct-pill-btn,.ledger-table tbody tr) { transition:none !important; animation:none !important; }
}

/* ---------- unified account profiles: customer and employee balance views ---------- */
:is(#employeeAccountProfileWrap, #customerProfileWrap) {
    --account-view-blue:#4F71E8;
    --account-view-green:#2FA96D;
    --account-view-amber:#D49325;
    display:grid;
    gap:17px;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) > .back-btn-prominent { justify-self:end; margin:0; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-card {
    min-height:132px;
    margin-top: 10px;
    padding:17px 19px;
    border:1px solid rgba(83,108,210,.22);
    border-radius:22px;
    background:radial-gradient(circle at 96% 8%, rgba(79,113,232,.12), transparent 29%), linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.79)), var(--theme-glass, rgba(233,240,255,.62)));
    box-shadow:0 15px 30px rgba(57,73,139,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header {
    min-height:96px;
    align-items:center;
    gap:20px;
    padding: 10px;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-main { gap:13px; min-width:0; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-info { min-width:0; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-name { font-size:17px; font-weight:900; line-height:1.4; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-id { margin-top:3px; color:var(--theme-ink, #66708C); font-size:12px; font-weight:760; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-avatar {
    width:58px;
    height:58px;
    flex-basis:58px;
    border:2px solid var(--theme-stroke, rgba(255,255,255,.9));
    box-shadow:0 9px 18px rgba(59,86,193,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.3));
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-row { gap:8px; margin-top:9px; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-item {
    min-height:42px;
    padding:6px 9px;
    border:1px solid rgba(83,108,210,.16);
    border-radius:12px;
    background:var(--theme-glass, rgba(255,255,255,.62));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-icon { width:27px; height:27px; border-radius:9px; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-label { font-size:10px; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-value { font-size:12px; font-weight:820; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-action-rail {
    min-width:184px;
    gap:9px;
    align-self:stretch;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-rail-btn {
    min-height:44px;
    padding:8px 11px;
    border-radius:12px;
    font-weight:820;
    transition:transform .18s var(--ui-ease), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-rail-btn:hover { transform:translateY(-2px); box-shadow:0 8px 17px rgba(54,70,136,.14); }
#customerProfileWrap .customer-account-edit-btn {
    color:var(--theme-ink, #5C5C84);
    border-color:rgba(97,101,154,.2);
    background:var(--theme-glass, rgba(255,255,255,.67));
}
#customerProfileWrap .customer-account-edit-btn > i { color:var(--theme-ink, #725BD7); background:rgba(114,91,215,.12); }

:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-card {
    margin:0;
    margin-top: 20px;
    padding:18px;
    border:1px solid rgba(83,108,210,.19);
    border-radius:21px;
    background:linear-gradient(145deg, var(--theme-glass, rgba(255,255,255,.78)), var(--theme-glass, rgba(238,243,255,.59)));
    box-shadow:0 14px 29px rgba(56,70,135,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-card--customer { border-color:rgba(105,89,210,.21); }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-ledger-head {
    min-height:61px;
    align-items:center;
    gap:14px 20px;
    margin:0 0 15px;
    padding:0 0 15px;
    border-bottom:1px solid rgba(83,108,210,.15);
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-period-title { font-size:15px; font-weight:900; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-period-range { margin-top:5px; line-height:1.6; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-ledger-actions { gap:8px; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-pill-btn {
    min-height:42px;
    padding:8px 12px;
    border-radius:12px;
    border-color:rgba(82,105,199,.2);
    background:var(--theme-glass, rgba(255,255,255,.72));
    font-size:12px;
    font-weight:830;
    transition:transform .18s var(--ui-ease), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-pill-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 16px rgba(61,76,143,.13), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9)); }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-pill-btn:focus-visible { outline:3px solid rgba(79,113,232,.27); outline-offset:2px; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-pill-btn-solid { color:#fff; border-color:transparent; background:linear-gradient(135deg,#4F71E8,#645BE3); box-shadow:0 7px 15px rgba(79,113,232,.23), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25)); }
#customerProfileWrap .ledger-card--customer .acct-pill-btn-solid { background:linear-gradient(135deg,#6D5CE8,#8B5FE8); box-shadow:0 7px 15px rgba(109,92,232,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25)); }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-table-wrap {
    margin:0;
    border-color:rgba(83,108,210,.18);
    border-radius:15px;
    background:var(--theme-glass, rgba(255,255,255,.44));
    scrollbar-color:rgba(87,107,184,.58) transparent;
}
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-table th { padding:12px; background:linear-gradient(135deg,var(--theme-glass, rgba(228,235,255,.92)),var(--theme-glass, rgba(246,248,255,.78))); color:var(--theme-ink, #59627E); font-weight:850; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-table td { padding:12px; border-color:rgba(83,108,210,.11); }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-table tbody tr { transition:background .18s ease; }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-table tbody tr:hover { background:var(--theme-glass, rgba(239,244,255,.84)); }
:is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-total-row { min-height:53px; margin-top:12px; padding:9px 13px; border-radius:14px; }

@media (max-width:760px) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) { gap:14px; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) > .back-btn-prominent { justify-self:stretch; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-card { padding:14px; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header { align-items:stretch; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-action-rail { width:100%; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-ledger-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-pill-btn { width:100%; justify-content:center; }
}
@media (max-width:460px) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-name { font-size:15px; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-meta-row { display:grid; grid-template-columns:1fr; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-action-rail, :is(#employeeAccountProfileWrap, #customerProfileWrap) .acct-ledger-actions { grid-template-columns:1fr; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .ledger-card { padding:13px; border-radius:17px; }
}
@media (prefers-reduced-motion:reduce) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) :is(.profile-rail-btn,.acct-pill-btn,.ledger-table tbody tr) { transition:none !important; animation:none !important; }
}

/* ---------- employee account profile: compact identity workspace ---------- */
#employeeAccountProfileWrap {
    --employee-profile-blue:#4667dc;
    --employee-profile-violet:#7458d7;
    --employee-profile-ink:#202a47;
    gap:20px;
}
#employeeAccountProfileWrap > #employeeAccountProfileHeader,
#employeeAccountProfileWrap > #employeeAccountProfileBody {
    min-width:0;
}
#employeeAccountProfileWrap > #employeeAccountProfileBody {
    display:grid;
    gap:20px;
}
#employeeAccountProfileWrap > .employee-account-back {
    min-width:0;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    justify-self:end;
    padding:9px 14px;
    border:1px solid rgba(68,88,157,.16);
    border-radius:13px;
    color:var(--theme-ink, #37415e);
    background:var(--theme-glass, rgba(255,255,255,.78));
    box-shadow:0 7px 18px rgba(44,58,111,.08), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    font:inherit;
    font-size:12.5px;
    font-weight:820;
    cursor:pointer;
    transition:transform .2s var(--ui-ease), border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
#employeeAccountProfileWrap > .employee-account-back:hover {
    transform:translateX(3px);
    color:var(--employee-profile-blue);
    border-color:rgba(70,103,220,.3);
    box-shadow:0 10px 22px rgba(44,58,111,.12), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92));
}
#employeeAccountProfileWrap > .employee-account-back:focus-visible,
#employeeAccountProfileWrap .profile-rail-btn:focus-visible,
#employeeAccountProfileWrap .acct-tab-btn:focus-visible {
    outline:3px solid rgba(70,103,220,.27);
    outline-offset:2px;
}
#employeeAccountProfileWrap .employee-account-profile-card {
    position:relative;
    min-height:0;
    overflow:hidden;
    padding:14px;
    border-color:rgba(73,97,189,.18);
    border-radius:20px;
    background:
        radial-gradient(circle at 92% 15%, rgba(91,111,222,.13), transparent 28%),
        linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.88)),var(--theme-glass, rgba(239,244,255,.72)));
    box-shadow:0 14px 32px rgba(45,59,116,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
}
#employeeAccountProfileWrap .employee-account-profile-card::after {
    content:"";
    position:absolute;
    inset:auto -35px -55px auto;
    width:145px;
    height:145px;
    border-radius:50%;
    background:rgba(116,88,215,.07);
    pointer-events:none;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-header {
    position:relative;
    z-index:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding: 10px;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-header-main {
    align-items:center;
    gap:16px;
}
#employeeAccountProfileWrap .employee-account-avatar-wrap {
    position:relative;
    width:66px;
    height:66px;
    flex:0 0 66px;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-avatar {
    width:66px;
    height:66px;
    border:3px solid var(--theme-stroke, rgba(255,255,255,.94));
    border-radius:21px;
    background:linear-gradient(145deg,var(--employee-profile-blue),var(--employee-profile-violet)) !important;
    box-shadow:0 11px 24px rgba(70,88,181,.22);
}
#employeeAccountProfileWrap .employee-account-avatar-status {
    position:absolute;
    inset:auto auto -2px -2px;
    width:17px;
    height:17px;
    border:4px solid var(--theme-stroke, #f6f8ff);
    border-radius:50%;
    background:#2fa96d;
    box-shadow:0 3px 8px rgba(47,169,109,.3);
}
#employeeAccountProfileWrap .employee-account-kicker {
    display:flex;
    align-items:center;
    gap:5px;
    margin-bottom:4px;
    color:var(--theme-ink, #66708c);
    font-size:10.5px;
    font-weight:800;
}
#employeeAccountProfileWrap .employee-account-kicker i { color:var(--employee-profile-blue); font-size:14px; }
#employeeAccountProfileWrap .employee-account-title-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}
#employeeAccountProfileWrap .employee-account-title-row .profile-name {
    color:var(--employee-profile-ink);
    font-size:18px;
    font-weight:900;
}
#employeeAccountProfileWrap .employee-account-title-row .profile-id {
    margin:0;
    padding:3px 8px;
    border:1px solid rgba(73,97,189,.13);
    border-radius:999px;
    color:var(--theme-ink, #68738f);
    background:var(--theme-glass, rgba(255,255,255,.66));
    font-size:10.5px;
}
#employeeAccountProfileWrap .employee-account-status {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 8px;
    border:1px solid rgba(37,150,99,.2);
    border-radius:999px;
    color:var(--theme-ink, #16724d);
    background:var(--theme-glass, rgba(226,248,236,.78));
    font-size:10px;
    font-weight:850;
}
#employeeAccountProfileWrap .employee-account-status > span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#2fa96d;
    box-shadow:0 0 0 3px rgba(47,169,109,.13);
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-row { gap:7px; margin-top:9px; }
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-item {
    min-height:38px;
    padding:5px 8px;
    border-radius:11px;
    background:var(--theme-glass, rgba(255,255,255,.68));
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-icon {
    width:26px;
    height:26px;
    border-radius:8px;
}
#employeeAccountProfileWrap .employee-account-number-icon { color:var(--theme-ink, #c48518); background:rgba(212,147,37,.12); }
#employeeAccountProfileWrap .employee-account-duty-icon { color:var(--theme-ink, #7057cc); background:rgba(112,87,204,.11); }
#employeeAccountProfileWrap .employee-account-period-meta .profile-meta-icon { color:var(--theme-ink, #227dba); background:rgba(34,125,186,.1); }
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-label { font-size:9.5px; }
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-value { font-size:11.5px; }
#employeeAccountProfileWrap .employee-account-profile-card .profile-action-rail {
    width:190px;
    min-width:190px;
    align-self:center;
    gap:7px;
    padding:8px;
    border:1px solid rgba(80,103,186,.13);
    border-radius:16px;
    background:var(--theme-glass, rgba(255,255,255,.5));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-rail-btn {
    min-height:44px;
    padding:7px 9px;
    border-radius:12px;
    font-size:12px;
    cursor:pointer;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-rail-btn--primary {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--employee-profile-blue),#6058dc);
    box-shadow:0 8px 17px rgba(70,103,220,.22), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-rail-btn--tertiary {
    justify-content:flex-start;
    color:var(--theme-ink, #4f5871);
    border:1px solid rgba(78,94,153,.16);
    background:var(--theme-glass, rgba(255,255,255,.7));
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-rail-btn--tertiary:hover {
    color:var(--theme-ink, #624bb8);
    border-color:rgba(98,75,184,.25);
    background:var(--theme-glass, rgba(245,242,255,.88));
}
#employeeAccountProfileWrap .employee-account-action-icon {
    width:27px;
    height:27px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:var(--theme-highlight, rgba(255,255,255,.18));
}
#employeeAccountProfileWrap .profile-rail-btn--tertiary .employee-account-action-icon {
    color:var(--theme-ink, #6e57cf);
    background:rgba(110,87,207,.1);
}
#employeeAccountProfileWrap .employee-account-tabs {
    width:min(460px,100%);
    min-height:0;
    /* Parent grid supplies the requested 20px separation from the profile card. */
    margin-top: 10px;
    display: flex;
    gap:10px;
    border:0;
    left: 0;
    right: 0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-indicator { display:none; }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn {
    min-height:48px;
    gap:8px;
    padding:7px 12px;
    border:1px solid transparent;
    border-radius:13px;
    background:var(--theme-glass, rgba(255,255,255,.78));
    box-shadow:0 6px 14px rgba(45,59,116,.07), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
    font-size:12.5px;
    font-weight:850;
    cursor:pointer;
    transition:transform .2s var(--ui-ease), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-icon {
    width:30px;
    height:30px;
    border-radius:10px;
    font-size:15px;
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--handover {
    color:var(--theme-ink, #17724f);
    border-color:rgba(23,132,93,.22);
    background:linear-gradient(135deg,var(--theme-glass, rgba(232,249,240,.96)),var(--theme-glass, rgba(255,255,255,.78)));
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--handover .acct-tab-icon { color:var(--theme-ink, #15845c); background:rgba(21,132,92,.13); }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--salary {
    color:var(--theme-ink, #94600d);
    border-color:rgba(184,118,25,.25);
    background:linear-gradient(135deg,var(--theme-glass, rgba(255,247,225,.96)),var(--theme-glass, rgba(255,255,255,.78)));
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--salary .acct-tab-icon { color:var(--theme-ink, #b87619); background:rgba(184,118,25,.13); }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn.active {
    color:#fff;
    border-color:transparent;
    transform:translateY(-1px);
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--handover.active {
    background:linear-gradient(135deg,#169567,#0f7650);
    box-shadow:0 9px 18px rgba(20,136,92,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}

/* Cash handover custody workflow: amber is in transit, green is confirmed. */
.ledger-status-cell.is-warning .ledger-status-badge {
    color:var(--warning);
    background:var(--warning-bg);
}
.till-pending-handovers-card { margin:18px 0; padding:18px; }
.till-pending-handovers-list { display:grid; gap:9px; margin-top:14px; }
.till-pending-handover-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--warning) 25%,var(--border)); border-radius:14px; background:linear-gradient(135deg,color-mix(in srgb,var(--warning-bg) 70%,transparent),var(--panel)); }
.till-pending-handover-row > div { display:grid; gap:3px; min-width:0; }
.till-pending-handover-row > div span { color:var(--text2); font-size:12px; }
.till-pending-handover-row strong { color:var(--warning); white-space:nowrap; }
.till-attendant-handover-card { --section-tone:#38A66E !important; }
#view-employees .till-attendant-handover-card .till-attendant-handover-summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--text1);
}
#view-employees .till-attendant-handover-card .till-attendant-handover-summary .num { color:var(--warning); font-weight:800; }
#view-employees .till-attendant-handover-card .till-attendant-payment-list { gap:10px; }
.till-attendant-payment-day { display:grid; gap:7px; }
.till-attendant-payment-date {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:31px;
    margin:0 1px;
    padding:5px 9px;
    border-radius:11px;
    color:var(--theme-ink, #278456);
    background:rgba(56,166,110,.1);
    font-size:11.5px;
    font-weight:800;
}
#view-employees .employee-salaries-card .salary-payment-list-item.till-attendant-payment-list-item { grid-template-columns:25px 39px minmax(0,1fr) auto minmax(122px,auto) auto; }
.till-attendant-payment-list-item .till-attendant-confirm-btn { min-height:36px; white-space:nowrap; }
@media (max-width:700px) {
    #view-employees .employee-salaries-card .salary-payment-list-item.till-attendant-payment-list-item { grid-template-columns:25px 38px minmax(0,1fr); }
    .till-attendant-payment-list-item .till-attendant-confirm-btn { grid-column:3; justify-self:start; }
}
@media (max-width:620px) {
    .till-pending-handover-row { grid-template-columns:1fr auto; gap:9px; }
    .till-pending-handover-row .btn { grid-column:1 / -1; width:100%; }
    #view-employees .employee-salaries-card .salary-payment-list-item.till-attendant-payment-list-item { grid-template-columns:25px 38px minmax(0,1fr); }
    .till-attendant-payment-list-item .till-attendant-confirm-btn { grid-column:3; justify-self:start; }
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn--salary.active {
    background:linear-gradient(135deg,#d3972d,#ad6b12);
    box-shadow:0 9px 18px rgba(184,118,25,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.25));
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn.active .acct-tab-icon { color:#fff; background:var(--theme-highlight, rgba(255,255,255,.2)); }
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn:hover:not(.active) {
    transform:translateY(-1px);
    box-shadow:0 9px 18px rgba(45,59,116,.11), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}
#employeeAccountProfileWrap .employee-account-tabs .acct-tab-btn:hover .acct-tab-icon { transform:translateY(-1px); }
@media (max-width:760px) {
    #employeeAccountProfileWrap { gap:16px; }
    #employeeAccountProfileWrap > #employeeAccountProfileBody { gap:16px; }
    #employeeAccountProfileWrap > .employee-account-back { justify-self:stretch; justify-content:center; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header { grid-template-columns:1fr; gap:14px; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-action-rail {
        width:100%;
        min-width:0;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:480px) {
    #employeeAccountProfileWrap .employee-account-profile-card { padding:13px; border-radius:17px; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header-main { align-items:flex-start; gap:11px; }
    #employeeAccountProfileWrap .employee-account-avatar-wrap,
    #employeeAccountProfileWrap .employee-account-profile-card .profile-avatar { width:54px; height:54px; flex-basis:54px; border-radius:17px; }
    #employeeAccountProfileWrap .employee-account-title-row .profile-name { font-size:15px; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-meta-row { grid-template-columns:1fr; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-action-rail { grid-template-columns:1fr; }
    #employeeAccountProfileWrap .employee-account-tabs { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
    #employeeAccountProfileWrap > .employee-account-back,
    #employeeAccountProfileWrap .employee-account-profile-card :is(.profile-avatar,.profile-meta-item,.profile-rail-btn),
    #employeeAccountProfileWrap .employee-account-tabs :is(.acct-tab-indicator,.acct-tab-icon,.acct-tab-btn) {
        animation:none !important;
        transition:none !important;
    }
}

/* ---------- employee account ledger: scan-friendly financial rows ---------- */
#employeeAccountProfileWrap .ledger-table-wrap {
    padding:6px 8px 8px;
    border-color:rgba(79,103,195,.17);
    border-radius:17px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(237,242,255,.76)),var(--theme-glass, rgba(255,255,255,.5)));
}
#employeeAccountProfileWrap .ledger-table {
    border-collapse:separate;
    border-spacing:0 6px;
}
#employeeAccountProfileWrap .ledger-table th {
    padding:10px 12px;
    border:0;
    color:var(--theme-ink, #56617e);
    background:var(--theme-glass, rgba(225,233,255,.76));
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
}
#employeeAccountProfileWrap .ledger-table th:first-child { border-radius:0 10px 10px 0; }
#employeeAccountProfileWrap .ledger-table th:last-child { border-radius:10px 0 0 10px; }
#employeeAccountProfileWrap .ledger-table .ledger-col-seq { width:42px; color:var(--theme-ink, #7c86a0); text-align:center; }
#employeeAccountProfileWrap .ledger-head-label { display:inline-flex; align-items:center; gap:6px; }
#employeeAccountProfileWrap .ledger-head-label i { color:var(--theme-ink, #5974d2); font-size:14px; }
#employeeAccountProfileWrap .ledger-table tbody td {
    padding:11px 12px;
    border-top:1px solid rgba(103,124,204,.12);
    border-bottom:1px solid rgba(103,124,204,.12);
    color:var(--theme-ink, #34405c);
    background:var(--theme-glass, rgba(255,255,255,.72));
    font-size:12.5px;
}
#employeeAccountProfileWrap .ledger-table tbody td:first-child {
    border-right:1px solid rgba(103,124,204,.12);
    border-radius:0 12px 12px 0;
}
#employeeAccountProfileWrap .ledger-table tbody td:last-child {
    border-left:1px solid rgba(103,124,204,.12);
    border-radius:12px 0 0 12px;
}
#employeeAccountProfileWrap .ledger-table tbody tr { transition:transform .2s var(--ui-ease), filter .2s ease; }
#employeeAccountProfileWrap .ledger-table tbody tr:hover { background:transparent; transform:translateY(-1px); filter:drop-shadow(0 6px 10px rgba(61,76,143,.1)); }
#employeeAccountProfileWrap .ledger-table .ledger-seq {
    color:var(--theme-ink, #66718c);
    font-weight:850;
    text-align:center;
}
#employeeAccountProfileWrap .ledger-date-cell { color:var(--theme-ink, #53607d); font-weight:750; white-space:nowrap; }
#employeeAccountProfileWrap .ledger-status-badge,
#employeeAccountProfileWrap .ledger-amount-value {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:28px;
    padding:4px 8px;
    border-radius:9px;
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
}
#employeeAccountProfileWrap .ledger-status-cell.is-debt .ledger-status-badge {
    color:var(--theme-ink, #bd6046);
    background:var(--theme-glass, rgba(252,232,225,.9));
}
#employeeAccountProfileWrap .ledger-status-cell.is-paid .ledger-status-badge {
    color:var(--theme-ink, #147a51);
    background:var(--theme-glass, rgba(225,247,235,.92));
}
#employeeAccountProfileWrap .ledger-amount-cell.is-debt .ledger-amount-value {
    color:var(--theme-ink, #c8664c);
    background:var(--theme-glass, rgba(255,240,235,.82));
}
#employeeAccountProfileWrap .ledger-amount-cell.is-paid .ledger-amount-value {
    color:var(--theme-ink, #167b53);
    background:var(--theme-glass, rgba(229,248,238,.86));
}
#employeeAccountProfileWrap .ledger-amount-value i { font-size:14px; }
#employeeAccountProfileWrap .ledger-by-cell { color:var(--theme-ink, #68738f); font-size:11.5px; }
#employeeAccountProfileWrap .ledger-total-row {
    min-height:58px;
    margin-top:14px;
    padding:10px 14px;
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86));
}
@media (max-width:760px) {
    #employeeAccountProfileWrap .ledger-table-wrap { padding:5px; }
    #employeeAccountProfileWrap .ledger-table th { padding:9px 10px; }
    #employeeAccountProfileWrap .ledger-table tbody td { padding:10px; }
}

/* Customer accounts use the same ledger language as employee handovers. */
#customerProfileWrap .ledger-table-wrap {
    padding:6px 8px 8px;
    border-color:rgba(105,89,210,.18);
    border-radius:17px;
    background:linear-gradient(145deg,var(--theme-glass, rgba(244,240,255,.76)),var(--theme-glass, rgba(255,255,255,.5)));
}
#customerProfileWrap .ledger-table { border-collapse:separate; border-spacing:0 6px; }
#customerProfileWrap .ledger-table th {
    padding:10px 12px;
    border:0;
    color:var(--theme-ink, #615b7e);
    background:var(--theme-glass, rgba(235,229,255,.8));
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
}
#customerProfileWrap .ledger-table th:first-child { border-radius:0 10px 10px 0; }
#customerProfileWrap .ledger-table th:last-child { border-radius:10px 0 0 10px; }
#customerProfileWrap .ledger-table .ledger-col-seq { width:42px; color:var(--theme-ink, #7c769b); text-align:center; }
#customerProfileWrap .ledger-head-label { display:inline-flex; align-items:center; gap:6px; }
#customerProfileWrap .ledger-head-label i { color:var(--theme-ink, #725bd7); font-size:14px; }
#customerProfileWrap .ledger-table tbody td {
    padding:11px 12px;
    border-top:1px solid rgba(124,104,203,.12);
    border-bottom:1px solid rgba(124,104,203,.12);
    color:var(--theme-ink, #413c5c);
    background:var(--theme-glass, rgba(255,255,255,.74));
    font-size:12.5px;
}
#customerProfileWrap .ledger-table tbody td:first-child { border-right:1px solid rgba(124,104,203,.12); border-radius:0 12px 12px 0; }
#customerProfileWrap .ledger-table tbody td:last-child { border-left:1px solid rgba(124,104,203,.12); border-radius:12px 0 0 12px; }
#customerProfileWrap .ledger-table tbody tr { transition:transform .2s var(--ui-ease), filter .2s ease; }
#customerProfileWrap .ledger-table tbody tr:hover { background:transparent; transform:translateY(-1px); filter:drop-shadow(0 6px 10px rgba(82,64,142,.1)); }
#customerProfileWrap .ledger-table .ledger-seq { color:var(--theme-ink, #6f698a); font-weight:850; text-align:center; }
#customerProfileWrap .ledger-date-cell { color:var(--theme-ink, #5c5778); font-weight:750; white-space:nowrap; }
#customerProfileWrap .ledger-status-badge,
#customerProfileWrap .ledger-amount-value {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:28px;
    padding:4px 8px;
    border-radius:9px;
    font-size:11px;
    font-weight:850;
    white-space:nowrap;
}
#customerProfileWrap .ledger-status-cell.is-debt .ledger-status-badge { color:var(--theme-ink, #bd6046); background:var(--theme-glass, rgba(252,232,225,.9)); }
#customerProfileWrap .ledger-status-cell.is-paid .ledger-status-badge { color:var(--theme-ink, #147a51); background:var(--theme-glass, rgba(225,247,235,.92)); }
#customerProfileWrap .ledger-amount-cell.is-debt .ledger-amount-value { color:var(--theme-ink, #c8664c); background:var(--theme-glass, rgba(255,240,235,.82)); }
#customerProfileWrap .ledger-amount-cell.is-paid .ledger-amount-value { color:var(--theme-ink, #167b53); background:var(--theme-glass, rgba(229,248,238,.86)); }
#customerProfileWrap .ledger-amount-value i { font-size:14px; }
#customerProfileWrap .ledger-by-cell { color:var(--theme-ink, #716b8c); font-size:11.5px; }
#customerProfileWrap .ledger-total-row { min-height:58px; margin-top:14px; padding:10px 14px; box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86)); }
@media (max-width:760px) {
    #customerProfileWrap .ledger-table-wrap { padding:5px; }
    #customerProfileWrap .ledger-table th { padding:9px 10px; }
    #customerProfileWrap .ledger-table tbody td { padding:10px; }
}

/* ---------- employee profile: today's operational snapshot ---------- */
#view-employees .employee-operational-summary {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
    padding-top:13px;
    border-top:1px solid rgba(86,108,194,.13);
}
#view-employees .employee-operational-item {
    min-width:0;
    min-height:62px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px;
    border:1px solid rgba(91,112,197,.13);
    border-radius:13px;
    background:var(--theme-glass, rgba(255,255,255,.56));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.84));
    transition:transform .2s var(--ui-ease), box-shadow .2s ease, border-color .2s ease;
}
#view-employees .employee-operational-item:hover {
    transform:translateY(-1px);
    border-color:rgba(81,105,200,.29);
    box-shadow:0 8px 17px rgba(53,70,135,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
}
#view-employees .employee-operational-icon {
    width:31px;
    height:31px;
    flex:0 0 31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    font-size:16px;
}
#view-employees .employee-operational-item.is-status .employee-operational-icon { color:var(--theme-ink, #168158); background:rgba(27,156,103,.12); }
#view-employees .employee-operational-item.is-pump .employee-operational-icon { color:var(--theme-ink, #287ac0); background:rgba(40,122,192,.11); }
#view-employees .employee-operational-item.is-shift .employee-operational-icon { color:var(--theme-ink, #7057cc); background:rgba(112,87,204,.11); }
#view-employees .employee-operational-item.is-sales .employee-operational-icon { color:var(--theme-ink, #b87517); background:rgba(184,117,23,.12); }
#view-employees .employee-operational-item > span:last-child { min-width:0; display:grid; gap:1px; }
#view-employees .employee-operational-label { color:var(--theme-ink, #74809b); font-size:9.5px; font-weight:780; }
#view-employees .employee-operational-value {
    overflow:hidden;
    color:var(--theme-ink, #283552);
    font-size:11.5px;
    font-weight:880;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#view-employees .employee-operational-value .timer-chip { min-height:0; padding:0; color:inherit; background:transparent; font-size:inherit; }
#view-employees .employee-operational-value .timer-chip i { display:none; }
#view-employees .employee-operational-note { color:var(--theme-ink, #6f7b96); font-size:9.5px; font-weight:730; white-space:nowrap; }

/* Desktop profile metadata follows the same measured card rhythm as the
   operational snapshot below it: equal tracks and a shared 62px height. */
@media (min-width:1201px) {
    #view-employees .profile-card .profile-meta-row {
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:8px;
    }
    #view-employees .profile-card .profile-meta-item {
        min-width:0;
        min-height:62px;
        padding:8px;
    }
}
@media (max-width:1200px) {
    #view-employees .employee-operational-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px) {
    #view-employees .profile-card .profile-meta-row {
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }
    #view-employees .profile-card .profile-meta-item {
        width:100%;
        min-height:62px;
        padding:8px;
    }
    #view-employees .employee-operational-summary { grid-template-columns:1fr; }
    #view-employees .employee-profile-identity { gap:10px; }
    #view-employees .employee-profile-identity .profile-name { font-size:16px; }
    #view-employees .profile-card .profile-header-info { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .employee-operational-item { transition:none !important; }
}

/* Employee profile information language: one quiet list instead of nested
   cards. Every entry follows icon -> label -> value in the current direction. */
#view-employees #employeeProfileSummary:empty { display:none; }

#view-employees .profile-card :is(
    .profile-meta-row,
    .employee-operational-summary,
    .employee-profile-summary-slot
) {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 18px;
    margin:12px 0 0;
    padding:10px 0 0;
    border-top:1px solid color-mix(in srgb,var(--profile-tone) 13%,var(--theme-stroke, rgba(255,255,255,.72)));
}

#view-employees .profile-card :is(
    .profile-meta-item,
    .employee-operational-item,
    .employee-profile-summary-slot .employee-summary-metric
) {
    min-width:0;
    min-height:54px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:center;
    gap:9px;
    margin:0;
    padding:8px 2px;
    overflow:visible;
    border:0;
    border-bottom:1px solid color-mix(in srgb,var(--profile-tone) 9%,rgba(120,135,170,.16));
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
}

#view-employees .profile-card :is(
    .profile-meta-item,
    .employee-operational-item,
    .employee-profile-summary-slot .employee-summary-metric
)::after { display:none; }

#view-employees .profile-card :is(
    .profile-meta-icon,
    .employee-operational-icon,
    .employee-profile-summary-slot .metric-icon
) {
    grid-column:1;
    grid-row:1;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    flex-basis:38px;
    border-radius:11px;
    box-shadow:none;
    font-size:20px;
}

#view-employees .profile-card :is(
    .profile-meta-text,
    .employee-operational-item > span:last-child,
    .employee-profile-summary-slot .employee-summary-metric > div:last-child
) {
    grid-column:2;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(76px,auto) minmax(0,1fr);
    align-items:baseline;
    gap:4px 8px;
}

#view-employees .profile-card :is(
    .profile-meta-label,
    .employee-operational-label,
    .employee-profile-summary-slot .metric-label
) {
    color:var(--text2);
    font-size:10.5px;
    font-weight:740;
    white-space:nowrap;
}

#view-employees .profile-card :is(
    .profile-meta-value,
    .employee-operational-value,
    .employee-profile-summary-slot .metric-value
) {
    min-width:0;
    overflow:hidden;
    color:var(--text1);
    font-size:12px !important;
    font-weight:840;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#view-employees .profile-card .employee-operational-note {
    grid-column:1 / -1;
    color:var(--text2);
    font-size:9.5px;
}

#view-employees .profile-card .employee-profile-summary-slot {
    display:contents !important;
    margin:0;
    padding:0;
    border:0;
}

/* A postal address is the only long-form profile value. Keep it below the
   compact facts and let it use the complete information-grid width. */
#view-employees .profile-card .employee-profile-summary-slot .employee-summary-metric.is-address {
    grid-column:1 / -1;
}

#view-employees .profile-card .employee-profile-summary-slot .employee-summary-metric.is-address > div:last-child {
    grid-template-columns:minmax(76px,auto) minmax(0,1fr);
}

#view-employees .profile-card .employee-profile-summary-slot .employee-summary-metric.is-address .metric-value {
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.75;
}

#view-employees .profile-card .employee-profile-summary-slot .employee-summary-metric:hover,
#view-employees .profile-card .employee-operational-item:hover {
    border-color:color-mix(in srgb,var(--profile-tone) 9%,rgba(120,135,170,.16));
    background:transparent;
    box-shadow:none;
    transform:none;
}

html[data-theme="dark"] #view-employees .profile-card :is(
    .profile-meta-item,
    .employee-operational-item,
    .employee-profile-summary-slot .employee-summary-metric
) { background:transparent; border-color:rgba(255,255,255,.08); }

@media (max-width:1050px) {
    #view-employees .profile-card :is(.profile-meta-row,.employee-operational-summary,.employee-profile-summary-slot) {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px) {
    #view-employees .profile-card :is(.profile-meta-row,.employee-operational-summary,.employee-profile-summary-slot) {
        grid-template-columns:1fr;
        gap:0;
    }
    #view-employees .profile-card :is(.profile-meta-item,.employee-operational-item,.employee-profile-summary-slot .employee-summary-metric) {
        width:100%;
        min-height:50px;
    }
    #view-employees .profile-card .employee-profile-summary-slot .employee-summary-metric.is-address > div:last-child {
        grid-template-columns:minmax(68px,auto) minmax(0,1fr);
    }
}

/* Progressive disclosure keeps the employee profile compact on tablets and
   phones; operational cards remain immediately available. */
#view-employees .employee-profile-details-toggle { display:none; }
@media (max-width:1200px) {
    #view-employees .employee-profile-details-toggle {
        width:100%;
        min-height:44px;
        display:inline-flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        margin-top:10px;
        padding:8px 11px;
        border:1px solid rgba(83,108,210,.2);
        border-radius:13px;
        color:var(--theme-ink, #3d57ba);
        background:var(--theme-glass, rgba(255,255,255,.66));
        box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
        font:inherit;
        font-size:12px;
        font-weight:850;
        cursor:pointer;
        transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    #view-employees .employee-profile-details-toggle:hover,
    #view-employees .employee-profile-details-toggle:focus-visible {
        border-color:rgba(83,108,210,.42);
        background:rgba(83,108,210,.08);
        box-shadow:0 7px 15px rgba(58,78,169,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
        outline:none;
    }
    #view-employees .employee-profile-details-toggle > :first-child {
        width:25px;
        height:25px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:8px;
        color:#fff;
        background:linear-gradient(145deg,#8068e9,#526ce7);
        box-shadow:0 4px 10px rgba(87,91,218,.18);
        font-size:14px;
    }
    #view-employees .employee-profile-details-toggle > span { flex:1; text-align:start; }
    #view-employees .employee-profile-details-toggle .employee-profile-details-chevron { font-size:17px; }
    #view-employees .profile-card .profile-header-info > .profile-meta-row { display:none; }
    #view-employees .profile-card .profile-header-info.is-profile-details-open > .profile-meta-row {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:8px;
    }
    #view-employees .profile-card .profile-header-info.is-profile-details-open > .profile-meta-row .profile-meta-item {
        width:100%;
        min-height:62px;
        padding:8px;
    }
    #view-employees .profile-card .profile-header-info:not(.is-profile-details-open) .employee-operational-summary {
        margin-top:10px;
        padding-top:0;
        border-top:0;
    }
}
@media (max-width:540px) {
    #view-employees .profile-card .profile-header-info.is-profile-details-open > .profile-meta-row { grid-template-columns:1fr; }
}

/* Mobile employee profile: identity and portrait first, details strictly on
   demand. The taller portrait preserves more of the employee photograph. */
@media (max-width:800px) {
    #view-employees .profile-card .profile-header {
        grid-template-columns:1fr;
        gap:12px;
    }
    #view-employees .profile-card .employee-profile-photo-panel {
        order:-1;
        width:100%;
        min-height:278px;
        padding:14px;
    }
    #view-employees .profile-card .profile-avatar {
        width:172px;
        height:244px;
        flex-basis:244px;
        border-radius:26px;
    }
    #view-employees .profile-card .profile-avatar img {
        border-radius:22px;
        object-fit:cover;
        object-position:center top;
    }
    #view-employees .profile-card .profile-header-info {
        margin-top:0;
    }
    #view-employees .profile-card .employee-profile-details-toggle {
        margin-top:0;
    }
    #view-employees .profile-card .profile-header-info:not(.is-profile-details-open) > :is(
        .profile-meta-row,
        .employee-operational-summary
    ) {
        display:none !important;
    }
    #view-employees .profile-card .profile-header-info.is-profile-details-open > :is(
        .profile-meta-row,
        .employee-operational-summary
    ) {
        display:grid;
    }
}

@media (max-width:540px) {
    #view-employees .profile-card .employee-profile-photo-panel { min-height:286px; }
    #view-employees .profile-card .profile-avatar {
        width:176px;
        height:250px;
        flex-basis:250px;
    }
    #view-employees .profile-action-rail {
        width:auto;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-rows:minmax(52px,auto);
        gap:8px;
        margin:10px 4px 0;
        padding:5px;
        overflow:visible;
        scroll-snap-type:none;
    }
    #view-employees .profile-rail-btn {
        width:100%;
        min-width:0;
        min-height:52px;
        height:auto;
        flex:none;
        padding:7px 8px;
        gap:6px;
        border-radius:11px;
        font-size:11.5px;
        line-height:1.35;
        white-space:normal;
        scroll-snap-align:none;
    }
    #view-employees .profile-rail-btn > i:not(.acct-full-profile-arrow),
    #view-employees .profile-rail-btn .acct-full-profile-label > i {
        width:25px;
        height:25px;
        flex-basis:25px;
        font-size:14px;
    }
}
@media (prefers-reduced-motion:reduce) {
    #view-employees .employee-profile-details-toggle { transition:none !important; }
}

/* Desktop-only employee section navigator. These buttons keep their existing
   destinations; unlike finance/report tabs they never alter the site theme. */
@media (min-width:901px) {
    #view-employees #employeeProfileBody {
        --employee-section-tone:#61708f;
        --employee-section-tint:rgba(97,112,143,.07);
    }
    #view-employees #employeeProfileBody:has(.employee-profile-section-card.is-violet.is-active) {
        --employee-section-tone:#665fe4;
        --employee-section-tint:rgba(102,95,228,.12);
    }
    #view-employees #employeeProfileBody:has(.employee-profile-section-card.is-green.is-active) {
        --employee-section-tone:#2fa96d;
        --employee-section-tint:rgba(47,169,109,.12);
    }
    #view-employees #employeeProfileBody:has(.employee-profile-section-card.is-blue.is-active) {
        --employee-section-tone:#4f7be8;
        --employee-section-tint:rgba(79,123,232,.12);
    }
    #view-employees #employeeProfileBody:has(.employee-profile-section-card.is-rose.is-active) {
        --employee-section-tone:#d86374;
        --employee-section-tint:rgba(216,99,116,.12);
    }
    #view-employees #employeeProfileBody:has(.employee-profile-section-card.is-amber.is-active) {
        --employee-section-tone:#d69a18;
        --employee-section-tint:rgba(214,154,24,.13);
    }
    #view-employees .employee-profile-section-grid {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:8px;
        margin-top:16px;
        padding:10px;
        border:1px solid var(--theme-stroke, rgba(255,255,255,.76));
        border-radius:18px;
        background:
            radial-gradient(circle at 92% -30%,var(--employee-section-tint),transparent 44%),
            linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.72)),color-mix(in srgb,var(--employee-section-tone) 5%,var(--theme-glass, rgba(232,241,248,.52))));
        box-shadow:0 14px 30px color-mix(in srgb,var(--employee-section-tone) 9%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
        backdrop-filter:blur(16px) saturate(125%);
    }
    #view-employees .employee-profile-section-card {
        min-width:0;
        min-height:72px;
        grid-template-columns:44px minmax(0,1fr);
        align-items:center;
        gap:9px;
        padding:9px 10px;
        overflow:visible;
        border:1px solid transparent;
        border-radius:14px;
        background:transparent;
        box-shadow:none;
    }
    #view-employees .employee-profile-section-grid > .employee-profile-section-card:last-child:nth-child(odd) {
        grid-column:auto;
    }
    #view-employees .employee-profile-section-card::after {
        content:'';
        position:absolute;
        right:18px;
        bottom:3px;
        left:18px;
        height:4px;
        border-radius:999px;
        background:var(--section-card-tone);
        opacity:0;
        transform:scaleX(.55);
        transition:opacity .2s ease,transform .2s var(--ui-ease);
    }
    #view-employees .employee-profile-section-card:not(.is-active):hover,
    #view-employees .employee-profile-section-card:not(.is-active):focus-visible {
        transform:none;
        border-color:transparent;
        color:var(--text1);
        background:var(--theme-glass, rgba(255,255,255,.5));
        box-shadow:0 9px 20px rgba(49,65,118,.08),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    }
    #view-employees .employee-profile-section-card:hover::after,
    #view-employees .employee-profile-section-card:focus-visible::after,
    #view-employees .employee-profile-section-card:active::after,
    #view-employees .employee-profile-section-card.is-active::after {
        opacity:.9;
        transform:scaleX(1);
    }
    #view-employees .employee-profile-section-card.is-active {
        border-color:color-mix(in srgb,var(--section-card-tone) 48%,var(--theme-stroke, rgba(255,255,255,.76)));
        color:var(--text1);
        background:color-mix(in srgb,var(--section-card-tone) 14%,var(--theme-glass, rgba(255,255,255,.66)));
        box-shadow:0 10px 23px color-mix(in srgb,var(--section-card-tone) 16%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94));
    }
    #view-employees .employee-profile-section-icon {
        width:44px;
        height:44px;
        border-radius:13px;
        color:var(--section-card-tone);
        background:color-mix(in srgb,var(--section-card-tone) 11%,var(--theme-glass, rgba(255,255,255,.72)));
        box-shadow:none;
        font-size:23px;
    }
    #view-employees .employee-profile-section-copy { gap:0; }
    #view-employees .employee-profile-section-copy strong {
        overflow:hidden;
        font-size:15px;
        line-height:1.4;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    #view-employees .employee-profile-section-arrow { display:none; }
    #view-employees .employee-profile-tab-content {
        margin-top:16px;
        --work-tone:var(--employee-section-tone);
        --records-blue:var(--employee-section-tone);
        --section-tone:var(--employee-section-tone);
    }
    #view-employees .employee-profile-tab-content > .card,
    #view-employees .employee-profile-tab-content > .employee-profile-detail-view > .card {
        border-color:color-mix(in srgb,var(--employee-section-tone) 26%,var(--theme-stroke, rgba(255,255,255,.78))) !important;
        background:
            radial-gradient(circle at 96% 0%,var(--employee-section-tint),transparent 38%),
            linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.78)),color-mix(in srgb,var(--employee-section-tone) 6%,var(--theme-glass, rgba(226,235,249,.58)))) !important;
        box-shadow:0 16px 34px color-mix(in srgb,var(--employee-section-tone) 12%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92)) !important;
    }
    #view-employees .employee-profile-tab-content :is(
        .employee-daily-hours-card,
        .employee-salaries-card,
        .employee-handover-card,
        .employee-records-card,
        .employee-leaves-card,
        .work-records-full-view,
        .leave-records-full-view
    ) {
        --work-tone:var(--employee-section-tone) !important;
        --records-blue:var(--employee-section-tone) !important;
        --section-tone:var(--employee-section-tone) !important;
    }
    #view-employees .employee-profile-tab-content .section-title-icon > i {
        color:#fff !important;
        background:linear-gradient(145deg,color-mix(in srgb,var(--employee-section-tone) 72%,var(--theme-surface, #fff)),var(--employee-section-tone)) !important;
        box-shadow:0 7px 16px color-mix(in srgb,var(--employee-section-tone) 25%,transparent) !important;
    }
    #view-employees .employee-profile-tab-content .employee-profile-detail-view > .back-to-finance-btn,
    #view-employees .employee-profile-tab-content > .card > .profile-section-head:first-child > .back-to-finance-btn {
        display:none;
    }
    html[data-theme="dark"] #view-employees .employee-profile-section-grid {
        border-color:rgba(255,255,255,.11);
        background:
            radial-gradient(circle at 92% -30%,color-mix(in srgb,var(--employee-section-tone) 22%,transparent),transparent 44%),
            linear-gradient(135deg,rgba(35,45,60,.9),rgba(28,38,53,.8));
    }
    html[data-theme="dark"] #view-employees .employee-profile-tab-content > .card,
    html[data-theme="dark"] #view-employees .employee-profile-tab-content > .employee-profile-detail-view > .card {
        border-color:color-mix(in srgb,var(--employee-section-tone) 32%,rgba(255,255,255,.12)) !important;
        background:
            radial-gradient(circle at 96% 0%,color-mix(in srgb,var(--employee-section-tone) 20%,transparent),transparent 40%),
            linear-gradient(145deg,rgba(34,44,60,.92),rgba(27,36,50,.88)) !important;
    }
}

@media (max-width:900px) {
    #view-employees .employee-profile-section-grid.has-active-section { display:none; }
    #view-employees .employee-profile-tab-content { margin-top:0; }
}

/* Account headers use the same progressive disclosure as employee profiles
   when their content area becomes narrow beside a navigation rail. */
:is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle { display:none; }
@media (max-width:1200px) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle {
        width:100%;
        min-height:42px;
        display:inline-flex;
        align-items:center;
        justify-content:flex-start;
        gap:8px;
        margin-top:9px;
        padding:7px 10px;
        border:1px solid rgba(83,108,210,.2);
        border-radius:12px;
        color:var(--theme-ink, #3d57ba);
        background:var(--theme-glass, rgba(255,255,255,.66));
        box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.88));
        font:inherit;
        font-size:12px;
        font-weight:850;
        cursor:pointer;
        transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle:hover,
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle:focus-visible {
        border-color:rgba(83,108,210,.42);
        background:rgba(83,108,210,.08);
        box-shadow:0 7px 15px rgba(58,78,169,.1), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
        outline:none;
    }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle > :first-child {
        width:24px;
        height:24px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:8px;
        color:#fff;
        background:linear-gradient(145deg,#8068e9,#526ce7);
        box-shadow:0 4px 10px rgba(87,91,218,.18);
        font-size:14px;
    }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle > span { flex:1; text-align:start; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle .account-profile-details-chevron { font-size:17px; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-info > .profile-meta-row { display:none; }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-info.is-account-details-open > .profile-meta-row {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        margin-top:8px;
    }
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-info.is-account-details-open > .profile-meta-row .profile-meta-item {
        width:100%;
        min-height:54px;
        padding:7px 8px;
    }
}
@media (max-width:540px) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .profile-header-info.is-account-details-open > .profile-meta-row { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    :is(#employeeAccountProfileWrap, #customerProfileWrap) .account-profile-details-toggle { transition:none !important; }
}

/* On RTL mobile cards, inline-end is the physical left edge. The row padding
   keeps amount chips 10px+ away from that edge instead of sticking to it. */
@media (max-width:700px) {
    #view-employees .work-records-full-view .work-record-amount {
        justify-self:end;
        margin-inline-end:0;
    }
    #view-employees .employee-salaries-card .salary-payment-list-amount {
        justify-self:end;
        margin-inline-end:0;
    }
}
@media (max-width:620px) {
    #view-employees :is(.employee-daily-hours-card, .employee-records-card) .work-record-amount {
        justify-self:end;
        margin-inline-end:0;
    }
}

/* Keep the monetary value on the title line in compact RTL cards.  The final
   grid track is physically left in RTL, while the card padding preserves its
   safe offset from the edge. */
@media (max-width:700px) {
    #view-employees .employee-salaries-card .salary-payment-list-item {
        grid-template-columns:25px 38px minmax(0,1fr) max-content;
        align-items:start;
    }
    #view-employees .employee-salaries-card .salary-payment-list-main {
        grid-column:3;
        grid-row:1;
    }
    #view-employees .employee-salaries-card .salary-payment-list-status {
        grid-column:3;
        grid-row:2;
        justify-self:start;
    }
    #view-employees .employee-salaries-card .salary-payment-list-amount {
        grid-column:4;
        grid-row:1 / span 2;
        align-self:start;
        min-width:0;
    }

    #view-employees .work-records-full-view .work-record-row {
        grid-template-columns:27px 39px minmax(0,1fr) max-content;
    }
    #view-employees .work-records-full-view .work-record-amount {
        grid-column:4;
        grid-row:1;
        align-self:start;
    }
}

@media (max-width:620px) {
    #view-employees .employee-daily-hours-card .work-record-row {
        grid-template-columns:24px 36px minmax(0,1fr) max-content;
    }
    #view-employees .employee-daily-hours-card .work-record-amount {
        grid-column:4;
        grid-row:1;
        align-self:start;
        min-width:0;
    }

    #view-employees .employee-records-card .work-record-row {
        grid-template-columns:24px 36px minmax(0,1fr) max-content;
    }
    #view-employees .employee-records-card .work-record-amount {
        grid-column:4;
        grid-row:1;
        align-self:start;
        min-width:0;
    }
}

/* ---------- customer account: employee-profile visual language ---------- */
#customerProfileWrap { --customer-profile-tone:#6d5ce8; --customer-profile-tint:rgba(109,92,232,.1); }
#customerProfileWrap .customer-account-profile-card {
    padding:20px;
    border-color:color-mix(in srgb,var(--customer-profile-tone) 25%,var(--theme-stroke, rgba(255,255,255,.82)));
    background:radial-gradient(circle at 96% 0%,color-mix(in srgb,var(--customer-profile-tone) 13%,transparent),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.8)),var(--theme-glass, rgba(235,240,255,.62)));
}
#customerProfileWrap .customer-profile-status-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    margin:0 4px 12px; padding:0 0 12px;
    border-bottom:1px solid color-mix(in srgb,var(--customer-profile-tone) 13%,rgba(120,135,170,.15));
}
#customerProfileWrap .customer-profile-identity-copy { min-width:0; }
#customerProfileWrap .customer-profile-status-row .profile-name { margin:0; font-size:19px; }
#customerProfileWrap .customer-profile-status-row .profile-id { margin-top:4px; }
#customerProfileWrap .customer-profile-balance {
    min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
    border:1px solid transparent; border-radius:12px; font-size:12px; font-weight:850; white-space:nowrap;
}
#customerProfileWrap .customer-profile-balance i { font-size:18px; }
#customerProfileWrap .customer-profile-balance.is-debt { color:var(--theme-ink, #b95740); border-color:rgba(217,102,82,.22); background:var(--theme-glass, rgba(255,234,228,.76)); }
#customerProfileWrap .customer-profile-balance.is-credit { color:var(--theme-ink, #237f58); border-color:rgba(47,169,109,.22); background:var(--theme-glass, rgba(226,248,236,.76)); }
#customerProfileWrap .customer-profile-balance.is-settled { color:var(--theme-ink, #4962bd); border-color:rgba(79,113,232,.2); background:var(--theme-glass, rgba(231,237,255,.76)); }
#customerProfileWrap .customer-account-profile-card .profile-header {
    display:grid; grid-template-columns:minmax(0,1fr) 218px; align-items:stretch; gap:18px; min-height:0; padding:0;
}
#customerProfileWrap .customer-account-profile-card .profile-header-main,
#customerProfileWrap .customer-account-profile-card .profile-header-info { min-width:0; width:100%; }
#customerProfileWrap .customer-profile-photo-panel {
    min-height:250px; display:flex; align-items:center; justify-content:center; padding:14px;
    border:1px solid color-mix(in srgb,var(--customer-profile-tone) 14%,var(--theme-stroke, rgba(255,255,255,.8))); border-radius:20px; background:var(--theme-glass, rgba(255,255,255,.38));
}
#customerProfileWrap .customer-profile-photo-panel .profile-avatar {
    width:164px; height:220px; flex-basis:220px; border-radius:25px; border:3px solid var(--theme-stroke, rgba(255,255,255,.9));
    box-shadow:0 13px 25px color-mix(in srgb,var(--customer-profile-tone) 20%,transparent); font-size:38px;
}
#customerProfileWrap .customer-profile-photo-panel .profile-avatar img {
    width:100%; height:100%; border-radius:21px; object-fit:cover; object-position:center top;
}
#customerProfileWrap .customer-account-profile-card :is(.profile-meta-row,.customer-profile-addresses) {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; margin:0; padding:0;
}
#customerProfileWrap .customer-account-profile-card .customer-profile-addresses { grid-template-columns:1fr; margin-top:10px; padding-top:2px; }
#customerProfileWrap .customer-account-profile-card :is(.profile-meta-item,.customer-address-item) {
    min-width:0; min-height:58px; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:9px;
    margin:0; padding:9px 2px; overflow:visible; border:0;
    border-bottom:1px solid color-mix(in srgb,var(--customer-profile-tone) 9%,rgba(120,135,170,.16));
    border-radius:0; background:transparent; box-shadow:none;
}
#customerProfileWrap .customer-account-profile-card .profile-meta-icon { width:38px; height:38px; border-radius:11px; font-size:20px; }
#customerProfileWrap .customer-national-id-icon { color:var(--theme-ink, #3f6ecb); background:rgba(79,123,232,.12); }
#customerProfileWrap .customer-phone-icon { color:var(--theme-ink, #288b62); background:rgba(47,169,109,.12); }
#customerProfileWrap .customer-referrer-icon { color:var(--theme-ink, #6d5ce8); background:rgba(109,92,232,.12); }
#customerProfileWrap .customer-credit-icon { color:var(--theme-ink, #be7c12); background:rgba(212,147,37,.13); }
#customerProfileWrap .customer-period-icon { color:var(--theme-ink, #2f75bd); background:rgba(55,139,214,.11); }
#customerProfileWrap .customer-shop-icon { color:var(--theme-ink, #c07b10); background:rgba(212,147,37,.13); }
#customerProfileWrap .customer-home-icon { color:var(--theme-ink, #4f71e8); background:rgba(79,113,232,.11); }
#customerProfileWrap .customer-account-profile-card .profile-meta-text {
    min-width:0; display:grid; grid-template-columns:minmax(86px,auto) minmax(0,1fr); align-items:baseline; gap:5px 9px;
}
#customerProfileWrap .customer-account-profile-card .profile-meta-label { color:var(--text2); font-size:11px; font-weight:750; white-space:nowrap; }
#customerProfileWrap .customer-account-profile-card .profile-meta-value {
    min-width:0; overflow:hidden; color:var(--text1); font-size:12.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap;
}
#customerProfileWrap .customer-address-item .profile-meta-value {
    overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.75;
}
#customerProfileWrap .customer-profile-actions {
    width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px;
}
#customerProfileWrap .customer-profile-actions .profile-rail-btn { min-height:50px; justify-content:center; font-size:13px; }
#customerProfileWrap .customer-payment-btn {
    color:#fff; border-color:transparent; background:linear-gradient(135deg,#6d5ce8,#536fe4);
    box-shadow:0 8px 17px rgba(93,85,217,.22),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.28));
}
html[data-theme="dark"] #customerProfileWrap .customer-account-profile-card {
    border-color:rgba(151,136,255,.22);
    background:radial-gradient(circle at 96% 0%,rgba(109,92,232,.18),transparent 38%),linear-gradient(145deg,rgba(34,44,60,.94),rgba(27,36,50,.88));
}
html[data-theme="dark"] #customerProfileWrap .customer-profile-photo-panel { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.035); }
html[data-theme="dark"] #customerProfileWrap .customer-account-profile-card :is(.profile-meta-item,.customer-address-item) { border-color:rgba(255,255,255,.08); background:transparent; }
@media (max-width:1200px) {
    #customerProfileWrap .customer-account-profile-card .profile-header { grid-template-columns:minmax(0,1fr) 190px; }
    #customerProfileWrap .customer-account-profile-card .profile-header-info:not(.is-account-details-open) > :is(.profile-meta-row,.customer-profile-addresses) { display:none; }
    #customerProfileWrap .customer-account-profile-card .profile-header-info.is-account-details-open > :is(.profile-meta-row,.customer-profile-addresses) { display:grid; }
    #customerProfileWrap .customer-account-profile-card .profile-header-info.is-account-details-open > .profile-meta-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    #customerProfileWrap .customer-profile-status-row { flex-wrap:wrap; }
    #customerProfileWrap .customer-profile-balance { white-space:normal; }
    #customerProfileWrap .customer-account-profile-card .profile-header { grid-template-columns:1fr; gap:12px; }
    #customerProfileWrap .customer-profile-photo-panel { order:-1; min-height:278px; }
    #customerProfileWrap .customer-profile-photo-panel .profile-avatar { width:172px; height:244px; flex-basis:244px; }
    #customerProfileWrap .customer-profile-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px) {
    #customerProfileWrap .customer-account-profile-card { padding:13px; }
    #customerProfileWrap .customer-profile-status-row .profile-name { font-size:16px; }
    #customerProfileWrap .customer-account-profile-card .profile-header-info.is-account-details-open > .profile-meta-row { grid-template-columns:1fr; }
    #customerProfileWrap .customer-account-profile-card .profile-meta-text { grid-template-columns:minmax(76px,auto) minmax(0,1fr); }
    #customerProfileWrap .customer-profile-photo-panel { min-height:286px; }
    #customerProfileWrap .customer-profile-photo-panel .profile-avatar { width:176px; height:250px; flex-basis:250px; }
    #customerProfileWrap .customer-profile-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #customerProfileWrap .customer-profile-actions .profile-rail-btn { min-width:0; padding-inline:8px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
    #customerProfileWrap :is(.customer-profile-balance,.customer-profile-photo-panel .profile-avatar,.customer-profile-actions .profile-rail-btn) { animation:none !important; transition:none !important; }
}

/* ---------- employee account: full profile-aligned identity card ---------- */
#employeeAccountProfileWrap { --employee-account-modern-tone:#4f71e8; }
#employeeAccountProfileWrap .employee-account-profile-card {
    padding:20px;
    min-height:0;
    border-color:color-mix(in srgb,var(--employee-account-modern-tone) 25%,var(--theme-stroke, rgba(255,255,255,.82)));
    background:radial-gradient(circle at 96% 0%,rgba(79,113,232,.13),transparent 38%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.8)),var(--theme-glass, rgba(235,240,255,.62)));
}
#employeeAccountProfileWrap .employee-account-modern-status-row {
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    margin:0 4px 12px; padding:0 0 12px;
    border-bottom:1px solid color-mix(in srgb,var(--employee-account-modern-tone) 13%,rgba(120,135,170,.15));
}
#employeeAccountProfileWrap .account-profile-identity-copy { min-width:0; }
#employeeAccountProfileWrap .employee-account-modern-status-row .profile-name { margin:0; font-size:19px; }
#employeeAccountProfileWrap .employee-account-modern-status-row .profile-id { margin-top:4px; }
#employeeAccountProfileWrap .employee-account-status-group { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:8px; }
#employeeAccountProfileWrap .employee-account-period-badge,
#employeeAccountProfileWrap .account-profile-balance {
    min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
    border:1px solid rgba(79,113,232,.2); border-radius:12px; color:var(--theme-ink, #4962bd);
    background:var(--theme-glass, rgba(231,237,255,.76)); font-size:12px; font-weight:850; white-space:nowrap;
}
#employeeAccountProfileWrap :is(.employee-account-period-badge,.account-profile-balance) i { font-size:18px; }
#employeeAccountProfileWrap .account-profile-balance.is-debt { color:var(--theme-ink, #b95740); border-color:rgba(217,102,82,.22); background:var(--theme-glass, rgba(255,234,228,.76)); }
#employeeAccountProfileWrap .account-profile-balance.is-credit { color:var(--theme-ink, #237f58); border-color:rgba(47,169,109,.22); background:var(--theme-glass, rgba(226,248,236,.76)); }
#employeeAccountProfileWrap .account-profile-balance.is-settled { color:var(--theme-ink, #4962bd); border-color:rgba(79,113,232,.2); background:var(--theme-glass, rgba(231,237,255,.76)); }
#employeeAccountProfileWrap .employee-account-profile-card .profile-header {
    display:grid; grid-template-columns:minmax(0,1fr) 218px; align-items:stretch; gap:18px; min-height:0; padding:0;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-header-main,
#employeeAccountProfileWrap .employee-account-profile-card .profile-header-info { min-width:0; width:100%; }
#employeeAccountProfileWrap .employee-account-photo-panel {
    min-height:250px; display:flex; align-items:center; justify-content:center; padding:14px;
    border:1px solid rgba(79,113,232,.14); border-radius:20px; background:var(--theme-glass, rgba(255,255,255,.38));
}
#employeeAccountProfileWrap .employee-account-photo-panel .profile-avatar {
    width:164px; height:220px; flex-basis:220px; border-radius:25px; border:3px solid var(--theme-stroke, rgba(255,255,255,.9));
    box-shadow:0 13px 25px rgba(79,113,232,.2); font-size:38px;
}
#employeeAccountProfileWrap .employee-account-photo-panel .profile-avatar img {
    width:100%; height:100%; border-radius:21px; object-fit:cover; object-position:center top;
}
#employeeAccountProfileWrap .employee-account-profile-card :is(.profile-meta-row,.employee-account-addresses) {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 18px; margin:0; padding:0;
}
#employeeAccountProfileWrap .employee-account-profile-card .employee-account-addresses { grid-template-columns:1fr; margin-top:10px; padding-top:2px; }
#employeeAccountProfileWrap .employee-account-profile-card :is(.profile-meta-item,.employee-account-address-item) {
    min-width:0; min-height:58px; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:9px;
    margin:0; padding:9px 2px; overflow:visible; border:0;
    border-bottom:1px solid color-mix(in srgb,var(--employee-account-modern-tone) 9%,rgba(120,135,170,.16));
    border-radius:0; background:transparent; box-shadow:none;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-icon { width:38px; height:38px; border-radius:11px; font-size:20px; }
#employeeAccountProfileWrap .employee-account-national-icon { color:var(--theme-ink, #3f6ecb); background:rgba(79,123,232,.12); }
#employeeAccountProfileWrap .employee-account-phone-icon { color:var(--theme-ink, #288b62); background:rgba(47,169,109,.12); }
#employeeAccountProfileWrap .employee-account-duty-icon { color:var(--theme-ink, #7057cc); background:rgba(112,87,204,.11); }
#employeeAccountProfileWrap .employee-account-hire-icon { color:var(--theme-ink, #288b62); background:rgba(47,169,109,.12); }
#employeeAccountProfileWrap .employee-account-salary-icon { color:var(--theme-ink, #237f58); background:rgba(47,169,109,.12); }
#employeeAccountProfileWrap .employee-account-number-icon { color:var(--theme-ink, #3f6ecb); background:rgba(79,123,232,.12); }
#employeeAccountProfileWrap .employee-account-address-icon { color:var(--theme-ink, #be7c12); background:rgba(212,147,37,.13); }
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-text {
    min-width:0; display:grid; grid-template-columns:minmax(86px,auto) minmax(0,1fr); align-items:baseline; gap:5px 9px;
}
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-label { color:var(--text2); font-size:11px; font-weight:750; white-space:nowrap; }
#employeeAccountProfileWrap .employee-account-profile-card .profile-meta-value {
    min-width:0; overflow:hidden; color:var(--text1); font-size:12.5px; font-weight:850; text-overflow:ellipsis; white-space:nowrap;
}
#employeeAccountProfileWrap .employee-account-address-item .profile-meta-value {
    overflow:visible; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; line-height:1.75;
}
#employeeAccountProfileWrap .employee-account-modern-actions {
    width:100%; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px;
}
#employeeAccountProfileWrap .employee-account-modern-actions .profile-rail-btn {
    width:100%; min-height:50px; justify-content:center; font-size:13px;
}
html[data-theme="dark"] #employeeAccountProfileWrap .employee-account-profile-card {
    border-color:rgba(112,139,244,.22);
    background:radial-gradient(circle at 96% 0%,rgba(79,113,232,.18),transparent 38%),linear-gradient(145deg,rgba(34,44,60,.94),rgba(27,36,50,.88));
}
html[data-theme="dark"] #employeeAccountProfileWrap .employee-account-photo-panel { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.035); }
html[data-theme="dark"] #employeeAccountProfileWrap .employee-account-profile-card :is(.profile-meta-item,.employee-account-address-item) { border-color:rgba(255,255,255,.08); background:transparent; }
@media (max-width:1200px) {
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header { grid-template-columns:minmax(0,1fr) 190px; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header-info:not(.is-account-details-open) > :is(.profile-meta-row,.employee-account-addresses) { display:none; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header-info.is-account-details-open > :is(.profile-meta-row,.employee-account-addresses) { display:grid; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header-info.is-account-details-open > .profile-meta-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    #employeeAccountProfileWrap .employee-account-modern-status-row { flex-wrap:wrap; }
    #employeeAccountProfileWrap .employee-account-status-group { width:100%; }
    #employeeAccountProfileWrap :is(.employee-account-period-badge,.account-profile-balance) { white-space:normal; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header { grid-template-columns:1fr; gap:12px; }
    #employeeAccountProfileWrap .employee-account-photo-panel { order:-1; min-height:278px; }
    #employeeAccountProfileWrap .employee-account-photo-panel .profile-avatar { width:172px; height:244px; flex-basis:244px; }
    #employeeAccountProfileWrap .employee-account-modern-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:540px) {
    #employeeAccountProfileWrap .employee-account-profile-card { padding:13px; }
    #employeeAccountProfileWrap .employee-account-modern-status-row .profile-name { font-size:16px; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-header-info.is-account-details-open > .profile-meta-row { grid-template-columns:1fr; }
    #employeeAccountProfileWrap .employee-account-profile-card .profile-meta-text { grid-template-columns:minmax(76px,auto) minmax(0,1fr); }
    #employeeAccountProfileWrap .employee-account-photo-panel { min-height:286px; }
    #employeeAccountProfileWrap .employee-account-photo-panel .profile-avatar { width:176px; height:250px; flex-basis:250px; }
    #employeeAccountProfileWrap .employee-account-modern-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    #employeeAccountProfileWrap .employee-account-modern-actions .profile-rail-btn { min-width:0; padding-inline:8px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
    #employeeAccountProfileWrap :is(.account-profile-balance,.employee-account-photo-panel .profile-avatar,.employee-account-modern-actions .profile-rail-btn) { animation:none !important; transition:none !important; }
}

/* Employee account header — keep the customer-profile composition stable.
   This intentionally comes last so legacy generic profile rules cannot turn
   the action row back into a narrow rail or leave unused space in the card. */
#employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-profile-card {
    display:block;
    min-height:0;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-modern-status-row {
    width:auto;
    align-items:center;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .profile-header {
    width:100%;
    grid-template-columns:minmax(0,1fr) 218px;
    align-items:stretch;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .profile-header-main,
#employeeAccountProfileWrap #employeeAccountProfileHeader .profile-header-info {
    min-height:0;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-photo-panel {
    width:218px;
    min-height:250px;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-modern-actions {
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:10px;
    margin:14px 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
#employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-modern-actions .profile-rail-btn {
    width:100%;
    min-width:0;
    min-height:50px;
    margin:0;
    justify-content:center;
}

@media (max-width:1200px) {
    #employeeAccountProfileWrap #employeeAccountProfileHeader .profile-header {
        grid-template-columns:minmax(0,1fr) 190px;
    }
    #employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-photo-panel { width:190px; }
}
@media (max-width:800px) {
    #employeeAccountProfileWrap #employeeAccountProfileHeader .profile-header { grid-template-columns:1fr; }
    #employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-photo-panel {
        width:100%;
        order:-1;
    }
}
@media (max-width:420px) {
    #employeeAccountProfileWrap #employeeAccountProfileHeader .employee-account-modern-actions {
        grid-template-columns:1fr;
    }
}

/* Unified operational records: readable at a glance for sales, journals,
   employee history, expenses, cash custody, and report timelines. */
#mainContent :is(.work-record-row,.activity-row) {
    transition:transform .2s var(--ui-ease),border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
#mainContent .fade-in-item:is(.work-record-row,.history-entry),
#mainContent .fade-in-item > .activity-row {
    animation:recordRowReveal .34s var(--ui-ease) both;
}
#mainContent :is(.work-record-row,.activity-row):hover {
    transform:translateY(-2px);
}
#mainContent .work-record-title,
#mainContent .activity-row-text,
#mainContent .semantic-record .activity-row-text {
    color:var(--text1);
    font-size:15.5px;
    font-weight:820;
    line-height:1.65;
    letter-spacing:-.01em;
}
#mainContent :is(.work-record-time,.activity-row-time,.activity-row-date) {
    font-size:13px;
    font-weight:720;
    line-height:1.55;
}
#mainContent .work-record-amount {
    font-size:14px;
    font-weight:880;
    line-height:1.45;
}
#mainContent :is(.work-record-icon,.activity-row-icon) {
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:14px;
    box-shadow:0 7px 16px color-mix(in srgb,currentColor 16%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.52));
    transition:transform .22s var(--ui-ease),box-shadow .22s ease,filter .22s ease;
}
#mainContent :is(.work-record-icon,.activity-row-icon) i {
    font-size:21px;
    line-height:1;
}
#mainContent :is(.work-record-row,.activity-row):hover :is(.work-record-icon,.activity-row-icon) {
    transform:translateY(-1px) scale(1.06);
    filter:saturate(1.08);
}
#mainContent .semantic-record-badge {
    min-height:25px;
    padding:4px 9px;
    font-size:12px;
    font-weight:850;
}

@keyframes recordRowReveal {
    from { opacity:0; transform:translateY(9px) scale(.985); }
    to { opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:640px) {
    #mainContent .work-record-title,
    #mainContent .activity-row-text,
    #mainContent .semantic-record .activity-row-text { font-size:14.5px; line-height:1.7; }
    #mainContent :is(.work-record-time,.activity-row-time,.activity-row-date) { font-size:12.5px; }
    #mainContent .work-record-amount { font-size:13.5px; }
    #mainContent :is(.work-record-icon,.activity-row-icon) { width:40px; height:40px; flex-basis:40px; border-radius:12px; }
    #mainContent :is(.work-record-icon,.activity-row-icon) i { font-size:20px; }
}

@media (prefers-reduced-motion:reduce) {
    #mainContent .fade-in-item:is(.work-record-row,.history-entry),
    #mainContent .fade-in-item > .activity-row { animation:none !important; }
    #mainContent :is(.work-record-row,.activity-row,.work-record-icon,.activity-row-icon) { transition:none !important; }
    #mainContent :is(.work-record-row,.activity-row):hover,
    #mainContent :is(.work-record-row,.activity-row):hover :is(.work-record-icon,.activity-row-icon) { transform:none !important; }
}

/* Final scoped cascade: financial and people record typography must win over
   legacy view-specific rules declared throughout this stylesheet. */
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-row {
    min-height:72px;
    grid-template-columns:29px 44px minmax(0,1fr) auto;
    gap:11px;
    padding:11px 13px;
}
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon { width:44px; height:44px; border-radius:14px; }
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon i { font-size:21px; }
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-title { font-size:15.5px; font-weight:820; line-height:1.65; }
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-time { font-size:13px; font-weight:720; line-height:1.55; }
:is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-amount { font-size:14px; font-weight:880; }
:is(#view-sales-details,#view-expenses-details) .sd-buyer-name { font-size:15px; font-weight:820; line-height:1.55; }
:is(#view-sales-details,#view-expenses-details) .sd-buyer-meta { font-size:12.5px; line-height:1.55; }
:is(#view-sales-details,#view-expenses-details) :is(.sd-buyer-value,.sd-buyer-amount) { font-size:14px; font-weight:850; }

#view-employees #employeesListWrap .emp-row { min-height:86px; padding:12px 14px; animation:recordRowReveal .34s var(--ui-ease) both; }
#view-employees #employeesListWrap .emp-row-name { font-size:16px; font-weight:850; line-height:1.5; }
#view-employees #employeesListWrap .emp-row-meta-item { min-height:32px; margin-top:0; font-size:12.5px; line-height:1.55; }
#view-employees #employeesListWrap .emp-row-status { min-height:36px; margin-top:0; padding:7px 11px; font-size:12.5px; }
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-title { font-size:15.5px; font-weight:820; line-height:1.65; }
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-time { font-size:13px; }
#view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-icon { width:44px; height:44px; flex-basis:44px; }

:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) { min-height:82px; padding:12px 14px; animation:recordRowReveal .34s var(--ui-ease) both; }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-avatar { width:48px; height:48px; font-size:20px; }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-name { font-size:16px; font-weight:850; line-height:1.5; }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-status { font-size:13px; line-height:1.55; }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .balance-pill { min-height:34px; font-size:13px; font-weight:850; }
:is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .balance-pill i { font-size:16px; }

:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr { animation:ledgerRecordReveal .3s var(--ui-ease) both; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td { padding-block:12px; font-size:13.5px; line-height:1.65; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td:nth-child(4) { font-size:14.5px; font-weight:760; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) :is(.ledger-amount-value,.ledger-status-cell) { font-size:13.5px; font-weight:850; }
:is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody i { font-size:16px; }

@media (max-width:640px) {
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-row { grid-template-columns:25px 40px minmax(0,1fr); gap:9px; padding:10px; }
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-icon { width:40px; height:40px; }
    :is(#view-sales,#view-sales-details,#view-expenses,#view-expenses-details) .work-record-list .work-record-title,
    #view-employees :is(.work-records-full-view,.employee-daily-hours-card,.employee-records-card) .work-record-title { font-size:14.5px; }
    #view-employees #employeesListWrap .emp-row-name,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-name { font-size:15px; }
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee) .employee-avatar { width:44px; height:44px; }
    :is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody td { font-size:13px; }
}

@media (prefers-reduced-motion:reduce) {
    :is(#view-sales-details,#view-expenses-details) .sd-buyer-row,
    #view-employees #employeesListWrap .emp-row,
    :is(#view-customers,#view-employee-accounts) :is(.account-entry--customer,.account-entry--employee),
    :is(#customerProfileWrap,#employeeAccountProfileWrap) .ledger-table tbody tr { animation:none !important; transition:none !important; }
}

/* Public document identity and correction audit chain */
.document-number-badge {
    display:flex;
    align-items:center;
    gap:9px;
    width:fit-content;
    max-width:100%;
    min-height:42px;
    margin-block:8px;
    padding:8px 12px;
    border:1px solid color-mix(in srgb,var(--accent-solid) 25%,transparent);
    border-radius:12px;
    color:var(--accent-solid);
    background:color-mix(in srgb,var(--accent-solid) 8%,var(--card));
    box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.48));
}
.document-number-badge > i { flex:0 0 auto; font-size:19px; }
.document-number-badge > span { color:var(--text2); font-size:12px; font-weight:750; }
.document-number-badge > bdi {
    color:var(--text1);
    font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
    font-size:14px;
    font-weight:850;
    letter-spacing:.045em;
    overflow-wrap:anywhere;
}
.document-number-badge.is-compact { min-height:29px; margin-block:5px 0; padding:4px 8px; gap:6px; border-radius:9px; }
.document-number-badge.is-compact > i { font-size:15px; }
.document-number-badge.is-compact > span { font-size:10.5px; }
.document-number-badge.is-compact > bdi { font-size:11.5px; }
.tracking-code-badge {
    display:flex;
    align-items:center;
    gap:7px;
    width:fit-content;
    min-height:32px;
    margin-block:6px;
    padding:5px 9px;
    border:1px dashed rgba(74,91,128,.3);
    border-radius:10px;
    color:var(--text2);
    background:var(--theme-glass, rgba(255,255,255,.38));
}
.tracking-code-badge i { font-size:16px; }
.tracking-code-badge span { font-size:11px; font-weight:750; }
.tracking-code-badge bdi { color:var(--text1); font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:12px; font-weight:800; letter-spacing:.04em; }
html[data-theme="dark"] .tracking-code-badge { background:rgba(255,255,255,.035); }
.correction-document-chain {
    margin-block:12px;
    padding:12px;
    border:1px solid rgba(118,86,217,.24);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(118,86,217,.09),var(--theme-glass, rgba(255,255,255,.58)));
}
.correction-document-chain > header { display:flex; align-items:center; gap:7px; margin-bottom:9px; color:var(--theme-ink, #7656D9); font-size:13px; font-weight:850; }
.correction-document-chain > header i { font-size:18px; }
.correction-document-chain > div { display:grid; gap:7px; }
.correction-chain-item {
    display:grid;
    grid-template-columns:minmax(130px,.65fr) minmax(0,1fr);
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:7px 10px;
    border-radius:10px;
    background:var(--theme-glass, rgba(255,255,255,.68));
}
.correction-chain-item > span { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; }
.correction-chain-item > bdi { font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13px; font-weight:850; letter-spacing:.035em; overflow-wrap:anywhere; }
.correction-chain-item.is-original > span { color:var(--theme-ink, #7656D9); }
.correction-chain-item.is-reversal > span { color:var(--theme-ink, #D94F4F); }
.correction-chain-item.is-replacement > span { color:var(--theme-ink, #198A61); }
html[data-theme="dark"] .correction-document-chain { background:linear-gradient(145deg,rgba(118,86,217,.18),rgba(23,31,44,.84)); }
html[data-theme="dark"] .correction-chain-item { background:rgba(255,255,255,.045); }
.receipt .correction-document-chain,.pro-receipt .document-number-badge { color:var(--theme-ink, #111); background:var(--theme-surface, #f5f5f5); border-color:#aaa; box-shadow:none; }
.receipt .correction-chain-item { background:var(--theme-surface, #fff); border:1px solid var(--theme-stroke, #ddd); }

@media (max-width:640px) {
    .document-number-badge { width:100%; align-items:flex-start; flex-wrap:wrap; }
    .document-number-badge > bdi { width:100%; padding-inline-start:27px; font-size:13px; }
    .document-number-badge.is-compact > bdi { padding-inline-start:21px; font-size:11px; }
    .correction-chain-item { grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion:reduce) {
    .document-number-badge,.correction-document-chain { animation:none !important; transition:none !important; }
}
.employee-settlement-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;border-inline-start:1px solid var(--border)}.employee-settlement-card>div{display:flex;align-items:center;gap:13px}.employee-settlement-card h2,.employee-settlement-card p{margin:0}.employee-settlement-card small{color:var(--text2)}.employee-settlement-card h2{font-size:17px;margin:3px 0}.employee-settlement-card p{color:var(--text2);font-size:13px}.employee-settlement-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--warning-bg);color:var(--warning);font-size:23px}@media(max-width:640px){.employee-settlement-card{align-items:stretch;flex-direction:column}.employee-settlement-card .btn{width:100%;min-height:44px}}
.handover-confirm-modal{width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 30px);overflow:auto}.handover-confirm-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}.handover-confirm-head>span{display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:17px;background:var(--accent-tint-bg);color:var(--accent-solid);font-size:26px}.handover-confirm-head small,.handover-confirm-head h3,.handover-confirm-head p{display:block;margin:0}.handover-confirm-head small{color:var(--accent-solid);font-weight:850}.handover-confirm-head p{margin-top:4px;color:var(--text2);font-size:13px}.handover-confirm-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.handover-confirm-summary>div{display:grid;gap:7px;padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--panel-2)}.handover-confirm-summary small{color:var(--text2);font-size:12px}.handover-confirm-summary strong{font-size:18px}.handover-confirm-summary input{width:100%;box-sizing:border-box;min-height:45px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text1);padding:0 10px;font:800 17px Arial,sans-serif}.handover-confirm-summary .is-short{border-color:color-mix(in srgb,var(--danger) 45%,var(--border));background:var(--danger-bg);color:var(--danger)}.handover-confirm-summary .is-over{border-color:color-mix(in srgb,var(--success) 45%,var(--border));background:var(--success-bg);color:var(--success)}.handover-shortage-panel{padding:15px;border:1px solid color-mix(in srgb,var(--warning) 40%,var(--border));border-radius:16px;background:color-mix(in srgb,var(--warning-bg) 60%,var(--panel))}.handover-shortage-panel[hidden]{display:none}.handover-resolution-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.handover-resolution-options label{cursor:pointer}.handover-resolution-options input{position:absolute;opacity:0;pointer-events:none}.handover-resolution-options span{display:grid;grid-template-columns:28px 1fr;gap:2px 7px;min-height:72px;padding:12px;border:2px solid var(--border);border-radius:13px;background:var(--panel)}.handover-resolution-options i{grid-row:1/3;font-size:22px;color:var(--text2)}.handover-resolution-options small{color:var(--text2);font-size:11px}.handover-resolution-options input:checked+span{border-color:var(--accent-solid);background:var(--accent-tint-bg)}.handover-resolution-options input:checked+span i{color:var(--accent-solid)}.handover-shift-permission{display:flex;align-items:flex-start;gap:10px;margin-top:13px;padding:12px;border-radius:13px;background:var(--panel);cursor:pointer}.handover-shift-permission input{width:19px;height:19px;margin-top:2px;accent-color:var(--success)}.handover-shift-permission span{display:grid}.handover-shift-permission small{color:var(--text2);font-size:11px}@media(max-width:650px){.handover-confirm-summary,.handover-resolution-options{grid-template-columns:1fr}}

/* Main profile companions — aligned with the redesigned employee access surface. */
.till-role-settings-card,.responsibility-definitions-card{border-color:rgba(94,110,223,.2);border-radius:24px;background:radial-gradient(circle at 100% 0%,rgba(126,101,232,.17),transparent 34%),linear-gradient(145deg,var(--theme-glass, rgba(255,255,255,.9)),var(--theme-glass, rgba(229,234,250,.69)));box-shadow:0 24px 54px rgba(37,49,103,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96))}
.till-role-settings-card{padding:26px}.till-role-hero,.responsibility-hero{display:flex;align-items:center;gap:17px;margin:-2px 0 20px;padding:3px 2px 18px;border-bottom:1px solid rgba(91,108,221,.16)}
.till-role-hero-icon,.responsibility-hero-icon{width:64px;height:64px;display:grid;flex:0 0 64px;place-items:center;border:1px solid var(--theme-stroke, rgba(255,255,255,.72));border-radius:21px;color:#fff;background:linear-gradient(145deg,#8268eb,#506be0);box-shadow:0 13px 28px rgba(79,92,205,.29),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.36));font-size:31px;animation:employeeAccessIconIn .5s .06s cubic-bezier(.2,.8,.2,1) both}
.till-role-hero-copy,.responsibility-hero-copy{min-width:0;flex:1}.till-role-hero .profile-access-card-head{min-height:auto;justify-content:flex-start;gap:10px}.till-role-hero h3,.responsibility-hero h3{margin:0;color:var(--text1);font-size:22px;font-weight:950;letter-spacing:-.025em}.till-role-hero p,.responsibility-hero p{margin:6px 0 0;color:var(--text2);font-size:13px;font-weight:720;line-height:1.75}
.till-role-hero .profile-access-head-badge{min-height:34px;padding:6px 11px;border-radius:12px;font-size:12px;font-weight:880}.till-attendant-field>label{margin-bottom:9px;font-size:13px;font-weight:880}.till-attendant-select-trigger{min-height:74px;padding:10px 14px;border-radius:19px}.till-attendant-option-avatar{width:48px;height:48px;flex-basis:48px;border-radius:15px;font-size:17px}.till-attendant-trigger-person{gap:13px}.till-attendant-trigger-person strong{font-size:15px;font-weight:920}.till-attendant-trigger-person small{font-size:12px;font-weight:760}.till-attendant-select-trigger>i{font-size:23px}
.till-role-settings-card .profile-save-row .btn{min-height:50px;border-radius:14px;font-size:14px;font-weight:900;box-shadow:0 10px 22px rgba(104,78,216,.23);transition:transform .2s var(--ui-ease),box-shadow .2s ease}.till-role-settings-card .profile-save-row .btn:hover{transform:translateY(-2px);box-shadow:0 14px 27px rgba(104,78,216,.3)}
.profile-role-history{margin-top:20px;padding-top:18px}.profile-role-history-head{gap:8px;margin-bottom:11px;font-size:13px;font-weight:880}.profile-role-history-head i{font-size:19px}.profile-role-history-list{gap:10px}.profile-role-history-item{grid-template-columns:48px minmax(0,1fr) auto;gap:12px;min-height:78px;padding:11px 13px;border-radius:18px;animation:employeeAccessRise .42s var(--ui-ease) both}.profile-role-history-item:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(52,67,134,.13),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92))}.profile-role-history-icon{width:48px;height:48px;border-radius:15px;font-size:23px}.profile-role-history-copy{gap:5px}.profile-role-history-copy strong{font-size:15px;font-weight:920}.profile-role-history-copy small{gap:6px;font-size:12px;font-weight:760}.profile-role-history-copy small i{font-size:15px}.profile-role-history-state{padding:7px 10px;font-size:11.5px;font-weight:880}
.responsibility-definitions-card{padding:26px}.responsibility-hero{border-color:rgba(47,169,109,.16)}.responsibility-hero-icon{background:linear-gradient(145deg,#42b87b,#208d5c);box-shadow:0 13px 28px rgba(39,143,94,.26),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.36))}.responsibility-create-btn{min-height:48px!important;margin:0!important;padding-inline:17px!important;border-radius:14px!important;font-size:13px!important;font-weight:900!important;box-shadow:0 10px 22px rgba(47,152,102,.23);transition:transform .2s var(--ui-ease),box-shadow .2s ease!important;white-space:nowrap}.responsibility-create-btn:hover{transform:translateY(-2px);box-shadow:0 14px 27px rgba(47,152,102,.3)}
.responsibility-plan-note{gap:10px;margin:0 0 16px;padding:12px 14px;border-radius:14px;font-size:12px;font-weight:800}.responsibility-plan-note i{font-size:19px}.responsibility-definition-list{gap:11px}.responsibility-definition-card{grid-template-columns:58px minmax(0,1fr) auto;gap:14px;min-height:104px;padding:14px 15px;border-radius:20px;animation:employeeAccessRise .42s var(--ui-ease) both}.responsibility-definition-card:hover{transform:translateY(-3px);box-shadow:0 15px 30px color-mix(in srgb,var(--responsibility-tone) 15%,transparent),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.94))}.responsibility-definition-icon{width:58px;height:58px;border-radius:18px;color:#fff;background:linear-gradient(145deg,var(--responsibility-tone),color-mix(in srgb,var(--responsibility-tone) 68%,#263b55));box-shadow:0 10px 21px color-mix(in srgb,var(--responsibility-tone) 25%,transparent);font-size:28px}.responsibility-definition-title{gap:9px}.responsibility-definition-title strong{font-size:16px;font-weight:930}.responsibility-definition-status{padding:5px 9px;font-size:11px;font-weight:880}.responsibility-definition-copy p{margin:5px 0 8px;font-size:12.5px;font-weight:720}.responsibility-definition-meta{gap:7px 12px;font-size:11.5px;font-weight:780}.responsibility-definition-meta i{font-size:15px}.responsibility-edit-btn{min-height:46px;padding-inline:13px;border-radius:13px;font-size:12px;font-weight:880;transition:transform .2s var(--ui-ease),box-shadow .2s ease}.responsibility-edit-btn:hover{transform:translateY(-2px);box-shadow:0 9px 18px color-mix(in srgb,var(--responsibility-tone) 14%,transparent)}
html[data-theme="dark"] :is(.till-role-settings-card,.responsibility-definitions-card){border-color:rgba(139,126,255,.18);background:radial-gradient(circle at 100% 0%,rgba(106,83,225,.16),transparent 36%),linear-gradient(145deg,rgba(25,32,47,.94),rgba(18,25,38,.9));box-shadow:0 24px 54px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)}
@media(max-width:700px){.till-role-settings-card,.responsibility-definitions-card{padding:18px}.till-role-hero,.responsibility-hero{align-items:flex-start;gap:13px;margin-bottom:17px}.till-role-hero-icon,.responsibility-hero-icon{width:54px;height:54px;flex-basis:54px;border-radius:17px;font-size:26px}.till-role-hero h3,.responsibility-hero h3{font-size:19px}.till-role-hero p,.responsibility-hero p{font-size:12px}.responsibility-hero{display:grid;grid-template-columns:54px minmax(0,1fr)}.responsibility-create-btn{grid-column:1/-1;width:100%}.responsibility-definition-card{grid-template-columns:52px minmax(0,1fr)}.responsibility-definition-icon{width:52px;height:52px;font-size:25px}.responsibility-edit-btn{grid-column:2;justify-self:start}.profile-role-history-item{grid-template-columns:44px minmax(0,1fr)}.profile-role-history-icon{width:44px;height:44px}.profile-role-history-state{grid-column:2;justify-self:start}}
@media(max-width:440px){.till-role-hero .profile-access-card-head{align-items:flex-start;flex-direction:column}.till-role-hero .profile-access-head-badge{max-width:100%}.till-attendant-select-trigger{min-height:68px;padding:8px 10px}.till-attendant-option-avatar{width:44px;height:44px;flex-basis:44px}.responsibility-definition-card{grid-template-columns:46px minmax(0,1fr);padding:12px}.responsibility-definition-icon{width:46px;height:46px;border-radius:15px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.till-role-hero-icon,.responsibility-hero-icon,.profile-role-history-item,.responsibility-definition-card{animation:none!important}.till-role-settings-card .profile-save-row .btn,.profile-role-history-item,.responsibility-create-btn,.responsibility-definition-card,.responsibility-edit-btn{transition:none!important}}

/* Employee account workspace — zero nested scrolling on large screens. */
@media (min-width:821px) and (min-height:700px) {
    .overlay.employee-account-overlay { padding:10px;overflow:hidden; }
    .overlay .modal.employee-account-modal--advanced {
        width:min(1480px,calc(100vw - 28px));
        height:min(780px,calc(100dvh - 20px));
        max-height:none;
        grid-template-rows:64px minmax(0,1fr) auto 58px;
        padding:12px;
        border-radius:26px;
        overflow:hidden;
    }
    .employee-account-modal--advanced .employee-account-modal-head { min-height:60px;padding:7px 14px;border-radius:17px; }
    .employee-account-modal--advanced .employee-account-modal-head>span { width:46px;height:46px;flex-basis:46px;border-radius:14px;font-size:22px; }
    .employee-account-modal--advanced .employee-account-modal-head h3 { font-size:17px; }
    .employee-account-modal--advanced .employee-account-modal-head p { margin-top:2px;font-size:11px; }
    .employee-account-modal--advanced .employee-account-modal-body { grid-template-columns:minmax(430px,.78fr) minmax(0,1.72fr);gap:12px;padding:11px 0;overflow:visible; }
    .employee-account-identity-panel,.employee-permissions-panel { padding:12px;border-radius:18px;overflow:visible;scrollbar-gutter:auto; }
    .employee-account-identity-panel { display:grid;grid-template-rows:auto auto auto auto;align-content:start;gap:8px; }
    .employee-account-panel-title { gap:8px; }.employee-account-panel-title>span { width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:17px; }
    .employee-account-panel-title b { font-size:13px; }.employee-account-panel-title small { font-size:10px; }
    .employee-account-modal--advanced .employee-account-fields { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 9px; }
    .employee-account-modal--advanced .employee-account-fields>.employee-account-field:first-child { grid-column:1/-1; }
    .employee-account-modal--advanced .employee-account-field { gap:3px; }.employee-account-modal--advanced .employee-account-field>span:first-child { font-size:10.5px;font-weight:820; }
    .employee-account-modal--advanced .employee-account-field input { min-height:40px;padding-block:6px;font-size:12px; }
    .employee-account-password-meta { min-height:13px; }.employee-account-password-meta small { font-size:8.5px!important;line-height:1.3; }
    .employee-role-section { gap:5px; }.employee-role-section>span { font-size:10.5px; }.employee-role-presets { grid-template-columns:repeat(4,minmax(0,1fr));gap:5px; }
    .employee-role-card { min-height:42px;padding:5px 6px;border-radius:11px;font-size:9.5px; }.employee-role-card>i { width:25px;height:25px;border-radius:8px;font-size:13px; }
    .employee-account-active { min-height:38px!important;padding:7px 9px!important;font-size:10.5px!important; }
    .employee-permissions-panel { grid-template-rows:auto auto minmax(0,1fr);gap:8px;overflow:visible; }
    .employee-permissions-head { padding-bottom:7px; }.employee-permissions-head>strong { padding:5px 9px;font-size:10px; }
    .employee-permission-all { min-height:48px;padding:7px 11px;border-radius:13px; }.employee-permission-all b { font-size:11.5px; }.employee-permission-all small { font-size:9px; }
    .employee-permission-browser { grid-template-columns:205px minmax(0,1fr);gap:10px;overflow:visible; }
    .employee-permission-category-nav { gap:3px;padding:0;overflow:visible; }
    .employee-permission-category { min-height:42px;grid-template-columns:30px minmax(0,1fr) 15px;gap:7px;padding:4px 7px;border-radius:11px; }
    .employee-permission-category>i:first-child { width:30px;height:30px;border-radius:9px;font-size:14px; }.employee-permission-category b { font-size:10.5px; }.employee-permission-category small { font-size:8.5px; }
    .employee-permission-groups { padding:0;overflow:visible; }
    .employee-permission-group,.employee-permission-group[data-permission-group] { min-height:0;height:100%;padding:12px;border-radius:15px;overflow:visible; }
    .employee-permission-group legend { padding:0 5px 7px; }.employee-permission-group-heading { gap:8px; }.employee-permission-group-heading>i { width:36px;height:36px;border-radius:11px;font-size:17px!important; }
    .employee-permission-group-heading>span>b { font-size:12.5px; }.employee-permission-group-heading>span>small { font-size:9px; }
    .employee-permission-group>div { grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:3px; }.employee-permission-item>span { min-height:40px;padding:6px 8px;border-radius:10px;font-size:10.5px; }
    .employee-account-modal--advanced .employee-account-modal-foot { grid-template-columns:minmax(0,1fr) 150px;gap:9px;padding:8px 2px 3px; }
    .employee-account-modal--advanced .employee-account-modal-foot .btn { min-height:44px;font-size:12px; }
}
@media (min-width:1280px) and (min-height:700px) {
    .employee-account-modal--advanced .employee-account-modal-body { grid-template-columns:minmax(440px,.72fr) minmax(0,1.9fr); }
    .employee-permission-browser { grid-template-columns:210px minmax(0,1fr); }
    .employee-permission-group>div { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Low-vision pass: readable type and unmistakable controls without desktop scroll. */
@media (min-width:1100px) and (min-height:700px) {
    .overlay .modal.employee-account-modal--advanced { height:min(800px,calc(100dvh - 18px));grid-template-rows:68px minmax(0,1fr) auto 62px; }
    .employee-account-modal--advanced .employee-account-modal-head { min-height:64px;padding:8px 16px; }
    .employee-account-modal--advanced .employee-account-modal-head>span { width:50px;height:50px;flex-basis:50px;font-size:26px; }
    .employee-account-modal--advanced .employee-account-modal-head h3 { font-size:20px;font-weight:950;line-height:1.35; }
    .employee-account-modal--advanced .employee-account-modal-head p { font-size:14px;font-weight:750;line-height:1.4; }
    .employee-account-modal--advanced .employee-account-modal-body { grid-template-columns:minmax(460px,.8fr) minmax(0,1.8fr);gap:13px;padding:10px 0; }
    .employee-account-identity-panel,.employee-permissions-panel { padding:13px; }
    .employee-account-panel-title>span { width:42px;height:42px;flex-basis:42px;font-size:21px; }
    .employee-account-panel-title b { font-size:16px;font-weight:930;line-height:1.4; }.employee-account-panel-title small { font-size:13px;font-weight:720;line-height:1.4; }
    .employee-account-modal--advanced .employee-account-field>span:first-child { font-size:14px;font-weight:900;line-height:1.45; }
    .employee-account-modal--advanced .employee-account-field input { min-height:44px;padding:7px 10px;font-size:16px;font-weight:720; }
    .employee-account-password button { width:44px;min-width:44px;height:44px;font-size:19px; }
    .employee-account-password-meta { min-height:16px; }.employee-account-password-meta small { font-size:11.5px!important;font-weight:750!important;line-height:1.35; }
    .employee-account-field-error { font-size:12px!important; }
    .employee-role-section>span { font-size:14px;font-weight:900; }.employee-role-card { min-height:46px;padding:6px 7px;font-size:13px;font-weight:880; }.employee-role-card>i { width:30px;height:30px;font-size:16px; }
    .employee-account-active { min-height:44px!important;font-size:14px!important;font-weight:880!important; }.employee-account-switch { width:44px;height:25px;flex-basis:44px; }
    .employee-permissions-head { padding-bottom:8px; }.employee-permissions-head>strong { padding:6px 10px;font-size:13px;font-weight:900; }
    .employee-permission-all { min-height:54px;padding:8px 12px; }.employee-permission-all>span { grid-template-columns:36px 1fr;column-gap:10px; }.employee-permission-all>span>i { width:36px;height:36px;border-radius:11px;font-size:19px; }.employee-permission-all b { font-size:15px;font-weight:930; }.employee-permission-all small { font-size:12px;font-weight:750; }.employee-permission-all>i { width:29px;height:29px;font-size:16px; }
    .employee-permission-browser { grid-template-columns:230px minmax(0,1fr);gap:11px; }
    .employee-permission-category-nav { gap:3px; }.employee-permission-category { min-height:47px;grid-template-columns:34px minmax(0,1fr) 17px;gap:8px;padding:5px 8px; }
    .employee-permission-category>i:first-child { width:34px;height:34px;font-size:18px; }.employee-permission-category b { font-size:13.5px;font-weight:900;line-height:1.35; }.employee-permission-category small { font-size:11px;font-weight:800;line-height:1.25; }.employee-permission-category>i:last-child { font-size:17px; }
    .employee-permission-group,.employee-permission-group[data-permission-group] { padding:14px; }.employee-permission-group legend { padding-bottom:9px; }.employee-permission-group-heading>i { width:44px;height:44px;border-radius:14px;font-size:22px!important; }
    .employee-permission-group-heading>span>b { font-size:17px;font-weight:950;line-height:1.35; }.employee-permission-group-heading>span>small { font-size:13px;font-weight:780; }
    .employee-permission-group>div { gap:8px; }.employee-permission-item>span { min-height:48px;gap:9px;padding:8px 10px;font-size:15px;font-weight:850;line-height:1.45; }.employee-permission-item>span i { width:23px;height:23px;flex-basis:23px;border-radius:7px;font-size:15px; }
    .employee-account-modal--advanced .employee-account-modal-foot { grid-template-columns:minmax(0,1fr) 180px;padding:8px 2px 3px; }.employee-account-modal--advanced .employee-account-modal-foot .btn { min-height:48px;font-size:16px;font-weight:930; }.employee-account-modal--advanced .employee-account-modal-foot .btn i { font-size:19px; }
}

/* Permission rail and password affordance corrections. */
@media (min-width:821px) and (min-height:700px) {
    .employee-permission-browser { min-height:0;overflow:hidden; }
    .employee-permission-category-nav {
        min-height:0;
        max-height:100%;
        padding:2px 2px 12px 8px;
        overflow-x:hidden;
        overflow-y:auto;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
        scrollbar-width:thin;
        scrollbar-color:rgba(var(--access-tone-rgb),.48) rgba(var(--access-tone-rgb),.08);
    }
    .employee-permission-category-nav::-webkit-scrollbar { width:8px; }
    .employee-permission-category-nav::-webkit-scrollbar-track { border-radius:999px;background:rgba(var(--access-tone-rgb),.07); }
    .employee-permission-category-nav::-webkit-scrollbar-thumb { border:2px solid transparent;border-radius:999px;background:rgba(var(--access-tone-rgb),.48);background-clip:padding-box; }
    .employee-permission-category { flex:0 0 auto; }
    .employee-account-modal--advanced .employee-account-modal-foot { position:relative;z-index:5;border-radius:0 0 18px 18px;background:linear-gradient(180deg,var(--theme-glass, rgba(213,222,239,.96)),var(--theme-glass, rgba(190,204,229,.98)));box-shadow:0 -8px 18px rgba(37,49,103,.07); }
    html[data-theme="dark"] .employee-account-modal--advanced .employee-account-modal-foot { background:linear-gradient(180deg,rgba(31,41,57,.96),rgba(23,31,44,.99)); }
}
.employee-account-password input { padding-inline-end:60px!important; }
.employee-account-password input::placeholder { color:color-mix(in srgb,var(--text2) 82%,transparent);font-size:12px;font-weight:650;letter-spacing:-.01em;opacity:.88; }
.employee-account-password button { right:auto;margin-right:0;inset-inline-end:5px;top:50%;width:42px;min-width:42px;height:42px;transform:translateY(-50%);border:1px solid rgba(var(--access-tone-rgb),.12);color:var(--theme-ink, #5365c9);background:rgba(var(--access-tone-rgb),.07);font-size:19px; }
.employee-account-password button:hover,.employee-account-password button:focus-visible { color:#fff;background:var(--access-tone);box-shadow:0 6px 14px rgba(var(--access-tone-rgb),.2);outline:none; }
@media (max-width:820px) { .employee-account-password input::placeholder { font-size:11.5px; }.employee-account-password button { width:40px;min-width:40px;height:40px; } }

/* Password/PIN fields: physical right icon, in-field guidance only. */
.employee-account-modal--advanced .employee-account-password input {
    padding-right:60px!important;
    padding-left:12px!important;
}
.employee-account-modal--advanced .employee-account-password input:placeholder-shown {
    direction:rtl;
    text-align:right;
}
.employee-account-modal--advanced .employee-account-password input::placeholder {
    color:var(--theme-ink, #68738b);
    font-size:11.5px;
    font-weight:680;
    line-height:1.4;
    opacity:.92;
}
.employee-account-modal--advanced .employee-account-password button {
    right:6px!important;
    left:auto!important;
    inset-inline-start:auto!important;
    inset-inline-end:auto!important;
    margin:0!important;
}
.employee-account-modal--advanced .employee-account-password-meta { justify-content:flex-start; }
.employee-account-modal--advanced .employee-account-password-meta>small:first-child { display:none; }
.employee-account-modal--advanced .employee-account-password-meta>small:last-child { margin-inline-start:0;font-size:11.5px!important; }
html[data-theme="dark"] .employee-account-modal--advanced .employee-account-password input::placeholder { color:#aeb8ca; }

/* Account security panel — complete visual redesign. */
.account-security-panel{position:relative!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px!important;overflow:hidden!important;background:radial-gradient(circle at 100% 0%,rgba(92,105,229,.18),transparent 37%),linear-gradient(155deg,var(--theme-glass, rgba(255,255,255,.9)),var(--theme-glass, rgba(226,234,249,.74)))!important}
.account-security-panel::after{content:"";position:absolute;inset:auto -45px -65px auto;width:180px;height:180px;border-radius:50%;background:rgba(var(--access-tone-rgb),.07);pointer-events:none}
.account-security-hero{position:relative;z-index:1;display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;min-height:76px;padding:10px 12px;border:1px solid rgba(var(--access-tone-rgb),.2);border-radius:18px;background:linear-gradient(135deg,var(--theme-glass, rgba(255,255,255,.88)),rgba(var(--access-tone-rgb),.09));box-shadow:0 10px 22px rgba(42,53,104,.08),inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.92))}
.account-security-hero-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,#7659e8,#4f6fe8);box-shadow:0 10px 22px rgba(var(--access-tone-rgb),.27);font-size:27px}
.account-security-hero>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}.account-security-hero small{grid-column:1/-1;color:var(--theme-ink, #5967c8);font-size:11px;font-weight:850}.account-security-hero strong{overflow:hidden;color:var(--text1);font-size:16px;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.account-security-hero>div>span{display:inline-flex;align-items:center;gap:4px;color:var(--theme-ink, #27865a);font-size:11px;font-weight:850;white-space:nowrap}.account-security-hero>div>span i{font-size:15px}
.account-security-block{position:relative;z-index:1;padding:11px;border:1px solid rgba(87,104,177,.14);border-radius:17px;background:var(--theme-glass, rgba(255,255,255,.58));box-shadow:inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.86))}
.account-security-block-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid rgba(87,104,177,.12)}.account-security-block-head>span{width:36px;height:36px;display:grid;flex:0 0 36px;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(145deg,#7180e8,#5266d8);box-shadow:0 6px 13px rgba(75,92,198,.2);font-size:18px}.account-role-block .account-security-block-head>span{background:linear-gradient(145deg,#e5a63d,#c98118);box-shadow:0 6px 13px rgba(201,129,24,.2)}.account-security-block-head>div{min-width:0;display:grid;gap:1px}.account-security-block-head b{color:var(--text1);font-size:13px;font-weight:930}.account-security-block-head small{color:var(--text2);font-size:10px;font-weight:720}
.account-security-panel .employee-account-fields{gap:7px 9px!important}.account-security-panel .employee-account-field>span:first-child{display:flex;align-items:center;margin:0 2px;color:var(--text1);font-size:12px!important;font-weight:880!important}.account-security-panel .employee-account-field input{border-color:rgba(83,101,178,.2);background:var(--theme-glass, rgba(248,250,255,.9));box-shadow:inset 0 1px 0 var(--theme-highlight, #fff)}.account-security-panel .employee-account-field input:focus{border-color:var(--access-tone);box-shadow:0 0 0 3px rgba(var(--access-tone-rgb),.12)!important}
.account-security-panel .employee-role-presets{gap:6px}.account-security-panel .employee-role-card{position:relative;justify-content:center;min-height:52px;padding:6px;border-radius:13px;background:var(--theme-glass, rgba(248,250,255,.76));overflow:hidden}.account-security-panel .employee-role-card>i{width:31px;height:31px;flex:0 0 31px}.account-security-panel .employee-role-card.active::after{content:"";position:absolute;inset:auto 9px 0;height:3px;border-radius:3px 3px 0 0;background:var(--role-tone,var(--access-tone));box-shadow:0 0 9px var(--role-tone,var(--access-tone))}
.account-security-panel .employee-account-active{margin-top:9px;min-height:52px!important;justify-content:space-between;padding:8px 11px!important;border:1px solid rgba(47,165,116,.17);border-radius:13px;background:linear-gradient(135deg,rgba(47,165,116,.12),var(--theme-glass, rgba(255,255,255,.62)));font-size:12px!important}.account-security-panel .employee-account-active>span:last-child{order:-1;display:grid;gap:1px}.account-security-panel .employee-account-active b{font-size:12px;font-weight:900}.account-security-panel .employee-account-active small{color:var(--theme-ink, #27865a);font-size:9.5px;font-weight:800}
html[data-theme="dark"] .account-security-panel{background:radial-gradient(circle at 100% 0%,rgba(102,95,229,.18),transparent 38%),linear-gradient(155deg,rgba(39,49,66,.96),rgba(25,33,47,.94))!important}html[data-theme="dark"] :is(.account-security-hero,.account-security-block){border-color:rgba(255,255,255,.1);background:rgba(15,22,34,.34)}html[data-theme="dark"] .account-security-panel .employee-account-field input,html[data-theme="dark"] .account-security-panel .employee-role-card{background:rgba(15,22,34,.42)}
@media(min-width:1100px) and (min-height:700px){.account-security-hero{min-height:68px;padding:7px 10px}.account-security-hero-icon{width:50px;height:50px;font-size:24px}.account-security-block{padding:9px 10px}.account-security-block-head{margin-bottom:7px;padding-bottom:6px}.account-security-block-head>span{width:32px;height:32px;flex-basis:32px;font-size:16px}.account-security-panel .employee-role-card{min-height:47px}.account-security-panel .employee-account-active{min-height:46px!important;margin-top:7px}}
@media(max-width:820px){.account-security-panel{overflow:visible!important}.account-security-hero{grid-template-columns:50px minmax(0,1fr)}.account-security-hero-icon{width:50px;height:50px;font-size:24px}.account-security-panel .employee-role-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Employee account workspace — spacious desktop redesign */
@media (min-width: 821px) {
    .overlay.employee-account-overlay {
        padding: 8px;
        background:
            radial-gradient(circle at 18% 12%, rgba(96, 110, 238, .18), transparent 34%),
            linear-gradient(145deg, rgba(20, 29, 58, .68), rgba(31, 37, 69, .54));
        backdrop-filter: blur(14px) saturate(115%);
    }

    .overlay .modal.employee-account-modal--advanced {
        width: min(1600px, calc(100vw - 20px));
        height: min(860px, calc(100dvh - 16px));
        max-width: none;
        max-height: none;
        grid-template-rows: 72px minmax(0, 1fr) auto 68px;
        gap: 10px;
        padding: 10px 10px 8px;
        border: 1px solid var(--theme-stroke, rgba(255, 255, 255, .78));
        border-radius: 30px;
        background:
            linear-gradient(135deg, var(--theme-glass, rgba(250, 252, 255, .95)), var(--theme-glass, rgba(226, 235, 250, .92)));
        box-shadow:
            0 30px 80px rgba(17, 24, 58, .34),
            inset 0 1px 0 var(--theme-highlight, rgba(255, 255, 255, .9));
    }

    .employee-account-modal--advanced .employee-account-modal-head {
        grid-row: 1;
        min-height: 0;
        padding: 12px 18px;
        border: 1px solid rgba(111, 126, 230, .22);
        border-radius: 21px;
        background:
            radial-gradient(circle at 9% 50%, var(--theme-glass, rgba(255, 255, 255, .9)), transparent 24%),
            linear-gradient(100deg, var(--theme-glass, rgba(255, 255, 255, .86)), var(--theme-glass, rgba(217, 225, 250, .82)));
        box-shadow: 0 8px 22px rgba(64, 77, 144, .08);
    }

    .employee-account-modal--advanced .employee-account-modal-body {
        grid-row: 2;
        min-height: 0;
        gap: 12px;
        padding: 0;
    }

    .employee-account-modal--advanced .employee-account-identity-panel,
    .employee-account-modal--advanced .employee-permissions-panel {
        min-height: 0;
        border: 1px solid rgba(119, 134, 216, .24);
        border-radius: 22px;
        background: var(--theme-glass, rgba(249, 251, 255, .7));
        box-shadow:
            0 10px 24px rgba(64, 76, 132, .07),
            inset 0 1px 0 var(--theme-highlight, rgba(255, 255, 255, .86));
    }

    .employee-account-modal--advanced .employee-permissions-panel {
        padding: 12px;
        overflow: hidden;
    }

    .employee-account-modal--advanced .employee-account-form-error {
        grid-row: 3;
        margin: 0 4px;
    }

    .employee-account-modal--advanced .employee-account-modal-foot {
        grid-row: 4;
        align-self: stretch;
        min-height: 0;
        margin: 0;
        padding: 9px;
        border: 1px solid rgba(120, 134, 213, .18);
        border-radius: 18px 18px 22px 22px;
        background: var(--theme-glass, rgba(244, 248, 255, .86));
        box-shadow: 0 -8px 24px rgba(47, 60, 118, .06);
    }

    .employee-account-modal--advanced .employee-account-modal-foot .btn {
        height: 48px;
        border-radius: 13px;
        font-size: 16px;
        font-weight: 800;
    }

    .employee-account-modal--advanced .employee-account-modal-foot .btn-primary {
        box-shadow: 0 10px 22px rgba(80, 84, 224, .2);
    }
}

@media (min-width: 1500px) and (min-height: 760px) {
    .overlay.employee-account-overlay {
        padding: 6px;
    }

    .overlay .modal.employee-account-modal--advanced {
        width: min(1780px, calc(100vw - 16px));
        height: min(900px, calc(100dvh - 12px));
        grid-template-rows: 74px minmax(0, 1fr) auto 70px;
        gap: 12px;
        padding: 10px 10px 8px;
    }

    .employee-account-modal--advanced .employee-account-modal-body {
        grid-template-columns: minmax(470px, .72fr) minmax(0, 1.78fr);
        gap: 14px;
    }
}

/* Keep the enlarged workspace inside the browser's real visible viewport. */
@media (min-width: 821px) {
    .overlay.employee-account-overlay {
        box-sizing: border-box;
        align-items: center;
        min-height: 100dvh;
    }

    .overlay .modal.employee-account-modal--advanced {
        box-sizing: border-box;
        height: min(860px, calc(100dvh - 32px));
        margin-block: auto;
    }
}

@media (min-width: 1500px) and (min-height: 760px) {
    .overlay .modal.employee-account-modal--advanced {
        height: min(880px, calc(100dvh - 32px));
    }
}

/* Employee account workspace — mobile sheet with one predictable scroll area. */
@media (max-width: 820px) {
    .overlay.employee-account-overlay {
        box-sizing: border-box;
        align-items: flex-end;
        padding: 0;
        overflow: hidden;
        background: rgba(18, 25, 49, .62);
        overscroll-behavior: contain;
    }

    .overlay .modal.employee-account-modal--advanced {
        box-sizing: border-box;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        padding: 10px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        gap: 8px;
        overflow: hidden;
        border: 0;
        border-radius: 22px 22px 0 0;
        background: linear-gradient(155deg, var(--theme-glass, rgba(247, 250, 255, .98)), var(--theme-glass, rgba(218, 228, 246, .98)));
        box-shadow: 0 -18px 50px rgba(16, 24, 52, .34);
    }

    .employee-account-modal--advanced .employee-account-modal-head {
        grid-row: 1;
        min-height: 62px;
        margin: 0;
        padding: 8px 10px;
        border-radius: 16px;
    }

    .employee-account-modal--advanced .employee-account-modal-head > span {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px;
        font-size: 23px;
    }

    .employee-account-modal--advanced .employee-account-modal-head h3 {
        font-size: 17px;
        line-height: 1.4;
    }

    .employee-account-modal--advanced .employee-account-modal-head p {
        font-size: 12px;
    }

    .employee-account-modal--advanced .employee-account-modal-body {
        grid-row: 2;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 2px 2px 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .employee-account-modal--advanced .employee-account-identity-panel,
    .employee-account-modal--advanced .employee-permissions-panel,
    .employee-account-modal--advanced .account-security-panel {
        flex: 0 0 auto;
        min-height: auto;
        padding: 10px;
        overflow: visible !important;
        border-radius: 18px;
    }

    .employee-account-modal--advanced .employee-permission-browser,
    .employee-account-modal--advanced .employee-permission-category-nav,
    .employee-account-modal--advanced .employee-permission-groups {
        min-height: auto;
        max-height: none;
        overflow: visible;
    }

    .employee-account-modal--advanced .employee-account-form-error {
        grid-row: 3;
        margin: 0 2px;
        max-height: 72px;
        overflow-y: auto;
        font-size: 12px;
        line-height: 1.5;
    }

    .employee-account-modal--advanced .employee-account-modal-foot,
    .employee-account-modal--advanced .employee-account-modal-foot:last-child {
        grid-row: 4;
        position: relative;
        z-index: 8;
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(112px, .85fr);
        gap: 8px;
        margin: 0;
        padding: 8px;
        border: 1px solid rgba(105, 120, 205, .18);
        border-radius: 16px 16px 12px 12px;
        background: var(--theme-glass, rgba(246, 249, 255, .96));
        box-shadow: 0 -10px 24px rgba(40, 53, 111, .12);
    }

    .employee-account-modal--advanced .employee-account-modal-foot .btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding-inline: 10px;
        border-radius: 13px;
        font-size: 14px;
        font-weight: 900;
    }

    .employee-account-modal--advanced .employee-account-modal-foot #acc_cancelBtn {
        grid-row: auto;
    }
}

@media (max-width: 480px) {
    .employee-account-modal--advanced .employee-account-modal-foot,
    .employee-account-modal--advanced .employee-account-modal-foot:last-child {
        grid-template-columns: minmax(0, 1.45fr) minmax(104px, .8fr);
    }

    .employee-account-modal--advanced .employee-account-modal-foot .btn {
        min-height: 50px;
        font-size: 13px;
    }
}

/* Final mobile workspace navigation override: keep all controls on one row. */
@media (max-width: 760px) {
    html.employee-workspace-mode .top-bar:not(.search-open) {
        box-sizing: border-box;
        width: calc(100% - 20px);
        min-height: 66px;
        display: grid;
        grid-template-columns: 44px 44px minmax(48px, 1fr) 44px 44px !important;
        grid-template-rows: 48px !important;
        align-items: center;
        gap: 6px;
        margin: 10px 10px 0;
        padding: 8px 10px;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-nav-group {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 44px;
        min-width: 44px;
        display: grid;
        place-items: center;
        gap: 0;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #authAccountBtn {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-brand {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        justify-content: center;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #topBarNotifications {
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) #authLogoutBtn {
        grid-column: 5 !important;
        grid-row: 1 !important;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) :is(
        .top-bar-hamburger,
        #authAccountBtn,
        #notificationBellBtn,
        #authLogoutBtn
    ) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        place-self: center;
        border-radius: 13px;
        font-size: 21px;
    }

    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-nav-group > :not(.top-bar-hamburger) {
        display: none;
    }

    html.employee-workspace-mode .sidebar.mobile-open {
        top: 86px;
        max-height: calc(100dvh - 98px);
        background:
            radial-gradient(circle at 8% 0%, var(--theme-glass, rgba(255, 255, 255, .98)), transparent 35%),
            radial-gradient(circle at 96% 100%, rgba(105, 135, 225, .12), transparent 38%),
            linear-gradient(145deg, var(--theme-glass, rgba(250, 252, 255, .96)), var(--theme-glass, rgba(235, 241, 252, .94)));
        border-color: var(--theme-stroke, rgba(255, 255, 255, .94));
        box-shadow: 0 24px 60px rgba(24, 35, 78, .3), inset 0 1px 0 var(--theme-highlight, #fff);
        backdrop-filter: blur(18px) saturate(125%);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
    }

    html[data-theme="dark"] html.employee-workspace-mode .sidebar.mobile-open,
    html[data-theme="dark"].employee-workspace-mode .sidebar.mobile-open {
        background:
            radial-gradient(circle at 8% 0%, rgba(82, 99, 142, .2), transparent 34%),
            linear-gradient(145deg, rgba(29, 36, 50, .97), rgba(19, 25, 36, .95));
        border-color: rgba(255, 255, 255, .16);
    }
}

@media (max-width: 370px) {
    html.employee-workspace-mode .top-bar:not(.search-open) {
        grid-template-columns: 42px 42px minmax(36px, 1fr) 42px 42px !important;
        gap: 4px;
        padding-inline: 7px;
    }
}

/* Top bar v2 — structural three-zone layout. */
.top-bar-user-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

@media (max-width: 760px) {
    .top-bar,
    html.employee-workspace-mode .top-bar,
    html.employee-workspace-mode .top-bar:not(.search-open) {
        box-sizing: border-box;
        width: calc(100% - 20px);
        min-height: 68px;
        display: grid;
        grid-template-columns: 48px minmax(48px, 1fr) auto !important;
        grid-template-rows: 48px !important;
        align-items: center;
        gap: 8px;
        margin: 10px 10px 0;
        padding: 9px 10px;
        border: 1px solid var(--theme-stroke, rgba(255, 255, 255, .9));
        border-radius: 19px;
        background: linear-gradient(135deg, var(--theme-glass, rgba(250, 252, 255, .93)), var(--theme-glass, rgba(218, 236, 251, .9)));
        box-shadow: 0 10px 26px rgba(32, 50, 103, .14), inset 0 1px 0 var(--theme-highlight, #fff);
        backdrop-filter: blur(16px) saturate(130%);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
    }

    .top-bar .top-bar-nav-group,
    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-nav-group {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 48px;
        min-width: 48px;
        display: grid;
        place-items: center;
    }

    .top-bar .top-bar-brand,
    html.employee-workspace-mode .top-bar:not(.search-open) .top-bar-brand {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        justify-content: center;
    }

    .top-bar > .top-bar-user-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
    }

    .top-bar-user-actions > *,
    .top-bar-user-actions .top-bar-notifications {
        flex: 0 0 auto;
    }

    .top-bar :is(.top-bar-hamburger, #authAccountBtn, #notificationBellBtn, #authLogoutBtn, #topBarSearchToggle) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 13px;
        font-size: 21px;
    }

    .top-bar .top-bar-logo {
        width: auto;
        max-width: 48px;
        height: 40px;
        object-fit: contain;
    }

    .top-bar .top-bar-brand > [data-i18n="brandName"] {
        display: none;
    }

    html.employee-workspace-mode .top-bar .top-bar-user-actions #topBarSearch[hidden],
    html.employee-workspace-mode .top-bar .top-bar-user-actions #topBarNotifications[hidden] {
        display: none !important;
    }

    .top-bar.search-open {
        grid-template-columns: 48px minmax(0, 1fr) !important;
    }

    .top-bar.search-open .top-bar-brand {
        display: none;
    }

    .top-bar.search-open > .top-bar-user-actions {
        grid-column: 2 !important;
        width: 100%;
    }

    .top-bar.search-open > .top-bar-user-actions > :not(#topBarSearch) {
        display: none !important;
    }

    .top-bar.search-open #topBarSearch {
        width: 100%;
        flex: 1 1 auto;
    }

    .sidebar.mobile-open,
    html.employee-workspace-mode .sidebar.mobile-open {
        top: 88px;
        max-height: calc(100dvh - 100px);
        background: linear-gradient(150deg, var(--theme-glass, rgba(252, 253, 255, .98)), var(--theme-glass, rgba(235, 242, 253, .965)));
        border-color: var(--theme-stroke, rgba(255, 255, 255, .96));
        box-shadow: 0 26px 64px rgba(25, 38, 82, .32), inset 0 1px 0 var(--theme-highlight, #fff);
        backdrop-filter: blur(20px) saturate(115%);
        -webkit-backdrop-filter: blur(20px) saturate(115%);
    }

    html[data-theme="dark"] .top-bar {
        background: linear-gradient(145deg, rgba(35, 43, 59, .96), rgba(22, 29, 42, .94));
    }

    html[data-theme="dark"] .sidebar.mobile-open,
    html[data-theme="dark"].employee-workspace-mode .sidebar.mobile-open {
        background: linear-gradient(150deg, rgba(31, 39, 54, .98), rgba(18, 24, 35, .97));
    }
}

@media (max-width: 390px) {
    .top-bar,
    html.employee-workspace-mode .top-bar,
    html.employee-workspace-mode .top-bar:not(.search-open) {
        grid-template-columns: 44px minmax(38px, 1fr) auto !important;
        gap: 5px;
        padding-inline: 7px;
    }

    .top-bar > .top-bar-user-actions {
        gap: 4px;
    }

    .top-bar :is(.top-bar-hamburger, #authAccountBtn, #notificationBellBtn, #authLogoutBtn, #topBarSearchToggle) {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }
}

/* Cash counting: financial summary followed by a spacious money field. */
.handover-confirm-overlay .handover-confirm-modal{width:min(620px,calc(100vw - 32px))!important;max-width:620px!important;box-sizing:border-box;padding:24px!important;border:1px solid var(--theme-stroke, rgba(255,255,255,.85));border-radius:24px;background:linear-gradient(135deg, color-mix(in srgb,var(--panel) 94%,var(--theme-surface, #edf3ff)),color-mix(in srgb,var(--panel) 90%,var(--theme-surface, #d6eee8)));box-shadow:0 24px 70px #17243b38;animation:hc-count-enter .22s ease-out}
.handover-confirm-head{align-items:flex-start;margin-bottom:22px}.handover-confirm-head>span{background:#285ab014;color:var(--theme-ink, #285ab0)}.handover-confirm-head h3{font-size:19px;line-height:1.8}.handover-confirm-head p{line-height:1.9}.handover-confirm-summary{grid-template-columns:1fr 1fr!important;gap:12px;margin-bottom:18px}.handover-confirm-summary>div{padding:16px;background:color-mix(in srgb,var(--panel) 92%,transparent);min-width:0}.handover-confirm-summary small{display:flex;align-items:center;gap:7px}.handover-confirm-summary small i{font-size:19px;color:var(--theme-ink, #285ab0)}.handover-confirm-summary strong{font-size:26px;line-height:1.6;font-variant-numeric:tabular-nums}.handover-confirm-summary strong span{font-size:13px;font-weight:600}.handover-confirm-summary .is-short small i{color:var(--danger)}.handover-confirm-summary .is-over small i{color:var(--success)}
.hc-received-field{margin-bottom:18px}.hc-received-field>label{display:flex;align-items:center;gap:8px;font-weight:800;margin-bottom:9px}.hc-received-field>label i{color:var(--theme-ink, #08785d);font-size:22px}.hc-money-input{display:flex;align-items:center;gap:12px;padding:0 16px;border:1px solid var(--border);border-radius:14px;background:var(--panel);transition:border-color .18s,box-shadow .18s}.hc-money-input:focus-within{border-color:#285ab0;box-shadow:0 0 0 3px #285ab018}.hc-money-input input{width:100%;min-width:0;min-height:64px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:var(--text1);font:800 28px Arial,sans-serif;direction:ltr;text-align:right;padding:8px 0!important}.hc-money-input>span{color:var(--text2);font-size:14px;flex:none}.handover-confirm-modal .modal-actions{display:flex;gap:10px;margin-top:22px}.handover-confirm-modal .modal-actions .btn{min-height:48px;border-radius:12px}.handover-confirm-modal .modal-actions .btn-primary{flex:1;background:#168568;color:#fff}.handover-confirm-modal .modal-actions .btn-ghost{min-width:100px;background:var(--panel);border:1px solid var(--border)}.handover-resolution-options input:focus-visible+span{outline:3px solid #285ab0;outline-offset:2px}
@keyframes hc-count-enter{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:480px){.handover-confirm-overlay .handover-confirm-modal{padding:18px!important;border-radius:20px}.handover-confirm-head{gap:10px}.handover-confirm-head h3{font-size:17px}.handover-confirm-head>span{width:44px;height:44px;border-radius:14px}.handover-confirm-summary>div{padding:12px}.handover-confirm-summary strong{font-size:22px}.handover-resolution-options{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.handover-confirm-overlay .handover-confirm-modal{animation:none}.hc-money-input{transition:none}}

/* Each journal card explains the balance at the time of this movement. */
#tillContent .till-journal-record { grid-template-columns:44px minmax(180px,1fr) minmax(470px,1.5fr); cursor:pointer; }
.till-journal-record:focus-visible { outline:3px solid var(--till-section-tone,var(--primary)); outline-offset:3px; }
.till-journal-record:hover { box-shadow:0 5px 18px color-mix(in srgb,var(--work-tone) 15%,transparent); }
.till-journal-amounts { grid-template-columns:1fr 1.2fr 1fr; }
.till-journal-amounts .till-movement.is-pos { background:color-mix(in srgb,var(--success) 11%,var(--till-inner-surface,#fff)); color:var(--success); border:1px solid color-mix(in srgb,var(--success) 30%,transparent); }
.till-journal-amounts .till-movement.is-neg { background:color-mix(in srgb,var(--danger) 10%,var(--till-inner-surface,#fff)); color:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 30%,transparent); }
.till-journal-amounts .till-movement dt,.till-journal-amounts .till-movement dd { color:inherit; }
.till-journal-amounts .till-balance-after { background:color-mix(in srgb,var(--till-section-tone,var(--primary)) 10%,var(--till-inner-surface,#fff)); }
.till-journal-detail { display:flex; align-items:center; gap:7px; font-weight:700; color:var(--text-1); }
.till-themed-overlay .till-operation-modal:has(.till-journal-record) { width:min(1050px,95vw); max-width:1050px; }
.till-themed-overlay .till-journal-record { cursor:default; grid-template-columns:44px minmax(0,1fr); }
.till-themed-overlay .till-journal-amounts { grid-column:1 / -1; }
@media(max-width:1050px) { #tillContent .till-journal-record {grid-template-columns:44px minmax(0,1fr)} .till-journal-amounts {grid-column:1 / -1;} }
@media(max-width:540px) { .till-journal-amounts {grid-template-columns:1fr;} .till-journal-amounts dt {min-height:0;} }

/* Compact till journal rows. */
#tillContent .till-journal-record{display:grid!important;grid-template-columns:36px minmax(230px,1fr) minmax(420px,1.35fr)!important;gap:12px!important;padding:12px 14px!important;align-items:center;min-height:0!important}
#tillContent .till-journal-record .work-record-icon{width:36px;height:36px;border-radius:11px;font-size:19px}
#tillContent .till-journal-record .work-record-body{min-width:0}
#tillContent .till-journal-record .work-record-title{font-size:14px;line-height:1.6}
#tillContent .till-journal-record .work-record-time{font-size:12px;line-height:1.5}
#tillContent .till-journal-date,#tillContent .till-journal-document{font-size:11px;line-height:1.6;gap:5px;margin-top:3px}
#tillContent .till-journal-note{display:none}
#tillContent .till-journal-record .till-journal-amounts{display:grid!important;grid-column:3!important;grid-template-columns:1fr 1.25fr 1fr!important;width:100%;margin:0;gap:7px}
#tillContent .till-journal-amounts>div{min-width:0;padding:8px!important;border-radius:10px}
#tillContent .till-journal-amounts dt{font-size:11px;line-height:1.6;min-height:35px;white-space:normal}
#tillContent .till-journal-amounts dd{font-size:16px;margin-top:3px}
#tillContent .till-journal-amounts dd small{display:inline;font-size:10px}
#tillContent .till-journal-detail{grid-column:2 / -1;justify-self:end;font-size:11px;margin-top:-6px}
#tillContent .till-journal-records{gap:9px}
.till-journal-range{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
#till-more{display:block;margin:14px auto 0}
@media(max-width:800px){#tillContent .till-journal-record{grid-template-columns:36px minmax(0,1fr)!important}#tillContent .till-journal-record .till-journal-amounts{grid-column:1 / -1!important}#tillContent .till-journal-detail{grid-column:1 / -1}}
@media(max-width:420px){#tillContent .till-journal-amounts dt{font-size:10px}#tillContent .till-journal-amounts dd{font-size:14px}.till-journal-range{grid-template-columns:1fr}}

/* Shared glass dropdown treatment for the till journal. */
#tillContent .accounts-sort-select {
    position: relative;
    z-index: 5;
    min-width: 195px;
}

#tillContent .accounts-sort-select.is-open { z-index: 100; }

#tillContent .accounts-sort-select > select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#tillContent .accounts-sort-trigger {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 11px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.8));
    border-radius: 12px;
    color: var(--text1);
    background: var(--theme-glass, rgba(255,255,255,.74));
    box-shadow: inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.9));
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 760;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#tillContent .accounts-sort-trigger-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

#tillContent .accounts-sort-trigger-copy > i { color: var(--till-section-tone); font-size: 16px; }
#tillContent .accounts-sort-chevron { color: var(--text2); transition: transform .2s var(--ui-ease); }

#tillContent .accounts-sort-select.is-open .accounts-sort-trigger,
#tillContent .accounts-sort-trigger:focus-visible {
    outline: 0;
    border-color: var(--till-section-tone);
    background: var(--theme-glass, rgba(255,255,255,.92));
    box-shadow: 0 0 0 3px rgba(117,95,232,.17), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.95));
}

#tillContent .accounts-sort-select.is-open .accounts-sort-chevron { transform: rotate(180deg); }

#tillContent .accounts-sort-menu {
    position: absolute;
    z-index: 120;
    inset-inline: 0;
    top: calc(100% + 8px);
    display: none;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--theme-stroke, rgba(255,255,255,.87));
    border-radius: 15px;
    background: linear-gradient(145deg, var(--theme-glass, rgba(247,249,255,.97)), var(--theme-glass, rgba(220,228,248,.93)));
    box-shadow: 0 18px 34px rgba(34,45,94,.25), inset 0 1px 0 var(--theme-highlight, rgba(255,255,255,.96));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

#tillContent .accounts-sort-select.is-open .accounts-sort-menu { display: grid; animation: accountsSortMenuIn .2s var(--ui-ease) both; }


#tillContent .accounts-sort-option {
    min-height: 39px;
    display: grid;
    grid-template-columns: 21px minmax(0,1fr) 20px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text1);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 730;
    text-align: right;
}

#tillContent .accounts-sort-option > i:first-child { color: var(--till-section-tone); font-size: 15px; }
#tillContent .accounts-sort-option > i:last-child { opacity: 0; color: var(--till-section-tone); }
#tillContent .accounts-sort-option:hover { background: var(--theme-glass, rgba(255,255,255,.64)); }
#tillContent .accounts-sort-option.is-active { border-color: rgba(117,95,232,.2); background: rgba(117,95,232,.1); }
#tillContent .accounts-sort-option.is-active > i:last-child { opacity: 1; }


.date-picker-popover.is-portal{position:fixed!important;inset:auto;z-index:1100;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
#tillContent .accounts-sort-select{--accounts-tone:var(--till-section-tone);min-width:0;width:100%}
#tillContent .accounts-sort-menu{max-height:300px;overflow:auto;background:var(--till-inner-surface,var(--panel));border-color:color-mix(in srgb,var(--till-section-tone) 30%,transparent)}
#tillContent .accounts-sort-trigger{min-height:46px;border-color:color-mix(in srgb,var(--till-section-tone) 30%,transparent)}
#tillContent .accounts-sort-option.is-active{background:color-mix(in srgb,var(--till-section-tone) 12%,transparent);border-color:color-mix(in srgb,var(--till-section-tone) 25%,transparent)}

/* Receipt-style till transaction detail. */
.till-record-detail-overlay .till-operation-modal{width:min(850px,calc(100vw - 32px))!important;max-width:850px!important;padding:16px!important;max-height:calc(100dvh - 32px);overflow:auto;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--till-section-tone) 8%,var(--till-readable-surface)),var(--till-readable-surface))!important}
.till-record-detail-overlay #till-modal-title{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:16px;border:1px solid var(--theme-stroke);border-radius:18px;background:color-mix(in srgb,var(--till-section-tone) 7%,var(--till-inner-surface));font-size:17px}
.till-detail-amount{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--till-section-tone) 35%,transparent);border-radius:16px;background:color-mix(in srgb,var(--till-section-tone) 10%,var(--till-inner-surface));margin-bottom:12px}
.till-detail-amount>strong{margin-inline-start:auto;color:var(--till-section-tone);font-size:28px;white-space:nowrap}
.till-detail-amount>strong small{font-size:12px}
.till-detail-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--till-section-tone) 12%,transparent);color:var(--till-section-tone);font-size:22px}
.till-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.till-detail-cell{display:flex;align-items:center;gap:12px;min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--till-section-tone) 22%,transparent);border-radius:15px;background:var(--till-inner-surface)}
.till-detail-cell>div{min-width:0;display:grid;gap:6px}
.till-detail-cell small{font-size:12px;color:var(--till-secondary-text);font-weight:650;line-height:1.6}
.till-detail-cell strong{font-size:15px;color:var(--text1);line-height:1.8;overflow-wrap:anywhere}
.till-detail-cell strong small{font-size:11px}
.till-detail-after{background:color-mix(in srgb,var(--till-section-tone) 7%,var(--till-inner-surface))}
.till-detail-wide{grid-column:1 / -1}
.till-detail-cell .till-document-number{white-space:nowrap;font-size:14px}
.till-record-detail-overlay .modal-actions{margin-top:16px;display:flex;gap:10px}
.till-record-detail-overlay #till-cancel{background:var(--till-button-fill)!important;color:#fff!important;min-width:150px}
@media(max-width:560px){.till-detail-grid{grid-template-columns:1fr}.till-detail-amount{flex-wrap:wrap}.till-detail-amount>strong{font-size:24px}.till-record-detail-overlay .modal-actions{flex-wrap:wrap}.till-detail-cell .till-document-number{font-size:12px}}

/* Compact management receipt confirmation, in the outgoing movement palette. */
.owner-receipt-count-overlay{--orc-tone:var(--danger)}
.owner-receipt-count-overlay .owner-receipt-count-modal{width:min(600px,calc(100vw - 32px))!important;max-width:600px!important;padding:20px!important;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--orc-tone) 7%,var(--panel)),var(--panel))!important}
.owner-receipt-count-modal h2{display:flex;align-items:center;gap:12px;font-size:18px;margin:0 0 16px;padding:14px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--panel) 94%,var(--orc-tone))}
.orc-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--orc-tone);background:color-mix(in srgb,var(--orc-tone) 12%,transparent);font-size:24px}
.orc-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;margin-bottom:16px;border:1px solid color-mix(in srgb,var(--orc-tone) 28%,transparent);border-radius:14px;background:color-mix(in srgb,var(--orc-tone) 7%,var(--panel))}
.orc-summary strong{color:var(--orc-tone);font-size:24px}.orc-summary small{font-size:12px}
.owner-receipt-count-modal .hl-action-form{padding:0!important;border:0!important;background:transparent!important;margin:0}
.owner-receipt-count-modal label{display:grid;gap:8px;font-size:14px;font-weight:700;margin-bottom:14px}
.orc-money-input{display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--border);border-radius:13px;background:var(--panel)}
.orc-money-input:focus-within{border-color:var(--orc-tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--orc-tone) 15%,transparent)}
.orc-money-input>i{color:var(--orc-tone);font-size:21px}.orc-money-input>span{font-size:12px;color:var(--text2)}
.owner-receipt-count-modal .orc-money-input input{min-width:0;width:100%;height:56px;border:0!important;background:transparent!important;outline:none!important;box-shadow:none!important;font:800 24px Arial,sans-serif;text-align:right;color:var(--text1);margin:0!important}
.owner-receipt-count-modal textarea{min-height:88px!important;border-radius:13px;padding:12px;background:var(--panel);color:var(--text1)}
.owner-receipt-count-modal .modal-actions{display:flex;gap:10px;margin-top:18px!important}
.owner-receipt-count-modal .btn{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}
.owner-receipt-count-modal .btn-primary{flex:1;background:color-mix(in srgb,var(--orc-tone) 75%,#302128)!important;color:#fff!important}
.owner-receipt-count-modal #hl-count-close{flex:0 0 100px;background:var(--panel);color:var(--text1)}
@media(max-width:420px){.owner-receipt-count-overlay .owner-receipt-count-modal{padding:14px!important}.orc-summary{flex-wrap:wrap}.owner-receipt-count-modal h2{font-size:16px}}
.customer-currency-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;padding:8px;border:1px solid var(--border);border-radius:14px;background:var(--panel)}
.customer-currency-tabs .acct-pill-btn{min-width:150px;justify-content:center}
#cust_foreignSettings[hidden],#sl_currencyField[hidden],#sl_fxFields[hidden],#fp_fxFields[hidden],.fuel-checkbox-row[hidden],#fp_externalFunding_sourceField[hidden]{display:none!important}
@media(max-width:560px){.customer-currency-tabs .acct-pill-btn{flex:1;min-width:0}}

/* ---------- tablet dashboard: give cards room without changing the desktop layout ---------- */
@media (min-width: 761px) and (max-width: 1180px) {
    .sidebar { width: 218px; margin-inline-start: 20px; padding: 18px 12px; }
    .brand-row { gap: 8px; padding: 0 4px; }
    .logo-box { width: 44px; height: 44px; }
    .brand { font-size: 14px; }
    .main,
    html.employee-workspace-mode .main { padding: 22px 20px; }

    #view-dashboard .dash-grid { grid-template-columns: minmax(0, 1fr) minmax(224px, 252px); gap: 14px; }
    #view-dashboard .shortcuts-row { gap: 12px; }
    #view-dashboard .shortcut { padding: 14px 4px; }
    #view-dashboard .shortcut-label { font-size: 12.5px; line-height: 1.5; }

    /* stock levels and the price question need a full row each in the narrower main column */
    #view-dashboard .dash-bottom-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #view-dashboard .price-confirm-card { padding: 14px; }
    #view-dashboard .price-confirm-fuel-value { overflow: visible; text-overflow: clip; }

    #view-dashboard .side-card { padding: 14px; }
    #view-dashboard .cal-grid { gap: 4px; }
    #view-dashboard .activity-row-when { flex-shrink: 0; }
}

@media (min-width: 761px) and (max-width: 900px) {
    #view-dashboard .dash-grid { grid-template-columns: minmax(0, 1fr); }
}

/* attachment chip while its file is still uploading */
.attach-file-chip.is-uploading { opacity:.65; }
.destructive-confirm-modal.text-prompt-modal { grid-template-columns:minmax(0,1fr); }
.text-prompt-modal .destructive-confirm-copy h3 { margin:0; }
.text-prompt-modal .field { width:100%; margin:0; }
.text-prompt-modal .field input { width:100%; }

/* locked POS sign-ins, shown on the dashboard to whoever may unlock them */
.pos-lock-alert { display:grid; gap:8px; margin:0 0 16px; padding:12px 14px; border-radius:16px; border:1px solid color-mix(in srgb, var(--danger) 30%, transparent); background:color-mix(in srgb, var(--danger-bg) 80%, var(--panel)); }
.pos-lock-alert[hidden] { display:none; }
.pos-lock-alert-head { display:flex; align-items:center; gap:8px; color:var(--danger); font-size:14px; }
.pos-lock-alert-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:12px; background:color-mix(in srgb, var(--panel) 70%, transparent); }
.pos-lock-alert-row > div { display:grid; gap:2px; min-width:0; }
.pos-lock-alert-row span { color:var(--text2); font-size:12.5px; }
.pos-lock-alert-row .btn { flex-shrink:0; }
.employee-account-lock-alert .btn { margin-inline-start:auto; flex-shrink:0; }
@media (max-width:520px) { .pos-lock-alert-row { flex-direction:column; align-items:stretch; } }

/* today's dollar rate: under exchange-rate fields and at the foot of the price widget */
.daily-rate-note { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:12px; color:var(--text2); }
.daily-rate-note.is-missing { color:var(--danger); }
.daily-rate-note span { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.daily-rate-note .btn { flex-shrink:0; }
.dollar-rate-strip { display:flex; align-items:center; gap:8px; margin:0 16px 14px; padding:8px 10px; border-radius:12px; font-size:12.5px; border:1px solid var(--theme-stroke, rgba(255,255,255,.58)); background:color-mix(in srgb, var(--panel) 55%, transparent); }
.dollar-rate-strip strong { margin-inline-start:auto; }
.dollar-rate-strip.is-missing strong { color:var(--danger); font-weight:700; }
.dollar-rate-strip .btn { flex-shrink:0; }
input[readonly][aria-readonly="true"] { cursor:default; opacity:.85; }

/* the section tabs: no frame round an icon that is not selected, and a long title wraps inside its tab */
#mainContent .finance-tabbar .finance-tab-item:not(.active) .finance-card-icon {
    border: 0;
    background: transparent;
    box-shadow: none;
}

#mainContent .finance-tabbar .finance-tab-item {
    min-width: 0;
    padding-inline: 8px;
}

#mainContent .finance-tabbar .finance-tab-copy {
    min-width: 0;
    flex: 1 1 0;
}

#mainContent .finance-tabbar .finance-tab-item .finance-card-title {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.5;
    text-wrap: balance;
}

/* Sale correction on a wide screen: the form and the reason side by side, paired fields, no inner scroll. */
@media (min-width: 761px) {
    .overlay .modal.sale-correction-modal {
        width: min(1040px, calc(100vw - 56px));
        max-width: none;
    }

    .sale-correction-modal .expense-correction-body {
        grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
        align-items: stretch;
    }

    .sale-correction-modal .expense-correction-reason-panel {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .sale-correction-modal .expense-correction-reason-panel .field {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .sale-correction-modal .expense-correction-reason-panel textarea {
        flex: 1;
        min-height: 140px;
        resize: none;
    }

    /* Rate and quantity: two equal cards, label on top and the figure below. The total and the
       payment choice each take a full row, with the two payment buttons sharing it equally. */
    .sale-correction-modal .sale-correction-fields-grid {
        align-items: stretch;
        gap: 10px 12px;
    }

    .sale-correction-modal .sale-correction-fields-grid > #es_rateInfo,
    .sale-correction-modal .sale-correction-fields-grid > .field:has(#es_amount) {
        grid-column: auto;
    }

    .sale-correction-modal .sale-correction-fields-grid > #es_totalPreview,
    .sale-correction-modal .sale-correction-fields-grid > .sale-correction-payment-field {
        grid-column: 1 / -1;
    }

    .sale-correction-modal .sale-correction-fields-grid > #es_rateInfo,
    .sale-correction-modal .sale-correction-fields-grid > .field:has(#es_amount) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 4px;
        min-height: 76px;
        margin: 0;
        padding: 10px 14px;
        border-radius: 16px;
        border: 1px solid var(--theme-stroke, rgba(120,130,170,.22));
        background: var(--theme-glass, rgba(255,255,255,.78));
    }

    .sale-correction-modal #es_rateInfo > span:first-child,
    .sale-correction-modal .field:has(#es_amount) > label {
        margin: 0;
        font-size: 12px;
        font-weight: 750;
        color: var(--text2);
    }

    .sale-correction-modal #es_rateInfo > span:last-child {
        font-size: 19px;
        font-weight: 900;
        color: var(--text);
    }

    .sale-correction-modal .field:has(#es_amount) .amt-input {
        height: 32px !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        font-size: 19px;
        font-weight: 900;
        text-align: start;
    }

    .sale-correction-modal .field:has(#es_amount):focus-within {
        border-color: color-mix(in srgb, var(--correction-tone, #7c5ce0) 55%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--correction-tone, #7c5ce0) 16%, transparent);
    }

    .sale-correction-modal .sale-correction-fields-grid > #es_totalPreview {
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        border-radius: 16px;
    }

    .sale-correction-modal #es_totalPreview > span:last-child {
        font-size: 19px;
        font-weight: 900;
    }

    .sale-correction-modal .sale-correction-fields-grid .fuel-tile {
        min-height: 58px;
        flex-direction: row;
        gap: 10px;
    }

    .sale-correction-modal .sale-correction-fields-grid .fuel-tile i {
        font-size: 22px !important;
    }

    .sale-correction-modal .sale-correction-payment-field > label {
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 750;
        color: var(--text2);
    }

    .sale-correction-modal .sale-correction-payment-field .paymethod-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sale-correction-modal .sale-correction-payment-field .paymethod-btn {
        width: 100%;
        height: 50px;
        min-height: 50px;
        justify-content: center;
        font-size: 14px;
    }
}

/* Expense correction on a wide screen: the reason runs the full height beside the form, and a field left
   alone in its row (marked by markLoneCorrectionFields) takes the whole row. */
@media (min-width: 761px) {
    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-body {
        align-items: stretch;
    }

    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-reason-panel {
        align-self: stretch;
        display: flex;
        flex-direction: column;
    }

    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-reason-panel .field {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0;
    }

    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-reason-panel textarea {
        flex: 1;
        min-height: 140px;
        resize: none;
    }

    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-fields-grid > .is-alone {
        grid-column: 1 / -1;
    }
}

/* Paired fields in the expense correction window share one height, so the two boxes of a row line up. */
@media (min-width: 761px) {
    .expense-correction-modal:not(.sale-correction-modal) .expense-correction-fields-grid > .field :is(input:not([type=file]):not([type=checkbox]), select) {
        height: 50px !important;
        min-height: 50px !important;
        box-sizing: border-box;
    }
}