/* ============================================================================
   Page-specific presentation
   Loaded after site.css. Business selectors and JavaScript hooks are preserved.
   ============================================================================ */

/* Dashboard and legacy interactive summary tables */
.dashboard-page tbody > tr,
.dashboard-page .card-header,
.dashboard-row-action { cursor: pointer; }
.dashboard-page td.active { background: var(--surface-selected) !important; color: var(--text-primary); }

/* Tracking pages */
.tracking-page .value {
    display: block; width: 100%; min-height: var(--control-height-sm); margin: 0;
    padding: 6px 9px; border-top: 1px solid var(--border-color);
    background: var(--surface-1); color: var(--text-secondary); font-size: var(--fs-sm);
    transition: background-color var(--t-fast), color var(--t-fast);
}
.tracking-page .data-group {
    margin: 4px; padding: 6px 8px; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); background: var(--surface-1);
}
.tracking-page .info-div {
    position: relative; margin: 24px 0 8px; padding-top: 8px;
    border: 1px solid rgba(var(--brand-primary-rgb), .42);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm); background: var(--surface-1);
}
.tracking-page .div-info-text {
    position: absolute; top: -14px; left: 10px; padding: 2px 8px;
    border: 1px solid rgba(var(--brand-primary-rgb), .42); border-radius: var(--radius-sm);
    background: var(--surface-1); color: var(--color-primary-700); font-weight: 700;
}
.tracking-page .cursor { cursor: pointer; color: var(--brand-primary); }
.tracking-page .tdblue { background: var(--surface-selected) !important; }
.tracking-page .tdbrown { background: rgba(217, 119, 6, .14) !important; }
[data-theme="dark"] .tracking-page .tdbrown { background: rgba(217, 119, 6, .22) !important; }

/* Maintenance / diagnostic pages */
.table-cleanup-page .hover-bg-light:hover { background: var(--surface-hover); border-color: var(--border-strong) !important; }
.table-cleanup-page .bg-light-danger { background: rgba(220, 38, 38, .08); }
.table-cleanup-page .section-select-label,
.table-cleanup-page .table-select-label { cursor: pointer; }
.table-cleanup-page .table-select-label { color: var(--text-primary) !important; }

/* Workflow document widths and compound freight fields */
.document-card { width: 100%; max-width: 900px; }
.document-card--wide { width: 100%; max-width: 1100px; }
.document-card--full { width: 100%; max-width: none; }
.document-card--adaptive { width: 100%; max-width: var(--document-card-width, 900px); }
/* Selectize copies the source select's Bootstrap classes to its generated wrapper
   and dropdown. Neutralize native form-select decoration there so its SVG arrow
   cannot tile behind dropdown options. The actual arrow is drawn by Selectize. */
.selectize-control.form-select,
.selectize-control.form-select-sm {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
.selectize-dropdown.form-select,
.selectize-dropdown.form-select-sm {
    min-height: 0;
    padding: 0;
    background-image: none;
    background-repeat: no-repeat;
}
.master-selectize.selectize-control { width: 100%; }
.master-selectize .selectize-input,
.master-selectize .selectize-input.dropdown-active {
    min-height: 38px;
    padding: 7px 36px 7px 12px;
    display: flex;
    align-items: center;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}
.master-selectize.form-select-sm .selectize-input,
.master-selectize.form-select-sm .selectize-input.dropdown-active {
    min-height: 31px;
    padding: 4px 30px 4px 8px;
    font-size: .875rem;
}
.master-selectize .selectize-input.focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.master-selectize .selectize-dropdown,
.selectize-dropdown.master-selectize {
    overflow: hidden;
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1060;
}
.master-selectize .selectize-dropdown-content,
.selectize-dropdown.master-selectize .selectize-dropdown-content { max-height: 240px; }
.master-selectize .selectize-dropdown .option,
.selectize-dropdown.master-selectize .option { padding: 9px 12px; }
.master-selectize .selectize-dropdown .active,
.selectize-dropdown.master-selectize .active {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}
.master-selectize.trip-resource-select .selectize-dropdown [data-disabled],
.selectize-dropdown.master-selectize.trip-resource-select [data-disabled] {
    padding-left: 14px;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    background: #fff7ed;
    font-weight: 700;
    opacity: 1;
    cursor: not-allowed;
}
.master-selectize.trip-resource-select .selectize-dropdown [data-disabled]::before,
.selectize-dropdown.master-selectize.trip-resource-select [data-disabled]::before {
    content: "RUNNING";
    margin-right: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    color: #fff;
    background: #d97706;
    font-size: .65rem;
    letter-spacing: .04em;
}
select.trip-resource-select option:disabled {
    color: #92400e;
    background: #fff7ed;
}
.vehicle-trip-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .62rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}
.vehicle-trip-status--running {
    border: 1px solid #fed7aa;
    color: #92400e;
    background: #fff7ed;
    text-decoration: none;
}
.vehicle-trip-status--running:hover {
    border-color: #f59e0b;
    color: #78350f;
    background: #ffedd5;
}
.vehicle-trip-status--running span {
    padding: .12rem .38rem;
    border-radius: 999px;
    color: #fff;
    background: #d97706;
    font-size: .59rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.vehicle-trip-status--available {
    color: #166534;
    background: #dcfce7;
}
.master-selectize.selectize-control.is-disabled,
.master-selectize.selectize-control.is-disabled .selectize-input { opacity: 1; }
.master-selectize.selectize-control.is-disabled .selectize-input {
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
}
.master-selectize-add {
    width: 100%;
    min-height: 52px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-danger);
    background: var(--bs-danger-bg-subtle);
    text-align: left;
}
.master-selectize-add:hover,
.master-selectize-add:focus-visible {
    color: var(--bs-danger-text-emphasis);
    background: color-mix(in srgb, var(--bs-danger-bg-subtle) 72%, var(--bs-danger) 28%);
    outline: 0;
}
.master-selectize-add > span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    border-radius: 8px;
    color: #fff;
    background: var(--bs-danger);
    box-shadow: 0 4px 10px rgba(220, 53, 69, .2);
}
.master-selectize-add > strong { font-size: .86rem; }
.quick-add-master-modal { border: 0; border-radius: var(--radius-lg); }
.memo-party-select .selectize-control { width: 100%; }
.memo-party-select .selectize-input,
.memo-party-select .selectize-input.dropdown-active {
    min-height: 38px;
    padding: 7px 36px 7px 12px;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}
