/* CashewPro UI revamp — Phase 1: design tokens + shared shell + dashboard.
   Loaded after styles.css on every page (see UI-BRIEF.md). Dashboard-only
   rules are scoped under body.page-dashboard so other pages are untouched. */

/* ===================== DESIGN TOKENS ===================== */
:root {
    --cw-bg: #F8FAFC;
    --cw-surface: #FFFFFF;
    --cw-surface-soft: #F5F8FC;
    --cw-tint-blue: #EFF4FE;
    --cw-tint-orange: #FBF3EC;
    --cw-border: #E3EAF3;
    --cw-border-soft: #EDF1F7;
    --cw-text-primary: #16223D;
    --cw-text-secondary: #60708F;
    --cw-text-muted: #8A98B3;
    --cw-primary: #3B82F6;
    --cw-primary-soft: #E8F0FE;
    --cw-primary-dark: #2C6BE0;
    --cw-orange: #E3A379;
    --cw-orange-soft: #FAF0E8;
    --cw-green: #4FA98C;
    --cw-green-soft: #EAF4F1;
    --cw-purple: #9A8AD4;
    --cw-purple-soft: #F1EEFA;
    --cw-red: #D9808F;
    --cw-red-soft: #FBEDEF;
    --cw-ink-navy: #101C35;
    --cw-sidebar-active-bg: #EAF1FE;
    --cw-contour: #EAB393;

    /* nav rail — theme-independent dark navy (the app's own default before
       the Phase-1 restyle); pastel-tinted active state */
    --cw-nav-bg: #0E1A2E;
    --cw-nav-bg-soft: rgba(255, 255, 255, 0.06);
    --cw-nav-border: rgba(255, 255, 255, 0.08);
    --cw-nav-text: #A9B8D4;
    --cw-nav-text-strong: #FFFFFF;
    --cw-nav-muted: #6E7E9E;
    --cw-nav-active-bg: rgba(59, 130, 246, 0.18);
    --cw-nav-accent: #3B82F6;

    /* alias the app's existing variable system onto the new palette, so
       every untouched page inherits the new colours automatically */
    --navy-primary: var(--cw-ink-navy);
    --navy-dark: #0B1426;
    --navy-light: #1F3A63;
    --navy-accent: var(--cw-primary);
    --navy-hover: var(--cw-primary-dark);
    --success: var(--cw-green);
    --warning: var(--cw-orange);
    --danger: var(--cw-red);

    --bg-primary: var(--cw-bg);
    --bg-secondary: var(--cw-surface-soft);
    --bg-card: var(--cw-surface);
    --text-primary: var(--cw-text-primary);
    --text-secondary: var(--cw-text-secondary);
    --text-muted: var(--cw-text-muted);
    --border-color: var(--cw-border);
    --border-light: var(--cw-border-soft);
    --shadow-color: rgba(17, 38, 76, 0.05);
    --shadow-hover: rgba(17, 38, 76, 0.1);
    --input-bg: #FFFFFF;
    --input-border: #DDE6F0;
    --table-hover: var(--cw-surface-soft);
    --skeleton-base: #EEF2F7;
    --skeleton-shine: #E3E9F1;
}

body.dark-mode {
    --cw-bg: #0B1426;
    --cw-surface: #101C35;
    --cw-surface-soft: #15233D;
    --cw-tint-blue: rgba(59, 130, 246, 0.14);
    --cw-tint-orange: rgba(227, 163, 121, 0.14);
    --cw-border: #223150;
    --cw-border-soft: #1B2740;
    --cw-text-primary: #EAF0FB;
    --cw-text-secondary: #9FB0CC;
    --cw-text-muted: #7487A8;
    --cw-primary-soft: rgba(59, 130, 246, 0.18);
    --cw-orange-soft: rgba(227, 163, 121, 0.16);
    --cw-green-soft: rgba(79, 169, 140, 0.16);
    --cw-purple-soft: rgba(154, 138, 212, 0.18);
    --cw-red-soft: rgba(217, 128, 143, 0.16);
    --cw-sidebar-active-bg: rgba(59, 130, 246, 0.18);
    --cw-nav-bg: #070E1B;
    --cw-nav-active-bg: rgba(59, 130, 246, 0.22);

    --navy-primary: #0B1426;
    --navy-dark: #060B14;
    --navy-light: #1F3A63;

    --bg-primary: var(--cw-bg);
    --bg-secondary: var(--cw-surface-soft);
    --bg-card: var(--cw-surface);
    --text-primary: var(--cw-text-primary);
    --text-secondary: var(--cw-text-secondary);
    --text-muted: var(--cw-text-muted);
    --border-color: var(--cw-border);
    --border-light: var(--cw-border-soft);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.4);
    --input-bg: var(--cw-surface-soft);
    --input-border: var(--cw-border);
    --table-hover: var(--cw-surface-soft);
    --skeleton-base: var(--cw-surface-soft);
    --skeleton-shine: var(--cw-border-soft);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* keyboard-only focus ring, app-wide — doesn't affect mouse/touch interaction or layout */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cw-primary);
    outline-offset: 2px;
}

/* ===================== SHELL: SIDEBAR ===================== */
/* Dark navy rail in both themes (the app's own 'navy' default), denser than the
   Phase-1 white version: smaller type + tighter rows so more destinations fit
   without scrolling. The 'white' theme mode still switches to a light sidebar
   via the .sidebar-light class. */
.sidebar:not(.sidebar-light) {
    background: var(--cw-nav-bg);
    color: var(--cw-nav-text);
    border-right: 1px solid var(--cw-nav-border);
    box-shadow: none;
}

.sidebar:not(.sidebar-light) .sidebar-header,
.sidebar:not(.sidebar-light) .sidebar-logo-section {
    border-bottom: 1px solid var(--cw-nav-border);
}

.sidebar:not(.sidebar-light) .sidebar-header {
    padding: 12px 12px;
}

.sidebar:not(.sidebar-light) .sidebar-logo-section {
    background: transparent;
    padding: 10px;
}

.sidebar-header {
    padding: 12px 12px;
}

.sidebar-logo-section {
    background: transparent;
    padding: 10px;
}

.sidebar-title {
    color: var(--cw-text-primary);
    font-size: 14.5px;
    font-weight: 650;
    gap: 8px;
}

.sidebar:not(.sidebar-light) .sidebar-title {
    color: var(--cw-nav-text-strong);
}

.sidebar-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--cw-orange);
    color: #24160A;
    font-size: 11px;
}

.sidebar-toggle-btn {
    background: var(--cw-surface-soft);
    color: var(--cw-text-secondary);
    border-radius: 6px;
}

.sidebar-toggle-btn:hover {
    background: var(--cw-border-soft);
}

.sidebar:not(.sidebar-light) .sidebar-toggle-btn {
    background: var(--cw-nav-bg-soft);
    color: var(--cw-nav-text);
}

.sidebar:not(.sidebar-light) .sidebar-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-logo {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-color: var(--cw-border);
    box-shadow: none;
}

.sidebar-menu {
    padding: 0 8px;
}

.sidebar-menu-title {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    margin: 8px 0 3px;
    padding: 3px 8px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--cw-text-muted);
    font-weight: 700;
}

.sidebar:not(.sidebar-light) .sidebar-menu-title {
    color: var(--cw-nav-muted);
}

.sidebar-menu-title:hover {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
}

.sidebar:not(.sidebar-light) .sidebar-menu-title:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--cw-nav-text-strong);
}

.sidebar-menu li {
    margin-bottom: 1px;
}

.sidebar-menu a,
.sidebar-menu button {
    color: var(--cw-text-secondary);
    border-radius: 7px;
    min-height: 31px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 500;
    gap: 9px;
}

.sidebar:not(.sidebar-light) .sidebar-menu a,
.sidebar:not(.sidebar-light) .sidebar-menu button {
    color: var(--cw-nav-text);
}

.sidebar-menu a:hover,
.sidebar-menu button:hover {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    transform: none;
}

.sidebar:not(.sidebar-light) .sidebar-menu a:hover,
.sidebar:not(.sidebar-light) .sidebar-menu button:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cw-nav-text-strong);
}

.sidebar-menu a.active,
.sidebar-menu button.active {
    background: var(--cw-sidebar-active-bg);
    color: var(--cw-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--cw-primary);
}

.sidebar:not(.sidebar-light) .sidebar-menu a.active,
.sidebar:not(.sidebar-light) .sidebar-menu button.active {
    background: var(--cw-nav-active-bg);
    color: var(--cw-nav-text-strong);
    box-shadow: inset 2px 0 0 var(--cw-nav-accent);
}

.sidebar-menu i {
    width: 15px;
    font-size: 12.5px;
    text-align: center;
}

.submenu-arrow {
    color: var(--cw-text-muted);
}

.sidebar:not(.sidebar-light) .submenu-arrow {
    color: var(--cw-nav-muted);
}

.submenu-toggle.open .submenu-arrow {
    color: var(--cw-primary);
}

.submenu-toggle.active {
    background: var(--cw-sidebar-active-bg);
    color: var(--cw-primary);
}

.sidebar:not(.sidebar-light) .submenu-toggle.active {
    background: var(--cw-nav-active-bg);
    color: var(--cw-nav-text-strong);
}

.sidebar-submenu {
    background: var(--cw-surface-soft);
}

.sidebar:not(.sidebar-light) .sidebar-submenu {
    background: rgba(0, 0, 0, 0.20);
}

.sidebar-submenu a {
    color: var(--cw-text-secondary);
    min-height: 26px;
    padding: 4px 10px;
    font-size: 11.5px;
}

.sidebar:not(.sidebar-light) .sidebar-submenu a {
    color: var(--cw-nav-text);
}

.sidebar-submenu a:hover {
    background: var(--cw-border-soft);
    color: var(--cw-text-primary);
    border-left-color: var(--cw-primary);
}

.sidebar:not(.sidebar-light) .sidebar-submenu a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--cw-nav-text-strong);
    border-left-color: var(--cw-nav-accent);
}

.sidebar-submenu a.active {
    background: var(--cw-sidebar-active-bg);
    color: var(--cw-primary);
    border-left-color: var(--cw-primary);
    font-weight: 600;
}

.sidebar:not(.sidebar-light) .sidebar-submenu a.active {
    background: var(--cw-nav-active-bg);
    color: var(--cw-nav-text-strong);
    border-left-color: var(--cw-nav-accent);
}

/* the collapsed flyout submenu keeps a dark chip in every theme */
.sidebar.collapsed .sidebar-submenu a {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar.collapsed .sidebar-submenu a:hover,
.sidebar.collapsed .sidebar-submenu a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-theme,
.sidebar-logout {
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid var(--cw-nav-border);
    padding: 8px;
}

.sidebar:not(.sidebar-light) .sidebar-theme button {
    width: 100% !important;
    padding: 7px 10px !important;
    background: var(--cw-nav-bg-soft) !important;
    border: 1px solid var(--cw-nav-border) !important;
    color: var(--cw-nav-text) !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    gap: 8px !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.sidebar:not(.sidebar-light) .sidebar-theme button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--cw-nav-text-strong) !important;
    transform: none !important;
}

.sidebar:not(.sidebar-light) .sidebar-theme button i,
.sidebar:not(.sidebar-light) .sidebar-theme button span {
    font-size: 12px;
}

.sidebar-logout button {
    background: var(--cw-red-soft);
    border: 1px solid rgba(217, 128, 143, 0.3);
    color: var(--cw-red);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 12px;
}

.sidebar:not(.sidebar-light) .sidebar-logout button {
    background: rgba(217, 128, 143, 0.12) !important;
    border: 1px solid rgba(217, 128, 143, 0.26) !important;
    color: #E8A9B3 !important;
}

.sidebar-logout button:hover {
    background: rgba(217, 128, 143, 0.2);
    transform: none;
}

/* 'white' theme mode — light sidebar stays available */
.sidebar.sidebar-light {
    background: var(--cw-surface);
    color: var(--cw-text-secondary);
    border-right: 1px solid var(--cw-border);
}

.sidebar.sidebar-light .sidebar-header,
.sidebar.sidebar-light .sidebar-logo-section {
    background: var(--cw-surface);
    border-bottom: 1px solid var(--cw-border);
}

.sidebar.sidebar-light .sidebar-title {
    color: var(--cw-text-primary);
}

.sidebar.sidebar-light .sidebar-menu-title {
    color: var(--cw-text-muted);
}

.sidebar.sidebar-light .sidebar-menu a,
.sidebar.sidebar-light .sidebar-menu button,
.sidebar.sidebar-light .sidebar-submenu a {
    color: var(--cw-text-secondary);
}

.sidebar.sidebar-light .sidebar-submenu {
    background: var(--cw-surface-soft);
}

.sidebar.sidebar-light .sidebar-theme,
.sidebar.sidebar-light .sidebar-logout {
    background: var(--cw-surface-soft);
    border-top: 1px solid var(--cw-border);
}

/* ===================== SHELL: QUICK-ADD (unscoped — injected on every page) ===================== */
.desktop-quick-add-btn {
    background: var(--cw-tint-blue);
    color: var(--cw-primary);
    box-shadow: none;
}

.desktop-quick-add-btn:hover {
    background: var(--cw-primary-soft);
    box-shadow: none;
    transform: none;
}

/* ===================== SHELL: DASHBOARD TOP BAR (scoped) ===================== */
body.page-dashboard .header {
    display: none;
}

body.page-dashboard .dash-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

body.page-dashboard .dash-topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 380px;
    height: 34px;
    padding: 0 11px;
    background: var(--bg-card);
    border: 1px solid var(--input-border);
    border-radius: 10px;
    color: var(--cw-text-muted);
}

body.page-dashboard .dash-topbar-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

body.page-dashboard .dash-topbar-search input::placeholder {
    color: var(--cw-text-muted);
}

