:root {
    color-scheme: dark;
    --lily-primary: #6c5f8d;
    --lily-neutral: #dcd7d5;
    --lily-lavender: #9c8cb9;
    --lily-deep: #4b3f6e;
    --lily-mauve: #ba96c1;
    --bg: #1f1a31;
    --panel: #352d52;
    --panel-strong: #4b3f6e;
    --line: #6c5f8d;
    --line-soft: rgba(156, 140, 185, 0.34);
    --text: #f6f1f8;
    --muted: #dcd7d5;
    --accent: #6c5f8d;
    --accent-soft: rgba(186, 150, 193, 0.22);
    --warning: #d8b4df;
    --danger: #ff91b0;
    --input: #2f2948;
    --shadow: rgba(18, 13, 32, 0.48);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.operations-dashboard {
    display: grid;
    gap: 16px;
}

.operations-heading {
    align-items: center;
}

.operations-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 220px) auto minmax(170px, 240px) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.operations-toolbar label {
    display: grid;
    gap: 5px;
}

.operations-toolbar label span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.segmented.compact {
    display: inline-grid;
    grid-auto-flow: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.segmented.compact button {
    min-height: 34px;
    padding: 0 12px;
    color: var(--muted);
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.segmented.compact button.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), var(--ai-cyan));
}

.operations-status-flow {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.operations-status-flow article,
.operations-panel,
.operations-check-item,
.operations-document-card,
.operations-raw-grid article,
.operations-catalog-list article {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.operations-status-flow article {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 12px;
}

.operations-status-flow article span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.operations-status-flow article strong {
    font-size: 14px;
}

.operations-status-flow article small {
    color: var(--muted);
    line-height: 1.35;
}

.operations-status-flow article.ok,
.operations-check-item.ok,
.operations-document-card.ok {
    border-color: rgba(24, 208, 189, 0.28);
    background: rgba(24, 208, 189, 0.08);
}

.operations-status-flow article.warn,
.operations-check-item.warn,
.operations-document-card.warn {
    border-color: rgba(255, 174, 44, 0.34);
    background: rgba(255, 174, 44, 0.09);
}

.operations-status-flow article.bad,
.operations-check-item.bad,
.operations-document-card.bad {
    border-color: rgba(255, 145, 176, 0.38);
    background: rgba(143, 63, 98, 0.17);
}

.operations-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.operations-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
}

.operations-wide-panel {
    grid-column: 1 / -1;
}

.operations-panel-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.operations-panel-title h3 {
    margin: 0;
    font-size: 18px;
}

.operations-panel-title span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.operations-checklist,
.operations-document-list {
    display: grid;
    gap: 8px;
}

.operations-check-item,
.operations-document-card {
    width: 100%;
    color: var(--text);
    cursor: pointer;
}

.operations-check-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: left;
}

.operations-check-item b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
}

.operations-check-item span {
    display: grid;
    gap: 3px;
}

.operations-check-item small,
.operations-document-card small,
.operations-document-card em,
.operations-document-card i,
.operations-doc-source,
.operations-catalog-list span,
.operations-catalog-list em,
.operations-raw-grid small,
.operations-principles p {
    color: var(--muted);
}

.operations-document-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 160px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    text-align: left;
}

.operations-doc-badge {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 900;
}

.operations-doc-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.operations-doc-copy em,
.operations-doc-copy i,
.operations-doc-source {
    font-size: 12px;
    font-style: normal;
}

.operations-raw-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.operations-raw-grid article {
    padding: 10px;
}

.operations-raw-grid span,
.operations-raw-grid strong,
.operations-raw-grid small {
    display: block;
}

.operations-raw-grid strong {
    margin: 3px 0;
    font-size: 18px;
}

.operations-principles {
    display: grid;
    gap: 6px;
}

.operations-principles p {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid rgba(24, 208, 189, 0.45);
    background: rgba(255, 255, 255, 0.04);
    line-height: 1.4;
}

.operations-permission-matrix {
    overflow: auto;
}

.operations-permission-matrix table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12px;
}

.operations-permission-matrix th,
.operations-permission-matrix td {
    padding: 8px;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
}

.operations-permission-matrix th:first-child {
    text-align: left;
}

.operations-permission-matrix td.allowed {
    color: #6fffe5;
    font-weight: 900;
}

.operations-permission-matrix td.denied {
    color: rgba(255, 145, 176, 0.9);
    font-weight: 900;
}

.operations-catalog-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.operations-catalog-list section {
    display: grid;
    gap: 8px;
}

.operations-catalog-list h4 {
    margin: 0;
}

.operations-catalog-list article {
    display: grid;
    gap: 3px;
    padding: 10px;
}

.operations-catalog-list article.required {
    border-color: rgba(255, 174, 44, 0.34);
}

.operations-catalog-list > p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
}

.operations-empty {
    padding: 12px;
    color: var(--muted);
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
}

@media (max-width: 980px) {
    .operations-toolbar,
    .operations-status-flow,
    .operations-grid,
    .operations-catalog-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .segmented.compact {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .operations-document-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .operations-raw-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body[data-theme="light"] .operations-toolbar,
body[data-theme="light"] .operations-panel,
body[data-theme="light"] .operations-status-flow article,
body[data-theme="light"] .operations-check-item,
body[data-theme="light"] .operations-document-card,
body[data-theme="light"] .operations-raw-grid article,
body[data-theme="light"] .operations-catalog-list article,
body[data-theme="light"] .operations-empty {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(29, 45, 80, 0.12);
}

.app-shell[data-user-role="staff"] > .app-tabs:not(.mobile-bottom-tabs),
.app-shell[data-user-role="accountant"] > .app-tabs:not(.mobile-bottom-tabs) {
    display: none;
}

.app-shell[data-user-role="staff"],
.app-shell[data-user-role="accountant"] {
    padding-left: 220px;
}

.staff-side-rail {
    position: fixed;
    z-index: 40;
    top: 92px;
    left: 16px;
    width: 188px;
    height: calc(100vh - 116px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    color: var(--muted);
    background: rgba(8, 10, 28, 0.82);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.staff-rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--text);
}

.staff-rail-brand small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.staff-rail-logo {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    font-size: 12px;
    font-weight: 900;
}

.staff-rail-link {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 10px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 800;
    text-align: left;
}

.staff-rail-link:hover,
.staff-rail-link:focus-visible,
.staff-rail-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(34, 183, 255, 0.2), rgba(102, 120, 255, 0.3));
    border-color: rgba(132, 151, 255, 0.28);
}

.staff-rail-bottom-link {
    margin-top: auto;
}

.staff-rail-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.staff-rail-icon svg,
.staff-quick-dock svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.staff-dashboard,
.sales-panel {
    display: grid;
    gap: 14px;
}

.staff-dashboard-head,
.staff-panel,
.sales-panel,
.sales-detail-card,
.stock-request-form,
.stock-request-board {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%),
        rgba(16, 22, 49, 0.9);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.staff-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
}

.staff-dashboard-head h2 {
    margin: 4px 0;
    color: var(--text);
    font-size: 28px;
    letter-spacing: 0;
}

.staff-dashboard-head p {
    margin: 0;
    color: var(--muted);
}

.staff-eyebrow,
.staff-source-pill,
.staff-panel-title span,
.staff-kpi-card span,
.staff-kpi-card small,
.sales-detail-card span,
.sales-detail-card small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.staff-source-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    color: #ffffff;
    background: rgba(102, 120, 255, 0.18);
    border: 1px solid rgba(132, 151, 255, 0.24);
    border-radius: 8px;
}

.staff-kpi-grid,
.sales-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.staff-kpi-card,
.sales-detail-card {
    min-height: 116px;
    padding: 16px;
}

.staff-kpi-card {
    background:
        linear-gradient(135deg, rgba(102, 120, 255, 0.22), rgba(16, 22, 49, 0.86)),
        rgba(16, 22, 49, 0.92);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.staff-kpi-card.attention {
    background:
        linear-gradient(135deg, rgba(255, 157, 34, 0.18), rgba(16, 22, 49, 0.88)),
        rgba(16, 22, 49, 0.92);
}

.staff-kpi-card strong,
.sales-detail-card strong {
    display: block;
    margin: 10px 0 6px;
    color: var(--text);
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1;
}

.staff-dashboard-grid,
.sales-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 14px;
}

.staff-wide-panel {
    grid-column: span 1;
}

.staff-panel,
.sales-panel {
    padding: 16px;
    min-width: 0;
}

.staff-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.staff-panel-title h3 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    letter-spacing: 0;
}

.staff-panel-title strong {
    color: var(--text);
    font-size: 26px;
}

.staff-target-meter {
    height: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.staff-target-meter i {
    display: block;
    width: var(--target-percent);
    height: 100%;
    background: linear-gradient(90deg, var(--ai-orange), var(--ai-cyan), var(--accent));
    border-radius: inherit;
}

.staff-target-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.staff-target-meta div {
    padding: 12px;
    background: rgba(8, 10, 28, 0.44);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.staff-target-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.staff-target-meta strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.staff-product-bars {
    display: grid;
    gap: 10px;
}

.staff-product-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 56px;
    overflow: hidden;
    padding: 0 14px;
    background: rgba(8, 10, 28, 0.44);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.staff-product-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--product-share);
    background: linear-gradient(90deg, rgba(34, 183, 255, 0.38), rgba(102, 120, 255, 0.1));
}

.staff-product-row.quiet {
    opacity: 0.72;
}

.staff-product-row span,
.staff-product-row strong {
    position: relative;
    z-index: 1;
}

.staff-product-row b,
.staff-product-row small {
    display: block;
}

.staff-product-row b {
    color: var(--text);
}

.staff-product-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.staff-product-row strong {
    color: var(--text);
    font-size: 15px;
}

.staff-sales-chart {
    min-height: 220px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18px, 1fr);
    align-items: end;
    gap: 7px;
    padding: 12px 8px 4px;
    background: rgba(8, 10, 28, 0.32);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    overflow-x: auto;
}

.staff-chart-bar {
    min-width: 18px;
    height: 180px;
    display: grid;
    align-items: end;
    gap: 6px;
}

.staff-chart-bar i {
    display: block;
    height: var(--bar-height);
    min-height: 3px;
    background: linear-gradient(180deg, var(--ai-cyan), var(--accent));
    border-radius: 999px 999px 4px 4px;
}

.staff-chart-bar em,
.staff-chart-empty {
    color: var(--muted);
    font-size: 10px;
    font-style: normal;
    text-align: center;
}

.staff-chart-empty {
    place-self: center;
    font-weight: 900;
}

.staff-task-list {
    display: grid;
    gap: 9px;
}

.staff-task-list button {
    min-height: 48px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 0 12px;
    color: var(--text);
    text-align: left;
    background: rgba(8, 10, 28, 0.44);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.staff-task-list button.warn {
    border-color: rgba(255, 157, 34, 0.36);
    background: linear-gradient(90deg, rgba(255, 157, 34, 0.16), rgba(8, 10, 28, 0.44));
}

.staff-task-list span {
    color: var(--muted);
    font-weight: 800;
}

.staff-task-list strong {
    color: var(--text);
    font-size: 18px;
}

.salary-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.salary-summary-card {
    min-height: 112px;
    padding: 15px;
    background:
        linear-gradient(135deg, rgba(31, 198, 166, 0.16), rgba(102, 120, 255, 0.08)),
        rgba(16, 22, 49, 0.9);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-summary-card span,
.salary-summary-card small,
.salary-criterion-row small,
.salary-criterion-row em,
.salary-bonus-row span,
.salary-bonus-note,
.salary-formula-line {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.salary-summary-card strong {
    display: block;
    margin: 12px 0 7px;
    color: var(--text);
    font-size: clamp(23px, 2.3vw, 34px);
    line-height: 1;
}

.salary-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 14px;
}

.salary-formula-line {
    margin-bottom: 12px;
    padding: 11px 12px;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-criteria-list,
.salary-bonus-list {
    display: grid;
    gap: 9px;
}

.salary-criterion-row {
    position: relative;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    overflow: hidden;
    padding: 10px 12px;
    background: rgba(8, 10, 28, 0.42);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-criterion-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--salary-score);
    background: linear-gradient(90deg, rgba(31, 198, 166, 0.34), rgba(102, 120, 255, 0.08));
}

.salary-criterion-row.needs_fix {
    border-color: rgba(255, 98, 98, 0.42);
}

.salary-criterion-row.pending,
.salary-criterion-row.waiting_target {
    border-color: rgba(255, 174, 89, 0.34);
}

.salary-criterion-row > span,
.salary-criterion-row > strong,
.salary-criterion-row > em {
    position: relative;
    z-index: 1;
}

.salary-criterion-row b,
.salary-criterion-row small {
    display: block;
}

.salary-criterion-row b {
    color: var(--text);
}

.salary-criterion-row strong {
    color: var(--text);
    font-size: 16px;
}

.salary-criterion-row em {
    min-width: 74px;
    font-style: normal;
    text-align: right;
}

.salary-bonus-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 12px;
    background: rgba(8, 10, 28, 0.42);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-bonus-row strong {
    color: var(--text);
}

.salary-bonus-row strong.negative {
    color: #ff8080;
}

.salary-bonus-note,
.salary-empty-row {
    margin: 2px 0 0;
    padding: 10px 12px;
    color: var(--muted);
    background: rgba(8, 10, 28, 0.26);
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
}

.salary-policy-files {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.salary-policy-file {
    display: grid;
    gap: 3px;
    min-height: 46px;
    padding: 9px 11px;
    color: var(--text);
    text-decoration: none;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-policy-file:hover {
    border-color: var(--accent);
}

.salary-policy-file span {
    font-size: 12px;
    font-weight: 900;
}

.salary-policy-file small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.salary-template-list.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 10px;
}

.salary-template-list.compact .salary-template-row {
    min-height: 42px;
}

.staff-quick-dock {
    position: fixed;
    z-index: 65;
    right: 18px;
    bottom: 18px;
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(8, 10, 28, 0.86);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(16px);
}

.staff-quick-dock button {
    width: 76px;
    min-height: 68px;
    display: grid;
    place-items: center;
    gap: 6px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
}

.staff-quick-dock button:hover,
.staff-quick-dock button:focus-visible,
.staff-quick-dock button.active {
    color: #ffffff;
    background: rgba(102, 120, 255, 0.2);
}

.staff-quick-dock svg {
    width: 24px;
    height: 24px;
}

.floating-quick-dock {
    pointer-events: auto;
}

.sales-toolbar,
.stock-request-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.sales-toolbar input,
.stock-request-filters select {
    width: auto;
    min-width: 160px;
}

.stock-request-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.manager-stock-request-layout {
    grid-template-columns: 1fr;
}

.stock-request-form,
.stock-request-board {
    overflow: hidden;
}

.stock-request-chat .panel-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.stock-request-chat-window {
    display: grid;
    gap: 10px;
    padding: 14px 16px 0;
}

.stock-chat-bubble {
    max-width: 88%;
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    line-height: 1.42;
}

.stock-chat-bubble.incoming {
    justify-self: start;
    color: var(--text);
    background: rgba(75, 63, 110, 0.4);
}

.stock-chat-bubble span {
    color: var(--muted);
    font-size: 12px;
}

.stock-request-form-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.stock-request-form label {
    display: grid;
    gap: 7px;
}

.stock-request-form span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.stock-request-form textarea {
    width: 100%;
    min-height: 106px;
    resize: vertical;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
}

.stock-request-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.stock-request-chat-list {
    align-items: start;
}

.stock-request-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: rgba(75, 63, 110, 0.28);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.stock-chat-message {
    width: min(760px, 100%);
}

.stock-chat-message.incoming {
    justify-self: start;
}

.stock-chat-message.outgoing {
    justify-self: end;
    background: linear-gradient(135deg, rgba(102, 120, 255, 0.18), rgba(75, 63, 110, 0.34));
}

.stock-request-card.urgent,
.stock-request-card.high {
    border-color: rgba(255, 157, 34, 0.42);
    background: linear-gradient(90deg, rgba(255, 157, 34, 0.16), rgba(75, 63, 110, 0.26));
}

.stock-request-card-head,
.stock-request-actions {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.stock-request-card-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.stock-request-card-head span,
.stock-request-card-main span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.stock-request-card-head strong {
    color: var(--text);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.stock-request-card-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.stock-request-card-main div {
    display: grid;
    gap: 4px;
    padding: 9px 10px;
    background: rgba(47, 41, 72, 0.58);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}

.stock-request-card-main strong {
    color: var(--text);
    overflow-wrap: anywhere;
}

.stock-request-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.stock-request-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 1120px) {
    .app-shell[data-user-role="staff"],
    .app-shell[data-user-role="accountant"] {
        padding-left: 0;
    }

    .staff-side-rail {
        display: none;
    }
}

@media (max-width: 920px) {
    .staff-dashboard-head,
    .stock-request-card-head,
    .stock-request-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .staff-kpi-grid,
    .sales-detail-grid,
    .salary-summary-grid,
    .staff-dashboard-grid,
    .sales-detail-layout,
    .salary-detail-layout,
    .salary-template-list.compact,
    .salary-policy-files,
    .salary-policy-form-grid,
    .salary-policy-edit-columns,
    .salary-policy-common-editor,
    .salary-policy-files-panel,
    .staff-target-meta,
    .stock-request-layout,
    .stock-request-card-main {
        grid-template-columns: 1fr;
    }

    .salary-policy-level-row,
    .salary-policy-factor-row {
        grid-template-columns: 1fr;
    }

    .salary-policy-upload {
        min-width: 0;
    }

    .salary-criterion-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .salary-criterion-row em {
        grid-column: 1 / -1;
        text-align: left;
    }

    .staff-quick-dock {
        right: 10px;
        bottom: calc(86px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(2, minmax(68px, 1fr));
        gap: 8px;
        max-width: min(178px, calc(100vw - 20px));
        padding: 8px;
    }

    .staff-quick-dock button {
        width: auto;
        min-height: 58px;
        padding: 7px;
        font-size: 10px;
    }

    .staff-quick-dock svg {
        width: 19px;
        height: 19px;
    }

    .sales-toolbar,
    .stock-request-filters {
        justify-content: stretch;
    }

    .sales-toolbar input,
    .stock-request-filters select,
    .stock-request-actions .primary-button,
    .stock-request-actions .ghost-button {
        width: 100%;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-size: 14px;
    background:
        radial-gradient(circle at top left, rgba(156, 140, 185, 0.22), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(186, 150, 193, 0.18), transparent 30rem),
        linear-gradient(135deg, #1f1a31, #2a2441 46%, #4b3f6e);
    color: var(--text);
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.login-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding:
        max(24px, env(safe-area-inset-top, 0px))
        max(24px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px))
        max(24px, env(safe-area-inset-left, 0px));
}

.login-shell {
    width: min(420px, 100%);
}

.login-panel {
    background: rgba(53, 45, 82, 0.94);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 80px var(--shadow);
    padding: 28px;
}

.login-brand,
.brand-line {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #ba96c1);
    color: #faf8fb;
    font-weight: 800;
    letter-spacing: 0;
}

.support-chat-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #ffffff;
    background: linear-gradient(135deg, #22b7ff, #6678ff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(34, 183, 255, 0.22);
}

.support-chat-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.support-chat-button:hover,
.support-chat-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.44);
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.18), 0 16px 38px rgba(34, 183, 255, 0.28);
}

.login-brand h1,
.brand-line h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: 0;
}

.login-brand p,
.brand-line p {
    margin: 4px 0 0;
    color: var(--muted);
}

.brand-app-switch {
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    outline: none;
}

.brand-app-switch:hover .brand-mark,
.brand-app-switch:focus-visible .brand-mark {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.18), 0 16px 34px rgba(34, 183, 255, 0.2);
}

.login-form {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.checkbox-field {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 12px;
}

.checkbox-field input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    padding: 0;
    accent-color: var(--accent);
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
}

input,
select {
    width: 100%;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
    min-height: 42px;
    padding: 10px 12px;
    outline: none;
}

input:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-form button,
.primary-button,
.passkey-login-button {
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    background: var(--accent);
    color: #faf8fb;
    font-weight: 700;
    padding: 0 16px;
}

.secondary-button {
    min-height: 42px;
    padding: 0 14px;
    color: var(--text);
    background: rgba(47, 41, 72, 0.86);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 800;
}

.secondary-button:hover,
.secondary-button:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.primary-button:disabled,
.secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.passkey-login-button {
    width: 100%;
    background: rgba(156, 140, 185, 0.12);
    color: var(--accent);
    border: 1px solid rgba(156, 140, 185, 0.44);
}

.passkey-login-button[hidden] {
    display: none;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--muted);
    font-size: 11px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line-soft);
}

.passkey-login-error {
    margin-top: 14px;
}

.form-error,
.dialog-error {
    color: #8f3f62;
    background: rgba(143, 63, 98, 0.12);
    border: 1px solid rgba(143, 63, 98, 0.34);
    border-radius: 6px;
    padding: 10px 12px;
}

.form-error {
    margin-top: 20px;
}

.app-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px clamp(16px, 4vw, 40px);
    border-bottom: 1px solid var(--line-soft);
    background: rgba(42, 36, 65, 0.86);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.header-kv-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(156, 140, 185, 0.42);
    border-radius: 8px;
    color: #faf8fb;
    background: rgba(20, 27, 58, 0.9);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.header-kv-link:hover,
.header-kv-link:focus-visible {
    border-color: var(--accent);
    background: rgba(102, 120, 255, 0.22);
}

.user-menu {
    position: relative;
}

.user-menu-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(156, 140, 185, 0.42);
    border-radius: 999px;
    color: #faf8fb;
    background: linear-gradient(135deg, var(--accent), #ba96c1);
    box-shadow: 0 12px 32px rgba(156, 140, 185, 0.16);
}

.user-menu-button span {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

.user-menu-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 50;
    width: 168px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(53, 45, 82, 0.98);
    box-shadow: 0 18px 48px var(--shadow);
}

.user-menu-popover[hidden] {
    display: none;
}

.user-menu-popover form {
    margin: 0;
}

.user-menu-item {
    width: 100%;
    min-height: 38px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    color: var(--text);
    background: transparent;
    font-weight: 700;
    text-align: left;
}

.user-menu-item:hover,
.user-menu-item:focus {
    color: #faf8fb;
    background: var(--accent);
}

.app-shell {
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 22px clamp(14px, 3vw, 32px) 42px;
}

.app-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line-soft);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.tab-button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    background: transparent;
    font-weight: 700;
}

.tab-button.active {
    color: var(--text);
    border-color: var(--accent);
}

.kv-main-menu-link {
    color: var(--text);
    text-decoration: none;
}

.kv-main-menu-link .tab-icon {
    display: inline-grid;
    min-width: 25px;
    min-height: 25px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 900;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 210px) minmax(180px, 230px) minmax(260px, 320px) minmax(150px, 190px) minmax(150px, 190px) auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
}

.mode-field {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 42px;
    padding: 3px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
}

.segmented-control button {
    border: 0;
    border-radius: 4px;
    color: var(--muted);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
    padding: 0 6px;
}

.segmented-control button.active {
    color: #faf8fb;
    background: var(--accent);
}

.hidden {
    display: none !important;
}

.status-pill {
    justify-self: end;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(75, 63, 110, 0.42);
}

.status-pill.saving {
    color: var(--warning);
}

.status-pill.saved {
    color: var(--accent);
}

.status-pill.error {
    color: var(--danger);
}

.ledger-week-lock-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -4px 0 16px;
    padding: 12px 14px;
    border: 1px solid rgba(24, 208, 189, 0.24);
    border-radius: 8px;
    background: rgba(24, 208, 189, 0.08);
}

.ledger-week-lock-panel.warn {
    border-color: rgba(255, 174, 44, 0.34);
    background: rgba(255, 174, 44, 0.1);
}

.ledger-week-lock-panel.bad {
    border-color: rgba(255, 145, 176, 0.34);
    background: rgba(143, 63, 98, 0.18);
}

.ledger-week-lock-panel > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ledger-week-lock-panel span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.ledger-week-lock-panel strong {
    font-size: 14px;
}

.ledger-week-lock-panel small {
    color: var(--muted);
    line-height: 1.35;
}

.ledger-week-lock-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.ledger-week-readiness-panel {
    display: grid;
    gap: 12px;
    margin: -4px 0 16px;
    padding: 14px;
    border: 1px solid rgba(115, 124, 255, 0.22);
    border-radius: 8px;
    background: rgba(15, 23, 52, 0.56);
}

.ledger-week-readiness-panel.good {
    border-color: rgba(24, 208, 189, 0.28);
}

.ledger-week-readiness-panel.warn {
    border-color: rgba(255, 174, 44, 0.35);
}

.ledger-week-readiness-panel.bad {
    border-color: rgba(255, 145, 176, 0.4);
}

.ledger-week-readiness-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.ledger-week-readiness-header > div:first-child {
    display: grid;
    gap: 4px;
}

.ledger-week-readiness-header span,
.ledger-week-check-item small {
    color: var(--muted);
}