.memo-party-select .selectize-input.focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.memo-party-select .selectize-dropdown {
    overflow: hidden;
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1055;
}
.memo-party-select .selectize-dropdown-content { max-height: 240px; }
.memo-party-select .selectize-dropdown .option { padding: 9px 12px; }
.memo-party-select .selectize-dropdown .active {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}
.memo-party-add {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    text-align: left;
}
.memo-party-add:hover,
.memo-party-add:focus-visible { background: var(--bs-primary-bg-subtle); outline: 0; }
.memo-party-add > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    border-radius: 6px;
    color: #fff;
    background: var(--bs-primary);
}
.memo-party-add > strong { font-size: .82rem; }
.challan-master-select .selectize-control { width: 100%; }
.challan-master-select .selectize-input,
.challan-master-select .selectize-input.dropdown-active {
    min-height: 38px;
    padding: 7px 36px 7px 12px;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: none;
}
.challan-master-select .selectize-input.focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.challan-master-select .selectize-dropdown {
    overflow: hidden;
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    z-index: 1055;
}
.challan-master-select .selectize-dropdown-content { max-height: 240px; }
.challan-master-select .selectize-dropdown .option { padding: 9px 12px; }
.challan-master-select .selectize-dropdown .active {
    color: var(--bs-primary-text-emphasis);
    background: var(--bs-primary-bg-subtle);
}
.challan-master-add {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    text-align: left;
}
.challan-master-add:hover,
.challan-master-add:focus-visible { background: var(--bs-primary-bg-subtle); outline: 0; }
.challan-master-add > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    border-radius: 6px;
    color: #fff;
    background: var(--bs-primary);
}
.challan-master-add > strong { font-size: .82rem; }
.compound-weight > .form-control { flex: 0 0 55%; width: 55%; }
.compound-weight > .form-select { flex: 0 0 45%; width: 45%; }
.compound-rate > .form-control { flex: 1 1 60%; min-width: 0; }
.validation-message-hidden { display: none; }

/* Report and data administration sizing */
.filter-account { min-width: 260px; }
.filter-account .selectize-control { width: 100%; }
.register-branch-filter { min-width: 180px; }
.register-selectize-filter + .selectize-control { width: 100%; }
.register-report .selectize-input,
.register-report .selectize-input.dropdown-active {
    min-height: 31px;
    padding: 4px 30px 4px 8px;
    font-size: .875rem;
}
.table-picker { min-width: 220px; }
.row-limit { width: 90px; }
.table-filter { width: min(100%, 250px); }
.start-index { width: 80px; }
.content-narrow { width: 100%; max-width: 1000px; }
.col-account { width: 55%; }
.col-entry-type, .col-entry-amount { width: 20%; }
.jv-account-cell .selectize-control { width: 100%; }
.voucher-account-select + .selectize-control { width: 100%; }
.journal-account-add,
.voucher-account-add {
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    text-align: left;
}
.journal-account-add:hover,
.journal-account-add:focus-visible,
.voucher-account-add:hover,
.voucher-account-add:focus-visible { background: var(--bs-primary-bg-subtle); outline: 0; }
.journal-account-add > span,
.voucher-account-add > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    border-radius: 6px;
    color: #fff;
    background: var(--bs-primary);
}
.journal-account-add > strong,
.voucher-account-add > strong { font-size: .82rem; }
.col-date { width: 140px; }
.col-pending-count { width: 110px; }
.col-amount { width: 150px; }
.col-document { width: 120px; }
.col-payment-type { width: 140px; }
.col-action { width: 70px; }

/* Authentication */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); background: var(--page-bg); }
.auth-brand { position: relative; overflow: hidden; color: #fff; padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; justify-content: space-between; background: var(--gradient-brand); }
.auth-brand::after { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle at 80% 80%, rgba(255,255,255,.14), transparent 40%); }
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { display: flex; align-items: center; gap: 14px; }
.auth-logo .mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.15); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.auth-logo strong { font-family: var(--font-display); font-size: 1.15rem; }
.auth-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.1; margin: 0 0 16px; }
.auth-hero p { color: rgba(255,255,255,.82); font-size: 1.02rem; max-width: 30rem; }
.auth-features { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.auth-feature { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.92); font-weight: 500; }
.auth-feature .tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; flex-shrink: 0; }
.auth-feature svg { width: 15px; height: 15px; }
.auth-foot { color: rgba(255,255,255,.68); font-size: .8rem; }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--page-bg); position: relative; }
.auth-card { width: 100%; max-width: 400px; padding: 4px; }
.auth-card h2 { font-size: 1.65rem; margin-bottom: 6px; }
.auth-card .lead { color: var(--text-muted); font-size: var(--fs-md); margin-bottom: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.field .affix { position: relative; }
.field .affix svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); }
.field input { width: 100%; height: var(--control-height-lg); padding: 0 44px 0 42px; background: var(--surface-1); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-md); transition: var(--t-fast); }
.field input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.toggle-pass { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .72rem; font-weight: 700; color: var(--brand-primary); cursor: pointer; user-select: none; }
.btn-signin { width: 100%; height: var(--control-height-lg); border: 0; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-md); color: #fff; cursor: pointer; background: var(--gradient-primary); box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb),.28); transition: var(--t-fast); }
.btn-signin:hover { filter: brightness(1.06); box-shadow: 0 10px 24px rgba(var(--brand-primary-rgb),.36); }
.btn-signin:active { transform: translateY(1px); }
.auth-error { background: rgba(220,38,38,.10); border: 1px solid rgba(220,38,38,.25); color: var(--brand-danger); font-size: var(--fs-sm); font-weight: 500; padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 20px; }
.theme-fab { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--surface-1); color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; }
.theme-fab:hover { background: var(--surface-hover); color: var(--text-primary); }
.theme-fab svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
}
@media (max-width: 575.98px) {
    .auth-panel { padding: 28px 18px; align-items: flex-start; padding-top: max(72px, 12vh); }
    .field input { font-size: 1rem; }
    .document-card, .document-card--wide, .document-card--adaptive { max-width: 100%; }
    .filter-account, .table-picker { min-width: 100%; width: 100%; }
}

