/* ========================================
   全局样式
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   UI redesign phase 1: enterprise operations system
   ======================================== */

:root {
    --color-bg: #f3f6fa;
    --color-surface: #ffffff;
    --color-sidebar: #0f172a;
    --color-sidebar-soft: #172033;
    --color-border: #d9e2ec;
    --color-border-soft: #e8eef5;
    --color-text: #172033;
    --color-muted: #64748b;
    --color-primary: #1769e0;
    --color-primary-hover: #1257bc;
    --color-primary-soft: #eaf2ff;
    --color-success: #12805c;
    --color-success-soft: #e7f8f2;
    --color-warning: #b76e00;
    --color-warning-soft: #fff5df;
    --color-danger: #d92d20;
    --color-danger-soft: #fff0ee;
    --radius: 8px;
    --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
}

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

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}

input,
select,
button,
textarea {
    font: inherit;
    letter-spacing: 0;
}

.app-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--color-bg);
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px;
    background: var(--color-sidebar);
    color: #ffffff;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 20px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #1f74ff;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.16);
}

.brand-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.brand-subtitle {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.app-nav {
    display: grid;
    gap: 3px;
}

.app-nav__item {
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.app-nav__item::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.app-nav__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.app-nav__item.active {
    background: var(--color-sidebar-soft);
    color: #ffffff;
}

.app-nav__item.active::before {
    background: #38bdf8;
}

.app-main {
    min-width: 0;
}

.app-topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar-title {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 850;
    color: var(--color-text);
}

.topbar-subtitle {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.35;
}

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

.app-topbar .topbar-actions .btn {
    height: 36px !important;
    min-height: 36px !important;
    flex: 0 0 auto !important;
}

.user-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.app-content {
    padding: 24px 26px 32px;
}

.page-stack {
    display: grid;
    gap: 16px;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.page-header-row h1 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 850;
}

.page-header-row p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

.btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-secondary {
    background: #ffffff;
    border-color: var(--color-border);
    color: #334155;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #c8d4e2;
}

.btn-danger {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #ffffff !important;
}

.btn-sm {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.filter-panel {
    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.filter-panel label,
.data-modal__field,
.salary-form label,
.form-group {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.filter-panel input,
.filter-panel select,
.data-modal__field input,
.data-modal__field select,
.salary-form input,
.form-group input,
.form-group select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #cfd9e6;
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text);
    font-size: 14px;
    outline: none;
}

.filter-panel input:focus,
.filter-panel select:focus,
.data-modal__field input:focus,
.data-modal__field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.12);
}

.overview-command-panel {
    grid-template-columns: minmax(220px, 280px) 124px auto;
    justify-content: start;
}

.dm-command-panel {
    grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) minmax(390px, auto) auto;
}

.dm-add-button {
    align-self: end;
}

.cost-filter-panel {
    grid-template-columns: minmax(180px, 240px) 112px 128px minmax(260px, 1fr) auto;
}

.status-chip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.status-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.status-chip:hover {
    background: #f8fafc;
}

.status-chip.active {
    background: var(--color-primary-soft);
    border-color: #9fc2ff;
    color: var(--color-primary);
}

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

.kpi-card {
    min-height: 104px;
    padding: 15px 16px;
    display: grid;
    align-content: center;
    gap: 7px;
}

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

.kpi-card strong {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
}

.kpi-card small {
    color: #7a8797;
    font-size: 12px;
    font-weight: 700;
}

.overview-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: stretch;
}

.overview-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
}

.task-panel {
    overflow: hidden;
}

.task-list {
    display: grid;
    gap: 0;
    padding: 6px 0;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.task-item:last-child {
    border-bottom: 0;
}

.task-item strong,
.task-item span {
    display: block;
}

.task-item strong {
    color: var(--color-text);
    font-size: 13px;
}

.task-item div > span {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
}

.content-grid--drawer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.panel-title-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
}

.panel-title-row h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 850;
}

.panel-title-row > span,
.chart-title-actions > span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.table-panel {
    overflow: hidden;
}

.table-scroll {
    overflow: auto;
}

.enterprise-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    color: #1f2937;
}

.enterprise-table th,
.enterprise-table td {
    height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-soft);
    text-align: left;
    vertical-align: middle;
}

.enterprise-table th {
    height: 42px;
    background: #f7f9fc;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.enterprise-table td {
    font-size: 13px;
}

.enterprise-table tr:hover td {
    background: #fbfdff;
}

.progress-cell {
    display: grid;
    gap: 6px;
    min-width: 110px;
}

.progress-cell span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef3f8;
}

.progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), #14b8a6);
}

.status-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 850;
}

.status-pill.valid {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.status-pill.expiring {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-pill.expired {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.status-pill.completed {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.status-pill.unpaid {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-pill.unknown {
    background: #eef2f7;
    color: var(--color-muted);
}

.detail-drawer {
    position: sticky;
    top: 88px;
    padding: 0;
    overflow: hidden;
}

.drawer-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.drawer-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.drawer-header p,
.muted {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.metric-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 8px 16px;
}

.metric-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: transparent;
}

.metric-list > div:last-child {
    border-bottom: 0;
}

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

.metric-list strong {
    color: var(--color-text);
    font-size: 13px;
    text-align: right;
}

.drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.detail-drawer h3 {
    margin: 14px 16px 8px;
    font-size: 14px;
    font-weight: 850;
}

.timeline {
    display: grid;
    gap: 8px;
    padding: 0 16px 16px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
}

.timeline-item strong {
    color: #0f172a;
}

.timeline-item span {
    color: var(--color-muted);
    font-size: 12px;
}

.chart-panel {
    overflow: hidden;
    min-width: 0;
}

.chart-title-row {
    align-items: center;
}

.chart-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.chart-title-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.chart-title-actions input {
    width: 92px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.simple-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(40px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 246px;
    padding: 16px 16px 8px;
    overflow-x: auto;
}

.simple-chart--quarter {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    min-height: 260px;
}

.simple-chart--compact {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    min-height: 260px;
}

.simple-chart__group {
    min-height: 204px;
    display: grid;
    align-items: end;
    gap: 8px;
    color: var(--color-muted);
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.simple-chart__bars {
    height: 182px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid var(--color-border);
}

.simple-chart--quarter .simple-chart__bars,
.simple-chart--compact .simple-chart__bars {
    height: 198px;
}

.simple-chart__bar {
    width: 12px;
    border-radius: 5px 5px 0 0;
}

.simple-chart__bar.sales {
    background: var(--color-primary);
}

.simple-chart__bar.payment,
.simple-chart__bar.released {
    background: #14a37f;
}

.simple-chart__bar.pending {
    background: #64748b;
}

.simple-chart__bar.expiring {
    background: #d99000;
}

.chart-legend {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.cost-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
    align-items: stretch;
}

.cost-side-stack {
    display: grid;
    gap: 12px;
}

.cost-entry-panel {
    overflow: hidden;
}

.cost-entry-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.cost-entry-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 850;
}

.cost-entry-header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.cost-entry-form {
    display: grid;
    gap: 14px;
    padding: 16px 18px 10px;
}

.cost-form-row {
    display: grid;
    gap: 12px;
    align-items: end;
}

.cost-form-row--main {
    grid-template-columns: minmax(220px, 1fr) 108px 118px minmax(150px, 0.75fr);
}

.cost-form-row--meta {
    grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.3fr);
}

.cost-entry-note {
    padding: 0 18px 16px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

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

.cost-kpi-card {
    min-height: 104px;
}

.cost-trend-panel {
    overflow: hidden;
}

.cost-trend-chart {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    padding: 14px 16px 12px;
}

.cost-trend-point {
    height: 112px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    align-items: end;
    text-align: center;
}

.cost-trend-point i {
    display: block;
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    margin: 0 auto;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #1769e0, #14a37f);
}

.cost-trend-point span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    padding: 24px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.42);
}

.modal.show {
    display: block;
}

.modal-content,
.data-modal__content {
    width: min(560px, 100%);
    margin: 6vh auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.26);
}

.data-modal__content--wide {
    width: min(860px, 100%);
}

.modal-header,
.data-modal__header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.modal-header h3,
.data-modal__header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.data-modal__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.modal-close,
.data-modal .modal-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: #f8fafc;
    color: #0f172a;
}

.modal-body,
.data-modal__body {
    padding: 18px;
}

.data-modal__form,
.data-modal__body .data-modal__form {
    display: grid;
    gap: 14px;
}

.data-modal__form--grid,
.data-modal__body .data-modal__form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.data-modal__section-title {
    grid-column: 1 / -1;
    margin: 4px 0 -2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-soft);
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.data-modal__field--wide {
    grid-column: 1 / -1;
}

.data-modal__footer,
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    background: #fbfdff;
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 120px;
    padding: 28px 16px;
    color: var(--color-muted);
    text-align: center;
}

.skeleton-line {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef3f8, #f8fafc, #eef3f8);
}

.toast {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
}

.toast.success { border-left: 4px solid var(--color-success); }
.toast.error { border-left: 4px solid var(--color-danger); }
.toast.warning { border-left: 4px solid var(--color-warning); }
.toast.info { border-left: 4px solid var(--color-primary); }

@media (max-width: 1280px) {
    .overview-primary-grid,
    .overview-secondary-grid,
    .content-grid--drawer,
    .cost-command-grid {
        grid-template-columns: 1fr;
    }

    .detail-drawer {
        position: static;
    }
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        z-index: 50;
        height: auto;
        padding: 10px;
    }

    .brand-block {
        padding-bottom: 10px;
    }

    .app-nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
    }

    .app-nav__item {
        flex: 0 0 auto;
        width: auto;
        padding: 0 14px;
        white-space: nowrap;
    }

    .app-nav__item::before {
        display: none;
    }

    .filter-panel,
    .dm-command-panel,
    .cost-filter-panel,
    .overview-command-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-chip-row,
    .dm-add-button,
    .cost-filter-field--keyword {
        grid-column: 1 / -1;
    }

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