body.page-dashboard .dash-search-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--cw-text-muted);
    background: var(--cw-surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 6px;
}

body.page-dashboard .time-filter-tabs {
    display: inline-flex;
    background: var(--cw-surface-soft);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: none;
    padding: 3px;
    gap: 2px;
}

body.page-dashboard .time-filter-tabs button {
    border-radius: 7px;
    padding: 5px 11px;
    color: var(--text-secondary);
}

body.page-dashboard .time-filter-tabs button:hover {
    background: var(--bg-card);
    color: var(--cw-primary);
}

body.page-dashboard .time-filter-tabs button.active {
    background: var(--bg-card);
    color: var(--cw-primary);
    box-shadow: 0 1px 4px var(--shadow-color);
}

body.page-dashboard .dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

body.page-dashboard .dash-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* shared notification bell + quick-add, injected here by sidebar.php */
body.page-dashboard .dash-topbar-actions #notifBellWrap {
    margin-right: 0;
}

body.page-dashboard .dash-topbar-actions #notifBell i {
    font-size: 17px !important;
    color: var(--cw-text-secondary) !important;
}

body.page-dashboard .dash-topbar-actions #notifBell:hover i {
    color: var(--cw-primary) !important;
}

body.page-dashboard .dash-topbar-actions #notifPanel {
    right: 0;
}

body.page-dashboard .dash-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-dashboard .dash-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cw-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

body.page-dashboard .dash-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.page-dashboard .dash-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

body.page-dashboard .dash-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

body.page-dashboard .dash-user-role {
    font-size: 11px;
    color: var(--cw-text-muted);
}

body.page-dashboard .dash-lang-switch {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--cw-text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background .15s, color .15s;
}

body.page-dashboard .dash-lang-switch:hover {
    background: var(--cw-tint-blue);
    color: var(--cw-primary);
}

/* ===================== DASHBOARD: HERO ===================== */
body.page-dashboard .dash-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 84px;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
}

body.page-dashboard .dash-hero-art {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cg fill='none' stroke='%23EAB393' stroke-width='1.2' opacity='0.16'%3E%3Cpath d='M0 40 Q 100 0 200 40 T 400 40 T 600 40'/%3E%3Cpath d='M0 80 Q 100 40 200 80 T 400 80 T 600 80'/%3E%3Cpath d='M0 120 Q 100 80 200 120 T 400 120 T 600 120'/%3E%3Cpath d='M0 160 Q 100 120 200 160 T 400 160 T 600 160'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 60% auto;
    pointer-events: none;
}

body.page-dashboard .dash-hero-left {
    position: relative;
    z-index: 1;
}

body.page-dashboard .dash-hero-overline {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--cw-text-muted);
    margin-bottom: 3px;
}

body.page-dashboard .dash-hero-greeting {
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 3px;
}

body.page-dashboard .dash-hero-name {
    color: var(--cw-primary);
}

body.page-dashboard .dash-hero-sub {
    font-size: 12.5px;
    color: var(--cw-text-secondary);
}

body.page-dashboard .dash-season-pill {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    flex-shrink: 0;
}

body.page-dashboard .dash-season-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cw-green);
    flex-shrink: 0;
}

body.page-dashboard .dash-season-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

body.page-dashboard .dash-season-status {
    font-size: 10px;
    color: var(--cw-green);
}

/* ===================== DASHBOARD: KPI CARDS ===================== */
body.page-dashboard .kpi-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    box-shadow: 0 8px 24px var(--shadow-color);
}

body.page-dashboard .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px var(--shadow-hover);
}

body.page-dashboard .kpi-card-icon {
    border-radius: 7px;
    width: 26px;
    height: 26px;
    font-size: 11px;
}

body.page-dashboard .kpi-card-value {
    color: var(--text-primary);
    font-weight: 650;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard .kpi-card-top {
    margin-bottom: 6px;
}

body.page-dashboard .kpi-card-sub {
    font-size: 10.5px;
}

body.page-dashboard .kpi-card-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cw-text-muted);
    margin-bottom: 3px;
}

body.page-dashboard .dashboard-primary-kpi .kpi-card {
    padding: 12px 16px;
    position: relative;
}

body.page-dashboard .dashboard-primary-kpi .kpi-card-icon {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

body.page-dashboard .dashboard-primary-kpi .kpi-card-value {
    font-size: 21px;
}

body.page-dashboard .dashboard-primary-kpi .kpi-card-label {
    font-size: 10px;
}

/* subtle decorative wave accent behind the primary metric — stands in for a
   per-card sparkline without a second Chart.js instance per card */
body.page-dashboard .dashboard-primary-kpi .kpi-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    opacity: 0.45;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

body.page-dashboard .dashboard-primary-kpi .kpi-card:nth-child(1)::after {
    background-image: linear-gradient(180deg, rgba(59,130,246,0) 0%, rgba(59,130,246,0.07) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 36 L30 30 L60 34 L90 18 L120 24 L150 10 L180 14 L200 4' fill='none' stroke='%233B82F6' stroke-width='2'/%3E%3C/svg%3E");
}

body.page-dashboard .dashboard-primary-kpi .kpi-card:nth-child(2)::after {
    background-image: linear-gradient(180deg, rgba(227,163,121,0) 0%, rgba(227,163,121,0.07) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L30 34 L60 20 L90 26 L120 12 L150 18 L180 6 L200 10' fill='none' stroke='%23E3A379' stroke-width='2'/%3E%3C/svg%3E");
}

body.page-dashboard .dashboard-primary-kpi .kpi-card:nth-child(3)::after {
    background-image: linear-gradient(180deg, rgba(79,169,140,0) 0%, rgba(79,169,140,0.07) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 38 L30 32 L60 34 L90 22 L120 24 L150 14 L180 16 L200 6' fill='none' stroke='%234FA98C' stroke-width='2'/%3E%3C/svg%3E");
}

body.page-dashboard .dashboard-kpi-grid .kpi-card {
    padding: 10px 12px;
}

body.page-dashboard .dashboard-kpi-grid .kpi-card-icon {
    width: 24px;
    height: 24px;
    font-size: 10.5px;
    border-radius: 7px;
}

/* ===================== DASHBOARD: CATEGORY CARDS ===================== */
body.page-dashboard .category-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px var(--shadow-color);
}

body.page-dashboard .category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px var(--shadow-hover);
    border-color: var(--cw-primary);
}

/* ===================== DASHBOARD: CHARTS ===================== */
body.page-dashboard .prices-chart-card,
body.page-dashboard .overview-chart-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 6px 18px var(--shadow-color);
}

body.page-dashboard .prices-chart-card h3,
body.page-dashboard .overview-chart-card h3 {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

body.page-dashboard .prices-chart-card h3 i,
body.page-dashboard .overview-chart-card h3 i {
    color: var(--cw-primary);
}

body.page-dashboard .price-trend-tabs {
    background: var(--cw-surface-soft);
    border-color: var(--border-color);
}

body.page-dashboard .price-trend-tabs .ptt-btn.active {
    background: var(--cw-primary);
}

/* ===================== DASHBOARD: REVENUE EDITORIAL CARD ===================== */
body.page-dashboard .revenue-highlight {
    background: linear-gradient(135deg, #D9B08F 0%, #C29970 55%, #A67F5E 100%);
    border-radius: 12px;
    padding: 16px;
    min-height: 190px;
    position: relative;
}

body.page-dashboard .revenue-highlight::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='280' viewBox='0 0 320 280'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.12'%3E%3Cpath d='M-20 60 Q 60 20 140 60 T 300 60'/%3E%3Cpath d='M-20 110 Q 60 70 140 110 T 300 110'/%3E%3Cpath d='M-20 160 Q 60 120 140 160 T 300 160'/%3E%3Cpath d='M-20 210 Q 60 170 140 210 T 300 210'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 14px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 968px) {
    body.page-dashboard .dash-hero {
        flex-wrap: wrap;
    }
    body.page-dashboard .dash-hero-art {
        background-size: 90% auto;
    }
}

@media (max-width: 768px) {
    body.page-dashboard .dash-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    body.page-dashboard .dash-topbar-search {
        max-width: none;
    }
    body.page-dashboard .dash-topbar-right {
        margin-left: 0;
        justify-content: space-between;
    }
    body.page-dashboard .dash-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    body.page-dashboard .dash-hero-greeting {
        font-size: 24px;
    }
    body.page-dashboard .dash-hero-art {
        display: none;
    }
}


/* ===================== PHASE 2: DENSITY + PASTEL PASS ===================== */
/* Dark navy nav rail, pastel accents, and a tighter dashboard rhythm so the
   whole page fits a desktop viewport without scrolling. */

.sidebar {
    width: 230px;
}

body.page-dashboard .main-content {
    padding: 12px 16px;
}

body.page-dashboard .dashboard-primary-kpi,
body.page-dashboard .dashboard-kpi-grid {
    gap: 12px;
}

/* 7 secondary KPIs — flow them across one row on a wide screen instead of
   leaving one orphaned on a second row */
body.page-dashboard .dashboard-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

/* Mid-size desktops (e.g. 1366x768) fit only six of the seven cards, leaving the
   last one orphaned on its own row. Settle on a tidy 4-up grid for that band;
   the 2-up phone rule in styles.css still applies below 480px. */
@media (min-width: 1000px) and (max-width: 1279px) {
    body.page-dashboard .dashboard-kpi-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* category strip + the AI-insights card share one row (was two full-width rows) */
body.page-dashboard .overview-row-2 {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

body.page-dashboard .overview-row-2 .category-cards-wrapper {
    flex: 2 1 540px;
}

body.page-dashboard .overview-row-2 .dash-ai-card {
    flex: 1 1 300px;
    min-width: 250px;
    margin: 0;
}

body.page-dashboard .dashboard-primary-kpi {
    margin-bottom: 12px;
}

body.page-dashboard .dashboard-kpi-grid {
    margin-bottom: 10px;
}

body.page-dashboard .dashboard-charts-row {
    gap: 12px;
    margin-bottom: 10px;
}

body.page-dashboard .chart-container {
    height: 190px;
}

body.page-dashboard .overview-bottom-row {
    grid-template-columns: 1fr 1fr 300px;
    gap: 12px;
    margin-bottom: 12px;
}

body.page-dashboard .revenue-highlight-label {
    font-size: 12px;
    margin-bottom: 4px;
}

body.page-dashboard .revenue-highlight-value {
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard .revenue-highlight-sub {
    font-size: 11px;
    margin-bottom: 10px;
}

body.page-dashboard .revenue-sparkline-container {
    min-height: 60px;
}

body.page-dashboard .category-cards-wrapper {
    gap: 8px;
}

body.page-dashboard .category-card-count {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

body.page-dashboard .category-card-label {
    font-size: 10.5px;
}

body.page-dashboard .category-card-icon {
    width: 26px;
    height: 26px;
    font-size: 11px;
    border-radius: 8px;
    margin: 0 auto 5px;
}

body.page-dashboard .category-card-icon.icon-blue   { background: rgba(59, 130, 246, 0.10);  color: #3B82F6; }
body.page-dashboard .category-card-icon.icon-green  { background: rgba(79, 169, 140, 0.12);  color: #4FA98C; }
body.page-dashboard .category-card-icon.icon-orange { background: rgba(227, 163, 121, 0.16); color: #C08A5E; }
body.page-dashboard .category-card-icon.icon-purple { background: rgba(154, 138, 212, 0.14); color: #8B79C8; }
body.page-dashboard .category-card-icon.icon-teal   { background: rgba(79, 169, 140, 0.10);  color: #479A8E; }

/* the secondary-KPI accent rules read as soft pastel, not saturated strips */
body.page-dashboard .kpi-card-accent {
    opacity: 0.55;
    height: 3px;
}

/* ===================== RESPONSIVE CORRECTIONS =====================
   Everything above is scoped with `body.page-dashboard`, which outranks the
   plain selectors in the responsive blocks of styles.css. On a phone those
   desktop rules therefore applied too: `.overview-bottom-row` stayed a fixed
   `1fr 1fr 300px` grid inside a 358px column, giving the row a 992px scroll
   width and making .main-content (overflow-x:auto) scroll sideways — the
   whole dashboard became a 1008px strip on a 390px screen.
   These rules come last and win, restoring the stacking styles.css intends.
   Re-check with: node work/tools/cdp_shot.js --width 390 --height 844
   (assert .main-content scrollWidth === clientWidth). */

@media (max-width: 999px) {
    body.page-dashboard .overview-bottom-row {
        grid-template-columns: 1fr;
    }

    body.page-dashboard .dashboard-charts-row {
        grid-template-columns: 1fr;
    }

    body.page-dashboard .overview-row-2 {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    body.page-dashboard .overview-row-2 .category-cards-wrapper,
    body.page-dashboard .overview-row-2 .dash-ai-card {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    body.page-dashboard .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Icons: the desktop shrink (24-26px) reads as far too small on a phone and
       leaves the cards looking empty. Mid-size here — bigger than desktop,
       smaller than the 52px original. */
    body.page-dashboard .category-card-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 11px;
    }

    body.page-dashboard .kpi-card-icon,
    body.page-dashboard .dashboard-primary-kpi .kpi-card-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    body.page-dashboard .dashboard-kpi-grid .kpi-card-icon {
        width: 34px;
        height: 34px;
        font-size: 13.5px;
    }
}

@media (max-width: 480px) {
    body.page-dashboard .dashboard-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-dashboard .category-cards-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== PAGE: SUPPLIER MASTER ===== */
/* Scoped to body.page-suppliers only — no other page is affected.
   See DESIGN.md §7.3: a body-scoped rule outranks a plain selector inside a
   styles.css @media block at every width, so layout-affecting properties
   already governed by styles.css (.filters-grid, .modal width, .dt-buttons
   flex) are deliberately left untouched here — only colour/radius/type. */

body.page-suppliers .header h1 {
    font-size: 19px;
    font-weight: 600;
}

body.page-suppliers .header > div {
    font-size: 13px;
    color: var(--cw-text-secondary);
}

body.page-suppliers .data-section {
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: none;
}

body.page-suppliers .section-header h2 {
    font-size: 14px;
    font-weight: 600;
}

/* --- Buttons: pastel house style (DESIGN.md §6.9) --- */
body.page-suppliers .btn {
    border-radius: 8px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.page-suppliers .btn-primary {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border: 1px solid var(--cw-primary-soft);
}

body.page-suppliers .btn-primary:hover {
    background: var(--cw-primary-soft);
    border-color: var(--cw-primary);
    transform: none;
}

body.page-suppliers .btn-success {
    background: var(--cw-green-soft);
    color: var(--cw-green);
    border: 1px solid var(--cw-green-soft);
}

body.page-suppliers .btn-success:hover {
    border-color: var(--cw-green);
    transform: none;
}

body.page-suppliers .btn-secondary {
    background: var(--cw-surface);
    color: var(--cw-text-secondary);
    border: 1px solid var(--cw-border);
}

body.page-suppliers .btn-secondary:hover {
    background: var(--cw-surface-soft);
    transform: none;
}

body.page-suppliers .btn-danger {
    background: var(--cw-red-soft);
    color: var(--cw-red);
    border: 1px solid var(--cw-red-soft);
}

body.page-suppliers .btn-danger:hover {
    border-color: var(--cw-red);
    transform: none;
}

/* --- Filters panel (DESIGN.md §6.7) --- */
body.page-suppliers .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}

body.page-suppliers .filters-header {
    border-bottom: 1px solid var(--cw-border);
}

body.page-suppliers .filters-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-text-primary);
}

body.page-suppliers .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cw-text-muted);
    letter-spacing: .02em;
}

body.page-suppliers .filter-input {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--cw-text-primary);
    padding: 8px 10px;
    font-size: 13px;
}

/* --- Form controls in the add/edit modal (DESIGN.md §6.8) --- */
body.page-suppliers .form-group label {
    font-size: 12px;
    color: var(--cw-text-muted);
    font-weight: 600;
}

body.page-suppliers .form-group input,
body.page-suppliers .form-group select,
body.page-suppliers .form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    padding: 8px 10px;
    font-size: 13px;
}

body.page-suppliers .form-group input:focus,
body.page-suppliers .form-group select:focus,
body.page-suppliers .form-group textarea:focus {
    box-shadow: none;
}

/* --- Modal (DESIGN.md §6.11) — surface header, not a saturated navy band --- */
body.page-suppliers .modal {
    border-radius: 16px;
    border: 1px solid var(--cw-border);
}

body.page-suppliers .modal-header {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
}

body.page-suppliers .modal-header h3 {
    font-size: 15px;
}

body.page-suppliers .modal-body {
    padding: 20px;
}

body.page-suppliers .close-btn {
    color: var(--cw-text-muted);
}

body.page-suppliers .close-btn:hover {
    background: var(--cw-border-soft);
    transform: none;
}

/* --- Status pills (DESIGN.md §6.10) --- */
body.page-suppliers .status-badge {
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

body.page-suppliers .status-active {
    background: var(--cw-green-soft);
    color: var(--cw-green);
}

body.page-suppliers .status-inactive {
    background: var(--cw-red-soft);
    color: var(--cw-red);
}

/* --- Action icon buttons (DESIGN.md §6.9) --- */
body.page-suppliers .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
}

body.page-suppliers .action-icon:hover {
    background: var(--cw-border-soft);
    transform: none;
}

body.page-suppliers .action-icon.view-icon {
    color: var(--cw-primary);
}

body.page-suppliers .action-icon.view-icon:hover {
    background: var(--cw-primary-soft);
}

body.page-suppliers .action-icon.edit-icon {
    color: var(--cw-orange);
}

body.page-suppliers .action-icon.edit-icon:hover {
    background: var(--cw-orange-soft);
}

body.page-suppliers .action-icon.delete-icon {
    color: var(--cw-red);
}

body.page-suppliers .action-icon.delete-icon:hover {
    background: var(--cw-red-soft);
}

body.page-suppliers .action-icon.toggle-on {
    color: var(--cw-green);
}

body.page-suppliers .action-icon.toggle-off {
    color: var(--cw-red);
}

/* --- DataTables grid (DESIGN.md §6.6) --- */
body.page-suppliers table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--cw-border);
}

body.page-suppliers table.dataTable tbody td {
    font-size: 13px;
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border-soft);
}

body.page-suppliers table.dataTable tbody td.col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.page-suppliers .dataTables_filter input,
body.page-suppliers .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    padding: 6px 8px;
}

body.page-suppliers .dt-button {
    background: var(--cw-surface) !important;
    color: var(--cw-text-secondary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
}

body.page-suppliers .dt-button:hover {
    background: var(--cw-surface-soft) !important;
}

body.page-suppliers .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary);
}

body.page-suppliers .dataTables_paginate .paginate_button.current {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-primary-dark) !important;
    border-color: var(--cw-primary-soft) !important;
}

body.page-suppliers .dataTables_paginate .paginate_button:hover {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-primary) !important;
    border-color: var(--cw-border) !important;
}