@media print {
    .tracking-page .info-div { box-shadow: none; border-color: #777; }
    .tracking-page .div-info-text { background: #fff; color: #000; border-color: #777; }
}

/* Vehicle accessory lifecycle */
.accessory-page { display: grid; gap: 18px; }
.accessory-heading,
.accessory-section-title,
.accessory-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.accessory-heading h1,
.accessory-section-title h2,
.accessory-card h2,
.accessory-entry-card h3 { margin: 0; }
.accessory-heading p,
.accessory-section-title p,
.accessory-card-head p { margin: 5px 0 0; color: var(--text-muted); }
.accessory-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); scrollbar-width: thin; }
.accessory-tabs a { padding: 9px 13px; border-radius: 9px; color: var(--text-muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.accessory-tabs a:hover,
.accessory-tabs a.active { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); }
.accessory-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.accessory-stats > div { min-height: 130px; padding: 18px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.accessory-stats span,
.accessory-stats small { display: block; color: var(--text-muted); }
.accessory-stats strong { display: block; margin: 8px 0 5px; font-size: 1.55rem; }
.accessory-card,
.accessory-entry-card { border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.accessory-card { overflow: hidden; }
.accessory-entry-card { position: relative; z-index: 2; padding: 20px; overflow: visible; }
.accessory-entry-card h3 { margin-bottom: 16px; font-size: 1.1rem; }
.accessory-card-head { padding: 16px 18px; border-bottom: 1px solid var(--border-color); }
.accessory-card-head h2 { font-size: 1.05rem; }
.accessory-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.accessory-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.accessory-table > :not(caption) > * > * { padding: 13px 16px; border-bottom-color: var(--border-color); vertical-align: middle; }
.accessory-table thead th { color: var(--text-muted); background: var(--surface-2); font-size: .79rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.accessory-table td strong,
.accessory-table td small { display: block; }
.accessory-table td small { margin-top: 3px; color: var(--text-muted); }
.accessory-event,
.accessory-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.accessory-status--allotted { color: #7c3aed; background: rgba(124, 58, 237, .12); }
.accessory-status--removed { color: #b45309; background: rgba(245, 158, 11, .15); }
.accessory-status--sold,
.accessory-status--consumed { color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 12%, transparent); }
.accessory-status--instock { color: var(--brand-success); background: color-mix(in srgb, var(--brand-success) 12%, transparent); }
.accessory-empty { padding: 30px 18px; color: var(--text-muted); text-align: center; }
.accessory-report-filter { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.accessory-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Vehicle document renewal and EMI lifecycle */
.vehicle-doc-page { display: grid; gap: 18px; }
.vehicle-doc-heading,
.vehicle-doc-section-title,
.vehicle-doc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.vehicle-doc-heading h1,
.vehicle-doc-section-title h2,
.vehicle-doc-card h2,
.vehicle-doc-entry-card h3 { margin: 0; }
.vehicle-doc-heading p,
.vehicle-doc-section-title p,
.vehicle-doc-card-head p { margin: 5px 0 0; color: var(--text-muted); }
.vehicle-doc-count { display: inline-flex; min-width: 22px; height: 22px; align-items: center; justify-content: center; margin-left: 6px; padding: 0 6px; border-radius: 999px; color: #fff; background: var(--brand-danger); font-size: .74rem; }
.vehicle-doc-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); scrollbar-width: thin; }
.vehicle-doc-tabs a { padding: 9px 13px; border-radius: 9px; color: var(--text-muted); font-weight: 700; text-decoration: none; white-space: nowrap; }
.vehicle-doc-tabs a:hover,
.vehicle-doc-tabs a.active { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); }
.vehicle-doc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vehicle-doc-stats > div { min-height: 128px; padding: 18px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.vehicle-doc-stats > div.danger { border-left: 4px solid var(--brand-danger); }
.vehicle-doc-stats > div.warning { border-left: 4px solid #f59e0b; }
.vehicle-doc-stats span,
.vehicle-doc-stats small { display: block; color: var(--text-muted); }
.vehicle-doc-stats strong { display: block; margin: 8px 0 5px; font-size: 1.55rem; }
.vehicle-doc-card,
.vehicle-doc-entry-card { border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.vehicle-doc-card { overflow: hidden; }
.vehicle-doc-entry-card { position: relative; z-index: 2; padding: 20px; overflow: visible; }
.vehicle-doc-entry-card h3 { margin-bottom: 16px; font-size: 1.1rem; }
.vehicle-doc-card-head { padding: 16px 18px; border-bottom: 1px solid var(--border-color); }
.vehicle-doc-card-head h2 { font-size: 1.05rem; }
.vehicle-doc-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.vehicle-doc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.vehicle-doc-table > :not(caption) > * > * { padding: 13px 16px; border-bottom-color: var(--border-color); vertical-align: middle; }
.vehicle-doc-table thead th { color: var(--text-muted); background: var(--surface-2); font-size: .79rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.vehicle-doc-table td strong,
.vehicle-doc-table td small { display: block; }
.vehicle-doc-table td small { margin-top: 3px; color: var(--text-muted); }
.vehicle-doc-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.vehicle-doc-status.valid { color: var(--brand-success); background: color-mix(in srgb, var(--brand-success) 12%, transparent); }
.vehicle-doc-status.upcoming { color: #b45309; background: rgba(245, 158, 11, .15); }
.vehicle-doc-status.overdue { color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 13%, transparent); }
.vehicle-doc-status.neutral { color: var(--text-muted); background: var(--surface-2); }
.vehicle-doc-empty { padding: 30px 18px; color: var(--text-muted); text-align: center; }
.vehicle-doc-row-actions,
.vehicle-doc-payment,
.vehicle-doc-filter-actions { display: flex; align-items: center; gap: 8px; }
.vehicle-doc-payment { min-width: 480px; }
.vehicle-doc-payment .form-control { min-width: 115px; }
.vehicle-doc-payment .form-control:nth-of-type(3) { min-width: 140px; }
.vehicle-doc-report-filter { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) auto; gap: 12px; align-items: end; }

@media (max-width: 1050px) {
    .vehicle-doc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vehicle-doc-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .vehicle-doc-heading,
    .vehicle-doc-section-title,
    .vehicle-doc-card-head { align-items: stretch; flex-direction: column; }
    .vehicle-doc-stats,
    .vehicle-doc-report-filter { grid-template-columns: 1fr; }
    .vehicle-doc-filter-actions { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
    .accessory-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .accessory-report-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .accessory-heading,
    .accessory-section-title,
    .accessory-card-head { align-items: stretch; flex-direction: column; }
    .accessory-stats,
    .accessory-form-grid,
    .accessory-report-filter { grid-template-columns: 1fr; }
}

/* ============================================================================
   Rich dashboard — inspired by dense enterprise analytics layouts while using
   transport-specific data and the application's blue/indigo identity.
   ============================================================================ */
.dashboard-pro { display: grid; gap: 18px; }
.dashboard-welcome {
    position: relative; min-height: 224px; overflow: hidden;
    display: flex; align-items: stretch; justify-content: space-between;
    padding: clamp(24px, 4vw, 42px); border-radius: 22px;
    color: #fff; background: var(--gradient-brand); box-shadow: 0 20px 45px rgba(30,58,138,.22);
}
.dashboard-welcome::before { content: ""; position: absolute; width: 360px; height: 360px; right: -110px; top: -180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.025); }
.dashboard-welcome__content { position: relative; z-index: 2; max-width: 650px; }
.dashboard-eyebrow, .workflow-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-eyebrow { padding: 6px 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17); border-radius: var(--radius-pill); }
.dashboard-welcome h1 { color: #fff; margin: 0 0 8px; font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.dashboard-welcome p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0; font-size: var(--fs-md); }
.dashboard-welcome__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dashboard-welcome .btn-light { color: var(--color-primary-900); background: #fff; border-color: #fff; box-shadow: 0 8px 18px rgba(15,23,42,.14); }
.btn-hero-ghost { color: #fff; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); }
.btn-hero-ghost:hover { color: #fff; background: rgba(255,255,255,.16); }
.dashboard-welcome__visual { position: relative; z-index: 1; flex: 0 0 32%; min-width: 260px; }
.route-orbit { position: absolute; border: 2px dashed rgba(255,255,255,.26); border-radius: 50%; transform: rotate(-14deg); }
.route-orbit--one { width: 330px; height: 130px; right: -20px; top: 30px; }
.route-orbit--two { width: 230px; height: 84px; right: 28px; top: 54px; opacity: .65; }
.dashboard-truck { position: absolute; right: 118px; top: 68px; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 15px 35px rgba(15,23,42,.18); transform: rotate(5deg); font-size: 2rem; }
.route-pin { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-900); background: #fff; box-shadow: 0 8px 18px rgba(15,23,42,.2); }
.route-pin--start { left: 8px; top: 102px; }.route-pin--end { right: 0; top: 72px; }

.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.metric-card { position: relative; min-height: 160px; overflow: hidden; padding: 17px 18px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-xs); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--metric-color) 36%, var(--border-color)); }
.metric-card::after { content: ""; position: absolute; width: 100px; height: 100px; right: -52px; top: -54px; border-radius: 50%; background: color-mix(in srgb, var(--metric-color) 10%, transparent); }
.metric-card--primary { --metric-color: var(--brand-primary); }.metric-card--indigo { --metric-color: var(--color-indigo-600); }.metric-card--warning { --metric-color: var(--brand-warning); }.metric-card--success { --metric-color: var(--brand-success); }
.metric-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--metric-color); background: color-mix(in srgb, var(--metric-color) 12%, transparent); }
.metric-trend { color: var(--metric-color); font-size: .68rem; font-weight: 750; }
.metric-card > strong { display: block; font-family: var(--font-display); color: var(--text-primary); font-size: 1.65rem; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-card > span:not(.metric-trend) { display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-xs); }
.metric-spark { height: 30px; margin-top: 10px; color: var(--metric-color); }
.metric-spark--bars { display: flex; align-items: end; gap: 5px; }.metric-spark--bars i { width: 6px; border-radius: 4px 4px 1px 1px; background: currentColor; opacity: .45; }.metric-spark--bars i:nth-child(1){height:9px}.metric-spark--bars i:nth-child(2){height:17px}.metric-spark--bars i:nth-child(3){height:12px}.metric-spark--bars i:nth-child(4){height:24px;opacity:1}.metric-spark--bars i:nth-child(5){height:15px}.metric-spark--bars i:nth-child(6){height:27px}.metric-spark--bars i:nth-child(7){height:20px}
.metric-spark svg { width: 100%; height: 100%; overflow: visible; }.metric-spark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.metric-dots { display: flex; align-items: center; gap: 7px; height: 30px; margin-top: 10px; }.metric-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--metric-color); opacity: .24; }.metric-dots i:nth-child(2),.metric-dots i:nth-child(4){transform:scale(1.45);opacity:.55}.metric-dots i:nth-child(3){transform:scale(1.8);opacity:1}
.metric-progress { height: 5px; margin-top: 20px; border-radius: 10px; background: color-mix(in srgb, var(--metric-color) 12%, transparent); overflow: hidden; }.metric-progress i { display: block; width: var(--progress); height: 100%; min-width: 4px; background: var(--metric-color); border-radius: inherit; }

.dashboard-main-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(290px,.85fr); gap: 16px; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.8fr); gap: 16px; }
.dashboard-panel { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--surface-1); box-shadow: var(--shadow-xs); }
.dashboard-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; border-bottom: 1px solid var(--border-subtle); }
.dashboard-panel__header h2 { margin: 2px 0 0; font-size: 1rem; }
.panel-kicker { color: var(--text-muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.panel-period { padding: 6px 9px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--surface-2); font-size: .7rem; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; white-space: nowrap; }

.volume-chart { position: relative; height: 245px; display: flex; align-items: stretch; justify-content: space-around; gap: 12px; padding: 34px 24px 28px; }
.chart-gridlines { position: absolute; inset: 26px 20px 44px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }.chart-gridlines i { display: block; border-top: 1px dashed var(--border-subtle); }
.volume-bar { position: relative; z-index: 1; flex: 1; max-width: 58px; display: flex; flex-direction: column; justify-content: end; align-items: center; height: 100%; gap: 7px; }
.volume-bar > i { width: clamp(18px, 50%, 34px); height: var(--bar-height); min-height: 5px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--color-indigo-500), var(--brand-primary)); box-shadow: 0 7px 16px rgba(var(--brand-primary-rgb),.18); transition: height .45s var(--ease), filter var(--t-fast); }.volume-bar:hover > i { filter: brightness(1.12); }
.volume-bar__value { color: var(--text-secondary); font-size: .68rem; font-weight: 800; }.volume-bar small { color: var(--text-muted); font-size: .68rem; }
.volume-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 18px 18px; padding: 14px 0; border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: var(--surface-2); }
.volume-summary div { padding: 0 18px; border-right: 1px solid var(--border-color); }.volume-summary div:last-child { border: 0; }.volume-summary span { display: block; color: var(--text-muted); font-size: .68rem; }.volume-summary strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 1rem; }