@media (max-width: 640px) {
    .app-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .app-content {
        padding: 14px;
    }

    .topbar-actions,
    .page-header-row,
    .cost-entry-header {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-panel,
    .dm-command-panel,
    .cost-filter-panel,
    .overview-command-panel,
    .kpi-grid,
    .cost-summary-grid,
    .cost-form-row--main,
    .cost-form-row--meta,
    .data-modal__form--grid,
    .data-modal__body .data-modal__form--grid {
        grid-template-columns: 1fr;
    }

    .status-chip-row,
    .dm-add-button,
    .cost-filter-field--keyword,
    .data-modal__section-title,
    .data-modal__field--wide {
        grid-column: auto;
    }

    .modal {
        padding: 12px;
    }

    .modal-content,
    .data-modal__content,
    .data-modal__content--wide {
        margin: 0 auto;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .timeline-item {
        grid-template-columns: 1fr;
    }
}

/* EOF final active theme */
.app-sidebar{background:#fff;color:#101828;border-right:1px solid #cfdbea;box-shadow:12px 0 34px rgba(16,24,40,.05)}
.brand-title{color:#101828}.brand-subtitle{color:#667085}
.app-nav__item{min-height:44px;padding:0 12px 0 34px;border:1px solid transparent;border-radius:8px;color:#344054}
.app-nav__item::before{left:14px;top:50%;bottom:auto;width:8px;height:8px;transform:translateY(-50%);background:#d0d5dd}
.app-nav__item:hover{background:#f7faff;border-color:#dbe7f6;color:#1769e0}
.app-nav__item.active{background:#eaf2ff;border-color:#b8d2fb;color:#0f55bd;box-shadow:inset 4px 0 0 #1769e0}
.app-main{background:#edf2f8}
.app-topbar{background:#111827;border-bottom:0;color:#fff;box-shadow:0 14px 32px rgba(16,24,40,.16)}
.topbar-title,.user-chip{color:#fff}.topbar-subtitle{color:#cbd5e1}
.user-chip,.app-topbar .btn-secondary{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.1)}
.app-topbar .btn-secondary{color:#fff}
.page-header-row,.panel,.filter-panel,.kpi-card{border-color:#cfdbea;border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 32px rgba(16,24,40,.07)}
.page-header-row{border-left:6px solid #1769e0}
input,select,textarea{min-height:44px;border-color:#cbd8e8;border-radius:7px}
.btn{min-height:40px;border-radius:7px;font-weight:850}

/* UI/UX Pro Max final override: actual file end */
:root {
    --color-bg: #edf2f8;
    --color-sidebar: #ffffff;
    --color-sidebar-soft: #eaf2ff;
    --color-border: #cfdbea;
    --color-text: #101828;
    --color-muted: #5b6b82;
    --color-primary: #1769e0;
    --color-primary-soft: #eaf2ff;
    --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.07);
}

.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--color-bg);
}

.app-sidebar {
    background: #ffffff;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    box-shadow: 12px 0 34px rgba(16, 24, 40, 0.05);
}

.brand-block {
    border-bottom: 1px solid #e6edf5;
}

.brand-title {
    color: #101828;
}

.brand-subtitle {
    color: #667085;
}

.app-nav__item {
    min-height: 44px;
    padding: 0 12px 0 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #344054;
}

.app-nav__item::before {
    left: 14px;
    top: 50%;
    bottom: auto;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    background: #d0d5dd;
}

.app-nav__item:hover {
    background: #f7faff;
    border-color: #dbe7f6;
    color: var(--color-primary);
}

.app-nav__item.active {
    background: var(--color-primary-soft);
    border-color: #b8d2fb;
    color: #0f55bd;
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.app-main {
    background: var(--color-bg);
}

.app-topbar {
    background: #111827;
    border-bottom: 0;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.16);
}

.topbar-title,
.user-chip {
    color: #ffffff;
}

.topbar-subtitle {
    color: #cbd5e1;
}

.user-chip,
.app-topbar .btn-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
}

.app-topbar .btn-secondary {
    color: #ffffff;
}

.page-header-row,
.panel,
.filter-panel,
.kpi-card {
    border-color: #cfdbea;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-panel);
}

.page-header-row {
    border-left: 6px solid var(--color-primary);
}

.page-header-row h1 {
    color: #101828;
    font-size: 28px;
    font-weight: 950;
}

.filter-panel,
.dm-command-panel,
.cost-filter-panel,
.overview-command-panel,
.salary-command-panel,
.salary-details-toolbar,
.analytics-command-panel {
    background: #f8fbff;
}

input,
select,
textarea {
    min-height: 44px;
    border-color: #cbd8e8;
    border-radius: 7px;
}

.btn {
    min-height: 40px;
    border-radius: 7px;
    font-weight: 850;
}

.kpi-card strong,
.salary-details-workspace .salary-summary-card strong,
.analytics-workspace .analytics-summary-card strong {
    color: #101828;
    font-size: 28px;
    letter-spacing: 0;
}

.enterprise-table thead th,
.ios-table thead th {
    background: #f3f7fc;
    color: #344054;
    font-weight: 900;
}

.salary-management-workspace .salary-preview-panel {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-nav__item {
        padding: 0 14px;
    }

    .app-nav__item::before {
        display: none;
    }
}

/* UI/UX Pro Max final override: actual EOF */
:root {
    --color-bg: #edf2f8;
    --color-surface: #ffffff;
    --color-sidebar: #ffffff;
    --color-sidebar-soft: #eaf2ff;
    --color-border: #cfdbea;
    --color-border-soft: #e6edf5;
    --color-text: #101828;
    --color-muted: #5b6b82;
    --color-primary: #1769e0;
    --color-primary-hover: #0f55bd;
    --color-primary-soft: #eaf2ff;
    --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.07);
}

.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--color-bg);
}

.app-sidebar {
    background: #ffffff;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    box-shadow: 12px 0 34px rgba(16, 24, 40, 0.05);
}

.brand-block {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-soft);
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    box-shadow: 0 10px 20px rgba(23, 105, 224, 0.22);
}

.brand-title {
    color: #101828;
    font-weight: 900;
}

.brand-subtitle {
    color: #667085;
}

.app-nav {
    gap: 6px;
}

.app-nav__item {
    min-height: 44px;
    padding: 0 12px 0 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #344054;
    font-weight: 850;
}

.app-nav__item::before {
    left: 14px;
    top: 50%;
    bottom: auto;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #d0d5dd;
}

.app-nav__item:hover {
    background: #f7faff;
    border-color: #dbe7f6;
    color: var(--color-primary);
}

.app-nav__item.active {
    background: var(--color-primary-soft);
    border-color: #b8d2fb;
    color: #0f55bd;
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.app-nav__item.active::before {
    background: var(--color-primary);
}

.app-main {
    background: var(--color-bg);
}

.app-topbar {
    background: #111827;
    border-bottom: 0;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.16);
}

.topbar-title {
    color: #ffffff;
}

.topbar-subtitle {
    color: #cbd5e1;
}

.user-chip {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.app-topbar .btn-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.page-header-row,
.panel,
.filter-panel,
.kpi-card {
    border-color: #cfdbea;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-panel);
}

.page-header-row {
    border-left: 6px solid var(--color-primary);
}

.page-header-row h1 {
    color: #101828;
    font-size: 28px;
    font-weight: 950;
}

.filter-panel,
.dm-command-panel,
.cost-filter-panel,
.overview-command-panel,
.salary-command-panel,
.salary-details-toolbar,
.analytics-command-panel {
    background: #f8fbff;
}

input,
select,
textarea {
    min-height: 44px;
    border-color: #cbd8e8;
    border-radius: 7px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14);
    outline: none;
}

.btn {
    min-height: 40px;
    border-radius: 7px;
    font-weight: 850;
}

.kpi-card::before,
.salary-details-workspace .salary-summary-card::before,
.analytics-workspace .analytics-summary-card::before {
    background: var(--color-primary);
}

.kpi-card strong,
.salary-details-workspace .salary-summary-card strong,
.analytics-workspace .analytics-summary-card strong {
    color: #101828;
    font-size: 28px;
    letter-spacing: 0;
}

.panel-title-row h2 {
    color: #101828;
    font-weight: 950;
}

.panel-title-row h2::before {
    background: var(--color-primary);
}

.enterprise-table thead th,
.ios-table thead th {
    background: #f3f7fc;
    color: #344054;
    font-weight: 900;
}

.salary-management-workspace .salary-preview-panel {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.24);
}

.salary-management-workspace .salary-preview-panel h2,
.salary-management-workspace .salary-preview-panel p,
.salary-management-workspace .salary-preview-panel dt {
    color: #dbeafe;
}

.salary-management-workspace .salary-preview-panel .preview-total,
.salary-management-workspace .salary-preview-panel dd {
    color: #ffffff;
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        height: auto;
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    }

    .app-nav__item {
        padding: 0 14px;
    }

    .app-nav__item::before {
        display: none;
    }
}

/* Phase 2 salary and analytics polish */
.salary-management-workspace .salary-command-panel {
    grid-template-columns: minmax(220px, 320px) 120px 120px auto;
    justify-content: start;
}

.salary-management-workspace .salary-calc-grid {
    grid-template-columns: minmax(420px, 0.9fr) minmax(360px, 1.1fr);
}

.salary-management-workspace .salary-form-panel,
.salary-management-workspace .salary-preview-panel {
    padding: 0;
    overflow: hidden;
}

.salary-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--color-border);
}

.salary-panel-head h2,
.salary-preview h2 {
    margin: 0;
    font-size: 18px;
}

.salary-panel-head p,
.salary-preview p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.salary-management-workspace .salary-form,
.salary-management-workspace .salary-preview {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.salary-score-form {
    gap: 18px;
}

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

.salary-calc-btn,
.salary-save-btn {
    justify-self: start;
    min-width: 140px;
}

.salary-preview {
    min-height: 100%;
    align-content: start;
}

.salary-preview--empty {
    min-height: 210px;
    align-content: center;
}

.salary-preview-label {
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 850;
}

.preview-total {
    margin: 2px 0 4px;
    letter-spacing: 0;
}

.salary-preview dl {
    margin: 0;
}

.salary-preview dt {
    color: var(--color-muted);
}

.salary-preview dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.salary-details-toolbar {
    display: grid !important;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    align-items: end;
}

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

.salary-details-actions .btn {
    flex: 0 0 auto;
}

.salary-details-toolbar label {
    min-width: 0;
}

.salary-summary-grid,
.analytics-summary-grid {
    padding: 16px;
}

.salary-summary-card small,
.analytics-summary-card small {
    display: block;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 12px;
}

.analytics-command-panel {
    grid-template-columns: 180px 130px auto;
    justify-content: start;
}

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

@media (max-width: 960px) {
    .salary-management-workspace .salary-calc-grid,
    .salary-details-toolbar,
    .analytics-summary-grid {
        grid-template-columns: 1fr;
    }

    .salary-details-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .salary-management-workspace .salary-command-panel,
    .salary-management-workspace .salary-score-grid,
    .analytics-command-panel {
        grid-template-columns: 1fr;
    }
}

/* Phase 2 visible redesign pass */
.salary-management-workspace > .page-header-row,
.salary-details-workspace > .page-header-row,
.analytics-workspace > .page-header-row {
    position: relative;
    align-items: center;
    padding: 20px 22px;
    border: 1px solid #d6e2f1;
    border-left: 5px solid var(--color-primary);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.salary-management-workspace > .page-header-row h1,
.salary-details-workspace > .page-header-row h1,
.analytics-workspace > .page-header-row h1 {
    margin: 0 0 6px;
    font-size: 28px;
    line-height: 1.15;
}

.salary-management-workspace > .page-header-row p,
.salary-details-workspace > .page-header-row p,
.analytics-workspace > .page-header-row p {
    margin: 0;
    color: #52627a;
}

.salary-management-workspace .salary-command-panel,
.salary-details-workspace .salary-details-toolbar,
.analytics-workspace .analytics-command-panel {
    padding: 18px;
    border-color: #cddbea;
    background: #f8fbff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.salary-management-workspace .salary-command-panel label,
.salary-details-workspace .salary-details-toolbar label,
.analytics-workspace .analytics-command-panel label {
    color: #34445c;
    font-weight: 850;
}

.salary-management-workspace .salary-calc-grid {
    gap: 18px;
}

.salary-management-workspace .salary-form-panel,
.salary-management-workspace .salary-preview-panel,
.salary-details-workspace .salary-summary-panel,
.salary-details-workspace .salary-list-panel,
.salary-details-workspace .salary-pool-panel,
.salary-details-workspace .salary-history-panel,
.analytics-workspace .table-panel {
    border-color: #cfdaea;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.salary-panel-head {
    background: #f7faff;
}

.salary-panel-head h2::before,
.salary-details-workspace .panel-title-row h2::before,
.analytics-workspace .panel-title-row h2::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 9px;
    border-radius: 999px;
    background: var(--color-primary);
    vertical-align: -2px;
}

.salary-management-workspace .salary-preview-panel {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

.salary-management-workspace .salary-preview-panel .salary-preview-label {
    background: rgba(255, 255, 255, 0.14);
    color: #bfdbfe;
}

.salary-management-workspace .salary-preview-panel h2,
.salary-management-workspace .salary-preview-panel p,
.salary-management-workspace .salary-preview-panel dt {
    color: #dbeafe;
}

.salary-management-workspace .salary-preview-panel dd,
.salary-management-workspace .salary-preview-panel .preview-total {
    color: #ffffff;
}

.salary-management-workspace .salary-preview-panel .btn-primary {
    background: #ffffff;
    color: #0f172a;
}

.salary-score-grid label {
    padding: 14px;
    border: 1px solid #dbe6f3;
    border-radius: 8px;
    background: #ffffff;
}

.salary-score-grid input {
    margin-top: 8px;
}

.salary-details-actions .btn {
    min-height: 38px;
}

.salary-details-workspace .salary-summary-card,
.analytics-workspace .analytics-summary-card {
    position: relative;
    overflow: hidden;
    border-color: #d4e0ee;
    background: #ffffff;
}

.salary-details-workspace .salary-summary-card::before,
.analytics-workspace .analytics-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-primary);
}

.salary-details-workspace .salary-summary-card strong,
.analytics-workspace .analytics-summary-card strong {
    font-size: 28px;
    letter-spacing: 0;
}

.salary-details-workspace .ios-list-item,
.analytics-workspace .enterprise-table tbody tr {
    background: #ffffff;
}

.salary-details-workspace .ios-list-item {
    border-radius: 8px;
}

.analytics-workspace .analytics-summary-grid {
    padding: 0;
    gap: 12px;
}

.analytics-workspace .analytics-command-panel + .analytics-summary-grid {
    margin-top: 4px;
}

.analytics-workspace .enterprise-table thead th {
    background: #f4f7fb;
    color: #34445c;
}

@media (max-width: 960px) {
    .salary-management-workspace > .page-header-row,
    .salary-details-workspace > .page-header-row,
    .analytics-workspace > .page-header-row {
        padding: 16px;
    }
}

/* UI/UX Pro Max redesign: operations command system */
:root {
    --color-bg: #edf2f8;
    --color-surface: #ffffff;
    --color-sidebar: #ffffff;
    --color-sidebar-soft: #eaf2ff;
    --color-border: #cfdbea;
    --color-border-soft: #e6edf5;
    --color-text: #101828;
    --color-muted: #5b6b82;
    --color-primary: #1769e0;
    --color-primary-hover: #0f55bd;
    --color-primary-soft: #eaf2ff;
    --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.07);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
}

.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--color-bg);
}

.app-sidebar {
    padding: 18px 14px;
    background: #ffffff;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    box-shadow: 12px 0 34px rgba(16, 24, 40, 0.05);
}

.brand-block {
    margin-bottom: 12px;
    padding: 8px 8px 18px;
    border-bottom: 1px solid var(--color-border-soft);
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    box-shadow: 0 10px 20px rgba(23, 105, 224, 0.22);
}

.brand-title {
    color: #101828;
    font-size: 15px;
    font-weight: 900;
}

.brand-subtitle {
    color: #667085;
    font-size: 11px;
}

.app-nav {
    gap: 6px;
}

.app-nav__item {
    min-height: 44px;
    padding: 0 12px 0 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #344054;
    font-weight: 850;
}

.app-nav__item::before {
    left: 14px;
    top: 50%;
    bottom: auto;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #d0d5dd;
}

.app-nav__item:hover {
    background: #f7faff;
    border-color: #dbe7f6;
    color: var(--color-primary);
}

.app-nav__item.active {
    background: var(--color-primary-soft);
    border-color: #b8d2fb;
    color: #0f55bd;
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.app-nav__item.active::before {
    background: var(--color-primary);
}

.app-main {
    background: var(--color-bg);
}

.app-topbar {
    min-height: 76px;
    padding: 14px 28px;
    background: #111827;
    border-bottom: 0;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.16);
}

.topbar-title {
    color: #ffffff;
    font-size: 21px;
}

.topbar-subtitle {
    color: #cbd5e1;
}

.user-chip {
    min-height: 38px;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.app-topbar .btn-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.app-topbar .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.16);
}

.app-topbar .topbar-actions .btn {
    height: 38px !important;
    min-height: 38px !important;
}

.app-content {
    padding: 26px 28px 36px;
}

.page-stack {
    gap: 18px;
}

.page-header-row {
    position: relative;
    padding: 22px 24px;
    border: 1px solid #cbd8e8;
    border-left: 6px solid var(--color-primary);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-panel);
}

.page-header-row h1 {
    margin: 0 0 6px;
    color: #101828;
    font-size: 28px;
    line-height: 1.15;
    font-weight: 950;
}

.page-header-row p {
    margin: 0;
    color: #52627a;
    font-size: 14px;
}

.panel,
.filter-panel,
.kpi-card {
    border-color: #cfdbea;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-panel);
}

.filter-panel,
.dm-command-panel,
.cost-filter-panel,
.overview-command-panel,
.salary-command-panel,
.salary-details-toolbar,
.analytics-command-panel {
    padding: 18px;
    background: #f8fbff;
}

label {
    color: #344054;
    font-weight: 850;
}

input,
select,
textarea {
    min-height: 44px;
    border-color: #cbd8e8;
    border-radius: 7px;
    background: #ffffff;
    color: #101828;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14);
    outline: none;
}

.btn {
    min-height: 40px;
    border-radius: 7px;
    font-weight: 850;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-secondary {
    border-color: #cbd8e8;
    background: #ffffff;
    color: #344054;
}

.btn-danger {
    background: #d92d20;
    border-color: #d92d20;
}

.kpi-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
}

.kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-primary);
}

.kpi-card span,
.kpi-card small {
    color: #667085;
}

.kpi-card strong {
    color: #101828;
    font-size: 28px;
    letter-spacing: 0;
}

.panel-title-row {
    min-height: 54px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.panel-title-row h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #101828;
    font-size: 18px;
    font-weight: 950;
}

.panel-title-row h2::before {
    content: "";
    width: 4px;
    height: 17px;
    border-radius: 999px;
    background: var(--color-primary);
}

.enterprise-table thead th,
.ios-table thead th {
    background: #f3f7fc;
    color: #344054;
    font-weight: 900;
}

.enterprise-table tbody tr:hover {
    background: #f8fbff;
}

.salary-management-workspace .salary-preview-panel {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.24);
}

.salary-management-workspace .salary-preview-panel h2,
.salary-management-workspace .salary-preview-panel p,
.salary-management-workspace .salary-preview-panel dt {
    color: #dbeafe;
}

.salary-management-workspace .salary-preview-panel .preview-total,
.salary-management-workspace .salary-preview-panel dd {
    color: #ffffff;
}

.salary-management-workspace .salary-preview-panel .salary-preview-label {
    background: rgba(255, 255, 255, 0.13);
    color: #bfdbfe;
}

.salary-score-grid label {
    border-color: #d8e4f2;
    background: #ffffff;
}

.trend-line-chart,
.cost-trend-chart,
.simple-chart {
    background: #ffffff;
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        height: auto;
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    }

    .app-nav__item {
        padding: 0 14px;
    }

    .app-nav__item::before {
        display: none;
    }

    .app-topbar {
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    .app-content {
        padding: 16px;
    }

    .page-header-row {
        padding: 18px;
    }

    .page-header-row h1 {
        font-size: 24px;
    }

    .app-topbar {
        padding: 14px 16px;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* UI/UX Pro Max final override: must stay at EOF */
:root {
    --color-bg: #edf2f8;
    --color-surface: #ffffff;
    --color-sidebar: #ffffff;
    --color-sidebar-soft: #eaf2ff;
    --color-border: #cfdbea;
    --color-border-soft: #e6edf5;
    --color-text: #101828;
    --color-muted: #5b6b82;
    --color-primary: #1769e0;
    --color-primary-hover: #0f55bd;
    --color-primary-soft: #eaf2ff;
    --shadow-panel: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 32px rgba(16, 24, 40, 0.07);
}

.app-shell {
    grid-template-columns: 248px minmax(0, 1fr);
    background: var(--color-bg);
}

.app-sidebar {
    background: #ffffff;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    box-shadow: 12px 0 34px rgba(16, 24, 40, 0.05);
}

.brand-block {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border-soft);
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: var(--color-primary);
    box-shadow: 0 10px 20px rgba(23, 105, 224, 0.22);
}

.brand-title {
    color: #101828;
    font-weight: 900;
}

.brand-subtitle {
    color: #667085;
}

.app-nav {
    gap: 6px;
}

.app-nav__item {
    min-height: 44px;
    padding: 0 12px 0 34px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #344054;
    font-weight: 850;
}

.app-nav__item::before {
    left: 14px;
    top: 50%;
    bottom: auto;
    width: 8px;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #d0d5dd;
}

.app-nav__item:hover {
    background: #f7faff;
    border-color: #dbe7f6;
    color: var(--color-primary);
}

.app-nav__item.active {
    background: var(--color-primary-soft);
    border-color: #b8d2fb;
    color: #0f55bd;
    box-shadow: inset 4px 0 0 var(--color-primary);
}

.app-nav__item.active::before {
    background: var(--color-primary);
}

.app-main {
    background: var(--color-bg);
}

.app-topbar {
    background: #111827;
    border-bottom: 0;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.16);
}

.topbar-title {
    color: #ffffff;
}

.topbar-subtitle {
    color: #cbd5e1;
}

.user-chip {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.app-topbar .btn-secondary {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.page-header-row,
.panel,
.filter-panel,
.kpi-card {
    border-color: #cfdbea;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--shadow-panel);
}

.page-header-row {
    border-left: 6px solid var(--color-primary);
}

.page-header-row h1 {
    color: #101828;
    font-size: 28px;
    font-weight: 950;
}

.filter-panel,
.dm-command-panel,
.cost-filter-panel,
.overview-command-panel,
.salary-command-panel,
.salary-details-toolbar,
.analytics-command-panel {
    background: #f8fbff;
}

input,
select,
textarea {
    min-height: 44px;
    border-color: #cbd8e8;
    border-radius: 7px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.14);
    outline: none;
}

.btn {
    min-height: 40px;
    border-radius: 7px;
    font-weight: 850;
}

.kpi-card::before,
.salary-details-workspace .salary-summary-card::before,
.analytics-workspace .analytics-summary-card::before {
    background: var(--color-primary);
}

.kpi-card strong,
.salary-details-workspace .salary-summary-card strong,
.analytics-workspace .analytics-summary-card strong {
    color: #101828;
    font-size: 28px;
    letter-spacing: 0;
}

.panel-title-row h2 {
    color: #101828;
    font-weight: 950;
}

.panel-title-row h2::before {
    background: var(--color-primary);
}

.enterprise-table thead th,
.ios-table thead th {
    background: #f3f7fc;
    color: #344054;
    font-weight: 900;
}

.salary-management-workspace .salary-preview-panel {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.24);
}

.salary-management-workspace .salary-preview-panel h2,
.salary-management-workspace .salary-preview-panel p,
.salary-management-workspace .salary-preview-panel dt {
    color: #dbeafe;
}