.ledger-week-readiness-header span {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.ledger-week-readiness-header strong {
    font-size: 15px;
}

.ledger-week-readiness-header small {
    color: var(--muted);
    line-height: 1.35;
}

.ledger-week-readiness-count {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    font-weight: 800;
}

.ledger-week-close-document {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(24, 208, 189, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(24, 208, 189, 0.14), rgba(115, 124, 255, 0.08));
}

.ledger-week-close-document[hidden] {
    display: none;
}

.ledger-week-close-sticker {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(24, 208, 189, 0.45);
    border-radius: 24px;
    background: rgba(24, 208, 189, 0.16);
    box-shadow: 0 16px 34px rgba(24, 208, 189, 0.14);
}

.ledger-week-close-sticker b {
    color: #6fffe5;
    font-size: 42px;
    line-height: 1;
}

.ledger-week-close-sticker span {
    margin-top: -12px;
    color: var(--text);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.ledger-week-close-content {
    min-width: 0;
}

.ledger-week-close-content > span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.ledger-week-close-content h3 {
    margin: 2px 0 4px;
    font-size: 20px;
}

.ledger-week-close-content p {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.4;
}

.ledger-week-close-content dl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.ledger-week-close-content dl div,
.ledger-week-close-metrics article {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.ledger-week-close-content dt,
.ledger-week-close-metrics span,
.ledger-week-close-metrics small {
    color: var(--muted);
    font-size: 11px;
}

.ledger-week-close-content dd {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.ledger-week-close-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.ledger-week-close-metrics span,
.ledger-week-close-metrics small,
.ledger-week-close-metrics strong {
    display: block;
}

.ledger-week-close-metrics strong {
    margin: 3px 0;
    font-size: 15px;
}

.ledger-week-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.ledger-week-summary-grid article {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.ledger-week-summary-grid span,
.ledger-week-summary-grid small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.ledger-week-summary-grid strong {
    display: block;
    margin: 3px 0;
    font-size: 16px;
}

.ledger-week-daily-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.ledger-week-daily-strip button,
.ledger-week-check-item {
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}

.ledger-week-daily-strip button {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 6px;
    text-align: center;
}

.ledger-week-daily-strip span,
.ledger-week-daily-strip small {
    color: var(--muted);
    font-size: 11px;
}

.ledger-week-daily-strip strong {
    font-size: 12px;
}

.ledger-week-daily-strip button.ok,
.ledger-week-check-item.ok {
    border-color: rgba(24, 208, 189, 0.28);
    background: rgba(24, 208, 189, 0.08);
}

.ledger-week-daily-strip button.warn,
.ledger-week-check-item.warn {
    border-color: rgba(255, 174, 44, 0.34);
    background: rgba(255, 174, 44, 0.09);
}

.ledger-week-daily-strip button.bad,
.ledger-week-check-item.bad {
    border-color: rgba(255, 145, 176, 0.38);
    background: rgba(143, 63, 98, 0.17);
}

.ledger-week-daily-strip button.info,
.ledger-week-check-item.info {
    opacity: 0.82;
}

.ledger-week-checklist {
    display: grid;
    gap: 8px;
}

.ledger-week-check-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    text-align: left;
}

.ledger-week-check-item b {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
}

.ledger-week-check-item span {
    display: grid;
    gap: 3px;
}

.ledger-week-check-item strong {
    font-size: 13px;
}

.ledger-week-check-item em {
    color: var(--text);
    font-size: 12px;
    font-style: normal;
}

@media (max-width: 760px) {
    .ledger-week-lock-panel,
    .ledger-week-readiness-header {
        align-items: stretch;
        flex-direction: column;
    }

    .ledger-week-lock-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ledger-week-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ledger-week-close-document {
        grid-template-columns: minmax(0, 1fr);
    }

    .ledger-week-close-sticker {
        justify-self: center;
    }

    .ledger-week-close-content dl,
    .ledger-week-close-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ledger-week-daily-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ledger-table tr.week-locked input {
    color: var(--muted);
    background: rgba(143, 63, 98, 0.12);
    border-color: rgba(255, 145, 176, 0.22);
}

.sign-button.week-locked {
    color: #ffe8f0;
    background: rgba(143, 63, 98, 0.42);
    border-color: rgba(255, 145, 176, 0.55);
}

.ledger-add-row-button {
    align-self: end;
    justify-self: stretch;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: #f7fffd;
    background: rgba(24, 208, 189, 0.18);
    border: 1px solid rgba(24, 208, 189, 0.34);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.ledger-inline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(75, 63, 110, 0.2);
}

.ledger-inline-actions .ledger-add-row-button {
    align-self: auto;
    justify-self: auto;
    flex: 0 0 auto;
}

body[data-app-scope="cafe"] .brand-mark,
.app-shell[data-app-scope="cafe"] .staff-rail-logo {
    background: linear-gradient(135deg, #15b887, #f2c94c);
    color: #111827;
}

.ledger-inline-hint {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.ledger-add-row-button:hover:not(:disabled) {
    background: rgba(24, 208, 189, 0.28);
    border-color: rgba(24, 208, 189, 0.52);
}

.ledger-add-row-button:disabled {
    color: var(--muted);
    background: rgba(75, 63, 110, 0.25);
    border-color: var(--line);
    cursor: not-allowed;
    opacity: 0.72;
}

.ledger-add-row-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.summary-tile {
    min-height: 94px;
    display: grid;
    align-content: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: rgba(42, 36, 65, 0.86);
    border-radius: 8px;
    padding: 16px;
}

.summary-tile span {
    color: var(--muted);
    font-size: 11px;
}

.summary-tile strong {
    font-size: clamp(20px, 3vw, 28px);
    letter-spacing: 0;
}

.summary-tile.accent {
    border-color: rgba(156, 140, 185, 0.48);
    background: linear-gradient(135deg, rgba(156, 140, 185, 0.15), rgba(186, 150, 193, 0.08));
}

.summary-tile.warning-tile {
    border-color: rgba(186, 150, 193, 0.5);
    background: rgba(186, 150, 193, 0.08);
}

.all-branch-ledger-overview {
    display: grid;
    gap: 12px;
    margin: -6px 0 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(75, 63, 110, 0.28);
}

.all-branch-ledger-aggregate-label {
    margin: -4px 0 10px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.all-branch-ledger-heading,
.all-branch-ledger-issue-actions,
.all-branch-ledger-issue-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.all-branch-ledger-heading h3,
.all-branch-ledger-issue-title strong {
    margin: 0;
}

.all-branch-ledger-heading p,
.all-branch-ledger-issue p,
.all-branch-ledger-issue small {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.all-branch-ledger-heading > span {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 12px;
    font-weight: 800;
}

.all-branch-ledger-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.all-branch-ledger-card,
.all-branch-ledger-issue {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(42, 36, 65, 0.72);
    padding: 14px;
}

.all-branch-ledger-card {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.2fr);
    gap: 14px;
}

.all-branch-ledger-card > div,
.all-branch-ledger-card dl,
.all-branch-ledger-card dl div,
.all-branch-ledger-issues,
.all-branch-ledger-issue {
    display: grid;
    gap: 7px;
}

.all-branch-ledger-card > div span,
.all-branch-ledger-card > div small,
.all-branch-ledger-card dt {
    color: var(--muted);
    font-size: 11px;
}

.all-branch-ledger-card > div strong {
    font-size: 23px;
}

.all-branch-ledger-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.all-branch-ledger-card dl div {
    gap: 2px;
}

.all-branch-ledger-card dd {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.all-branch-ledger-card.negative,
.all-branch-ledger-issue.bad {
    border-color: rgba(255, 92, 122, 0.46);
}

.all-branch-ledger-issue.warn {
    border-color: rgba(255, 174, 44, 0.42);
}

.all-branch-ledger-issue-actions b {
    color: var(--accent);
}

.deposit-period-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: -6px 0 18px;
}

.deposit-period-summary div {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: rgba(75, 63, 110, 0.34);
    border-radius: 8px;
    padding: 12px 14px;
}

.deposit-period-summary span {
    color: var(--muted);
    font-size: 11px;
}

.deposit-period-summary strong {
    font-size: 15px;
    letter-spacing: 0;
}

.deposit-period-summary.pending div {
    border-color: rgba(255, 174, 44, 0.42);
}

.deposit-period-summary.over-deposit div {
    border-color: rgba(255, 92, 122, 0.42);
}

.deposit-period-summary.settled div {
    border-color: rgba(34, 197, 94, 0.34);
}

.ledger-panel {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.employee-layout,
.settings-layout,
.reminder-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 16px;
}

.reminder-layout-board-only {
    grid-template-columns: 1fr;
}

.muted-inline {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.cashflow-toolbar {
    grid-template-columns: minmax(170px, 230px) minmax(170px, 220px) minmax(260px, 360px) auto;
}

.cashflow-mode-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cashflow-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.cashflow-layout {
    display: grid;
    gap: 16px;
}

.daily-report-toolbar {
    grid-template-columns: minmax(150px, 210px) minmax(390px, 1fr) minmax(330px, auto) auto;
}

.daily-date-picker-field {
    min-width: 0;
}

.daily-date-picker {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.daily-date-month {
    min-height: 38px;
    padding: 0 9px;
    font-size: 12px;
}

.daily-date-strip-shell {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.daily-date-strip {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 1px 1px 4px;
}

.daily-date-chip,
.daily-date-scroll-button {
    border: 1px solid var(--line-soft);
    color: var(--text);
    background: rgba(47, 41, 72, 0.82);
    border-radius: 6px;
}

.daily-date-chip {
    flex: 0 0 48px;
    min-height: 38px;
    display: grid;
    place-items: center;
    gap: 1px;
    padding: 4px 5px;
    scroll-snap-align: center;
}

.daily-date-chip span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.daily-date-chip strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1;
}

.daily-date-chip.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), #22b7ff);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 20px rgba(34, 183, 255, 0.18);
}

.daily-date-chip.active span,
.daily-date-chip.active strong {
    color: #ffffff;
}

.daily-date-scroll-button {
    width: 30px;
    min-height: 38px;
    padding: 0;
    font-size: 18px;
    font-weight: 900;
}

.daily-report-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.daily-report-layout {
    align-items: start;
}

.cashflow-panel {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.cashflow-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cashflow-account-filter {
    min-width: 250px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cashflow-attention-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.cashflow-attention-item {
    display: grid;
    grid-template-columns: minmax(82px, 108px) minmax(240px, 1fr) minmax(96px, auto) minmax(92px, auto);
    align-items: center;
    gap: 8px 12px;
    min-height: 64px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.cashflow-attention-item.bad {
    border-color: rgba(255, 91, 122, 0.42);
    background: rgba(143, 63, 98, 0.14);
}

.cashflow-attention-item.warn {
    border-color: rgba(242, 186, 76, 0.36);
    background: rgba(242, 186, 76, 0.08);
}

.cashflow-attention-item.good {
    border-color: rgba(55, 214, 154, 0.3);
}

.cashflow-attention-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cashflow-attention-copy strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
}

.cashflow-attention-copy span,
.cashflow-attention-copy em,
.cashflow-attention-more {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.35;
}

.cashflow-attention-copy em {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cashflow-attention-item > b {
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.cashflow-attention-action {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 900;
}

.cashflow-attention-action:hover,
.cashflow-attention-action:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

.cashflow-attention-more {
    padding: 8px 10px;
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
}

.cashflow-owner-board {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.cashflow-owner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(24, 19, 38, 0.28);
}

.cashflow-owner-head strong {
    display: block;
    color: var(--text);
    font-size: 20px;
    line-height: 1.2;
}

.cashflow-owner-head span,
.cashflow-owner-section small,
.cashflow-owner-action span,
.cashflow-owner-action em,
.cashflow-account-balance-item span,
.cashflow-account-balance-item small,
.cashflow-owner-empty {
    color: var(--muted);
}

.cashflow-owner-head-metrics,
.cashflow-owner-kpis,
.cashflow-owner-sections,
.cashflow-money-position-grid,
.cashflow-account-balance-grid {
    display: grid;
    gap: 8px;
}

.cashflow-owner-head-metrics {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    min-width: min(420px, 100%);
}

.cashflow-owner-head-metrics span,
.cashflow-owner-kpi,
.cashflow-owner-section,
.cashflow-period-close,
.cashflow-money-position-item,
.cashflow-account-balance-item {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.cashflow-owner-head-metrics b,
.cashflow-owner-kpi strong,
.cashflow-owner-section strong,
.cashflow-period-close strong,
.cashflow-money-position-item strong,
.cashflow-account-balance-item strong,
.cashflow-account-balance-item b {
    color: var(--text);
    font-size: 18px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.cashflow-owner-kpis,
.cashflow-owner-sections,
.cashflow-money-position-grid,
.cashflow-account-balance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cashflow-owner-kpi span,
.cashflow-owner-kpi small,
.cashflow-owner-section small,
.cashflow-period-close small,
.cashflow-money-position-item span,
.cashflow-money-position-item small,
.cashflow-account-balance-item span,
.cashflow-account-balance-item small {
    font-size: 11px;
    font-weight: 800;
}

.cashflow-owner-kpi.good,
.cashflow-owner-section.good,
.cashflow-owner-action.good,
.cashflow-period-close.good,
.cashflow-money-position-item.good,
.cashflow-account-balance-item.good {
    border-color: rgba(55, 214, 154, 0.34);
}

.cashflow-owner-kpi.warn,
.cashflow-owner-section.warn,
.cashflow-owner-action.warn,
.cashflow-period-close.warn,
.cashflow-money-position-item.warn,
.cashflow-account-balance-item.warn {
    border-color: rgba(242, 186, 76, 0.38);
}

.cashflow-owner-kpi.bad,
.cashflow-owner-section.bad,
.cashflow-owner-action.bad,
.cashflow-period-close.bad,
.cashflow-money-position-item.bad,
.cashflow-account-balance-item.bad {
    border-color: rgba(255, 91, 122, 0.42);
}

.cashflow-period-close {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.cashflow-period-close > div:first-child {
    display: grid;
    gap: 5px;
}

.cashflow-period-close .status-tag {
    justify-self: start;
}

.cashflow-period-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.cashflow-flow-map,
.cashflow-detail-group {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.cashflow-flow-map-head,
.cashflow-detail-group > summary,
.cashflow-flow-lane-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cashflow-flow-map-head strong,
.cashflow-detail-group > summary strong,
.cashflow-flow-lane-title strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
}

.cashflow-flow-map-head span,
.cashflow-detail-group > summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.cashflow-flow-lanes {
    display: grid;
    gap: 10px;
}

.cashflow-flow-lane {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(24, 19, 38, 0.2);
}

.cashflow-flow-lane.good {
    border-color: rgba(55, 214, 154, 0.26);
}

.cashflow-flow-lane.warn {
    border-color: rgba(242, 186, 76, 0.32);
}

.cashflow-flow-lane.bad {
    border-color: rgba(255, 91, 122, 0.36);
}

.cashflow-flow-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
}

.cashflow-flow-node {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 9px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.cashflow-flow-node.good {
    border-color: rgba(55, 214, 154, 0.28);
}

.cashflow-flow-node.warn {
    border-color: rgba(242, 186, 76, 0.34);
}

.cashflow-flow-node.bad {
    border-color: rgba(255, 91, 122, 0.38);
}

.cashflow-flow-node span,
.cashflow-flow-node small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cashflow-flow-node strong {
    color: var(--text);
    font-size: 15px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cashflow-flow-link {
    align-self: center;
    height: 2px;
    border-radius: 999px;
    background: var(--line-soft);
}

.cashflow-detail-group {
    padding: 0;
}

.cashflow-detail-group > summary {
    min-height: 44px;
    padding: 10px 12px;
    cursor: pointer;
    list-style-position: inside;
}

.cashflow-detail-group[open] {
    padding-bottom: 12px;
}

.cashflow-detail-group[open] > .cashflow-owner-kpis,
.cashflow-detail-group[open] > .cashflow-owner-sections,
.cashflow-detail-group[open] > .cashflow-money-position,
.cashflow-detail-group[open] > .cashflow-account-balance,
.cashflow-detail-group[open] > .cashflow-owner-actions {
    margin: 0 12px;
}

.cashflow-detail-group[open] > .cashflow-owner-sections,
.cashflow-detail-group[open] > .cashflow-account-balance,
.cashflow-detail-group[open] > .cashflow-owner-actions {
    margin-top: 8px;
}

.cashflow-drilldown-panel > summary {
    cursor: pointer;
    list-style-position: inside;
}

.cashflow-drilldown-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 14px 0;
}

.cashflow-money-position,
.cashflow-account-balance {
    display: grid;
    gap: 8px;
}

.cashflow-owner-queue {
    display: grid;
    gap: 8px;
}

.cashflow-owner-queue-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.cashflow-owner-queue-heading span {
    color: var(--muted);
    font-size: 11px;
}

.cashflow-owner-actions {
    display: grid;
    gap: 8px;
}

.cashflow-owner-action {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(96px, auto);
    align-items: center;
    gap: 8px 12px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.035);
    text-align: left;
}

.cashflow-owner-action:hover,
.cashflow-owner-action:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.07);
}

.cashflow-owner-action strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
}

.cashflow-owner-action > span:not(.status-tag) {
    font-size: 11px;
    font-weight: 700;
}

.cashflow-owner-action b {
    justify-self: end;
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.cashflow-owner-action em {
    grid-column: 2 / -1;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.cashflow-rule-list,
.cashflow-match-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.cashflow-rule-row,
.cashflow-match-row {
    display: grid;
    align-items: end;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.cashflow-rule-row {
    grid-template-columns: minmax(180px, 1.4fr) minmax(76px, 0.45fr) minmax(96px, 0.65fr) minmax(80px, 0.5fr) minmax(94px, 0.55fr) minmax(136px, 0.85fr) auto;
}

.cashflow-rule-row label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cashflow-rule-row label span,
.cashflow-match-row small,
.cashflow-rule-account span,
.cashflow-match-main span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.cashflow-rule-row input,
.cashflow-rule-row select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
}

.cashflow-rule-account,
.cashflow-match-main {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.cashflow-rule-account strong,
.cashflow-match-main strong,
.cashflow-match-row b {
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
}

.cashflow-match-row {
    grid-template-columns: minmax(110px, 140px) minmax(180px, 1fr) minmax(92px, auto) minmax(160px, 0.8fr) auto;
}

.cashflow-match-row b {
    justify-self: end;
    font-variant-numeric: tabular-nums;
}

.cashflow-match-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.cashflow-drift-meta.good {
    color: var(--accent);
}

.cashflow-drift-meta.warn {
    color: #f2ba4c;
}

.cashflow-drift-meta.bad {
    color: #ff6f8f;
}

.cashflow-owner-empty {
    padding: 12px;
    border: 1px dashed var(--line-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.cashflow-owner-empty.good {
    color: var(--accent);
    border-color: rgba(55, 214, 154, 0.32);
}

@media (max-width: 900px) {
    .cashflow-owner-head {
        align-items: stretch;
        flex-direction: column;
    }

    .cashflow-owner-kpis,
    .cashflow-owner-sections,
    .cashflow-money-position-grid,
    .cashflow-account-balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cashflow-rule-row,
    .cashflow-match-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .cashflow-attention-item {
        grid-template-columns: minmax(82px, 108px) minmax(0, 1fr);
    }

    .cashflow-attention-item > b,
    .cashflow-attention-action {
        justify-self: start;
    }

    .cashflow-flow-track {
        grid-template-columns: 1fr;
    }

    .cashflow-flow-link {
        width: 2px;
        height: 12px;
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .cashflow-owner-head-metrics,
    .cashflow-owner-kpis,
    .cashflow-owner-sections,
    .cashflow-money-position-grid,
    .cashflow-account-balance-grid,
    .cashflow-period-close,
    .cashflow-owner-action,
    .cashflow-rule-row,
    .cashflow-match-row,
    .cashflow-attention-item {
        grid-template-columns: 1fr;
    }

    .cashflow-flow-map-head,
    .cashflow-detail-group > summary,
    .cashflow-flow-lane-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .cashflow-flow-map-head span,
    .cashflow-detail-group > summary span {
        text-align: left;
    }

    .cashflow-owner-action b {
        justify-self: start;
    }

    .cashflow-match-row b {
        justify-self: start;
    }

    .cashflow-owner-action em {
        grid-column: auto;
    }
}

.status-pill.good {
    color: var(--ai-green, #39d98a);
    border-color: rgba(57, 217, 138, 0.36);
}

.status-pill.warn {
    color: var(--warning);
    border-color: rgba(244, 161, 77, 0.36);
}

.status-pill.bad {
    color: var(--danger);
    border-color: rgba(255, 91, 122, 0.42);
}

.ai-review-workspace {
    display: grid;
    gap: 16px;
}

.workspace-heading,
.ai-review-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(53, 45, 82, 0.9);
    box-shadow: 0 22px 70px var(--shadow);
}

.workspace-heading h2,
.ai-review-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 28px;
    letter-spacing: 0;
}

.eyebrow {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.ai-review-toolbar {
    display: grid;
    grid-template-columns: minmax(160px, 210px) auto auto;
    gap: 10px;
    align-items: end;
}

.ai-review-toolbar label,
.ai-review-note {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.ai-review-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ai-review-list-panel,
.ai-review-detail-panel {
    min-height: 560px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(53, 45, 82, 0.94);
    box-shadow: 0 22px 70px var(--shadow);
    overflow: hidden;
}

.ai-review-list {
    display: grid;
    gap: 10px;
    max-height: min(72vh, 760px);
    overflow-y: auto;
    padding: 12px;
}

.ai-review-card,
.ai-review-empty {
    width: 100%;
    display: grid;
    gap: 7px;
    padding: 12px;
    color: var(--text);
    text-align: left;
    background: rgba(47, 41, 72, 0.86);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.ai-review-card {
    min-height: 116px;
}

.ai-review-card:hover,
.ai-review-card:focus-visible,
.ai-review-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.ai-review-card.bad {
    border-left: 4px solid var(--danger);
}

.ai-review-card.warn {
    border-left: 4px solid var(--warning);
}

.ai-review-card.good {
    border-left: 4px solid var(--ai-green, #39d98a);
}

.ai-review-card-status {
    justify-self: start;
    padding: 4px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
}

.ai-review-card strong,
.ai-review-card small,
.ai-review-card em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-review-card strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
}

.ai-review-card small,
.ai-review-card em,
.ai-review-detail-empty span,
.ai-review-detail-body p,
.ai-review-detail-body li {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.ai-review-card em {
    font-style: normal;
    font-weight: 800;
}

.ai-review-empty {
    min-height: 92px;
    place-items: center;
    text-align: center;
}

.ai-review-empty.bad {
    color: var(--danger);
}

.ai-review-detail-panel {
    padding: 16px;
}

.ai-review-detail-empty {
    min-height: 520px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--text);
    text-align: center;
}

.ai-review-detail-content {
    display: grid;
    gap: 14px;
}

.ai-review-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

.ai-review-detail-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
}

.ai-review-detail-meta,
.ai-review-key-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ai-review-detail-meta div,
.ai-review-key-values div,
.ai-review-empty-inline,
.ai-review-detail-body section {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 41, 72, 0.72);
}

.ai-review-detail-meta div,
.ai-review-key-values div,
.ai-review-empty-inline {
    display: grid;
    gap: 5px;
    padding: 10px;
}

.ai-review-detail-meta span,
.ai-review-key-values span,
.ai-review-note span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.ai-review-detail-meta strong,
.ai-review-key-values strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 13px;
}

.ai-review-detail-body {
    display: grid;
    gap: 12px;
}

.ai-review-detail-body section {
    padding: 12px;
}

.ai-review-detail-body h4 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 14px;
}

.ai-review-detail-body ul {
    margin: 0;
    padding-left: 18px;
}

.ai-review-note textarea {
    min-height: 92px;
    width: 100%;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    resize: vertical;
}

.ai-review-note textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.ai-review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.secondary-button.danger {
    color: var(--danger);
    border-color: rgba(255, 91, 122, 0.42);
}

@media (max-width: 900px) {
    .workspace-heading,
    .ai-review-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-review-toolbar,
    .ai-review-layout {
        grid-template-columns: 1fr;
    }

    .ai-review-list-panel,
    .ai-review-detail-panel {
        min-height: 0;
    }

    .ai-review-list {
        max-height: 360px;
    }

    .ai-review-detail-meta,
    .ai-review-key-values {
        grid-template-columns: 1fr;
    }

    .ai-review-actions {
        justify-content: stretch;
    }

    .ai-review-actions button {
        flex: 1 1 150px;
    }
}

.cashflow-statement-panel {
    margin-bottom: 16px;
}

.statement-period-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    padding: 14px;
    border-bottom: 1px solid var(--line);
}

.statement-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: end;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-soft);
}

.statement-filter-bar label {
    display: grid;
    gap: 5px;
    min-width: 160px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.statement-filter-bar input {
    min-height: 34px;
    color: var(--text);
    border-color: var(--line-soft);
    background: var(--input);
}

.statement-range-toggle {
    grid-template-columns: repeat(3, minmax(64px, 1fr));
    max-width: 260px;
}

.statement-period-card {
    display: grid;
    gap: 5px;
    min-height: 118px;
    padding: 12px;
    text-align: left;
    color: var(--text);
    background: rgba(30, 25, 50, 0.42);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.statement-period-card.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(130, 209, 183, 0.35);
}

.statement-period-card strong {
    font-size: 12px;
}

.statement-period-card span,
.statement-period-card small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.statement-period-card em {
    color: var(--text);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.statement-period-card .status-tag {
    width: fit-content;
}

.statement-period-empty,
.empty-cell {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.empty-cell {
    padding: 18px;
    text-align: center;
}

.reminder-form,
.reminder-board {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.reminder-form {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.reminder-form h2 {
    margin: 0;
    color: var(--text);
}

.reminder-form label {
    display: grid;
    gap: 7px;
}

.reminder-form span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.reminder-form textarea {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
}

.reminder-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.reminder-table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: collapse;
}

.reminder-table th,
.reminder-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--muted);
    text-align: left;
    vertical-align: top;
}

.reminder-table th {
    color: var(--text);
    background: var(--panel-strong);
    font-size: 11px;
}

.reminder-table td strong,
.reminder-table td small {
    display: block;
}

.reminder-table td strong {
    color: var(--text);
    font-size: 12px;
}

.reminder-table td small {
    max-width: 100%;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-table th:nth-child(1),
.reminder-table td:nth-child(1) { width: 112px; }
.reminder-table th:nth-child(3),
.reminder-table td:nth-child(3) { width: 118px; }
.reminder-table th:nth-child(4),
.reminder-table td:nth-child(4) { width: 78px; }
.reminder-table th:nth-child(5),
.reminder-table td:nth-child(5) { width: 86px; }
.reminder-table th:nth-child(6),
.reminder-table td:nth-child(6) { width: 114px; }

.reminder-board {
    min-width: 0;
}

.reminder-list {
    display: grid;
    gap: 10px;
    max-height: min(58vh, 560px);
    overflow: auto;
    padding: 12px;
}

.reminder-empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.reminder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.reminder-card-main {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.reminder-card-title {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.reminder-card-title strong {
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-card-title small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reminder-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.reminder-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.reminder-card-meta b {
    color: var(--text);
    font-size: 10px;
}

.reminder-card-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.reminder-done {
    opacity: 0.62;
}

.notification-target-highlight {
    outline: 2px solid rgba(244, 161, 77, 0.78);
    outline-offset: -2px;
    box-shadow: 0 0 0 3px rgba(244, 161, 77, 0.18), 0 18px 42px rgba(244, 161, 77, 0.14);
}

tr.notification-target-highlight {
    background: rgba(244, 161, 77, 0.16) !important;
}

.daily-entry-sheet {
    display: grid;
    gap: 16px;
}

.daily-entry-title,
.daily-excel-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(53, 45, 82, 0.94);
    box-shadow: 0 22px 70px var(--shadow);
    overflow: hidden;
}

.daily-entry-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.daily-entry-title h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: 0;
}

.daily-entry-title p {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.daily-total-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(130px, 1fr));
    gap: 8px;
    min-width: min(560px, 100%);
}

.daily-total-strip div {
    display: grid;
    gap: 5px;
    padding: 11px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(75, 63, 110, 0.46);
}

.daily-total-strip span {
    color: var(--muted);
    font-size: 10px;
}

.daily-total-strip strong {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.daily-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(75, 63, 110, 0.72);
}

.daily-section-title h3 {
    margin: 0;
    font-size: 20px;
    letter-spacing: 0;
}

.daily-section-title span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
}

.daily-table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.transfer-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.manager-transfer-layout {
    grid-template-columns: 1fr;
}

.transfer-form,
.transfer-board {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.transfer-form-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.transfer-form label,
.transfer-qr-field {
    display: grid;
    gap: 7px;
}

.transfer-form span,
.transfer-qr-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.transfer-form textarea {
    width: 100%;
    min-height: 94px;
    resize: vertical;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
}

.transfer-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.transfer-qr-field {
    position: relative;
}

.transfer-qr-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.transfer-qr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.transfer-qr-actions small {
    min-width: 180px;
    flex: 1 1 180px;
    color: var(--muted);
    line-height: 1.35;
}

.transfer-photo-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), #ba96c1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
}

.transfer-photo-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.transfer-qr-preview {
    min-height: 130px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--muted);
    text-align: center;
    background: rgba(75, 63, 110, 0.34);
    border: 1px dashed var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.transfer-qr-preview.has-image {
    align-content: start;
    border-style: solid;
}

.transfer-qr-preview img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    background: #101631;
}

.transfer-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.transfer-bulk-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 41, 72, 0.58);
}

.transfer-bulk-actions .primary-button {
    min-height: 34px;
    padding-inline: 12px;
}

.transfer-bulk-actions span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.transfer-filters select {
    width: auto;
    min-width: 160px;
}

.transfer-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.transfer-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.36);
}

.transfer-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.transfer-select-box {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    background: rgba(47, 41, 72, 0.72);
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.transfer-select-box input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.transfer-card-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.transfer-card-head strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.transfer-code {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
}

.transfer-card-content {
    display: grid;
    grid-template-columns: minmax(118px, 150px) minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.transfer-inline-qr {
    width: 100%;
    min-height: 134px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 7px;
    place-items: center;
    padding: 8px;
    color: var(--text);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 41, 72, 0.66);
    cursor: pointer;
}

.transfer-inline-qr img {
    width: 100%;
    height: 104px;
    object-fit: contain;
    border-radius: 6px;
    background: #ffffff;
}

.transfer-inline-qr span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.transfer-inline-qr.empty {
    cursor: default;
    border-style: dashed;
}

.transfer-card-main {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.manager-transfer-layout .transfer-card-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.transfer-card-main div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(47, 41, 72, 0.62);
}

.transfer-card-main span,
.transfer-meta span {
    color: var(--muted);
    font-size: 11px;
}

.transfer-card-main strong {
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.transfer-card[data-transfer-status="confirmed"] {
    border-color: rgba(53, 220, 172, 0.36);
    background: rgba(37, 110, 96, 0.22);
}

.transfer-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.transfer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.transfer-actions .primary-button,
.transfer-actions .ghost-button {
    min-height: 38px;
}

.danger-action {
    color: var(--danger);
    border-color: rgba(255, 93, 117, 0.4);
}

.transfer-qr-dialog {
    width: min(720px, calc(100% - 28px));
}

.transfer-qr-dialog-body {
    display: grid;
    place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(13, 19, 46, 0.72);
    overflow: hidden;
}

.transfer-qr-dialog-body img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.attendance-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.request-layout {
    display: grid;
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.request-history-panel,
.request-toolbar-panel,
.leave-coverage-panel,
.salary-advance-panel {
    min-width: 0;
}

.request-toolbar-panel,
.leave-coverage-panel,
.salary-advance-panel {
    grid-column: 1 / -1;
}

.leave-coverage-row.waiting-cover {
    background: rgba(244, 161, 77, 0.12);
}

.leave-coverage-row.covered {
    background: rgba(94, 217, 107, 0.08);
}

.leave-cover-list {
    display: grid;
    gap: 3px;
}

.leave-cover-list small {
    color: var(--muted);
    font-weight: 700;
}

.leave-cover-needed {
    color: #f0b35a;
    font-weight: 900;
}

.leave-coverage-table .inline-actions {
    gap: 6px;
}

.leave-coverage-table .mini-action {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11px;
}

.attendance-clock-panel,
.attendance-report-panel,
.attendance-table-card,
.attendance-calendar-panel {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.compact-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.attendance-clock-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.attendance-state-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.38);
}

.attendance-state-card span,
.attendance-state-card small {
    color: var(--muted);
}

.attendance-state-card strong {
    color: #ffffff;
    font-size: 22px;
}

.attendance-state-card.good {
    border-color: rgba(94, 217, 107, 0.38);
}

.attendance-state-card.warn {
    border-color: rgba(255, 174, 44, 0.46);
}

.attendance-photo-preview {
    min-height: 190px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--muted);
    text-align: center;
    background: rgba(75, 63, 110, 0.34);
    border: 1px dashed var(--line);
    border-radius: 8px;
}

.camera-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

.attendance-policy-checks {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 41, 72, 0.42);
}

.attendance-policy-checks .checkbox-field {
    margin: 0;
}

.attendance-auto-checks div {
    display: grid;
    gap: 4px;
}

.attendance-auto-checks strong {
    color: var(--text);
    font-size: 13px;
}

.attendance-auto-checks span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.attendance-gps-status {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 9px 11px;
    color: var(--muted);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 41, 72, 0.5);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.attendance-gps-status.good {
    color: #35dcac;
    border-color: rgba(53, 220, 172, 0.38);
    background: rgba(32, 150, 120, 0.18);
}

.attendance-gps-status.bad {
    color: var(--danger);
    border-color: rgba(255, 91, 122, 0.42);
    background: rgba(255, 91, 122, 0.12);
}

.attendance-gps-status.warn {
    color: #f0b35a;
    border-color: rgba(240, 179, 90, 0.42);
    background: rgba(180, 108, 24, 0.15);
}

.attendance-gps-panel {
    margin-bottom: 14px;
}

.attendance-photo-preview.has-image {
    align-content: start;
    border-style: solid;
}

.attendance-photo-preview img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
    background: #101631;
}

.attendance-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-request-panel,
.attendance-schedule-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.26);
}

.inline-heading {
    padding: 0;
    border: 0;
}

.attendance-request-toggle,
.attendance-range-buttons,
.inline-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.segmented-button,
.mini-action {
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(75, 63, 110, 0.34);
    font-weight: 900;
    cursor: pointer;
}

.segmented-button.active,
.mini-action.good {
    color: #ffffff;
    border-color: rgba(94, 217, 107, 0.42);
    background: rgba(94, 217, 107, 0.16);
}

.mini-action.danger {
    color: #ffffff;
    border-color: rgba(255, 101, 122, 0.42);
    background: rgba(255, 101, 122, 0.16);
}

.attendance-leave-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.attendance-schedule-panel {
    margin: 0 14px 14px;
}

.attendance-schedule-grid,
.attendance-shift-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.attendance-shift-form {
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(100px, 150px)) minmax(150px, auto);
}

.compact-table-scroll {
    max-height: 320px;
    overflow: auto;
}

.attendance-schedule-matrix {
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
    padding-top: 14px;
}

.attendance-matrix-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.attendance-matrix-heading div {
    display: grid;
    gap: 4px;
}

.attendance-matrix-heading strong {
    color: var(--text);
    font-size: 14px;
}

.attendance-matrix-heading span {
    color: var(--muted);
    font-size: 11px;
}

.attendance-matrix-conflict {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    font-size: 11px !important;
    font-weight: 900;
}

.attendance-matrix-conflict.good {
    color: #35dcac;
    border-color: rgba(53, 220, 172, 0.38);
    background: rgba(32, 150, 120, 0.14);
}

.attendance-matrix-conflict.bad {
    color: var(--danger);
    border-color: rgba(255, 91, 122, 0.42);
    background: rgba(255, 91, 122, 0.12);
}

.attendance-matrix-scroll {
    max-width: 100%;
    max-height: 430px;
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.attendance-matrix-table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.attendance-matrix-table th,
.attendance-matrix-table td {
    min-width: 58px;
    height: 46px;
    padding: 4px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    white-space: nowrap;
}

.attendance-matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    color: var(--text);
    background: var(--panel-strong);
    font-weight: 900;
}

.attendance-matrix-table thead th small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.attendance-matrix-table .matrix-sticky-column {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 150px;
    min-width: 150px;
    color: var(--text);
    background: var(--panel-strong);
    text-align: left;
}

.attendance-matrix-table tbody .matrix-sticky-column {
    display: grid;
    gap: 3px;
    align-content: center;
}

.attendance-matrix-table tbody .matrix-sticky-column small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
}

.attendance-matrix-table .matrix-cell {
    background: rgba(13, 19, 46, 0.42);
}

.attendance-matrix-table .matrix-cell button {
    width: 100%;
    min-height: 34px;
    padding: 4px 2px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
}

.attendance-matrix-table .matrix-cell button:hover,
.attendance-matrix-table .matrix-cell button:focus-visible {
    color: var(--text);
    border-color: var(--accent);
    background: var(--accent-soft);
}

.attendance-matrix-table .matrix-cell.work {
    background: rgba(94, 217, 107, 0.11);
}

.attendance-matrix-table .matrix-cell.work button {
    color: #35dcac;
}

.attendance-matrix-table .matrix-cell.off,
.attendance-matrix-table .matrix-cell.leave {
    background: rgba(255, 91, 122, 0.16);
}

.attendance-matrix-table .matrix-cell.leave-pending {
    background: rgba(244, 161, 77, 0.18);
}

.attendance-matrix-table .matrix-cell.off button,
.attendance-matrix-table .matrix-cell.leave button {
    color: #ff7188;
}

.attendance-matrix-table .matrix-cell.leave-pending button {
    color: #f0b35a;
}

.attendance-matrix-table .matrix-cell.unexcused {
    background: rgba(148, 160, 178, 0.16);
}

.attendance-matrix-table .matrix-cell.unexcused button {
    color: #aab5c6;
}

.attendance-matrix-table .matrix-cell.shift-s button,
.attendance-matrix-table .matrix-cell.shift-c button,
.attendance-matrix-table .matrix-cell.shift-f button {
    font-size: 13px;
}

.attendance-matrix-table .matrix-cell.conflict {
    background: rgba(255, 91, 122, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 91, 122, 0.48);
}

.attendance-matrix-table .matrix-cell.conflict button {
    color: var(--danger);
}

.attendance-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.attendance-filters input,
.attendance-filters select {
    width: auto;
    min-width: 150px;
}

.attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    padding: 14px;
}

.attendance-summary-grid div {
    display: grid;
    gap: 7px;
    min-height: 94px;
    align-content: center;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.34);
}

.attendance-summary-grid span {
    color: var(--muted);
    font-size: 12px;
}

.attendance-summary-grid strong {
    color: #ffffff;
    font-size: 28px;
}

.attendance-calendar-panel {
    margin: 0 14px 14px;
    padding: 14px;
}

.attendance-calendar-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

.attendance-calendar-head strong {
    color: #ffffff;
    text-align: center;
    font-size: 18px;
}

.attendance-weekdays,
.attendance-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.attendance-weekdays {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.attendance-day {
    min-height: 58px;
    display: grid;
    place-items: center;
    gap: 2px;
    color: var(--muted);
    background: rgba(13, 19, 46, 0.62);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.attendance-day.self-schedule-editable {
    cursor: pointer;
}

.attendance-day.self-schedule-editable:hover {
    border-color: rgba(34, 183, 255, 0.58);
    box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.14);
}

.attendance-day.empty {
    visibility: hidden;
}

.attendance-day strong {
    color: #ffffff;
    font-size: 16px;
}

.attendance-day span {
    min-width: 22px;
    min-height: 22px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.attendance-day.complete {
    border-color: rgba(94, 217, 107, 0.52);
    background: rgba(94, 217, 107, 0.12);
}

.attendance-day.scheduled_work {
    border-color: rgba(94, 217, 107, 0.42);
    background: rgba(94, 217, 107, 0.08);
}

.attendance-day.missing_checkout,
.attendance-day.missing_checkin,
.attendance-day.lunch_unverified,
.attendance-day.missing_lunch_out,
.attendance-day.missing_lunch_in {
    border-color: rgba(255, 174, 44, 0.54);
    background: rgba(255, 174, 44, 0.12);
}

.attendance-day.off,
.attendance-day.leave,
.attendance-day.presence_issue,
.attendance-day.attire_issue {
    border-color: rgba(255, 101, 122, 0.54);
    background: rgba(255, 101, 122, 0.13);
}

.attendance-day.leave_pending {
    border-color: rgba(255, 174, 44, 0.58);
    background: rgba(255, 174, 44, 0.14);
}

.attendance-day.unexcused {
    color: #aab5c6;
    border-color: rgba(148, 160, 178, 0.54);
    background: rgba(148, 160, 178, 0.16);
}

.attendance-day.today {
    box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.34);
}

.attendance-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.attendance-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.attendance-calendar-legend i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
}

.attendance-calendar-legend i.complete {
    background: #35dcac;
}

.attendance-calendar-legend i.scheduled {
    background: #4f8cff;
}

.attendance-calendar-legend i.missing {
    background: #ffae2c;
}

.attendance-calendar-legend i.off {
    background: #8ea0c8;
}

.attendance-calendar-legend i.gps {
    background: #ff5c7a;
}

.attendance-details-panel {
    margin-top: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(18, 24, 48, 0.34);
}

.attendance-details-panel summary {
    cursor: pointer;
    padding: 10px 12px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
}

.attendance-details-panel .table-scroll {
    border-top: 1px solid var(--line-soft);
}

.attendance-view-note {
    padding: 14px;
}

.attendance-report-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 14px 14px;
}

.attendance-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.attendance-table th,
.attendance-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 11px 12px;
    text-align: left;
    vertical-align: middle;
}

.attendance-table th {
    color: #ffffff;
    background: var(--panel-strong);
    font-size: 12px;
}

.attendance-table td strong,
.attendance-table td small {
    display: block;
}

.attendance-table td small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
}

.attendance-table tr.attention-row td {
    background: rgba(255, 101, 122, 0.08);
}

.attendance-photo-dialog {
    width: min(720px, calc(100% - 28px));
}

.attendance-photo-dialog-body {
    display: grid;
    place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(13, 19, 46, 0.72);
    overflow: hidden;
}

.attendance-photo-dialog-body img {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
}

.sign-dialog.attendance-gps-dialog {
    width: min(1320px, calc(100vw - 20px));
    height: min(860px, calc(100svh - 20px));
    max-height: calc(100svh - 20px);
    overflow: hidden;
}

.attendance-gps-dialog .sign-box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 18px;
}

.attendance-gps-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    min-height: 0;
}

.attendance-gps-map-frame {
    min-height: 0;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: #101631;
    overflow: hidden;
}

.attendance-gps-dialog-body iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: transparent;
}

.attendance-gps-side {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 0;
}

.attendance-gps-side .ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.attendance-gps-history {
    display: grid;
    align-content: start;
    gap: 8px;
    max-height: 168px;
    overflow: auto;
    padding-right: 2px;
}

.attendance-gps-history button {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text);
    background: rgba(75, 63, 110, 0.28);
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
}

.attendance-gps-history button.active {
    border-color: rgba(34, 183, 255, 0.62);
    background: rgba(34, 183, 255, 0.16);
}

body[data-theme="light"] .attendance-gps-history button.active {
    border-color: rgba(47, 128, 237, 0.55) !important;
    background: #eaf3ff !important;
}

.attendance-gps-history strong,
.attendance-gps-history span {
    display: block;
}

.attendance-gps-history span {
    color: var(--muted);
    font-size: 11px;
}

.attendance-gps-side label {
    min-height: 0;
}

.attendance-gps-side textarea {
    min-height: 180px;
    resize: vertical;
}

.attendance-day .gps-eye svg {
    width: 14px;
    height: 14px;
}

.photo-report-layout {
    display: grid;
    grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.photo-report-form,
.photo-report-board {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 70px var(--shadow);
}

.photo-report-form-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.photo-report-form label,
.photo-report-camera-field {
    display: grid;
    gap: 7px;
}

.photo-report-form span,
.photo-report-camera-field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.photo-report-form textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
}

.photo-report-form textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.photo-report-camera-field {
    position: relative;
}

.photo-report-camera-field input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.photo-report-camera-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.photo-report-camera-actions small {
    min-width: 180px;
    flex: 1 1 180px;
    color: var(--muted);
    line-height: 1.35;
}

.photo-report-camera-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), #ba96c1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-weight: 800;
    cursor: pointer;
}

.photo-report-camera-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photo-report-preview {
    min-height: 160px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--muted);
    text-align: center;
    background: rgba(75, 63, 110, 0.34);
    border: 1px dashed var(--line);
    border-radius: 8px;
    cursor: pointer;
}

.photo-report-preview.has-image {
    align-content: start;
    border-style: solid;
}

.photo-report-preview img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
    background: #101631;
}

.photo-report-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.photo-report-filters input,
.photo-report-filters select {
    width: auto;
    min-width: 150px;
}

.photo-report-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.cleaning-workspace {
    display: grid;
    gap: 14px;
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(47, 41, 72, 0.44);
}

.cleaning-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.cleaning-head h3 {
    margin: 2px 0 4px;
    color: var(--text);
    font-size: 20px;
}

.cleaning-head p {
    max-width: 780px;
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.cleaning-head p strong {
    color: var(--text);
}

.cleaning-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cleaning-filters input,
.cleaning-filters select {
    width: auto;
    min-width: 150px;
}

.compact-segmented {
    width: auto;
    min-height: 42px;
    padding: 4px;
}

.compact-segmented button {
    min-height: 32px;
    padding: 0 11px;
    font-size: 12px;
}

.cleaning-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.cleaning-summary div,
.cleaning-task-meta div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.42);
}

.cleaning-summary span,
.cleaning-task-meta span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.cleaning-summary strong,
.cleaning-task-meta strong {
    color: var(--text);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.cleaning-list {
    display: grid;
    gap: 10px;
}

.cleaning-task-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(53, 45, 82, 0.84);
}

.cleaning-task-card.good {
    border-color: rgba(71, 204, 148, 0.46);
}

.cleaning-task-card.bad {
    border-color: rgba(255, 91, 122, 0.56);
    background: linear-gradient(90deg, rgba(143, 63, 98, 0.32), rgba(53, 45, 82, 0.84));
}

.cleaning-task-card.warn {
    border-color: rgba(244, 161, 77, 0.5);
}

.cleaning-task-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cleaning-task-main > div {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.cleaning-task-main strong {
    color: var(--text);
    font-size: 17px;
    overflow-wrap: anywhere;
}

.cleaning-task-main span {
    color: var(--muted);
    font-size: 12px;
}

.cleaning-task-main b {
    flex: 0 0 auto;
    padding: 6px 9px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    font-size: 12px;
}

.cleaning-task-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 8px;
}