.pending-list { padding: 6px 14px 13px; }.pending-item { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px 6px; border-bottom: 1px solid var(--border-subtle); color: inherit; transition: transform var(--t-fast), background var(--t-fast); }.pending-item:last-child { border: 0; }.pending-item:hover { color: inherit; transform: translateX(3px); }.pending-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }.pending-icon--amber{color:#D97706;background:rgba(217,119,6,.12)}.pending-icon--blue{color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.12)}.pending-icon--indigo{color:var(--color-indigo-600);background:rgba(79,70,229,.12)}.pending-icon--green{color:var(--brand-success);background:rgba(22,163,74,.12)}.pending-icon--red{color:var(--brand-danger);background:rgba(220,38,38,.1)}
.pending-item span:nth-child(2) { min-width: 0; }.pending-item strong,.pending-item small { display: block; }.pending-item strong { color: var(--text-primary); font-size: var(--fs-sm); }.pending-item small { color: var(--text-muted); font-size: .68rem; }.pending-item b { min-width: 30px; padding: 4px 7px; border-radius: var(--radius-pill); text-align: center; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb),.09); font-size: .72rem; }

.cash-strip { display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; align-items: center; gap: 28px; padding: 18px 20px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: linear-gradient(100deg, rgba(var(--brand-primary-rgb),.06), var(--surface-1) 35%); box-shadow: var(--shadow-xs); }
.cash-strip__lead { display: flex; align-items: center; gap: 12px; }.cash-strip__lead > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb),.12); }.cash-strip small { display: block; color: var(--text-muted); font-size: .68rem; }.cash-strip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }.cash-stat > strong { display: block; margin: 2px 0 7px; font-size: 1rem; }.cash-stat__bar { display: block; width: 100%; height: 4px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }.cash-stat__bar i { display:block;height:100%;border-radius:inherit}.cash-stat__bar--in i{width:72%;background:var(--brand-success)}.cash-stat__bar--out i{width:48%;background:var(--brand-warning)}

.dashboard-table-wrap { border: 0; border-radius: 0; }.dashboard-table thead th { background: var(--surface-2) !important; }.dashboard-table td strong,.dashboard-table td small { display: block; }.dashboard-table td small { color: var(--text-muted); font-size: .68rem; }.memo-number { font-family: var(--font-display); font-weight: 800; }.stage-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-pill); font-size: .67rem; font-weight: 700; white-space: nowrap; }.stage-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.stage-badge--success{color:#15803D;background:rgba(22,163,74,.1)}.stage-badge--info{color:#0369A1;background:rgba(2,132,199,.1)}.stage-badge--primary{color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.1)}.stage-badge--warning{color:#B45309;background:rgba(217,119,6,.1)}
.icon-action { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--border-color); border-radius: 9px; color: var(--text-secondary); background: var(--surface-1); }.icon-action:hover { color: #fff; border-color: transparent; background: var(--gradient-primary); transform: translateY(-1px); }
.quick-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 14px; }.quick-action { padding: 13px; border: 1px solid var(--border-color); border-radius: var(--radius-md); color: inherit; background: var(--surface-2); transition: transform var(--t), border-color var(--t), background var(--t); }.quick-action:hover { color: inherit; transform: translateY(-2px); border-color: rgba(var(--brand-primary-rgb),.35); background: var(--surface-hover); }.quick-action > span { width: 32px; height: 32px; display:grid;place-items:center;margin-bottom:10px;border-radius:9px;color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.1)}.quick-action strong,.quick-action small{display:block}.quick-action strong{font-size:.76rem;color:var(--text-primary)}.quick-action small{margin-top:2px;font-size:.65rem;color:var(--text-muted)}
.master-snapshot { display: grid; grid-template-columns: repeat(4,1fr); margin: 0 14px 14px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }.master-snapshot div{text-align:center;border-right:1px solid var(--border-subtle)}.master-snapshot div:last-child{border:0}.master-snapshot strong,.master-snapshot span{display:block}.master-snapshot strong{color:var(--text-primary);font-size:.92rem}.master-snapshot span{color:var(--text-muted);font-size:.6rem}