.salary-management-workspace .salary-preview-panel .preview-total,
.salary-management-workspace .salary-preview-panel dd {
    color: #ffffff;
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        height: auto;
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
    }

    .app-nav__item {
        padding: 0 14px;
    }

    .app-nav__item::before {
        display: none;
    }
}

/* Final mobile correction for legacy flex rules. Must remain at EOF. */
@media (max-width: 640px) {
    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
        align-items: stretch;
    }

    .topbar-actions .user-chip {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .topbar-actions .btn {
        width: 100%;
        min-height: 38px;
        height: 38px;
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .topbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 8px;
    }

    .topbar-actions .user-chip {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .topbar-actions .btn {
        width: 100%;
        min-height: 38px;
        flex: none;
    }
}

/* ========================================
   Enterprise redesign shell
   ======================================== */

:root {
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #d9e0ea;
    --color-text: #1f2937;
    --color-muted: #667085;
    --color-primary: #1f6feb;
    --color-primary-soft: #eaf2ff;
    --color-danger: #d92d20;
    --color-success: #16803c;
    --color-warning: #b56a00;
    --radius: 8px;
    --shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.06);
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
    overflow-x: hidden;
}

.app-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
    min-width: 0;
}

.app-sidebar {
    background: #101828;
    color: #fff;
    padding: 18px 14px;
    min-width: 0;
}

.brand-block {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 8px 22px;
    min-width: 0;
}

.brand-block > div {
    min-width: 0;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--color-primary);
    font-weight: 800;
}

.brand-title {
    font-size: 15px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.brand-subtitle {
    font-size: 12px;
    color: #98a2b3;
}

.app-nav {
    display: grid;
    gap: 4px;
}

.app-nav__item {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #cbd5e1;
    padding: 11px 12px;
    text-align: left;
    font-weight: 700;
    cursor: pointer;
}

.app-nav__item.active,
.app-nav__item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.app-main {
    min-width: 0;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 24px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.topbar-title {
    font-size: 20px;
    font-weight: 800;
}

.topbar-subtitle {
    color: var(--color-muted);
    font-size: 13px;
    margin-top: 2px;
}

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

.user-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    background: #fff;
    font-weight: 700;
}

.app-content {
    padding: 22px 24px;
}

.app-page {
    display: none;
}

.app-page.active {
    display: block;
}

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
}

.btn {
    min-height: 36px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn-danger {
    background: var(--color-danger) !important;
    color: #fff;
    border-color: var(--color-danger) !important;
}

.btn-sm {
    min-height: 30px;
    padding: 0 9px;
    font-size: 12px;
}

.page-stack {
    display: grid;
    gap: 16px;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.page-header-row h1 {
    margin: 0;
    font-size: 24px;
}

.page-header-row p {
    margin: 6px 0 0;
    color: var(--color-muted);
}

.filter-panel {
    display: grid;
    grid-template-columns: 220px minmax(240px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.filter-panel label,
.salary-form label,
.form-group {
    display: grid;
    gap: 6px;
    color: var(--color-muted);
    font-size: 13px;
    font-weight: 700;
}

.filter-panel input,
.filter-panel select,
.salary-form input,
.form-group input,
.form-group select {
    height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 10px;
    background: #fff;
    min-width: 0;
}

.cost-filter-panel {
    grid-template-columns: minmax(180px, 240px) 112px 128px minmax(220px, 1fr);
}

.cost-filter-field--year input,
.cost-filter-field--month select {
    width: 100%;
}

.cost-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: stretch;
}

.cost-entry-panel {
    overflow: hidden;
    padding: 0;
}

.cost-entry-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: #f8fafc;
}

.cost-entry-header h2 {
    margin: 0;
    font-size: 16px;
}

.cost-entry-header p {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.cost-entry-header .btn {
    flex: 0 0 auto;
    min-width: 96px;
}

.cost-entry-form {
    display: grid;
    gap: 14px;
    padding: 16px 18px 12px;
}

.cost-form-row {
    display: grid;
    gap: 14px;
    align-items: end;
}

.cost-form-row--main {
    grid-template-columns: minmax(220px, 1fr) 108px 120px minmax(150px, 0.72fr);
}

.cost-form-row--meta {
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.35fr);
}

.cost-entry-form .data-modal__field {
    gap: 6px;
}

.cost-entry-form .data-modal__field input,
.cost-entry-form .data-modal__field select {
    height: 38px;
}

.cost-entry-note {
    padding: 0 18px 16px;
    color: var(--color-muted);
    font-size: 13px;
}

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

.cost-kpi-card {
    min-height: 116px;
    align-content: center;
}

.cost-kpi-card strong {
    margin-top: 10px;
}

.status-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-chip {
    border: 1px solid var(--color-border);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}

.status-chip.active {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 800;
}

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

.kpi-card {
    padding: 16px;
}

.kpi-card span {
    color: var(--color-muted);
    font-size: 13px;
}

.kpi-card strong {
    display: block;
    margin-top: 8px;
    font-size: 22px;
}

.content-grid--drawer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.table-panel {
    min-width: 0;
}

.panel-title-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.panel-title-row h2 {
    margin: 0;
    font-size: 16px;
}

.table-scroll {
    overflow: auto;
}

.enterprise-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 860px;
}

.enterprise-table th,
.enterprise-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.enterprise-table th {
    background: #f8fafc;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.progress-cell {
    display: grid;
    gap: 6px;
}

.progress {
    height: 6px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}

.progress i {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

.status-pill {
    display: inline-flex;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 800;
}

.status-pill.valid { background: #ecfdf3; color: var(--color-success); }
.status-pill.expiring { background: #fff7ed; color: var(--color-warning); }
.status-pill.expired { background: #fef3f2; color: var(--color-danger); }
.status-pill.unknown { background: #f2f4f7; color: var(--color-muted); }

.detail-drawer {
    padding: 16px;
    position: sticky;
    top: 16px;
}

.drawer-header h2 {
    margin: 0;
    font-size: 18px;
}

.drawer-header p,
.muted {
    margin: 6px 0 0;
    color: var(--color-muted);
}

.metric-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
}

.metric-list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #f9fafb;
}

.metric-list span {
    color: var(--color-muted);
    font-size: 12px;
}

.metric-list strong {
    font-size: 13px;
    text-align: right;
}

.drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 16px 0;
}

.timeline {
    display: grid;
    gap: 10px;
}

.timeline-item {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

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

.salary-command-panel,
.analytics-command-panel {
    grid-template-columns: minmax(220px, 320px) 120px 120px auto;
    justify-content: start;
}

.salary-calc-grid {
    grid-template-columns: minmax(420px, 0.9fr) minmax(360px, 1.1fr);
}

.salary-form-panel,
.salary-preview-panel {
    padding: 0;
    overflow: hidden;
}

.salary-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--color-border);
}

.salary-panel-head h2,
.salary-preview h2 {
    margin: 0;
    font-size: 18px;
}

.salary-panel-head p,
.salary-preview p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.salary-form,
.salary-preview,
.account-admin-layout,
#orgSalespersonsBody {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.salary-score-form {
    gap: 18px;
}

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

.salary-calc-btn,
.salary-save-btn {
    justify-self: start;
    min-width: 140px;
}

.salary-preview {
    min-height: 100%;
    align-content: start;
}

.salary-preview--empty {
    min-height: 210px;
    align-content: center;
}

.salary-preview-label {
    width: max-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 850;
}

.salary-details-toolbar {
    display: grid !important;
    grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
    align-items: end;
}

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

.salary-details-actions .btn,
.salary-details-toolbar .btn {
    flex: 0 0 auto;
    align-self: end;
}

.salary-details-toolbar label {
    min-width: 0;
}

.salary-summary-grid,
.analytics-summary-grid {
    padding: 16px;
}

.salary-summary-card small,
.analytics-summary-card small {
    display: block;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 12px;
}

.preview-total {
    font-size: 34px;
    font-weight: 900;
    margin: 2px 0 4px;
    letter-spacing: 0;
}

.salary-preview dl {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 10px;
    margin: 0;
}

.salary-preview dt {
    color: var(--color-muted);
}

.salary-preview dd {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.analytics-command-panel {
    grid-template-columns: 180px 130px auto;
}

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

.personal-filter-panel {
    grid-template-columns: 260px 180px;
    justify-content: start;
}

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

.personal-report-grid--wide {
    align-items: stretch;
}

.info-list {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 16px;
    margin: 0;
}

.info-list dt {
    color: var(--color-muted);
    font-weight: 700;
}

.info-list dd {
    margin: 0;
    font-weight: 800;
}

.chart-panel {
    min-width: 0;
}

.chart-panel .panel-title-row span {
    color: var(--color-muted);
    font-size: 13px;
}

.chart-title-row {
    align-items: center;
    gap: 12px;
}

.chart-title-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chart-title-actions label {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.chart-title-actions input {
    width: 92px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0 8px;
}

.simple-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(34px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 260px;
    padding: 18px 16px 8px;
    overflow-x: auto;
}

.simple-chart--quarter {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    min-height: 300px;
}

.simple-chart--compact {
    grid-template-columns: repeat(3, minmax(84px, 1fr));
}

.simple-chart__group {
    display: grid;
    gap: 8px;
    align-items: end;
    min-height: 220px;
    text-align: center;
    color: var(--color-muted);
    font-size: 12px;
}

.simple-chart__bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    height: 198px;
    border-bottom: 1px solid var(--color-border);
}

.simple-chart__bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    max-width: 64px;
    height: 100%;
    min-width: 18px;
    position: relative;
    overflow: visible;
}

.simple-chart__bar-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    transform: translateX(-50%) translateY(4px);
    pointer-events: none;
    opacity: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: #101828;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    transition: opacity 80ms ease, transform 80ms ease;
}

.simple-chart--compact .simple-chart__bar-wrap::after {
    top: 8px;
    bottom: auto;
    width: max-content;
    max-width: 150px;
    white-space: normal;
    text-align: center;
}

.simple-chart--compact .simple-chart__group:first-child .simple-chart__bar-wrap::after {
    left: 0;
    transform: translateY(4px);
}

.simple-chart--compact .simple-chart__group:first-child .simple-chart__bar-wrap:hover::after,
.simple-chart--compact .simple-chart__group:first-child .simple-chart__bar-wrap:focus-within::after {
    transform: translateY(0);
}

.simple-chart--compact .simple-chart__group:last-child .simple-chart__bar-wrap::after {
    right: 0;
    left: auto;
    transform: translateY(4px);
}

.simple-chart--compact .simple-chart__group:last-child .simple-chart__bar-wrap:hover::after,
.simple-chart--compact .simple-chart__group:last-child .simple-chart__bar-wrap:focus-within::after {
    transform: translateY(0);
}

.simple-chart__bar-wrap:hover::after,
.simple-chart__bar-wrap:focus-within::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.simple-chart__value {
    display: block;
    min-height: 16px;
    color: var(--color-text);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    transform: none;
}

.simple-chart__bar {
    display: block;
    width: 12px;
    max-height: calc(100% - 18px);
    min-height: 0;
    border-radius: 6px 6px 0 0;
    background: var(--color-primary);
}

.simple-chart__bar.sales {
    background: var(--color-primary);
}

.simple-chart__bar.payment,
.simple-chart__bar.released {
    background: var(--color-success);
}

.simple-chart__bar.pending {
    background: #64748b;
}

.simple-chart__bar.expiring {
    background: var(--color-warning);
}

.simple-chart--quarter .simple-chart__bar {
    width: 18px;
}

.simple-chart--quarter .simple-chart__group {
    min-height: 250px;
}

.simple-chart--quarter .simple-chart__bars {
    height: 222px;
}

.simple-chart__group strong {
    color: var(--color-text);
    font-size: 12px;
}

.chart-legend {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px;
    color: var(--color-muted);
    font-size: 12px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 6px;
}

.legend-dot.sales {
    background: var(--color-primary);
}

.legend-dot.payment {
    background: var(--color-success);
}

.legend-dot.commission {
    background: #7c3aed;
}

.trend-line-chart {
    position: relative;
    height: 300px;
    min-height: 300px;
    padding: 0;
}

.trend-line-chart__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.trend-line-chart__grid {
    stroke: #e8eef5;
    stroke-width: 1;
}

.trend-line-chart__line {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trend-line-chart__line--sales {
    stroke: var(--color-primary);
}

.trend-line-chart__line--payment {
    stroke: #14a37f;
}

.trend-line-chart__line--commission {
    stroke: #7c3aed;
}

.trend-line-chart__point {
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.12);
}

.trend-line-chart__point--sales {
    background: var(--color-primary);
}

.trend-line-chart__point--payment {
    background: #14a37f;
}

.trend-line-chart__point--commission {
    background: #7c3aed;
}

.trend-line-chart__point::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(4px);
    padding: 6px 8px;
    border-radius: 6px;
    background: #0f172a;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
    transition: opacity 100ms ease, transform 100ms ease;
}

.trend-line-chart__point:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.trend-line-chart__value {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: #475569;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
    transform: translate(-50%, -24px);
}

.trend-line-chart__value--sales {
    color: var(--color-primary);
}

.trend-line-chart__value--payment {
    color: #12805c;
    transform: translate(-50%, 14px);
}

.trend-line-chart__x-label {
    position: absolute;
    bottom: 14px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
    transform: translateX(-50%);
}

.trend-line-chart__y-label {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 800;
    transform: translateY(-50%);
}

.trend-line-chart__legend {
    padding-top: 0;
}

.empty-state {
    display: grid;
    gap: 12px;
    place-items: center;
    padding: 32px 16px;
    color: var(--color-muted);
    text-align: center;
}

.skeleton-line {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf1f6, #f7f9fb, #edf1f6);
}

.toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 10px;
    z-index: 1000;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
}

.toast.success { border-left: 4px solid var(--color-success); }
.toast.error { border-left: 4px solid var(--color-danger); }
.toast.warning { border-left: 4px solid var(--color-warning); }
.toast.info { border-left: 4px solid var(--color-primary); }
.toast-message { flex: 1; }
.toast-close { border: 0; background: transparent; cursor: pointer; font-size: 18px; }

.confirm-dialog[hidden] {
    display: none;
}

.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(16, 24, 40, 0.38);
}

.confirm-dialog__panel {
    width: min(420px, 100%);
    background: #fff;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
}

.confirm-dialog__panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.confirm-dialog__panel p {
    margin: 0;
    color: var(--color-muted);
}

.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

@media (max-width: 960px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 10px;
        max-width: 100vw;
        overflow: hidden;
    }

    .brand-block {
        padding-bottom: 10px;
    }

    .app-nav {
        display: flex;
        overflow-x: auto;
        max-width: 100%;
    }

    .app-nav__item {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
    }

    .app-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .app-content {
        padding: 14px;
    }

    .filter-panel,
    .content-grid--drawer,
    .salary-grid,
    .organization-grid,
    .personal-filter-panel,
    .personal-report-grid {
        grid-template-columns: 1fr;
    }

    .cost-filter-panel {
        grid-template-columns: minmax(160px, 1fr) 112px 128px;
    }

    .cost-filter-field--keyword {
        grid-column: 1 / -1;
    }

    .cost-form-row--main {
        grid-template-columns: minmax(200px, 1fr) 108px 120px;
    }

    .cost-field--amount {
        grid-column: 1 / -1;
    }

    .cost-form-row--meta {
        grid-template-columns: 1fr 1fr;
    }

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

    .detail-drawer {
        position: static;
    }
}

@media (max-width: 1280px) {
    .cost-command-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .page-header-row {
        flex-direction: column;
    }

    .topbar-actions,
    .drawer-actions {
        width: 100%;
    }

    .topbar-actions {
        justify-content: flex-start;
    }

    .topbar-actions .btn {
        flex: 1 1 120px;
    }

    .drawer-actions {
        grid-template-columns: 1fr;
    }

    .cost-filter-panel,
    .cost-form-row--main,
    .cost-form-row--meta {
        grid-template-columns: 1fr;
    }

    .cost-filter-field--keyword,
    .cost-field--amount {
        grid-column: auto;
    }

    .cost-entry-header {
        align-items: stretch;
        flex-direction: column;
    }

    .cost-entry-header .btn {
        width: 100%;
    }

    .cost-summary-grid {
        grid-template-columns: 1fr;
    }
}

:root {
    --primary-color: #2196F3;
    --secondary-color: #757575;
    --danger-color: #f44336;
    --success-color: #4CAF50;
    --warning-color: #ff9800;
    --light-bg: #f5f5f5;
    --border-color: #e0e0e0;
    --text-color: #333;
    --text-light: #666;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--light-bg);
    color: var(--text-color);
    line-height: 1.6;
}

/* 独立登录页样式在 login.html 中自带（这里保留为空，避免影响主页面） */

/* ========================================
   容器布局
   ======================================== */

.container {
    min-height: 100vh;
}

/* 顶部 + 左侧布局容器 */
.layout {
    display: flex;
    width: 100%;
}

/* 顶部区域保持一行 */
.layout.header-row {
    flex-direction: row;
}

/* 主体区域：左侧导航 + 右侧内容 */
.layout.body-row {
    flex: 1;
    min-height: calc(100vh - 80px);
}

/* ========================================
   顶部导航栏
   ======================================== */