/* ===== PAGE: SUPPLIER RANKING ===== */
/* Same cards, controls and table treatment as Supplier Master. */
body.page-supplier-ranking .main-content { min-width: 0; }
body.page-supplier-ranking .breadcrumb { flex-wrap: wrap; color: var(--cw-text-secondary); }
body.page-supplier-ranking .breadcrumb a { color: var(--cw-text-secondary); }
body.page-supplier-ranking .header,
body.page-supplier-ranking .data-section,
body.page-supplier-ranking .movement-strip,
body.page-supplier-ranking .tier-summary-card {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: none;
}
body.page-supplier-ranking .header { flex-wrap: wrap; gap: 12px; }
body.page-supplier-ranking .header h1 { font-size: 19px; font-weight: 600; }
body.page-supplier-ranking .header h1 i { font-size: 16px; line-height: 1; }
body.page-supplier-ranking .header > div { font-size: 13px; color: var(--cw-text-secondary); }
body.page-supplier-ranking .section-header { gap: 12px; }
body.page-supplier-ranking .section-header h2 { font-size: 14px; font-weight: 600; }

/* --- Buttons and controls (DESIGN.md §6.8–9) --- */
body.page-supplier-ranking .btn,
body.page-supplier-ranking .swal2-confirm {
    border-radius: 8px;
    min-height: 30px;
    font-size: 13px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
body.page-supplier-ranking .btn-primary,
body.page-supplier-ranking .swal2-confirm {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border: 1px solid var(--cw-primary-soft);
    box-shadow: none;
}
body.page-supplier-ranking .btn-primary:hover,
body.page-supplier-ranking .swal2-confirm:hover { background: var(--cw-primary-soft); border-color: var(--cw-primary); transform: none; }
body.page-supplier-ranking .main-content :focus-visible,
body.page-supplier-ranking .swal2-confirm:focus-visible { outline: 2px solid var(--cw-primary); outline-offset: 2px; }
body.page-supplier-ranking .dataTables_filter input,
body.page-supplier-ranking .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--cw-text-primary);
    padding: 8px 10px;
    font-size: 13px !important;
    min-height: 30px;
    max-width: 100%;
}
body.page-supplier-ranking .dt-button {
    background: var(--cw-surface) !important;
    color: var(--cw-text-secondary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
    min-height: 30px;
    font-size: 13px;
}
body.page-supplier-ranking .dt-button:hover { background: var(--cw-surface-soft) !important; box-shadow: none !important; }
body.page-supplier-ranking .swal2-popup,
body.page-supplier-ranking div.dt-button-info {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    max-width: calc(100% - 24px);
}
body.page-supplier-ranking .swal2-title { color: var(--cw-text-primary); font-size: 19px; }
body.page-supplier-ranking .swal2-html-container { color: var(--cw-text-secondary); font-size: 13px; }
body.page-supplier-ranking div.dt-button-info h2 { background: var(--cw-surface-soft); font-size: 14px; }

/* --- Scoring explanation and tier cards --- */
body.page-supplier-ranking .ranking-explainer {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-left: 3px solid var(--cw-primary);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--cw-text-secondary);
}
body.page-supplier-ranking .ranking-explainer strong { color: var(--cw-text-primary); font-weight: 600; }
body.page-supplier-ranking .ranking-formula { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
body.page-supplier-ranking .ranking-formula-note { margin-top: 8px; font-size: 12px; }
body.page-supplier-ranking .tier-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
body.page-supplier-ranking .tier-summary-card {
    padding: 12px;
    border-left-width: 3px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    transition: transform .15s, box-shadow .15s;
}
body.page-supplier-ranking .tier-summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-hover); }
body.page-supplier-ranking .tier-a-border { border-left-color: var(--cw-green); }
body.page-supplier-ranking .tier-b-border { border-left-color: var(--cw-primary); }
body.page-supplier-ranking .tier-c-border { border-left-color: var(--cw-orange); }
body.page-supplier-ranking .tier-d-border { border-left-color: var(--cw-red); }
body.page-supplier-ranking .tier-summary-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; line-height: 1; }
body.page-supplier-ranking .tier-summary-icon i { line-height: 1; }
body.page-supplier-ranking .tier-a-border .tier-summary-icon,
body.page-supplier-ranking .tier-A,
body.page-supplier-ranking .mv-up,
body.page-supplier-ranking .mc-up { background: var(--cw-green-soft); color: var(--cw-green); }
body.page-supplier-ranking .tier-b-border .tier-summary-icon,
body.page-supplier-ranking .tier-B { background: var(--cw-primary-soft); color: var(--cw-primary); }
body.page-supplier-ranking .tier-c-border .tier-summary-icon,
body.page-supplier-ranking .tier-C { background: var(--cw-orange-soft); color: var(--cw-orange); }
body.page-supplier-ranking .tier-d-border .tier-summary-icon,
body.page-supplier-ranking .tier-D,
body.page-supplier-ranking .mv-down,
body.page-supplier-ranking .mc-down { background: var(--cw-red-soft); color: var(--cw-red); }
body.page-supplier-ranking .mv-same,
body.page-supplier-ranking .mc-same { background: var(--cw-surface-soft); color: var(--cw-text-secondary); }
body.page-supplier-ranking .mv-new,
body.page-supplier-ranking .mc-new { background: var(--cw-purple-soft); color: var(--cw-purple); }
body.page-supplier-ranking .tier-summary-value { font-size: 24px; font-weight: 700; color: var(--cw-text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
body.page-supplier-ranking .tier-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cw-text-secondary); margin-top: 4px; font-weight: 600; }

/* --- Movement and score indicators --- */
body.page-supplier-ranking .movement-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding: 12px 16px; align-items: center; }
body.page-supplier-ranking .movement-strip-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cw-text-secondary); font-weight: 600; }
body.page-supplier-ranking .movement-chip,
body.page-supplier-ranking .movement-pill,
body.page-supplier-ranking .tier-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.4; }
body.page-supplier-ranking .movement-chip i { font-size: 11px; line-height: 1; }
body.page-supplier-ranking .baseline-note { font-size: 11px; color: var(--cw-text-secondary); margin-left: auto; }
body.page-supplier-ranking .rank-stack { display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.page-supplier-ranking .rank-num { font-size: 13px; font-weight: 700; color: var(--cw-text-primary); min-width: 32px; text-align: center; }
body.page-supplier-ranking .rank-1 i,
body.page-supplier-ranking .rank-3 i { color: var(--cw-orange); }
body.page-supplier-ranking .rank-2 i { color: var(--cw-text-secondary); }
body.page-supplier-ranking .score-bar { width: 100%; height: 8px; border-radius: 9999px; background: var(--cw-border-soft); overflow: hidden; position: relative; }
body.page-supplier-ranking .score-bar-fill { height: 100%; border-radius: 9999px; transition: width .4s; }
body.page-supplier-ranking .score-text { font-weight: 700; font-size: 13px; margin-top: 4px; display: block; }

/* --- DataTables grid (DESIGN.md §6.6) --- */
/* NOTE: no overflow-x here — this table uses DataTables `responsive: true` (pre-existing),
   which already collapses columns on narrow screens. Putting an `overflow-x: auto` wrapper
   around a responsive table makes the plugin and the scroll container fight over the width
   and the browser relayouts in a loop (it froze the page in testing). */
body.page-supplier-ranking #tableContainer { max-width: 100%; }
body.page-supplier-ranking table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-secondary) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--cw-border);
}
body.page-supplier-ranking table.dataTable tbody td { font-size: 13px; color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border-soft); }
body.page-supplier-ranking table.dataTable tbody tr { background: var(--cw-surface); }
body.page-supplier-ranking table.dataTable tbody tr:hover { background: var(--table-hover); }
body.page-supplier-ranking #rankingTable th:nth-child(n+5),
body.page-supplier-ranking #rankingTable td:nth-child(n+5) { text-align: right; font-variant-numeric: tabular-nums; }
body.page-supplier-ranking .dataTables_info,
body.page-supplier-ranking .dataTables_filter,
body.page-supplier-ranking .dataTables_paginate { color: var(--cw-text-secondary); font-size: 12px; }
body.page-supplier-ranking .dataTables_paginate .paginate_button { border-radius: 8px; color: var(--cw-text-secondary) !important; min-height: 30px; }
body.page-supplier-ranking .dataTables_paginate .paginate_button.current { background: var(--cw-primary-soft) !important; color: var(--cw-primary-dark) !important; border-color: var(--cw-primary-soft) !important; }
body.page-supplier-ranking .dataTables_paginate .paginate_button:hover { background: var(--cw-surface-soft) !important; color: var(--cw-text-primary) !important; border-color: var(--cw-border) !important; box-shadow: none; }