/* Document workflow — pipeline table and summary */
.workflow-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 26px; border: 1px solid rgba(var(--brand-primary-rgb),.18); border-radius: var(--radius-lg); background: linear-gradient(110deg, rgba(var(--brand-primary-rgb),.10), rgba(79,70,229,.05) 58%, var(--surface-1)); }
.workflow-hero::after { content:""; position:absolute; width:190px;height:190px;right:-70px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.15),transparent 68%);pointer-events:none }.workflow-hero__eyebrow{color:var(--brand-primary);margin-bottom:7px}.workflow-hero h1{margin:0;font-size:clamp(1.5rem,3vw,2rem)}.workflow-hero p{margin:5px 0 0;color:var(--text-muted)}.workflow-hero__actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px}.workflow-hero .btn-outline-dark{--bs-btn-color:var(--text-secondary);--bs-btn-border-color:var(--border-color);--bs-btn-hover-color:var(--text-primary);--bs-btn-hover-bg:var(--surface-hover);--bs-btn-hover-border-color:var(--border-strong)}
.workflow-stat-card { position:relative;overflow:hidden;height:100%;border:1px solid var(--border-color);box-shadow:var(--shadow-xs)!important;--stat-color:var(--brand-primary) }.workflow-stat-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--stat-color)}.workflow-stat-card::after{content:"";position:absolute;width:72px;height:72px;right:-36px;top:-37px;border-radius:50%;background:color-mix(in srgb,var(--stat-color) 10%,transparent)}.workflow-stat-card--primary{--stat-color:var(--brand-primary)}.workflow-stat-card--warning{--stat-color:var(--brand-warning)}.workflow-stat-card--info{--stat-color:var(--brand-info)}.workflow-stat-card--indigo{--stat-color:var(--color-indigo-600)}.workflow-stat-card--success{--stat-color:var(--brand-success)}.workflow-stat-card--danger{--stat-color:var(--brand-danger)}.workflow-stat-card .card-body{padding:14px 15px!important}.workflow-stat-card .text-xs{color:var(--text-muted)!important;font-size:.62rem;font-weight:800!important;letter-spacing:.05em}.workflow-stat-card .h5{font-size:1.35rem}.workflow-stat-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--stat-color);background:color-mix(in srgb,var(--stat-color) 11%,transparent);font-size:.95rem}
.workflow-matrix{border:1px solid var(--border-color);box-shadow:var(--shadow-sm)!important}.workflow-matrix__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--surface-1)}.workflow-matrix__header h2{margin:2px 0 0;font-size:1rem}.workflow-matrix__hint{color:var(--text-muted);font-size:.68rem}.workflow-matrix .card-body{padding:14px}.workflow-matrix .dataTables_wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.workflow-matrix .dt-buttons{order:1;margin:0 auto 0 0}.workflow-matrix .dataTables_filter{order:2;margin-left:auto}.workflow-matrix .table-responsive{order:3;flex:0 0 100%;border-radius:var(--radius-md)}.workflow-matrix .dataTables_info{order:4}.workflow-matrix .dataTables_paginate{order:5;margin-left:auto}.workflow-matrix .dt-buttons .btn{min-height:34px;padding:6px 10px;border-color:var(--border-color);color:var(--text-secondary);background:var(--surface-1)}
.workflow-table{min-width:1050px}.workflow-table thead th{padding:13px 14px!important;border-bottom:0!important;color:var(--text-secondary)!important;background:var(--surface-2)!important;font-size:.68rem!important}.workflow-table thead th:first-child{border-radius:10px 0 0 0}.workflow-table thead th:last-child{border-radius:0 10px 0 0}.workflow-table tbody tr{background:var(--surface-1);transition:transform var(--t-fast),box-shadow var(--t-fast)}.workflow-table tbody tr:hover>*{background:var(--surface-hover)!important}.workflow-table td{position:relative;min-width:185px;padding:16px 14px!important;vertical-align:top!important;border-right:1px solid var(--border-subtle);border-bottom:10px solid var(--page-bg)!important;background:var(--surface-1)!important}.workflow-table td:last-child{border-right:0;min-width:220px}.workflow-stage::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--stage-color);opacity:.8}.workflow-stage--memo{--stage-color:var(--brand-primary)}.workflow-stage--challan{--stage-color:var(--brand-warning)}.workflow-stage--bill{--stage-color:var(--brand-info)}.workflow-stage--pod{--stage-color:var(--color-indigo-600)}.workflow-stage--pending{--stage-color:var(--brand-danger)}.workflow-stage .border-top{border-color:var(--border-subtle)!important}.workflow-stage .btn-group{gap:5px}.workflow-stage .btn-group>.btn,.workflow-stage .btn-group>form>.btn{border-radius:8px!important}.workflow-stage .btn.w-100{justify-content:flex-start;border-style:dashed;background:var(--surface-2)}.workflow-stage .badge{width:100%;justify-content:flex-start;white-space:normal;text-align:left;border-radius:8px}
.workflow-matrix #workflowTable_wrapper > table { order: 3; flex: 0 0 100%; }