.header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1976D2 100%);
    color: white;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header h1 {
    font-size: 28px;
    font-weight: 600;
}

.header-info {
    display: flex;
    gap: 20px;
    font-size: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#currentUserInfo {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.2px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

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

.header-sp {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.header-sp label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

#currentLevel {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

/* 顶部按钮更醒目 */
.header .btn.btn-sm {
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    background: rgba(255,255,255,0.14);
}
.header .btn.btn-sm:hover {
    background: rgba(255,255,255,0.22);
}

.btn-danger {
    background: rgba(211, 47, 47, 0.92) !important;
    border-color: rgba(211, 47, 47, 0.8) !important;
}
.btn-danger:hover {
    background: rgba(211, 47, 47, 1) !important;
}

.header select.btn.btn-sm {
    color: #0b1b33;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.6);
}
.header select.btn.btn-sm:hover {
    background: #fff;
}

/* ========================================
   导航菜单
   ======================================== */

.nav-menu {
    display: flex;
    background-color: white;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

/* 左侧导航 */
.nav-menu.side {
    flex-direction: column;
    width: 220px;
    min-width: 220px;
    border-bottom: none;
    border-right: 1px solid var(--border-color);
    box-shadow: none;
    background-color: white;
}

.nav-menu.side .nav-btn {
    flex: none;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid transparent;
}

.nav-menu.side .nav-btn.active {
    border-bottom-color: var(--border-color);
    border-left-color: var(--primary-color);
}

.nav-btn {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-btn:hover {
    background-color: var(--light-bg);
    color: var(--primary-color);
}

.nav-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* ========================================
   主内容区域
   ======================================== */

.main-content {
    flex: 1;
    padding: 20px;
    width: 100%;
}

.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

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

/* ========================================
   卡片样式
   ======================================== */

.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.3s ease;
    min-width: 0; /* 允许卡片缩小 */
    overflow: hidden; /* 防止内容溢出 */
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

.card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.section-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.section-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--primary-color);
}

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

.section-title-row h3 {
    margin-bottom: 0;
}

.account-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.account-create-card {
    border-left: 4px solid var(--primary-color);
}

.account-actions {
    justify-content: flex-end;
}

.account-role,
.account-current-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.account-role.admin {
    background: #e8f5e9;
    color: #2e7d32;
}

.account-role.sales {
    background: #e3f2fd;
    color: #1565c0;
}

.account-current-badge {
    margin-left: 8px;
    background: #fff3e0;
    color: #ef6c00;
}

.account-table .btn + .btn {
    margin-left: 6px;
}

.data-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 10px;
    margin: -4px 0 10px;
    padding: 8px 0;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
}

.filter-input {
    min-width: 150px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: #fff;
}

#salesDataNameFilter {
    min-width: 200px;
}

.quick-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.filter-chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.filter-chip.active {
    border-color: var(--primary-color);
    background: #eef4ff;
    color: var(--primary-color);
    font-weight: 700;
}

.empty-state-actions {
    margin-top: 10px;
}

.toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px 12px 0;
    background: #fff;
    color: #1f2937;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
    overflow: hidden;
}

.toast::before {
    content: "";
    align-self: stretch;
    background: #2563eb;
}

.toast.success::before {
    background: #1f8f4d;
}

.toast.error::before {
    background: #d33f49;
}

.toast.warning::before {
    background: #c77800;
}

.toast-message {
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.toast-close {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.confirm-dialog[hidden] {
    display: none;
}

.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 2900;
    display: grid;
    place-items: center;
    padding: 18px;
}

.confirm-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.46);
}

.confirm-dialog__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border-radius: 8px;
    padding: 22px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.confirm-dialog__panel h3 {
    margin: 0 0 10px;
    color: #111827;
    font-size: 18px;
}

.confirm-dialog__panel p {
    margin: 0;
    color: #4b5563;
    line-height: 1.6;
}

.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

/* Product Design refresh: overview 1+3 */
.overview-workbench {
    gap: 18px;
}

.overview-command-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    min-height: 168px;
    padding: 26px 28px;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(23, 105, 224, 0.10), rgba(20, 163, 127, 0.08)),
        #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.overview-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(23, 105, 224, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #1769e0;
    font-size: 12px;
    font-weight: 900;
}

.overview-command-hero h1 {
    margin-top: 14px;
    color: #0f172a;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 950;
}

.overview-command-hero p {
    max-width: 680px;
    margin-top: 10px;
    color: #53657d;
    font-size: 14px;
}

.overview-command-hero__meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(112px, 1fr));
    gap: 10px;
    min-width: 420px;
}

.overview-command-hero__meta div {
    min-height: 76px;
    padding: 14px;
    border: 1px solid rgba(207, 219, 234, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
}

.overview-command-hero__meta span {
    display: block;
    color: #66768c;
    font-size: 12px;
    font-weight: 800;
}

.overview-command-hero__meta strong {
    display: block;
    min-width: 0;
    margin-top: 8px;
    color: #101828;
    font-size: 18px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-command-panel {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 132px auto minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.overview-command-panel label,
.overview-trend-panel .chart-title-actions label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

.overview-command-panel select,
.overview-command-panel input,
.overview-trend-panel .chart-title-actions input {
    height: 38px;
    border: 1px solid #cbd8e8;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
}

.overview-command-panel .btn {
    height: 38px;
    min-width: 96px;
    border-radius: 6px;
    font-weight: 900;
}

.overview-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.overview-kpi-card {
    position: relative;
    min-height: 128px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.overview-kpi-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eaf2ff;
}

.overview-kpi-card::after {
    content: "";
    position: absolute;
    top: 25px;
    right: 25px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #1769e0;
}

.overview-kpi-card--payment::before {
    background: #e7f8f2;
}

.overview-kpi-card--payment::after {
    background: #12805c;
}

.overview-kpi-card--commission::before {
    background: #fff5df;
}

.overview-kpi-card--commission::after {
    background: #b76e00;
}

.overview-kpi-card--todo::before {
    background: #fff0ee;
}

.overview-kpi-card--todo::after {
    background: #d92d20;
}

.overview-kpi-card span {
    display: block;
    color: #66768c;
    font-size: 13px;
    font-weight: 900;
}

.overview-kpi-card strong {
    display: block;
    margin-top: 12px;
    color: #0f172a;
    font-size: 25px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.overview-kpi-card small {
    display: block;
    margin-top: 10px;
    color: #66768c;
    font-size: 12px;
    font-weight: 750;
}

.overview-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.7fr);
    gap: 16px;
    align-items: stretch;
}

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

.overview-workbench .panel,
.overview-workbench .table-panel,
.overview-workbench .chart-panel {
    border: 1px solid #d8e3ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.overview-workbench .panel-title-row {
    min-height: 64px;
    padding: 0 18px;
    border-bottom: 1px solid #e8eef5;
}

.overview-workbench .panel-title-row > div {
    min-width: 0;
}

.overview-workbench .panel-title-row h2 {
    font-size: 17px;
}

.overview-workbench .panel-title-row p {
    margin-top: 3px;
    color: #66768c;
    font-size: 12px;
    font-weight: 650;
}

.overview-workbench .chart-title-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #53657d;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.overview-workbench .chart-title-actions input {
    width: 92px;
}

.overview-trend-panel {
    min-width: 0;
}

.overview-trend-panel .trend-line-chart {
    height: 330px;
    min-height: 330px;
    margin: 6px 12px 0;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

.overview-trend-panel .trend-line-chart__grid {
    stroke: #e3ebf4;
}

.overview-trend-panel .trend-line-chart__line {
    stroke-width: 3.2;
}

.overview-trend-panel .trend-line-chart__point {
    width: 9px;
    height: 9px;
}

.overview-trend-panel .trend-line-chart__value {
    border: 1px solid rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07);
    font-size: 11px;
}

.overview-trend-panel .trend-line-chart__value--sales {
    transform: translate(-50%, -28px);
}

.overview-trend-panel .trend-line-chart__value--payment {
    transform: translate(-50%, 18px);
}

.overview-trend-panel .trend-line-chart__legend {
    padding: 10px 18px 18px;
    border-top: 1px solid #eef3f8;
}

.task-panel {
    min-height: 100%;
}

.task-panel .task-list {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.task-panel .task-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 12px;
    border: 1px solid #e8eef5;
    border-radius: 8px;
    background: #fbfdff;
}

.task-panel .task-item strong {
    display: block;
    min-width: 0;
    color: #172033;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-panel .task-item span:not(.status-pill) {
    display: block;
    min-width: 0;
    margin-top: 4px;
    color: #66768c;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overview-table-title > span {
    flex: 0 0 auto;
    color: #66768c;
    font-size: 13px;
    font-weight: 900;
}

.overview-contract-table {
    min-width: 960px;
}

.overview-contract-table thead th {
    height: 42px;
    background: #f5f8fc;
    color: #53657d;
    font-size: 12px;
    font-weight: 950;
    border-bottom: 1px solid #dfe8f3;
}

.overview-contract-table tbody td {
    height: 54px;
    color: #243247;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
}

.overview-contract-table tbody tr:hover {
    background: #f8fbff;
}

.overview-contract-table .progress-cell {
    min-width: 160px;
}

.overview-contract-table .progress-cell > span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1180px) {
    .overview-command-hero {
        grid-template-columns: 1fr;
    }

    .overview-command-hero__meta {
        min-width: 0;
        width: 100%;
    }

    .overview-kpi-grid,
    .overview-secondary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-primary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .overview-command-hero {
        padding: 20px;
    }

    .overview-command-hero h1 {
        font-size: 28px;
    }

    .overview-command-hero__meta,
    .overview-kpi-grid,
    .overview-secondary-grid {
        grid-template-columns: 1fr;
    }

    .overview-command-panel {
        grid-template-columns: 1fr;
    }

    .overview-workbench .chart-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ========================================
   仪表板样式
   ======================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.info-item label {
    font-weight: 500;
    color: var(--text-light);
}

.info-item span {
    color: var(--primary-color);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.stat-item {
    min-width: 0; /* 允许内容缩小 */
    overflow: hidden;
}

.stat-item {
    text-align: center;
    padding: 15px;
    background-color: var(--light-bg);
    border-radius: 8px;
}

.stat-label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    word-break: break-all;
    overflow-wrap: break-word;
}

.recent-salary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.salary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: var(--light-bg);
    border-radius: 4px;
}

.salary-item span:last-child {
    color: var(--primary-color);
    font-weight: 600;
}

/* ========================================
   表单样式
   ======================================== */

.salesperson-form {
    display: flex;
    gap: 15px;
    align-items: flex-end;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-color);
}

.form-group input,
.form-group select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.calculation-form {
    background-color: var(--light-bg);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ========================================
   按钮样式
   ======================================== */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #1976D2;
    box-shadow: var(--shadow);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #616161;
    box-shadow: var(--shadow);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #d32f2f;
    box-shadow: var(--shadow);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ========================================
   表格样式
   ======================================== */

.table-container {
    overflow-x: auto;
    margin-top: 15px;
}

/* 固定表头（用于需要上下滚动展示的表格容器） */
.table-container.sticky-header {
    /* 横向滚动 + 纵向滚动 */
    overflow: auto;
    /* 默认给一个合理高度；如需更高/更低可按模块单独覆盖 */
    max-height: 520px;
    -webkit-overflow-scrolling: touch;
}

.table-container.sticky-header .data-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--light-bg) !important;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* 确保表头行也固定 */
.table-container.sticky-header .data-table thead {
    position: relative;
    z-index: 10;
}

/* 确保表格在容器内正确显示 */
.table-container.sticky-header .data-table {
    margin: 0;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 8px;
}