/* --- Expanded supplier metrics --- */
body.page-supplier-ranking .rank-detail { padding: 16px; background: var(--cw-surface-soft); white-space: normal; }
body.page-supplier-ranking .rank-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.page-supplier-ranking .rank-metric { background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 16px; padding: 12px; min-width: 0; }
body.page-supplier-ranking .rank-metric-label { font-size: 11px; text-transform: uppercase; color: var(--cw-text-secondary); font-weight: 600; letter-spacing: .06em; }
body.page-supplier-ranking .rank-metric-value { font-size: 20px; font-weight: 700; color: var(--cw-text-primary); margin-top: 4px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Explicit narrow-screen corrections for the scoped layout rules (§7.3). */
@media (max-width: 999px) {
    body.page-supplier-ranking .tier-summary-grid,
    body.page-supplier-ranking .rank-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-supplier-ranking .tier-summary-icon { width: 40px; height: 40px; border-radius: 8px; font-size: 16px; }
}
@media (max-width: 600px) {
    body.page-supplier-ranking .header h1 { font-size: 17px; }
    body.page-supplier-ranking .tier-summary-card { flex-direction: column; align-items: flex-start; }
    body.page-supplier-ranking .ranking-formula { flex-direction: column; }
    body.page-supplier-ranking .baseline-note { width: 100%; margin-left: 0; }
    body.page-supplier-ranking .rank-detail-grid { grid-template-columns: 1fr; }
    body.page-supplier-ranking .btn,
    body.page-supplier-ranking .dt-button,
    body.page-supplier-ranking .swal2-confirm,
    body.page-supplier-ranking .dataTables_filter input,
    body.page-supplier-ranking .dataTables_paginate .paginate_button { min-height: 44px; }
}

/* ===== PAGE: BANK MASTER ===== */
/* Scoped to body.page-banks only — no other page is affected.
   Same recipe as Supplier Master (body.page-suppliers): pastel buttons,
   tokenised filters/modal/table, 30px/8px action icons. The report tabs
   and report-summary-card/report-table are styled by banks.php's own
   inline <style> block (left as-is, matches the Supplier Master precedent)
   so only the page chrome around them is covered here. */

body.page-banks .header h1 {
    font-size: 19px;
    font-weight: 600;
}

body.page-banks .header > div {
    font-size: 13px;
    color: var(--cw-text-secondary);
}

body.page-banks .data-section {
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: none;
}

body.page-banks .section-header h2 {
    font-size: 14px;
    font-weight: 600;
}

/* --- Buttons: pastel house style (DESIGN.md §6.9) --- */
body.page-banks .btn {
    border-radius: 8px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.page-banks .btn-primary {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border: 1px solid var(--cw-primary-soft);
}

body.page-banks .btn-primary:hover {
    background: var(--cw-primary-soft);
    border-color: var(--cw-primary);
    transform: none;
}

body.page-banks .btn-success {
    background: var(--cw-green-soft);
    color: var(--cw-green);
    border: 1px solid var(--cw-green-soft);
}

body.page-banks .btn-success:hover {
    border-color: var(--cw-green);
    transform: none;
}

body.page-banks .btn-secondary {
    background: var(--cw-surface);
    color: var(--cw-text-secondary);
    border: 1px solid var(--cw-border);
}

body.page-banks .btn-secondary:hover {
    background: var(--cw-surface-soft);
    transform: none;
}

/* --- KPI strip (reuses .report-summary-card from the inline style block) --- */
body.page-banks #bankKpiStrip .report-summary-card {
    border: 1px solid var(--cw-border);
}

/* --- Filters panel (DESIGN.md §6.7) --- */
body.page-banks .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}

body.page-banks .filters-header {
    border-bottom: 1px solid var(--cw-border);
}

body.page-banks .filters-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-text-primary);
}

body.page-banks .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cw-text-muted);
    letter-spacing: .02em;
}

body.page-banks .filter-input {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--cw-text-primary);
    padding: 8px 10px;
    font-size: 13px;
}

/* --- Form controls in the add/edit modal (DESIGN.md §6.8) --- */
body.page-banks .form-group label {
    font-size: 12px;
    color: var(--cw-text-muted);
    font-weight: 600;
}

body.page-banks .form-group input,
body.page-banks .form-group select,
body.page-banks .form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    padding: 8px 10px;
    font-size: 13px;
}

body.page-banks .form-group input:focus,
body.page-banks .form-group select:focus,
body.page-banks .form-group textarea:focus {
    box-shadow: none;
}

/* --- Modal (DESIGN.md §6.11) --- */
body.page-banks .modal {
    border-radius: 16px;
    border: 1px solid var(--cw-border);
}

body.page-banks .modal-header {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
}

body.page-banks .modal-header h3 {
    font-size: 15px;
}

body.page-banks .modal-body {
    padding: 20px;
}

body.page-banks .close-btn {
    color: var(--cw-text-muted);
}

body.page-banks .close-btn:hover {
    background: var(--cw-border-soft);
    transform: none;
}

/* --- Status pills (DESIGN.md §6.10) --- */
body.page-banks .status-badge {
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

body.page-banks .status-active {
    background: var(--cw-green-soft);
    color: var(--cw-green);
}

body.page-banks .status-inactive {
    background: var(--cw-red-soft);
    color: var(--cw-red);
}

/* --- Action icon buttons (DESIGN.md §6.9) --- */
body.page-banks .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
}

body.page-banks .action-icon:hover {
    background: var(--cw-border-soft);
    transform: none;
}

body.page-banks .action-icon.view-icon {
    color: var(--cw-primary);
}

body.page-banks .action-icon.view-icon:hover {
    background: var(--cw-primary-soft);
}

body.page-banks .action-icon.edit-icon {
    color: var(--cw-orange);
}

body.page-banks .action-icon.edit-icon:hover {
    background: var(--cw-orange-soft);
}

body.page-banks .action-icon.delete-icon {
    color: var(--cw-red);
}

body.page-banks .action-icon.delete-icon:hover {
    background: var(--cw-red-soft);
}

body.page-banks .action-icon.toggle-on {
    color: var(--cw-green);
}

body.page-banks .action-icon.toggle-off {
    color: var(--cw-red);
}

/* --- DataTables grid (DESIGN.md §6.6) --- */
body.page-banks table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--cw-border);
}

body.page-banks table.dataTable tbody td {
    font-size: 13px;
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border-soft);
}

body.page-banks table.dataTable tbody td.col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.page-banks .dataTables_filter input,
body.page-banks .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    padding: 6px 8px;
}

body.page-banks .dt-button {
    background: var(--cw-surface) !important;
    color: var(--cw-text-secondary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
}

body.page-banks .dt-button:hover {
    background: var(--cw-surface-soft) !important;
}

body.page-banks .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary);
}

body.page-banks .dataTables_paginate .paginate_button.current {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-primary-dark) !important;
    border-color: var(--cw-primary-soft) !important;
}

body.page-banks .dataTables_paginate .paginate_button:hover {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-primary) !important;
    border-color: var(--cw-border) !important;
}

/* ===== PAGE: CUSTOMER MASTER ===== */
/* Scoped to body.page-customers only — no other page is affected.
   Same recipe as Supplier Master / Bank Master: pastel buttons,
   tokenised filters/modal/table, 30px/8px action icons. The report tabs
   and report-summary-card/report-table are styled by customers.php's own
   inline <style> block (left as-is, matches the Supplier Master precedent)
   so only the page chrome around them is covered here. */

body.page-customers .header h1 {
    font-size: 19px;
    font-weight: 600;
}

body.page-customers .header > div {
    font-size: 13px;
    color: var(--cw-text-secondary);
}

body.page-customers .data-section {
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: none;
}

body.page-customers .section-header h2 {
    font-size: 14px;
    font-weight: 600;
}

/* --- Buttons: pastel house style (DESIGN.md §6.9) --- */
body.page-customers .btn {
    border-radius: 8px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.page-customers .btn-primary {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border: 1px solid var(--cw-primary-soft);
}

body.page-customers .btn-primary:hover {
    background: var(--cw-primary-soft);
    border-color: var(--cw-primary);
    transform: none;
}

body.page-customers .btn-success {
    background: var(--cw-green-soft);
    color: var(--cw-green);
    border: 1px solid var(--cw-green-soft);
}

body.page-customers .btn-success:hover {
    border-color: var(--cw-green);
    transform: none;
}

body.page-customers .btn-secondary {
    background: var(--cw-surface);
    color: var(--cw-text-secondary);
    border: 1px solid var(--cw-border);
}

body.page-customers .btn-secondary:hover {
    background: var(--cw-surface-soft);
    transform: none;
}

/* --- Filters panel (DESIGN.md §6.7) --- */
body.page-customers .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}

body.page-customers .filters-header {
    border-bottom: 1px solid var(--cw-border);
}

body.page-customers .filters-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-text-primary);
}

body.page-customers .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cw-text-muted);
    letter-spacing: .02em;
}

body.page-customers .filter-input {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--cw-text-primary);
    padding: 8px 10px;
    font-size: 13px;
}

/* --- Form controls in the add/edit modal (DESIGN.md §6.8) --- */
body.page-customers .form-group label {
    font-size: 12px;
    color: var(--cw-text-muted);
    font-weight: 600;
}

body.page-customers .form-group input,
body.page-customers .form-group select,
body.page-customers .form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    padding: 8px 10px;
    font-size: 13px;
}

body.page-customers .form-group input:focus,
body.page-customers .form-group select:focus,
body.page-customers .form-group textarea:focus {
    box-shadow: none;
}

/* --- Modal (DESIGN.md §6.11) --- */
body.page-customers .modal {
    border-radius: 16px;
    border: 1px solid var(--cw-border);
}

body.page-customers .modal-header {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
}

body.page-customers .modal-header h3 {
    font-size: 15px;
}

body.page-customers .modal-body {
    padding: 20px;
}

body.page-customers .close-btn {
    color: var(--cw-text-muted);
}

body.page-customers .close-btn:hover {
    background: var(--cw-border-soft);
    transform: none;
}

/* --- Status pills (DESIGN.md §6.10) --- */
body.page-customers .status-badge {
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

body.page-customers .status-active {
    background: var(--cw-green-soft);
    color: var(--cw-green);
}

body.page-customers .status-inactive {
    background: var(--cw-red-soft);
    color: var(--cw-red);
}

/* --- Action icon buttons (DESIGN.md §6.9) --- */
body.page-customers .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
}

body.page-customers .action-icon:hover {
    background: var(--cw-border-soft);
    transform: none;
}

body.page-customers .action-icon.view-icon {
    color: var(--cw-primary);
}

body.page-customers .action-icon.view-icon:hover {
    background: var(--cw-primary-soft);
}

body.page-customers .action-icon.edit-icon {
    color: var(--cw-orange);
}

body.page-customers .action-icon.edit-icon:hover {
    background: var(--cw-orange-soft);
}

body.page-customers .action-icon.delete-icon {
    color: var(--cw-red);
}

body.page-customers .action-icon.delete-icon:hover {
    background: var(--cw-red-soft);
}

body.page-customers .action-icon.toggle-on {
    color: var(--cw-green);
}

body.page-customers .action-icon.toggle-off {
    color: var(--cw-red);
}

/* --- DataTables grid (DESIGN.md §6.6) --- */
body.page-customers table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--cw-border);
}

body.page-customers table.dataTable tbody td {
    font-size: 13px;
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border-soft);
}

body.page-customers table.dataTable tbody td.col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.page-customers .dataTables_filter input,
body.page-customers .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    padding: 6px 8px;
}

body.page-customers .dt-button {
    background: var(--cw-surface) !important;
    color: var(--cw-text-secondary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
}

body.page-customers .dt-button:hover {
    background: var(--cw-surface-soft) !important;
}

body.page-customers .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary);
}

body.page-customers .dataTables_paginate .paginate_button.current {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-primary-dark) !important;
    border-color: var(--cw-primary-soft) !important;
}

body.page-customers .dataTables_paginate .paginate_button:hover {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-primary) !important;
    border-color: var(--cw-border) !important;
}

/* ===== PAGE: PRICING MASTER ===== */
/* Scoped to body.page-pricing only — no other page is affected.
   Same recipe as Supplier/Bank/Customer Master: pastel buttons, tokenised
   filters/modal/table, 30px/8px action icons. Pricing Master also has its
   own tab switcher (.pricing-tabs, shared in styles.css) restyled here as a
   quiet underline tab, matching the card/section title scale instead of its
   oversized 15px default. */

body.page-pricing .header h1 {
    font-size: 19px;
    font-weight: 600;
}

body.page-pricing .header > div {
    font-size: 13px;
    color: var(--cw-text-secondary);
}

body.page-pricing .data-section {
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    box-shadow: none;
}

body.page-pricing .section-header h2 {
    font-size: 14px;
    font-weight: 600;
}

/* --- Tab switcher (Customer Pricing / Supplier Pricing) --- */
body.page-pricing .pricing-tabs {
    border-bottom: 1px solid var(--cw-border);
    margin-bottom: 16px;
}

body.page-pricing .pricing-tab-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-text-secondary);
}

body.page-pricing .pricing-tab-btn.active {
    color: var(--cw-primary-dark);
    border-bottom-color: var(--cw-primary);
}

body.page-pricing .pricing-tab-btn:hover {
    color: var(--cw-primary-dark);
    background: var(--cw-primary-soft);
}