/* A calmer, card-based workflow report */
.workflow-table{min-width:1280px;border-collapse:separate!important;border-spacing:0 10px!important;background:transparent!important}
.workflow-table thead th{padding:10px 8px!important;background:transparent!important}
.workflow-table thead th:first-child,.workflow-table thead th:last-child{border-radius:0}
.stage-column-title{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:.69rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.stage-column-title>i{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.1);font-size:.64rem;font-style:normal}
.stage-column-title--attention>i{color:var(--brand-danger);background:rgba(220,38,38,.09)}
.workflow-table tbody tr,.workflow-table tbody tr:hover{background:transparent!important;box-shadow:none!important;transform:none!important}
.workflow-table tbody tr:hover>*{background:transparent!important}
.workflow-table td{min-width:0;padding:0 5px!important;border:0!important;background:transparent!important}
.workflow-table td:first-child{width:280px}.workflow-table td:nth-child(2){width:235px}.workflow-table td:nth-child(3){width:215px}.workflow-table td:nth-child(4){width:215px}.workflow-table td:last-child{width:265px;min-width:265px}
.workflow-stage::before,.workflow-table tbody tr:hover td:first-child::before{display:none!important}
.workflow-record,.workflow-empty-stage,.workflow-attention{position:relative;display:flex;flex-direction:column;min-height:250px;padding:14px;border:1px solid var(--border-color);border-top:3px solid var(--stage-color);border-radius:13px;background:var(--surface-1);box-shadow:0 3px 12px rgba(15,23,42,.035);transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.workflow-record:hover,.workflow-empty-stage:hover,.workflow-attention:hover{border-color:color-mix(in srgb,var(--stage-color) 35%,var(--border-color));box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.workflow-record__head{display:grid;grid-template-columns:38px minmax(0,1fr) 22px;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}
.workflow-record__icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--stage-color);background:color-mix(in srgb,var(--stage-color) 11%,transparent);font-size:.9rem}
.workflow-record__head>div{min-width:0}.workflow-record__head>div span,.workflow-record__head>div strong{display:block}.workflow-record__head>div span{margin-bottom:1px;color:var(--text-muted);font-size:.61rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.workflow-record__head>div strong{overflow:hidden;color:var(--text-primary);font-size:.84rem;text-overflow:ellipsis;white-space:nowrap}
.workflow-record__done{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;color:var(--brand-success);background:rgba(22,163,74,.11);font-size:.58rem}
.workflow-record__meta{display:grid;gap:7px;padding:12px 1px}.workflow-record__meta>span{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;color:var(--text-secondary);font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.workflow-record__meta i{width:14px;color:var(--text-muted);text-align:center}
.workflow-money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:9px}.workflow-money-grid>div{min-width:0;padding:8px 6px;border-radius:8px;background:var(--surface-2)}.workflow-money-grid small,.workflow-money-grid strong{display:block}.workflow-money-grid small{color:var(--text-muted);font-size:.55rem}.workflow-money-grid strong{margin-top:2px;overflow:hidden;color:var(--text-primary);font-size:.69rem;font-variant-numeric:tabular-nums;text-overflow:ellipsis}.workflow-money-grid .is-balance{background:rgba(var(--brand-primary-rgb),.08)}.workflow-money-grid .is-balance strong{color:var(--brand-primary)}
.workflow-single-value{margin-top:1px;padding:11px 12px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--surface-2)}.workflow-single-value small,.workflow-single-value strong{display:block}.workflow-single-value small{color:var(--text-muted);font-size:.6rem}.workflow-single-value strong{margin-top:2px;color:var(--text-primary);font-size:.88rem;font-variant-numeric:tabular-nums}
.workflow-details{margin-bottom:8px;border:1px solid var(--border-subtle);border-radius:8px;background:var(--surface-2)}.workflow-details summary{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;color:var(--text-secondary);font-size:.62rem;font-weight:700;cursor:pointer;list-style:none}.workflow-details summary::-webkit-details-marker{display:none}.workflow-details summary i{font-size:.5rem;transition:transform var(--t-fast)}.workflow-details[open] summary i{transform:rotate(180deg)}.workflow-details__body{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 9px;border-top:1px solid var(--border-subtle)}.workflow-details__body span,.workflow-details__body b{display:block}.workflow-details__body span{color:var(--text-primary);font-size:.62rem}.workflow-details__body b{margin-bottom:1px;color:var(--text-muted);font-size:.54rem;font-weight:600}
.workflow-record__actions{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:11px}.workflow-record__actions form{display:flex!important}.workflow-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:29px;padding:5px 9px;border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);background:var(--surface-1);font-size:.63rem;font-weight:700;line-height:1;transition:all var(--t-fast)}button.workflow-action{font-family:inherit}.workflow-action:hover{color:var(--brand-primary);border-color:rgba(var(--brand-primary-rgb),.35);background:rgba(var(--brand-primary-rgb),.07);transform:translateY(-1px)}.workflow-action--danger:hover{color:var(--brand-danger);border-color:rgba(220,38,38,.28);background:rgba(220,38,38,.07)}
.workflow-empty-stage{align-items:center;justify-content:center;text-align:center}.workflow-empty-stage>span{width:44px;height:44px;display:grid;place-items:center;margin-bottom:11px;border-radius:12px;color:var(--stage-color);background:color-mix(in srgb,var(--stage-color) 10%,transparent)}.workflow-empty-stage>strong{color:var(--text-primary);font-size:.77rem}.workflow-empty-stage>small{max-width:155px;margin:3px auto 14px;color:var(--text-muted);font-size:.63rem;line-height:1.45}.workflow-empty-stage>.btn{width:auto!important;justify-content:center!important;gap:6px;padding:6px 10px!important;border-style:solid!important;border-color:color-mix(in srgb,var(--stage-color) 45%,var(--border-color))!important;color:var(--stage-color)!important;background:transparent!important;font-size:.62rem}.workflow-empty-stage>.btn:hover{color:#fff!important;background:var(--stage-color)!important}.workflow-empty-stage--locked{filter:saturate(.3);opacity:.72}.workflow-empty-stage--locked>span{color:var(--text-muted);background:var(--surface-3)}
.workflow-attention{gap:11px}.workflow-attention__head{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--border-subtle)}.workflow-attention__head>span{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;color:var(--brand-danger);background:rgba(220,38,38,.09)}.workflow-attention.is-clear{--stage-color:var(--brand-success)}.workflow-attention.is-clear .workflow-attention__head>span{color:var(--brand-success);background:rgba(22,163,74,.1)}.workflow-attention__head small,.workflow-attention__head strong{display:block}.workflow-attention__head small{color:var(--text-muted);font-size:.57rem;text-transform:uppercase;letter-spacing:.06em}.workflow-attention__head strong{margin-top:1px;color:var(--text-primary);font-size:.76rem}
.workflow-attention__items{display:grid;gap:6px}.attention-chip{display:grid;grid-template-columns:25px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:7px 8px;border:1px solid var(--border-subtle);border-radius:9px;background:var(--surface-2)}.attention-chip>i{grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;border-radius:7px;color:var(--chip-color);background:color-mix(in srgb,var(--chip-color) 11%,transparent);font-size:.64rem}.attention-chip>b{color:var(--text-primary);font-size:.64rem}.attention-chip>small{color:var(--text-muted);font-size:.56rem}.attention-chip--warning{--chip-color:var(--brand-warning)}.attention-chip--info{--chip-color:var(--brand-info)}.attention-chip--neutral{--chip-color:var(--text-secondary)}.attention-chip--success{--chip-color:var(--brand-success)}.attention-chip--danger{--chip-color:var(--brand-danger)}.workflow-attention__clear{display:grid;place-items:center;gap:8px;min-height:130px;color:var(--text-muted);font-size:.66rem}.workflow-attention__clear i{width:35px;height:35px;display:grid;place-items:center;border-radius:50%;color:var(--brand-success);background:rgba(22,163,74,.1)}

/* Subtle visual lift shared across otherwise-minimal CRUD/report pages */
.app-content { position: relative; background-image: radial-gradient(700px 220px at 88% -80px, rgba(var(--brand-primary-rgb),.07), transparent 70%); }
.app-content > h3, .app-content > h2 { position:relative;margin-bottom:18px;padding-bottom:12px }.app-content > h3::after,.app-content > h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;border-radius:3px;background:var(--gradient-primary)}
.app-content > form:not(.d-inline), .app-content > dl.row { padding:clamp(17px,2.5vw,24px);border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-xs) }
.app-content .card:not(.workflow-stat-card):not(.metric-card):hover { border-color:color-mix(in srgb,var(--brand-primary) 16%,var(--border-color)); }
.card-header h5,.card-header h6{letter-spacing:-.005em}.card-header>h5 i,.card-header>h6 i{color:var(--brand-primary)}
.table tbody td:first-child{position:relative}.table-hover tbody tr:hover td:first-child::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;border-radius:3px;background:var(--brand-primary)}