/* 对于固定表头的表格，需要separate模式才能让sticky生效 */
.table-container.sticky-header .data-table {
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead {
    background-color: var(--light-bg);
}

.data-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody tr:hover {
    background-color: var(--light-bg);
}

.data-table .empty-message {
    text-align: center;
    color: var(--text-light);
    padding: 30px !important;
}

/* ========================================
   结果显示样式
   ======================================== */

.result-box {
    background-color: var(--light-bg);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border-left: 4px solid var(--primary-color);
}

.result-box h4 {
    margin-bottom: 15px;
    color: var(--primary-color);
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.result-item span:first-child {
    color: var(--text-light);
}

.result-item span:last-child {
    color: var(--text-color);
    font-weight: 600;
}

.result-item.highlight {
    background-color: #e3f2fd;
    border-color: var(--primary-color);
}

.result-item.highlight span:last-child {
    color: var(--primary-color);
}

.result-item.total {
    grid-column: 1 / -1;
    font-size: 16px;
    padding: 15px;
}

/* ========================================
   模态框样式
   ======================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.modal-content {
    background-color: white;
    /*
      修复：在小屏/内容较多时，弹窗底部被截断（看不到保存/取消）
      方案：限制弹窗最大高度 + 允许内部滚动
    */
    margin: 5% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 20px;
}

.modal-body form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.data-modal {
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(3px);
}

.data-modal__content {
    width: min(92vw, 520px);
    max-width: none;
    margin: 6vh auto;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
    animation: dataModalIn 0.18s ease-out;
}

.data-modal__content--wide {
    width: min(92vw, 720px);
}

@keyframes dataModalIn {
    from {
        transform: translateY(10px) scale(0.99);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.data-modal__header {
    padding: 18px 22px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.data-modal__header h3 {
    margin-top: 3px;
    color: #111827;
    font-size: 20px;
    line-height: 1.25;
}

.data-modal__eyebrow {
    display: block;
    color: #1f6feb;
    font-size: 12px;
    font-weight: 800;
}

.data-modal .modal-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
}

.data-modal .modal-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.data-modal__body {
    padding: 22px;
    background: #ffffff;
}

.data-modal__body .data-modal__form {
    display: grid;
    gap: 14px;
}

.data-modal__body .data-modal__form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
}

.data-modal__section-title {
    grid-column: 1 / -1;
    padding: 2px 0 0;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.data-modal__field {
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.data-modal__field--wide {
    grid-column: 1 / -1;
}

.data-modal__field input,
.data-modal__field select {
    height: 42px;
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 0 12px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.data-modal__field input:hover,
.data-modal__field select:hover {
    border-color: #94a3b8;
}

.data-modal__field input:focus,
.data-modal__field select:focus {
    border-color: #1f6feb;
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.14);
}

.data-modal__field select:disabled {
    color: #64748b;
    background: #f8fafc;
}

.data-modal__footer {
    position: sticky;
    bottom: 0;
    padding: 14px 22px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
}

.data-modal__footer .btn {
    min-width: 88px;
    min-height: 38px;
}

.data-modal__footer .btn-secondary {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.data-modal__footer .btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.data-modal__footer .btn-primary {
    background: #1f6feb;
    color: #ffffff;
    border: 1px solid #1f6feb;
    box-shadow: 0 8px 18px rgba(31, 111, 235, 0.18);
}

.export-form {
    gap: 16px !important;
}

.export-option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.export-option-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid #d8e2ef;
    border-radius: 6px;
    background: #fbfdff;
    color: #243247;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.export-option-row input[type="checkbox"],
.export-option-row input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: #1f6feb;
    flex: 0 0 auto;
}

.data-modal__footer .btn-primary:hover {
    background: #185abc;
    border-color: #185abc;
}

@media (max-width: 680px) {
    .data-modal__content,
    .data-modal__content--wide {
        width: calc(100vw - 24px);
        margin: 12px auto;
        max-height: calc(100vh - 24px);
    }

    .data-modal__body .data-modal__form--grid {
        grid-template-columns: 1fr;
    }

    .data-modal__footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

.required {
    color: var(--danger-color);
}

/* ========================================
   薪酬明细控制
   ======================================== */

.details-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* ========================================
   折叠面板（Collapsible）
   ======================================== */
.collapsible {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    color: var(--primary-color);
    font-weight: 600;
}

.collapsible-header .chevron {
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 0.25s ease;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(-45deg);
    margin-left: 8px;
}

.collapsible.open .collapsible-header .chevron {
    transform: rotate(45deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 年→季折叠分组 */
.collapsible-group .year-item {
    border-top: 1px solid var(--border-color);
}

.collapsible-group .year-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
    font-weight: 600;
}

.collapsible-group .year-header .chevron {
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 0.25s ease;
    border-right: 2px solid var(--text-color);
    border-bottom: 2px solid var(--text-color);
    transform: rotate(-45deg);
    margin-left: 8px;
}

.collapsible-group .year-item.open .year-header .chevron {
    transform: rotate(45deg);
}

.collapsible-group .year-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.quarter-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
}

.quarter-row .label {
    color: var(--text-light);
}

.quarter-row .value {
    text-align: right;
    font-weight: 600;
}

/* ========================================
   响应式设计
   ======================================== */

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .header h1 {
        font-size: 24px;
    }

    .header-info {
        flex-direction: column;
        gap: 5px;
    }

    /* 小屏时左侧导航改为顶部横向 */
    .layout.body-row {
        flex-direction: column;
    }

    .nav-menu.side {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu.side .nav-btn {
        flex: 1 1 50%;
        text-align: center;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .nav-menu.side .nav-btn.active {
        border-left-color: transparent;
        border-bottom-color: var(--primary-color);
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .salesperson-form {
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .result-item.total {
        grid-column: 1;
    }

    .modal-content {
        width: 95%;
        margin: 20% auto;
    }

    .main-content {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .header h1 {
        font-size: 20px;
    }

    .header-info {
        font-size: 12px;
        gap: 10px;
    }

    .nav-btn {
        font-size: 12px;
        padding: 10px;
    }

    .card {
        padding: 15px;
    }

    .btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 8px;
        font-size: 12px;
    }

    .stat-value {
        font-size: 16px;
    }
}

/* ========================================
   打印样式
   ======================================== */

@media print {
    .nav-menu,
    .btn,
    .modal {
        display: none;
    }

    .card,
    .section-card {
        page-break-inside: avoid;
    }
}

/* ========================================
   辅助类
   ======================================== */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.hidden {
    display: none !important;
}

/* ========================================
   iOS风格设计 - 薪酬明细页面
   ======================================== */

.ios-style {
    background-color: #f2f2f7;
    min-height: 100vh;
    padding: 0;
}

.ios-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ios-header h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.5px;
}

.ios-header-actions {
    display: flex;
    gap: 16px;
}

.ios-btn-text {
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.ios-btn-text:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.ios-btn-text.ios-btn-danger {
    color: #ff3b30;
}

.ios-btn-text.ios-btn-danger:hover {
    background-color: rgba(255, 59, 48, 0.15);
}

/* iOS分组列表样式 */
.ios-section {
    margin: 20px 16px;
}

.ios-section-header {
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    margin-bottom: 8px;
}

.ios-list-group {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ios-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 0.5px solid #e5e5ea;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
}

.ios-list-item:last-child {
    border-bottom: none;
}

.ios-list-item:hover {
    background-color: #f9f9f9;
}

.ios-list-item:active {
    background-color: #e5e5ea;
}

.ios-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ios-list-item-title {
    font-size: 17px;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
}

.ios-list-item-subtitle {
    font-size: 15px;
    color: #8e8e93;
    line-height: 1.3;
}

.ios-list-item-value {
    font-size: 17px;
    font-weight: 500;
    color: #007aff;
    text-align: right;
    margin-left: 12px;
}

.ios-list-item-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid #c7c7cc;
    border-bottom: 2px solid #c7c7cc;
    transform: rotate(-45deg);
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.ios-list-item.expanded .ios-list-item-chevron {
    transform: rotate(45deg);
}

/* iOS嵌套列表 */
.ios-nested-list {
    background: #f2f2f7;
    border-top: 0.5px solid #e5e5ea;
    display: none;
    overflow: hidden;
}

.ios-list-item.expanded + .ios-nested-list {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

.ios-nested-item {
    padding: 12px 16px 12px 32px;
    border-bottom: 0.5px solid #e5e5ea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
}

.ios-nested-item:last-child {
    border-bottom: none;
}

.ios-nested-item-title {
    font-size: 15px;
    color: #000;
    font-weight: 400;
}

.ios-nested-item-value {
    font-size: 15px;
    color: #8e8e93;
    font-weight: 400;
}

/* iOS详情卡片 */
.ios-detail-card {
    background: white;
    border-radius: 12px;
    margin: 8px 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ios-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 12px;
}

.ios-detail-item {
    text-align: center;
}

.ios-detail-label {
    font-size: 13px;
    color: #8e8e93;
    margin-bottom: 4px;
}

.ios-detail-value {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.ios-detail-value.positive {
    color: #34c759;
}

.ios-detail-value.negative {
    color: #ff3b30;
}

/* iOS空状态 */
.ios-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #8e8e93;
}

.ios-empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.ios-empty-state-text {
    font-size: 17px;
    color: #8e8e93;
}

/* iOS徽章 */
.ios-badge {
    display: inline-block;
    background: #ff3b30;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
}

/* iOS操作栏 */
.ios-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #f9f9f9;
    border-top: 0.5px solid #e5e5ea;
    align-items: center;
}

.ios-btn-primary,
.ios-btn-secondary {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ios-btn-primary {
    background: #007aff;
    color: white;
}

.ios-btn-primary:hover {
    background: #0051d5;
}

.ios-btn-primary:active {
    background: #0040a8;
    transform: scale(0.98);
}

.ios-btn-secondary {
    background: #e5e5ea;
    color: #000;
}

.ios-btn-secondary:hover {
    background: #d1d1d6;
}

.ios-btn-secondary:active {
    background: #c7c7cc;
    transform: scale(0.98);
}

.ios-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 0.5px solid #c7c7cc;
    background: white;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    min-width: 100px;
}

.ios-select:focus {
    outline: none;
    border-color: #007aff;
}

.ios-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #000;
    cursor: pointer;
}

.ios-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #007aff;
}

/* iOS详情区块 */
.ios-detail-section {
    padding: 16px;
    border-top: 0.5px solid #e5e5ea;
}

.ios-detail-section:first-child {
    border-top: none;
}

.ios-detail-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin-bottom: 12px;
}

.ios-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ios-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.ios-table thead {
    background: #f9f9f9;
}

.ios-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #8e8e93;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 0.5px solid #e5e5ea;
}

.ios-table td {
    padding: 12px;
    border-bottom: 0.5px solid #e5e5ea;
    color: #000;
}

.ios-table tbody tr:last-child td {
    border-bottom: none;
}

.ios-table tbody tr:hover {
    background: #f9f9f9;
}

.ios-table .empty-message {
    text-align: center;
    color: #8e8e93;
    padding: 40px 20px;
    font-size: 15px;
}

/* iOS警告提示 */
.ios-warning {
    margin: 12px 16px;
    padding: 12px 16px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
    color: #856404;
}

.ios-warning.ios-warning-danger {
    background: #ffebee;
    border-left-color: #ff3b30;
    color: #c62828;
}

.ios-warning.ios-warning-success {
    background: #e8f5e9;
    border-left-color: #34c759;
    color: #2e7d32;
}

/* iOS信息提示 */
.ios-info {
    margin: 12px 16px;
    padding: 12px 16px;
    background: #e3f2fd;
    border-left: 4px solid #007aff;
    border-radius: 8px;
    font-size: 14px;
    color: #1565c0;
}

/* 资金池并列布局 */
.pool-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.pool-item {
    flex: 1;
    min-width: 300px;
}

/* 历史记录tab切换 */
.history-tabs {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.history-tab-header {
    display: flex;
    border-bottom: 0.5px solid #e5e5ea;
    background: #f9f9f9;
}

.history-tab-btn {
    flex: 1;
    padding: 16px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #8e8e93;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    border-bottom: 2px solid transparent;
}

.history-tab-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.history-tab-btn.active {
    color: #007aff;
    border-bottom-color: #007aff;
    background: white;
}

.history-tab-content {
    position: relative;
}

.history-tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.history-tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .layout.header-row {
        display: block;
    }

    .layout.body-row {
        display: block;
        min-height: auto;
    }

    .header {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
        padding: 14px;
    }

    .header h1 {
        font-size: 22px;
        line-height: 1.25;
    }

    .header-info,
    .header-actions,
    .header-sp {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    .nav-menu.side {
        position: sticky;
        top: 0;
        z-index: 100;
        flex-direction: row;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu.side .nav-btn {
        flex: 0 0 auto;
        width: auto;
        min-width: 92px;
        padding: 12px 14px;
        text-align: center;
        border-left: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .nav-menu.side .nav-btn.active {
        border-left-color: transparent;
        border-bottom-color: var(--primary-color);
    }

    .main-content {
        padding: 12px;
    }

    .section-card,
    .card {
        padding: 14px;
        margin-bottom: 14px;
    }

    .data-toolbar {
        position: static;
        align-items: stretch;
    }

    .data-toolbar .btn,
    .data-toolbar .filter-input {
        width: 100%;
        min-width: 0;
    }

    .quick-filter-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-chip {
        width: 100%;
        text-align: center;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 820px;
    }

    .modal-content,
    .confirm-dialog__panel {
        width: min(100%, 460px);
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .modal-footer,
    .confirm-dialog__actions {
        flex-wrap: wrap;
    }

    .modal-footer .btn,
    .confirm-dialog__actions .btn {
        flex: 1 1 140px;
    }

    .toast-container {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }

    .account-admin-layout {
        gap: 14px;
    }

    .ios-header {
        padding: 16px;
    }
    
    .ios-header h2 {
        font-size: 24px;
    }
    
    .ios-section {
        margin: 16px 12px;
    }
    
    .ios-detail-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .ios-action-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .ios-btn-primary,
    .ios-btn-secondary {
        width: 100%;
    }
    
    .ios-table {
        font-size: 13px;
    }
    
    .ios-table th,
    .ios-table td {
        padding: 8px;
    }
    
    /* 小屏幕时资金池改为垂直排列 */
    .pool-container {
        flex-direction: column;
    }
    
    .pool-item {
        min-width: 100%;
    }
}

/* ========================================
   UI redesign phase 1 final overrides
   Keep this block last so legacy styles cannot override the new app shell.
   ======================================== */

:root {
    --color-bg: #f3f6fa;
    --color-surface: #ffffff;
    --color-sidebar: #0f172a;
    --color-sidebar-soft: #172033;
    --color-border: #d9e2ec;
    --color-border-soft: #e8eef5;
    --color-text: #172033;
    --color-muted: #64748b;
    --color-primary: #1769e0;
    --color-primary-hover: #1257bc;
    --color-primary-soft: #eaf2ff;
    --color-success: #12805c;
    --color-success-soft: #e7f8f2;
    --color-warning: #b76e00;
    --color-warning-soft: #fff5df;
    --color-danger: #d92d20;
    --color-danger-soft: #fff0ee;
    --radius: 8px;
    --shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.05);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
}

input,
select,
button,
textarea {
    font: inherit;
    letter-spacing: 0;
}

.app-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--color-bg);
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px;
    background: var(--color-sidebar);
    color: #ffffff;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 20px;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #1f74ff;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
}

.brand-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.brand-subtitle {
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.app-nav {
    display: grid;
    gap: 3px;
}

.app-nav__item {
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 0 12px 0 16px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #cbd5e1;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.app-nav__item::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.app-nav__item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

.app-nav__item.active {
    background: var(--color-sidebar-soft);
    color: #ffffff;
}

.app-nav__item.active::before {
    background: #38bdf8;
}

.app-main {
    min-width: 0;
}

.app-topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 26px;
    background: #ffffff;
    border-bottom: 1px solid var(--color-border);
}

.topbar-title {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 850;
    color: var(--color-text);
}

.topbar-subtitle {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.35;
}

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

.user-chip {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.app-content {
    padding: 24px 26px 32px;
}

.page-stack {
    display: grid;
    gap: 16px;
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.page-header-row h1 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 850;
}

.page-header-row p {
    margin: 6px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.panel {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-panel);
}

.btn {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-secondary {
    background: #ffffff;
    border-color: var(--color-border);
    color: #334155;
}

.btn-secondary:hover {
    background: #f8fafc;
    border-color: #c8d4e2;
}

.btn-danger {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #ffffff !important;
}

.btn-sm {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

.filter-panel {
    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
}

.filter-panel label,
.data-modal__field,
.salary-form label,
.form-group {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.filter-panel input,
.filter-panel select,
.data-modal__field input,
.data-modal__field select,
.salary-form input,
.form-group input,
.form-group select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #cfd9e6;
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text);
    font-size: 14px;
    outline: none;
}

.filter-panel input:focus,
.filter-panel select:focus,
.data-modal__field input:focus,
.data-modal__field select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.12);
}

.overview-command-panel {
    grid-template-columns: minmax(220px, 280px) 124px auto;
    justify-content: start;
}

.dm-command-panel {
    grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) minmax(390px, auto) auto;
}

.dm-add-button {
    align-self: end;
}

.cost-filter-panel {
    grid-template-columns: minmax(180px, 240px) 112px 128px minmax(260px, 1fr) auto;
}

.status-chip-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.status-chip {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.status-chip.active {
    background: var(--color-primary-soft);
    border-color: #9fc2ff;
    color: var(--color-primary);
}

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

.kpi-card {
    min-height: 104px;
    padding: 15px 16px;
    display: grid;
    align-content: center;
    gap: 7px;
}

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

.kpi-card strong {
    display: block;
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 900;
}

.kpi-card small {
    color: #7a8797;
    font-size: 12px;
    font-weight: 700;
}

.overview-primary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: stretch;
}

.overview-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 16px;
}

.task-panel,
.table-panel,
.chart-panel {
    overflow: hidden;
    min-width: 0;
}

.task-list {
    display: grid;
    padding: 6px 0;
}

.task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border-soft);
}

.task-item:last-child {
    border-bottom: 0;
}

.task-item strong,
.task-item span {
    display: block;
}

.task-item strong {
    color: var(--color-text);
    font-size: 13px;
}

.task-item div > span {
    margin-top: 3px;
    color: var(--color-muted);
    font-size: 12px;
}

.content-grid--drawer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.panel-title-row {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
}

.panel-title-row h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 850;
}

.panel-title-row > span,
.chart-title-actions > span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.table-scroll {
    overflow: auto;
}

.enterprise-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    color: #1f2937;
}

.enterprise-table th,
.enterprise-table td {
    height: 48px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-soft);
    text-align: left;
    vertical-align: middle;
}

.enterprise-table th {
    height: 42px;
    background: #f7f9fc;
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
}

.enterprise-table td {
    font-size: 13px;
}

.enterprise-table tr:hover td {
    background: #fbfdff;
}

.progress-cell {
    display: grid;
    gap: 6px;
    min-width: 110px;
}

.progress-cell span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.progress {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef3f8;
}

.progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-primary), #14b8a6);
}

.status-pill {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 850;
}

.status-pill.valid {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.status-pill.expiring {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.status-pill.expired {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.status-pill.unknown {
    background: #eef2f7;
    color: var(--color-muted);
}

.detail-drawer {
    position: sticky;
    top: 88px;
    padding: 0;
    overflow: hidden;
}

.drawer-header {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.drawer-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.drawer-header p,
.muted {
    margin: 5px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.metric-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 8px 16px;
}

.metric-list > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-soft);
    border-radius: 0;
    background: transparent;
}

.metric-list > div:last-child {
    border-bottom: 0;
}

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

.metric-list strong {
    color: var(--color-text);
    font-size: 13px;
    text-align: right;
}

.drawer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.detail-drawer h3 {
    margin: 14px 16px 8px;
    font-size: 14px;
    font-weight: 850;
}

.timeline {
    display: grid;
    gap: 8px;
    padding: 0 16px 16px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
}

.timeline-item strong {
    color: #0f172a;
}

.timeline-item span {
    color: var(--color-muted);
    font-size: 12px;
}

.chart-title-row {
    align-items: center;
}

.chart-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.chart-title-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.chart-title-actions input {
    width: 92px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.simple-chart {
    display: grid;
    grid-template-columns: repeat(12, minmax(40px, 1fr));
    gap: 10px;
    align-items: end;
    min-height: 246px;
    padding: 16px 16px 8px;
    overflow-x: auto;
}

.simple-chart--quarter {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    min-height: 260px;
}

.simple-chart--compact {
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    min-height: 260px;
}

.simple-chart__group {
    min-height: 204px;
    display: grid;
    align-items: end;
    gap: 8px;
    color: var(--color-muted);
    text-align: center;
    font-size: 12px;
    font-weight: 800;
}

.simple-chart__bars {
    height: 182px;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid var(--color-border);
}

.simple-chart--quarter .simple-chart__bars,
.simple-chart--compact .simple-chart__bars {
    height: 198px;
}

.simple-chart__bar {
    width: 12px;
    border-radius: 5px 5px 0 0;
}

.simple-chart__bar.sales {
    background: var(--color-primary);
}

.simple-chart__bar.payment,
.simple-chart__bar.released {
    background: #14a37f;
}

.simple-chart__bar.pending {
    background: #64748b;
}

.simple-chart__bar.expiring {
    background: #d99000;
}

.chart-legend {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.cost-command-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 16px;
    align-items: stretch;
}

.cost-side-stack {
    display: grid;
    gap: 12px;
}

.cost-entry-panel {
    overflow: hidden;
}

.cost-entry-header {
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.cost-entry-header h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
    font-weight: 850;
}

.cost-entry-header p {
    margin: 4px 0 0;
    color: var(--color-muted);
    font-size: 13px;
}

.cost-entry-form {
    display: grid;
    gap: 14px;
    padding: 16px 18px 10px;
}

.cost-form-row {
    display: grid;
    gap: 12px;
    align-items: end;
}

.cost-form-row--main {
    grid-template-columns: minmax(220px, 1fr) 108px 118px minmax(150px, 0.75fr);
}

.cost-form-row--meta {
    grid-template-columns: minmax(220px, 0.9fr) minmax(300px, 1.3fr);
}

.cost-entry-note {
    padding: 0 18px 16px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 700;
}

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

.cost-kpi-card {
    min-height: 104px;
}

.cost-trend-panel {
    overflow: hidden;
}

.cost-trend-chart {
    height: 150px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    padding: 14px 16px 12px;
}

.cost-trend-point {
    height: 112px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 8px;
    align-items: end;
    text-align: center;
}

.cost-trend-point i {
    display: block;
    width: 100%;
    max-width: 24px;
    min-height: 2px;
    margin: 0 auto;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(180deg, #1769e0, #14a37f);
}

.cost-trend-point span {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    padding: 24px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.42);
}

.modal-content,
.data-modal__content {
    width: min(560px, 100%);
    margin: 6vh auto;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.26);
}

.data-modal__content--wide {
    width: min(860px, 100%);
}

.modal-header,
.data-modal__header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border);
    background: #fbfdff;
}