/* --- Buttons: pastel house style (DESIGN.md §6.9) --- */
body.page-pricing .btn {
    border-radius: 8px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

body.page-pricing .btn-primary {
    background: var(--cw-primary-soft);
    color: var(--cw-primary-dark);
    border: 1px solid var(--cw-primary-soft);
}

body.page-pricing .btn-primary:hover {
    background: var(--cw-primary-soft);
    border-color: var(--cw-primary);
    transform: none;
}

body.page-pricing .btn-success {
    background: var(--cw-green-soft);
    color: var(--cw-green);
    border: 1px solid var(--cw-green-soft);
}

body.page-pricing .btn-success:hover {
    border-color: var(--cw-green);
    transform: none;
}

body.page-pricing .btn-secondary {
    background: var(--cw-surface);
    color: var(--cw-text-secondary);
    border: 1px solid var(--cw-border);
}

body.page-pricing .btn-secondary:hover {
    background: var(--cw-surface-soft);
    transform: none;
}

/* --- Filters panel (DESIGN.md §6.7) --- */
body.page-pricing .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}

body.page-pricing .filters-header {
    border-bottom: 1px solid var(--cw-border);
}

body.page-pricing .filters-header h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--cw-text-primary);
}

body.page-pricing .filter-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cw-text-muted);
    letter-spacing: .02em;
}

body.page-pricing .filter-input {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--cw-text-primary);
    padding: 8px 10px;
    font-size: 13px;
}

/* --- Form controls in the add/edit modal (DESIGN.md §6.8) --- */
body.page-pricing .form-group label {
    font-size: 12px;
    color: var(--cw-text-muted);
    font-weight: 600;
}

body.page-pricing .form-group input,
body.page-pricing .form-group select,
body.page-pricing .form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    padding: 8px 10px;
    font-size: 13px;
}

body.page-pricing .form-group input:focus,
body.page-pricing .form-group select:focus,
body.page-pricing .form-group textarea:focus {
    box-shadow: none;
}

/* --- Modal (DESIGN.md §6.11) --- */
body.page-pricing .modal {
    border-radius: 16px;
    border: 1px solid var(--cw-border);
}

body.page-pricing .modal-header {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px;
}

body.page-pricing .modal-header h3 {
    font-size: 15px;
}

body.page-pricing .modal-body {
    padding: 20px;
}

body.page-pricing .close-btn {
    color: var(--cw-text-muted);
}

body.page-pricing .close-btn:hover {
    background: var(--cw-border-soft);
    transform: none;
}

/* --- Status pills (DESIGN.md §6.10) --- */
body.page-pricing .status-badge {
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}

body.page-pricing .status-active {
    background: var(--cw-green-soft);
    color: var(--cw-green);
}

body.page-pricing .status-expired {
    background: var(--cw-border-soft);
    color: var(--cw-text-secondary);
}

body.page-pricing .status-superseded {
    background: var(--cw-orange-soft);
    color: var(--cw-orange);
}

/* --- Action icon buttons (DESIGN.md §6.9) --- */
body.page-pricing .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
}

body.page-pricing .action-icon:hover {
    background: var(--cw-border-soft);
    transform: none;
}

body.page-pricing .action-icon.edit-icon {
    color: var(--cw-orange);
}

body.page-pricing .action-icon.edit-icon:hover {
    background: var(--cw-orange-soft);
}

body.page-pricing .action-icon.delete-icon {
    color: var(--cw-red);
}

body.page-pricing .action-icon.delete-icon:hover {
    background: var(--cw-red-soft);
}

/* --- DataTables grid (DESIGN.md §6.6) --- */
body.page-pricing table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-muted) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    border-bottom: 1px solid var(--cw-border);
}

body.page-pricing table.dataTable tbody td {
    font-size: 13px;
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border-soft);
}

body.page-pricing table.dataTable tbody td.col-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.page-pricing .dataTables_filter input,
body.page-pricing .dataTables_length select {
    border-radius: 8px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    padding: 6px 8px;
}

body.page-pricing .dt-button {
    background: var(--cw-surface) !important;
    color: var(--cw-text-secondary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
}

body.page-pricing .dt-button:hover {
    background: var(--cw-surface-soft) !important;
}

body.page-pricing .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary);
}

body.page-pricing .dataTables_paginate .paginate_button.current {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-primary-dark) !important;
    border-color: var(--cw-primary-soft) !important;
}

body.page-pricing .dataTables_paginate .paginate_button:hover {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-primary) !important;
    border-color: var(--cw-border) !important;
}

/* =========================================================================
   GLOBAL: ICON & TYPE SCALE
   Cross-page corrections for elements measured oversized against the DESIGN.md
   scale. Measured on the live DOM at 1280px:
     .header h1         24px with a 24px inline glyph (body text is 13px)
     .section-header i  20px beside a 13-14px title
     .stat-card-icon    60x60 tile, 28px glyph, saturated navy gradient
     .stat-card-value   32px in the old saturated blue #0074D9
     .settings-card-title 20px in the old navy #001F3F
     .settings-card-icon  56x56 tile, 28px glyph
   suppliers.php and supplier-ranking.php each already carry a per-page fix
   (19px title / 16px glyph); this generalises that same scale product-wide so
   the shell reads consistently. Per-page sections in this file are more
   specific (body.page-x .header h1) and still win where a page differs.
   ========================================================================= */

.main-content .header h1 { font-size: 19px; font-weight: 600; }
.main-content .header h1 i.fas,
.main-content .header h1 i.far,
.main-content .header h1 i.fab { font-size: 16px; line-height: 1; }

/* section titles: the inline glyph was 20px next to a 13-14px heading */
.section-header i.fas,
.section-header i.far,
.section-header i.fab { font-size: 14px; line-height: 1; }

/* stat cards (inventory, profit-analysis, ...) */
.stat-card-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 8px;
    margin-bottom: 12px;
    background: var(--cw-primary-soft);
    color: var(--cw-primary);
}
.stat-card-value { font-size: 24px; color: var(--cw-primary); }

/* settings cards */
.settings-card-title { font-size: 15px; color: var(--cw-text-primary); }
.settings-card-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 8px;
    background: var(--cw-primary-soft); color: var(--cw-primary); }

/* phones: keep the icons from collapsing to nothing (DESIGN.md §7.2) */
@media (max-width: 999px) {
    .main-content .header h1 { font-size: 18px; }
    .stat-card-icon,
    .settings-card-icon { width: 40px; height: 40px; font-size: 18px; }
    .stat-card-value { font-size: 22px; }
}

/* =========================================================================
   GLOBAL: SATURATED COMPONENTS -> PASTEL
   The legacy sheet fills DataTables buttons, the grid header and the
   primary/success buttons with SOLID brand colour (--navy-primary / --success)
   and uses a 2px control radius. That is the most visible inconsistency left on
   pages that have not had a per-page pass. DESIGN.md §6.6 / §6.9 call for a soft
   tint, accent text, a soft border and an 8px radius.
   !important is needed to beat the legacy rules; per-page sections
   (body.page-<name> …) are more specific and still win.
   ========================================================================= */

.btn {
    border-radius: 8px;
    font-size: 13px;
}

.dt-button {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-primary) !important;
    border: 1px solid var(--cw-border) !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
    box-shadow: none !important;
}
.dt-button:hover {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-primary) !important;
}

table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-secondary) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    padding: 10px 12px !important;
}
body.dark-mode table.dataTable thead th {
    background: var(--cw-surface-soft) !important;
    color: var(--cw-text-secondary) !important;
}

.btn-primary {
    background: var(--cw-primary-soft);
    color: var(--cw-primary);
    border: 1px solid var(--cw-border);
}
.btn-primary:hover {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    transform: translateY(-1px);
}
.btn-success {
    background: var(--cw-green-soft);
    color: var(--cw-green);
    border: 1px solid var(--cw-border);
}
.btn-success:hover {
    background: var(--cw-surface-soft);
    color: var(--cw-green);
    transform: translateY(-1px);
}

/* the collapsible filter headers were set at heading size */
.filters-header h3 { font-size: 14px; font-weight: 600; }
.filters-header i.fas,
.filters-header i.far,
.filters-header i.fab { font-size: 13px; }

/* control tiles (settings, …): 50x50 saturated navy gradient with a 24px glyph */
.control-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--cw-primary-soft);
    color: var(--cw-primary);
}
.control-icon i.fas,
.control-icon i.far,
.control-icon i.fab { font-size: 20px; line-height: 1; }

/* ===== PAGE: FINANCING ===== */
/* Master Data recipes; shared title, glyph, button and grid-header rules above apply. */
body.page-financing .main-content,
body.page-financing .pricing-tab-content,
body.page-financing .form-group { min-width: 0; }
body.page-financing .header > div { font-size: 13px; color: var(--cw-text-secondary); }
body.page-financing .data-section { border: 1px solid var(--cw-border); border-radius: 16px; box-shadow: none; }
body.page-financing .section-header { gap: 12px; flex-wrap: wrap; }
body.page-financing .section-header h2 { font-size: 14px; font-weight: 600; }
body.page-financing .section-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-financing .btn-secondary { background: var(--cw-surface); color: var(--cw-text-secondary); border: 1px solid var(--cw-border); }
body.page-financing .btn-secondary:hover { background: var(--cw-surface-soft); }

body.page-financing .pricing-tabs { border-bottom: 1px solid var(--cw-border); margin-bottom: 16px; }
body.page-financing .pricing-tab-btn { min-width: 0; padding: 12px 16px; font-size: 13px; color: var(--cw-text-secondary); }
body.page-financing .pricing-tab-btn.active { color: var(--cw-text-primary); border-bottom-color: var(--cw-primary); }
body.page-financing .pricing-tab-btn:hover { background: var(--cw-primary-soft); color: var(--cw-text-primary); }

body.page-financing .filters-section { padding: 16px; margin-bottom: 16px; background: var(--cw-surface-soft); border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-financing .filters-header { border-bottom: 1px solid var(--cw-border); padding-bottom: 12px; margin-bottom: 12px; gap: 8px; }
body.page-financing .filters-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
body.page-financing .filter-group label,
body.page-financing .form-group label { font-size: 12px; color: var(--cw-text-secondary); }
body.page-financing .filter-input,
body.page-financing .form-group input:not([type="radio"]),
body.page-financing .form-group select,
body.page-financing .form-group textarea,
body.page-financing .dataTables_filter input,
body.page-financing .dataTables_length select {
    min-width: 0; max-width: 100%; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--input-border); background: var(--input-bg); color: var(--cw-text-primary);
    font-size: 13px !important; /* Legacy mobile controls force 16px. */
}
body.page-financing .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.page-financing .radio-group { flex-wrap: wrap; }
body.page-financing.dark-mode input[type="date"] { color-scheme: dark; }
body.page-financing .radio-group input[type="radio"] { width: auto; min-height: 0; padding: 0; accent-color: var(--cw-primary); }
body.page-financing .radio-group .radio-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0; }
body.page-financing .form-group { margin-bottom: 12px; }
body.page-financing .form-group label i { color: var(--cw-primary); }
body.page-financing .form-group input:focus-visible,
body.page-financing .form-group select:focus-visible,
body.page-financing .form-group textarea:focus-visible { outline: 2px solid var(--cw-primary); outline-offset: 2px; box-shadow: none; }
body.page-financing .computed-field,
body.page-financing .form-id-info { background: var(--cw-surface-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
body.page-financing .searchable-dropdown-list { background: var(--cw-surface); border-color: var(--cw-border); border-radius: 8px; }
body.page-financing .searchable-dropdown-item { font-size: 13px; color: var(--cw-text-primary); }
body.page-financing .searchable-dropdown-item:hover,
body.page-financing .searchable-dropdown-item.selected { background: var(--cw-primary-soft); color: var(--cw-text-primary); }
body.page-financing .form-actions { justify-content: flex-end; margin-top: 20px; }

body.page-financing .modal-overlay { z-index: 1004; } /* Above the mobile navigation, below SweetAlert. */
body.page-financing .modal { border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-financing .modal-header { background: var(--cw-surface); color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border); border-radius: 16px 16px 0 0; padding: 16px 20px; gap: 12px; }
body.page-financing .modal-header h3 { font-size: 14px; overflow-wrap: anywhere; }
body.page-financing .modal-body { padding: 20px; }
body.page-financing .close-btn { flex-shrink: 0; font-size: 16px; color: var(--cw-text-secondary); border-radius: 8px; }
body.page-financing .close-btn:hover { background: var(--cw-surface-soft); transform: none; }
body.page-financing .financing-empty-icon { font-size: 26px; margin-bottom: 12px; color: var(--cw-text-secondary); }
body.page-financing #paymentsLoading i { font-size: 24px; color: var(--cw-primary); }
body.page-financing #paymentsEmpty p { font-size: 13px; color: var(--cw-text-secondary); }
body.page-financing #runningBalanceSummary > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: 8px; background: var(--cw-surface-soft); border: 1px solid var(--cw-border); }
body.page-financing #runningBalanceSummary span { font-size: 14px !important; }
body.page-financing #runningBalanceTable th { font-size: 11px !important; text-transform: uppercase; color: var(--cw-text-secondary); }
body.page-financing #runningBalanceTable td { font-variant-numeric: tabular-nums; }

body.page-financing .status-badge { padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; color: var(--cw-text-primary); }
body.page-financing .status-active,
body.page-financing .status-delivered,
body.page-financing .status-accepted { background: var(--cw-green-soft); }
body.page-financing .status-in-transit,
body.page-financing .status-pending { background: var(--cw-orange-soft); }
body.page-financing .status-rejected { background: var(--cw-red-soft); }
body.page-financing .action-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; border-radius: 8px; background: var(--cw-surface-soft); border: 1px solid var(--cw-border); font-size: 13px; }
body.page-financing .action-icon:hover { background: var(--cw-border-soft); transform: none; }
body.page-financing .action-icon.edit-icon { color: var(--cw-orange); }
body.page-financing .action-icon.delete-icon { color: var(--cw-red); }
body.page-financing .financing-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--cw-surface-soft); color: var(--cw-text-primary); font-size: 13px; font-weight: 700; }