@media (max-width: 1199.98px){.dashboard-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-main-grid,.dashboard-lower-grid{grid-template-columns:1fr}.cash-strip{grid-template-columns:1fr 1fr}.cash-strip__lead{grid-column:1/-1}.dashboard-welcome__visual{flex-basis:28%;min-width:220px}}
@media (max-width: 767.98px){.dashboard-welcome{min-height:auto}.dashboard-welcome__visual{display:none}.dashboard-main-grid,.dashboard-lower-grid{display:grid}.cash-strip{grid-template-columns:1fr}.cash-strip__lead{grid-column:auto}.cash-strip .btn{width:100%}.workflow-hero{align-items:flex-start;flex-direction:column}.workflow-hero__actions{width:100%}.workflow-hero__actions .btn{flex:1}.workflow-matrix__header{align-items:flex-start;flex-direction:column}.workflow-matrix__hint{display:none}.volume-chart{height:220px;padding-inline:12px}.volume-summary div{padding-inline:10px}}
@media (max-width: 575.98px){.dashboard-pro{gap:12px}.dashboard-welcome{padding:21px;border-radius:var(--radius-lg)}.dashboard-kpis{grid-template-columns:1fr}.metric-card{min-height:145px}.dashboard-panel__header{padding:14px}.volume-summary{margin:0 12px 12px}.quick-action-grid{padding:12px}.cash-strip{gap:16px;padding:16px}.workflow-stat-grid>div{width:50%}.workflow-stat-card .card-body{padding:12px!important}.workflow-hero__actions{flex-direction:column}.workflow-hero__actions .btn{width:100%}.workflow-matrix .dataTables_filter{width:100%;margin:0}.workflow-matrix .dataTables_filter label,.workflow-matrix .dataTables_filter input{width:100%;margin:0!important}.workflow-matrix .dt-buttons{width:100%}.workflow-matrix .dt-buttons .btn{flex:1}.master-snapshot{grid-template-columns:repeat(2,1fr);row-gap:10px}.master-snapshot div:nth-child(2){border-right:0}}