.modal-header h3,
.data-modal__header h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.data-modal__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 12px;
    font-weight: 800;
}

.modal-close,
.data-modal .modal-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: #f8fafc;
    color: #0f172a;
}

.modal-body,
.data-modal__body {
    padding: 18px;
}

.data-modal__form,
.data-modal__body .data-modal__form {
    display: grid;
    gap: 14px;
}

.data-modal__form--grid,
.data-modal__body .data-modal__form--grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.data-modal__section-title {
    grid-column: 1 / -1;
    margin: 4px 0 -2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-soft);
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.data-modal__field--wide {
    grid-column: 1 / -1;
}

.data-modal__footer,
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--color-border);
    background: #fbfdff;
}

.empty-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 120px;
    padding: 28px 16px;
    color: var(--color-muted);
    text-align: center;
}

.skeleton-line {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #eef3f8, #f8fafc, #eef3f8);
}

.toast {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-panel);
}

.toast.success { border-left: 4px solid var(--color-success); }
.toast.error { border-left: 4px solid var(--color-danger); }
.toast.warning { border-left: 4px solid var(--color-warning); }
.toast.info { border-left: 4px solid var(--color-primary); }

@media (max-width: 1280px) {
    .overview-primary-grid,
    .overview-secondary-grid,
    .content-grid--drawer,
    .cost-command-grid {
        grid-template-columns: 1fr;
    }

    .detail-drawer {
        position: static;
    }
}

@media (max-width: 1040px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        z-index: 50;
        height: auto;
        padding: 10px;
    }

    .brand-block {
        padding-bottom: 10px;
    }

    .app-nav {
        display: flex;
        gap: 6px;
        overflow-x: auto;
    }

    .app-nav__item {
        flex: 0 0 auto;
        width: auto;
        padding: 0 14px;
        white-space: nowrap;
    }

    .app-nav__item::before {
        display: none;
    }

    .filter-panel,
    .dm-command-panel,
    .cost-filter-panel,
    .overview-command-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-chip-row,
    .dm-add-button,
    .cost-filter-field--keyword {
        grid-column: 1 / -1;
    }

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