.cleaning-sticker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.cleaning-sticker.done {
    background: linear-gradient(135deg, #19b983, #4ccf94);
}

.cleaning-sticker.missed {
    background: linear-gradient(135deg, #ff5b7a, #f4a14d);
}

.cleaning-sticker.warn,
.cleaning-sticker.open {
    background: linear-gradient(135deg, #6c5f8d, #ba96c1);
}

.cleaning-task-card p,
.cleaning-task-card small {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.photo-report-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.36);
}

.photo-report-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.photo-report-card-head > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.photo-report-card-head strong {
    color: var(--text);
    font-size: 17px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.photo-report-type {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.photo-report-card-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.photo-report-card-main div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(47, 41, 72, 0.62);
}

.photo-report-card-main span {
    color: var(--muted);
    font-size: 11px;
}

.photo-report-card-main strong {
    color: var(--text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.photo-report-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.photo-report-dialog {
    width: min(760px, calc(100% - 28px));
}

.photo-report-dialog-body {
    display: grid;
    place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(13, 19, 46, 0.72);
    overflow: hidden;
}

.photo-report-dialog-body img {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.daily-section-grid {
    display: grid;
    grid-template-columns: minmax(560px, 1.25fr) minmax(300px, 0.75fr);
    gap: 0;
    border-top: 1px solid var(--line-soft);
}

.daily-section-grid .daily-table-scroll + .daily-table-scroll {
    border-left: 1px solid var(--line-soft);
}

.daily-input-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.daily-financial-service-table {
    min-width: 1080px;
}

.daily-other-primary-table,
.daily-other-secondary-table {
    min-width: 1280px;
}

.daily-card-table {
    min-width: 620px;
}

.daily-card-settlement-panel {
    display: grid;
    gap: 9px;
    min-width: 620px;
    padding: 10px 12px;
    border-top: 1px solid var(--line-soft);
    background: rgba(37, 32, 56, 0.78);
}

.daily-card-settlement-panel[hidden] {
    display: none;
}

.daily-card-settlement-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 9px 11px;
    color: inherit;
    background: rgba(75, 63, 110, 0.34);
    text-align: left;
    cursor: pointer;
}

.daily-card-settlement-head:hover,
.daily-card-settlement-head:focus-visible {
    border-color: rgba(34, 183, 255, 0.48);
}

.daily-card-settlement-head strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.daily-card-settlement-head span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.daily-card-settlement-head small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.daily-card-settlement-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.daily-card-settlement-metrics div,
.daily-card-settlement-item {
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: rgba(75, 63, 110, 0.48);
}

.daily-card-settlement-metrics div {
    display: grid;
    gap: 4px;
    padding: 8px 9px;
}

.daily-card-settlement-metrics span,
.daily-card-settlement-item p,
.daily-card-settlement-item small,
.daily-card-settlement-item dt {
    color: var(--muted);
    font-size: 10px;
}

.daily-card-settlement-metrics strong {
    color: var(--text);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.daily-card-settlement-details {
    display: grid;
    gap: 8px;
}

.daily-card-settlement-item {
    display: grid;
    gap: 7px;
    padding: 9px;
}

.daily-card-settlement-item.good {
    border-color: rgba(75, 168, 120, 0.55);
}

.daily-card-settlement-item.warn {
    border-color: rgba(231, 181, 94, 0.62);
}

.daily-card-settlement-item.bad {
    border-color: rgba(226, 104, 104, 0.72);
    background: rgba(120, 45, 65, 0.34);
}

.daily-card-settlement-item > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.daily-card-settlement-item strong {
    color: var(--text);
    font-size: 12px;
}

.daily-card-settlement-item p {
    margin: 0;
    line-height: 1.35;
}

.daily-card-settlement-item dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.daily-card-settlement-item dl div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.daily-card-settlement-item dd {
    margin: 0;
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.daily-cash-count-table {
    min-width: 300px;
    table-layout: fixed;
}

.daily-cash-count-table th,
.daily-cash-count-table td {
    padding: 5px 6px;
}

.daily-cash-count-table th:nth-child(1),
.daily-cash-count-table td:nth-child(1) {
    width: 96px;
}

.daily-cash-count-table th:nth-child(2),
.daily-cash-count-table td:nth-child(2) {
    width: 70px;
}

.daily-cash-count-table th:nth-child(3),
.daily-cash-count-table td:nth-child(3) {
    width: 112px;
}

.daily-cash-count-table input {
    min-height: 30px;
    padding: 5px 6px;
}

.daily-input-table th,
.daily-input-table td {
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 7px;
    vertical-align: middle;
}

.daily-input-table th {
    color: #f6f1f8;
    background: rgba(75, 63, 110, 0.94);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.daily-input-table thead tr:first-child th {
    font-size: 14px;
}

.daily-input-table tfoot th,
.daily-input-table tfoot td {
    background: rgba(156, 140, 185, 0.09);
    font-weight: 900;
}

.daily-input-table input {
    width: 100%;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 4px;
    border-color: rgba(201, 192, 209, 0.88);
    background: rgba(47, 41, 72, 0.92);
    font-size: 12px;
}

.daily-input-table th:first-child,
.daily-input-table td:first-child {
    width: 42px;
}

.daily-input-table .row-number {
    min-width: 24px;
    padding: 0 4px;
}

.daily-sign-control {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: end;
    gap: 9px;
    min-width: 0;
}

.daily-report-sign-button {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
}

.daily-sign-history-button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
}

.daily-sign-note {
    min-height: 14px;
    min-width: 0;
    max-width: 100%;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
    text-align: left;
}

.daily-sign-note span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-sign-current {
    color: var(--text);
    font-weight: 800;
}

.daily-sign-edit {
    color: #f2ba4c;
}

.daily-sign-history-tooltip small {
    color: var(--muted);
    font-size: 10px;
}

.daily-text-input {
    text-align: left;
}

.daily-money-input,
.daily-quantity-input,
.formula-output {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.formula-output {
    color: #4b3f6e;
    white-space: nowrap;
}

.daily-mismatch,
.formula-output.negative-money {
    color: #8f3f62 !important;
}

.daily-input-table input.daily-mismatch {
    border-color: rgba(143, 63, 98, 0.82);
    color: #8f3f62;
    background: rgba(143, 63, 98, 0.08);
}

.daily-cash-count-table th:first-child,
.daily-cash-count-table td:first-child {
    width: 96px;
}

.employee-form,
.employee-list-panel,
.settings-form {
    border: 1px solid var(--line);
    background: rgba(53, 45, 82, 0.94);
    border-radius: 8px;
    box-shadow: 0 22px 70px var(--shadow);
}

.employee-form,
.settings-form {
    display: grid;
    gap: 14px;
    padding: 18px;
    align-self: start;
}

.employee-form h2,
.panel-heading h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 0;
}

.employee-list-panel {
    overflow: hidden;
}

.profile-summary {
    display: grid;
    gap: 10px;
}

.profile-summary div {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.38);
}

.profile-summary span {
    color: var(--muted);
    font-size: 11px;
}

.profile-summary strong {
    font-size: 15px;
}

.panel-heading {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.employee-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.crosscheck-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

.statement-checklist-table {
    min-width: 1120px;
}

.statement-checklist-table .statement-col-account {
    width: 260px;
}

.statement-checklist-table .statement-col-group {
    width: 220px;
}

.statement-checklist-table .statement-col-code {
    width: 250px;
}

.statement-checklist-table .statement-col-files {
    width: 90px;
}

.statement-checklist-table .statement-col-transactions {
    width: 150px;
}

.statement-checklist-table .statement-col-status {
    width: 180px;
}

.statement-checklist-table th:nth-child(4),
.statement-checklist-table th:nth-child(5),
.statement-checklist-table td.statement-count-cell {
    text-align: center;
}

.statement-checklist-table th:nth-child(6),
.statement-checklist-table .cashflow-status-cell {
    text-align: left;
}

.statement-checklist-table .statement-code-cell {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.account-flow-table {
    width: 100%;
    min-width: 1500px;
    table-layout: fixed;
}

.account-flow-table th,
.account-flow-table td {
    vertical-align: middle;
}

.account-flow-table th:nth-child(1),
.account-flow-table td:nth-child(1) {
    width: 250px;
}

.account-flow-table th:nth-child(2),
.account-flow-table td:nth-child(2) {
    width: 150px;
}

.account-flow-table th:nth-child(3),
.account-flow-table th:nth-child(4),
.account-flow-table th:nth-child(5),
.account-flow-table th:nth-child(6),
.account-flow-table th:nth-child(7),
.account-flow-table th:nth-child(8),
.account-flow-table td:nth-child(3),
.account-flow-table td:nth-child(4),
.account-flow-table td:nth-child(5),
.account-flow-table td:nth-child(6),
.account-flow-table td:nth-child(7),
.account-flow-table td:nth-child(8) {
    width: 125px;
    text-align: right;
}

.account-flow-table th:nth-child(9),
.account-flow-table td:nth-child(9) {
    width: 150px;
}

.account-flow-table th:nth-child(10),
.account-flow-table td:nth-child(10) {
    width: 130px;
}

.account-flow-group-row td {
    width: auto !important;
    padding: 12px 14px !important;
    background: rgba(20, 18, 36, 0.72);
    border-bottom: 0;
}

.account-flow-group-card {
    display: grid;
    grid-template-columns: minmax(240px, 1.1fr) minmax(280px, 0.9fr);
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line-soft);
    border-left: 4px solid var(--ai-cyan, #22b7ff);
    border-radius: 8px;
    padding: 12px;
    background: rgba(47, 41, 72, 0.72);
}

.account-flow-group-row.group-service-accountant .account-flow-group-card {
    border-left-color: #37d69a;
    background: linear-gradient(135deg, rgba(55, 214, 154, 0.16), rgba(34, 183, 255, 0.08));
}

.account-flow-group-row.group-service-source .account-flow-group-card {
    border-left-color: #f2ba4c;
    background: linear-gradient(135deg, rgba(242, 186, 76, 0.16), rgba(102, 120, 255, 0.07));
}

.account-flow-group-row.group-installment .account-flow-group-card {
    border-left-color: #ba96c1;
    background: linear-gradient(135deg, rgba(186, 150, 193, 0.16), rgba(34, 183, 255, 0.06));
}

.account-flow-group-row.group-personal .account-flow-group-card {
    border-left-color: #4fd1c5;
    background: linear-gradient(135deg, rgba(79, 209, 197, 0.15), rgba(242, 186, 76, 0.07));
}

.account-flow-group-copy {
    display: grid;
    gap: 4px;
}

.account-flow-group-copy strong {
    color: var(--text);
    font-size: 13px;
}

.account-flow-group-copy span {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.account-flow-group-totals,
.service-control-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.account-flow-group-totals span,
.service-control-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px;
}

.account-flow-group-totals b,
.service-control-metrics b,
.service-control-metrics em {
    color: var(--text);
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.service-control-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(55, 214, 154, 0.36);
    border-radius: 8px;
    padding: 10px;
    background: rgba(55, 214, 154, 0.09);
}

.service-control-card.bad {
    border-color: rgba(255, 145, 176, 0.46);
    background: rgba(255, 145, 176, 0.1);
}

.service-control-card.warn {
    border-color: rgba(242, 186, 76, 0.44);
    background: rgba(242, 186, 76, 0.1);
}

.service-control-card.collapsed {
    gap: 0;
}

.service-control-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.service-control-main strong {
    color: var(--text);
    font-size: 12px;
}

.service-control-main:focus-visible {
    outline: 2px solid rgba(34, 183, 255, 0.46);
    outline-offset: 3px;
}

.service-control-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.service-control-toggle-button {
    min-height: 28px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 0 9px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    font-size: 10px;
    font-weight: 800;
}

.service-control-toggle-button:hover,
.service-control-toggle-button:focus-visible {
    border-color: rgba(34, 183, 255, 0.52);
    background: rgba(34, 183, 255, 0.16);
}

.service-control-collapsible {
    display: grid;
    gap: 10px;
}

.service-control-quick-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.service-control-quick-metrics span {
    display: grid;
    gap: 3px;
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    font-size: 11px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.service-control-quick-metrics b,
.service-control-quick-metrics small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
}

.service-control-quick-metrics .attention {
    border-color: rgba(242, 186, 76, 0.48);
    background: rgba(242, 186, 76, 0.12);
}

.service-control-quick-metrics .good {
    border-color: rgba(55, 214, 154, 0.34);
    background: rgba(55, 214, 154, 0.08);
}

.service-control-metrics small {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
}

.service-unknown-panel {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(242, 186, 76, 0.42);
    border-radius: 8px;
    padding: 10px;
    background: rgba(242, 186, 76, 0.08);
}

.service-unknown-panel.good {
    border-color: rgba(55, 214, 154, 0.34);
    background: rgba(55, 214, 154, 0.08);
}

.service-unknown-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.service-unknown-heading div {
    display: grid;
    gap: 3px;
}

.service-unknown-heading strong {
    color: var(--text);
    font-size: 12px;
}

.service-unknown-heading span,
.service-unknown-panel.good span {
    color: var(--muted);
    font-size: 10px;
}

.service-unknown-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 6px;
}

.service-unknown-steps span {
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 7px 8px;
    color: var(--muted);
    background: rgba(7, 11, 34, 0.22);
    font-size: 9px;
    line-height: 1.35;
}

.service-unknown-table {
    display: grid;
    gap: 5px;
}

.service-unknown-row {
    display: grid;
    grid-template-columns: 72px minmax(90px, 1fr) minmax(112px, 1.2fr) minmax(118px, 1fr);
    gap: 7px;
    align-items: center;
    border: 1px solid rgba(242, 186, 76, 0.24);
    border-radius: 6px;
    padding: 7px 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 9px;
}

.service-unknown-row strong {
    color: var(--text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.service-unknown-row em {
    color: #f2ba4c;
    font-style: normal;
}

.service-control-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.service-control-details details {
    min-width: 0;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(7, 11, 34, 0.22);
    overflow: hidden;
}

.service-control-details summary {
    cursor: pointer;
    padding: 8px 10px;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
}

.service-control-list {
    display: grid;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
    padding: 0 8px 8px;
}

.service-control-item {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 7px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
}

.service-control-item strong {
    color: var(--text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.service-control-item em {
    color: #f2ba4c;
    font-style: normal;
}

.service-control-item.matched {
    border-color: rgba(55, 214, 154, 0.32);
}

.service-control-item.attention {
    border-color: rgba(242, 186, 76, 0.38);
    background: rgba(242, 186, 76, 0.08);
}

.service-control-item.loan {
    border-color: rgba(34, 183, 255, 0.34);
    background: rgba(34, 183, 255, 0.08);
}

.service-control-item-summary {
    background: rgba(55, 214, 154, 0.08);
}

.service-control-note {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
    padding-top: 10px;
}

.service-control-note label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.service-control-note textarea {
    width: 100%;
    resize: vertical;
    min-height: 64px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 9px 10px;
    background: rgba(7, 11, 34, 0.34);
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

.service-control-note textarea:focus {
    outline: 2px solid rgba(34, 183, 255, 0.36);
    border-color: rgba(34, 183, 255, 0.58);
}

.service-control-note-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.service-control-note-actions small,
.empty-inline {
    color: var(--muted);
    font-size: 9px;
}

.account-flow-row.group-service-accountant td:first-child {
    box-shadow: inset 4px 0 0 rgba(55, 214, 154, 0.72);
}

.account-flow-row.group-service-source td:first-child {
    box-shadow: inset 4px 0 0 rgba(242, 186, 76, 0.8);
}

.account-flow-row.group-installment td:first-child {
    box-shadow: inset 4px 0 0 rgba(186, 150, 193, 0.78);
}

.account-flow-row.group-personal td:first-child {
    box-shadow: inset 4px 0 0 rgba(79, 209, 197, 0.78);
}

.daily-report-table {
    min-width: 1080px;
}

.daily-report-table th:nth-child(1),
.daily-report-table td:nth-child(1) {
    width: 240px;
}

.daily-report-table th:nth-child(2),
.daily-report-table td:nth-child(2) {
    width: 140px;
}

.formula-cell,
.source-cell {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.source-cell {
    display: grid;
    gap: 6px;
}

.cash-count-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
}

.cash-count-card {
    display: grid;
    gap: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 14px;
    background: rgba(75, 63, 110, 0.38);
}

.cash-count-heading {
    display: grid;
    gap: 5px;
}

.cash-count-heading h3 {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0;
}

.cash-count-heading span,
.cash-count-totals span,
.cash-count-denominations span {
    color: var(--muted);
    font-size: 11px;
}

.cash-count-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cash-count-totals div,
.cash-count-denominations div {
    display: grid;
    gap: 5px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 10px;
    background: rgba(75, 63, 110, 0.42);
}

.cash-count-totals strong,
.cash-count-denominations strong {
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.cash-count-denominations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.crosscheck-table th,
.crosscheck-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 14px;
    text-align: left;
    vertical-align: middle;
}

.crosscheck-table th {
    color: #f6f1f8;
    background: var(--panel-strong);
    font-size: 11px;
}

.account-cell {
    display: grid;
    gap: 4px;
}

.account-cell-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 8px;
    align-items: center;
}

.account-cell strong {
    color: var(--text);
    font-size: 11px;
}

.account-cell span {
    color: var(--muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.account-cell .account-cell-subnote {
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(34, 183, 255, 0.22);
    border-radius: 999px;
    padding: 2px 7px;
    color: #a8dfff;
    background: rgba(34, 183, 255, 0.08);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.account-cell .account-card-fee-line {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    border: 1px solid rgba(242, 186, 76, 0.34);
    border-radius: 6px;
    padding: 2px 6px;
    color: #f2ba4c;
    background: rgba(242, 186, 76, 0.09);
    font-size: 10px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.account-cell .account-external-breakdown {
    border-color: rgba(242, 186, 76, 0.34);
    color: #f2ba4c;
    background: rgba(242, 186, 76, 0.09);
}

.cashflow-info-button {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    justify-self: end;
    color: #ffffff;
    background: linear-gradient(135deg, #6678ff, #22b7ff);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(34, 183, 255, 0.22);
    font-size: 14px;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}

.cashflow-info-button:hover,
.cashflow-info-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 14px 30px rgba(102, 120, 255, 0.34);
}

.cashflow-issue-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    max-width: 100%;
    border: 1px solid rgba(255, 145, 176, 0.46);
    border-radius: 999px;
    padding: 0 9px;
    color: #ffd7e3;
    background: rgba(255, 145, 176, 0.12);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.cashflow-issue-button svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cashflow-issue-button.warn {
    border-color: rgba(242, 186, 76, 0.5);
    color: #f8d992;
    background: rgba(242, 186, 76, 0.12);
}

.cashflow-issue-button.good {
    border-color: rgba(55, 214, 154, 0.42);
    color: #bff5df;
    background: rgba(55, 214, 154, 0.12);
}

.money-cell {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.negative-money {
    color: var(--warning);
    font-weight: 800;
}

.status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--muted);
    background: rgba(108, 95, 141, 0.12);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.cashflow-status-cell .status-tag {
    min-width: 84px;
}

.status-tag.good {
    color: var(--accent);
    background: var(--accent-soft);
}

.status-tag.warn {
    color: var(--warning);
    background: rgba(186, 150, 193, 0.12);
}

.status-tag.bad {
    color: var(--danger);
    background: rgba(143, 63, 98, 0.12);
}

.statement-wait-note {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--warning);
    background: rgba(186, 150, 193, 0.12);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.employee-table th,
.employee-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 14px;
    text-align: left;
}

.employee-table th {
    color: #f6f1f8;
    background: var(--panel-strong);
    font-size: 11px;
}

.employee-actions {
    width: 70px;
    text-align: center !important;
}

.employee-edit-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(156, 140, 185, 0.48);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(156, 140, 185, 0.1);
}

.employee-edit-button:hover {
    border-color: var(--accent);
    background: rgba(156, 140, 185, 0.18);
}

.employee-edit-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-readonly-panel p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.muted-field {
    opacity: 0.55;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 700;
}

.employee-group-pill {
    color: var(--ai-teal);
    background: rgba(24, 208, 189, 0.14);
}

.table-scroll {
    overflow-x: auto;
}

.cashflow-panel .table-scroll {
    max-height: min(72vh, 720px);
    overflow: auto;
}

.cashflow-panel .crosscheck-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: 0 1px 0 var(--line-soft), 0 8px 18px rgba(0, 0, 0, 0.22);
}

.ledger-table {
    width: 100%;
    min-width: 1040px;
    border-collapse: collapse;
    table-layout: fixed;
}

.ledger-table th,
.ledger-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 8px;
    vertical-align: middle;
}

.ledger-table th {
    height: 44px;
    color: #f6f1f8;
    background: var(--panel-strong);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
}

.ledger-table th:nth-child(1),
.ledger-table td:nth-child(1) {
    width: 62px;
    text-align: center;
}

.ledger-table th:nth-child(2),
.ledger-table td:nth-child(2) {
    width: 150px;
}

.ledger-table th:nth-child(4),
.ledger-table th:nth-child(5),
.ledger-table th:nth-child(6),
.ledger-table th:nth-child(7),
.ledger-table td:nth-child(4),
.ledger-table td:nth-child(5),
.ledger-table td:nth-child(6),
.ledger-table td:nth-child(7) {
    width: 142px;
}

.ledger-table th:nth-child(8),
.ledger-table td:nth-child(8) {
    width: 160px;
}

.ledger-table th:nth-child(9),
.ledger-table td:nth-child(9) {
    width: 80px;
    text-align: center;
}

.ledger-table tr.signed {
    background: rgba(156, 140, 185, 0.055);
}

.ledger-table tr.revision-row {
    font-size: 12px;
    background: rgba(186, 150, 193, 0.1);
}

.ledger-table tr.revision-row td {
    padding-top: 4px;
    padding-bottom: 4px;
    color: var(--muted);
}

.ledger-table tr.revision-row .employee-cell span,
.ledger-table tr.revision-row .revision-label {
    color: #4b3f6e;
    background: #4b3f6e;
}

.revision-label {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.ledger-table input {
    min-height: 38px;
    color: var(--text);
    border-color: var(--line-soft);
    background: var(--input);
}

.ledger-table input[readonly] {
    color: var(--muted);
    background: rgba(108, 95, 141, 0.07);
}

.ledger-table tr.signed input:not([data-field='ton_quy_amount']) {
    color: var(--muted);
    background: rgba(75, 63, 110, 0.36);
    cursor: not-allowed;
}

.ledger-table input.warning-balance {
    color: #8f3f62;
    background: rgba(143, 63, 98, 0.08);
    border-color: rgba(143, 63, 98, 0.34);
    font-weight: 800;
}

.ledger-table input.daily-report-cash-mismatch {
    color: #ffe8f0;
    background: rgba(143, 63, 98, 0.42);
    border-color: #ff91b0;
    box-shadow: inset 0 0 0 1px rgba(255, 145, 176, 0.42);
    font-weight: 900;
}

.ledger-table input.daily-report-cash-pending {
    color: #fff4cf;
    background: rgba(255, 174, 44, 0.2);
    border-color: rgba(255, 206, 98, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 206, 98, 0.25);
    font-weight: 850;
}

.ledger-table tr.signed input.daily-report-cash-mismatch {
    color: #ffe8f0;
    background: rgba(143, 63, 98, 0.48);
    border-color: #ff91b0;
    cursor: not-allowed;
}

.ledger-issue-row td {
    padding: 6px 10px 12px;
    background: transparent;
}

.ledger-issue-panel {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) minmax(220px, 2fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 145, 176, 0.26);
    border-radius: 8px;
    background: rgba(143, 63, 98, 0.16);
}

.ledger-issue-panel strong,
.ledger-issue-panel small {
    min-width: 0;
}

.ledger-issue-panel small {
    color: var(--muted);
}

.ledger-issue-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.ledger-issue-status.good {
    color: #d8ffe8;
    background: rgba(45, 189, 120, 0.22);
}

.ledger-issue-status.warn {
    color: #fff2ca;
    background: rgba(255, 174, 44, 0.24);
}

.ledger-issue-status.bad {
    color: #ffe8f0;
    background: rgba(255, 93, 117, 0.22);
}

@media (max-width: 760px) {
    .ledger-issue-panel {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}

.balance-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    align-items: center;
}

.deposit-proof-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(156, 140, 185, 0.48);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(156, 140, 185, 0.1);
}

.deposit-proof-button:hover {
    border-color: var(--accent);
    background: rgba(156, 140, 185, 0.18);
}

.deposit-proof-missing {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 6px;
    border: 1px solid rgba(178, 94, 32, 0.46);
    border-radius: 6px;
    color: var(--danger, #b25e20);
    background: rgba(178, 94, 32, 0.1);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.deposit-proof-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sign-button.review-only,
.sign-button:disabled {
    opacity: 0.62;
    cursor: not-allowed;
}

.employee-cell {
    display: grid;
    gap: 4px;
    min-height: 38px;
    align-content: center;
}

.employee-cell.has-tooltip {
    cursor: help;
}

.employee-name-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.employee-cell strong {
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.employee-cell span {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #faf8fb;
    background: var(--warning);
    font-size: 10px;
    font-weight: 800;
}

.revision-note {
    display: block;
    color: #6c5f8d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

.revision-change {
    display: block;
    margin-top: 2px;
    color: #6c5f8d;
    font-size: 10px;
    line-height: 1.35;
}

.row-number {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.money-input,
.balance-input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sign-button {
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--input);
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
}

.sign-button.signed {
    background: var(--accent);
    border-color: var(--accent);
    color: #faf8fb;
}

.ghost-button {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    background: rgba(75, 63, 110, 0.38);
    padding: 0 14px;
}

.sign-dialog {
    width: min(420px, calc(100% - 28px));
    max-height: calc(100svh - 28px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 32px 90px var(--shadow);
}

.sign-dialog::backdrop {
    background: rgba(75, 63, 110, 0.62);
}

.sign-box {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.sign-box h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: 0;
}

.sign-box p {
    margin: 6px 0 0;
    color: var(--muted);
}

.sign-box textarea {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text);
    background: var(--input);
    font: inherit;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dialog-error:empty {
    display: none;
}

.deposit-dialog {
    width: min(960px, calc(100% - 28px));
}

.cashflow-issue-dialog {
    width: min(1320px, calc(100% - 28px));
}

.cashflow-issue-dialog .sign-box {
    gap: 14px;
    padding: 20px;
    max-height: calc(100svh - 28px);
}

.cashflow-issue-body,
.cashflow-issue-note,
.cashflow-issue-password {
    display: grid;
    gap: 8px;
}

.cashflow-issue-note span,
.cashflow-issue-password span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.cashflow-issue-note textarea,
.cashflow-issue-note select,
.cashflow-issue-password input {
    width: 100%;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 10px 11px;
    background: var(--input);
    color: var(--text);
    font: inherit;
}

.cashflow-issue-note textarea {
    resize: vertical;
    min-height: 92px;
}

.cashflow-issue-note select {
    min-height: 42px;
}

.cashflow-issue-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.cashflow-issue-metrics span,
.cashflow-issue-detail-list div,
.cashflow-issue-files,
.cashflow-issue-audit {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.cashflow-issue-metrics b,
.cashflow-issue-detail-list b,
.cashflow-issue-files > strong {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-bottom: 4px;
}

.cashflow-issue-metrics strong,
.cashflow-issue-detail-list span {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cashflow-issue-detail-list,
.cashflow-issue-files,
.cashflow-issue-audit {
    display: grid;
    gap: 8px;
}

.cashflow-statement-file {
    display: grid;
    gap: 3px;
    width: 100%;
    border: 1px solid rgba(34, 183, 255, 0.28);
    border-radius: 6px;
    padding: 9px;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    background: rgba(34, 183, 255, 0.08);
    cursor: pointer;
}

.cashflow-statement-file:hover,
.cashflow-statement-file:focus-visible {
    border-color: rgba(34, 183, 255, 0.58);
    background: rgba(34, 183, 255, 0.14);
}

.statement-preview-file-button {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid rgba(34, 183, 255, 0.35);
    border-radius: 6px;
    padding: 3px 7px;
    color: var(--text);
    font: inherit;
    font-weight: 900;
    background: rgba(34, 183, 255, 0.09);
    cursor: pointer;
}

.statement-preview-file-button:hover,
.statement-preview-file-button:focus-visible {
    border-color: rgba(34, 183, 255, 0.62);
    background: rgba(34, 183, 255, 0.16);
}

.cashflow-statement-file small,
.cashflow-issue-files > span,
.cashflow-issue-audit span {
    color: var(--muted);
    font-size: 10px;
}

.statement-file-reader-panel {
    display: grid;
    gap: 10px;
    border: 1px solid rgba(34, 183, 255, 0.25);
    border-radius: 8px;
    padding: 10px;
    background: rgba(7, 11, 34, 0.24);
}

.statement-file-reader-panel.idle,
.statement-file-reader-panel.loading {
    color: var(--muted);
}

.statement-file-reader-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
}

.statement-file-reader-heading > div {
    display: grid;
    gap: 3px;
}

.statement-file-reader-heading strong {
    color: var(--text);
    font-size: 12px;
}

.statement-file-reader-heading span,
.statement-file-reader-counts {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.statement-file-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.statement-file-original-link {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 0 9px;
    color: var(--text);
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
}

.statement-file-reader-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 0 9px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.statement-file-reader-close:hover,
.statement-file-reader-close:focus-visible {
    color: var(--text);
    border-color: rgba(124, 92, 255, 0.42);
    outline: none;
}

.statement-original-embed {
    min-height: 360px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.04);
}

.statement-original-embed img {
    display: block;
    width: 100%;
    height: auto;
}

.statement-original-embed iframe {
    width: 100%;
    height: min(70vh, 720px);
    border: 0;
}

.statement-file-reader-scroll {
    max-height: min(62vh, 680px);
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.statement-file-reader-table {
    width: 100%;
    min-width: 1360px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 10px;
}

.statement-file-reader-table th,
.statement-file-reader-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 7px 8px;
    vertical-align: top;
}

.statement-file-reader-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    color: #f6f1f8;
    background: var(--panel-strong);
    text-align: left;
}

.statement-file-reader-table th:nth-child(1),
.statement-file-reader-table td:nth-child(1) {
    width: 116px;
}

.statement-file-reader-table th:nth-child(2),
.statement-file-reader-table td:nth-child(2) {
    width: 64px;
}

.statement-file-reader-table th:nth-child(3),
.statement-file-reader-table td:nth-child(3),
.statement-file-reader-table th:nth-child(4),
.statement-file-reader-table td:nth-child(4) {
    width: 82px;
}

.statement-file-reader-table th:nth-child(5),
.statement-file-reader-table td:nth-child(5),
.statement-file-reader-table th:nth-child(6),
.statement-file-reader-table td:nth-child(6) {
    width: 108px;
}

.statement-file-reader-table th:nth-child(7),
.statement-file-reader-table td:nth-child(7) {
    width: 130px;
}

.statement-file-reader-table th:nth-child(8),
.statement-file-reader-table td:nth-child(8) {
    width: 220px;
}

.statement-file-reader-table th:nth-child(9),
.statement-file-reader-table td:nth-child(9),
.statement-file-reader-table th:nth-child(10),
.statement-file-reader-table td:nth-child(10) {
    width: 230px;
}

.statement-file-reader-table th:nth-child(11),
.statement-file-reader-table td:nth-child(11) {
    width: 220px;
}

.statement-file-row.ok {
    background: rgba(55, 214, 154, 0.08);
}

.statement-file-row.warn {
    background: rgba(242, 186, 76, 0.12);
}

.statement-file-row.bad {
    background: rgba(188, 41, 76, 0.24);
}

.statement-file-row.target {
    outline: 2px solid rgba(34, 183, 255, 0.75);
    outline-offset: -2px;
}

.statement-file-raw-cells summary {
    max-height: 42px;
    overflow: hidden;
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.statement-file-raw-cells div {
    display: grid;
    gap: 4px;
    margin-top: 6px;
    max-height: 140px;
    overflow: auto;
}

.statement-file-raw-cells span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    color: var(--muted);
}

.statement-file-raw-cells b {
    color: var(--text);
}

.statement-file-empty-cells {
    color: var(--muted);
    font-weight: 800;
}

.statement-preview-panel {
    display: grid;
    gap: 9px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 10px;
    background: rgba(7, 11, 34, 0.2);
}

.statement-preview-panel.loading,
.statement-preview-empty,
.statement-preview-error {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.statement-preview-error {
    color: #ff91b0;
}

.statement-preview-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.statement-preview-heading strong,
.statement-preview-panel > strong {
    color: var(--text);
    font-size: 12px;
}

.statement-preview-heading span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.statement-preview-scroll {
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.statement-preview-table {
    width: 100%;
    min-width: 1460px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 10px;
}

.statement-preview-table th,
.statement-preview-table td {
    border-bottom: 1px solid var(--line-soft);
    padding: 7px 8px;
    vertical-align: top;
}

.statement-preview-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #f6f1f8;
    background: var(--panel-strong);
    text-align: left;
}

.statement-preview-table th:nth-child(1),
.statement-preview-table td:nth-child(1) {
    width: 112px;
}

.statement-preview-table th:nth-child(2),
.statement-preview-table td:nth-child(2) {
    width: 150px;
}

.statement-preview-table th:nth-child(3),
.statement-preview-table td:nth-child(3) {
    width: 130px;
}

.statement-preview-table th:nth-child(4),
.statement-preview-table td:nth-child(4),
.statement-preview-table th:nth-child(5),
.statement-preview-table td:nth-child(5) {
    width: 82px;
}

.statement-preview-table th:nth-child(6),
.statement-preview-table td:nth-child(6),
.statement-preview-table th:nth-child(7),
.statement-preview-table td:nth-child(7) {
    width: 108px;
}

.statement-preview-table th:nth-child(8),
.statement-preview-table td:nth-child(8) {
    width: 130px;
}

.statement-preview-table th:nth-child(9),
.statement-preview-table td:nth-child(9) {
    width: 220px;
}

.statement-preview-table th:nth-child(10),
.statement-preview-table td:nth-child(10),
.statement-preview-table th:nth-child(11),
.statement-preview-table td:nth-child(11) {
    width: 220px;
}

.statement-preview-table th:nth-child(12),
.statement-preview-table td:nth-child(12) {
    width: 260px;
}

.statement-preview-row.ok {
    background: rgba(55, 214, 154, 0.08);
}

.statement-preview-row.bad {
    background: rgba(255, 145, 176, 0.13);
}

.statement-preview-row.warn {
    background: rgba(242, 186, 76, 0.12);
}

.statement-preview-row[data-statement-file-id]:not([data-statement-file-id=""]) {
    cursor: pointer;
}

.statement-preview-row[data-statement-file-id]:not([data-statement-file-id=""]):hover {
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.34);
}

.statement-preview-row strong,
.statement-preview-table a {
    color: var(--text);
    font-weight: 800;
}

.statement-preview-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.statement-preview-description {
    display: block;
    max-height: 58px;
    overflow: auto;
    line-height: 1.35;
}

.statement-preview-line-explanation {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid rgba(209, 194, 255, 0.24);
    border-radius: 8px;
    padding: 8px;
    color: var(--text);
    background: rgba(8, 12, 34, 0.62);
    font: inherit;
    line-height: 1.35;
    outline: none;
}

.statement-preview-line-explanation:focus {
    border-color: rgba(124, 92, 255, 0.72);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16);
}

.statement-preview-line-explanation[readonly] {
    cursor: default;
    opacity: 0.78;
}

.statement-preview-line-ok {
    color: var(--muted);
    font-weight: 800;
}

.statement-preview-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 9px;
    font-weight: 900;
}

.statement-preview-status.good {
    color: #102b24;
    background: #37d69a;
}

.statement-preview-status.bad {
    color: #fff7fb;
    background: #8f3f62;
}

.statement-preview-status.warn {
    color: #2c2106;
    background: #f2ba4c;
}

.employee-edit-dialog {
    width: min(520px, calc(100% - 28px));
}

.deposit-gallery {
    display: grid;
    gap: 14px;
    max-height: min(70vh, 720px);
    overflow-y: auto;
}

.deposit-gallery figure {
    margin: 0;
    display: grid;
    gap: 8px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 10px;
}

.deposit-image-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.deposit-image-toolbar button {
    min-width: 40px;
    min-height: 34px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--text);
    background: rgba(156, 140, 185, 0.14);
    font-size: 13px;
    font-weight: 900;
}

.deposit-image-toolbar button:hover {
    border-color: var(--accent);
    background: rgba(156, 140, 185, 0.22);
}

.deposit-image-stage {
    position: relative;
    width: 100%;
    height: min(68vh, 760px);
    min-height: 320px;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #1f1a31;
    cursor: zoom-in;
    touch-action: none;
}

.deposit-image-stage.is-pannable {
    cursor: grab;
}

.deposit-image-stage.is-dragging {
    cursor: grabbing;
}

.deposit-gallery img,
.deposit-zoom-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
    user-select: none;
    will-change: transform;
    transform-origin: center center;
    image-orientation: from-image;
}

.deposit-gallery figcaption {
    color: var(--muted);
    font-size: 11px;
}

.hover-tooltip {
    position: fixed;
    z-index: 40;
    max-width: min(420px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid rgba(186, 150, 193, 0.46);
    border-radius: 8px;
    color: #faf8fb;
    background: rgba(75, 63, 110, 0.96);
    box-shadow: 0 18px 48px var(--shadow);
    font-size: 11px;
    line-height: 1.45;
    pointer-events: none;
}

.hover-tooltip.fix-guide-tooltip {
    z-index: 120;
    max-width: min(520px, calc(100vw - 24px));
    padding: 14px 16px;
    border-color: rgba(255, 157, 34, 0.58);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 54%),
        rgba(20, 18, 40, 0.98);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    font-size: 12px;
}

.fix-guide-head {
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
}

.fix-guide-head strong {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
}

.fix-guide-head span {
    color: var(--muted);
}

.hover-tooltip.fix-guide-tooltip ol {
    display: grid;
    gap: 7px;
    margin: 0;
    padding-left: 18px;
}

.hover-tooltip.fix-guide-tooltip li {
    color: #faf8fb;
}

.fix-guide-trigger {
    display: none;
}

@media (hover: none), (pointer: coarse) {
    .hover-tooltip.fix-guide-tooltip:not(.mobile-fix-guide-tooltip) {
        display: none !important;
    }
}

.hover-tooltip.mobile-fix-guide-tooltip {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto;
    max-width: none;
    max-height: min(54svh, 430px);
    overflow-y: auto;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
    .fix-guide-trigger-host {
        position: relative;
    }

    td.fix-guide-trigger-host,
    th.fix-guide-trigger-host {
        padding-right: 48px !important;
    }

    .fix-guide-trigger {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 4;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #ffffff;
        background: linear-gradient(135deg, #7e8cff, #ba96c1);
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
        font-size: 16px;
        font-weight: 900;
        font-style: italic;
        line-height: 1;
    }

    .hover-tooltip.mobile-fix-guide-tooltip .fix-guide-head strong {
        font-size: 15px;
    }

    .hover-tooltip.mobile-fix-guide-tooltip ol {
        gap: 9px;
    }

    .hover-tooltip.mobile-fix-guide-tooltip li {
        font-size: 13px;
        line-height: 1.45;
    }
}

.toast-message {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 14px;
    border: 1px solid rgba(156, 140, 185, 0.44);
    border-radius: 8px;
    color: var(--text);
    background: rgba(53, 45, 82, 0.96);
    box-shadow: 0 18px 48px var(--shadow);
}

.toast-message.error {
    border-color: rgba(143, 63, 98, 0.42);
    color: #8f3f62;
}

.support-chat-panel {
    position: fixed;
    right: max(18px, env(safe-area-inset-right, 0px));
    left: auto;
    top: calc(86px + env(safe-area-inset-top, 0px));
    z-index: 170;
    width: min(430px, calc(100vw - 36px));
    max-height: min(720px, calc(100svh - 118px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: var(--text);
    background: rgba(18, 24, 52, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
    overflow: hidden;
}

.support-chat-panel[hidden] {
    display: none !important;
}

.support-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(135deg, rgba(34, 183, 255, 0.18), rgba(102, 120, 255, 0.18));
}

.support-chat-head strong,
.support-chat-head span {
    display: block;
}

.support-chat-head span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.support-chat-messages {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 220px;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

.support-message {
    max-width: 94%;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    line-height: 1.45;
    font-size: 13px;
}

.support-message.user {
    justify-self: end;
    color: #ffffff;
    background: rgba(102, 120, 255, 0.28);
}

.support-message.bot {
    justify-self: start;
    background: rgba(47, 41, 72, 0.9);
}

.support-attention-list {
    width: 100%;
    max-width: 100%;
    border-color: rgba(244, 161, 77, 0.42);
    background: linear-gradient(180deg, rgba(244, 161, 77, 0.13), rgba(47, 41, 72, 0.9));
}

.support-attention-title {
    display: grid;
    gap: 2px;
}

.support-attention-title span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.support-message p {
    margin: 0 0 8px;
}

.support-message ol {
    margin: 0;
    padding-left: 18px;
}

.support-message li + li {
    margin-top: 6px;
}

.support-error-card {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding: 9px;
    border: 1px solid rgba(244, 161, 77, 0.38);
    border-radius: 8px;
    background: rgba(244, 161, 77, 0.08);
}

.support-error-card strong,
.support-error-card span,
.support-error-card em {
    overflow-wrap: anywhere;
}

.support-error-card span {
    color: var(--muted);
}

.support-error-card em {
    color: #dcd7d5;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.support-error-card button {
    width: fit-content;
    min-height: 30px;
    margin-top: 4px;
    padding: 0 10px;
    color: #ffffff;
    background: rgba(34, 183, 255, 0.22);
    border: 1px solid rgba(34, 183, 255, 0.42);
    border-radius: 6px;
    font-weight: 800;
}

.support-error-card.high {
    border-color: rgba(255, 91, 122, 0.58);
    background: rgba(255, 91, 122, 0.12);
}

.support-error-card.medium {
    border-color: rgba(244, 161, 77, 0.5);
}

.support-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line-soft);
    background: rgba(7, 11, 34, 0.42);
}

.support-chat-form input {
    min-height: 40px;
}

@media (max-width: 920px) {
    .app-header {
        align-items: flex-start;
    }

    .header-actions {
        justify-content: flex-start;
    }

    .toolbar {
        grid-template-columns: 1fr;
    }

    .status-pill {
        justify-self: stretch;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .all-branch-ledger-cards {
        grid-template-columns: 1fr;
    }

    .all-branch-ledger-card {
        grid-template-columns: 1fr;
    }

    .deposit-period-summary {
        grid-template-columns: 1fr;
    }

    .employee-layout,
    .settings-layout,
    .reminder-layout,
    .transfer-layout,
    .attendance-layout,
    .request-layout,
    .photo-report-layout {
        grid-template-columns: 1fr;
    }

    .cashflow-toolbar,
    .cashflow-summary-grid,
    .service-control-quick-metrics,
    .service-control-details,
    .service-unknown-steps,
    .daily-report-toolbar,
    .daily-report-summary-grid,
    .transfer-card-content,
    .transfer-card-main,
    .cleaning-summary,
    .cleaning-task-meta,
    .photo-report-card-main,
    .attendance-summary-grid,
    .attendance-schedule-grid,
    .attendance-shift-form,
    .attendance-leave-fields,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .service-unknown-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .daily-entry-title,
    .daily-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-section-title span {
        text-align: left;
    }

    .daily-total-strip,
    .daily-section-grid {
        grid-template-columns: 1fr;
    }

    .daily-section-grid .daily-table-scroll + .daily-table-scroll {
        border-top: 1px solid var(--line-soft);
        border-left: 0;
    }
}

@media (max-width: 760px) {
    body {
        font-size: 13px;
    }

    input,
    select {
        min-height: 46px;
        font-size: 16px;
    }

    .login-page {
        align-items: center;
        padding:
            max(16px, env(safe-area-inset-top, 0px))
            max(16px, env(safe-area-inset-right, 0px))
            max(16px, env(safe-area-inset-bottom, 0px))
            max(16px, env(safe-area-inset-left, 0px));
    }

    .login-panel {
        padding: 22px;
    }

    .login-form {
        gap: 14px;
        margin-top: 22px;
    }

    .login-form button,
    .primary-button,
    .passkey-login-button,
    .ghost-button {
        min-height: 46px;
    }

    .login-divider {
        margin: 14px 0;
    }

    .app-header {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-height: auto;
        padding:
            max(12px, env(safe-area-inset-top, 0px))
            max(12px, env(safe-area-inset-right, 0px))
            12px
            max(12px, env(safe-area-inset-left, 0px));
    }

    .brand-mark {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
    }

    .brand-line,
    .brand-line > div {
        min-width: 0;
    }

    .brand-line h1,
    .brand-line p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .login-brand h1,
    .brand-line h1 {
        font-size: 20px;
    }

    .login-brand p,
    .brand-line p {
        font-size: 12px;
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .app-shell {
        padding:
            14px
            max(10px, env(safe-area-inset-right, 0px))
            max(28px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px));
    }

    .app-tabs {
        gap: 6px;
        margin: 0 -10px 14px;
        padding: 0 10px 8px;
    }

    .tab-button {
        min-height: 44px;
        padding: 0 14px;
        white-space: nowrap;
    }

    .toolbar {
        gap: 10px;
        margin-bottom: 12px;
    }

    .segmented-control {
        min-height: 46px;
    }

    .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .deposit-period-summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .summary-tile {
        min-height: 82px;
        gap: 6px;
        padding: 12px;
    }

    .summary-tile strong {
        font-size: 21px;
        overflow-wrap: anywhere;
    }

    .panel-heading {
        min-height: auto;
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .ledger-panel,
    .cashflow-panel,
    .daily-entry-title,
    .daily-excel-panel,
    .employee-form,
    .employee-list-panel,
    .transfer-form,
    .transfer-board,
    .attendance-clock-panel,
    .attendance-report-panel,
    .attendance-table-card,
    .attendance-calendar-panel,
    .photo-report-form,
    .photo-report-board,
    .settings-form {
        box-shadow: 0 12px 36px var(--shadow);
    }

    .table-scroll {
        overflow-x: visible;
    }

    .ledger-table,
    .employee-table,
    .crosscheck-table,
    .account-flow-table,
    .attendance-table {
        min-width: 0;
        display: block;
    }

    .ledger-table thead,
    .employee-table thead,
    .crosscheck-table thead,
    .attendance-table thead {
        display: none;
    }

    .ledger-table tbody,
    .employee-table tbody,
    .crosscheck-table tbody,
    .attendance-table tbody {
        display: grid;
        gap: 10px;
        padding: 10px;
    }

    .ledger-table tr,
    .employee-table tr,
    .crosscheck-table tr,
    .attendance-table tr {
        display: grid;
        gap: 8px;
        border: 1px solid var(--line-soft);
        border-radius: 8px;
        background: rgba(75, 63, 110, 0.38);
        padding: 10px;
    }

    .ledger-table tr.signed {
        background: rgba(156, 140, 185, 0.075);
    }

    .ledger-table tr.revision-row {
        background: rgba(186, 150, 193, 0.12);
    }

    .ledger-table tr.revision-row td {
        padding: 0;
    }

    .ledger-table td,
    .employee-table td,
    .crosscheck-table td,
    .attendance-table td {
        width: auto !important;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        border-bottom: 0;
        padding: 0;
        text-align: left !important;
    }

    .ledger-table td::before,
    .employee-table td::before,
    .crosscheck-table td::before,
    .attendance-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.25;
    }

    .ledger-table td.money-cell,
    .crosscheck-table td.money-cell,
    .attendance-table td.money-cell {
        text-align: right !important;
    }

    .account-flow-group-row td {
        display: block;
    }

    .account-flow-group-row td::before {
        display: none;
        content: none;
    }

    .ledger-table input {
        min-height: 44px;
        padding: 9px 10px;
    }

    .ledger-add-row-button {
        min-height: 46px;
        width: 100%;
    }

    .ledger-table input[data-field="content"] {
        text-align: left;
    }

    .deposit-proof-button,
    .employee-edit-button,
    .sign-button {
        width: 44px;
        height: 44px;
    }

    .employee-actions {
        width: auto;
    }

    .employee-edit-button {
        justify-self: start;
    }

    .status-tag,
    .role-pill {
        width: fit-content;
        min-height: 30px;
    }

    .cash-count-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .cash-count-totals,
    .cash-count-denominations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-entry-title {
        padding: 12px;
    }

    .daily-entry-title h2 {
        font-size: 17px;
    }

    .daily-section-title {
        padding: 12px;
    }

    .daily-section-title h3 {
        font-size: 15px;
    }

    .daily-input-table input {
        min-height: 42px;
        font-size: 16px;
    }

    .daily-input-table th,
    .daily-input-table td {
        padding: 6px;
    }

    .sign-box {
        gap: 14px;
        padding: 18px;
    }

    .sign-dialog.attendance-gps-dialog {
        width: calc(100vw - 10px);
        height: calc(100svh - 10px);
        max-height: calc(100svh - 10px);
    }

    .attendance-gps-dialog .sign-box {
        gap: 10px;
        padding:
            max(10px, env(safe-area-inset-top, 0px))
            max(10px, env(safe-area-inset-right, 0px))
            max(10px, env(safe-area-inset-bottom, 0px))
            max(10px, env(safe-area-inset-left, 0px));
    }

    .attendance-gps-dialog-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(320px, 1fr) auto;
        gap: 10px;
        overflow: auto;
    }

    .attendance-gps-map-frame {
        min-height: min(54svh, 520px);
    }

    .attendance-gps-side {
        grid-template-rows: auto auto auto auto;
    }

    .attendance-gps-history {
        display: flex;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
    }

    .attendance-gps-history button {
        min-width: 150px;
    }

    .attendance-gps-side textarea {
        min-height: 96px;
    }

    .cashflow-issue-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100svh - 12px);
    }

    .cashflow-issue-dialog .sign-box {
        gap: 10px;
        padding: 12px;
    }

    .cashflow-issue-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cashflow-issue-metrics span,
    .cashflow-issue-detail-list div,
    .cashflow-issue-files,
    .cashflow-issue-audit,
    .statement-file-reader-panel,
    .statement-preview-panel {
        padding: 8px;
    }

    .statement-file-reader-heading,
    .statement-file-reader-actions,
    .statement-preview-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .statement-file-original-link {
        justify-content: center;
        min-height: 34px;
    }

    .statement-file-reader-scroll {
        max-height: min(54vh, 520px);
    }

    .statement-file-reader-table {
        min-width: 1120px;
        font-size: 9px;
    }

    .statement-preview-scroll {
        max-height: min(48vh, 460px);
    }

    .statement-preview-table {
        min-width: 1280px;
        font-size: 9px;
    }

    .statement-file-reader-table th,
    .statement-file-reader-table td,
    .statement-preview-table th,
    .statement-preview-table td {
        padding: 6px;
    }

    .account-flow-group-card {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .dialog-actions {
        flex-direction: column-reverse;
    }

    .dialog-actions button {
        width: 100%;
    }

    .deposit-gallery {
        max-height: calc(100svh - 180px);
    }

    .deposit-image-stage {
        height: min(58vh, 520px);
        min-height: 240px;
    }

    .toast-message {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
        left: 12px;
        max-width: none;
    }

    .transfer-filters {
        justify-content: stretch;
    }

    .transfer-filters select,
    .photo-report-filters input,
    .photo-report-filters select {
        width: 100%;
    }

    .transfer-list,
    .photo-report-list {
        padding: 10px;
    }

    .transfer-card-head,
    .photo-report-card-head,
    .cleaning-head,
    .cleaning-task-main,
    .transfer-actions,
    .transfer-qr-actions,
    .photo-report-camera-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .transfer-actions .primary-button,
    .transfer-actions .ghost-button,
    .transfer-photo-button,
    .photo-report-camera-button {
        width: 100%;
        min-height: 46px;
    }

    .photo-report-filters {
        justify-content: stretch;
    }

    .attendance-filters {
        justify-content: stretch;
    }

    .attendance-filters input,
    .attendance-filters select {
        width: 100%;
    }

    .attendance-range-buttons,
    .attendance-range-buttons .segmented-button {
        width: 100%;
    }

    .attendance-actions {
        grid-template-columns: 1fr;
    }

    .attendance-calendar-panel {
        margin: 0 10px 10px;
        padding: 10px;
    }

    .attendance-day {
        min-height: 48px;
    }
}

/* Financial report tab */
.financial-workspace {
    gap: 14px;
}

.financial-workspace-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-workspace-tabs button {
    min-height: 34px;
    padding: 0 13px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.financial-workspace .staff-panel-title h3 {
    font-size: 19px;
}

.financial-workspace .panel-heading h2 {
    font-size: 20px;
}

.financial-workspace-tabs button:hover,
.financial-workspace-tabs button:focus-visible {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    outline: 0;
}

.financial-workspace-tabs button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2f80ed, #27c2ff);
    box-shadow: 0 12px 26px rgba(47, 128, 237, 0.22);
}

.financial-workspace-section {
    display: none;
    gap: 14px;
}

.financial-workspace-section.active {
    display: grid;
}

.financial-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.financial-summary-card,
.financial-report-panel {
    min-width: 0;
    padding: 15px;
    background: rgba(16, 22, 49, 0.9);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-summary-card {
    min-height: 112px;
}

.financial-summary-card span,
.financial-summary-card small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.financial-summary-card strong {
    display: block;
    margin: 12px 0 7px;
    color: var(--text);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.financial-summary-card.revenue strong { color: #39b6ff; }
.financial-summary-card.cogs strong { color: #c7a7ff; }
.financial-summary-card.gross-profit strong { color: #71d6c3; }
.financial-summary-card.expense strong { color: #ffae59; }
.financial-summary-card.profit strong { color: #5cde9b; }
.financial-summary-card.personal strong { color: #aeb9ff; }

.financial-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.financial-comparison-panel {
    display: grid;
    gap: 14px;
}

.financial-comparison-title {
    align-items: start;
}

.financial-comparison-tools {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.financial-chart-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.financial-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 8px;
    color: var(--muted);
    background: rgba(8, 10, 28, 0.36);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.financial-chart-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.financial-chart-legend i.revenue { background: #39b6ff; }
.financial-chart-legend i.expense { background: #ffae59; }
.financial-chart-legend i.profit { background: #5cde9b; }
.financial-chart-legend i.negative { background: #ff7d83; }

.financial-comparison-actions {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(8, 10, 28, 0.36);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-comparison-actions button {
    min-height: 30px;
    padding: 0 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.financial-comparison-actions button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2f80ed, #27c2ff);
    box-shadow: 0 10px 24px rgba(47, 128, 237, 0.24);
}

.financial-comparison-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.financial-comparison-kpi {
    min-width: 0;
    padding: 12px;
    background: rgba(8, 10, 28, 0.42);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-comparison-kpi span,
.financial-comparison-kpi small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.financial-comparison-kpi strong {
    display: block;
    margin: 8px 0 5px;
    color: var(--text);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.financial-comparison-kpi.revenue strong { color: #39b6ff; }
.financial-comparison-kpi.profit strong { color: #5cde9b; }
.financial-comparison-kpi.quarter strong { color: #aeb9ff; }
.financial-comparison-kpi.margin strong { color: #71d6c3; }
.financial-comparison-kpi small.up { color: #5cde9b; }
.financial-comparison-kpi small.down { color: #ff7d83; }

.financial-comparison-chart {
    display: grid;
    gap: 14px;
}

.financial-comparison-section {
    min-width: 0;
    padding: 12px;
    background: rgba(8, 10, 28, 0.3);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-comparison-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.financial-comparison-section-head strong {
    color: var(--text);
    font-size: 15px;
}

.financial-comparison-section-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.financial-combo-chart {
    display: grid;
    grid-template-columns: minmax(72px, 0.16fr) minmax(0, 1fr);
    gap: 10px;
    min-height: 302px;
}

.financial-combo-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 0 58px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
}

.financial-combo-plot {
    position: relative;
    min-width: 0;
    min-height: 292px;
    overflow-x: auto;
    padding: 10px 6px 0;
    background:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 100% 25%,
        rgba(255,255,255,0.025);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-combo-scroll {
    position: relative;
    min-height: 270px;
}

.financial-combo-lines {
    position: absolute;
    z-index: 3;
    inset: 10px 6px 58px;
    width: calc(100% - 12px);
    height: calc(100% - 68px);
    overflow: visible;
    pointer-events: none;
}

.financial-combo-line polyline,
.financial-combo-line circle,
.financial-combo-zero {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.financial-combo-line polyline {
    stroke-width: 2.1;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.financial-combo-line circle {
    fill: var(--surface);
    stroke-width: 1.8;
}

.financial-combo-line.revenue polyline,
.financial-combo-line.revenue circle { stroke: #39b6ff; }
.financial-combo-line.expense polyline,
.financial-combo-line.expense circle { stroke: #ffae59; }
.financial-combo-line.profit polyline,
.financial-combo-line.profit circle { stroke: #5cde9b; }

.financial-combo-zero {
    stroke: rgba(148, 163, 184, 0.42);
    stroke-dasharray: 3 4;
    stroke-width: 1.2;
}

.financial-combo-columns {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--period-count), minmax(152px, 1fr));
    gap: 10px;
    min-height: 270px;
    padding-bottom: 8px;
}

.financial-column-chart {
    display: grid;
    grid-template-columns: repeat(var(--period-count), minmax(94px, 1fr));
    gap: 10px;
    min-height: 238px;
    overflow-x: auto;
    padding: 4px 2px 2px;
}

.financial-column-group {
    display: grid;
    grid-template-rows: minmax(128px, 1fr) auto auto;
    gap: 7px;
    min-width: 152px;
}

.financial-column-bars {
    display: grid;
    grid-template-columns: repeat(3, minmax(14px, 1fr));
    align-items: end;
    gap: 5px;
    min-height: 128px;
    padding: 8px 8px 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-column {
    display: block;
    height: var(--height);
    min-height: 3px;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.financial-column.revenue { background: linear-gradient(180deg, #57c7ff, #1f88ea); }
.financial-column.expense { background: linear-gradient(180deg, #ffc37c, #f08a2e); }
.financial-column.profit { background: linear-gradient(180deg, #7ee7c8, #2fbf83); }
.financial-column.profit.negative { background: linear-gradient(180deg, #ff9ba0, #e3545f); }
.financial-column.profit.pending {
    background: rgba(148, 163, 184, 0.48);
    border: 1px dashed rgba(203, 213, 225, 0.7);
}

.financial-column-group > strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-column-group > small {
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.financial-column-group > small b {
    color: var(--text);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.financial-chart-panel {
    min-width: 0;
}

.financial-bar-chart {
    display: grid;
    gap: 13px;
    max-height: 510px;
    overflow-y: auto;
    padding-right: 4px;
}

.financial-chart-period {
    display: grid;
    gap: 7px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--line-soft);
}

.financial-chart-period:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.financial-chart-period-head,
.financial-product-bar-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.financial-chart-period-head strong,
.financial-product-bar-label span {
    color: var(--text);
    font-size: 12px;
}

.financial-chart-period-head span,
.financial-product-bar-label strong {
    color: var(--muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    text-align: right;
}

.financial-chart-branch {
    display: grid;
    grid-template-columns: minmax(92px, 0.45fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.financial-chart-branch > span {
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-chart-line {
    position: relative;
    min-width: 0;
    min-height: 25px;
    padding: 5px 6px;
    background: rgba(8, 10, 28, 0.48);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
}

.financial-chart-line i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    min-width: 0;
    border-radius: 5px;
    opacity: 0.72;
}

.financial-chart-line i.revenue { background: #39b6ff; }
.financial-chart-line i.profit { background: #5cde9b; }
.financial-chart-line i.profit.negative { background: #ff7d83; }

.financial-chart-line b {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 900;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-chart-empty {
    padding: 20px 8px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.financial-detail-layout {
    align-items: start;
}

.financial-product-bars {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.financial-product-bar-row {
    display: grid;
    gap: 5px;
}

.financial-product-bar-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.financial-product-bar-track {
    height: 8px;
    overflow: hidden;
    background: rgba(8, 10, 28, 0.56);
    border-radius: 4px;
}

.financial-product-bar-track i {
    display: block;
    height: 100%;
    background: #aeb9ff;
    border-radius: inherit;
}

.financial-product-table {
    min-width: 440px;
}

.financial-product-table td:first-child,
.financial-profit-detail-table td:first-child,
.financial-profit-detail-table td:nth-child(4) {
    white-space: normal;
}

.financial-report-table td small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

.financial-profit-detail-wrap {
    max-height: 510px;
    overflow: auto;
}

.financial-profit-detail-table {
    min-width: 820px;
}

.financial-report-note {
    margin: 0;
    padding: 10px 12px;
    color: var(--muted);
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
}

.financial-sheet-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.financial-sheet-picker-panel {
    display: grid;
    gap: 12px;
}

.financial-sheet-card {
    min-width: 0;
    padding: 13px;
    color: inherit;
    text-align: left;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    cursor: pointer;
}

.financial-sheet-card:hover,
.financial-sheet-card:focus-visible {
    border-color: rgba(34, 183, 255, 0.58);
    background: rgba(34, 183, 255, 0.1);
    outline: 0;
}

.financial-sheet-card.active {
    border-color: rgba(47, 128, 237, 0.72);
    background: linear-gradient(135deg, rgba(47, 128, 237, 0.24), rgba(39, 194, 255, 0.1));
    box-shadow: 0 14px 32px rgba(47, 128, 237, 0.18);
}

.financial-sheet-map strong,
.salary-template-row b,
.salary-payroll-panel h4 {
    color: var(--text);
}

.financial-sheet-map span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.financial-sheet-detail-panel {
    display: grid;
    gap: 12px;
}

.financial-sheet-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.financial-sheet-summary-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(8, 10, 28, 0.34);
}

.financial-sheet-summary-card span,
.financial-sheet-summary-card small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.financial-sheet-summary-card strong {
    color: var(--text);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.financial-sheet-summary-card.revenue strong { color: #39b6ff; }
.financial-sheet-summary-card.expense strong { color: #ffae59; }
.financial-sheet-summary-card.salary strong { color: #c7a7ff; }
.financial-sheet-summary-card.good strong { color: #5cde9b; }
.financial-sheet-summary-card.bad strong { color: #ff7d83; }

.financial-sheet-report-table {
    min-width: 760px;
}

.financial-sheet-report-table .financial-sheet-note,
.financial-sheet-report-table .financial-sheet-items {
    max-width: 360px;
    text-align: left;
    white-space: normal;
}

.financial-sheet-items {
    display: grid;
    gap: 4px;
}

.financial-sheet-items span {
    color: var(--muted);
    font-size: 11px;
}

.financial-sheet-items b {
    color: var(--text);
    font-weight: 900;
}

.accounting-control-hero {
    display: grid;
    gap: 12px;
}

.accounting-control-status {
    display: inline-grid;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.accounting-control-status.good {
    color: #5cde9b;
    background: rgba(92, 222, 155, 0.12);
}

.accounting-control-status.bad {
    color: #ffae59;
    background: rgba(255, 174, 89, 0.14);
}

.accounting-control-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.accounting-control-card,
.accounting-pipeline-item,
.accounting-workflow-item,
.accounting-alert-item,
.accounting-audit-item,
.accounting-alert-empty {
    min-width: 0;
    padding: 11px;
    color: var(--muted);
    background: rgba(8, 10, 28, 0.32);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.accounting-control-card {
    display: grid;
    gap: 5px;
}

.accounting-control-card span,
.accounting-control-card small,
.accounting-pipeline-item span,
.accounting-pipeline-item small,
.accounting-workflow-item span,
.accounting-workflow-item p,
.accounting-workflow-item small,
.accounting-alert-item p,
.accounting-alert-item small,
.accounting-audit-item small,
.accounting-alert-empty {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.42;
}

.accounting-control-card strong,
.accounting-pipeline-item strong,
.accounting-workflow-item strong,
.accounting-alert-item strong,
.accounting-audit-item strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.accounting-control-card.good strong { color: #5cde9b; }
.accounting-control-card.bad strong { color: #ff7d83; }
.accounting-control-card.waiting strong,
.accounting-control-card.watch strong { color: #ffae59; }

.accounting-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.accounting-pipeline-list,
.accounting-workflow-list,
.accounting-alert-list,
.accounting-audit-list {
    display: grid;
    gap: 8px;
}

.accounting-workflow-item {
    display: grid;
    gap: 5px;
}

.accounting-alert-item {
    display: grid;
    gap: 5px;
    border-color: rgba(255, 174, 89, 0.32);
    background: rgba(255, 174, 89, 0.08);
}

.accounting-alert-item span {
    width: max-content;
    padding: 3px 8px;
    color: #ffae59;
    background: rgba(255, 174, 89, 0.14);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.accounting-audit-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    align-items: center;
}

.accounting-audit-item small {
    grid-column: 1 / -1;
}

.accounting-control-table {
    min-width: 1060px;
}

.accounting-control-table td:first-child,
.accounting-control-table th:first-child {
    width: 230px;
}

.accounting-control-table td:nth-child(5) {
    max-width: 280px;
    white-space: normal;
}

.accounting-control-table td:nth-child(5),
.accounting-control-table td:nth-child(6),
.accounting-control-table td:nth-child(7) {
    text-align: left;
}

.accounting-control-table td strong {
    display: block;
    color: var(--text);
}

.accounting-control-table td small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}

.accounting-control-table tr.bad td {
    background: rgba(255, 100, 106, 0.07);
}

.accounting-control-table tr.waiting td {
    background: rgba(255, 174, 89, 0.06);
}

.accounting-control-pill {
    display: inline-grid;
    min-width: max-content;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.accounting-control-pill.good {
    color: #5cde9b;
    background: rgba(92, 222, 155, 0.12);
}

.accounting-control-pill.watch,
.accounting-control-pill.waiting {
    color: #ffae59;
    background: rgba(255, 174, 89, 0.13);
}

.accounting-control-pill.bad {
    color: #ff7d83;
    background: rgba(255, 100, 106, 0.12);
}

.accounting-source-panel {
    display: grid;
    gap: 12px;
}

.accounting-source-layers {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.accounting-source-layer,
.accounting-source-card {
    min-width: 0;
    background: rgba(8, 10, 28, 0.32);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.accounting-source-layer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 8px;
    align-items: center;
    padding: 10px;
}

.accounting-source-layer span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #5cde9b;
    background: rgba(92, 222, 155, 0.12);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
}

.accounting-source-layer strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 950;
}

.accounting-source-layer small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.accounting-source-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.accounting-source-card {
    display: grid;
    gap: 9px;
    padding: 11px;
}

.accounting-source-card.good {
    border-color: rgba(92, 222, 155, 0.18);
}

.accounting-source-card.bad {
    border-color: rgba(255, 100, 106, 0.25);
    background: rgba(255, 100, 106, 0.07);
}

.accounting-source-card.waiting,
.accounting-source-card.watch {
    border-color: rgba(255, 174, 89, 0.22);
}

.accounting-source-card-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.accounting-source-card-main strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    font-weight: 950;
}

.accounting-source-card-main small,
.accounting-source-card p,
.accounting-source-card footer {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

.accounting-source-card p {
    margin: 0;
}

.accounting-source-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.accounting-source-metrics span {
    min-width: 0;
    padding: 7px 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
}

.accounting-source-metrics b {
    color: var(--text);
    font-weight: 950;
}

.accounting-source-card footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.accounting-source-card footer span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accounting-queue-panel {
    display: grid;
    gap: 12px;
}

.accounting-queue-list {
    display: grid;
    gap: 12px;
}

.accounting-queue-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: rgba(8, 10, 28, 0.28);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.accounting-queue-card.bad {
    border-color: rgba(255, 100, 106, 0.32);
    background: rgba(255, 100, 106, 0.06);
}

.accounting-queue-card.good {
    border-color: rgba(92, 222, 155, 0.26);
    background: rgba(92, 222, 155, 0.06);
}

.accounting-queue-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.accounting-queue-head div {
    display: grid;
    gap: 4px;
}

.accounting-queue-head strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
}

.accounting-queue-head span,
.accounting-queue-head small,
.accounting-queue-kpis span,
.accounting-queue-empty {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.4;
}

.accounting-queue-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.accounting-queue-kpis span {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.accounting-queue-kpis b {
    color: var(--text);
    font-weight: 950;
}

.accounting-queue-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.accounting-queue-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.accounting-queue-table th,
.accounting-queue-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    font-size: 11px;
    font-weight: 850;
    text-align: left;
    vertical-align: top;
}

.accounting-queue-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(12, 17, 42, 0.96);
    color: var(--muted);
    font-weight: 950;
}

.accounting-queue-table td strong,
.accounting-queue-table td small {
    display: block;
}

.accounting-queue-table td small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.accounting-queue-empty {
    padding: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.financial-report-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 14px;
}

.financial-report-table-wrap {
    overflow-x: auto;
}

.financial-report-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 12px;
}

.financial-report-table th,
.financial-report-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    white-space: nowrap;
}

.financial-report-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.financial-report-table td {
    color: var(--text);
}

.financial-report-table td:not(:first-child) {
    text-align: right;
}

.financial-report-table .report-empty {
    color: var(--muted);
    text-align: center;
}

.financial-report-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.financial-report-link {
    display: grid;
    gap: 5px;
    min-height: 74px;
    padding: 12px;
    color: var(--text);
    text-align: left;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    cursor: pointer;
}

.financial-report-link:hover {
    border-color: var(--accent);
}

.financial-report-link strong {
    font-size: 13px;
}

.financial-report-link span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.admin-salary-panel {
    display: grid;
    gap: 14px;
}

.admin-salary-title {
    align-items: start;
}

.admin-salary-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-salary-controls select {
    min-height: 36px;
    min-width: 168px;
    padding: 0 10px;
    color: var(--text);
    background: rgba(8, 10, 28, 0.36);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.admin-salary-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-salary-overview-card {
    min-width: 0;
    padding: 12px;
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.admin-salary-overview-card span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.admin-salary-overview-card strong {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 6px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.25;
}

.admin-salary-overview-card small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.admin-salary-overview-card.net strong { color: #5cde9b; }
.admin-salary-overview-card.vpi strong { color: #71d6c3; }
.admin-salary-overview-card.advance strong { color: #ffae59; }
.admin-salary-overview-card.target strong { color: #39b6ff; }

.admin-salary-detail-layout {
    margin-top: 0;
}

.admin-salary-template-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 14px;
}

.admin-salary-template-grid[hidden] {
    display: none;
}

.salary-template-list {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.salary-template-section {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: rgba(8, 10, 28, 0.22);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-template-section-head {
    display: grid;
    gap: 3px;
}

.salary-template-section-head strong {
    color: var(--text);
    font-size: 14px;
}

.salary-template-section-head span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.salary-template-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    background: rgba(8, 10, 28, 0.36);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-template-row small,
.salary-bonus-row small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}

.salary-template-row strong {
    color: var(--text);
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.salary-bonus-row.total {
    background: rgba(47, 128, 237, 0.12);
    border-color: rgba(47, 128, 237, 0.34);
}

.salary-payroll-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.salary-payroll-panel h4 {
    margin: 0 0 9px;
    font-size: 14px;
}

.salary-policy-editor {
    display: grid;
    gap: 14px;
    padding: 14px;
    background: rgba(8, 10, 28, 0.24);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-policy-editor[hidden] {
    display: none;
}

.salary-policy-form-grid,
.salary-policy-edit-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.salary-policy-form-grid label,
.salary-policy-edit-columns label,
.salary-policy-common-editor label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
}

.salary-policy-form-grid input,
.salary-policy-form-grid textarea,
.salary-policy-edit-columns textarea,
.salary-policy-level-row input,
.salary-policy-factor-row input,
.salary-policy-common-editor input {
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    color: var(--text);
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
}

.salary-policy-form-grid textarea,
.salary-policy-edit-columns textarea {
    resize: vertical;
    line-height: 1.45;
}

.salary-policy-full {
    grid-column: 1 / -1;
}

.salary-policy-edit-columns article,
.salary-policy-files-panel {
    padding: 12px;
    background: rgba(8, 10, 28, 0.28);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.salary-policy-edit-columns h4,
.salary-policy-files-panel h4 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 14px;
}

.salary-policy-level-editor,
.salary-policy-factor-editor,
.salary-policy-common-editor {
    display: grid;
    gap: 8px;
}

.salary-policy-level-row {
    display: grid;
    grid-template-columns: 36px minmax(82px, 0.8fr) minmax(120px, 1fr) minmax(74px, 0.6fr) minmax(160px, 1.3fr);
    gap: 8px;
    align-items: center;
}

.salary-policy-level-row strong {
    color: var(--text);
    font-size: 13px;
}

.salary-policy-factor-row {
    display: grid;
    grid-template-columns: 64px 64px 76px minmax(120px, 1fr);
    gap: 8px;
}

.salary-policy-common-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.salary-policy-files-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.salary-policy-upload {
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.salary-policy-upload input[type="file"] {
    max-width: 260px;
    color: var(--muted);
    font-size: 12px;
}

.primary-action,
.secondary-action {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.primary-action {
    color: #ffffff;
    background: linear-gradient(135deg, #2f80ed, #3f9cff);
    border: 1px solid rgba(94, 166, 255, 0.42);
}

.secondary-action {
    color: var(--text);
    background: rgba(8, 10, 28, 0.34);
    border: 1px solid var(--line-soft);
}

.compact-action {
    min-height: 32px;
    padding-inline: 12px;
}

body[data-theme="light"] .financial-summary-card,
body[data-theme="light"] .financial-report-panel {
    color: var(--text) !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
    box-shadow: 0 18px 46px rgba(48, 67, 102, 0.08);
}

body[data-theme="light"] .financial-report-note,
body[data-theme="light"] .financial-report-link,
body[data-theme="light"] .financial-workspace-tabs,
body[data-theme="light"] .financial-workspace-tabs button,
body[data-theme="light"] .financial-sheet-card,
body[data-theme="light"] .financial-sheet-summary-card,
body[data-theme="light"] .financial-comparison-kpi,
body[data-theme="light"] .financial-comparison-section,
body[data-theme="light"] .financial-column-bars,
body[data-theme="light"] .financial-combo-plot,
body[data-theme="light"] .financial-comparison-actions,
body[data-theme="light"] .financial-chart-legend span,
body[data-theme="light"] .admin-salary-controls select,
body[data-theme="light"] .admin-salary-overview-card,
body[data-theme="light"] .salary-template-section,
body[data-theme="light"] .salary-template-row,
body[data-theme="light"] .salary-criterion-row,
body[data-theme="light"] .salary-bonus-row,
body[data-theme="light"] .salary-formula-line,
body[data-theme="light"] .salary-empty-row,
body[data-theme="light"] .salary-policy-editor,
body[data-theme="light"] .salary-policy-file,
body[data-theme="light"] .salary-policy-edit-columns article,
body[data-theme="light"] .salary-policy-files-panel,
body[data-theme="light"] .salary-policy-form-grid input,
body[data-theme="light"] .salary-policy-form-grid textarea,
body[data-theme="light"] .salary-policy-edit-columns textarea,
body[data-theme="light"] .salary-policy-level-row input,
body[data-theme="light"] .salary-policy-factor-row input,
body[data-theme="light"] .salary-policy-common-editor input {
    background: #f7f9fc;
    border-color: rgba(38, 56, 86, 0.1);
}

body[data-theme="light"] .financial-summary-card span,
body[data-theme="light"] .financial-summary-card small,
body[data-theme="light"] .financial-report-table th,
body[data-theme="light"] .financial-report-note,
body[data-theme="light"] .financial-report-link span,
body[data-theme="light"] .financial-sheet-map span,
body[data-theme="light"] .financial-sheet-summary-card span,
body[data-theme="light"] .financial-sheet-summary-card small,
body[data-theme="light"] .financial-sheet-items span,
body[data-theme="light"] .financial-comparison-kpi span,
body[data-theme="light"] .financial-comparison-kpi small,
body[data-theme="light"] .financial-comparison-section-head span,
body[data-theme="light"] .financial-column-group > small,
body[data-theme="light"] .financial-chart-legend span,
body[data-theme="light"] .financial-combo-y-axis,
body[data-theme="light"] .admin-salary-overview-card span,
body[data-theme="light"] .admin-salary-overview-card small,
body[data-theme="light"] .salary-template-section-head span,
body[data-theme="light"] .salary-template-row small,
body[data-theme="light"] .salary-bonus-row span,
body[data-theme="light"] .salary-bonus-row small,
body[data-theme="light"] .salary-criterion-row small,
body[data-theme="light"] .salary-criterion-row em,
body[data-theme="light"] .salary-formula-line,
body[data-theme="light"] .salary-empty-row,
body[data-theme="light"] .salary-policy-file small,
body[data-theme="light"] .salary-policy-form-grid label,
body[data-theme="light"] .salary-policy-edit-columns label,
body[data-theme="light"] .salary-policy-common-editor label,
body[data-theme="light"] .salary-policy-upload input[type="file"] {
    color: #687789;
}

body[data-theme="light"] .financial-report-table td,
body[data-theme="light"] .financial-report-link,
body[data-theme="light"] .financial-report-link strong,
body[data-theme="light"] .financial-workspace-tabs button,
body[data-theme="light"] .financial-sheet-map strong,
body[data-theme="light"] .financial-sheet-summary-card strong,
body[data-theme="light"] .financial-sheet-items b,
body[data-theme="light"] .financial-comparison-section-head strong,
body[data-theme="light"] .financial-column-group > strong,
body[data-theme="light"] .financial-column-group > small b,
body[data-theme="light"] .admin-salary-controls select,
body[data-theme="light"] .admin-salary-overview-card strong,
body[data-theme="light"] .salary-template-section-head strong,
body[data-theme="light"] .salary-template-row b,
body[data-theme="light"] .salary-template-row strong,
body[data-theme="light"] .salary-payroll-panel h4,
body[data-theme="light"] .salary-bonus-row strong,
body[data-theme="light"] .salary-criterion-row b,
body[data-theme="light"] .salary-criterion-row strong,
body[data-theme="light"] .salary-policy-file,
body[data-theme="light"] .salary-policy-file span,
body[data-theme="light"] .salary-policy-edit-columns h4,
body[data-theme="light"] .salary-policy-files-panel h4,
body[data-theme="light"] .salary-policy-level-row strong,
body[data-theme="light"] .salary-policy-form-grid input,
body[data-theme="light"] .salary-policy-form-grid textarea,
body[data-theme="light"] .salary-policy-edit-columns textarea,
body[data-theme="light"] .salary-policy-level-row input,
body[data-theme="light"] .salary-policy-factor-row input,
body[data-theme="light"] .salary-policy-common-editor input {
    color: #0f233d;
}

body[data-theme="light"] .financial-workspace-tabs button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2f80ed, #3f9cff);
}

body[data-theme="light"] .financial-sheet-card.active {
    background: linear-gradient(135deg, rgba(47, 128, 237, 0.15), rgba(63, 156, 255, 0.08));
    border-color: rgba(47, 128, 237, 0.32);
}

body[data-theme="light"] .salary-bonus-row.total {
    background: #eef6ff;
    border-color: rgba(47, 128, 237, 0.2);
}

body[data-theme="light"] .accounting-control-card,
body[data-theme="light"] .accounting-pipeline-item,
body[data-theme="light"] .accounting-workflow-item,
body[data-theme="light"] .accounting-alert-empty,
body[data-theme="light"] .accounting-audit-item,
body[data-theme="light"] .accounting-source-layer,
body[data-theme="light"] .accounting-source-card {
    background: #f7f9fc;
    border-color: rgba(38, 56, 86, 0.1);
}

body[data-theme="light"] .accounting-source-card.bad {
    background: #fff1f2;
    border-color: rgba(225, 72, 92, 0.2);
}

body[data-theme="light"] .accounting-source-card.waiting,
body[data-theme="light"] .accounting-source-card.watch {
    background: #fff8ed;
    border-color: rgba(234, 138, 43, 0.22);
}

body[data-theme="light"] .accounting-alert-item {
    background: #fff8ed;
    border-color: rgba(234, 138, 43, 0.24);
}

body[data-theme="light"] .accounting-control-card span,
body[data-theme="light"] .accounting-control-card small,
body[data-theme="light"] .accounting-pipeline-item span,
body[data-theme="light"] .accounting-pipeline-item small,
body[data-theme="light"] .accounting-workflow-item span,
body[data-theme="light"] .accounting-workflow-item p,
body[data-theme="light"] .accounting-workflow-item small,
body[data-theme="light"] .accounting-alert-item p,
body[data-theme="light"] .accounting-alert-item small,
body[data-theme="light"] .accounting-audit-item small,
body[data-theme="light"] .accounting-alert-empty,
body[data-theme="light"] .accounting-control-table td small,
body[data-theme="light"] .accounting-source-layer small,
body[data-theme="light"] .accounting-source-card-main small,
body[data-theme="light"] .accounting-source-card p,
body[data-theme="light"] .accounting-source-card footer,
body[data-theme="light"] .accounting-source-metrics span {
    color: #687789;
}

body[data-theme="light"] .accounting-control-card strong,
body[data-theme="light"] .accounting-pipeline-item strong,
body[data-theme="light"] .accounting-workflow-item strong,
body[data-theme="light"] .accounting-alert-item strong,
body[data-theme="light"] .accounting-audit-item strong,
body[data-theme="light"] .accounting-control-table td strong,
body[data-theme="light"] .accounting-source-layer strong,
body[data-theme="light"] .accounting-source-card-main strong,
body[data-theme="light"] .accounting-source-metrics b {
    color: #0f233d;
}

body[data-theme="light"] .accounting-source-metrics span {
    background: #ffffff;
    border-color: rgba(38, 56, 86, 0.1);
}

body[data-theme="light"] .accounting-control-table tr.bad td {
    background: #fff1f2;
}

body[data-theme="light"] .accounting-control-table tr.waiting td {
    background: #fff8ed;
}

body[data-theme="light"] .accounting-queue-card {
    background: #f7f9fc;
    border-color: rgba(38, 56, 86, 0.1);
}

body[data-theme="light"] .accounting-queue-card.bad {
    background: #fff1f2;
    border-color: rgba(225, 72, 92, 0.2);
}

body[data-theme="light"] .accounting-queue-card.good {
    background: #f0fff7;
    border-color: rgba(44, 168, 98, 0.18);
}

body[data-theme="light"] .accounting-queue-head strong,
body[data-theme="light"] .accounting-queue-kpis b,
body[data-theme="light"] .accounting-queue-table td,
body[data-theme="light"] .accounting-queue-table td strong {
    color: #0f233d;
}

body[data-theme="light"] .accounting-queue-head span,
body[data-theme="light"] .accounting-queue-head small,
body[data-theme="light"] .accounting-queue-kpis span,
body[data-theme="light"] .accounting-queue-empty,
body[data-theme="light"] .accounting-queue-table th,
body[data-theme="light"] .accounting-queue-table td small {
    color: #687789;
}

body[data-theme="light"] .accounting-queue-kpis span,
body[data-theme="light"] .accounting-queue-empty {
    background: #ffffff;
    border-color: rgba(38, 56, 86, 0.1);
}

body[data-theme="light"] .accounting-queue-table th {
    background: #eef4fb;
}

body[data-theme="light"] .financial-combo-plot {
    background:
        linear-gradient(rgba(54, 78, 115, 0.08) 1px, transparent 1px) 0 0 / 100% 25%,
        #f8fbff;
}

body[data-theme="light"] .financial-combo-line circle {
    fill: #ffffff;
}

body[data-theme="light"] .secondary-action {
    color: #0f233d;
    background: #f7f9fc;
    border-color: rgba(38, 56, 86, 0.12);
}

body[data-theme="light"] .financial-comparison-actions button {
    color: #687789;
}

body[data-theme="light"] .financial-comparison-actions button.active {
    color: #ffffff;
}

@media (max-width: 980px) {
    .financial-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .financial-report-layout,
    .financial-chart-grid,
    .financial-sheet-map,
    .financial-sheet-summary,
    .financial-comparison-kpis,
    .admin-salary-overview,
    .admin-salary-template-grid,
    .salary-payroll-columns {
        grid-template-columns: 1fr;
    }

    .financial-chart-legend,
    .financial-comparison-tools {
        justify-items: start;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .financial-summary-grid,
    .financial-report-links {
        grid-template-columns: 1fr 1fr;
    }

    .financial-sheet-map {
        grid-template-columns: 1fr;
    }

    .financial-chart-branch {
        grid-template-columns: minmax(76px, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 5px;
    }

    .financial-column-chart {
        grid-template-columns: repeat(var(--period-count), minmax(84px, 1fr));
    }

    .financial-combo-chart {
        grid-template-columns: 1fr;
    }

    .financial-combo-y-axis {
        display: none;
    }

    .financial-combo-columns {
        grid-template-columns: repeat(var(--period-count), minmax(104px, 1fr));
    }

    .financial-column-group {
        min-width: 104px;
    }

    .financial-summary-card {
        min-height: 98px;
        padding: 12px;
    }

    .financial-summary-card strong {
        margin-top: 9px;
        font-size: 22px;
    }

    .financial-report-links {
        grid-template-columns: 1fr;
    }
}

body[data-theme="light"] .support-attention-badge,
body[data-theme="light"] .notification-badge {
    border-color: #ffffff !important;
}

/* Attendance: clear calendar states and a compact mobile header assistant. */
body[data-theme="light"] .attendance-day {
    color: #5f7186 !important;
    background: #f7faff !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .attendance-day strong {
    color: #19324e !important;
}

body[data-theme="light"] .attendance-day span {
    color: #19324e !important;
    background: #e8f0f8 !important;
}

body[data-theme="light"] .attendance-day.complete {
    color: #157347 !important;
    background: #eaf8f0 !important;
    border-color: #9ed8b7 !important;
}

body[data-theme="light"] .attendance-day.scheduled_work {
    color: #896415 !important;
    background: #fff8e7 !important;
    border-color: #efd18a !important;
}

body[data-theme="light"] .attendance-day.missing,
body[data-theme="light"] .attendance-day.missing_checkout,
body[data-theme="light"] .attendance-day.missing_checkin {
    color: #a24c12 !important;
    background: #fff1e7 !important;
    border-color: #f1bd8b !important;
}

body[data-theme="light"] .attendance-day.off,
body[data-theme="light"] .attendance-day.leave,
body[data-theme="light"] .attendance-day.presence_issue {
    color: #a32945 !important;
    background: #fff0f3 !important;
    border-color: #e7a9b7 !important;
}

body[data-theme="light"] .attendance-day.unexcused {
    color: #6f7b8c !important;
    background: #eef1f5 !important;
    border-color: #c4cbd5 !important;
}

body[data-theme="light"] .attendance-gps-status {
    color: #536b82 !important;
    background: #f4f8fc !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .attendance-gps-status.good {
    color: #157347 !important;
    background: #eaf8f0 !important;
    border-color: #9ed8b7 !important;
}

body[data-theme="light"] .attendance-gps-status.warn {
    color: #8a5a08 !important;
    background: #fff6df !important;
    border-color: #e9c878 !important;
}

body[data-theme="light"] .message-metric-card,
body[data-theme="light"] .message-board,
body[data-theme="light"] .message-playbook-card,
body[data-theme="light"] .message-api-plan {
    background: #ffffff !important;
    border-color: #d7e2ee !important;
    box-shadow: 0 10px 28px rgba(29, 78, 130, 0.08) !important;
}

body[data-theme="light"] .message-review-list button,
body[data-theme="light"] .message-thread,
body[data-theme="light"] .message-responder-row,
body[data-theme="light"] .message-customer-summary {
    color: #172033 !important;
    background: #f7fbff !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .message-thread.active {
    background: #e8f3ff !important;
    border-color: #8fc8ff !important;
}

body[data-theme="light"] .message-responder-row.active {
    background: #eafaf3 !important;
    border-color: #8bdab9 !important;
}

body[data-theme="light"] .message-metric-card strong,
body[data-theme="light"] .message-board-head strong,
body[data-theme="light"] .message-playbook-card strong,
body[data-theme="light"] .message-api-plan strong,
body[data-theme="light"] .message-report-table td,
body[data-theme="light"] .message-thread strong,
body[data-theme="light"] .message-responder-row strong,
body[data-theme="light"] .message-customer-summary strong {
    color: #172033 !important;
}

body[data-theme="light"] .message-metric-card span,
body[data-theme="light"] .message-metric-card small,
body[data-theme="light"] .message-board-head span,
body[data-theme="light"] .message-report-table th,
body[data-theme="light"] .message-thread small,
body[data-theme="light"] .message-responder-row small,
body[data-theme="light"] .message-responder-row em,
body[data-theme="light"] .message-playbook-card p,
body[data-theme="light"] .message-api-plan span,
body[data-theme="light"] .message-customer-summary span,
body[data-theme="light"] .message-customer-summary small,
body[data-theme="light"] .message-center .panel-heading p {
    color: #516173 !important;
}

body[data-theme="light"] .message-reply-panel textarea {
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #cbd9e8 !important;
}

body[data-theme="light"] .message-log,
body[data-theme="light"] .message-customer-summary,
body[data-theme="light"] .message-review-list button,
body[data-theme="light"] .message-thread,
body[data-theme="light"] .message-bubble {
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #dbe6f3 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06);
}

body[data-theme="light"] .message-thread.active,
body[data-theme="light"] .message-bubble.outbound {
    background: #edf5ff !important;
    border-color: #7bb7ff !important;
}

body[data-theme="light"] .message-bubble span,
body[data-theme="light"] .message-bubble time,
body[data-theme="light"] .message-send-status,
body[data-theme="light"] .message-status-line,
body[data-theme="light"] .message-empty,
body[data-theme="light"] .message-thread-copy em {
    color: #516173 !important;
}

@media (max-width: 760px) {
    .reminder-card {
        grid-template-columns: 1fr;
    }

    .reminder-card-side {
        justify-content: flex-start;
    }

    .reminder-list {
        max-height: none;
    }

    .app-header .brand-line {
        min-width: 0;
        flex: 1 1 auto;
    }

    .app-header .brand-line h1,
    .app-header .brand-line p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-header .header-actions {
        flex: 0 0 auto;
        gap: 4px;
    }

    .app-header .header-actions .support-chat-button {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px;
    }
}

body[data-theme="light"] .reminder-list {
    background: #f7faff !important;
}

body[data-theme="light"] .reminder-card {
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #dbe6f3 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06) !important;
}

body[data-theme="light"] .reminder-card-title strong,
body[data-theme="light"] .reminder-card-meta b {
    color: #172033 !important;
}

body[data-theme="light"] .reminder-card-title small,
body[data-theme="light"] .reminder-card-meta span,
body[data-theme="light"] .reminder-empty {
    color: #516173 !important;
}

body[data-theme="light"] .reminder-card-meta span {
    background: #edf5ff !important;
}

/* Final light palette: simple white surfaces, pale blue separators, and clear navy text. */
body[data-theme="light"] {
    background: #edf2f7 !important;
    background-image: none !important;
    color: #162033 !important;
}

body[data-theme="light"] .app-shell {
    background: transparent !important;
}

body[data-theme="light"] .app-header,
body[data-theme="light"] .mobile-bottom-tabs {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dce5ef !important;
    box-shadow: 0 8px 24px rgba(38, 61, 91, 0.08) !important;
}

body[data-theme="light"] .tab-button,
body[data-theme="light"] .mobile-bottom-tabs .tab-button {
    color: #64748b !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dce5ef !important;
    box-shadow: none !important;
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible {
    color: #1d64c8 !important;
    background: #edf5ff !important;
    border-color: #c8ddf7 !important;
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #ffffff !important;
    background: #2f80ed !important;
    background-image: none !important;
    border-color: #2f80ed !important;
    box-shadow: 0 8px 18px rgba(47, 128, 237, 0.2) !important;
}

body[data-theme="light"] .tab-button.active *,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active * {
    color: #ffffff !important;
    stroke: currentColor !important;
}

body[data-theme="light"] .ledger-panel,
body[data-theme="light"] .cashflow-panel,
body[data-theme="light"] .daily-entry-title,
body[data-theme="light"] .daily-excel-panel,
body[data-theme="light"] .employee-form,
body[data-theme="light"] .employee-list-panel,
body[data-theme="light"] .settings-form,
body[data-theme="light"] .reminder-form,
body[data-theme="light"] .reminder-board,
body[data-theme="light"] .transfer-form,
body[data-theme="light"] .transfer-board,
body[data-theme="light"] .attendance-clock-panel,
body[data-theme="light"] .attendance-report-panel,
body[data-theme="light"] .attendance-table-card,
body[data-theme="light"] .attendance-calendar-panel,
body[data-theme="light"] .photo-report-form,
body[data-theme="light"] .photo-report-board,
body[data-theme="light"] .staff-dashboard-head,
body[data-theme="light"] .staff-panel,
body[data-theme="light"] .stock-request-form,
body[data-theme="light"] .stock-request-board,
body[data-theme="light"] .placeholder-panel,
body[data-theme="light"] .sign-dialog {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dce5ef !important;
    box-shadow: 0 12px 30px rgba(38, 61, 91, 0.07) !important;
}

body[data-theme="light"] .cashflow-owner-head,
body[data-theme="light"] .cashflow-owner-head-metrics span,
body[data-theme="light"] .cashflow-owner-kpi,
body[data-theme="light"] .cashflow-owner-section,
body[data-theme="light"] .cashflow-owner-action,
body[data-theme="light"] .cashflow-period-close,
body[data-theme="light"] .cashflow-flow-map,
body[data-theme="light"] .cashflow-detail-group,
body[data-theme="light"] .cashflow-flow-lane,
body[data-theme="light"] .cashflow-flow-node,
body[data-theme="light"] .cashflow-money-position-item,
body[data-theme="light"] .cashflow-account-balance-item,
body[data-theme="light"] .cashflow-rule-row,
body[data-theme="light"] .cashflow-match-row,
body[data-theme="light"] .cashflow-owner-empty {
    color: #162033;
    background: #ffffff;
    border-color: #dce5ef;
}

body[data-theme="light"] .cashflow-owner-head strong,
body[data-theme="light"] .cashflow-owner-head-metrics b,
body[data-theme="light"] .cashflow-owner-kpi strong,
body[data-theme="light"] .cashflow-owner-section strong,
body[data-theme="light"] .cashflow-owner-action strong,
body[data-theme="light"] .cashflow-owner-action b,
body[data-theme="light"] .cashflow-period-close strong,
body[data-theme="light"] .cashflow-flow-map-head strong,
body[data-theme="light"] .cashflow-detail-group > summary strong,
body[data-theme="light"] .cashflow-flow-lane-title strong,
body[data-theme="light"] .cashflow-flow-node strong,
body[data-theme="light"] .cashflow-money-position-item strong,
body[data-theme="light"] .cashflow-account-balance-item strong,
body[data-theme="light"] .cashflow-account-balance-item b,
body[data-theme="light"] .cashflow-rule-account strong,
body[data-theme="light"] .cashflow-match-main strong,
body[data-theme="light"] .cashflow-match-row b {
    color: #132b47;
}

body[data-theme="light"] .cashflow-owner-head span,
body[data-theme="light"] .cashflow-owner-section small,
body[data-theme="light"] .cashflow-owner-action span,
body[data-theme="light"] .cashflow-owner-action em,
body[data-theme="light"] .cashflow-period-close small,
body[data-theme="light"] .cashflow-flow-map-head span,
body[data-theme="light"] .cashflow-detail-group > summary span,
body[data-theme="light"] .cashflow-flow-node span,
body[data-theme="light"] .cashflow-flow-node small,
body[data-theme="light"] .cashflow-money-position-item span,
body[data-theme="light"] .cashflow-money-position-item small,
body[data-theme="light"] .cashflow-account-balance-item span,
body[data-theme="light"] .cashflow-account-balance-item small,
body[data-theme="light"] .cashflow-rule-row label span,
body[data-theme="light"] .cashflow-rule-account span,
body[data-theme="light"] .cashflow-match-main span,
body[data-theme="light"] .cashflow-match-row small,
body[data-theme="light"] .cashflow-owner-empty {
    color: #66778b;
}

body[data-theme="light"] .cashflow-flow-link {
    background: #dce5ef;
}

body[data-theme="light"] .toolbar,
body[data-theme="light"] .cashflow-toolbar,
body[data-theme="light"] .daily-report-toolbar,
body[data-theme="light"] .overview-hero,
body[data-theme="light"] .summary-tile,
body[data-theme="light"] .profile-summary,
body[data-theme="light"] .table-scroll,
body[data-theme="light"] .ledger-inline-actions,
body[data-theme="light"] .theme-toggle,
body[data-theme="light"] .daily-section-title,
body[data-theme="light"] .panel-heading,
body[data-theme="light"] .cash-count-heading {
    color: #162033 !important;
    background: #f5f8fc !important;
    background-image: none !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .ledger-table,
body[data-theme="light"] .employee-table,
body[data-theme="light"] .crosscheck-table,
body[data-theme="light"] .account-flow-table,
body[data-theme="light"] .attendance-table,
body[data-theme="light"] .daily-input-table,
body[data-theme="light"] .daily-report-table,
body[data-theme="light"] .reminder-table,
body[data-theme="light"] .cashflow-table,
body[data-theme="light"] .ledger-table tbody tr,
body[data-theme="light"] .employee-table tbody tr,
body[data-theme="light"] .crosscheck-table tbody tr,
body[data-theme="light"] .account-flow-table tbody tr,
body[data-theme="light"] .attendance-table tbody tr,
body[data-theme="light"] .daily-report-table tbody tr,
body[data-theme="light"] .reminder-table tbody tr,
body[data-theme="light"] .cashflow-table tbody tr {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #e0e8f0 !important;
}

body[data-theme="light"] .ledger-table th,
body[data-theme="light"] .employee-table th,
body[data-theme="light"] .crosscheck-table th,
body[data-theme="light"] .account-flow-table th,
body[data-theme="light"] .attendance-table th,
body[data-theme="light"] .daily-input-table th,
body[data-theme="light"] .daily-report-table th,
body[data-theme="light"] .reminder-table th,
body[data-theme="light"] .cashflow-table th {
    color: #19324e !important;
    background: #eef4fb !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #cddbe9 !important;
    color-scheme: light;
}

body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
    color: #8b99aa !important;
}

body[data-theme="light"] .panel-heading h2,
body[data-theme="light"] .daily-entry-title h2,
body[data-theme="light"] .daily-section-title h3,
body[data-theme="light"] .cash-count-heading h3,
body[data-theme="light"] .staff-panel-title h3,
body[data-theme="light"] .compact-heading h2,
body[data-theme="light"] .brand-line h1 {
    color: #132b47 !important;
}

body[data-theme="light"] .panel-heading span,
body[data-theme="light"] .panel-heading p,
body[data-theme="light"] .daily-entry-title p,
body[data-theme="light"] .muted-inline,
body[data-theme="light"] .theme-setting > span,
body[data-theme="light"] .ledger-inline-hint {
    color: #66778b !important;
}

body[data-theme="light"] .notification-popover,
body[data-theme="light"] .support-chat-panel,
body[data-theme="light"] .user-menu-popover {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #d5e0eb !important;
    box-shadow: 0 18px 42px rgba(38, 61, 91, 0.14) !important;
}

body[data-theme="light"] .notification-popover-title,
body[data-theme="light"] .support-chat-head,
body[data-theme="light"] .support-chat-form {
    background: #f1f6fb !important;
    background-image: none !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .notification-item,
body[data-theme="light"] .notification-empty {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .notification-item.high {
    background: #fff4f5 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .notification-item.medium {
    background: #fffaf0 !important;
    border-color: #efd39b !important;
}

body[data-theme="light"] .notification-copy strong,
body[data-theme="light"] .notification-copy small,
body[data-theme="light"] .notification-copy em,
body[data-theme="light"] .notification-popover-title strong,
body[data-theme="light"] .support-chat-head strong,
body[data-theme="light"] .support-message {
    color: #162033 !important;
}

body[data-theme="light"] .notification-copy small,
body[data-theme="light"] .notification-copy em,
body[data-theme="light"] .notification-popover-title span,
body[data-theme="light"] .support-chat-head span {
    color: #66778b !important;
}

body[data-theme="light"] .notification-priority,
body[data-theme="light"] .support-message.bot {
    color: #19324e !important;
    background: #eef4fb !important;
}

body[data-theme="light"] .support-message.user {
    color: #ffffff !important;
    background: #2f80ed !important;
}

body[data-theme="light"] .support-attention-badge,
body[data-theme="light"] .notification-badge {
    border-color: #ffffff !important;
}

body[data-theme="light"] .ghost-button,
body[data-theme="light"] .ghost-icon-button {
    color: #19324e !important;
    background: #f7faff !important;
    border-color: #cddbe9 !important;
}

body[data-theme="light"] .primary-button,
body[data-theme="light"] .sign-button {
    color: #ffffff !important;
    background: #2f80ed !important;
    background-image: none !important;
    border-color: #2f80ed !important;
}

body[data-theme="light"] .hover-tooltip.fix-guide-tooltip {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #efc26d !important;
    box-shadow: 0 18px 42px rgba(38, 61, 91, 0.18) !important;
}

body[data-theme="light"] .hover-tooltip.fix-guide-tooltip .fix-guide-head strong,
body[data-theme="light"] .hover-tooltip.fix-guide-tooltip li {
    color: #19324e !important;
}

@media (max-width: 760px) {
    .notification-popover {
        top: calc(68px + env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        z-index: 240 !important;
    }

    .hover-tooltip.mobile-fix-guide-tooltip {
        top: calc(68px + env(safe-area-inset-top, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        max-height: none !important;
        z-index: 240 !important;
        padding: 16px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .hover-tooltip.mobile-fix-guide-tooltip .fix-guide-head strong {
        font-size: 17px !important;
    }

    .hover-tooltip.mobile-fix-guide-tooltip li {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .reminder-focus-button {
        min-width: 76px;
        white-space: nowrap;
    }
}

/* Admin-only server health cards in Settings. */
.server-health-panel {
    grid-column: 1 / -1;
}

.server-health-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.server-health-actions .ghost-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.server-health-actions svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.server-health-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.server-health-card {
    min-width: 0;
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(75, 63, 110, 0.28);
}

.server-health-card.warn {
    border-color: rgba(242, 193, 94, 0.62);
}

.server-health-card.critical,
.server-health-card.error {
    border-color: rgba(212, 77, 104, 0.68);
}

.server-health-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.server-health-tag {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    color: #ffffff;
    background: #1f9f62;
    font-size: 10px;
    font-weight: 900;
}

.server-health-tag.warn {
    color: #2b2108;
    background: #f2c15e;
}

.server-health-tag.critical,
.server-health-tag.error {
    background: #d44d68;
}

.server-health-value {
    color: var(--text);
    font-size: 21px;
    line-height: 1.15;
}

.server-health-meter {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(141, 127, 176, 0.22);
}

.server-health-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.server-health-card.warn .server-health-meter span {
    background: #f2c15e;
}

.server-health-card.critical .server-health-meter span,
.server-health-card.error .server-health-meter span {
    background: #d44d68;
}

.server-health-card small,
.server-health-meta {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.server-health-meta {
    padding: 0 16px 16px;
}

.server-health-empty {
    grid-column: 1 / -1;
    padding: 20px 10px;
    color: var(--muted);
    text-align: center;
}

.server-health-empty.error {
    color: #d44d68;
}

body[data-theme="light"] .server-health-card {
    background: #f8faff;
    border-color: rgba(33, 50, 82, 0.12);
}

body[data-theme="light"] .server-health-card.warn {
    background: #fffaf0;
}

body[data-theme="light"] .server-health-card.critical,
body[data-theme="light"] .server-health-card.error {
    background: #fff5f7;
}

body[data-theme="light"] .ledger-inline-actions {
    background: #f7f9fd;
    border-color: rgba(33, 50, 82, 0.1);
}

body[data-theme="light"] .server-health-meter {
    background: rgba(38, 56, 86, 0.12);
}

@media (max-width: 900px) {
    .server-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ledger-inline-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ledger-inline-hint {
        font-size: 10px;
    }

    .server-health-panel .panel-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .server-health-actions {
        width: 100%;
        justify-content: space-between;
    }

    .server-health-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .login-panel {
        padding: 18px;
    }

    .summary-grid {
        grid-template-columns: 1fr;
    }

    .ledger-table td,
    .employee-table td,
    .crosscheck-table td {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .cash-count-totals,
    .cash-count-denominations {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .login-page {
        align-items: start;
    }

    .login-panel {
        padding: 18px 22px;
    }

    .login-form {
        gap: 10px;
        margin-top: 16px;
    }

    .login-divider {
        margin: 10px 0;
    }

    .cashflow-issue-dialog {
        max-height: calc(100svh - 8px);
    }

    .cashflow-issue-dialog .sign-box {
        gap: 10px;
        padding: 12px;
    }

    .cashflow-panel .table-scroll,
    .statement-file-reader-scroll,
    .statement-preview-scroll {
        max-height: 48vh;
    }
}

@media (max-width: 920px) and (orientation: landscape) {
    .app-header {
        flex-direction: row;
        align-items: center;
    }

    .header-actions {
        width: auto;
        display: flex;
        justify-content: flex-end;
    }

    .header-actions form {
        display: block;
    }

    .header-actions .ghost-button {
        width: auto;
    }

    .summary-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cashflow-issue-dialog {
        width: calc(100vw - 16px);
    }

    .cashflow-issue-metrics,
    .account-flow-group-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tranquil Lily theme: violet, warm mist, and soft lily mauve. */
.login-panel,
.ledger-panel,
.cashflow-panel,
.daily-entry-title,
.daily-excel-panel,
.employee-form,
.employee-list-panel,
.settings-form,
.reminder-form,
.reminder-board,
.transfer-form,
.transfer-board,
.attendance-clock-panel,
.attendance-report-panel,
.attendance-table-card,
.attendance-calendar-panel,
.sign-dialog {
    background: rgba(53, 45, 82, 0.96);
    border-color: var(--line);
    box-shadow: 0 24px 78px var(--shadow);
}

.app-header {
    background: rgba(42, 36, 65, 0.92);
    border-bottom-color: var(--line-soft);
}

.brand-mark,
.user-menu-button {
    color: #faf8fb;
    background: linear-gradient(135deg, #4b3f6e, #6c5f8d 58%, #9c8cb9);
    box-shadow: 0 14px 36px rgba(22, 17, 38, 0.38);
}

.user-menu-popover,
.toast-message {
    background: rgba(53, 45, 82, 0.98);
    border-color: var(--line);
}

input,
select,
.transfer-form textarea,
.segmented-control,
.daily-input-table input {
    color: var(--text);
    background: #2f2948;
    border-color: var(--line);
}

input:focus,
select:focus,
.transfer-form textarea:focus,
.daily-input-table input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-form button,
.primary-button,
.passkey-login-button,
.transfer-photo-button,
.segmented-control button.active,
.user-menu-item:hover,
.user-menu-item:focus,
.sign-button.signed {
    color: #faf8fb;
    background: var(--accent);
}

.passkey-login-button {
    color: #f6f1f8;
    background: rgba(186, 150, 193, 0.12);
    border-color: rgba(186, 150, 193, 0.34);
}

.tab-button.active {
    color: #f6f1f8;
    border-color: #ba96c1;
}

.status-pill,
.summary-tile,
.deposit-period-summary div,
.profile-summary div,
.transfer-card,
.transfer-card-main div,
.transfer-qr-preview,
.attendance-state-card,
.attendance-photo-preview,
.attendance-summary-grid div,
.cash-count-card,
.cash-count-totals div,
.cash-count-denominations div {
    background: rgba(75, 63, 110, 0.42);
    border-color: var(--line);
}

.summary-tile.accent {
    border-color: rgba(186, 150, 193, 0.44);
    background: linear-gradient(135deg, rgba(75, 63, 110, 0.64), rgba(108, 95, 141, 0.42));
}

.summary-tile.warning-tile {
    border-color: rgba(186, 150, 193, 0.48);
    background: rgba(108, 95, 141, 0.34);
}

.deposit-period-summary.pending div {
    border-color: rgba(255, 174, 44, 0.42);
}

.deposit-period-summary.over-deposit div {
    border-color: rgba(255, 92, 122, 0.42);
}

.deposit-period-summary.settled div {
    border-color: rgba(34, 197, 94, 0.34);
}

.daily-total-strip div {
    background: rgba(75, 63, 110, 0.46);
    border-color: var(--line);
}

.panel-heading,
.daily-section-title {
    background: linear-gradient(135deg, rgba(75, 63, 110, 0.88), rgba(108, 95, 141, 0.58));
    border-bottom-color: var(--line);
}

.daily-input-table th,
.crosscheck-table th,
.attendance-table th,
.employee-table th,
.ledger-table th {
    color: #f6f1f8;
    background: #4b3f6e;
}

.daily-input-table td,
.daily-input-table th,
.crosscheck-table td,
.crosscheck-table th,
.attendance-table td,
.attendance-table th,
.employee-table td,
.employee-table th,
.ledger-table td,
.ledger-table th {
    border-color: var(--line-soft);
}

.daily-input-table tfoot th,
.daily-input-table tfoot td {
    color: #f6f1f8;
    background: rgba(75, 63, 110, 0.72);
}

.formula-output {
    color: #f1e7f7;
}

.money-cell,
.account-cell strong,
.profile-summary strong,
.cash-count-totals strong,
.cash-count-denominations strong {
    color: var(--text);
}

.status-tag,
.role-pill {
    background: rgba(186, 150, 193, 0.16);
}

.status-tag.good,
.status-pill.saved {
    color: #f3e8f7;
    background: rgba(108, 95, 141, 0.36);
}

.status-tag.warn,
.status-pill.saving,
.negative-money {
    color: var(--warning);
}

.status-tag.bad,
.status-pill.error,
.daily-mismatch,
.formula-output.negative-money {
    color: var(--danger) !important;
}

.form-error,
.dialog-error,
.daily-input-table input.daily-mismatch {
    color: #ffdbe7;
    background: rgba(143, 63, 98, 0.24);
    border-color: rgba(255, 145, 176, 0.42);
}

.revision-label {
    color: #f6f1f8;
    background: #4b3f6e;
}

.sign-button {
    color: var(--muted);
    background: #2f2948;
    border-color: var(--line);
}

.ghost-button {
    color: var(--text);
    background: rgba(75, 63, 110, 0.38);
}

.deposit-gallery figure {
    background: rgba(75, 63, 110, 0.34);
}

@media (max-width: 760px) {
    .ledger-table tr,
    .employee-table tr,
    .crosscheck-table tr,
    .attendance-table tr {
        background: rgba(53, 45, 82, 0.94);
        border-color: var(--line);
    }

    .ledger-table tr.signed {
        background: rgba(108, 95, 141, 0.28);
    }

    .ledger-table tr.revision-row {
        background: rgba(75, 63, 110, 0.48);
    }
}

@media (min-width: 761px) {
    body {
        font-size: 16px;
    }

    .login-brand h1,
    .brand-line h1 {
        font-size: 24px;
    }

    .checkbox-field {
        font-size: 14px;
    }

    label,
    .login-divider,
    .mode-field,
    .summary-tile span,
    .daily-entry-title p,
    .daily-section-title span,
    .profile-summary span,
    .formula-cell,
    .source-cell,
    .cash-count-heading span,
    .cash-count-totals span,
    .cash-count-denominations span,
    .crosscheck-table th,
    .account-cell strong,
    .employee-table th,
    .role-pill,
    .ledger-table th,
    .employee-cell strong,
    .deposit-gallery figcaption,
    .hover-tooltip {
        font-size: 13px;
    }

    .daily-total-strip span,
    .daily-sign-note,
    .account-cell span,
    .status-tag,
    .revision-label,
    .employee-cell span,
    .revision-note,
    .revision-change {
        font-size: 12px;
    }

    .summary-tile strong {
        font-size: clamp(22px, 3vw, 30px);
    }

    .daily-entry-title h2 {
        font-size: 24px;
    }

    .daily-total-strip strong,
    .employee-form h2,
    .panel-heading h2 {
        font-size: 20px;
    }

    .daily-section-title h3 {
        font-size: 22px;
    }

    .daily-input-table {
        font-size: 14px;
    }

    .user-menu-button span,
    .daily-input-table th {
        font-size: 15px;
    }

    .profile-summary strong,
    .cash-count-heading h3 {
        font-size: 17px;
    }

    .daily-input-table thead tr:first-child th,
    .cash-count-totals strong,
    .cash-count-denominations strong {
        font-size: 16px;
    }

    .daily-input-table input,
    .ledger-table tr.revision-row {
        font-size: 14px;
    }

    .sign-button,
    .sign-box h2 {
        font-size: 21px;
    }
}

/* Midnight AI operations theme. */
:root {
    color-scheme: dark;
    --lily-primary: #6478ff;
    --lily-neutral: #a9aec6;
    --lily-lavender: #7c6dff;
    --lily-deep: #111733;
    --lily-mauve: #ff5d75;
    --bg: #070b22;
    --panel: #101631;
    --panel-strong: #171d3b;
    --line: rgba(132, 151, 255, 0.24);
    --line-soft: rgba(132, 151, 255, 0.14);
    --text: #f7f8ff;
    --muted: #a6adc8;
    --accent: #6678ff;
    --accent-soft: rgba(102, 120, 255, 0.24);
    --warning: #ffae2c;
    --danger: #ff5d75;
    --input: #0d132e;
    --shadow: rgba(0, 0, 0, 0.5);
    --ai-cyan: #22b7ff;
    --ai-teal: #18d0bd;
    --ai-orange: #ff9d22;
    --ai-green: #5ed96b;
    --ai-rose: #ff5d75;
}

body {
    background:
        radial-gradient(circle at 16% 18%, rgba(67, 102, 255, 0.22), transparent 24rem),
        radial-gradient(circle at 88% 34%, rgba(24, 208, 189, 0.14), transparent 24rem),
        radial-gradient(circle at 50% 96%, rgba(255, 93, 117, 0.09), transparent 22rem),
        linear-gradient(180deg, #070b22 0%, #09102b 52%, #070b22 100%);
    color: var(--text);
}

.login-panel,
.ledger-panel,
.cashflow-panel,
.daily-entry-title,
.daily-excel-panel,
.employee-form,
.employee-list-panel,
.settings-form,
.reminder-form,
.reminder-board,
.transfer-form,
.transfer-board,
.attendance-clock-panel,
.attendance-report-panel,
.attendance-table-card,
.attendance-calendar-panel,
.photo-report-form,
.photo-report-board,
.sign-dialog,
.placeholder-panel {
    background: rgba(16, 22, 49, 0.95);
    border-color: var(--line);
    box-shadow: 0 24px 78px var(--shadow);
}

.app-header {
    background: rgba(7, 11, 34, 0.88);
    border-bottom-color: var(--line-soft);
    backdrop-filter: blur(18px);
}

.brand-mark,
.user-menu-button {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    box-shadow: 0 18px 42px rgba(34, 183, 255, 0.2);
}

.brand-line h1 {
    color: #8779ff;
}

.brand-line p,
.login-brand p {
    color: var(--muted);
}

.header-actions {
    align-items: center;
    gap: 10px;
}

.header-actions .support-chat-button {
    width: 46px;
    height: 46px;
}

.icon-action {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #f7f8ff;
    background: rgba(20, 27, 58, 0.9);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.icon-action:hover,
.icon-action:focus-visible {
    color: #ffffff;
    border-color: rgba(34, 183, 255, 0.54);
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.16);
}

.icon-action svg,
.tab-icon svg,
.channel-icon svg,
.channel-logo svg,
.metric-icon svg,
.quick-icon svg,
.refresh-pill svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    color: #ffffff;
    background: var(--ai-rose);
    border: 2px solid #070b22;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.notification-menu {
    position: relative;
}

.notification-action.has-critical {
    animation: bell-shake 1.15s ease-in-out infinite;
    border-color: rgba(255, 91, 122, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 91, 122, 0.14), 0 16px 36px rgba(0, 0, 0, 0.22);
}

.notification-action.has-alerts:not(.has-critical) {
    border-color: rgba(244, 161, 77, 0.64);
}

@keyframes bell-shake {
    0%, 45%, 100% { transform: rotate(0); }
    8% { transform: rotate(-9deg); }
    16% { transform: rotate(8deg); }
    24% { transform: rotate(-6deg); }
    32% { transform: rotate(5deg); }
}

.notification-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 180;
    width: min(430px, calc(100vw - 24px));
    overflow: hidden;
    color: var(--text);
    background: rgba(53, 45, 82, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.notification-popover[hidden] {
    display: none !important;
}

.notification-popover-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(75, 63, 110, 0.72);
}

.notification-popover-title strong,
.notification-popover-title span {
    display: block;
}

.notification-popover-title span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.notification-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 0;
}

.notification-filter-tabs button {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.notification-filter-tabs button.active {
    color: #ffffff;
    background: rgba(122, 92, 255, 0.72);
    border-color: rgba(172, 143, 255, 0.82);
    box-shadow: 0 12px 28px rgba(122, 92, 255, 0.22);
}

.notification-filter-tabs span {
    min-width: 20px;
    padding: 2px 6px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
}

.ghost-icon-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.ghost-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.notification-list {
    display: grid;
    gap: 8px;
    max-height: min(68vh, 540px);
    overflow-y: auto;
    padding: 10px;
}

.notification-item,
.notification-empty {
    width: 100%;
    min-height: 72px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    color: var(--text);
    text-align: left;
    background: rgba(47, 41, 72, 0.9);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.notification-item.high {
    border-color: rgba(255, 91, 122, 0.5);
    background: linear-gradient(90deg, rgba(143, 63, 98, 0.35), rgba(47, 41, 72, 0.9));
}

.notification-item.medium {
    border-color: rgba(244, 161, 77, 0.44);
}

.notification-item.explanation {
    border-color: rgba(156, 140, 185, 0.66);
    background: linear-gradient(90deg, rgba(93, 72, 132, 0.42), rgba(47, 41, 72, 0.92));
}

.notification-rank {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
}

.notification-copy {
    min-width: 0;
}

.notification-sticker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 5px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.notification-sticker.explanation {
    color: #ffffff;
    background: linear-gradient(135deg, #6c5f8d, #ba96c1);
    box-shadow: 0 8px 18px rgba(186, 150, 193, 0.22);
}

.notification-copy strong,
.notification-copy small,
.notification-copy em {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-copy strong {
    color: var(--text);
    font-weight: 900;
}

.notification-copy small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.notification-copy em,
.notification-priority {
    margin-top: 5px;
    color: #dcd7d5;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.notification-priority {
    justify-self: end;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
}

@media (max-width: 760px) {
    .support-chat-panel {
        top: calc(74px + env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        width: auto;
        max-height: none;
    }

    .support-chat-messages {
        min-height: 0;
    }

    .support-chat-form {
        grid-template-columns: 1fr;
    }

    .notification-popover {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        width: auto;
        max-width: none;
        max-height: none;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-radius: 8px;
        transform: none;
        z-index: 190;
    }

    .notification-popover-title {
        flex: 0 0 auto;
        align-items: flex-start;
        padding: 12px;
    }

    .notification-popover-title > div,
    .notification-copy {
        min-width: 0;
    }

    .notification-popover-title strong {
        font-size: 15px;
    }

    .notification-popover-title span {
        font-size: 12px;
        line-height: 1.35;
    }

    .notification-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        overscroll-behavior: contain;
        padding: 10px;
    }

    .notification-item,
    .notification-empty {
        min-height: 0;
        grid-template-columns: 30px minmax(0, 1fr);
        align-items: start;
        padding: 11px;
    }

    .notification-copy strong,
    .notification-copy small,
    .notification-copy em {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .notification-priority {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
    }

    .notification-copy strong {
        font-size: 14px;
        line-height: 1.28;
    }

    .notification-copy small {
        font-size: 12px;
        line-height: 1.42;
    }

    .notification-priority {
        grid-column: 2;
        justify-self: start;
    }
}

.app-tabs {
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 6px;
    border-bottom: 0;
}

.tab-button {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    color: var(--muted);
    background: rgba(18, 24, 52, 0.9);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.tab-button:hover,
.tab-button:focus-visible {
    color: #ffffff;
    border-color: rgba(34, 183, 255, 0.48);
}

.tab-button.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    border-color: rgba(34, 183, 255, 0.64);
    box-shadow: 0 18px 42px rgba(34, 183, 255, 0.2);
}

.tab-button.secondary-tab {
    background: rgba(16, 22, 49, 0.78);
}

.overview-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    gap: 18px;
    align-items: end;
    margin-bottom: 22px;
}

.overview-hero h2 {
    margin: 0;
    color: #8c7cff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: 0;
}

.overview-hero p {
    max-width: 680px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 16px;
}

.refresh-pill {
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    color: #ffffff;
    background: linear-gradient(135deg, #6478ff, #7287ff);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 18px 42px rgba(102, 120, 255, 0.24);
}

.refresh-pill:hover,
.refresh-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(102, 120, 255, 0.22), 0 18px 42px rgba(102, 120, 255, 0.24);
}

.channel-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.channel-strip.compact {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    margin-bottom: 16px;
}

.channel-card {
    min-height: 112px;
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 14px;
    color: var(--muted);
    background: rgba(18, 24, 52, 0.9);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.channel-card:hover,
.channel-card:focus-visible {
    color: #ffffff;
    border-color: rgba(34, 183, 255, 0.48);
}

.channel-card.active {
    color: #ffffff;
    background: linear-gradient(135deg, #23b7ff, #278df5);
    border-color: rgba(34, 183, 255, 0.68);
    box-shadow: 0 18px 42px rgba(34, 183, 255, 0.2);
}

.message-center {
    display: grid;
    gap: 16px;
}

.message-center .panel-heading {
    align-items: start;
}

.message-center .panel-heading p {
    margin: 4px 0 0;
    color: var(--muted);
}

.message-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.message-metric-card,
.message-board,
.message-playbook-card,
.message-api-plan {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(18, 24, 52, 0.72);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.message-metric-card {
    display: grid;
    gap: 6px;
    min-height: 104px;
    padding: 16px;
}

.message-metric-card span,
.message-metric-card small,
.message-board-head span,
.message-thread small,
.message-customer-summary span,
.message-customer-summary small,
.message-api-plan span {
    color: var(--muted);
}

.message-metric-card strong {
    color: var(--text);
    font-size: 28px;
    line-height: 1;
}

.message-metric-card.warn strong {
    color: var(--warning);
}

.message-metric-card.bad strong {
    color: var(--danger);
}

.message-admin-layout,
.message-staff-layout {
    display: grid;
    gap: 12px;
}

.message-admin-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.message-assignment-panel {
    grid-column: 1 / -1;
}

.message-responder-panel {
    grid-column: 1 / -1;
}

.message-board {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.message-board-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.message-board-head strong {
    color: var(--text);
    font-size: 15px;
}

.message-report-table {
    width: 100%;
    border-collapse: collapse;
}

.message-report-table th,
.message-report-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text);
    text-align: left;
}

.message-report-table th {
    color: var(--muted);
    font-size: 12px;
}

.message-review-list,
.message-thread-list,
.message-playbook-grid {
    display: grid;
    gap: 10px;
}

.message-review-list button,
.message-thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    text-align: left;
}

.message-review-list button strong {
    color: var(--accent);
    white-space: nowrap;
}

.message-assignment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.message-assignment-grid label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
}

.message-responder-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.message-responder-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.message-responder-row.active {
    border-color: rgba(55, 214, 154, 0.42);
    background: rgba(55, 214, 154, 0.1);
}

.message-responder-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--success);
}

.message-responder-row span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.message-responder-row strong,
.message-responder-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-responder-row small,
.message-responder-row em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.message-responder-row em {
    white-space: nowrap;
    font-weight: 900;
}

.message-responder-row.active em {
    color: var(--success);
}

.message-staff-layout {
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.message-thread {
    grid-template-columns: 42px minmax(0, 1fr) auto;
}

.message-thread.active {
    border-color: rgba(34, 183, 255, 0.52);
    background: rgba(34, 183, 255, 0.13);
}

.message-thread.unanswered {
    border-color: rgba(252, 186, 3, 0.44);
}

.message-thread b {
    min-width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #0b1020;
    background: var(--warning);
    font-size: 12px;
}

.message-thread-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.message-thread-copy strong,
.message-thread-copy small,
.message-thread-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-thread-copy em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.message-thread-channel {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: #1877f2;
    font-size: 13px;
    font-weight: 900;
}

.message-thread-channel.zalo {
    background: linear-gradient(135deg, #1da1ff, #1267ff);
}

.message-thread-channel.manual {
    color: #172033;
    background: linear-gradient(135deg, #8ee7c7, #e6f982);
}

.message-log {
    min-height: 240px;
    max-height: 420px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(4, 8, 24, 0.18);
}

.message-empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    color: var(--muted);
    text-align: center;
}

.message-bubble {
    width: min(78%, 620px);
    display: grid;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

.message-bubble.outbound {
    align-self: flex-end;
    border-color: rgba(34, 183, 255, 0.38);
    background: rgba(34, 183, 255, 0.15);
}

.message-bubble.system {
    align-self: center;
    width: min(88%, 720px);
    background: rgba(255, 255, 255, 0.04);
}

.message-bubble span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.message-bubble p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.45;
}

.message-bubble time,
.message-send-status,
.message-status-line {
    color: var(--muted);
    font-size: 11px;
}

.message-send-status {
    color: var(--warning);
}

.message-status-line {
    min-height: 18px;
}

.message-status-line.error {
    color: var(--danger);
}

.message-status-line.saving {
    color: var(--warning);
}

.message-status-line.saved {
    color: var(--success);
}

.message-reply-panel textarea {
    min-height: 150px;
    width: 100%;
    padding: 12px;
    color: var(--text);
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 8px;
    resize: vertical;
}

.message-customer-summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.message-reply-actions {
    display: flex;
    justify-content: end;
    gap: 10px;
}

.message-playbook-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.message-playbook-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.message-playbook-card strong {
    color: var(--text);
}

.message-playbook-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.message-api-plan {
    display: grid;
    gap: 6px;
    padding: 14px;
}

.message-api-plan strong {
    color: var(--text);
}

@media (max-width: 920px) {
    .message-metric-grid,
    .message-admin-layout,
    .message-staff-layout,
    .message-assignment-grid,
    .message-playbook-grid {
        grid-template-columns: 1fr;
    }

    .message-board-head {
        display: grid;
    }

    .message-log {
        max-height: 48vh;
    }

    .message-bubble {
        width: 92%;
    }
}

.channel-icon,
.channel-logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 24px;
    font-weight: 900;
}

.facebook-logo {
    color: #d8defa;
    font-family: Arial, sans-serif;
}

.zalo-logo {
    color: #ffffff;
    background: linear-gradient(135deg, #1da1ff, #1267ff);
    font-size: 20px;
}

.telegram-logo {
    color: #d8defa;
}

.grid-icon svg rect {
    fill: currentColor;
    stroke: none;
}

.ai-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.ai-metric-card {
    min-height: 170px;
    display: grid;
    align-content: space-between;
    gap: 16px;
    padding: 24px;
    border: 1px solid currentColor;
    border-radius: 8px;
    background: rgba(16, 22, 49, 0.88);
    box-shadow: inset 0 0 30px color-mix(in srgb, currentColor 18%, transparent), 0 18px 46px rgba(0, 0, 0, 0.22);
}

.metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.metric-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

.metric-trend {
    padding: 5px 10px;
    border-radius: 8px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    font-size: 13px;
    font-weight: 800;
}

.metric-trend.good {
    color: var(--ai-green);
}

.metric-trend.bad {
    color: var(--ai-rose);
}

.ai-metric-card strong {
    color: currentColor;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1;
}

.ai-metric-card > span {
    color: #f7f8ff;
    font-size: 15px;
    font-weight: 700;
}

.metric-orange {
    color: var(--ai-orange);
}

.metric-teal {
    color: var(--ai-teal);
}

.metric-rose {
    color: var(--ai-rose);
}

.metric-green {
    color: var(--ai-green);
}

.quick-access-panel {
    margin-top: 4px;
}

.quick-access-panel h2 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 28px;
    letter-spacing: 0;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.quick-access-card {
    min-height: 118px;
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 16px;
    color: #ffffff;
    background: rgba(18, 24, 52, 0.9);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-weight: 800;
}

.quick-access-card:hover,
.quick-access-card:focus-visible {
    border-color: rgba(34, 183, 255, 0.48);
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.14);
}

.quick-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #ffffff;
}

.quick-icon.blue {
    background: linear-gradient(135deg, #6678ff, #8794ff);
}

.quick-icon.orange {
    background: linear-gradient(135deg, #ffae2c, #ff8a00);
}

.quick-icon.teal {
    background: linear-gradient(135deg, #18d0bd, #27b38f);
}

.quick-icon.rose {
    background: linear-gradient(135deg, #ff5d75, #ff7f8e);
}

.placeholder-panel {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.empty-state {
    display: grid;
    gap: 6px;
    min-height: 180px;
    align-content: center;
    justify-items: center;
    padding: 24px;
    color: var(--muted);
    text-align: center;
    background: rgba(13, 19, 46, 0.72);
    border: 1px dashed var(--line);
    border-radius: 8px;
}

.empty-state strong {
    color: #ffffff;
    font-size: 18px;
}

.user-menu-popover,
.toast-message {
    background: rgba(16, 22, 49, 0.98);
    border-color: var(--line);
}

input,
select,
.transfer-form textarea,
.photo-report-form textarea,
.segmented-control,
.daily-input-table input {
    color: var(--text);
    background: var(--input);
    border-color: var(--line);
}

input:focus,
select:focus,
.transfer-form textarea:focus,
.photo-report-form textarea:focus,
.daily-input-table input:focus {
    border-color: var(--ai-cyan);
    box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.16);
}

.login-form button,
.primary-button,
.passkey-login-button,
.transfer-photo-button,
.photo-report-camera-button,
.segmented-control button.active,
.user-menu-item:hover,
.user-menu-item:focus,
.sign-button.signed {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
}

.passkey-login-button,
.ghost-button {
    color: #f7f8ff;
    background: rgba(18, 24, 52, 0.88);
    border-color: var(--line);
}

.status-pill,
.summary-tile,
.deposit-period-summary div,
.profile-summary div,
.transfer-card,
.transfer-card-main div,
.transfer-qr-preview,
.photo-report-card,
.photo-report-card-main div,
.photo-report-preview,
.attendance-state-card,
.attendance-photo-preview,
.attendance-summary-grid div,
.cash-count-card,
.cash-count-totals div,
.cash-count-denominations div {
    background: rgba(18, 24, 52, 0.84);
    border-color: var(--line);
}

.summary-tile.accent {
    border-color: rgba(34, 183, 255, 0.4);
    background: linear-gradient(135deg, rgba(34, 183, 255, 0.22), rgba(102, 120, 255, 0.2));
}

.summary-tile.warning-tile {
    border-color: rgba(255, 174, 44, 0.4);
    background: rgba(255, 157, 34, 0.14);
}

.deposit-period-summary.pending div {
    border-color: rgba(255, 174, 44, 0.42);
}

.deposit-period-summary.over-deposit div {
    border-color: rgba(255, 92, 122, 0.42);
}

.deposit-period-summary.settled div {
    border-color: rgba(34, 197, 94, 0.34);
}

.daily-total-strip div {
    background: rgba(18, 24, 52, 0.86);
    border-color: var(--line);
}

.panel-heading,
.daily-section-title {
    background: linear-gradient(135deg, rgba(23, 29, 59, 0.96), rgba(34, 42, 82, 0.88));
    border-bottom-color: var(--line);
}

.daily-input-table th,
.crosscheck-table th,
.attendance-table th,
.employee-table th,
.ledger-table th {
    color: #ffffff;
    background: #171d3b;
}

.daily-input-table td,
.daily-input-table th,
.crosscheck-table td,
.crosscheck-table th,
.attendance-table td,
.attendance-table th,
.employee-table td,
.employee-table th,
.ledger-table td,
.ledger-table th {
    border-color: var(--line-soft);
}

.daily-input-table tfoot th,
.daily-input-table tfoot td {
    color: #ffffff;
    background: rgba(23, 29, 59, 0.92);
}

.formula-output,
.money-cell,
.account-cell strong,
.profile-summary strong,
.cash-count-totals strong,
.cash-count-denominations strong {
    color: var(--text);
}

.status-tag,
.role-pill {
    background: rgba(102, 120, 255, 0.16);
}

.status-tag.good,
.status-pill.saved {
    color: #a5ffba;
    background: rgba(94, 217, 107, 0.12);
}

.status-tag.warn,
.status-pill.saving,
.negative-money {
    color: var(--warning);
}

.status-tag.bad,
.status-pill.error,
.daily-mismatch,
.formula-output.negative-money {
    color: var(--danger) !important;
}

.form-error,
.dialog-error,
.daily-input-table input.daily-mismatch {
    color: #ffdbe2;
    background: rgba(255, 93, 117, 0.14);
    border-color: rgba(255, 93, 117, 0.36);
}

.daily-report-cash-mismatch {
    background: rgba(255, 174, 44, 0.18) !important;
    border-color: rgba(255, 174, 44, 0.54) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 174, 44, 0.28);
}

.revision-label {
    color: #ffffff;
    background: #26305e;
}

.sign-button {
    color: var(--muted);
    background: #111733;
    border-color: var(--line);
}

.deposit-gallery figure {
    background: rgba(18, 24, 52, 0.86);
}

.mobile-bottom-tabs {
    display: none;
}

@media (max-width: 1080px) {
    .ai-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    .app-shell {
        padding-bottom: calc(218px + env(safe-area-inset-bottom, 0px));
    }

    .app-header {
        position: sticky;
        top: 0;
        z-index: 70;
        background: rgba(7, 11, 34, 0.94);
    }

    .brand-mark {
        width: 40px;
        height: 40px;
    }

    .header-actions {
        gap: 8px;
    }

    .icon-action,
    .support-chat-button,
    .user-menu-button {
        width: 42px;
        height: 42px;
    }

    .app-shell > .app-tabs:not(.mobile-bottom-tabs) {
        display: none;
    }

    .overview-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 18px;
    }

    .overview-hero h2 {
        font-size: 34px;
    }

    .overview-hero p {
        font-size: 14px;
    }

    .refresh-pill {
        min-height: 56px;
        font-size: 16px;
    }

    .channel-strip,
    .channel-strip.compact {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(132px, 42vw);
        grid-template-columns: none;
        gap: 12px;
        margin: 0 -10px 18px;
        padding: 0 10px 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .channel-card {
        min-height: 102px;
        padding: 12px;
    }

    .ai-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 24px;
    }

    .ai-metric-card {
        min-height: 150px;
        padding: 16px;
    }

    .metric-icon {
        width: 42px;
        height: 42px;
    }

    .metric-trend {
        padding: 4px 7px;
        font-size: 11px;
    }

    .ai-metric-card strong {
        font-size: 40px;
    }

    .ai-metric-card > span {
        font-size: 13px;
    }

    .quick-access-panel h2 {
        font-size: 24px;
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quick-access-card {
        min-height: 104px;
        padding: 12px;
    }

    .mobile-bottom-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        gap: 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding:
            8px
            max(8px, env(safe-area-inset-right, 0px))
            max(8px, env(safe-area-inset-bottom, 0px))
            max(8px, env(safe-area-inset-left, 0px));
        background: rgba(10, 14, 35, 0.96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.36);
        backdrop-filter: blur(18px);
    }

    .mobile-bottom-tabs .tab-button {
        min-width: 72px;
        min-height: 58px;
        flex: 0 0 72px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 0 4px;
        color: #737b9d;
        background: transparent;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        font-size: 11px;
        font-weight: 700;
        white-space: normal;
    }

    .mobile-bottom-tabs .tab-icon svg {
        width: 22px;
        height: 22px;
    }

    .mobile-bottom-tabs .tab-button.active {
        color: #7e8cff;
        background: rgba(102, 120, 255, 0.1);
        box-shadow: none;
    }

    .ledger-table tr,
    .employee-table tr,
    .crosscheck-table tr,
    .attendance-table tr {
        background: rgba(16, 22, 49, 0.95);
        border-color: var(--line);
    }

    .ledger-table tr.signed {
        background: rgba(34, 183, 255, 0.12);
    }

    .ledger-table tr.revision-row {
        background: rgba(23, 29, 59, 0.88);
    }
}

.theme-setting {
    display: grid;
    gap: 8px;
}

.theme-setting > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.theme-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    background: rgba(7, 11, 34, 0.42);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.theme-choice {
    position: relative;
}

.theme-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.theme-choice span {
    min-height: 42px;
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px solid transparent;
    border-radius: 6px;
    font-weight: 800;
}

.theme-choice input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-choice input:checked + span {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    border-color: rgba(132, 151, 255, 0.46);
    box-shadow: 0 10px 22px rgba(34, 183, 255, 0.18);
}

body[data-theme="light"] {
    color-scheme: light;
    --lily-primary: #2354d7;
    --lily-neutral: #586174;
    --lily-lavender: #415ce6;
    --lily-deep: #edf3fb;
    --lily-mauve: #c63856;
    --bg: #f3f6fb;
    --panel: #ffffff;
    --panel-strong: #eef3fb;
    --line: rgba(29, 45, 80, 0.18);
    --line-soft: rgba(29, 45, 80, 0.1);
    --text: #162033;
    --muted: #5b667a;
    --accent: #2354d7;
    --accent-soft: rgba(35, 84, 215, 0.12);
    --warning: #b96912;
    --danger: #c63856;
    --input: #ffffff;
    --shadow: rgba(24, 36, 66, 0.12);
    --ai-cyan: #087fc0;
    --ai-teal: #0a9b8f;
    --ai-orange: #c76d12;
    --ai-green: #158b45;
    --ai-rose: #c63856;
    background:
        radial-gradient(circle at 16% 16%, rgba(35, 84, 215, 0.12), transparent 24rem),
        radial-gradient(circle at 86% 30%, rgba(10, 155, 143, 0.1), transparent 24rem),
        linear-gradient(180deg, #f8fbff 0%, #eef3fb 58%, #f7f9fc 100%);
    color: var(--text);
}

body[data-theme="light"] .app-header,
body[data-theme="light"] .mobile-bottom-tabs {
    background: rgba(255, 255, 255, 0.94);
    border-color: var(--line);
    box-shadow: 0 18px 44px rgba(24, 36, 66, 0.1);
}

body[data-theme="light"] .brand-line h1,
body[data-theme="light"] .panel-heading h2,
body[data-theme="light"] .daily-entry-title h2,
body[data-theme="light"] .quick-access-panel h2,
body[data-theme="light"] .staff-dashboard-head h2,
body[data-theme="light"] .support-chat-title strong {
    color: var(--text);
}

body[data-theme="light"] .login-panel,
body[data-theme="light"] .ledger-panel,
body[data-theme="light"] .cashflow-panel,
body[data-theme="light"] .daily-entry-title,
body[data-theme="light"] .daily-excel-panel,
body[data-theme="light"] .employee-form,
body[data-theme="light"] .employee-list-panel,
body[data-theme="light"] .settings-form,
body[data-theme="light"] .reminder-form,
body[data-theme="light"] .reminder-board,
body[data-theme="light"] .transfer-form,
body[data-theme="light"] .transfer-board,
body[data-theme="light"] .attendance-clock-panel,
body[data-theme="light"] .attendance-report-panel,
body[data-theme="light"] .attendance-table-card,
body[data-theme="light"] .attendance-calendar-panel,
body[data-theme="light"] .photo-report-form,
body[data-theme="light"] .photo-report-board,
body[data-theme="light"] .staff-panel,
body[data-theme="light"] .stock-request-form,
body[data-theme="light"] .stock-request-board,
body[data-theme="light"] .quick-access-panel,
body[data-theme="light"] .placeholder-panel,
body[data-theme="light"] .support-chat-panel,
body[data-theme="light"] .sign-dialog,
body[data-theme="light"] .deposit-dialog,
body[data-theme="light"] .transfer-qr-dialog-body,
body[data-theme="light"] .attendance-photo-dialog-body,
body[data-theme="light"] .attendance-gps-map-frame,
body[data-theme="light"] .attendance-gps-dialog-body iframe,
body[data-theme="light"] .attendance-gps-history button,
body[data-theme="light"] .photo-report-dialog-body,
body[data-theme="light"] .ledger-week-close-document,
body[data-theme="light"] .ledger-week-readiness-panel {
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--line);
    box-shadow: 0 18px 46px var(--shadow);
}

body[data-theme="light"] .toolbar,
body[data-theme="light"] .cashflow-toolbar,
body[data-theme="light"] .daily-report-toolbar,
body[data-theme="light"] .overview-hero,
body[data-theme="light"] .profile-summary,
body[data-theme="light"] .employee-edit-dialog form,
body[data-theme="light"] .notification-popover,
body[data-theme="light"] .user-menu-popover,
body[data-theme="light"] .summary-tile,
body[data-theme="light"] .deposit-period-summary div,
body[data-theme="light"] .ai-metric-card,
body[data-theme="light"] .channel-card,
body[data-theme="light"] .quick-access-card,
body[data-theme="light"] .reminder-card,
body[data-theme="light"] .transfer-card,
body[data-theme="light"] .stock-request-card,
body[data-theme="light"] .attendance-request-card,
body[data-theme="light"] .photo-report-card,
body[data-theme="light"] .deposit-gallery figure,
body[data-theme="light"] .ledger-week-summary-grid article,
body[data-theme="light"] .ledger-week-close-content dl div,
body[data-theme="light"] .ledger-week-close-metrics article,
body[data-theme="light"] .ledger-week-daily-strip button,
body[data-theme="light"] .ledger-week-check-item,
body[data-theme="light"] .table-scroll {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--line-soft);
    box-shadow: 0 14px 34px rgba(24, 36, 66, 0.08);
}

body[data-theme="light"] .deposit-image-stage {
    background: #f6f8fc;
    border-color: rgba(29, 45, 80, 0.16);
}

body[data-theme="light"] .deposit-image-toolbar button {
    color: #172033;
    background: #eef3fb;
    border-color: rgba(29, 45, 80, 0.14);
}

body[data-theme="light"] .daily-card-settlement-panel {
    background: #f6f8fc;
    border-color: var(--line-soft);
}

body[data-theme="light"] .daily-card-settlement-metrics div,
body[data-theme="light"] .daily-card-settlement-item {
    background: #ffffff;
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .daily-card-settlement-item.good {
    border-color: rgba(26, 127, 79, 0.34);
}

body[data-theme="light"] .daily-card-settlement-item.warn {
    border-color: rgba(177, 122, 30, 0.42);
}

body[data-theme="light"] .daily-card-settlement-item.bad {
    border-color: rgba(190, 70, 70, 0.45);
    background: #fff7f7;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
    color: var(--text);
    background: #ffffff;
    border-color: var(--line);
}

body[data-theme="light"] input[readonly],
body[data-theme="light"] input:disabled,
body[data-theme="light"] select:disabled,
body[data-theme="light"] textarea:disabled {
    color: #6b7486;
    background: #eef3fb;
}

body[data-theme="light"] .ledger-add-row-button {
    color: #0f5b55;
    background: #e7fbf7;
    border-color: rgba(16, 130, 120, 0.24);
}

body[data-theme="light"] .ledger-add-row-button:hover:not(:disabled) {
    background: #d7f7f1;
    border-color: rgba(16, 130, 120, 0.38);
}

body[data-theme="light"] .ledger-add-row-button:disabled {
    color: #758198;
    background: #eef3fb;
    border-color: var(--line);
}

body[data-theme="light"] .ledger-table th,
body[data-theme="light"] .employee-table th,
body[data-theme="light"] .crosscheck-table th,
body[data-theme="light"] .attendance-table th,
body[data-theme="light"] .daily-excel-table th,
body[data-theme="light"] .cashflow-table th {
    color: #48556c;
    background: #eef3fb;
    border-color: var(--line);
}

body[data-theme="light"] .ledger-table tr,
body[data-theme="light"] .employee-table tr,
body[data-theme="light"] .crosscheck-table tr,
body[data-theme="light"] .attendance-table tr,
body[data-theme="light"] .daily-excel-table tr,
body[data-theme="light"] .cashflow-table tr {
    color: var(--text);
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--line-soft);
}

body[data-theme="light"] .ledger-table td,
body[data-theme="light"] .employee-table td,
body[data-theme="light"] .crosscheck-table td,
body[data-theme="light"] .attendance-table td,
body[data-theme="light"] .daily-excel-table td,
body[data-theme="light"] .cashflow-table td {
    border-color: var(--line-soft);
}

body[data-theme="light"] .account-flow-group-row td {
    background: #f4f7fb;
}

body[data-theme="light"] .account-flow-group-card {
    background: #ffffff;
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .statement-period-card {
    color: var(--text);
    background: #ffffff;
    border-color: var(--line-soft);
    box-shadow: 0 10px 24px rgba(24, 36, 66, 0.06);
}

body[data-theme="light"] .statement-filter-bar input {
    color: var(--text);
    background: #ffffff;
    border-color: rgba(29, 45, 80, 0.16);
}

body[data-theme="light"] .statement-period-card.active {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(20, 148, 109, 0.18), 0 10px 24px rgba(24, 36, 66, 0.08);
}

body[data-theme="light"] .account-flow-group-row.group-service-accountant .account-flow-group-card {
    border-left-color: #0a9b8f;
    background: linear-gradient(135deg, rgba(10, 155, 143, 0.13), rgba(35, 84, 215, 0.06));
}

body[data-theme="light"] .account-flow-group-row.group-service-source .account-flow-group-card {
    border-left-color: #c76d12;
    background: linear-gradient(135deg, rgba(199, 109, 18, 0.13), rgba(35, 84, 215, 0.05));
}

body[data-theme="light"] .account-flow-group-row.group-installment .account-flow-group-card {
    border-left-color: #7a3fa0;
    background: linear-gradient(135deg, rgba(122, 63, 160, 0.12), rgba(8, 127, 192, 0.05));
}

body[data-theme="light"] .account-flow-group-row.group-personal .account-flow-group-card {
    border-left-color: #087f78;
    background: linear-gradient(135deg, rgba(8, 127, 120, 0.12), rgba(199, 109, 18, 0.05));
}

body[data-theme="light"] .account-flow-group-totals span,
body[data-theme="light"] .service-control-metrics span,
body[data-theme="light"] .service-control-quick-metrics span {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .service-control-card {
    background: rgba(10, 155, 143, 0.1);
    border-color: rgba(10, 155, 143, 0.32);
}

body[data-theme="light"] .service-control-card.bad {
    background: rgba(198, 56, 86, 0.09);
    border-color: rgba(198, 56, 86, 0.28);
}

body[data-theme="light"] .service-control-card.warn {
    background: rgba(199, 109, 18, 0.1);
    border-color: rgba(199, 109, 18, 0.28);
}

body[data-theme="light"] .service-control-quick-metrics .attention {
    background: rgba(199, 109, 18, 0.1);
    border-color: rgba(199, 109, 18, 0.28);
}

body[data-theme="light"] .service-control-quick-metrics .good {
    background: rgba(20, 148, 109, 0.08);
    border-color: rgba(20, 148, 109, 0.22);
}

body[data-theme="light"] .service-control-toggle-button {
    color: var(--text);
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(29, 45, 80, 0.14);
}

body[data-theme="light"] .service-control-toggle-button:hover,
body[data-theme="light"] .service-control-toggle-button:focus-visible {
    background: rgba(20, 148, 109, 0.12);
    border-color: rgba(20, 148, 109, 0.26);
}

body[data-theme="light"] .service-control-details details,
body[data-theme="light"] .service-control-note textarea,
body[data-theme="light"] .service-control-item {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .service-unknown-panel {
    background: rgba(199, 109, 18, 0.08);
    border-color: rgba(199, 109, 18, 0.22);
}

body[data-theme="light"] .service-unknown-panel.good {
    background: rgba(10, 155, 143, 0.08);
    border-color: rgba(10, 155, 143, 0.2);
}

body[data-theme="light"] .service-unknown-steps span,
body[data-theme="light"] .service-unknown-row {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .service-unknown-row em {
    color: #9a5b04;
}

body[data-theme="light"] .service-control-item.attention {
    background: rgba(199, 109, 18, 0.08);
    border-color: rgba(199, 109, 18, 0.2);
}

body[data-theme="light"] .service-control-item.loan {
    background: rgba(8, 127, 192, 0.08);
    border-color: rgba(8, 127, 192, 0.18);
}

body[data-theme="light"] .service-control-item-summary {
    background: rgba(10, 155, 143, 0.08);
}

body[data-theme="light"] .cashflow-issue-button {
    color: #8f2444;
    background: rgba(198, 56, 86, 0.09);
    border-color: rgba(198, 56, 86, 0.24);
}

body[data-theme="light"] .cashflow-issue-button.warn {
    color: #8b500f;
    background: rgba(199, 109, 18, 0.1);
    border-color: rgba(199, 109, 18, 0.24);
}

body[data-theme="light"] .cashflow-issue-button.good {
    color: #076f63;
    background: rgba(10, 155, 143, 0.1);
    border-color: rgba(10, 155, 143, 0.22);
}

body[data-theme="light"] .cashflow-issue-metrics span,
body[data-theme="light"] .cashflow-issue-detail-list div,
body[data-theme="light"] .cashflow-issue-files,
body[data-theme="light"] .cashflow-issue-audit {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .cashflow-statement-file {
    color: var(--text);
    background: rgba(8, 127, 192, 0.08);
    border-color: rgba(8, 127, 192, 0.18);
}

body[data-theme="light"] .statement-file-reader-close {
    color: #5c6b7e;
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(29, 45, 80, 0.14);
}

body[data-theme="light"] .statement-preview-panel,
body[data-theme="light"] .statement-preview-scroll {
    background: rgba(255, 255, 255, 0.76);
    border-color: rgba(29, 45, 80, 0.12);
}

body[data-theme="light"] .statement-preview-table th {
    color: var(--text);
    background: #eef3fb;
}

body[data-theme="light"] .statement-preview-row.ok {
    background: rgba(20, 148, 109, 0.09);
}

body[data-theme="light"] .statement-preview-row.bad {
    background: rgba(198, 56, 86, 0.1);
}

body[data-theme="light"] .statement-preview-row.warn {
    background: rgba(199, 109, 18, 0.11);
}

body[data-theme="light"] .statement-preview-status.bad {
    color: #ffffff;
    background: #c63856;
}

body[data-theme="light"] .ledger-table tr.signed {
    background: rgba(8, 127, 192, 0.1);
}

body[data-theme="light"] .ledger-table tr.revision-row {
    background: rgba(199, 109, 18, 0.12);
}

body[data-theme="light"] .daily-report-cash-mismatch,
body[data-theme="light"] .warning-tile {
    background: rgba(199, 109, 18, 0.12) !important;
    border-color: rgba(199, 109, 18, 0.34) !important;
}

body[data-theme="light"] .ledger-table input.daily-report-cash-pending {
    color: #8a570b;
    background: rgba(242, 193, 94, 0.18);
    border-color: rgba(199, 109, 18, 0.36);
}

body[data-theme="light"] .ledger-week-lock-panel {
    background: rgba(45, 189, 120, 0.08);
    border-color: rgba(45, 189, 120, 0.22);
}

body[data-theme="light"] .ledger-week-lock-panel.warn {
    background: rgba(242, 193, 94, 0.14);
    border-color: rgba(199, 109, 18, 0.24);
}

body[data-theme="light"] .ledger-week-lock-panel.bad {
    background: rgba(212, 77, 104, 0.1);
    border-color: rgba(212, 77, 104, 0.22);
}

body[data-theme="light"] .ledger-table tr.week-locked input {
    color: #5f6878;
    background: rgba(212, 77, 104, 0.08);
    border-color: rgba(212, 77, 104, 0.18);
}

body[data-theme="light"] .ledger-issue-panel {
    background: rgba(199, 109, 18, 0.08);
    border-color: rgba(199, 109, 18, 0.2);
}

body[data-theme="light"] .ledger-issue-panel small {
    color: #5f6878;
}

body[data-theme="light"] .ledger-issue-status.good {
    color: #126a42;
    background: rgba(45, 189, 120, 0.14);
}

body[data-theme="light"] .ledger-issue-status.warn {
    color: #8a570b;
    background: rgba(242, 193, 94, 0.2);
}

body[data-theme="light"] .ledger-issue-status.bad {
    color: #9b243d;
    background: rgba(212, 77, 104, 0.14);
}

body[data-theme="light"] .sign-button,
body[data-theme="light"] .icon-action,
body[data-theme="light"] .ghost-icon-button,
body[data-theme="light"] .user-menu-button,
body[data-theme="light"] .support-chat-button {
    color: var(--text);
    background: #ffffff;
    border-color: var(--line);
}

body[data-theme="light"] .tab-button {
    color: #566276;
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--line-soft);
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    border-color: rgba(35, 84, 215, 0.3);
}

body[data-theme="light"] .theme-toggle {
    background: #eef3fb;
    border-color: var(--line);
}

body[data-theme="light"] .theme-choice input:checked + span {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ai-cyan), var(--accent));
    box-shadow: 0 10px 22px rgba(35, 84, 215, 0.18);
}

/* Compact report workspace for laptop/desktop at 100% browser zoom. */
@media (min-width: 761px) {
    @supports selector(body:has(.tab-panel.active)) {
        body:has([data-panel="daily-report"].active) .app-shell {
            width: min(1680px, 100%);
            padding: 16px clamp(10px, 2vw, 24px) 32px;
        }

        body:has([data-panel="daily-report"].active) .app-tabs {
            gap: 6px;
            margin-bottom: 12px;
        }

        body:has([data-panel="daily-report"].active) .tab-button {
            min-height: 34px;
            padding: 0 12px;
            font-size: 12px;
        }
    }

    [data-panel="daily-report"] .daily-report-toolbar {
        grid-template-columns: minmax(128px, 190px) minmax(380px, 1fr) minmax(280px, auto) auto;
        gap: 8px;
        margin-bottom: 8px;
    }

    [data-panel="daily-report"] .toolbar label {
        gap: 4px;
        font-size: 10px;
    }

    [data-panel="daily-report"] .toolbar input,
    [data-panel="daily-report"] .toolbar select {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12px;
    }

    [data-panel="daily-report"] .daily-date-picker {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 7px;
    }

    [data-panel="daily-report"] .daily-date-chip {
        flex-basis: 44px;
        min-height: 34px;
    }

    [data-panel="daily-report"] .daily-date-scroll-button {
        width: 28px;
        min-height: 34px;
    }

    [data-panel="daily-report"] .status-pill {
        min-height: 32px;
        padding: 0 10px;
        font-size: 11px;
    }

    [data-panel="daily-report"] .daily-entry-sheet {
        gap: 10px;
    }

    [data-panel="daily-report"] .daily-entry-title {
        gap: 10px;
        padding: 10px 12px;
    }

    [data-panel="daily-report"] .daily-entry-title h2 {
        font-size: 16px;
    }

    [data-panel="daily-report"] .daily-entry-title p {
        gap: 8px;
        margin-top: 4px;
        font-size: 10px;
    }

    [data-panel="daily-report"] .daily-total-strip {
        grid-template-columns: repeat(3, minmax(112px, 1fr));
        gap: 6px;
        min-width: min(430px, 100%);
    }

    [data-panel="daily-report"] .daily-total-strip div {
        gap: 3px;
        padding: 8px 10px;
    }

    [data-panel="daily-report"] .daily-total-strip span {
        font-size: 9px;
    }

    [data-panel="daily-report"] .daily-total-strip strong {
        font-size: 15px;
    }

    [data-panel="daily-report"] .daily-excel-panel {
        border-radius: 8px;
        box-shadow: 0 14px 42px var(--shadow);
    }

    [data-panel="daily-report"] .daily-section-title {
        gap: 8px;
        padding: 8px 10px;
    }

    [data-panel="daily-report"] .daily-section-title h3 {
        font-size: 14px;
    }

    [data-panel="daily-report"] .daily-section-title span {
        font-size: 10px;
    }

    [data-panel="daily-report"] .daily-section-grid {
        grid-template-columns: minmax(470px, 1.28fr) minmax(250px, 0.72fr);
    }

    [data-panel="daily-report"] .daily-input-table {
        font-size: 11px;
    }

    [data-panel="daily-report"] .daily-financial-service-table {
        min-width: 920px;
    }

    [data-panel="daily-report"] .daily-other-primary-table,
    [data-panel="daily-report"] .daily-other-secondary-table {
        min-width: 1040px;
    }

    [data-panel="daily-report"] .daily-card-table {
        min-width: 470px;
    }

    [data-panel="daily-report"] .daily-card-settlement-panel {
        min-width: 470px;
        gap: 7px;
        padding: 8px;
    }

    [data-panel="daily-report"] .daily-card-settlement-metrics {
        grid-template-columns: repeat(5, minmax(70px, 1fr));
        gap: 5px;
    }

    [data-panel="daily-report"] .daily-card-settlement-metrics div {
        padding: 6px;
    }

    [data-panel="daily-report"] .daily-card-settlement-metrics span,
    [data-panel="daily-report"] .daily-card-settlement-item p,
    [data-panel="daily-report"] .daily-card-settlement-item small,
    [data-panel="daily-report"] .daily-card-settlement-item dt {
        font-size: 9px;
    }

    [data-panel="daily-report"] .daily-card-settlement-metrics strong,
    [data-panel="daily-report"] .daily-card-settlement-item strong {
        font-size: 10px;
    }

    [data-panel="daily-report"] .daily-card-settlement-item {
        gap: 5px;
        padding: 7px;
    }

    [data-panel="daily-report"] .daily-card-settlement-item dd {
        font-size: 9px;
    }

    [data-panel="daily-report"] .daily-cash-count-table {
        min-width: 250px;
    }

    [data-panel="daily-report"] .daily-input-table th,
    [data-panel="daily-report"] .daily-input-table td {
        height: 28px;
        padding: 4px 5px;
    }

    [data-panel="daily-report"] .daily-input-table th {
        font-size: 10px;
        line-height: 1.15;
    }

    [data-panel="daily-report"] .daily-input-table thead tr:first-child th {
        font-size: 11px;
    }

    [data-panel="daily-report"] .daily-input-table input {
        min-height: 26px;
        padding: 3px 5px;
        font-size: 11px;
    }

    [data-panel="daily-report"] .daily-input-table th:first-child,
    [data-panel="daily-report"] .daily-input-table td:first-child {
        width: 34px;
    }

    [data-panel="daily-report"] .daily-input-table .row-number {
        min-width: 20px;
        padding: 0 3px;
    }

    [data-panel="daily-report"] .daily-report-sign-button {
        width: 34px;
        height: 34px;
    }

    [data-panel="daily-report"] .daily-sign-control {
        gap: 7px;
        align-items: center;
    }

    [data-panel="daily-report"] .daily-sign-note {
        max-width: none;
        font-size: 9px;
    }

    [data-panel="daily-report"] .cash-count-grid {
        gap: 8px;
        padding: 8px;
    }

    [data-panel="daily-report"] .cash-count-card {
        gap: 7px;
        padding: 8px;
    }

    [data-panel="daily-report"] .cash-count-heading h3 {
        font-size: 13px;
    }

    [data-panel="daily-report"] .cash-count-heading span,
    [data-panel="daily-report"] .cash-count-totals span,
    [data-panel="daily-report"] .cash-count-denominations span {
        font-size: 10px;
    }
}

/* Polished light-theme navigation surfaces. */
body[data-theme="light"] .app-tabs {
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(29, 45, 80, 0.12);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(24, 36, 66, 0.08);
}

body[data-theme="light"] .tab-button {
    color: #4e5c72;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible {
    color: #1647b8;
    background: #eef5ff;
    border-color: rgba(35, 84, 215, 0.18);
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #123f9f;
    background: linear-gradient(180deg, #edf5ff 0%, #dfeeff 100%);
    border-color: rgba(35, 84, 215, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 10px 22px rgba(35, 84, 215, 0.1);
}

body[data-theme="light"] .staff-side-rail {
    color: #566276;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(29, 45, 80, 0.14);
    box-shadow: 0 18px 42px rgba(24, 36, 66, 0.1);
}

body[data-theme="light"] .staff-rail-brand {
    color: #172033;
}

body[data-theme="light"] .staff-rail-brand small {
    color: #69758a;
}

body[data-theme="light"] .staff-rail-link {
    color: #526178;
    background: transparent;
    border-color: transparent;
}

body[data-theme="light"] .staff-rail-link:hover,
body[data-theme="light"] .staff-rail-link:focus-visible,
body[data-theme="light"] .staff-rail-link.active {
    color: #123f9f;
    background: #edf5ff;
    border-color: rgba(35, 84, 215, 0.18);
}

body[data-theme="light"] .staff-rail-logo,
body[data-theme="light"] .brand-mark {
    color: #ffffff;
    background: linear-gradient(135deg, #087fc0, #2354d7);
}

body[data-theme="light"] .mobile-bottom-tabs {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: rgba(29, 45, 80, 0.14);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 -14px 34px rgba(24, 36, 66, 0.12);
}

body[data-theme="light"] .mobile-bottom-tabs .tab-button {
    color: #627086;
    background: transparent;
    border: 1px solid transparent;
}

body[data-theme="light"] .mobile-bottom-tabs .tab-button:hover,
body[data-theme="light"] .mobile-bottom-tabs .tab-button:focus-visible {
    color: #1647b8;
    background: #eef5ff;
    border-color: rgba(35, 84, 215, 0.16);
}

/* High-contrast light navigation pass. Keep every tab surface bright and readable. */
body[data-theme="light"] .app-tabs:not(.mobile-bottom-tabs) {
    gap: 8px;
    padding: 7px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
    border: 1px solid rgba(29, 45, 80, 0.13);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(24, 36, 66, 0.08);
}

body[data-theme="light"] .tab-button,
body[data-theme="light"] .tab-button.secondary-tab {
    color: #243149;
    background: #ffffff;
    border: 1px solid rgba(29, 45, 80, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible {
    color: #103f9d;
    background: #edf5ff;
    border-color: rgba(35, 84, 215, 0.24);
    box-shadow: 0 8px 18px rgba(35, 84, 215, 0.1);
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #ffffff;
    background: linear-gradient(135deg, #087fc0 0%, #2354d7 100%);
    border-color: rgba(35, 84, 215, 0.42);
    box-shadow: 0 12px 24px rgba(35, 84, 215, 0.18);
}

body[data-theme="light"] .tab-button .tab-icon svg,
body[data-theme="light"] .mobile-bottom-tabs .tab-icon svg {
    stroke: currentColor;
}

body[data-theme="light"] .mobile-bottom-tabs {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: rgba(29, 45, 80, 0.16);
    box-shadow: 0 -14px 34px rgba(24, 36, 66, 0.14);
}

body[data-theme="light"] .mobile-bottom-tabs .tab-button {
    color: #2f3d55;
    background: #f7faff;
    border: 1px solid rgba(29, 45, 80, 0.1);
}

body[data-theme="light"] .mobile-bottom-tabs .tab-button:hover,
body[data-theme="light"] .mobile-bottom-tabs .tab-button:focus-visible {
    color: #103f9d;
    background: #edf5ff;
    border-color: rgba(35, 84, 215, 0.22);
}

body[data-theme="light"] .staff-side-rail {
    color: #263348;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fd 100%);
    border-color: rgba(29, 45, 80, 0.14);
    box-shadow: 0 18px 42px rgba(24, 36, 66, 0.12);
}

body[data-theme="light"] .staff-rail-brand {
    color: #162033;
}

body[data-theme="light"] .staff-rail-brand small {
    color: #566276;
}

body[data-theme="light"] .staff-rail-link {
    color: #263348;
    background: #ffffff;
    border-color: rgba(29, 45, 80, 0.1);
}

body[data-theme="light"] .staff-rail-link:hover,
body[data-theme="light"] .staff-rail-link:focus-visible {
    color: #103f9d;
    background: #edf5ff;
    border-color: rgba(35, 84, 215, 0.24);
}

body[data-theme="light"] .staff-rail-link.active {
    color: #ffffff;
    background: linear-gradient(135deg, #087fc0 0%, #2354d7 100%);
    border-color: rgba(35, 84, 215, 0.42);
    box-shadow: 0 10px 22px rgba(35, 84, 215, 0.18);
}

body[data-theme="light"] .segmented-control,
body[data-theme="light"] .theme-toggle {
    background: #eef3fb;
    border-color: rgba(29, 45, 80, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

body[data-theme="light"] .segmented-control button,
body[data-theme="light"] .theme-choice span {
    color: #263348;
}

body[data-theme="light"] .segmented-control button:hover,
body[data-theme="light"] .segmented-control button:focus-visible,
body[data-theme="light"] .theme-choice input:focus-visible + span {
    color: #103f9d;
    background: #ffffff;
}

body[data-theme="light"] .segmented-control button.active,
body[data-theme="light"] .theme-choice input:checked + span {
    color: #ffffff;
    background: linear-gradient(135deg, #087fc0 0%, #2354d7 100%);
    border-color: rgba(35, 84, 215, 0.36);
    box-shadow: 0 8px 18px rgba(35, 84, 215, 0.16);
}

body[data-theme="light"] .user-menu-item {
    color: #263348;
}

body[data-theme="light"] .user-menu-item:hover,
body[data-theme="light"] .user-menu-item:focus {
    color: #ffffff;
    background: #2354d7;
}

/* Auto-collapsing desktop side rail. */
@media (min-width: 1121px) {
    .app-shell[data-user-role="staff"],
    .app-shell[data-user-role="accountant"] {
        transition: padding-left 0.24s ease;
    }

    .staff-side-rail {
        transition:
            left 0.24s ease,
            width 0.24s ease,
            padding 0.24s ease,
            box-shadow 0.24s ease;
    }

    .staff-rail-brand div,
    .staff-rail-link > span:last-child {
        min-width: 0;
        transition:
            max-width 0.2s ease,
            opacity 0.16s ease;
    }

    body.side-rail-collapsed .app-shell[data-user-role="staff"],
    body.side-rail-collapsed .app-shell[data-user-role="accountant"] {
        padding-left: 88px;
    }

    body.side-rail-collapsed .staff-side-rail {
        left: max(8px, env(safe-area-inset-left, 0px));
        width: 58px;
        align-items: center;
        padding: 10px 8px;
        overflow: hidden;
    }

    body.side-rail-collapsed .staff-rail-brand {
        width: 100%;
        justify-content: center;
        gap: 0;
    }

    body.side-rail-collapsed .staff-rail-brand div,
    body.side-rail-collapsed .staff-rail-link > span:last-child {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        white-space: nowrap;
    }

    body.side-rail-collapsed .staff-rail-link {
        width: 42px;
        justify-content: center;
        gap: 0;
        padding: 0;
    }

    body.side-rail-collapsed .staff-side-rail:hover,
    body.side-rail-collapsed .staff-side-rail:focus-within {
        left: 16px;
        width: 188px;
        align-items: stretch;
        padding: 14px;
        overflow: visible;
        box-shadow: 0 26px 74px rgba(0, 0, 0, 0.3);
    }

    body.side-rail-collapsed .staff-side-rail:hover .staff-rail-brand,
    body.side-rail-collapsed .staff-side-rail:focus-within .staff-rail-brand {
        justify-content: flex-start;
        gap: 10px;
    }

    body.side-rail-collapsed .staff-side-rail:hover .staff-rail-brand div,
    body.side-rail-collapsed .staff-side-rail:focus-within .staff-rail-brand div,
    body.side-rail-collapsed .staff-side-rail:hover .staff-rail-link > span:last-child,
    body.side-rail-collapsed .staff-side-rail:focus-within .staff-rail-link > span:last-child {
        max-width: 132px;
        opacity: 1;
        pointer-events: auto;
    }

    body.side-rail-collapsed .staff-side-rail:hover .staff-rail-link,
    body.side-rail-collapsed .staff-side-rail:focus-within .staff-rail-link {
        width: 100%;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 10px;
    }
}

/* White-blue light theme inspired by clean analytics dashboards. */
body[data-theme="light"] {
    --bg: #e9eef5;
    --panel: #ffffff;
    --panel-strong: #f5f8fd;
    --line: rgba(33, 50, 82, 0.13);
    --line-soft: rgba(33, 50, 82, 0.08);
    --text: #162033;
    --muted: #6f7a8c;
    --accent: #2f80ed;
    --accent-soft: rgba(47, 128, 237, 0.12);
    --warning: #bc7117;
    --danger: #c8455f;
    --input: #ffffff;
    --shadow: rgba(48, 67, 102, 0.14);
    --ai-cyan: #2f80ed;
    --ai-teal: #2dbd78;
    --ai-orange: #d98621;
    --ai-green: #28a764;
    --ai-rose: #d44d68;
    background: #e9eef5 !important;
    color: var(--text);
}

body[data-theme="light"] .app-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
    box-shadow: 0 16px 42px rgba(48, 67, 102, 0.1) !important;
}

body[data-theme="light"] .app-shell {
    color: var(--text);
}

body[data-theme="light"] .login-panel,
body[data-theme="light"] .ledger-panel,
body[data-theme="light"] .cashflow-panel,
body[data-theme="light"] .daily-entry-title,
body[data-theme="light"] .daily-excel-panel,
body[data-theme="light"] .employee-form,
body[data-theme="light"] .employee-list-panel,
body[data-theme="light"] .settings-form,
body[data-theme="light"] .reminder-form,
body[data-theme="light"] .reminder-board,
body[data-theme="light"] .transfer-form,
body[data-theme="light"] .transfer-board,
body[data-theme="light"] .attendance-clock-panel,
body[data-theme="light"] .attendance-report-panel,
body[data-theme="light"] .attendance-table-card,
body[data-theme="light"] .attendance-calendar-panel,
body[data-theme="light"] .photo-report-form,
body[data-theme="light"] .photo-report-board,
body[data-theme="light"] .staff-dashboard-head,
body[data-theme="light"] .staff-panel,
body[data-theme="light"] .sales-panel,
body[data-theme="light"] .sales-detail-card,
body[data-theme="light"] .salary-summary-card,
body[data-theme="light"] .stock-request-form,
body[data-theme="light"] .stock-request-board,
body[data-theme="light"] .quick-access-panel,
body[data-theme="light"] .placeholder-panel,
body[data-theme="light"] .support-chat-panel,
body[data-theme="light"] .sign-dialog,
body[data-theme="light"] .deposit-dialog,
body[data-theme="light"] .transfer-qr-dialog-body,
body[data-theme="light"] .attendance-photo-dialog-body,
body[data-theme="light"] .attendance-gps-map-frame,
body[data-theme="light"] .attendance-gps-dialog-body iframe,
body[data-theme="light"] .attendance-gps-history button,
body[data-theme="light"] .photo-report-dialog-body {
    color: var(--text) !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
    box-shadow: 0 18px 46px rgba(48, 67, 102, 0.12) !important;
}

body[data-theme="light"] .toolbar,
body[data-theme="light"] .cashflow-toolbar,
body[data-theme="light"] .daily-report-toolbar,
body[data-theme="light"] .overview-hero,
body[data-theme="light"] .profile-summary,
body[data-theme="light"] .employee-edit-dialog form,
body[data-theme="light"] .notification-popover,
body[data-theme="light"] .user-menu-popover,
body[data-theme="light"] .summary-tile,
body[data-theme="light"] .deposit-period-summary div,
body[data-theme="light"] .ai-metric-card,
body[data-theme="light"] .channel-card,
body[data-theme="light"] .quick-access-card,
body[data-theme="light"] .reminder-card,
body[data-theme="light"] .transfer-card,
body[data-theme="light"] .stock-request-card,
body[data-theme="light"] .attendance-request-card,
body[data-theme="light"] .photo-report-card,
body[data-theme="light"] .deposit-gallery figure,
body[data-theme="light"] .table-scroll,
body[data-theme="light"] .staff-kpi-card,
body[data-theme="light"] .staff-task-list button,
body[data-theme="light"] .staff-product-row,
body[data-theme="light"] .staff-target-meta div,
body[data-theme="light"] .salary-formula-line,
body[data-theme="light"] .salary-criterion-row,
body[data-theme="light"] .salary-bonus-row,
body[data-theme="light"] .salary-empty-row,
body[data-theme="light"] .salary-bonus-note {
    color: var(--text) !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.09) !important;
    box-shadow: 0 10px 26px rgba(48, 67, 102, 0.07) !important;
}

body[data-theme="light"] .app-tabs:not(.mobile-bottom-tabs),
body[data-theme="light"] .staff-side-rail {
    background: #f6f8fc !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
    box-shadow: 0 22px 54px rgba(48, 67, 102, 0.12) !important;
}

body[data-theme="light"] .tab-button,
body[data-theme="light"] .tab-button.secondary-tab,
body[data-theme="light"] .staff-rail-link {
    color: #6f7a8c !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible,
body[data-theme="light"] .staff-rail-link:hover,
body[data-theme="light"] .staff-rail-link:focus-visible {
    color: #1b5fbd !important;
    background: #edf4ff !important;
    border-color: rgba(47, 128, 237, 0.14) !important;
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .staff-rail-link.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #16324f !important;
    background: #ffffff !important;
    border-color: rgba(47, 128, 237, 0.18) !important;
    box-shadow: 0 10px 24px rgba(48, 67, 102, 0.09) !important;
}

body[data-theme="light"] .tab-button.active .tab-icon,
body[data-theme="light"] .staff-rail-link.active .staff-rail-icon {
    color: #2f80ed !important;
}

body[data-theme="light"] .mobile-bottom-tabs {
    background: #ffffff !important;
    border-top-color: rgba(33, 50, 82, 0.12) !important;
    box-shadow: 0 -14px 34px rgba(48, 67, 102, 0.12) !important;
}

body[data-theme="light"] .mobile-bottom-tabs .tab-button {
    color: #6f7a8c !important;
    background: transparent !important;
    border-color: transparent !important;
}

body[data-theme="light"] .segmented-control,
body[data-theme="light"] .theme-toggle {
    background: #edf2f8 !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

body[data-theme="light"] .segmented-control button,
body[data-theme="light"] .theme-choice span {
    color: #6f7a8c !important;
}

body[data-theme="light"] .segmented-control button.active,
body[data-theme="light"] .theme-choice input:checked + span {
    color: #16324f !important;
    background: #ffffff !important;
    border-color: rgba(47, 128, 237, 0.18) !important;
    box-shadow: 0 6px 16px rgba(48, 67, 102, 0.08) !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea,
body[data-theme="light"] .daily-input-table input {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.14) !important;
}

body[data-theme="light"] .ledger-table th,
body[data-theme="light"] .employee-table th,
body[data-theme="light"] .crosscheck-table th,
body[data-theme="light"] .attendance-table th,
body[data-theme="light"] .daily-excel-table th,
body[data-theme="light"] .cashflow-table th {
    color: #516073 !important;
    background: #f3f7fc !important;
    border-color: rgba(33, 50, 82, 0.1) !important;
}

body[data-theme="light"] .ledger-table tr,
body[data-theme="light"] .employee-table tr,
body[data-theme="light"] .crosscheck-table tr,
body[data-theme="light"] .attendance-table tr,
body[data-theme="light"] .daily-excel-table tr,
body[data-theme="light"] .cashflow-table tr {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.08) !important;
}

body[data-theme="light"] .status-pill,
body[data-theme="light"] .status-tag,
body[data-theme="light"] .user-menu-item,
body[data-theme="light"] .ghost-button,
body[data-theme="light"] .icon-action,
body[data-theme="light"] .sign-button,
body[data-theme="light"] .ghost-icon-button,
body[data-theme="light"] .user-menu-button,
body[data-theme="light"] .support-chat-button {
    color: #233044 !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.12) !important;
}

body[data-theme="light"] .ai-review-heading,
body[data-theme="light"] .ai-review-list-panel,
body[data-theme="light"] .ai-review-detail-panel,
body[data-theme="light"] .ai-review-card,
body[data-theme="light"] .ai-review-empty,
body[data-theme="light"] .ai-review-detail-body section,
body[data-theme="light"] .ai-review-detail-meta div,
body[data-theme="light"] .ai-review-key-values div,
body[data-theme="light"] .ai-review-empty-inline,
body[data-theme="light"] .secondary-button {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: rgba(33, 50, 82, 0.12) !important;
}

body[data-theme="light"] .ai-review-card small,
body[data-theme="light"] .ai-review-card em,
body[data-theme="light"] .ai-review-detail-body p,
body[data-theme="light"] .ai-review-detail-body li,
body[data-theme="light"] .ai-review-detail-empty span,
body[data-theme="light"] .ai-review-detail-meta span,
body[data-theme="light"] .ai-review-key-values span,
body[data-theme="light"] .ai-review-note span {
    color: #687789 !important;
}

body[data-theme="light"] .primary-button,
body[data-theme="light"] .login-form button {
    color: #ffffff !important;
    background: #2f80ed !important;
}

/* Stronger light contrast: white cards, navy text, blue active zones with white text. */
body[data-theme="light"] {
    --bg: #edf2f8;
    --panel: #ffffff;
    --panel-strong: #f5f8fc;
    --text: #0f233d;
    --muted: #687789;
    --accent: #2f80ed;
    --accent-soft: rgba(47, 128, 237, 0.14);
    --line: rgba(38, 56, 86, 0.14);
    --line-soft: rgba(38, 56, 86, 0.08);
    background: #edf2f8 !important;
}

body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] .brand-line h1,
body[data-theme="light"] .panel-heading h2,
body[data-theme="light"] .daily-entry-title h2,
body[data-theme="light"] .quick-access-panel h2,
body[data-theme="light"] .staff-dashboard-head h2,
body[data-theme="light"] .staff-panel-title h3,
body[data-theme="light"] .summary-tile strong,
body[data-theme="light"] .daily-report-title strong,
body[data-theme="light"] .employee-name-line strong {
    color: #0f233d !important;
}

body[data-theme="light"] label,
body[data-theme="light"] .mode-field,
body[data-theme="light"] .summary-tile span,
body[data-theme="light"] .deposit-period-summary span,
body[data-theme="light"] .staff-panel-title span,
body[data-theme="light"] .staff-kpi-card span,
body[data-theme="light"] .staff-kpi-card small,
body[data-theme="light"] .daily-sign-note,
body[data-theme="light"] .notification-popover-title span {
    color: #687789 !important;
}

body[data-theme="light"] .app-tabs:not(.mobile-bottom-tabs),
body[data-theme="light"] .staff-side-rail,
body[data-theme="light"] .mobile-bottom-tabs {
    background: #f7f9fc !important;
}

body[data-theme="light"] .tab-button,
body[data-theme="light"] .tab-button.secondary-tab,
body[data-theme="light"] .staff-rail-link,
body[data-theme="light"] .mobile-bottom-tabs .tab-button {
    color: #536174 !important;
    background: transparent !important;
    border-color: transparent !important;
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible,
body[data-theme="light"] .staff-rail-link:hover,
body[data-theme="light"] .staff-rail-link:focus-visible,
body[data-theme="light"] .mobile-bottom-tabs .tab-button:hover,
body[data-theme="light"] .mobile-bottom-tabs .tab-button:focus-visible {
    color: #155fbd !important;
    background: #e8f1ff !important;
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .staff-rail-link.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active,
body[data-theme="light"] .segmented-control button.active,
body[data-theme="light"] .theme-choice input:checked + span,
body[data-theme="light"] .status-tag.good,
body[data-theme="light"] .status-tag.bad,
body[data-theme="light"] .status-tag.warn,
body[data-theme="light"] .sign-button.signed,
body[data-theme="light"] .primary-button,
body[data-theme="light"] .login-form button,
body[data-theme="light"] .user-menu-item:hover,
body[data-theme="light"] .user-menu-item:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f80ed 0%, #1f67cf 100%) !important;
    border-color: rgba(31, 103, 207, 0.42) !important;
    box-shadow: 0 12px 26px rgba(47, 128, 237, 0.22) !important;
}

body[data-theme="light"] .tab-button.active *,
body[data-theme="light"] .staff-rail-link.active *,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active *,
body[data-theme="light"] .segmented-control button.active *,
body[data-theme="light"] .primary-button *,
body[data-theme="light"] .sign-button.signed * {
    color: #ffffff !important;
    stroke: currentColor !important;
}

body[data-theme="light"] .brand-mark,
body[data-theme="light"] .staff-rail-logo,
body[data-theme="light"] .support-chat-button {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f80ed 0%, #1f67cf 100%) !important;
}

body[data-theme="light"] .ledger-panel,
body[data-theme="light"] .cashflow-panel,
body[data-theme="light"] .daily-entry-title,
body[data-theme="light"] .daily-excel-panel,
body[data-theme="light"] .employee-form,
body[data-theme="light"] .employee-list-panel,
body[data-theme="light"] .settings-form,
body[data-theme="light"] .transfer-form,
body[data-theme="light"] .transfer-board,
body[data-theme="light"] .attendance-clock-panel,
body[data-theme="light"] .attendance-report-panel,
body[data-theme="light"] .attendance-table-card,
body[data-theme="light"] .attendance-calendar-panel,
body[data-theme="light"] .photo-report-form,
body[data-theme="light"] .photo-report-board,
body[data-theme="light"] .summary-tile,
body[data-theme="light"] .toolbar,
body[data-theme="light"] .table-scroll,
body[data-theme="light"] .quick-access-card,
body[data-theme="light"] .transfer-card,
body[data-theme="light"] .photo-report-card,
body[data-theme="light"] .stock-request-card {
    background: #ffffff !important;
    color: #0f233d !important;
}

body[data-theme="light"] .ledger-table th,
body[data-theme="light"] .employee-table th,
body[data-theme="light"] .crosscheck-table th,
body[data-theme="light"] .attendance-table th,
body[data-theme="light"] .daily-excel-table th,
body[data-theme="light"] .cashflow-table th {
    color: #0f233d !important;
    background: #eef4fb !important;
}

/* Cashflow tab hard reset for light mode: no dark rows with dark text. */
body[data-theme="light"] [data-panel="cashflow"],
body[data-theme="light"] [data-panel="cashflow"] .cashflow-panel,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-layout,
body[data-theme="light"] [data-panel="cashflow"] .table-scroll,
body[data-theme="light"] [data-panel="cashflow"] .statement-period-list,
body[data-theme="light"] [data-panel="cashflow"] .statement-filter-bar {
    color: #0f233d !important;
    background: #ffffff !important;
    border-color: rgba(38, 56, 86, 0.1) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .panel-heading {
    color: #0f233d !important;
    background: #f3f7fc !important;
    border-color: rgba(38, 56, 86, 0.1) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .panel-heading h2,
body[data-theme="light"] [data-panel="cashflow"] .account-cell strong,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-copy strong,
body[data-theme="light"] [data-panel="cashflow"] .service-control-main strong,
body[data-theme="light"] [data-panel="cashflow"] .service-unknown-heading strong,
body[data-theme="light"] [data-panel="cashflow"] .service-control-item strong,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-heading strong,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-panel > strong,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-heading strong,
body[data-theme="light"] [data-panel="cashflow"] .money-cell {
    color: #0f233d !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-cell span,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-copy span,
body[data-theme="light"] [data-panel="cashflow"] .statement-period-card span,
body[data-theme="light"] [data-panel="cashflow"] .statement-period-card small,
body[data-theme="light"] [data-panel="cashflow"] .statement-filter-bar label,
body[data-theme="light"] [data-panel="cashflow"] .service-control-note label,
body[data-theme="light"] [data-panel="cashflow"] .service-control-note-actions small,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-heading span,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-row small,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-heading span,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-counts,
body[data-theme="light"] [data-panel="cashflow"] .empty-cell,
body[data-theme="light"] [data-panel="cashflow"] .empty-inline {
    color: #5c6b7e !important;
}

body[data-theme="light"] [data-panel="cashflow"] .crosscheck-table,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-table,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-table {
    color: #0f233d !important;
    background: #ffffff !important;
}

body[data-theme="light"] [data-panel="cashflow"] .crosscheck-table th,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-table th,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-table th {
    color: #0f233d !important;
    background: #eef4fb !important;
    border-color: rgba(38, 56, 86, 0.12) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .crosscheck-table td,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-table td,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-table td {
    color: #0f233d !important;
    background: #ffffff !important;
    border-color: rgba(38, 56, 86, 0.08) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-row td:first-child {
    background: #ffffff !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row td {
    color: #0f233d !important;
    background: #f5f8fc !important;
    border-color: rgba(38, 56, 86, 0.08) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-card,
body[data-theme="light"] [data-panel="cashflow"] .statement-period-card,
body[data-theme="light"] [data-panel="cashflow"] .service-control-card,
body[data-theme="light"] [data-panel="cashflow"] .service-control-details details,
body[data-theme="light"] [data-panel="cashflow"] .service-control-item,
body[data-theme="light"] [data-panel="cashflow"] .service-unknown-panel,
body[data-theme="light"] [data-panel="cashflow"] .service-unknown-row,
body[data-theme="light"] [data-panel="cashflow"] .service-unknown-steps span,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-panel,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-panel,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-scroll,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-scroll,
body[data-theme="light"] [data-panel="cashflow"] .statement-original-embed,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-metrics span,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-detail-list div,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-files,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-audit {
    color: #0f233d !important;
    background: #ffffff !important;
    border-color: rgba(38, 56, 86, 0.1) !important;
    box-shadow: 0 8px 20px rgba(48, 67, 102, 0.05) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-service-accountant .account-flow-group-card {
    border-left-color: #2dbd78 !important;
    background: linear-gradient(135deg, rgba(45, 189, 120, 0.11), #ffffff 56%) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-service-source .account-flow-group-card,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-cash_deposit .account-flow-group-card {
    border-left-color: #d98621 !important;
    background: linear-gradient(135deg, rgba(217, 134, 33, 0.11), #ffffff 56%) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-installment .account-flow-group-card,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-card .account-flow-group-card {
    border-left-color: #2f80ed !important;
    background: linear-gradient(135deg, rgba(47, 128, 237, 0.1), #ffffff 56%) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-personal .account-flow-group-card,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row.group-hkd .account-flow-group-card {
    border-left-color: #12a1a6 !important;
    background: linear-gradient(135deg, rgba(18, 161, 166, 0.1), #ffffff 56%) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-totals span,
body[data-theme="light"] [data-panel="cashflow"] .service-control-metrics span,
body[data-theme="light"] [data-panel="cashflow"] .service-control-quick-metrics span {
    color: #5c6b7e !important;
    background: #f7faff !important;
    border-color: rgba(38, 56, 86, 0.1) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-totals b,
body[data-theme="light"] [data-panel="cashflow"] .service-control-metrics b,
body[data-theme="light"] [data-panel="cashflow"] .service-control-metrics em,
body[data-theme="light"] [data-panel="cashflow"] .service-control-quick-metrics span {
    color: #0f233d !important;
}

body[data-theme="light"] [data-panel="cashflow"] .service-control-card.good,
body[data-theme="light"] [data-panel="cashflow"] .service-control-card .good,
body[data-theme="light"] [data-panel="cashflow"] .service-control-quick-metrics .good,
body[data-theme="light"] [data-panel="cashflow"] .service-control-item.matched,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-row.ok,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-row.ok {
    background: rgba(45, 189, 120, 0.1) !important;
    border-color: rgba(45, 189, 120, 0.24) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .service-control-card.warn,
body[data-theme="light"] [data-panel="cashflow"] .service-control-quick-metrics .attention,
body[data-theme="light"] [data-panel="cashflow"] .service-control-item.attention,
body[data-theme="light"] [data-panel="cashflow"] .service-unknown-panel,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-row.warn,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-row.warn {
    background: rgba(217, 134, 33, 0.12) !important;
    border-color: rgba(217, 134, 33, 0.28) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .service-control-card.bad,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-row.bad,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-row.bad {
    background: rgba(212, 77, 104, 0.12) !important;
    border-color: rgba(212, 77, 104, 0.28) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .service-control-item.loan,
body[data-theme="light"] [data-panel="cashflow"] .service-control-item-summary {
    background: rgba(47, 128, 237, 0.1) !important;
    border-color: rgba(47, 128, 237, 0.22) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-button,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-file-button,
body[data-theme="light"] [data-panel="cashflow"] .cashflow-statement-file,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-original-link,
body[data-theme="light"] [data-panel="cashflow"] .service-control-toggle-button {
    color: #0f233d !important;
    background: #f7faff !important;
    border-color: rgba(38, 56, 86, 0.12) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-button.bad,
body[data-theme="light"] [data-panel="cashflow"] .status-tag.bad,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-status.bad {
    color: #ffffff !important;
    background: #d44d68 !important;
    border-color: #d44d68 !important;
}

body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-button.warn,
body[data-theme="light"] [data-panel="cashflow"] .status-tag.warn,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-status.warn {
    color: #2b2108 !important;
    background: #f2c15e !important;
    border-color: #f2c15e !important;
}

body[data-theme="light"] [data-panel="cashflow"] .cashflow-issue-button.good,
body[data-theme="light"] [data-panel="cashflow"] .status-tag.good,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-status.good {
    color: #ffffff !important;
    background: #1f9f62 !important;
    border-color: #1f9f62 !important;
}

body[data-theme="light"] [data-panel="cashflow"] .negative-money {
    color: #b12b48 !important;
    font-weight: 900;
}

body[data-theme="light"] [data-panel="cashflow"] .account-card-fee-line {
    color: #8a570b !important;
    background: rgba(217, 134, 33, 0.12) !important;
    border-color: rgba(217, 134, 33, 0.28) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-cell .account-cell-subnote {
    color: #0b5e91 !important;
    background: rgba(47, 128, 237, 0.1) !important;
    border-color: rgba(47, 128, 237, 0.22) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-cell .account-external-breakdown {
    color: #8a570b !important;
    background: rgba(217, 134, 33, 0.12) !important;
    border-color: rgba(217, 134, 33, 0.28) !important;
}

body[data-theme="light"] [data-panel="cashflow"] input,
body[data-theme="light"] [data-panel="cashflow"] select,
body[data-theme="light"] [data-panel="cashflow"] textarea {
    color: #0f233d !important;
    background: #ffffff !important;
    border-color: rgba(38, 56, 86, 0.14) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .crosscheck-table tr,
body[data-theme="light"] [data-panel="cashflow"] .account-flow-row {
    color: #0f233d !important;
    background: #ffffff !important;
    border-color: rgba(38, 56, 86, 0.08) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .account-flow-group-row {
    color: #0f233d !important;
    background: #f5f8fc !important;
    border-color: rgba(38, 56, 86, 0.08) !important;
}

body[data-theme="light"] [data-panel="cashflow"] .crosscheck-table td::before,
body[data-theme="light"] [data-panel="cashflow"] .statement-preview-table td::before,
body[data-theme="light"] [data-panel="cashflow"] .statement-file-reader-table td::before {
    color: #5c6b7e !important;
}

/* Global title bump: table headers, row labels, tabs and panel headings were too small. */
.tab-button,
.staff-rail-link,
.mobile-bottom-tabs .tab-button {
    font-size: 15px !important;
}

.panel-heading h2,
.daily-entry-title h2,
.daily-section-title h3,
.cash-count-heading h3,
.reminder-form h2,
.staff-panel-title h3,
.compact-heading h2 {
    font-size: calc(1em + 2px) !important;
}

.ledger-table th,
.employee-table th,
.crosscheck-table th,
.attendance-table th,
.daily-input-table th,
.daily-report-table th,
.reminder-table th,
.cashflow-table th {
    font-size: 13px !important;
}

.daily-input-table thead tr:first-child th {
    font-size: 16px !important;
}

.account-cell strong,
.account-flow-group-copy strong,
.service-control-main strong,
.service-unknown-heading strong,
.notification-copy strong,
.reminder-table td strong,
.daily-card-settlement-head strong {
    font-size: calc(1em + 2px) !important;
}

@media (max-width: 760px) {
    .ledger-table td::before,
    .employee-table td::before,
    .crosscheck-table td::before,
    .attendance-table td::before,
    .daily-input-table td::before,
    .reminder-table td::before {
        font-size: 13px !important;
    }
}

.panel-heading h2,
.reminder-form h2,
.compact-heading h2 {
    font-size: 20px !important;
}

.daily-entry-title h2 {
    font-size: 24px !important;
}

.daily-section-title h3 {
    font-size: 22px !important;
}

.cash-count-heading h3 {
    font-size: 17px !important;
}

.staff-panel-title h3 {
    font-size: 19px !important;
}

/* Mobile work assistant and attention routing */
.floating-quick-dock,
.admin-quick-dock {
    display: none !important;
}

.support-chat-button {
    position: relative;
}

.support-chat-button.has-critical {
    animation: bell-shake 1.15s ease-in-out infinite;
    border-color: rgba(255, 91, 122, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 91, 122, 0.14), 0 16px 38px rgba(34, 183, 255, 0.28);
}

.support-chat-button.has-alerts:not(.has-critical) {
    border-color: rgba(244, 161, 77, 0.68);
}

.support-attention-badge {
    position: absolute;
    top: -6px;
    right: -5px;
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    color: #ffffff;
    background: var(--ai-rose);
    border: 2px solid #070b22;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.support-attention-badge[hidden] {
    display: none !important;
}

.reminder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reminder-actions .ghost-button,
.reminder-actions .sign-button {
    min-height: 32px;
}

.reminder-focus-button {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .notification-menu {
        display: block !important;
        position: relative;
    }

    .support-chat-button {
        position: fixed;
        right: max(14px, env(safe-area-inset-right, 0px));
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
        z-index: 220;
        width: 54px !important;
        height: 54px !important;
        border-radius: 8px;
    }

    .support-chat-button svg {
        width: 24px;
        height: 24px;
    }

    .support-chat-panel {
        z-index: 230;
    }

    .support-error-card button,
    .reminder-actions .ghost-button,
    .reminder-actions .sign-button {
        width: 100%;
    }
}

/* Last light-mode override: keep mobile surfaces readable after legacy theme rules. */
body[data-theme="light"] {
    background: #edf2f7 !important;
    background-image: none !important;
}

body[data-theme="light"] .app-header,
body[data-theme="light"] .mobile-bottom-tabs,
body[data-theme="light"] .tab-button,
body[data-theme="light"] .ledger-panel,
body[data-theme="light"] .cashflow-panel,
body[data-theme="light"] .daily-entry-title,
body[data-theme="light"] .daily-excel-panel,
body[data-theme="light"] .settings-form,
body[data-theme="light"] .employee-form,
body[data-theme="light"] .employee-list-panel,
body[data-theme="light"] .reminder-form,
body[data-theme="light"] .reminder-board,
body[data-theme="light"] .transfer-form,
body[data-theme="light"] .transfer-board,
body[data-theme="light"] .attendance-clock-panel,
body[data-theme="light"] .attendance-report-panel,
body[data-theme="light"] .attendance-table-card,
body[data-theme="light"] .photo-report-form,
body[data-theme="light"] .photo-report-board,
body[data-theme="light"] .placeholder-panel {
    background: #ffffff !important;
    background-image: none !important;
    color: #162033 !important;
    border-color: #dce5ef !important;
    box-shadow: 0 10px 28px rgba(38, 61, 91, 0.07) !important;
}

body[data-theme="light"] .tab-button {
    color: #64748b !important;
    box-shadow: none !important;
}

body[data-theme="light"] .tab-button:hover,
body[data-theme="light"] .tab-button:focus-visible {
    color: #1d64c8 !important;
    background: #edf5ff !important;
}

body[data-theme="light"] .tab-button.active,
body[data-theme="light"] .mobile-bottom-tabs .tab-button.active {
    color: #ffffff !important;
    background: #2f80ed !important;
    background-image: none !important;
    border-color: #2f80ed !important;
}

body[data-theme="light"] .toolbar,
body[data-theme="light"] .cashflow-toolbar,
body[data-theme="light"] .daily-report-toolbar,
body[data-theme="light"] .panel-heading,
body[data-theme="light"] .daily-section-title,
body[data-theme="light"] .cash-count-heading,
body[data-theme="light"] .ledger-inline-actions,
body[data-theme="light"] .theme-toggle {
    background: #f4f7fb !important;
    background-image: none !important;
    color: #19324e !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #cddbe9 !important;
    color-scheme: light;
}

body[data-theme="light"] .ledger-table th,
body[data-theme="light"] .employee-table th,
body[data-theme="light"] .crosscheck-table th,
body[data-theme="light"] .attendance-table th,
body[data-theme="light"] .daily-input-table th,
body[data-theme="light"] .daily-report-table th,
body[data-theme="light"] .reminder-table th,
body[data-theme="light"] .cashflow-table th {
    color: #19324e !important;
    background: #eef4fb !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .ledger-table tbody tr,
body[data-theme="light"] .employee-table tbody tr,
body[data-theme="light"] .crosscheck-table tbody tr,
body[data-theme="light"] .attendance-table tbody tr,
body[data-theme="light"] .daily-report-table tbody tr,
body[data-theme="light"] .reminder-table tbody tr,
body[data-theme="light"] .cashflow-table tbody tr {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #e0e8f0 !important;
}

body[data-theme="light"] .notification-popover,
body[data-theme="light"] .support-chat-panel,
body[data-theme="light"] .user-menu-popover {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #d5e0eb !important;
}

body[data-theme="light"] .notification-popover-title,
body[data-theme="light"] .support-chat-head,
body[data-theme="light"] .support-chat-form,
body[data-theme="light"] .support-message.bot {
    color: #19324e !important;
    background: #f1f6fb !important;
    background-image: none !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .notification-item,
body[data-theme="light"] .notification-empty {
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .notification-item.high {
    background: #fff4f5 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .notification-item.medium {
    background: #fffaf0 !important;
    border-color: #efd39b !important;
}

body[data-theme="light"] .notification-filter-tabs button {
    color: #35506b !important;
    background: #f6f8fb !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .notification-filter-tabs button.active {
    color: #ffffff !important;
    background: #6c5f8d !important;
    border-color: #6c5f8d !important;
}

body[data-theme="light"] .notification-item.explanation {
    background: #f7f2fb !important;
    border-color: #c9b8d2 !important;
}

body[data-theme="light"] .notification-sticker.explanation {
    color: #ffffff !important;
    background: #6c5f8d !important;
}

body[data-theme="light"] .support-message.user {
    color: #ffffff !important;
    background: #2f80ed !important;
}

body[data-theme="light"] .hover-tooltip.mobile-fix-guide-tooltip {
    top: calc(68px + env(safe-area-inset-top, 0px)) !important;
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    left: max(10px, env(safe-area-inset-left, 0px)) !important;
    max-height: none !important;
    z-index: 240 !important;
    color: #162033 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: #efc26d !important;
}

@media (max-width: 760px) {
    .notification-popover {
        top: calc(68px + env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        z-index: 240 !important;
    }

    .hover-tooltip.mobile-fix-guide-tooltip .fix-guide-head strong {
        font-size: 17px !important;
    }

    .hover-tooltip.mobile-fix-guide-tooltip li {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

body[data-theme="light"] .support-attention-badge,
body[data-theme="light"] .notification-badge {
    border-color: #ffffff !important;
}

/* Final attendance and mobile assistant overrides. */
body[data-theme="light"] .attendance-matrix-heading strong,
body[data-theme="light"] .attendance-matrix-table th,
body[data-theme="light"] .attendance-matrix-table .matrix-sticky-column {
    color: #19324e !important;
    background: #eef4fb !important;
}

body[data-theme="light"] .attendance-matrix-heading span,
body[data-theme="light"] .attendance-matrix-table tbody .matrix-sticky-column small {
    color: #66778b !important;
}

body[data-theme="light"] .attendance-matrix-scroll,
body[data-theme="light"] .attendance-matrix-table th,
body[data-theme="light"] .attendance-matrix-table td {
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell {
    background: #f7faff !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.work {
    background: #eaf8f0 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.work button {
    color: #157347 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.off,
body[data-theme="light"] .attendance-matrix-table .matrix-cell.leave {
    background: #fff0f3 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.leave-pending {
    background: #fff8e7 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.off button,
body[data-theme="light"] .attendance-matrix-table .matrix-cell.leave button {
    color: #a32945 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.leave-pending button {
    color: #896415 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.unexcused {
    background: #eef1f5 !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.unexcused button {
    color: #6f7b8c !important;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.conflict {
    background: #fff0f3 !important;
    box-shadow: inset 0 0 0 1px #e7a9b7;
}

body[data-theme="light"] .attendance-matrix-table .matrix-cell.conflict button {
    color: #a32945 !important;
}

body[data-theme="light"] .attendance-matrix-conflict.good {
    color: #157347 !important;
    background: #eaf8f0 !important;
    border-color: #9ed8b7 !important;
}

body[data-theme="light"] .attendance-matrix-conflict.bad {
    color: #a32945 !important;
    background: #fff0f3 !important;
    border-color: #e7a9b7 !important;
}

body[data-theme="light"] .attendance-day {
    color: #5f7186 !important;
    background: #f7faff !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .attendance-day strong {
    color: #19324e !important;
}

body[data-theme="light"] .attendance-day span {
    color: #19324e !important;
    background: #e8f0f8 !important;
}

body[data-theme="light"] .attendance-day.complete {
    color: #157347 !important;
    background: #eaf8f0 !important;
    border-color: #9ed8b7 !important;
}

body[data-theme="light"] .attendance-day.scheduled_work {
    color: #896415 !important;
    background: #fff8e7 !important;
    border-color: #efd18a !important;
}

body[data-theme="light"] .attendance-day.missing,
body[data-theme="light"] .attendance-day.missing_checkout,
body[data-theme="light"] .attendance-day.missing_checkin {
    color: #a24c12 !important;
    background: #fff1e7 !important;
    border-color: #f1bd8b !important;
}

body[data-theme="light"] .attendance-day.off,
body[data-theme="light"] .attendance-day.leave,
body[data-theme="light"] .attendance-day.presence_issue {
    color: #a32945 !important;
    background: #fff0f3 !important;
    border-color: #e7a9b7 !important;
}

body[data-theme="light"] .attendance-day.leave_pending {
    color: #896415 !important;
    background: #fff8e7 !important;
    border-color: #efd18a !important;
}

body[data-theme="light"] .attendance-gps-status {
    color: #536b82 !important;
    background: #f4f8fc !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .attendance-gps-status.good {
    color: #157347 !important;
    background: #eaf8f0 !important;
    border-color: #9ed8b7 !important;
}

@media (max-width: 760px) {
    .app-header .brand-line {
        min-width: 0;
        flex: 1 1 auto;
    }

    .app-header .brand-line h1,
    .app-header .brand-line p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-header .header-actions {
        flex: 0 0 auto;
        gap: 4px;
    }

    .app-header .header-actions .support-chat-button {
        position: relative !important;
        inset: auto !important;
        z-index: auto !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 8px;
    }
}

/* Final reminder card overrides: keep the work tab compact and readable in both themes. */
.reminder-list {
    display: grid;
    gap: 10px;
    max-height: min(58vh, 560px);
    overflow: auto;
    padding: 12px;
}

.reminder-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.reminder-card-main,
.reminder-card-title {
    display: grid;
    min-width: 0;
}

.reminder-card-main {
    gap: 8px;
}

.reminder-card-title {
    gap: 4px;
}

.reminder-card-title strong {
    color: var(--text);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reminder-card-title small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reminder-card-meta,
.reminder-card-side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.reminder-card-side {
    justify-content: flex-end;
    gap: 8px;
}

.reminder-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 7px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.reminder-card-meta b {
    color: var(--text);
    font-size: 10px;
}

body[data-theme="light"] .reminder-list {
    background: #f7faff !important;
}

body[data-theme="light"] .reminder-card {
    color: #172033 !important;
    background: #ffffff !important;
    border-color: #dbe6f3 !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.06) !important;
}

body[data-theme="light"] .reminder-card-title strong,
body[data-theme="light"] .reminder-card-meta b {
    color: #172033 !important;
}

body[data-theme="light"] .reminder-card-title small,
body[data-theme="light"] .reminder-card-meta span,
body[data-theme="light"] .reminder-empty {
    color: #516173 !important;
}

body[data-theme="light"] .reminder-card-meta span {
    background: #edf5ff !important;
}

@media (max-width: 760px) {
    .reminder-card {
        grid-template-columns: 1fr;
    }

    .reminder-card-side {
        justify-content: flex-start;
    }

    .reminder-list {
        max-height: none;
    }
}

/* Final daily report date picker overrides. */
.daily-date-picker-field {
    min-width: 0;
}

.daily-date-picker {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.daily-date-strip-shell {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.daily-date-strip {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: 1px 1px 4px;
}

.daily-date-chip,
.daily-date-scroll-button {
    border: 1px solid var(--line-soft);
    color: var(--text);
    background: rgba(47, 41, 72, 0.82);
    border-radius: 6px;
}

.daily-date-chip {
    flex: 0 0 48px;
    min-height: 38px;
    display: grid;
    place-items: center;
    gap: 1px;
    padding: 4px 5px;
    scroll-snap-align: center;
}

.daily-date-chip span {
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.daily-date-chip strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1;
}

.daily-date-chip.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), #22b7ff);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 8px 20px rgba(34, 183, 255, 0.18);
}

.daily-date-chip.active span,
.daily-date-chip.active strong {
    color: #ffffff;
}

.daily-date-scroll-button {
    width: 30px;
    min-height: 38px;
    padding: 0;
    font-size: 18px;
    font-weight: 900;
}

body[data-theme="light"] .daily-date-chip,
body[data-theme="light"] .daily-date-scroll-button {
    color: #19324e !important;
    background: #f7faff !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .daily-date-chip span {
    color: #6a7c91 !important;
}

body[data-theme="light"] .daily-date-chip strong {
    color: #19324e !important;
}

body[data-theme="light"] .daily-date-chip.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f80ed, #22b7ff) !important;
    border-color: rgba(47, 128, 237, 0.22) !important;
}

body[data-theme="light"] .daily-date-chip.active span,
body[data-theme="light"] .daily-date-chip.active strong {
    color: #ffffff !important;
}

@media (max-width: 760px) {
    .daily-date-picker {
        grid-template-columns: 1fr;
    }

    .daily-date-strip-shell {
        grid-template-columns: 28px minmax(0, 1fr) 28px;
    }

    .daily-date-chip {
        flex-basis: 44px;
        min-height: 36px;
    }

    .daily-date-scroll-button {
        width: 28px;
        min-height: 36px;
    }
}

/* Compact daily report date picker: one clear date control, no long day strip. */
[data-panel="daily-report"] .daily-report-toolbar,
.daily-report-toolbar {
    grid-template-columns: minmax(150px, 210px) minmax(165px, 220px) minmax(300px, auto) auto;
    align-items: end;
}

.daily-date-picker-field.compact {
    max-width: 220px;
}

.daily-date-picker.compact {
    display: block;
    min-width: 0;
}

.daily-date-input {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    color: var(--text);
    background: rgba(47, 41, 72, 0.82);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 900;
}

.daily-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(1);
    opacity: 0.9;
}

body[data-theme="light"] .daily-date-input {
    color: #19324e !important;
    background: #f7faff !important;
    border-color: #d7e2ee !important;
}

body[data-theme="light"] .daily-date-input::-webkit-calendar-picker-indicator {
    filter: none;
}

@media (max-width: 980px) {
    [data-panel="daily-report"] .daily-report-toolbar,
    .daily-report-toolbar {
        grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr);
    }

    .daily-date-picker-field.compact {
        max-width: none;
    }
}

@media (max-width: 600px) {
    [data-panel="daily-report"] .daily-report-toolbar,
    .daily-report-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Mobile notifications: use the work assistant as the primary attention surface. */
@media (max-width: 760px) {
    .app-header .notification-menu {
        display: none !important;
    }

    .app-header .header-actions .support-chat-button {
        display: grid !important;
        position: relative !important;
        inset: auto !important;
        flex: 0 0 44px !important;
        z-index: auto !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 8px !important;
        animation: none !important;
        transform: none !important;
        box-shadow: 0 14px 38px rgba(47, 128, 237, 0.26) !important;
    }

    .support-chat-panel {
        top: calc(62px + env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        width: auto !important;
        max-height: none !important;
        z-index: 270 !important;
    }

    .support-chat-messages {
        min-height: 0 !important;
    }

    .support-attention-list {
        font-size: 12px !important;
    }

    .support-error-card button {
        width: 100% !important;
        min-height: 36px !important;
    }
}

body[data-theme="light"] .support-attention-list {
    color: #162033 !important;
    background: #f8fbff !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .support-error-card {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .support-error-card.high {
    background: #fff4f5 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .support-error-card.medium {
    background: #fffaf0 !important;
    border-color: #efd39b !important;
}

body[data-theme="light"] .support-error-card em,
body[data-theme="light"] .support-attention-title span {
    color: #64748b !important;
}

body[data-theme="light"] .leave-coverage-row.waiting-cover {
    background: #fff8e8 !important;
}

body[data-theme="light"] .leave-coverage-row.covered {
    background: #f0fff8 !important;
}

body[data-theme="light"] .leave-cover-needed {
    color: #a15c00 !important;
}

/* Admin cloud backup indicator. */
.backup-status-menu {
    position: relative;
}

.backup-status-action {
    position: relative;
}

.backup-status-action.good {
    color: #7ee6a5;
    border-color: rgba(74, 222, 128, 0.48);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12), 0 16px 36px rgba(0, 0, 0, 0.22);
}

.backup-status-action.warn {
    color: #ffd166;
    border-color: rgba(255, 209, 102, 0.56);
}

.backup-status-action.error {
    color: #ff7a90;
    border-color: rgba(255, 122, 144, 0.62);
}

.backup-status-action.loading svg {
    animation: backup-cloud-pulse 1.1s ease-in-out infinite;
}

@keyframes backup-cloud-pulse {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-1px); opacity: 0.68; }
}

.backup-status-dot {
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: #64748b;
    border: 2px solid #070b22;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}

.backup-status-dot::before {
    content: "?";
}

.backup-status-dot.good {
    background: #1f9f62;
}

.backup-status-dot.good::before {
    content: "✓";
}

.backup-status-dot.warn {
    color: #2b2108;
    background: #ffd166;
}

.backup-status-dot.warn::before {
    content: "!";
}

.backup-status-dot.error {
    background: #d44d68;
}

.backup-status-dot.error::before {
    content: "!";
}

.backup-status-dot.loading::before {
    content: "...";
    font-size: 8px;
}

.backup-status-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 185;
    width: min(440px, calc(100vw - 24px));
    overflow: hidden;
    color: var(--text);
    background: rgba(53, 45, 82, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.backup-status-popover[hidden] {
    display: none !important;
}

.backup-status-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(75, 63, 110, 0.72);
}

.backup-status-title strong,
.backup-status-title span {
    display: block;
}

.backup-status-title span,
.backup-status-meta,
.backup-status-item small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.backup-status-list {
    display: grid;
    gap: 8px;
    max-height: min(58vh, 440px);
    overflow: auto;
    padding: 12px;
}

.backup-status-item,
.backup-status-empty {
    display: grid;
    gap: 5px;
    padding: 11px;
    color: var(--text);
    background: rgba(16, 22, 49, 0.54);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
}

.backup-status-item {
    border-left: 4px solid #64748b;
}

.backup-status-item.good {
    border-left-color: #1f9f62;
}

.backup-status-item.warn {
    border-left-color: #ffd166;
}

.backup-status-item.error {
    border-left-color: #d44d68;
}

.backup-status-item span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.backup-status-item strong {
    color: var(--text);
    font-size: 16px;
}

.backup-status-meta {
    padding: 0 12px 12px;
}

.backup-status-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 12px 14px;
}

.danger-button,
.danger-outline-button {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
}

.danger-button {
    color: #ffffff;
    border: 1px solid rgba(255, 122, 144, 0.7);
    background: linear-gradient(135deg, #b4233c, #e85d75);
}

.danger-button:disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.danger-outline-button {
    color: #ffb6c4;
    border: 1px solid rgba(255, 122, 144, 0.54);
    background: rgba(180, 35, 60, 0.12);
}

.backup-restore-dialog .sign-box {
    width: min(720px, calc(100vw - 28px));
}

.backup-restore-warning {
    display: grid;
    gap: 8px;
    padding: 12px;
    color: var(--text);
    border: 1px solid rgba(255, 122, 144, 0.42);
    border-radius: 8px;
    background: rgba(180, 35, 60, 0.12);
}

.backup-restore-warning strong {
    font-size: 15px;
}

.backup-restore-warning ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.45;
}

.backup-restore-checklist {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.045);
}

.backup-restore-checklist label {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: var(--text);
    font-weight: 800;
}

.backup-restore-checklist input {
    width: 18px;
    height: 18px;
    accent-color: #ff7a90;
}

body[data-theme="light"] .backup-status-action {
    color: #2f80ed !important;
    background: #ffffff !important;
    border-color: rgba(47, 128, 237, 0.18) !important;
}

body[data-theme="light"] .backup-status-action.good {
    color: #168953 !important;
    background: #f2fff8 !important;
    border-color: rgba(31, 159, 98, 0.24) !important;
}

body[data-theme="light"] .backup-status-action.warn {
    color: #a15c00 !important;
    background: #fffaf0 !important;
    border-color: #efd39b !important;
}

body[data-theme="light"] .backup-status-action.error {
    color: #b4233c !important;
    background: #fff5f7 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .backup-status-dot {
    border-color: #ffffff;
}

body[data-theme="light"] .backup-status-popover {
    color: #162033 !important;
    background: #ffffff !important;
    border-color: #dce5ef !important;
    box-shadow: 0 24px 70px rgba(47, 128, 237, 0.18);
}

body[data-theme="light"] .backup-status-title {
    background: #f4f8ff !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .backup-status-title span,
body[data-theme="light"] .backup-status-meta,
body[data-theme="light"] .backup-status-item span,
body[data-theme="light"] .backup-status-item small {
    color: #64748b !important;
}

body[data-theme="light"] .backup-status-item,
body[data-theme="light"] .backup-status-empty {
    color: #162033 !important;
    background: #f8fbff !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .backup-status-item strong {
    color: #162033 !important;
}

body[data-theme="light"] .danger-outline-button {
    color: #b4233c !important;
    background: #fff5f7 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .backup-restore-warning {
    color: #162033 !important;
    background: #fff5f7 !important;
    border-color: #f1b9c2 !important;
}

body[data-theme="light"] .backup-restore-warning ol {
    color: #64748b !important;
}

body[data-theme="light"] .backup-restore-checklist {
    background: #f8fbff !important;
    border-color: #dce5ef !important;
}

body[data-theme="light"] .backup-restore-checklist label {
    color: #162033 !important;
}

@media (max-width: 560px) {
    .backup-status-popover {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        left: max(8px, env(safe-area-inset-left, 0px));
        width: auto;
        max-height: calc(100vh - 96px);
    }

    .accounting-control-summary,
    .accounting-control-grid,
    .accounting-source-layers,
    .accounting-source-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .accounting-source-card-main,
    .accounting-source-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .accounting-source-card footer {
        display: grid;
    }
}
/* =====================================================================
   Tang nhanh cho thanh tab. Dung bien mau san co nen hop ca sang lan toi.
   Noi vao cuoi app.css khi dung image.
   ===================================================================== */
.app-tabs.tabs-grouped:not(.mobile-bottom-tabs) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: visible;
}

.tab-groups {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.tab-group-button {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.tab-group-button:hover {
    color: var(--text);
    border-color: var(--line);
}

.tab-group-button.active {
    color: var(--text);
    border-color: var(--line);
    background: var(--accent-soft);
}

.app-tabs.tabs-grouped .tab-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ".tab-button" co "display: inline-flex" nen de len "display: none" mac
   dinh cua thuoc tinh "hidden" -> phai tra lai dung nghia cho "hidden",
   khong thi bam nhanh nao cung thay du ca menu. */
.app-tabs.tabs-grouped .tab-button[hidden] {
    display: none !important;
}

@media (max-width: 1080px) {
    /* Thanh duoi chi hien cac nut nhanh; bam nhanh moi bung ra hang tab.
       Bo "backdrop-filter": phan tu co no tro thanh khoi chua cho con
       "position: fixed", lam hang tab bi do theo thanh roi bi cat mat. */
    .mobile-bottom-tabs.tabs-grouped {
        flex-direction: row;
        overflow: visible;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .mobile-bottom-tabs.tabs-grouped .tab-groups {
        flex: 1 1 auto;
        gap: 4px;
    }

    .mobile-bottom-tabs.tabs-grouped .tab-group-button {
        flex: 1 1 0;
        min-height: 46px;
        padding: 6px 8px;
        font-size: 12px;
        white-space: normal;
    }

    .mobile-bottom-tabs.tabs-grouped .tab-row {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--cao-thanh-duoi, calc(62px + max(8px, env(safe-area-inset-bottom, 0px))));
        z-index: 91;
        display: none;
        flex-wrap: wrap;
        gap: 6px;
        max-height: 60vh;
        overflow-y: auto;
        padding: 10px max(8px, env(safe-area-inset-left, 0px)) 10px max(8px, env(safe-area-inset-right, 0px));
        background: var(--panel);
        border-top: 1px solid var(--line-soft);
        box-shadow: 0 -12px 30px var(--shadow);
    }

    .mobile-bottom-tabs.tabs-grouped.row-open .tab-row {
        display: flex;
    }

    .mobile-bottom-tabs.tabs-grouped .tab-row .tab-button {
        flex: 1 1 96px;
        min-height: 52px;
    }
}
/* Hai nút chấm và nút Xin phép trên đầu tab Chấm công. */
.cham-cong-nhanh {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.cham-cong-nhanh .hang-cham {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* Cao 56px: hai việc này chiếm gần hết số lần dùng, phải bấm được bằng ngón cái */
.cham-cong-nhanh .nut-cham {
    min-height: 56px;
    font-size: 16px;
    font-weight: 700;
}

.cham-cong-nhanh .nut-xin-phep {
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cham-cong-nhanh .bang-xin-phep {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.cham-cong-nhanh .bang-xin-phep[hidden] {
    display: none;
}

.cham-cong-nhanh .bang-xin-phep button {
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.cham-cong-nhanh .bang-xin-phep button:hover {
    border-color: var(--line);
}
/* Dải bảy ngày ngay dưới hai nút chấm. */
.ca-cua-toi {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 10px;
}

.ca-cua-toi .o-ngay {
    display: grid;
    gap: 2px;
    min-height: 62px;
    padding: 6px 2px;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
    cursor: default;
}

.ca-cua-toi button.o-ngay {
    cursor: pointer;
}

.ca-cua-toi .o-ngay.hom-nay {
    border-color: var(--line);
    background: var(--accent-soft);
    color: var(--text);
}

.ca-cua-toi .o-ngay.co-ca .ca {
    color: var(--text);
    font-weight: 700;
}

.ca-cua-toi .o-ngay .thu {
    font-size: 10px;
    opacity: 0.8;
}

.ca-cua-toi .o-ngay .ngay {
    font-weight: 700;
    font-size: 12px;
}

.bang-chon-ca {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
}

.bang-chon-ca[hidden] {
    display: none;
}

.bang-chon-ca .tieu-de-chon {
    margin: 0;
    font-size: 13px;
    color: var(--muted);
}

.bang-chon-ca button {
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid var(--line-soft);
    background: var(--panel);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}