/* Responsive DataTables collapse columns; only the plain history table scrolls. */
/* Keep hidden loading containers measurable so Responsive can calculate columns
   before the existing .show() call. They still occupy no height and stay hidden. */
body.page-financing #supTableContainer[style*="display: none"],
body.page-financing #custTableContainer[style*="display: none"],
body.page-financing #bankTableContainer[style*="display: none"] {
    display: block !important; height: 0; overflow: hidden; visibility: hidden;
}
body.page-financing .table-scroll-hint { background: var(--cw-primary-soft); color: var(--cw-text-secondary); border-radius: 8px; }

body.page-financing .dataTables_wrapper { max-width: 100%; overflow: visible; }
body.page-financing table.dataTable { min-width: 0; }
body.page-financing table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { color: var(--cw-text-secondary); }
body.page-financing table.dataTable tbody tr { background: var(--cw-surface); }
body.page-financing table.dataTable tbody tr:hover { background: var(--table-hover); }
body.page-financing table.dataTable tbody td:last-child:has(.action-icon) { white-space: nowrap; }
body.page-financing table.dataTable tbody td { font-size: 13px; color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border-soft); font-variant-numeric: tabular-nums; }
body.page-financing table.dataTable tbody td.child { white-space: normal; overflow-wrap: anywhere; }
body.page-financing table.dataTable > tbody > tr.child ul.dtr-details { display: block; }
body.page-financing table.dataTable > tbody > tr.child span.dtr-data { white-space: normal; }
body.page-financing .dataTables_info,
body.page-financing .dataTables_paginate,
body.page-financing .dataTables_filter,
body.page-financing .dataTables_length { font-size: 12px; color: var(--cw-text-secondary); }
body.page-financing .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px; color: var(--cw-text-secondary) !important; }
body.page-financing .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--cw-primary-soft) !important; color: var(--cw-text-primary) !important; border: 1px solid var(--cw-border) !important; }
body.page-financing .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--cw-surface-soft) !important; color: var(--cw-text-primary) !important; border-color: var(--cw-border) !important; }
body.page-financing .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--cw-text-secondary) !important; }
body.page-financing .swal2-popup { background: var(--cw-surface); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-financing .swal2-title { font-size: 18px; }
body.page-financing .swal2-html-container { font-size: 13px; }
body.page-financing .swal2-styled.swal2-confirm { background: var(--cw-primary-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-financing .swal2-styled.swal2-cancel { background: var(--cw-surface-soft); color: var(--cw-text-secondary); border: 1px solid var(--cw-border); border-radius: 8px; }

@media (max-width: 999px) {
    body.page-financing .pricing-tabs { flex-wrap: wrap; }
    body.page-financing .pricing-tab-btn { flex: 1 1 100%; min-height: 44px; padding: 12px; }
    body.page-financing .pricing-tab-btn i { font-size: 16px; }
    body.page-financing .filters-grid,
    body.page-financing .form-grid { grid-template-columns: minmax(0, 1fr); }
    body.page-financing .data-section,
    body.page-financing .filters-section { padding: 12px; }
    body.page-financing .section-header { align-items: stretch; flex-direction: column; }
    body.page-financing .section-header-actions .btn { flex: 1 1 auto; width: auto; padding: 8px 12px; min-height: 44px; }
    body.page-financing .filter-input,
    body.page-financing .form-group input:not([type="radio"]),
    body.page-financing .form-group select { min-height: 44px; }
    body.page-financing .radio-label { min-height: 44px; }
    body.page-financing .modal { width: 100%; max-height: 95vh; }
    body.page-financing .modal-body,
    body.page-financing .modal-header { padding: 16px; }
    body.page-financing .close-btn,
    body.page-financing .action-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 16px; }
    body.page-financing .financing-avatar { width: 40px; height: 40px; font-size: 16px; }
    body.page-financing .dataTables_filter input { width: 100%; margin-left: 0; }
    body.page-financing .dataTables_filter label { display: block; }
}

/* =========================================================================
   PAGE: EXPENSES
   Expense ledger: status pills, action icons, filter/form polish.
   Built on the shared recipes (DESIGN.md §6.9/§6.10); globals already cover
   titles, buttons, the grid header and the DataTables chrome.
   ========================================================================= */

body.page-expenses .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

body.page-expenses .status-active   { background: var(--cw-green-soft);  color: var(--cw-green); }
body.page-expenses .status-inactive { background: var(--cw-red-soft);    color: var(--cw-red); }
body.page-expenses .status-pending  { background: var(--cw-orange-soft); color: var(--cw-orange); }

body.page-expenses .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
body.page-expenses .action-icon:hover {
    background: var(--cw-border-soft);
    transform: translateY(-1px);
}
body.page-expenses .action-icon.edit-icon   { color: var(--cw-primary); }
body.page-expenses .action-icon.delete-icon { color: var(--cw-red); }

body.page-expenses .form-id-info {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--cw-text-secondary);
}

body.page-expenses .table-scroll-hint {
    font-size: 11px;
    color: var(--cw-text-muted);
}

/* ---- GLOBAL continuation: secondary button house style ----
   styles.css fills .btn-secondary with solid #6c757d grey. DESIGN.md §6.9 wants a
   soft surface with token text, like .btn-primary. Specificity: per-page
   `body.page-x …` rules are more specific and still win. */
.btn-secondary {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    border: 1px solid var(--cw-border);
}
.btn-secondary:hover {
    background: var(--cw-border-soft);
    color: var(--cw-text-primary);
    transform: translateY(-1px);
}

/* =========================================================================
   PAGE: PROFIT ANALYSIS   (4 tabs: profit / pnl / cashflow / simulation)
   Rules migrated out of the page's inline <style> block, tokenised.
   ========================================================================= */

body.page-profit-analysis .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.page-profit-analysis .status-badge.status-above-target { background: var(--cw-green-soft);  color: var(--cw-green); }
body.page-profit-analysis .status-badge.status-below-target { background: var(--cw-red-soft);    color: var(--cw-red); }
body.page-profit-analysis .status-badge.status-at-target    { background: var(--cw-orange-soft); color: var(--cw-orange); }

body.page-profit-analysis .report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
body.page-profit-analysis .report-summary-card {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}
body.page-profit-analysis .report-summary-card .val { font-size: 20px; font-weight: 700; color: var(--cw-primary); }
body.page-profit-analysis .report-summary-card .lbl { font-size: 11px; color: var(--cw-text-muted); text-transform: uppercase; margin-top: 4px; }

/* charts sit in cards: keep the canvas responsive and bounded on phones */
body.page-profit-analysis canvas { max-width: 100%; }

@media (max-width: 999px) {
    body.page-profit-analysis .report-summary { grid-template-columns: 1fr; }
}

/* Tab bar: 4 tabs did not fit a phone width (the 4th sat ~116px past the edge).
   Let them wrap and tighten the padding on phones. */
body.page-profit-analysis .pricing-tabs {
    border-bottom: 1px solid var(--cw-border);
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
body.page-profit-analysis .pricing-tab-btn {
    min-width: 0;
    padding: 11px 14px;
    font-size: 13px;
    color: var(--cw-text-secondary);
    white-space: nowrap;
}
body.page-profit-analysis .pricing-tab-btn.active {
    color: var(--cw-text-primary);
    border-bottom-color: var(--cw-primary);
}
body.page-profit-analysis .pricing-tab-btn:hover {
    background: var(--cw-primary-soft);
    color: var(--cw-text-primary);
}

/* NOTE: these grids use DataTables `responsive: true`, which collapses columns
   itself. Do NOT wrap them in an overflow-x scroller — the plugin and the scroll
   container fight over the width. */

@media (max-width: 999px) {
    body.page-profit-analysis .pricing-tab-btn { padding: 9px 10px; font-size: 12px; }
    body.page-profit-analysis .stat-card-value { font-size: 22px; }
}

/* =========================================================================
   PAGE: PURCHASES
   Operations grid (DataTable + add/edit modal with a searchable supplier
   dropdown and a star rating). Same recipe as Expenses/Financing; globals
   already cover titles, buttons, the grid header and the DataTables chrome.
   ========================================================================= */

body.page-purchases .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.page-purchases .status-pending     { background: var(--cw-surface-soft); color: var(--cw-text-secondary); }
body.page-purchases .status-prefinanced { background: var(--cw-primary-soft); color: var(--cw-primary); }
body.page-purchases .status-partial     { background: var(--cw-orange-soft);  color: var(--cw-orange); }
body.page-purchases .status-paid        { background: var(--cw-green-soft);   color: var(--cw-green); }

body.page-purchases .action-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    color: var(--cw-text-secondary);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
body.page-purchases .action-icon:hover {
    background: var(--cw-border-soft);
    transform: translateY(-1px);
}
body.page-purchases .action-icon.edit-icon   { color: var(--cw-primary); }
body.page-purchases .action-icon.delete-icon { color: var(--cw-red); }

body.page-purchases .form-id-info {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--cw-text-secondary);
}

body.page-purchases .table-scroll-hint {
    font-size: 11px;
    color: var(--cw-text-muted);
}

/* the searchable supplier dropdown: legacy border/selected state were a
   saturated 2px blue outline and a solid navy fill (DESIGN.md §2.4). */
body.page-purchases .searchable-dropdown-list {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
}
body.page-purchases .searchable-dropdown-item { font-size: 13px; color: var(--cw-text-primary); }
body.page-purchases .searchable-dropdown-item:hover,
body.page-purchases .searchable-dropdown-item.selected {
    background: var(--cw-primary-soft);
    color: var(--cw-text-primary);
}

/* modal: legacy header was a solid navy bar with a 20px white title */
body.page-purchases .modal { border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-purchases .modal-header {
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    border-bottom: 1px solid var(--cw-border);
    border-radius: 16px 16px 0 0;
}
body.page-purchases .modal-header h3 { font-size: 14px; }
body.page-purchases .close-btn {
    color: var(--cw-text-secondary);
    font-size: 16px;
    border-radius: 8px;
}
body.page-purchases .close-btn:hover { background: var(--cw-surface-soft); transform: none; }

body.page-purchases table.dataTable tbody td { font-variant-numeric: tabular-nums; }

@media (max-width: 999px) {
    body.page-purchases .modal { width: 100%; max-height: 95vh; }
    body.page-purchases .modal-body,
    body.page-purchases .modal-header { padding: 16px; }
    body.page-purchases .close-btn,
    body.page-purchases .action-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 16px; }
}

/* ===== PAGE: SALES ===== */
body.page-sales .main-content,
body.page-sales .data-section,
body.page-sales .form-group,
body.page-sales .filter-group { min-width: 0; }
body.page-sales .header,
body.page-sales .data-section {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}
body.page-sales .section-header { flex-wrap: wrap; gap: 12px; }
body.page-sales .section-header h2 { font-size: 14px; }
body.page-sales .section-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-sales .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
body.page-sales .filters-header { border-bottom: 1px solid var(--cw-border); padding-bottom: 12px; margin-bottom: 12px; }
body.page-sales .filters-header h3 { font-size: 14px; }
body.page-sales .filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.page-sales .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.page-sales .form-group { margin-bottom: 0; }
body.page-sales .filter-group label,
body.page-sales .form-group label { font-size: 12px; color: var(--cw-text-secondary); text-transform: none; letter-spacing: normal; }
body.page-sales .form-group label i { color: var(--cw-text-secondary); font-size: 13px; }
body.page-sales .filter-input,
body.page-sales .form-group input,
body.page-sales .form-group select,
body.page-sales .dataTables_filter input,
body.page-sales .dataTables_length select {
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    font-size: 13px;
}
body.page-sales :is(button, input, select, a, .paginate_button):focus-visible {
    outline: 2px solid var(--cw-primary);
    outline-offset: 2px;
}
body.page-sales.dark-mode input,
body.page-sales.dark-mode select { color-scheme: dark; }
body.page-sales .computed-field,
body.page-sales .form-group .readonly-input,
body.page-sales .form-id-info {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
body.page-sales .status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.page-sales .status-draft { background: var(--cw-orange-soft); color: var(--cw-text-primary); }
body.page-sales .status-confirmed { background: var(--cw-green-soft); color: var(--cw-text-primary); }
body.page-sales .status-cancelled { background: var(--cw-red-soft); color: var(--cw-text-primary); }
body.page-sales .action-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface-soft);
    color: var(--cw-text-secondary);
    font-size: 13px;
    cursor: pointer;
}
body.page-sales .action-icon.edit-icon { color: var(--cw-primary); }
body.page-sales .action-icon.delete-icon { color: var(--cw-red); }
body.page-sales .action-icon:hover,
body.page-sales .close-btn:hover { background: var(--cw-border-soft); transform: none; }
body.page-sales table.dataTable tbody td { font-size: 13px; border-color: var(--cw-border-soft); font-variant-numeric: tabular-nums; }
body.page-sales table.dataTable tbody td:nth-child(n+5):nth-child(-n+9) { text-align: right; }
body.page-sales table.dataTable { min-width: 0; max-width: 100%; }
body.page-sales table.dataTable tbody td:nth-child(-n+2) { white-space: nowrap; }
body.page-sales table.dataTable tbody td:last-child { white-space: nowrap; }
body.page-sales table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { color: var(--cw-text-secondary); }
body.page-sales table.dataTable .dtr-data { overflow-wrap: anywhere; }
body.page-sales .dataTables_wrapper { overflow: visible; color: var(--cw-text-secondary); font-size: 12px; }
body.page-sales .dataTables_wrapper .dataTables_filter { max-width: 100%; }
body.page-sales .dataTables_wrapper .dataTables_filter input { width: 160px; }
body.page-sales .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary) !important;
}
body.page-sales .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.page-sales .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-text-primary) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: none;
}
body.page-sales .table-scroll-hint { font-size: 11px; color: var(--cw-text-secondary); }
/* Responsive measures columns while the existing loader hides this container. */
body.page-sales #tableContainer[style*="display: none"] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
body.page-sales .modal-overlay { z-index: 1004; }
body.page-sales .modal { max-width: 800px; border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-sales .modal-header { background: var(--cw-surface); color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border); border-radius: 16px 16px 0 0; padding: 16px 20px; }
body.page-sales .modal-header h3 { font-size: 14px; }
body.page-sales .modal-body { padding: 20px; overflow-wrap: anywhere; }
body.page-sales .close-btn { width: 30px; height: 30px; flex-shrink: 0; color: var(--cw-text-secondary); font-size: 16px; border-radius: 8px; }
body.page-sales .form-actions { justify-content: flex-end; gap: 8px; margin-top: 20px; }
body.page-sales .receipt-reader { padding: 12px; margin-bottom: 16px; background: var(--cw-surface-soft); border: 1px dashed var(--cw-border); border-radius: 8px; }
body.page-sales input[type="file"] { max-width: 100%; color: var(--cw-text-secondary); }
body.page-sales .sale-route { background: var(--cw-surface-soft); border-radius: 8px; padding: 16px; margin-bottom: 16px; text-align: center; }
body.page-sales .sale-route-value { font-size: 13px; font-weight: 600; }
body.page-sales .sale-detail-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
body.page-sales .sale-detail-kpi { background: var(--cw-surface-soft); border-radius: 8px; padding: 12px; text-align: center; font-variant-numeric: tabular-nums; }
body.page-sales .sale-detail-rows { background: var(--cw-surface); border: 1px solid var(--cw-border); border-radius: 16px; margin-bottom: 16px; overflow: hidden; }
body.page-sales .sale-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--cw-border-soft); gap: 16px; }
body.page-sales .sale-detail-label { font-size: 12px; color: var(--cw-text-secondary); }
body.page-sales .sale-detail-value { font-size: 13px; color: var(--cw-text-primary); font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; font-variant-numeric: tabular-nums; }
body.page-sales .sale-remove-receipt { background: var(--cw-red-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-sales .swal2-popup { background: var(--cw-surface); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-sales .swal2-title { font-size: 20px; }
body.page-sales .swal2-html-container { font-size: 13px; }
body.page-sales .swal2-styled.swal2-confirm { background: var(--cw-primary-soft) !important; color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-sales .swal2-styled.swal2-cancel { background: var(--cw-surface-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
@media (max-width: 999px) {
    body.page-sales .filters-grid,
    body.page-sales .form-grid { grid-template-columns: minmax(0, 1fr); }
    body.page-sales .data-section { padding: 12px; }
    body.page-sales .dt-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    body.page-sales .dt-buttons .dt-button { width: auto; flex: 1; margin: 0; min-height: 44px; }
    body.page-sales .dataTables_length label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-sales .dataTables_length select { width: auto !important; }
    body.page-sales .dataTables_filter label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-sales .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }
    body.page-sales .modal-overlay { padding: 12px; }
    body.page-sales .modal { width: 100%; max-height: 95vh; }
    body.page-sales .modal-header,
    body.page-sales .modal-body { padding: 16px; }
    body.page-sales .action-icon,
    body.page-sales .close-btn { width: 44px; height: 44px; min-width: 44px; font-size: 16px; }
    body.page-sales .btn { min-height: 44px; font-size: 13px; }
    body.page-sales .btn i,
    body.page-sales .filters-header i,
    body.page-sales .form-group label i { font-size: 14px; }
    body.page-sales .filter-input,
    body.page-sales .form-group input,
    body.page-sales .form-group select { min-height: 44px; font-size: 16px; }
    body.page-sales .sale-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.page-sales .sale-route-value,
    body.page-sales .sale-route-value i { font-size: 14px; }
    body.page-sales .sale-detail-row { flex-wrap: wrap; gap: 8px; padding: 12px; }
    body.page-sales .form-actions { flex-wrap: wrap; }
}

/* ===== PAGE: DELIVERIES ===== */
body.page-deliveries .main-content,
body.page-deliveries .data-section,
body.page-deliveries .form-group,
body.page-deliveries .filter-group { min-width: 0; }
body.page-deliveries .header,
body.page-deliveries .data-section {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}
body.page-deliveries .section-header { flex-wrap: wrap; gap: 12px; }
body.page-deliveries .section-header h2 { font-size: 14px; }
body.page-deliveries .section-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-deliveries .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
body.page-deliveries .filters-header { border-bottom: 1px solid var(--cw-border); padding-bottom: 12px; margin-bottom: 12px; }
body.page-deliveries .filters-header h3 { font-size: 14px; }
body.page-deliveries .filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.page-deliveries .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.page-deliveries .form-group { margin-bottom: 0; }
body.page-deliveries .filter-group label,
body.page-deliveries .form-group label { font-size: 12px; color: var(--cw-text-secondary); text-transform: none; letter-spacing: normal; }
body.page-deliveries .form-group label i { color: var(--cw-text-secondary); font-size: 13px; }
body.page-deliveries .filter-input,
body.page-deliveries .form-group input:not([type="radio"]):not([type="checkbox"]),
body.page-deliveries .form-group textarea,
body.page-deliveries .form-group select,
body.page-deliveries .dataTables_filter input,
body.page-deliveries .dataTables_length select {
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    font-size: 13px;
}
body.page-deliveries :is(button, input, select, textarea, a, .paginate_button):focus-visible {
    outline: 2px solid var(--cw-primary);
    outline-offset: 2px;
}
body.page-deliveries.dark-mode input,
body.page-deliveries.dark-mode select { color-scheme: dark; }
body.page-deliveries .computed-field,
body.page-deliveries .form-id-info {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
body.page-deliveries .status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.page-deliveries .status-pending,
body.page-deliveries .status-in-transit { background: var(--cw-orange-soft); color: var(--cw-text-primary); }
body.page-deliveries .status-delivered,
body.page-deliveries .status-accepted { background: var(--cw-green-soft); color: var(--cw-text-primary); }
body.page-deliveries .status-rejected { background: var(--cw-red-soft); color: var(--cw-text-primary); }
body.page-deliveries .action-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface-soft);
    color: var(--cw-text-secondary);
    font-size: 13px;
    cursor: pointer;
}
body.page-deliveries .action-icon.edit-icon { color: var(--cw-primary); }
body.page-deliveries .action-icon.delete-icon { color: var(--cw-red); }
body.page-deliveries .action-icon:hover,
body.page-deliveries .close-btn:hover { background: var(--cw-border-soft); transform: none; }
body.page-deliveries table.dataTable tbody td { font-size: 13px; border-color: var(--cw-border-soft); font-variant-numeric: tabular-nums; }
body.page-deliveries table.dataTable tbody td:nth-child(n+6):nth-child(-n+9) { text-align: right; }
body.page-deliveries table.dataTable { min-width: 0; max-width: 100%; }
body.page-deliveries table.dataTable tbody td:nth-child(-n+2) { white-space: nowrap; }
body.page-deliveries table.dataTable tbody td:last-child { white-space: nowrap; }
body.page-deliveries table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { color: var(--cw-text-secondary); }
body.page-deliveries table.dataTable .dtr-data { overflow-wrap: anywhere; }
body.page-deliveries .dataTables_wrapper { overflow: visible; color: var(--cw-text-secondary); font-size: 12px; }
body.page-deliveries .dataTables_wrapper .dataTables_filter { max-width: 100%; }
body.page-deliveries .dataTables_wrapper .dataTables_filter input { width: 160px; }
body.page-deliveries .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary) !important;
}
body.page-deliveries .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.page-deliveries .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-text-primary) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: none;
}
body.page-deliveries .table-scroll-hint { font-size: 11px; color: var(--cw-text-secondary); }
/* Responsive measures columns while the existing loader hides this container. */
body.page-deliveries #tableContainer[style*="display: none"] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
body.page-deliveries .modal-overlay { z-index: 1004; }
body.page-deliveries .modal { max-width: 800px; border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-deliveries .modal-header { background: var(--cw-surface); color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border); border-radius: 16px 16px 0 0; padding: 16px 20px; }
body.page-deliveries .modal-header h3 { font-size: 14px; }
body.page-deliveries .modal-body { padding: 20px; overflow-wrap: anywhere; }
body.page-deliveries .close-btn { width: 30px; height: 30px; flex-shrink: 0; color: var(--cw-text-secondary); font-size: 16px; border-radius: 8px; }
body.page-deliveries .form-actions { justify-content: flex-end; gap: 8px; margin-top: 20px; }
body.page-deliveries .swal2-popup { background: var(--cw-surface); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-deliveries .swal2-title { font-size: 20px; }
body.page-deliveries .swal2-html-container { font-size: 13px; }
body.page-deliveries .swal2-styled.swal2-confirm { background: var(--cw-primary-soft) !important; color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-deliveries .swal2-styled.swal2-cancel { background: var(--cw-surface-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
@media (max-width: 999px) {
    body.page-deliveries .filters-grid,
    body.page-deliveries .form-grid { grid-template-columns: minmax(0, 1fr); }
    body.page-deliveries .data-section { padding: 12px; }
    body.page-deliveries .dt-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    body.page-deliveries .dt-buttons .dt-button { width: auto; flex: 1; margin: 0; min-height: 44px; }
    body.page-deliveries .dataTables_length label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-deliveries .dataTables_length select { width: auto !important; }
    body.page-deliveries .dataTables_filter label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-deliveries .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }
    body.page-deliveries .modal-overlay { padding: 12px; }
    body.page-deliveries .modal { width: 100%; max-height: 95vh; }
    body.page-deliveries .modal-header,
    body.page-deliveries .modal-body { padding: 16px; }
    body.page-deliveries .action-icon,
    body.page-deliveries .close-btn { width: 44px; height: 44px; min-width: 44px; font-size: 16px; }
    body.page-deliveries .btn { min-height: 44px; font-size: 13px; }
    body.page-deliveries .btn i,
    body.page-deliveries .filters-header i,
    body.page-deliveries .form-group label i { font-size: 14px; }
    body.page-deliveries .filter-input,
    body.page-deliveries .form-group input:not([type="radio"]):not([type="checkbox"]),
    body.page-deliveries .form-group textarea,
    body.page-deliveries .form-group select { min-height: 44px; font-size: 16px; }
    body.page-deliveries .form-actions { flex-wrap: wrap; }
}

body.page-deliveries .text-muted { color: var(--cw-text-secondary); }
body.page-deliveries .status-reassigned { background: var(--cw-purple-soft); color: var(--cw-text-primary); }
body.page-deliveries .status-badge { gap: 4px; }
body.page-deliveries .searchable-dropdown-list {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    color: var(--cw-text-primary);
}
body.page-deliveries .searchable-dropdown-item { font-size: 13px; overflow-wrap: anywhere; }
body.page-deliveries .searchable-dropdown-item:hover,
body.page-deliveries .searchable-dropdown-item.selected { background: var(--cw-primary-soft); color: var(--cw-text-primary); }
body.page-deliveries .delivery-section {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: none;
}
body.page-deliveries .delivery-section:hover { box-shadow: none; }
body.page-deliveries .delivery-section .delivery-section-title {
    color: var(--cw-text-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--cw-border-soft);
    margin-bottom: 12px;
}
body.page-deliveries .delivery-section .delivery-section-title i { color: var(--cw-primary); font-size: 14px; }
body.page-deliveries .section-customer .delivery-section-title i { color: var(--cw-green); }
body.page-deliveries .section-expenses .delivery-section-title i { color: var(--cw-orange); }
body.page-deliveries .radio-group { flex-wrap: wrap; gap: 16px; }
body.page-deliveries .radio-group .radio-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; }
body.page-deliveries input[type="radio"],
body.page-deliveries input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--cw-primary); }
body.page-deliveries .rental-grid { border: 1px dashed var(--cw-border); padding: 12px; border-radius: 8px; background: var(--cw-surface-soft); }
body.page-deliveries #lotPickerSection { min-width: 0; margin-top: 12px; border: 1px solid var(--cw-border); border-radius: 8px; padding: 12px; background: var(--cw-surface-soft); }
body.page-deliveries .lot-picker-header,
body.page-deliveries .delivery-lot-header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; }
body.page-deliveries .lot-picker-header { margin-bottom: 12px; }
body.page-deliveries .lot-picker-header h4 { margin: 0; font-size: 13px; color: var(--cw-text-primary); }
body.page-deliveries .delivery-lot { min-width: 0; margin-bottom: 12px; border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-deliveries .delivery-lot-header { background: var(--cw-primary-soft); color: var(--cw-text-primary); padding: 8px 12px; border-radius: 8px 8px 0 0; }
body.page-deliveries .lot-table-scroll { overflow-x: auto; max-width: 100%; }
body.page-deliveries .lot-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
body.page-deliveries .lot-table th { background: var(--cw-surface-soft); color: var(--cw-text-secondary); font-size: 11px; font-weight: 600; }
body.page-deliveries .lot-table td { background: var(--cw-surface); border-top: 1px solid var(--cw-border-soft); }
body.page-deliveries .lot-qty-input { width: 90px; padding: 8px; font-size: 13px; text-align: right; border: 1px solid var(--cw-border); border-radius: 8px; background: var(--cw-surface); color: var(--cw-text-primary); }
body.page-deliveries .swal2-container { z-index: 10020; }
body.page-deliveries .swal2-popup { min-width: 0; max-width: 100%; }
body.page-deliveries .swal2-select,
body.page-deliveries .swal2-textarea { width: 100%; margin: 8px 0; max-width: 100%; box-sizing: border-box; font-size: 13px; background: var(--cw-surface); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-deliveries .swal2-validation-message { background: var(--cw-red-soft); color: var(--cw-text-primary); font-size: 13px; }
@media (max-width: 999px) {
    body.page-deliveries .delivery-section { padding: 12px; }
    body.page-deliveries .delivery-section-title,
    body.page-deliveries .delivery-section-title i,
    body.page-deliveries .modal-header h3 i,
    body.page-deliveries .lot-picker-header i { font-size: 14px; }
    body.page-deliveries .radio-group .radio-label { min-height: 44px; font-size: 14px; }
    body.page-deliveries .lot-qty-input,
    body.page-deliveries .swal2-select,
    body.page-deliveries .swal2-textarea { min-height: 44px; font-size: 16px; }
    body.page-deliveries .swal2-styled { min-height: 44px; font-size: 13px; }
}
body.page-deliveries table.dataTable tbody tr.child td { white-space: normal; text-align: left; }
body.page-deliveries table.dataTable .dtr-details { width: 100%; }
body.page-deliveries table.dataTable .dtr-data { white-space: normal; }
@media (max-width: 999px) {
    body.page-deliveries table.dataTable .dtr-details li { display: flex; flex-direction: column; gap: 4px; }
}

/* =========================================================================
   GLOBAL: MOBILE DATATABLE COLLAPSE (responsive:true grids)
   styles.css's mobile block forces `table.dataTable { min-width:600px }`,
   nowrap headers and its own overflow-x scroller. That was correct for the
   old horizontal-scroll design but it DEFEATS DataTables `responsive: true`
   (which every grid in this app uses): the grid stayed desktop-wide on a
   phone and no column collapsed — the reported "list display issue".
   Let the responsive table shrink to its container so the plugin collapses
   to the key columns, and keep the data container measurable while it is
   still hidden (the loader hides it, then `$('#tableContainer').show()`
   reveals it) so Responsive reads the real phone width at init instead of
   0/unbounded, which is what suppressed the collapse.
   NOTE: this makes the legacy overflow-x wrappers in the markup inert —
   do not remove them, they simply never overflow now.
   ========================================================================= */
@media (max-width: 999px) {
    table.dataTable { min-width: 0 !important; width: 100% !important; }
    table.dataTable thead th { white-space: normal !important; }
}
[id$="TableContainer"][style*="display: none"],
[id$="TableContainer"][style*="display:none"],
#tableContainer[style*="display: none"],
#tableContainer[style*="display:none"] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* ===== PAGE: PAYMENTS ===== */
body.page-payments .main-content,
body.page-payments .data-section,
body.page-payments .form-group,
body.page-payments .filter-group { min-width: 0; }
body.page-payments .header,
body.page-payments .data-section {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
}
body.page-payments .section-header { flex-wrap: wrap; gap: 12px; }
body.page-payments .section-header h2 { font-size: 14px; }
body.page-payments .section-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-payments .filters-section {
    background: var(--cw-surface-soft);
    border: 1px solid var(--cw-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
body.page-payments .filters-header { border-bottom: 1px solid var(--cw-border); padding-bottom: 12px; margin-bottom: 12px; }
body.page-payments .filters-header h3 { font-size: 14px; }
body.page-payments .filters-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.page-payments .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.page-payments .form-group { margin-bottom: 0; }
body.page-payments .filter-group label,
body.page-payments .form-group label { font-size: 12px; color: var(--cw-text-secondary); text-transform: none; letter-spacing: normal; }
body.page-payments .form-group label i { color: var(--cw-text-secondary); font-size: 13px; }
body.page-payments .filter-input,
body.page-payments .form-group input,
body.page-payments .form-group select,
body.page-payments .form-group textarea,
body.page-payments .dataTables_filter input,
body.page-payments .dataTables_length select {
    max-width: 100%;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface);
    color: var(--cw-text-primary);
    font-size: 13px;
}
body.page-payments :is(button, input, select, a, .paginate_button):focus-visible {
    outline: 2px solid var(--cw-primary);
    outline-offset: 2px;
}
body.page-payments.dark-mode input,
body.page-payments.dark-mode select { color-scheme: dark; }
body.page-payments .form-id-info {
    background: var(--cw-surface-soft);
    color: var(--cw-text-primary);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
body.page-payments .radio-group { flex-wrap: wrap; gap: 16px; }
body.page-payments .radio-group .radio-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; }
body.page-payments input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--cw-primary); }
body.page-payments .searchable-dropdown-list {
    background: var(--cw-surface);
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    color: var(--cw-text-primary);
}
body.page-payments .searchable-dropdown-item { font-size: 13px; overflow-wrap: anywhere; }
body.page-payments .searchable-dropdown-item:hover,
body.page-payments .searchable-dropdown-item.selected { background: var(--cw-primary-soft); color: var(--cw-text-primary); }
body.page-payments .status-badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.page-payments .status-outgoing { background: var(--cw-orange-soft); color: var(--cw-text-primary); }
body.page-payments .status-incoming { background: var(--cw-green-soft); color: var(--cw-text-primary); }
body.page-payments .action-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cw-border);
    border-radius: 8px;
    background: var(--cw-surface-soft);
    color: var(--cw-text-secondary);
    font-size: 13px;
    cursor: pointer;
}
body.page-payments .action-icon.edit-icon { color: var(--cw-primary); }
body.page-payments .action-icon.delete-icon { color: var(--cw-red); }
body.page-payments .action-icon:hover,
body.page-payments .close-btn:hover { background: var(--cw-border-soft); transform: none; }
body.page-payments table.dataTable tbody td { font-size: 13px; border-color: var(--cw-border-soft); font-variant-numeric: tabular-nums; }
body.page-payments table.dataTable tbody td:nth-child(6) { text-align: right; }
body.page-payments table.dataTable { min-width: 0; max-width: 100%; }
body.page-payments table.dataTable tbody td:nth-child(-n+2) { white-space: nowrap; }
body.page-payments table.dataTable tbody td:last-child { white-space: nowrap; }
body.page-payments table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { color: var(--cw-text-secondary); }
body.page-payments table.dataTable .dtr-data { overflow-wrap: anywhere; }
body.page-payments table.dataTable tbody tr.child td { white-space: normal; text-align: left; }
body.page-payments table.dataTable .dtr-details { width: 100%; }
body.page-payments .dataTables_wrapper { overflow: visible; color: var(--cw-text-secondary); font-size: 12px; }
body.page-payments .dataTables_wrapper .dataTables_filter { max-width: 100%; }
body.page-payments .dataTables_wrapper .dataTables_filter input { width: 160px; }
body.page-payments .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px;
    color: var(--cw-text-secondary) !important;
}
body.page-payments .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.page-payments .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cw-primary-soft) !important;
    color: var(--cw-text-primary) !important;
    border: 1px solid var(--cw-border) !important;
    box-shadow: none;
}
body.page-payments .table-scroll-hint { font-size: 11px; color: var(--cw-text-secondary); }
/* Responsive measures columns while the existing loader hides this container. */
body.page-payments #tableContainer[style*="display: none"] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
body.page-payments .modal-overlay { z-index: 1004; }
body.page-payments .modal { max-width: 800px; border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-payments .modal-header { background: var(--cw-surface); color: var(--cw-text-primary); border-bottom: 1px solid var(--cw-border); border-radius: 16px 16px 0 0; padding: 16px 20px; }
body.page-payments .modal-header h3 { font-size: 14px; }
body.page-payments .modal-body { padding: 20px; overflow-wrap: anywhere; }
body.page-payments .close-btn { width: 30px; height: 30px; flex-shrink: 0; color: var(--cw-text-secondary); font-size: 16px; border-radius: 8px; }
body.page-payments .form-actions { justify-content: flex-end; gap: 8px; margin-top: 20px; }
body.page-payments .swal2-popup { background: var(--cw-surface); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 16px; }
body.page-payments .swal2-title { font-size: 20px; }
body.page-payments .swal2-html-container { font-size: 13px; }
body.page-payments .swal2-styled.swal2-confirm { background: var(--cw-primary-soft) !important; color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
body.page-payments .swal2-styled.swal2-cancel { background: var(--cw-surface-soft); color: var(--cw-text-primary); border: 1px solid var(--cw-border); border-radius: 8px; }
@media (max-width: 999px) {
    body.page-payments .filters-grid,
    body.page-payments .form-grid { grid-template-columns: minmax(0, 1fr); }
    body.page-payments .data-section { padding: 12px; }
    body.page-payments .dt-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    body.page-payments .dt-buttons .dt-button { width: auto; flex: 1; margin: 0; min-height: 44px; }
    body.page-payments .dataTables_length label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-payments .dataTables_length select { width: auto !important; }
    body.page-payments .dataTables_filter label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    body.page-payments .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }
    body.page-payments .modal-overlay { padding: 12px; }
    body.page-payments .modal { width: 100%; max-height: 95vh; }
    body.page-payments .modal-header,
    body.page-payments .modal-body { padding: 16px; }
    body.page-payments .action-icon,
    body.page-payments .close-btn { width: 44px; height: 44px; min-width: 44px; font-size: 16px; }
    body.page-payments .btn { min-height: 44px; font-size: 13px; }
    body.page-payments .btn i,
    body.page-payments .filters-header i,
    body.page-payments .form-group label i { font-size: 14px; }
    body.page-payments .filter-input,
    body.page-payments .form-group input:not([type="radio"]):not([type="checkbox"]),
    body.page-payments .form-group textarea,
    body.page-payments .form-group select { min-height: 44px; font-size: 16px; }
    body.page-payments .radio-group .radio-label { min-height: 44px; font-size: 14px; }
    body.page-payments .form-actions { flex-wrap: wrap; }
    body.page-payments table.dataTable .dtr-details li { display: flex; flex-direction: column; gap: 4px; }
    /* Shrink the two widest key columns (ID, counterparty) so Référence/Date/Contrepartie/
       Montant all fit within Responsive's measured width at phone sizes, instead of Montant
       being dropped. Must be a real font-size reduction, not overflow/ellipsis: Responsive
       measures each column's natural (untruncated) content width to decide what collapses. */
    body.page-payments table.dataTable tbody td:nth-child(1),
    body.page-payments table.dataTable tbody td:nth-child(4) { font-size: 11px !important; }
}

/* Shared filter headings retain their desktop appearance. */
.filters-toggle {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    text-align: inherit;
}
.filters-toggle:disabled { opacity: 1; }
.filters-chevron { display: none; }

/* Compact phone/tablet chrome; desktop DataTables layout stays native. */
@media (max-width: 1024px) {
    body .filters-section { padding: 12px !important; margin-bottom: 12px !important; }
    body .filters-section .filters-header { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; }
    body .filters-section .filters-header h3 { margin: 0; }
    .filters-toggle { min-height: 44px; cursor: pointer; }
    .filters-toggle:focus-visible { outline: 2px solid var(--cw-primary); outline-offset: 4px; }
    .filters-chevron { display: inline-block; margin-left: 8px; font-size: 12px; }
    .filters-toggle[aria-expanded="true"] .filters-chevron { transform: rotate(180deg); }
    body .filters-section .filters-header .btn { width: auto !important; min-height: 44px; padding: 8px !important; }
    body .filters-section .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    body .filters-section .filter-group { min-width: 0; margin: 0; }
    body .filters-section .filter-group label { white-space: normal; font-size: 12px; margin-bottom: 4px; }
    body .filters-section .filter-input { width: 100%; min-width: 0; min-height: 44px; padding: 8px !important; font-size: 16px !important; }
    body .filters-section.filters-collapsed .filters-grid { display: none !important; }
    body .filters-section.filters-collapsed .filters-header { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    body .filters-grid .dataTables_filter { grid-column: 1 / -1; float: none; text-align: left; margin: 0; }
    body .filters-grid .dataTables_filter label { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
    body .filters-grid .dataTables_filter input { width: 100% !important; min-width: 0; margin: 0 !important; min-height: 44px; font-size: 16px; }
    body .dataTables_wrapper .dt-buttons { display: flex; flex-wrap: nowrap; gap: 8px; width: auto; float: left; margin: 0 8px 8px 0; }
    body .dataTables_wrapper .dt-button.mobile-export { flex: 0 0 44px; width: 44px !important; min-width: 44px; height: 44px; padding: 0 !important; margin: 0 !important; font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center; }
    body .dataTables_wrapper .dt-button.mobile-export i { font-size: 16px !important; }
    body .dataTables_wrapper .dataTables_length { width: auto; clear: none; margin: 0 0 8px; font-size: 12px; }
    body .dataTables_wrapper .dataTables_length select { width: auto !important; margin: 0 4px !important; padding: 8px !important; min-height: 44px; font-size: 16px; }
    body .dataTables_wrapper .dataTables_info { font-size: 12px; }
    body table.dataTable tbody td.child { white-space: normal; text-align: left; }
    body table.dataTable tr.child .dtr-details { width: 100%; }
    body table.dataTable tr.child .dtr-details > li { display: flex; flex-direction: column; gap: 4px; white-space: normal; }
    body table.dataTable tr.child .dtr-data { white-space: normal; overflow-wrap: anywhere; }
    body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { min-height: 44px; padding-left: 32px; cursor: pointer; }
    body.page-suppliers .data-section, body.page-customers .data-section { padding: 12px; }
    body.page-suppliers .section-header, body.page-customers .section-header { margin-bottom: 12px; gap: 8px; }
    body.page-suppliers .section-header > div, body.page-customers .section-header > div { display: flex; flex-wrap: wrap; gap: 8px; }
    body.page-suppliers .section-header .btn, body.page-customers .section-header .btn { width: auto; min-height: 44px; padding: 8px 12px; }
    body.page-suppliers .table-scroll-hint, body.page-customers .table-scroll-hint { display: none; }
}