@media (max-width: 640px) {
    .app-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .app-content {
        padding: 14px;
    }

    .topbar-actions,
    .page-header-row,
    .cost-entry-header {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-panel,
    .dm-command-panel,
    .cost-filter-panel,
    .overview-command-panel,
    .kpi-grid,
    .cost-summary-grid,
    .cost-form-row--main,
    .cost-form-row--meta,
    .data-modal__form--grid,
    .data-modal__body .data-modal__form--grid {
        grid-template-columns: 1fr;
    }

    .status-chip-row,
    .dm-add-button,
    .cost-filter-field--keyword,
    .data-modal__section-title,
    .data-modal__field--wide {
        grid-column: auto;
    }

    .modal {
        padding: 12px;
    }

    .modal-content,
    .data-modal__content,
    .data-modal__content--wide {
        margin: 0 auto;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    .timeline-item {
        grid-template-columns: 1fr;
    }
}

/* EOF final active theme - appended */
.app-sidebar{background:#fff!important;color:#101828!important;border-right:1px solid #cfdbea!important;box-shadow:12px 0 34px rgba(16,24,40,.05)!important}
.brand-title{color:#101828!important}.brand-subtitle{color:#667085!important}
.app-nav__item{min-height:44px!important;padding:0 12px 0 34px!important;border:1px solid transparent!important;border-radius:8px!important;color:#344054!important;background:transparent!important}
.app-nav__item::before{left:14px!important;top:50%!important;bottom:auto!important;width:8px!important;height:8px!important;transform:translateY(-50%)!important;background:#d0d5dd!important}
.app-nav__item:hover{background:#f7faff!important;border-color:#dbe7f6!important;color:#1769e0!important}
.app-nav__item.active{background:#eaf2ff!important;border-color:#b8d2fb!important;color:#0f55bd!important;box-shadow:inset 4px 0 0 #1769e0!important}
.app-main{background:#edf2f8!important}
.app-topbar{background:#111827!important;border-bottom:0!important;color:#fff!important;box-shadow:0 14px 32px rgba(16,24,40,.16)!important}
.topbar-title,.user-chip{color:#fff!important}.topbar-subtitle{color:#cbd5e1!important}
.user-chip,.app-topbar .btn-secondary{border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.1)!important}
.app-topbar .btn-secondary{color:#fff!important}
.page-header-row,.panel,.filter-panel,.kpi-card{border-color:#cfdbea!important;border-radius:8px!important;background:#fff!important;box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 32px rgba(16,24,40,.07)!important}
.page-header-row{border-left:6px solid #1769e0!important}
input,select,textarea{min-height:44px!important;border-color:#cbd8e8!important;border-radius:7px!important}
.btn{min-height:40px!important;border-radius:7px!important;font-weight:850!important}
.salary-management-workspace .salary-preview-panel{background:#111827!important;border-color:#111827!important;color:#fff!important}

/* Product Design system final */
:root {
    --pd-bg: #f5f7fa;
    --pd-surface: #ffffff;
    --pd-sidebar: #111827;
    --pd-sidebar-active: #1f2937;
    --pd-border: #dde6f0;
    --pd-border-soft: #e9eef5;
    --pd-text: #101828;
    --pd-muted: #667085;
    --pd-primary: #1769e0;
    --pd-success: #12805c;
    --pd-warning: #b76e00;
    --pd-danger: #d92d20;
    --pd-radius: 8px;
    --pd-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 10px 24px rgba(16, 24, 40, 0.06);
}

.product-app-shell,
.app-shell {
    min-height: 100vh;
    background: var(--pd-bg);
}

.product-sidebar,
.app-sidebar.product-sidebar {
    background: var(--pd-sidebar) !important;
    color: #ffffff !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.product-sidebar .brand-title,
.app-sidebar.product-sidebar .brand-title {
    color: #ffffff !important;
}

.product-sidebar .brand-subtitle,
.app-sidebar.product-sidebar .brand-subtitle {
    color: #9aa7b8 !important;
}

.product-sidebar .app-nav__item,
.app-sidebar.product-sidebar .app-nav__item {
    color: #cbd5e1 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.product-sidebar .app-nav__item::before,
.app-sidebar.product-sidebar .app-nav__item::before {
    background: transparent !important;
}

.product-sidebar .app-nav__item:hover,
.app-sidebar.product-sidebar .app-nav__item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.product-sidebar .app-nav__item.active,
.app-sidebar.product-sidebar .app-nav__item.active {
    color: #ffffff !important;
    background: var(--pd-sidebar-active) !important;
    box-shadow: inset 4px 0 0 var(--pd-primary) !important;
}

.product-topbar,
.app-topbar.product-topbar {
    min-height: 68px;
    border-bottom: 1px solid var(--pd-border) !important;
    background: var(--pd-surface) !important;
    color: var(--pd-text) !important;
    box-shadow: none !important;
}

.app-topbar.product-topbar .topbar-title,
.app-topbar.product-topbar .user-chip {
    color: var(--pd-text) !important;
}

.app-topbar.product-topbar .topbar-subtitle {
    color: var(--pd-muted) !important;
}

.app-topbar.product-topbar .user-chip,
.app-topbar.product-topbar .btn-secondary {
    border-color: var(--pd-border) !important;
    background: #ffffff !important;
    color: var(--pd-text) !important;
}

.product-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 0 4px;
}

.product-page-header h1 {
    margin: 0;
    color: var(--pd-text);
    font-size: 28px;
    line-height: 1.16;
    font-weight: 950;
}

.product-page-header p {
    margin: 7px 0 0;
    color: var(--pd-muted);
    font-size: 13px;
}

.product-page-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #c7dbfa;
    border-radius: 999px;
    background: #f4f8ff;
    color: var(--pd-primary);
    font-size: 12px;
    font-weight: 900;
}

.product-command-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, max-content));
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    background: var(--pd-surface);
}

.product-command-bar label,
.product-form-grid label {
    display: grid;
    gap: 6px;
    color: var(--pd-muted);
    font-size: 12px;
    font-weight: 800;
}

.product-command-bar input,
.product-command-bar select,
.product-form-grid input,
.product-form-grid select,
.product-form-grid textarea {
    height: 38px;
    min-height: 38px !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: 6px !important;
    background: #ffffff;
    color: var(--pd-text);
}

.product-metric-card {
    position: relative;
    min-height: 116px;
    padding: 18px;
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    background: var(--pd-surface);
    box-shadow: var(--pd-shadow);
    overflow: hidden;
}

.product-metric-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eaf2ff;
}

.product-metric-card--payment::before,
.product-metric-card--success::before {
    background: #e7f8f2;
}

.product-metric-card--commission::before,
.product-metric-card--warning::before {
    background: #fff5df;
}

.product-metric-card--todo::before,
.product-metric-card--danger::before {
    background: #fff0ee;
}

.product-metric-card span,
.product-metric-card small {
    display: block;
    color: var(--pd-muted);
    font-size: 13px;
    font-weight: 800;
}

.product-metric-card strong {
    display: block;
    margin-top: 10px;
    color: var(--pd-text);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 950;
}

.product-data-table,
.enterprise-table.product-data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pd-surface);
}

.product-data-table thead th,
.enterprise-table.product-data-table thead th {
    height: 42px;
    background: #f5f8fc;
    color: #53657d;
    font-size: 12px;
    font-weight: 900;
}

.product-data-table tbody td,
.enterprise-table.product-data-table tbody td {
    height: 50px;
    border-bottom: 1px solid var(--pd-border-soft);
    color: #243247;
    font-size: 13px;
}

.product-detail-drawer {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    background: var(--pd-surface);
}

.product-modal .modal-content,
.data-modal.product-modal .data-modal__content {
    border-radius: var(--pd-radius);
    border: 1px solid var(--pd-border);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.22);
}

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

.product-status-tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.product-status-tag--neutral {
    background: #eef2f7;
    color: #475569;
}

.product-status-tag--success {
    background: #e7f8f2;
    color: var(--pd-success);
}

.product-status-tag--warning {
    background: #fff5df;
    color: var(--pd-warning);
}

.product-status-tag--danger {
    background: #fff0ee;
    color: var(--pd-danger);
}

.product-status-tag--primary {
    background: #eaf2ff;
    color: var(--pd-primary);
}

.product-chart-panel {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    background: var(--pd-surface);
}

.overview-summary-chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.overview-summary-chips span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    background: var(--pd-surface);
    color: var(--pd-muted);
    font-size: 12px;
    font-weight: 800;
}

.overview-summary-chips strong {
    color: var(--pd-text);
    font-weight: 950;
}

/* ========================================
   Product redesign refit: shell + overview
   Cost page structure intentionally unchanged.
   ======================================== */

:root {
    --refit-bg: #f4f7fb;
    --refit-sidebar: #07172b;
    --refit-sidebar-2: #0b213b;
    --refit-sidebar-active: #1463d8;
    --refit-text: #101828;
    --refit-muted: #667085;
    --refit-border: #d9e4f2;
    --refit-border-soft: #e8eef7;
    --refit-blue: #1463d8;
    --refit-green: #0f9f6e;
    --refit-orange: #f08a1c;
    --refit-red: #e43d43;
    --refit-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

body {
    background: var(--refit-bg) !important;
}

.app-shell.product-app-shell {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    min-height: 100vh;
    background: var(--refit-bg) !important;
}

.app-sidebar.product-sidebar {
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    padding: 20px 8px !important;
    overflow: hidden auto !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(27, 103, 220, 0.28), transparent 28%),
        linear-gradient(180deg, var(--refit-sidebar-2), var(--refit-sidebar)) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.app-sidebar.product-sidebar .brand-block {
    gap: 12px !important;
    min-height: 56px;
    padding: 0 10px 22px !important;
    border-bottom: 0 !important;
}

.app-sidebar.product-sidebar .brand-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #2682ff, #0f62d8) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 24px rgba(20, 99, 216, 0.25) !important;
}

.app-sidebar.product-sidebar .brand-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

.app-sidebar.product-sidebar .brand-subtitle {
    color: rgba(226, 236, 250, 0.72) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.app-sidebar.product-sidebar .app-nav {
    display: grid !important;
    gap: 8px !important;
    margin-top: 14px !important;
}

.app-sidebar.product-sidebar .app-nav__item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: rgba(232, 240, 252, 0.86) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.app-sidebar.product-sidebar .app-nav__item::before {
    display: none !important;
}

.app-sidebar.product-sidebar .app-nav__item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.app-sidebar.product-sidebar .app-nav__item.active {
    background: linear-gradient(135deg, #1971ee, #0f5ccc) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 24px rgba(12, 67, 153, 0.26) !important;
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    border-radius: 5px;
    color: currentColor;
    font-size: 17px;
    line-height: 1;
}

.sidebar-account {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding: 14px 10px 4px;
    color: #ffffff;
}

.sidebar-account__avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: #0a1d35;
    font-size: 13px;
}

.sidebar-account__text {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sidebar-account__text strong,
.sidebar-account__text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-account__text strong {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 850;
}

.sidebar-account__text small {
    color: rgba(226, 236, 250, 0.74);
    font-size: 12px;
    font-weight: 700;
}

.sidebar-account__chevron {
    color: rgba(226, 236, 250, 0.82);
    font-size: 26px;
    line-height: 1;
}

.app-main {
    min-width: 0 !important;
}

.app-topbar.product-topbar {
    min-height: 88px !important;
    padding: 18px 26px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--refit-border) !important;
    box-shadow: none !important;
}

.app-topbar.product-topbar .topbar-title {
    color: var(--refit-text) !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
}

.app-topbar.product-topbar .topbar-subtitle {
    margin-top: 8px !important;
    color: #5f6f86 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.app-topbar.product-topbar .user-chip {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    background: #f8fbff !important;
    border-color: var(--refit-border) !important;
    color: var(--refit-text) !important;
    font-size: 14px !important;
}

.app-topbar.product-topbar .btn {
    min-height: 40px !important;
    border-radius: 6px !important;
    padding-inline: 18px !important;
    font-size: 14px !important;
}

.app-topbar.product-topbar .btn-danger {
    background: #f04438 !important;
    border-color: #f04438 !important;
}

.app-content {
    padding: 16px 20px 28px !important;
}

.overview-workbench {
    gap: 14px !important;
}

.overview-scope-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.overview-scope-row span {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #ffffff;
    color: #4c5f78;
    font-size: 14px;
    font-weight: 750;
    box-shadow: var(--refit-shadow);
}

.overview-scope-row strong {
    color: var(--refit-blue);
    font-size: 16px;
    font-weight: 900;
}

.overview-workbench .product-command-bar.overview-command-panel {
    display: flex !important;
    align-items: end !important;
    gap: 16px !important;
    min-height: 74px;
    padding: 16px 18px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow);
}

.overview-workbench .product-command-bar label {
    min-width: 220px;
    color: #53657d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.overview-workbench .product-command-bar input,
.overview-workbench .product-command-bar select {
    height: 40px !important;
    border-radius: 6px !important;
    border-color: #cfdbea !important;
    background: #ffffff !important;
    font-weight: 700;
}

.overview-workbench .product-command-bar .btn {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 20px !important;
    border-radius: 6px !important;
}

.overview-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.overview-kpi-grid .product-metric-card {
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
}

.overview-kpi-grid .product-metric-card::before {
    display: none !important;
}

.overview-kpi-grid .product-metric-card__body {
    order: 2;
    min-width: 0;
}

.overview-kpi-grid .product-metric-card__icon {
    order: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf2ff;
    color: var(--refit-blue);
    font-style: normal;
    font-size: 22px;
    font-weight: 900;
}

.overview-kpi-grid .product-metric-card--payment .product-metric-card__icon {
    background: #e9f8f1;
    color: var(--refit-green);
}

.overview-kpi-grid .product-metric-card--commission .product-metric-card__icon {
    background: #fff2dc;
    color: var(--refit-orange);
}

.overview-kpi-grid .product-metric-card--todo .product-metric-card__icon {
    background: #fff0f0;
    color: var(--refit-red);
}

.overview-kpi-grid .product-metric-card span {
    color: #53657d !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.overview-kpi-grid .product-metric-card strong {
    margin-top: 8px !important;
    color: #101828 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.overview-kpi-grid .product-metric-card small {
    margin-top: 8px;
    color: #11845b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
}

.overview-primary-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr) !important;
    gap: 14px !important;
}

.overview-secondary-grid {
    display: none !important;
}

.overview-workbench .panel,
.overview-workbench .table-panel,
.overview-workbench .chart-panel {
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
}

.overview-workbench .panel-title-row {
    min-height: 56px !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--refit-border) !important;
}

.overview-workbench .panel-title-row h2 {
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.overview-workbench .panel-title-row p,
.overview-workbench .chart-title-actions span {
    color: #667085 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.overview-workbench .trend-line-chart {
    min-height: 280px !important;
    margin: 4px 14px 0 !important;
}

.overview-workbench .chart-legend {
    padding: 0 20px 16px !important;
}

.overview-workbench .task-item {
    min-height: 58px;
    padding: 12px 18px !important;
}

.overview-workbench .table-panel {
    overflow: hidden !important;
}

.overview-workbench .enterprise-table.product-data-table {
    min-width: 980px !important;
}

.overview-workbench .enterprise-table.product-data-table th {
    height: 42px !important;
    background: #f7f9fd !important;
    color: #53657d !important;
    font-weight: 900 !important;
}

.overview-workbench .enterprise-table.product-data-table td {
    height: 52px !important;
    color: #243247 !important;
}

.overview-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.overview-report-card {
    overflow: hidden;
}

.overview-report-metrics,
.overview-type-list,
.overview-cost-list {
    display: grid;
    gap: 12px;
    padding: 16px 18px 18px;
}

.overview-report-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-report-metrics div {
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 12px;
    border: 1px solid #e5ebf3;
    border-radius: 6px;
    background: #f8fafc;
}

.overview-report-metrics span,
.overview-type-row span,
.overview-cost-row span {
    color: #667085;
    font-size: 12px;
    font-weight: 800;
}

.overview-report-metrics strong,
.overview-type-row strong,
.overview-cost-row strong {
    color: #101828;
    font-size: 16px;
    font-weight: 950;
    white-space: nowrap;
}

.overview-type-row,
.overview-cost-row {
    display: grid;
    grid-template-columns: minmax(96px, 0.8fr) minmax(120px, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 12px;
}

.overview-type-row > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.overview-type-row > div:first-child strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1120px) {
    .overview-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .overview-primary-grid {
        grid-template-columns: 1fr !important;
    }

    .overview-report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .app-shell.product-app-shell {
        grid-template-columns: 1fr !important;
    }

    .app-sidebar.product-sidebar {
        position: static !important;
        height: auto !important;
    }

    .app-sidebar.product-sidebar .app-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar-account {
        display: none;
    }

    .app-topbar.product-topbar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .overview-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .overview-workbench .product-command-bar.overview-command-panel {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .overview-workbench .product-command-bar label {
        min-width: 0;
    }

    .overview-report-metrics {
        grid-template-columns: 1fr;
    }

    .overview-type-row,
    .overview-cost-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* ========================================
   Product redesign refit: data management + salary details
   ======================================== */

.data-management-workspace,
.salary-details-workspace {
    gap: 14px !important;
}

.data-management-workspace .product-command-bar.dm-command-panel {
    display: grid !important;
    grid-template-columns: minmax(170px, 220px) minmax(260px, 1fr) auto auto !important;
    align-items: end !important;
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow);
}

.data-management-workspace .product-command-bar label {
    color: #53657d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.data-management-workspace .product-command-bar input,
.data-management-workspace .product-command-bar select {
    height: 40px !important;
    border-radius: 6px !important;
    border-color: #cfdbea !important;
    font-weight: 700;
}

.data-management-workspace .status-chip-row {
    gap: 8px !important;
    align-self: end;
}

.data-management-workspace .status-chip {
    min-height: 34px !important;
    border-radius: 6px !important;
    border-color: var(--refit-border) !important;
    background: #f8fbff !important;
    color: #53657d !important;
}

.data-management-workspace .status-chip.active {
    background: var(--refit-blue) !important;
    border-color: var(--refit-blue) !important;
    color: #ffffff !important;
}

.data-management-workspace .dm-add-button {
    min-height: 40px !important;
    padding-inline: 20px !important;
    border-radius: 6px !important;
}

.dm-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.dm-kpi-grid .product-metric-card,
.salary-summary-grid .product-metric-card {
    min-height: 116px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 58px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
}

.dm-kpi-grid .product-metric-card::before,
.salary-summary-grid .product-metric-card::before {
    display: none !important;
}

.dm-kpi-grid .product-metric-card__icon,
.salary-summary-grid .product-metric-card__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf2ff;
    color: var(--refit-blue);
    font-style: normal;
    font-size: 22px;
    font-weight: 900;
}

.dm-kpi-grid .product-metric-card--payment .product-metric-card__icon {
    background: #e9f8f1;
    color: var(--refit-green);
}

.dm-kpi-grid .product-metric-card--warning .product-metric-card__icon {
    background: #fff2dc;
    color: var(--refit-orange);
}

.dm-kpi-grid .product-metric-card span,
.salary-summary-grid .product-metric-card span {
    color: #53657d !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.dm-kpi-grid .product-metric-card strong,
.salary-summary-grid .product-metric-card strong {
    margin-top: 8px !important;
    color: #101828 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.dm-kpi-grid .product-metric-card small,
.salary-summary-grid .product-metric-card small {
    margin-top: 8px;
    color: #11845b !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.data-management-workspace .content-grid--drawer {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.dm-table-card,
.dm-detail-card,
.salary-details-workspace .panel {
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
}

.dm-table-card {
    overflow: hidden !important;
}

.dm-table-card .panel-title-row,
.dm-detail-card .drawer-header,
.salary-details-workspace .panel-title-row {
    min-height: 52px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--refit-border) !important;
    background: #ffffff !important;
}

.dm-table-card .panel-title-row h2,
.salary-details-workspace .panel-title-row h2 {
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.dm-table-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

#dmBatchSelectedCount {
    color: var(--refit-blue);
}

.dm-table-card .enterprise-table.product-data-table {
    min-width: 980px !important;
}

.dm-table-card .enterprise-table.product-data-table .dm-select-col {
    width: 42px !important;
    min-width: 42px !important;
    text-align: center !important;
}

.dm-table-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--refit-blue);
}

.dm-table-card .enterprise-table.product-data-table th,
.salary-details-workspace .product-data-table th {
    height: 42px !important;
    background: #f7f9fd !important;
    color: #53657d !important;
    font-weight: 900 !important;
}

.dm-table-card .enterprise-table.product-data-table td,
.salary-details-workspace .product-data-table td {
    height: 50px !important;
    color: #243247 !important;
}

.dm-detail-card {
    position: sticky !important;
    top: 104px !important;
    align-self: start;
    overflow: hidden !important;
}

.dm-detail-card .drawer-header {
    position: relative;
    padding-right: 44px !important;
}

.dm-detail-card .drawer-header h2 {
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.dm-detail-card .drawer-header p {
    color: #667085 !important;
    font-weight: 700;
}

.drawer-close-ghost {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    font-size: 22px;
    line-height: 1;
}

.dm-detail-card .metric-list {
    padding: 10px 16px !important;
}

.dm-detail-card .metric-list > div {
    padding: 12px 0 !important;
}

.dm-detail-card .drawer-actions {
    grid-template-columns: 1fr 1fr !important;
    padding: 14px 16px !important;
    background: #fbfdff !important;
}

.dm-detail-card .drawer-actions .btn {
    min-height: 36px !important;
}

.dm-detail-card .timeline {
    padding: 0 14px 16px !important;
}

.dm-detail-card .timeline-item {
    border-color: var(--refit-border) !important;
    border-radius: 6px !important;
    background: #fbfdff !important;
}

.salary-visit-summary-field {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 12px;
    border: 1px solid #d9e4f2;
    border-radius: 6px;
    background: #f8fbff;
}

.salary-visit-summary-field > span {
    color: #53657d;
    font-size: 13px;
    font-weight: 800;
}

.salary-visit-summary-field strong {
    color: #1f4d8f;
    font-size: 15px;
}

.salary-visit-summary-field small {
    color: #73839a;
    font-size: 12px;
}

.salary-visit-summary-field .btn {
    grid-row: span 2;
}

.visit-record-modal__content {
    width: min(1040px, calc(100vw - 48px)) !important;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 24px);
    overflow: hidden;
}

.visit-record-modal .data-modal__header,
.visit-record-modal .data-modal__footer {
    flex: 0 0 auto;
}

.visit-record-modal .data-modal__body {
    min-height: 0;
    overflow-y: auto;
}

.visit-record-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(96px, .7fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.visit-record-grid__header {
    padding: 0 2px 8px;
    color: #73839a;
    font-size: 12px;
    font-weight: 800;
}

.visit-record-list {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.visit-record-grid input,
.visit-record-grid select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #cfdbea;
    border-radius: 6px;
    background: #fff;
}

@media (max-width: 760px) {
    .visit-record-grid {
        grid-template-columns: 1fr 1fr;
        padding: 10px;
        border: 1px solid #d9e4f2;
        border-radius: 6px;
        background: #fbfdff;
    }

    .visit-record-grid__header {
        display: none;
    }

    .visit-record-grid .btn {
        grid-column: 1 / -1;
    }

    .visit-record-modal__content {
        width: min(100vw - 24px, 1040px) !important;
    }
}

.salary-details-workspace .salary-details-toolbar {
    display: grid !important;
    grid-template-columns: minmax(200px, 1.2fr) minmax(116px, 0.45fr) minmax(110px, 0.4fr) minmax(0, 2fr) !important;
    align-items: end !important;
    gap: 16px !important;
    padding: 14px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow);
}

.salary-details-workspace .salary-details-toolbar label {
    color: #53657d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.salary-details-workspace .salary-details-toolbar select,
.salary-details-workspace .salary-details-toolbar input {
    height: 40px !important;
    border-radius: 6px !important;
    border-color: #cfdbea !important;
    font-weight: 700;
}

.salary-details-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.salary-details-actions .btn {
    min-height: 40px !important;
    border-radius: 6px !important;
}

.salary-monthly-panel {
    overflow: hidden;
}

.salary-monthly-panel__header p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

.salary-monthly-panel__count {
    color: #667085;
    font-size: 13px;
    font-weight: 800;
}

.salary-monthly-table {
    min-width: 1380px !important;
}

.salary-monthly-actions {
    white-space: nowrap;
}

.salary-monthly-actions .btn + .btn {
    margin-left: 6px;
}

.salary-calc-modal__content,
.payroll-print-modal__content {
    width: min(900px, calc(100vw - 48px)) !important;
}

.salary-calc-modal__content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.salary-calc-modal .data-modal__header,
.salary-calc-modal .data-modal__footer {
    flex: 0 0 auto;
}

.salary-calc-modal .data-modal__body {
    min-height: 0;
    overflow-y: auto;
}

.salary-calc-modal .data-modal__footer {
    position: static;
}

.salary-calc-form .data-modal__field > span {
    display: flex;
    gap: 8px;
}

.salary-calc-form .data-modal__field > span input {
    min-width: 0;
    flex: 1;
}

.salary-calc-form .data-modal__field > span .btn {
    flex: 0 0 auto;
}

.salary-score-preview {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #d9e4f2;
    border-radius: 6px;
    background: #f8fbff;
    color: #53657d;
    font-size: 13px;
}

.salary-score-preview p {
    margin: 0;
}

.salary-score-preview__header,
.salary-score-preview__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.salary-score-preview__header strong,
.salary-score-preview__total strong {
    color: #101828;
    font-size: 15px;
}

.salary-score-preview__header span {
    color: #53657d;
}

.salary-score-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.salary-score-preview__grid > div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e3ebf5;
    border-radius: 6px;
    background: #ffffff;
}

.salary-score-preview__grid span,
.salary-score-preview__grid strong {
    display: block;
}

.salary-score-preview__grid span {
    color: #667085;
    font-size: 12px;
}

.salary-score-preview__grid strong {
    margin-top: 4px;
    color: #1769e0;
    font-size: 18px;
}

.salary-score-preview__total {
    padding-top: 12px;
    border-top: 1px solid #d9e4f2;
}

.salary-score-preview__total strong {
    color: #1769e0;
    font-size: 22px;
}

.payroll-print-table {
    min-width: 760px !important;
}

.salary-calc-result__module {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9e4f2;
    border-radius: 6px;
    background: #fff;
}

.salary-calc-result__module > strong {
    display: block;
    margin-bottom: 8px;
    color: #101828;
}

.salary-calc-result__module--config span {
    color: #53657d;
}

.salary-calc-result__basis {
    margin-top: 12px;
    color: #53657d;
}

.assessment-payroll-sheet {
    color: #111827;
    font-size: 12px;
}

.assessment-payroll-sheet h1,
.assessment-payroll-sheet h2,
.assessment-payroll-sheet__identity,
.assessment-payroll-sheet__signatures {
    text-align: center;
}

.assessment-payroll-sheet h1 {
    margin: 0 0 10px;
    font-size: 22px;
}

.assessment-payroll-sheet h2 {
    margin: 18px 0 8px;
    font-size: 16px;
}

.assessment-payroll-sheet__identity,
.assessment-payroll-sheet__signatures {
    margin: 8px 0 12px;
}

.assessment-payroll-sheet table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.assessment-payroll-sheet th,
.assessment-payroll-sheet td {
    padding: 7px 6px;
    border: 1px solid #111827;
    text-align: center;
    vertical-align: middle;
}

.assessment-payroll-sheet th {
    background: #eef4fa;
    font-weight: 800;
}

.assessment-payroll-sheet__supervisor-cell {
    min-height: 28px;
}

.assessment-payroll-sheet__contracts-title {
    page-break-before: auto;
}

@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body > * { display: none !important; }
    #sdPayrollPrintModal,
    #sdPayrollPrintModal .modal-content,
    #sdPayrollPrintModal .modal-body,
    #sdPayrollPrintBody {
        display: block !important;
        position: static !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    #sdPayrollPrintModal .modal-header,
    #sdPayrollPrintModal .data-modal__footer { display: none !important; }
    .assessment-payroll-sheet { font-size: 10pt; }
    .assessment-payroll-sheet h1 { font-size: 16pt; }
    .assessment-payroll-sheet h2 { font-size: 12pt; }
    .assessment-payroll-sheet thead { display: table-header-group; }
    .assessment-payroll-sheet tr { break-inside: avoid; }
}

.salary-details-workspace .salary-summary-panel {
    overflow: hidden !important;
}

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

.salary-details-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(390px, 0.9fr);
    gap: 12px;
    align-items: start;
}

.salary-details-left-stack {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.salary-pool-panel {
    position: sticky;
    top: 104px;
    overflow: hidden;
}

.salary-details-workspace .ios-section {
    padding: 12px !important;
}

.salary-details-workspace .ios-list-group {
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    overflow: hidden;
    background: #ffffff;
}

.salary-details-workspace .ios-list-item {
    min-height: 58px !important;
    border-bottom: 1px solid var(--refit-border-soft) !important;
    background: #ffffff !important;
}

.salary-details-workspace .pool-container {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
}

.salary-details-workspace .pool-item {
    min-width: 0 !important;
}

.salary-details-workspace .ios-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
}

.salary-details-workspace .ios-detail-item {
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #fbfdff !important;
}

.salary-details-workspace .history-tab-header {
    gap: 8px !important;
    padding: 0 0 10px !important;
}

.salary-details-workspace .history-tab-btn {
    min-height: 34px !important;
    border-radius: 6px !important;
}

@media (max-width: 1180px) {
    .data-management-workspace .product-command-bar.dm-command-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dm-kpi-grid,
    .salary-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .data-management-workspace .content-grid--drawer,
    .salary-details-main-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-details-workspace .salary-details-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dm-detail-card,
    .salary-pool-panel {
        position: static !important;
    }
}

@media (max-width: 680px) {
    .data-management-workspace .product-command-bar.dm-command-panel,
    .salary-details-workspace .salary-details-toolbar {
        grid-template-columns: 1fr !important;
    }

    .dm-kpi-grid,
    .salary-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .salary-details-actions {
        justify-content: flex-start !important;
    }

    .salary-score-preview__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================
   Product redesign refit: secondary pages
   ======================================== */

.salary-management-workspace > .product-page-header,
.analytics-workspace > .product-page-header,
.organization-workspace > .product-page-header,
.audit-workspace > .product-page-header {
    display: none !important;
}

.salary-management-workspace,
.analytics-workspace,
.organization-workspace,
.audit-workspace {
    gap: 14px !important;
}

.salary-management-workspace .product-command-bar,
.analytics-workspace .product-command-bar {
    display: flex !important;
    align-items: end !important;
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow);
}

.salary-management-workspace .product-command-bar label,
.analytics-workspace .product-command-bar label {
    min-width: 180px;
    color: #53657d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.salary-management-workspace .product-command-bar input,
.salary-management-workspace .product-command-bar select,
.analytics-workspace .product-command-bar input,
.analytics-workspace .product-command-bar select {
    height: 40px !important;
    border-radius: 6px !important;
    border-color: #cfdbea !important;
    font-weight: 700;
}

.salary-management-workspace .salary-calc-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr) !important;
    gap: 12px !important;
}

.salary-management-workspace .panel,
.analytics-workspace .panel,
.organization-workspace .panel,
.audit-workspace .panel {
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
    overflow: hidden;
}

.salary-management-workspace .salary-panel-head,
.salary-management-workspace .panel-title-row,
.analytics-workspace .panel-title-row,
.organization-workspace .panel-title-row,
.audit-workspace .panel-title-row {
    min-height: 54px !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--refit-border) !important;
    background: #ffffff !important;
}

.salary-management-workspace .salary-panel-head h2,
.salary-management-workspace .panel-title-row h2,
.analytics-workspace .panel-title-row h2,
.organization-workspace .panel-title-row h2,
.audit-workspace .panel-title-row h2 {
    color: #101828 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

.salary-management-workspace .salary-panel-head p {
    color: #667085 !important;
    font-weight: 700;
}

.salary-management-workspace .salary-score-form {
    padding: 16px !important;
}

.salary-management-workspace .salary-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.salary-management-workspace .salary-score-grid label,
.organization-workspace .product-form-grid label {
    color: #53657d !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

.salary-management-workspace .salary-score-grid input,
.organization-workspace .product-form-grid input,
.organization-workspace .product-form-grid select {
    height: 40px !important;
    border-radius: 6px !important;
    border-color: #cfdbea !important;
    font-weight: 700;
}

.salary-management-workspace .salary-calc-btn,
.salary-management-workspace .salary-save-btn {
    min-height: 40px !important;
    margin-top: 14px;
    border-radius: 6px !important;
}

.salary-management-workspace .salary-preview-panel {
    min-height: 100% !important;
    display: grid;
}

.salary-management-workspace .salary-preview {
    padding: 22px !important;
}

.salary-management-workspace .preview-total {
    color: var(--refit-blue) !important;
    font-size: 34px !important;
    font-weight: 950 !important;
}

.analytics-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
}

.analytics-summary-grid .product-metric-card {
    min-height: 112px !important;
    border-radius: 6px !important;
    border-color: var(--refit-border) !important;
    box-shadow: var(--refit-shadow) !important;
}

.analytics-summary-grid .product-metric-card::before {
    display: none !important;
}

.analytics-summary-grid .product-metric-card strong {
    font-size: 24px !important;
    white-space: nowrap;
}

.organization-workspace .account-create-card {
    margin: 0 !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--refit-border) !important;
    background: #fbfdff !important;
}

.organization-workspace .account-create-card h3 {
    margin: 0 0 12px !important;
    color: #101828 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.organization-workspace .account-create-card .product-form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    align-items: end !important;
    gap: 12px !important;
}

.organization-workspace .account-create-card .btn {
    min-height: 40px !important;
    border-radius: 6px !important;
}

.analytics-workspace .enterprise-table.product-data-table,
.organization-workspace .enterprise-table.product-data-table,
.audit-workspace .enterprise-table.product-data-table,
.salary-management-workspace .enterprise-table.product-data-table {
    min-width: 900px !important;
}

.analytics-workspace .enterprise-table.product-data-table th,
.organization-workspace .enterprise-table.product-data-table th,
.audit-workspace .enterprise-table.product-data-table th,
.salary-management-workspace .enterprise-table.product-data-table th {
    height: 42px !important;
    background: #f7f9fd !important;
    color: #53657d !important;
    font-weight: 900 !important;
}

.analytics-workspace .enterprise-table.product-data-table td,
.organization-workspace .enterprise-table.product-data-table td,
.audit-workspace .enterprise-table.product-data-table td,
.salary-management-workspace .enterprise-table.product-data-table td {
    height: 50px !important;
    color: #243247 !important;
}

/* ========================================
   Product redesign refit: modal and report polish
   ======================================== */

.dm-contract-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.modal.show,
.data-modal.show,
.product-modal.show {
    display: block !important;
}

.dm-table-card .table-scroll {
    min-height: 420px;
}

.row-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.row-action-group .btn {
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 850 !important;
}

.dm-batch-edit-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.dm-batch-field {
    display: grid;
    grid-template-columns: 18px 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #fbfdff;
    color: #53657d;
    font-size: 13px;
    font-weight: 900;
}

.dm-batch-check,
.dm-batch-field input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    accent-color: var(--refit-blue);
}

.dm-batch-field > span {
    color: #243247;
    font-weight: 900;
}

.dm-batch-field input:not([type="checkbox"]),
.dm-batch-field select {
    width: 100%;
    height: 38px !important;
    border-radius: 6px !important;
}

.contract-detail-modal .data-modal__content {
    width: min(980px, calc(100vw - 48px));
}

.contract-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
    gap: 16px;
}

.contract-detail-main,
.contract-payment-stage-list {
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #ffffff;
}

.contract-detail-main {
    padding: 18px;
}

.contract-detail-heading {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--refit-border);
}