@media print {.dashboard-welcome,.workflow-hero{background:#fff!important;color:#000!important;box-shadow:none}.dashboard-welcome *,.workflow-hero *{color:#000!important}.dashboard-welcome__visual,.dashboard-welcome__actions,.workflow-hero__actions,.quick-panel{display:none!important}.dashboard-kpis,.dashboard-main-grid,.dashboard-lower-grid{display:block}.metric-card,.dashboard-panel,.cash-strip{margin-bottom:10px;break-inside:avoid}.volume-bar>i{background:#777!important}}

/* AI help support queue */
.service-token{color:var(--brand-primary);font-size:.7rem;font-variant-numeric:tabular-nums;white-space:nowrap}.ticket-question{min-width:250px;max-width:390px}.ticket-question strong,.ticket-question small{display:block}.ticket-question strong{overflow:hidden;color:var(--text-primary);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.ticket-question small{margin-top:3px;color:var(--text-muted);font-size:.59rem}.ticket-detail-row:hover{box-shadow:none!important}.ticket-detail-row>td{background:transparent!important}.ticket-review{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin:5px 12px 14px;padding:17px;border:1px solid var(--border-color);border-radius:12px;background:var(--surface-2)}.ticket-transcript{margin-top:8px;padding:9px 11px;border-radius:9px;background:var(--surface-1)}.ticket-transcript strong{display:block;margin-bottom:3px;color:var(--text-muted);font-size:.55rem;text-transform:uppercase}.ticket-transcript p{margin:0;color:var(--text-secondary);font-size:.66rem;line-height:1.5;white-space:pre-line}.ticket-transcript--user{border-left:3px solid var(--brand-primary)}.ticket-transcript--assistant{border-left:3px solid var(--brand-success)}.ticket-review__resolution textarea{margin-top:8px;font-size:.7rem}.ticket-review__resolution .alert{margin-top:8px;font-size:.68rem;white-space:pre-line}@media(max-width:767.98px){.ticket-review{grid-template-columns:1fr}}

/* Trip operations */
.trip-page{display:grid;gap:20px}.trip-page__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.trip-page__heading h1{margin:2px 0 4px;font-size:clamp(1.55rem,3vw,2.1rem);letter-spacing:-.03em}.trip-page__heading p{margin:0;color:var(--text-muted)}.trip-eyebrow{color:var(--brand-primary);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.trip-form-card,.trip-section,.trip-list-card{overflow:hidden;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-1);box-shadow:var(--shadow-xs)}.trip-form-card{max-width:900px;padding:clamp(18px,3vw,28px)}.trip-form-actions{display:flex;gap:9px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-subtle)}
.trip-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.trip-summary-card{position:relative;overflow:hidden;padding:18px;border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-1)}.trip-summary-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brand-primary)}.trip-summary-card--days::before{background:#8b5cf6}.trip-summary-card--distance::before{background:#2563eb}.trip-summary-card span,.trip-summary-card small,.trip-summary-card strong{display:block}.trip-summary-card span{color:var(--text-muted);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.trip-summary-card strong{margin:5px 0 2px;color:var(--text-primary);font-size:1.25rem;font-variant-numeric:tabular-nums}.trip-summary-card small{color:var(--text-muted);font-size:.62rem}
.trip-section__header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--border-subtle)}.trip-section__header>div{display:flex;align-items:center;gap:12px}.trip-section__header h2{margin:0;color:var(--text-primary);font-size:1rem}.trip-section__header p{margin:2px 0 0;color:var(--text-muted);font-size:.66rem}.trip-section__step{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;color:var(--brand-primary);background:rgba(var(--brand-primary-rgb),.1);font-size:.65rem;font-weight:800}.trip-memo-actions{display:flex;align-items:center;gap:8px}.trip-inline-form{display:flex;align-items:center;gap:8px;min-width:min(100%,520px)}.trip-inline-form .form-select{min-width:280px}.trip-entry-table{min-width:760px}.trip-expense-table{min-width:1050px}.trip-entry-table thead th{padding:10px 13px;color:var(--text-muted);background:var(--surface-2);font-size:.62rem;text-transform:uppercase;letter-spacing:.04em}.trip-entry-table tbody td,.trip-entry-table tfoot th{padding:11px 13px;border-color:var(--border-subtle);font-size:.7rem}.trip-entry-table tfoot th{background:var(--surface-2)}.trip-entry-table .money{font-variant-numeric:tabular-nums}.trip-table-empty{padding:28px!important;color:var(--text-muted);text-align:center}.trip-add-row td{background:rgba(var(--brand-primary-rgb),.035)}.trip-add-row .form-control,.trip-add-row .form-select{min-width:110px}.trip-add-row select{min-width:170px}.trip-account-hint{padding:11px 16px;border-top:1px solid var(--border-subtle);color:var(--text-muted);background:var(--surface-2);font-size:.66rem}.trip-memo-modal{border:0;border-radius:var(--radius-lg)}.trip-memo-modal .modal-header{padding:18px 20px}.trip-memo-modal .modal-title{margin:2px 0 0;font-size:1.1rem}.trip-memo-modal .modal-body{padding:20px}.trip-modal-divider{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.trip-modal-divider::after{content:"";height:1px;flex:1;background:var(--border-subtle)}.trip-modal-total{height:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-2)}.trip-modal-total span{color:var(--text-muted);font-size:.65rem}.trip-modal-total strong{color:var(--brand-primary);font-size:1.05rem;font-variant-numeric:tabular-nums}
.trip-driver-form{display:grid;grid-template-columns:150px minmax(220px,1fr) auto;align-items:center;gap:8px;min-width:min(100%,560px)}.trip-driver-table{min-width:460px}
.trip-statement-table{min-width:620px}.trip-statement-table th:nth-child(2),.trip-statement-table td:nth-child(2){width:14%}.trip-statement-table th:nth-child(3),.trip-statement-table th:nth-child(4),.trip-statement-table td:nth-child(3),.trip-statement-table td:nth-child(4){width:22%}.trip-statement-total th{border-top:2px solid var(--border-color)!important;font-weight:800}.trip-statement-profit th{color:var(--text-primary);background:rgba(22,163,74,.06)!important;font-size:.78rem!important}
.trip-account-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:13px 15px;border:1px solid var(--border-subtle);border-radius:10px;background:var(--surface-2)}.trip-account-type-grid .form-check{margin:0}.trip-account-type-grid .form-check-input:disabled~.form-check-label{color:var(--text-muted);opacity:.65}
.trip-close-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:13px;padding:20px}.trip-close-form>.btn{grid-column:1/-1;justify-self:start}.trip-closed-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-subtle)}.trip-closed-summary>div{padding:18px;background:var(--surface-1)}.trip-closed-summary span,.trip-closed-summary strong,.trip-closed-summary small{display:block}.trip-closed-summary span{color:var(--text-muted);font-size:.62rem;text-transform:uppercase}.trip-closed-summary strong{margin-top:4px;font-size:.9rem}.trip-closed-summary small{margin-top:3px;color:var(--text-muted);font-size:.6rem}.trip-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:.59rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.trip-status--open{color:#166534;background:#dcfce7}.trip-status--closed{color:#475569;background:#e2e8f0}.trip-table thead th{padding:12px 14px;color:var(--text-muted);background:var(--surface-2);font-size:.62rem;text-transform:uppercase}.trip-table tbody td{padding:14px;border-color:var(--border-subtle);font-size:.7rem}.trip-table td strong,.trip-table td small{display:block}.trip-table td small{margin-top:2px;color:var(--text-muted);font-size:.6rem}.trip-empty{padding:50px 20px;text-align:center}.trip-empty span{font-size:2rem}.trip-empty h2{margin:10px 0 4px;font-size:1rem}.trip-empty p{color:var(--text-muted);font-size:.7rem}
@media(max-width:991.98px){.trip-summary-grid{grid-template-columns:repeat(2,1fr)}.trip-section__header{align-items:flex-start;flex-direction:column}.trip-memo-actions,.trip-inline-form,.trip-driver-form{width:100%}.trip-inline-form{flex:1}.trip-inline-form .form-select{min-width:0}.trip-close-form{grid-template-columns:1fr 1fr}.trip-close-form .btn{grid-column:1/-1}.trip-closed-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.trip-page__heading{align-items:flex-start;flex-direction:column}.trip-page__heading .btn{width:100%}.trip-summary-grid{grid-template-columns:1fr}.trip-memo-actions,.trip-inline-form{align-items:stretch;flex-direction:column}.trip-driver-form{grid-template-columns:1fr}.trip-memo-actions>.btn,.trip-driver-form>.btn{width:100%}.trip-close-form,.trip-closed-summary{grid-template-columns:1fr}.trip-close-form .btn{grid-column:auto}}
/* Employee and salary system */
.employee-salary-page { display: grid; gap: 18px; }
.employee-salary-heading,
.employee-salary-section-title,
.employee-salary-card-head,
.employee-salary-payroll-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.employee-salary-heading h1,
.employee-salary-section-title h2,
.employee-salary-card h3,
.employee-salary-entry-card h3 { margin: 0; }
.employee-salary-heading p,
.employee-salary-section-title p,
.employee-salary-card-head p,
.employee-salary-payroll-tools p { margin: 5px 0 0; color: var(--text-muted); }
.employee-salary-month { padding: 8px 12px; border-radius: 999px; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); font-weight: 700; white-space: nowrap; }
.employee-salary-tabs { display: flex; gap: 6px; padding: 6px; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.employee-salary-tabs a { padding: 9px 13px; border-radius: 9px; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.employee-salary-tabs a:hover { color: var(--text-primary); background: var(--surface-2); }
.employee-salary-tabs a.active { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); font-weight: 700; }
.employee-salary-period { display: flex; justify-content: flex-end; align-items: end; gap: 10px; }
.employee-salary-period label { display: grid; gap: 5px; color: var(--text-muted); }
.employee-salary-period input { width: 110px; }
.employee-salary-period select { width: 160px; }
.employee-salary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.employee-salary-stats > div { padding: 18px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.employee-salary-stats span { display: block; color: var(--text-muted); }
.employee-salary-stats strong { display: block; margin-top: 7px; font-size: 1.5rem; }
.employee-salary-card,
.employee-salary-entry-card { overflow: hidden; border: 1px solid var(--border-color); border-radius: 14px; background: var(--surface-1); }
.employee-salary-entry-card {
    position: relative;
    z-index: 2;
    overflow: visible;
    padding: 20px;
}
.employee-salary-entry-card h3 { margin-bottom: 16px; }
.employee-salary-card-head { padding: 16px 18px; border-bottom: 1px solid var(--border-color); }
.employee-salary-card-head h3 { font-size: 1rem; }
.employee-salary-form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.employee-salary-table > :not(caption) > * > * { padding: 13px 16px; border-bottom-color: var(--border-color); }
.employee-salary-table thead th { color: var(--text-muted); background: var(--surface-2); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.employee-salary-table td strong,
.employee-salary-table td small { display: block; }
.employee-salary-table td small { margin-top: 3px; color: var(--text-muted); }
.employee-salary-table tfoot th { background: var(--surface-2); }
.salary-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.salary-badge--active,
.salary-badge--salary { color: var(--brand-success); background: color-mix(in srgb, var(--brand-success) 12%, transparent); }
.salary-badge--trip { color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); }
.salary-badge--inactive { color: var(--brand-danger); background: color-mix(in srgb, var(--brand-danger) 12%, transparent); }
.employee-salary-empty { padding: 32px 18px; color: var(--text-muted); text-align: center; }
.employee-salary-payment-total { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); }
.employee-salary-payment-total span { color: var(--text-muted); }
.employee-salary-payment-total strong { font-size: 1.25rem; }
.employee-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.employee-report-card { min-height: 112px; padding: 16px; border: 1px solid var(--border-color); border-radius: 13px; color: var(--text-primary); background: var(--surface-1); text-decoration: none; }
.employee-report-card strong,
.employee-report-card span { display: block; }
.employee-report-card span { margin-top: 7px; color: var(--text-muted); }
.employee-report-card:hover,
.employee-report-card.active { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .1); }
.employee-report-preview { break-inside: avoid; }
@media (max-width: 900px) {
    .employee-salary-stats,
    .employee-report-grid { grid-template-columns: 1fr; }
    .employee-salary-heading,
    .employee-salary-section-title,
    .employee-salary-card-head,
    .employee-salary-payroll-tools { align-items: stretch; flex-direction: column; }
    .employee-salary-period { justify-content: flex-start; flex-wrap: wrap; }
}
@media print {
    .employee-salary-tabs,
    .employee-salary-period,
    .employee-report-grid,
    .employee-salary-section-title .btn,
    .app-sidebar,
    .app-topbar { display: none !important; }
    .employee-salary-page { gap: 8px; }
    .employee-salary-card { border: 0; }
}