.contract-detail-heading h2 {
    margin: 0;
    color: #101828;
    font-size: 22px;
    font-weight: 950;
}

.contract-detail-heading p {
    margin: 6px 0 0;
    color: #53657d;
    font-size: 14px;
    font-weight: 750;
}

.contract-detail-main .metric-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.contract-detail-main .metric-list > div {
    min-height: 70px;
    padding: 12px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #f8fbff;
}

.contract-detail-main .metric-list span {
    display: block;
    color: #667085;
    font-size: 12px;
    font-weight: 850;
}

.contract-detail-main .metric-list strong {
    display: block;
    margin-top: 8px;
    color: #101828;
    font-size: 16px;
    font-weight: 950;
}

.contract-detail-main .drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contract-payment-stage-list {
    overflow: hidden;
}

.contract-payment-stage-list h3 {
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--refit-border);
    color: #101828;
    font-size: 16px;
    font-weight: 950;
}

.contract-payment-stage-list .timeline {
    display: grid;
    gap: 0;
}

.contract-payment-stage-list .timeline-item {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--refit-border);
}

.contract-payment-stage-list .timeline-item strong {
    color: #101828;
    font-weight: 950;
}

.contract-payment-stage-list .timeline-item span {
    color: #53657d;
    font-weight: 750;
}

.salary-details-main-grid {
    align-items: start;
}

.salary-history-panel .payout-table-shell {
    padding: 0;
}

.salary-history-panel {
    min-width: 0;
}

.salary-commission-export-controls {
    flex-wrap: wrap;
    align-items: end;
}

.salary-commission-export-controls > span {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--pd-muted);
    font-size: 12px;
    line-height: 1.6;
}

.payout-tab-header {
    display: flex;
    gap: 24px;
    padding: 0 16px;
    border-bottom: 1px solid var(--refit-border);
    background: #ffffff;
}

.payout-tab-header .history-tab-btn {
    min-height: 48px;
    padding: 0 2px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #53657d;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.payout-tab-header .history-tab-btn.active {
    border-bottom-color: var(--refit-blue);
    color: var(--refit-blue);
}

.payout-table {
    min-width: 760px !important;
}

.pool-launch-grid {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.pool-launch-card {
    min-height: 118px;
    padding: 16px;
    display: grid;
    justify-items: start;
    gap: 8px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #f8fbff;
    color: #243247;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.pool-launch-card:hover {
    border-color: #9dc0f5;
    box-shadow: 0 10px 28px rgba(23, 105, 224, 0.12);
    transform: translateY(-1px);
}

.pool-launch-card span {
    color: #53657d;
    font-size: 13px;
    font-weight: 900;
}

.pool-launch-card strong {
    color: #101828;
    font-size: 28px;
    font-weight: 950;
}

.pool-launch-card small {
    color: #667085;
    font-size: 12px;
    font-weight: 750;
}

.pool-detail-modal__content {
    width: min(1120px, calc(100vw - 48px)) !important;
}

.payout-detail-modal__content {
    width: min(1180px, calc(100vw - 48px)) !important;
}

.payout-detail-modal .data-modal__body {
    max-height: 72vh;
    overflow: auto;
}

.payout-detail-modal .table-container,
.payout-detail-modal .ios-table-container {
    overflow-x: auto;
}

.payout-detail-modal table {
    min-width: 980px;
}

.pool-detail-modal .pool-item,
.pool-detail-modal .ios-list-group {
    border: 0 !important;
    box-shadow: none !important;
}

.pool-detail-modal .ios-list-item {
    display: none !important;
}

.pool-detail-modal .ios-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.legacy-history-groups {
    display: none !important;
}

.analytics-chart-panel .panel-title-row span {
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.analytics-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 14px;
    padding: 16px;
}

.analytics-bars-card,
.analytics-rank-card {
    padding: 16px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #ffffff;
}

.analytics-bars-card h3,
.analytics-rank-card h3 {
    margin: 0 0 14px;
    color: #101828;
    font-size: 16px;
    font-weight: 950;
}

.analytics-bars {
    display: grid;
    gap: 12px;
}

.analytics-bar-row {
    display: grid;
    grid-template-columns: 96px repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 10px;
}

.analytics-bar-row > span {
    overflow: hidden;
    color: #53657d;
    font-size: 13px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-bar-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.analytics-bar-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.analytics-bar-track i.sales,
.legend-dot.sales {
    background: #1769e0;
}

.analytics-bar-track i.payment,
.legend-dot.payment {
    background: #12a37f;
}

.analytics-bar-track i.cost,
.legend-dot.cost {
    background: #f59e0b;
}

.analytics-bar-track i.travel,
.legend-dot.travel {
    background: #1769e0;
}

.analytics-bar-track i.other-cost,
.legend-dot.other-cost {
    background: #f59e0b;
}

.analytics-rank-card ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.analytics-rank-card li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--refit-border);
    border-radius: 6px;
    background: #f8fbff;
}

.analytics-rank-card li span {
    overflow: hidden;
    color: #243247;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-rank-card li strong {
    color: var(--refit-blue);
    font-weight: 950;
    white-space: nowrap;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    color: #53657d;
    font-size: 12px;
    font-weight: 850;
}

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

.legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 999px;
}

/* ========================================
   Focused fixes: cost density, salary pools, sales date filters
   ======================================== */

.data-management-workspace .product-command-bar.dm-command-panel {
    grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) 148px 148px minmax(360px, auto) auto !important;
}

.data-management-workspace .dm-filter-field--date input {
    width: 100%;
}

.cost-filter-panel {
    grid-template-columns: minmax(170px, 240px) 100px 120px 132px minmax(220px, 1fr) !important;
}

.cost-command-grid {
    grid-template-columns: minmax(560px, 1fr) minmax(480px, 520px) !important;
    align-items: start !important;
}

.cost-side-stack {
    display: grid !important;
    gap: 14px !important;
    min-width: 0 !important;
}

.cost-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.cost-kpi-card {
    min-height: 92px !important;
    padding: 14px 16px !important;
}

.cost-kpi-card span {
    font-size: 12px !important;
    white-space: nowrap;
}

.cost-kpi-card strong {
    margin-top: 8px !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
}

.cost-trend-panel {
    min-height: 218px !important;
}

.cost-trend-chart {
    height: 164px !important;
    padding: 16px 18px 14px !important;
    gap: 14px !important;
}

.cost-trend-point {
    height: 126px !important;
}

.cost-entry-panel {
    min-height: 0 !important;
}

.cost-entry-header {
    align-items: center !important;
    min-height: 54px !important;
    padding: 10px 14px !important;
}

.cost-entry-header h2 {
    font-size: 15px !important;
}

.cost-entry-header p {
    margin-top: 2px !important;
    font-size: 12px !important;
}

.cost-entry-header .btn {
    min-height: 34px !important;
    padding: 0 14px !important;
}

.cost-entry-form {
    gap: 10px !important;
    padding: 12px 14px 8px !important;
}

.cost-form-row {
    gap: 10px !important;
}

.cost-form-row--main {
    grid-template-columns: minmax(190px, 1fr) 96px 108px minmax(128px, 0.65fr) !important;
}

.cost-form-row--meta {
    grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr) !important;
}

.cost-entry-form .data-modal__field {
    gap: 4px !important;
    font-size: 12px !important;
}

.cost-entry-form .data-modal__field input,
.cost-entry-form .data-modal__field select {
    height: 34px !important;
}

.cost-entry-note {
    padding: 0 14px 12px !important;
    font-size: 12px !important;
}

.cost-management-workspace .cost-entry-panel--wide {
    overflow: hidden !important;
}

.cost-entry-form--wide {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) 96px 108px 118px 136px minmax(180px, 0.9fr) minmax(220px, 1fr) !important;
    align-items: end !important;
    gap: 12px !important;
    padding: 14px !important;
}

.cost-entry-form--wide .data-modal__field {
    min-width: 0 !important;
}

.cost-summary-grid--wide {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.cost-summary-grid--wide .cost-kpi-card {
    min-height: 108px !important;
    display: grid !important;
    align-content: center !important;
    border: 1px solid var(--refit-border) !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: var(--refit-shadow) !important;
}

.cost-summary-grid--wide .cost-kpi-card strong {
    font-size: 24px !important;
}

.cost-trend-panel--wide {
    overflow: hidden !important;
}

.cost-trend-panel--wide .cost-trend-chart {
    min-height: 230px !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    padding: 20px 24px 16px !important;
    gap: 12px !important;
}

.cost-trend-panel--wide .cost-line-chart {
    height: 300px !important;
    min-height: 300px !important;
}

.cost-trend-panel--wide .trend-line-chart__legend {
    margin-top: 8px;
}

.cost-trend-bars {
    height: 170px;
    display: grid;
    grid-template-columns: repeat(6, minmax(70px, 1fr));
    align-items: end;
    gap: 22px;
}

.cost-trend-panel--wide .cost-trend-point {
    height: 166px !important;
}

.cost-trend-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #53657d;
    font-size: 12px;
    font-weight: 850;
}

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

.cost-type-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 999px;
}

.cost-type-dot.travel,
.cost-trend-bar--travel,
.cost-type-pill--travel {
    background: #1769e0;
}

.cost-type-dot.other,
.cost-trend-bar--other,
.cost-type-pill--other {
    background: #f59e0b;
}

.cost-trend-stack {
    width: min(28px, 70%);
    min-height: 2px;
    display: flex;
    flex-direction: column-reverse;
    justify-self: center;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    background: #eef2f7;
}

.cost-trend-bar {
    width: 100%;
    display: block;
}

.cost-type-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.salary-details-main-grid {
    grid-template-columns: 1fr !important;
}

.salary-pool-panel--compact {
    position: static !important;
    overflow: hidden;
}

.salary-pool-panel--compact .panel-title-row span {
    color: #667085;
    font-size: 13px;
    font-weight: 850;
}

.salary-pool-panel--compact .pool-launch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
}

.salary-pool-panel--compact .pool-launch-card {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
    padding: 12px 14px;
}

.salary-pool-panel--compact .pool-launch-card span,
.salary-pool-panel--compact .pool-launch-card small {
    grid-column: 1;
}

.salary-pool-panel--compact .pool-launch-card strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 22px;
    white-space: nowrap;
}

.analytics-workspace .analytics-command-panel {
    flex-wrap: wrap !important;
}

.analytics-workspace .analytics-command-panel label {
    min-width: 138px !important;
}

.analytics-workspace .analytics-filter-keyword {
    min-width: 240px !important;
    flex: 1 1 260px;
}

.analytics-workspace .analytics-filter-month,
.analytics-workspace .analytics-filter-quarter {
    min-width: 128px !important;
}

.analytics-workspace .analytics-command-panel select:disabled {
    background: #f2f5f9 !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    .salary-management-workspace .salary-calc-grid {
        grid-template-columns: 1fr !important;
    }

    .analytics-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .contract-detail-grid,
    .analytics-chart-grid {
        grid-template-columns: 1fr;
    }

    .data-management-workspace .product-command-bar.dm-command-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cost-command-grid {
        grid-template-columns: 1fr !important;
    }

    .cost-entry-form--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .cost-summary-grid--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pool-detail-modal .ios-detail-grid {
        grid-template-columns: 1fr;
    }

    .organization-workspace .account-create-card .product-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    .salary-management-workspace .product-command-bar,
    .analytics-workspace .product-command-bar {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .salary-management-workspace .product-command-bar label,
    .analytics-workspace .product-command-bar label {
        min-width: 0;
    }

    .analytics-summary-grid,
    .organization-workspace .account-create-card .product-form-grid,
    .salary-management-workspace .salary-score-grid {
        grid-template-columns: 1fr !important;
    }

    .contract-payment-stage-list .timeline-item,
    .analytics-bar-row {
        grid-template-columns: 1fr;
    }

    .salary-pool-panel--compact .pool-launch-grid,
    .cost-entry-form--wide,
    .cost-form-row--main,
    .cost-form-row--meta {
        grid-template-columns: 1fr !important;
    }

    .cost-summary-grid--wide {
        grid-template-columns: 1fr !important;
    }

    .salary-pool-panel--compact .pool-launch-card {
        grid-template-columns: 1fr;
    }

    .salary-pool-panel--compact .pool-launch-card strong {
        grid-column: 1;
        grid-row: auto;
    }

    .row-action-group {
        flex-wrap: wrap;
    }
}