/* ============================================================
   Levin — Nexus-style CRM dashboard
   RTL Hebrew · Dark sidebar · Light content · Emerald accent
   ============================================================ */

:root {
    /* Brand / accent — emerald #22C55E */
    --brand-50:  #F0FDF4;
    --brand-100: #DCFCE7;
    --brand-200: #BBF7D0;
    --brand-300: #86EFAC;
    --brand-400: #4ADE80;
    --brand-500: #22C55E;
    --brand-600: #16A34A;
    --brand-700: #15803D;

    /* Neutrals */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-150: #F1F2F4;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Sidebar dark */
    --sidebar-bg:        #1A1D2E;
    --sidebar-bg-hover:  rgba(255,255,255,0.05);
    --sidebar-bg-active: rgba(255,255,255,0.08);
    --sidebar-text:      #E5E7EB;
    --sidebar-text-muted:#9CA3AF;
    --sidebar-border:    rgba(255,255,255,0.06);
    --sidebar-divider:   rgba(255,255,255,0.08);

    /* Status pills */
    --emerald-bg: #D1FAE5; --emerald-text: #047857;
    --amber-bg:   #FEF3C7; --amber-text:   #92400E;
    --rose-bg:    #FEE2E2; --rose-text:    #B91C1C;
    --blue-bg:    #DBEAFE; --blue-text:    #1D4ED8;
    --violet-bg:  #EDE9FE; --violet-text:  #6D28D9;
    --gray-bg:    #F3F4F6; --gray-text:    #4B5563;
    --yellow-bg:  #FEF9C3; --yellow-text:  #854D0E;

    /* App frame (light theme) */
    --app-bg:       #E9EBF0;
    --frame-bg:     #FFFFFF;
    --content-bg:   #F9FAFB;
    --surface-bg:   #FFFFFF;
    --surface-hover:#F9FAFB;
    --row-hover:    #F9FAFB;
    --border:       var(--gray-200);
    --border-subtle:var(--gray-150);
    --divider:      var(--gray-150);

    --text-primary:   var(--gray-900);
    --text-secondary: var(--gray-500);
    --text-muted:     var(--gray-400);
    --text-inverse:   #ffffff;

    --accent:         var(--brand-500);
    --accent-hover:   var(--brand-600);
    --accent-soft:    var(--brand-50);
    --accent-text:    var(--brand-700);
    --accent-ring:    rgba(34, 197, 94, 0.22);

    --danger: #DC2626;
    --danger-soft: #FEF2F2;
    --warning: #D97706;
    --warning-soft: #FFFBEB;

    --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 14px 28px -8px rgba(16, 24, 40, 0.12), 0 4px 10px -4px rgba(16, 24, 40, 0.08);
    --shadow-frame: 0 20px 50px -15px rgba(16, 24, 40, 0.22), 0 8px 20px -8px rgba(16, 24, 40, 0.10);

    --radius-frame:  16px;
    --radius-card:   12px;
    --radius-btn:    8px;
    --radius-pill:   9999px;
    --radius-sm:     6px;

    --sidebar-width: 260px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 120ms;
    --dur: 180ms;

    --font-sans: 'Inter', 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
    --app-bg:       #0B0E16;
    --frame-bg:     #111524;
    --content-bg:   #14192B;
    --surface-bg:   #1A2038;
    --surface-hover:#1F2746;
    --row-hover:    #1F2746;
    --border:       #26304A;
    --border-subtle:#1E263D;
    --divider:      #1E263D;

    --text-primary:   #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted:     #64748B;

    --emerald-bg: rgba(34,197,94,0.12); --emerald-text: #6EE7B7;
    --amber-bg:   rgba(245,158,11,0.12); --amber-text:   #FCD34D;
    --rose-bg:    rgba(244,63,94,0.12);  --rose-text:    #FDA4AF;
    --blue-bg:    rgba(59,130,246,0.12); --blue-text:    #93C5FD;
    --violet-bg:  rgba(139,92,246,0.14); --violet-text:  #C4B5FD;
    --gray-bg:    rgba(148,163,184,0.12); --gray-text:   #CBD5E1;
    --yellow-bg:  rgba(234,179,8,0.12);  --yellow-text:  #FDE68A;

    --accent-soft: rgba(34, 197, 94, 0.14);
    --accent-text: #86EFAC;

    --shadow-frame: 0 20px 50px -15px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.4);
}

/* ============================================================
   Base
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--app-bg);
    color: var(--text-primary);
    direction: rtl;
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background var(--dur) var(--ease);
}

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Lucide icon base size */
.icon { width: 16px; height: 16px; stroke-width: 1.5; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; stroke-width: 1.5; flex-shrink: 0; }
.icon-lg { width: 20px; height: 20px; stroke-width: 1.5; flex-shrink: 0; }

/* ============================================================
   Login screen
   ============================================================ */

.login-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background:
        radial-gradient(900px 500px at 20% 0%, rgba(34,197,94,0.14), transparent 60%),
        radial-gradient(700px 400px at 80% 100%, rgba(16,163,74,0.10), transparent 60%),
        var(--app-bg);
}

.login-container {
    background: var(--surface-bg);
    padding: 40px 36px;
    border-radius: var(--radius-frame);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.login-container h1 { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; letter-spacing: -0.01em; }
.login-subtitle { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 28px; text-transform: uppercase; letter-spacing: 1.6px; }

.login-form { text-align: right; }
.input-group { margin-bottom: 16px; }
.input-group label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-weight: 500; font-size: 0.82rem; }
.input-group input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.password-group { position: relative; }
.password-input-container { position: relative; display: flex; align-items: center; }
.password-input-container input { padding-left: 42px; }
.toggle-password {
    position: absolute; left: 8px;
    padding: 6px; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 1rem;
    transition: background var(--dur) var(--ease);
}
.toggle-password:hover { background: var(--gray-100); }

.checkbox-group { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.checkbox-group input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.checkbox-group label { color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; }

.login-btn {
    width: 100%; padding: 11px;
    background: var(--accent); color: #ffffff;
    border-radius: var(--radius-btn);
    font-size: 0.95rem; font-weight: 600;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: 0 1px 2px rgba(16,24,40,0.08);
}
.login-btn:hover { background: var(--accent-hover); }

.login-error {
    margin-top: 16px; padding: 10px 14px;
    border-radius: var(--radius-btn);
    background: var(--danger-soft); color: var(--danger);
    font-size: 0.88rem; border: 1px solid rgba(220,38,38,0.15);
}

/* ============================================================
   Main App Frame
   ============================================================ */

.container {
    max-width: none;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
    display: flex;
}

.app-frame {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);   /* sidebar first → right in RTL */
    width: 100%;
    min-height: calc(100vh - 32px);
    background: var(--frame-bg);
    border-radius: var(--radius-frame);
    box-shadow: var(--shadow-frame);
    align-items: start;
    /* No overflow:hidden — keeps sticky sidebar working.
       Rounded corners still visible because background + border-radius clip naturally. */
}

/* ============================================================
   Sidebar
   ============================================================ */

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    padding: 14px;
    /* Sticky: the sidebar stays in view while the page scrolls */
    position: sticky;
    top: 16px;
    align-self: start;
    height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0 var(--radius-frame) var(--radius-frame) 0;   /* right side rounded in RTL */
    border-left: 1px solid var(--sidebar-border);
    border-right: none;
}

.sidebar-brand-wrap { position: relative; margin-bottom: 18px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    width: 100%;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: right;
}
.sidebar-brand:hover { background: var(--sidebar-bg-hover); }

.user-switcher-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-btn);
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
    padding: 6px;
    z-index: 200;
    max-height: 320px;
    overflow-y: auto;
}
.user-switcher-dropdown.open { display: block; }

.user-switch-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    transition: background var(--dur) var(--ease);
}
.user-switch-row:hover { background: rgba(255,255,255,0.05); }
.user-switch-row.active { opacity: 0.7; }

.user-switch-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    border-radius: 8px;
    text-align: right;
    font: inherit;
}
.user-switch-item:disabled { cursor: default; }

.user-switch-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7 0%, #6366F1 50%, #3B82F6 100%);
    color: #ffffff;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.user-switch-name { flex: 1; font-weight: 600; font-size: 0.9rem; }
.user-switch-badge {
    font-size: 0.7rem;
    color: var(--sidebar-text-muted, #94a3b8);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}
.user-switch-remove {
    width: 24px; height: 24px;
    border: none;
    background: transparent;
    color: var(--sidebar-text-muted, #94a3b8);
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
    line-height: 1;
    margin-inline-end: 4px;
    flex-shrink: 0;
}
.user-switch-remove:hover { background: rgba(255,80,80,0.15); color: #ff7070; }
.user-switch-empty {
    padding: 12px 10px;
    color: var(--sidebar-text-muted, #94a3b8);
    font-size: 0.85rem;
    text-align: center;
}

.filter-section > .reminder-fixed-template { margin: 0 0 10px; padding: 12px; }

.reminder-fixed-template {
    padding: 14px;
    border: 1px dashed rgba(127, 127, 127, 0.4);
    border-radius: 10px;
    background: rgba(127, 127, 127, 0.06);
    color: var(--text-muted, #475569);
    font-size: 0.9rem;
    margin: 6px 0 12px;
}
.reminder-fixed-template code {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.85rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.12);
}
.reminder-fixed-note {
    margin-top: 4px;
    font-size: 0.8rem;
    opacity: 0.8;
}

.tpl-pick-title {
    font-weight: 600;
    margin-bottom: 8px;
}
/* The options sit side by side as cards, so the picker stays short vertically */
.tpl-pick-opts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.tpl-pick-opt {
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tpl-pick-opt:hover { border-color: var(--brand, #10b981); }
.tpl-pick-opt:has(input:checked) {
    border-color: var(--brand, #10b981);
    background: color-mix(in srgb, var(--brand, #10b981) 8%, transparent);
}
.tpl-pick-opt input {
    cursor: pointer;
    margin-top: 3px;
    accent-color: var(--brand, #10b981);
    flex-shrink: 0;
}
.tpl-pick-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tpl-pick-text code { align-self: flex-start; }
.tpl-pick-text small {
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0.85;
}
.tpl-pick-body { margin-top: 10px; }
.tpl-pick-body .reminder-textarea { margin: 0; }

.user-switch-add {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px dashed rgba(255,255,255,0.16);
    background: transparent;
    color: var(--sidebar-text-muted, #cbd5e1);
    cursor: pointer;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: right;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.user-switch-add:hover {
    background: rgba(255,255,255,0.05);
    color: #ffffff;
    border-color: rgba(255,255,255,0.28);
}
.user-switch-add-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.06);
    font-size: 1.1rem;
    font-weight: 600;
}

.brand-mark {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #A855F7 0%, #6366F1 50%, #3B82F6 100%);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.6);
}

.brand-wordmark {
    flex: 1; min-width: 0;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-brand .chevron { color: var(--sidebar-text-muted); }

.sidebar-section {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 6px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--sidebar-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.sidebar-section-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sidebar-icon-btn {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    color: var(--sidebar-text-muted);
    border-radius: 6px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-icon-btn:hover { background: var(--sidebar-bg-hover); color: #ffffff; }

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-btn);
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: 0.88rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    user-select: none;
    position: relative;
}
.sidebar-item:hover { background: var(--sidebar-bg-hover); }
.sidebar-item.active { background: var(--sidebar-bg-active); font-weight: 500; }

.sidebar-item .icon { color: var(--sidebar-text-muted); }
.sidebar-item.active .icon { color: #ffffff; }

.sidebar-item-label {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-badge {
    background: #EF4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px; height: 18px;
    border-radius: 50%;
    display: grid; place-items: center;
    padding: 0 4px;
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-divider {
    height: 1px;
    background: var(--sidebar-divider);
    margin: 10px 6px;
}

.sidebar-user-card {
    display: grid;
    grid-template-columns: 36px 1fr 30px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: var(--radius-btn);
    margin-top: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--sidebar-divider);
}

.sidebar-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #22C55E 0%, #15803D 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.sidebar-user-info { min-width: 0; }
.sidebar-user-name {
    color: #ffffff; font-weight: 600; font-size: 0.85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-email {
    color: var(--sidebar-text-muted); font-size: 0.74rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.sidebar-user-card .chev-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    display: grid; place-items: center;
    color: var(--sidebar-text-muted);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-user-card .chev-btn:hover { background: rgba(255,255,255,0.10); color: #ffffff; }

.sidebar-backdrop { display: none; }

/* Group items in sidebar */
.group-item {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
    color: var(--sidebar-text);
    user-select: none;
    position: relative;
}
.group-item:hover { background: var(--sidebar-bg-hover); }
.group-item.active { background: var(--sidebar-bg-active); }

/* Sortable.js visual states */
.group-item-ghost { opacity: 0.35; background: rgba(255,255,255,0.04); }
.group-item-chosen { cursor: grabbing; }
.group-item-drag { opacity: 0.9; box-shadow: 0 8px 20px -4px rgba(0,0,0,0.35); }

.group-item-emoji {
    width: 28px; height: 28px;
    border-radius: 7px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.05);
    font-size: 1rem;
    cursor: pointer;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.group-item-emoji:hover { transform: scale(1.06); background: rgba(255,255,255,0.10); }

.group-item-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.group-item-name {
    font-size: 0.85rem; font-weight: 500;
    color: var(--sidebar-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-item-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.group-item-count {
    font-size: 0.72rem;
    color: var(--sidebar-text-muted);
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
}
.group-item.active .group-item-count { background: rgba(255,255,255,0.12); color: #ffffff; }
.group-item.active .group-item-name { color: #ffffff; font-weight: 600; }
.group-item.active .group-item-emoji { background: rgba(255,255,255,0.12); }

/* Old/compatibility — hide elements we replaced */
.header, .total-debt, .header-buttons-container { display: none !important; }
.groups-sidebar, .groups-sidebar-header, .groups-list { /* kept structural roles via JS */ }

/* ============================================================
   Main content area
   ============================================================ */

.app-main {
    background: var(--content-bg);
    padding: 24px 28px;
    min-width: 0;
    min-height: calc(100vh - 32px);
    border-radius: var(--radius-frame) 0 0 var(--radius-frame);   /* left side rounded in RTL */
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.page-title-sub {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-top: 2px;
}

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

.icon-btn-ghost {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--text-secondary);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    position: relative;
}
.icon-btn-ghost:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .icon-btn-ghost:hover { background: var(--surface-hover); }

.icon-btn-outline {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: var(--radius-btn);
    background: var(--surface-bg);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn-outline:hover { background: var(--gray-50); color: var(--text-primary); border-color: var(--gray-300); }
[data-theme="dark"] .icon-btn-outline:hover { background: var(--surface-hover); }

.icon-btn-accent {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    box-shadow: 0 4px 10px -2px rgba(34, 197, 94, 0.4);
}
.icon-btn-accent:hover { background: var(--accent-hover); }
.icon-btn-accent:active { transform: scale(0.96); }

/* Tabs */
.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Wraps, because the tab labels are Hebrew words of very different lengths and
   there are five of them now. A non-wrapping row pushed the whole page wider
   than a phone screen, which is what the Android app was showing. */
.tabs-left {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

/* Month picker that rides on the tab strip for the unpaid tab. Deliberately
   not .tabs-right — that class is older, unused, and hidden under 520px. */
.tabs-month {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    flex-wrap: wrap;
}
.tabs-month .select-pill,
.tabs-month .outlined-btn { padding-top: 6px; padding-bottom: 6px; font-size: 0.8rem; }

.tab {
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }

.tabs-right {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.tabs-right:hover { color: var(--text-primary); }

/* Toolbar */
.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    flex: 1;
    min-width: 260px;
    max-width: 380px;
}
.search-wrap .search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

#searchInput {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: 0.88rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#searchInput::placeholder { color: var(--text-muted); }
#searchInput:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-ring);
}

.outlined-btn {
    padding: 8px 12px;
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.outlined-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
[data-theme="dark"] .outlined-btn:hover { background: var(--surface-hover); }
.outlined-btn.is-active {
    background: var(--accent-soft);
    color: var(--accent-text);
    border-color: rgba(34, 197, 94, 0.4);
}

.outlined-btn .icon { color: var(--text-secondary); }
.outlined-btn.is-active .icon { color: var(--accent-text); }

.toolbar-spacer { flex: 1; }

.select-pill {
    padding: 8px 34px 8px 12px;
    background: var(--surface-bg)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239CA3AF' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat left 10px center;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: border-color var(--dur) var(--ease);
}
.select-pill:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.select-pill:hover { border-color: var(--gray-300); }

.primary-btn {
    padding: 8px 14px;
    background: var(--accent);
    color: #ffffff;
    border-radius: var(--radius-btn);
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.primary-btn:hover { background: var(--accent-hover); }

/* KPI cards */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.kpi-card {
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kpi-card:hover { border-color: var(--gray-300); }

.kpi-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.kpi-icon-box {
    width: 20px; height: 20px;
    border-radius: 5px;
    display: grid; place-items: center;
    background: var(--kpi-soft, var(--accent-soft));
    color: var(--kpi-accent, var(--accent));
}
.kpi-icon-box svg { width: 11px; height: 11px; }

.kpi-value {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Unpaid-by-month tab: group headers inside the drivers table */
.unpaid-summary {
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.unpaid-summary strong { color: var(--text-primary); font-weight: 700; }

.unpaid-table tbody tr.unpaid-group-row td {
    background: var(--surface-hover, rgba(148,163,184,0.10));
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 8px 14px;
    font-size: 0.82rem;
}
.filter-month-select { width: 100%; }
.filter-month-note {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--text-muted);
    min-height: 1em;
}
/* Narrowing a chosen month down to whoever stopped working. Greyed out until
   a month is actually loaded, since on its own it has nothing to narrow. */
.filter-inactive-row { margin-top: 2px; padding: 6px 2px; }
.filter-inactive-row.is-disabled { opacity: 0.45; cursor: default; }
.filter-inactive-row.is-disabled:hover,
[data-theme="dark"] .filter-inactive-row.is-disabled:hover { background: transparent; }
.filter-inactive-row input[type="checkbox"]:disabled { cursor: default; }

.unpaid-filter-note {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent-text, var(--accent));
    font-size: 0.76rem;
    font-weight: 600;
}
.outlined-btn.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-text, var(--accent));
}
.unpaid-group-title { font-weight: 700; color: var(--text-primary); }
.unpaid-group-meta { color: var(--text-muted); margin-inline-start: 10px; }
.unpaid-charged { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Collection rate card — its own strip under the KPIs, mush only */
.collection-card {
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    --kpi-accent: var(--accent);
    --kpi-soft: var(--accent-soft);
}

.collection-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.collection-head .select-pill { padding-top: 6px; padding-bottom: 6px; font-size: 0.8rem; }

.collection-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.collection-percent {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.collection-bar {
    height: 8px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}
.collection-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--accent);
    transition: width 0.35s var(--ease);
}

.collection-detail {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.kpi-card.kpi-danger  { --kpi-accent: var(--danger);  --kpi-soft: var(--danger-soft); }
.kpi-card.kpi-warning { --kpi-accent: var(--warning); --kpi-soft: var(--warning-soft); }
.kpi-card.kpi-success { --kpi-accent: var(--accent);  --kpi-soft: var(--accent-soft); }
.kpi-card.kpi-info    { --kpi-accent: #3B82F6;         --kpi-soft: var(--blue-bg); }

/* ============================================================
   Drivers Table
   ============================================================ */

.drivers-container {
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.drivers-container > table { display: table; }
@media (max-width: 700px) {
    .drivers-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .drivers-container > table { min-width: 640px; }
}

/* Thin refresh progress bar */
.refresh-bar {
    position: relative;
    height: 2px;
    border-radius: 999px;
    overflow: hidden;
    margin: -6px 0 4px;
    background: var(--border-subtle);
}
.refresh-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
    animation: refresh-bar-scan 1.1s ease-in-out infinite;
}
@keyframes refresh-bar-scan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Spinning refresh icon during silent refresh */
.icon-btn-accent.is-spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading, .no-data, .error {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.92rem;
}
.error {
    color: var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius-btn);
    margin: 20px;
}

.drivers-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}

.drivers-table thead th {
    padding: 12px 16px;
    text-align: right;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    background: var(--surface-bg);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0; z-index: 1;
}

.drivers-table tbody td {
    padding: 0 16px;
    height: 56px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    font-size: 0.82rem;
}

.drivers-table tbody tr:last-child td { border-bottom: none; }

.driver-row {
    transition: background var(--dur-fast) var(--ease);
}
.driver-row:hover { background: var(--row-hover); }
.driver-row.hidden-driver { opacity: 0.55; }
.driver-row.hidden-driver:hover { opacity: 0.85; }

.row-num {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    width: 40px;
    font-size: 0.8rem;
}

/* Driver name cell */
.driver-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Inline phone+actions block under the name — visible on mobile only */
.driver-phone-mobile { display: none; }

.driver-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.78rem;
    flex-shrink: 0;
    user-select: none;
}

.driver-name {
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    transition: color var(--dur) var(--ease);
}
.driver-name:hover { color: var(--accent); }

.edit-name-btn {
    cursor: pointer;
    opacity: 0;
    color: var(--text-muted);
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
    display: inline-grid; place-items: center;
    width: 22px; height: 22px;
    border-radius: 5px;
}
.driver-row:hover .edit-name-btn { opacity: 1; }
.edit-name-btn:hover { color: var(--accent); background: var(--accent-soft); }

.edit-name-input {
    padding: 5px 10px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--surface-bg);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 160px;
}
.edit-name-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

/* Pills */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}

/* Group cell with emoji chip */
.group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}
[data-theme="dark"] .group-chip { background: var(--surface-hover); }
.group-chip .emoji { font-size: 0.9rem; line-height: 1; }
.group-chip.no-group { color: var(--text-muted); font-style: italic; }

/* Driver → group picker popover */
.driver-group-picker {
    position: fixed;
    z-index: 2000;
    background: var(--surface-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 180px;
    max-width: min(260px, calc(100vw - 16px));
    max-height: min(320px, calc(100vh - 20px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.88rem;
}
.driver-group-picker .picker-header {
    padding: 6px 10px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.driver-group-picker .picker-items {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.driver-group-picker .picker-empty {
    padding: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}
.driver-group-picker .picker-item {
    width: 100%;
    text-align: right;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.driver-group-picker .picker-item:hover { background: var(--gray-100); }
[data-theme="dark"] .driver-group-picker .picker-item:hover { background: var(--surface-hover); }
.driver-group-picker .picker-clear { color: var(--text-secondary); border-top: 1px solid var(--border-subtle); margin-top: 4px; padding-top: 10px; }
.driver-group-picker .picker-custom { color: var(--accent); font-weight: 500; }

/* Phone cell */
.driver-phone {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 6px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.whatsapp-link:hover { background: var(--emerald-bg); color: var(--emerald-text); }
.no-phone { color: var(--text-muted); font-style: italic; }

.copy-btn {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    margin-inline-start: 4px;
    vertical-align: middle;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.copy-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
    border-color: var(--border);
}
[data-theme="dark"] .copy-btn:hover { background: var(--surface-hover); }
.copy-btn.copied {
    background: var(--emerald-bg);
    color: var(--emerald-text);
    border-color: transparent;
}

.uchat-btn {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    margin-inline-start: 2px;
    vertical-align: middle;
    border-radius: 6px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.uchat-btn:hover:not(:disabled) {
    background: var(--gray-100);
    color: var(--brand, #10b981);
    border-color: var(--border);
}
[data-theme="dark"] .uchat-btn:hover:not(:disabled) { background: var(--surface-hover); }
.uchat-btn:disabled { opacity: 0.6; cursor: wait; }

/* Last payment cell */
.last-decrease {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide button cell — wider when it holds both reminder + eye, narrower with eye only */
.hide-cell { width: 48px; text-align: center; white-space: nowrap; }
.hide-cell:has(.reminder-btn) { width: 84px; }
.hide-btn, .reminder-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--text-muted);
    display: inline-grid; place-items: center;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    vertical-align: middle;
}
.hide-btn:hover { background: var(--gray-100); color: var(--text-primary); }
.reminder-btn:hover:not(:disabled) { background: var(--gray-100); color: var(--brand, #10b981); }
.reminder-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.reminder-btn.selected { background: var(--brand, #10b981); color: #fff; }
.reminder-btn.selected:hover:not(:disabled) { background: var(--brand-hover, #059669); color: #fff; }
[data-theme="dark"] .hide-btn:hover,
[data-theme="dark"] .reminder-btn:hover:not(:disabled) { background: var(--surface-hover); }
[data-theme="dark"] .reminder-btn.selected { background: var(--brand, #10b981); color: #fff; }

/* Bulk reminder banner — compact pill positioned inline below the KPI grid */
.bulk-banner {
    display: inline-flex;
    align-self: center;              /* parent is a flex column; center horizontally without stretch */
    gap: 6px;
    align-items: center;
    background: var(--text-primary, #0f172a);
    color: #fff;
    padding: 6px 10px 6px 6px;
    border-radius: 999px;
    box-shadow: 0 12px 40px -10px rgba(0,0,0,0.45);
    margin: 4px 0;
    width: auto;
    max-width: 100%;
    animation: bulkBannerIn 0.18s ease-out;
}
@keyframes bulkBannerIn {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.bulk-banner-send {
    background: var(--brand, #10b981);
    color: #fff;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background var(--dur) var(--ease);
}
.bulk-banner-send:hover { background: var(--brand-hover, #059669); }
.bulk-banner-cancel {
    background: transparent;
    color: #fff;
    padding: 9px 14px;
    font-weight: 500;
    font-size: 0.88rem;
    opacity: 0.85;
    border-radius: 999px;
}
.bulk-banner-cancel:hover { opacity: 1; background: rgba(255,255,255,0.1); }

/* Minimize button in modal header */
.reminder-minimize {
    width: 28px; height: 28px;
    border-radius: 6px;
    color: var(--text-muted);
    display: inline-grid; place-items: center;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reminder-minimize:hover { background: var(--gray-100); color: var(--text-primary); }
[data-theme="dark"] .reminder-minimize:hover { background: var(--surface-hover); }
.reminder-minimize .ico-max { display: none; }
.reminder-overlay.minimized .reminder-minimize .ico-min { display: none; }
.reminder-overlay.minimized .reminder-minimize .ico-max { display: inline; }

/* Minimized state — backdrop hidden, modal becomes a small floating widget */
.reminder-overlay.minimized {
    background: transparent;
    pointer-events: none;
    align-items: flex-end;
    justify-content: flex-start;       /* RTL: flex-start = right side */
    padding: 16px;
    animation: none;
}
.reminder-overlay.minimized .reminder-modal {
    pointer-events: auto;
    max-width: 300px;
    padding: 12px 14px;
    gap: 8px;
    box-shadow: 0 16px 40px -8px rgba(0,0,0,0.35);
    border: 1px solid var(--border);
}
.reminder-overlay.minimized .reminder-header { gap: 6px; }
.reminder-overlay.minimized .reminder-title { font-size: 0.92rem; }
.reminder-overlay.minimized .reminder-progress { gap: 6px; margin-top: 0; }
.reminder-overlay.minimized .reminder-progress-text { font-size: 0.95rem; }
.reminder-overlay.minimized .reminder-progress-bar { height: 6px; }
.reminder-overlay.minimized .reminder-progress-stop {
    padding: 5px 18px;
    font-size: 0.82rem;
}

/* Reminder bulk progress */
.reminder-progress { display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-top: 6px; }
.reminder-progress-text {
    font-weight: 700; text-align: center; font-size: 1.1rem;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.reminder-progress-bar {
    height: 10px;
    background: var(--gray-100);
    border-radius: 999px;
    overflow: hidden;
}
.reminder-progress-fill {
    height: 100%;
    background: var(--brand, #10b981);
    transition: width 0.2s ease;
    border-radius: 999px;
}
.reminder-progress-stop {
    align-self: center;
    background: #ef4444;
    color: #fff;
    padding: 9px 30px;
    border-radius: var(--radius-btn, 8px);
    font-weight: 600;
    font-size: 0.95rem;
    transition: background var(--dur) var(--ease);
}
.reminder-progress-stop:hover:not(:disabled) { background: #dc2626; }
.reminder-progress-stop:disabled { opacity: 0.6; cursor: wait; }

/* Filtered bulk reminder modal — sections, group checkboxes, debt range.
   Laid out wide (3 columns) so the form never outgrows the viewport height;
   only the columns scroll, the title and the send buttons stay put. */
.reminder-modal.reminder-modal-filter {
    max-width: 1120px;
    max-height: calc(100vh - 40px);
}
.filter-compose {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    flex: 1 1 auto;
}
.filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 24px;
    align-items: start;
    overflow-y: auto;
    min-height: 0;
    padding: 2px 2px 4px;
}
.filter-compose > .reminder-header,
.filter-compose > .filter-footer { flex-shrink: 0; }
.filter-col { min-width: 0; }
.filter-col > .filter-section:last-child { margin-bottom: 0; }
@media (max-width: 1000px) {
    .filter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
    .filter-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .filter-col > .filter-section:last-child { margin-bottom: 14px; }
}
.filter-section { margin-bottom: 14px; }
.filter-section-groups { display: flex; flex-direction: column; min-height: 0; }
.filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}
.filter-footer .filter-match-count { flex: 1 1 160px; margin-top: 0; }
.filter-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.filter-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: background var(--dur) var(--ease);
}
.filter-check-row:hover { background: var(--gray-100); }
[data-theme="dark"] .filter-check-row:hover { background: var(--surface-hover); }
.filter-check-row input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--brand, #10b981);
    cursor: pointer;
}
.filter-check-all {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
    padding-bottom: 8px;
    font-weight: 600;
}
.filter-groups-list {
    max-height: 360px;
    overflow-y: auto;
    padding-inline-end: 4px;
}
.filter-count-pill {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--gray-100);
    padding: 1px 7px;
    border-radius: 999px;
    margin-inline-start: 4px;
}
[data-theme="dark"] .filter-count-pill { background: var(--surface-hover); }

.filter-range {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.filter-range label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.filter-range input {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn, 8px);
    font: inherit;
    background: var(--surface, #fff);
    color: var(--text-primary);
}
.filter-range input:focus { outline: 2px solid var(--brand, #10b981); outline-offset: -1px; border-color: var(--brand, #10b981); }

.filter-match-count {
    text-align: center;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px;
    background: var(--gray-100);
    border-radius: var(--radius-btn, 8px);
    margin-top: 6px;
}
[data-theme="dark"] .filter-match-count { background: var(--surface-hover); }

/* Delay-between-sends input */
.reminder-delay {
    display: flex; gap: 8px; align-items: center;
    font-size: 0.88rem;
    color: var(--text-primary);
    direction: rtl;
}
.reminder-delay input {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn, 8px);
    text-align: center;
    font: inherit;
    background: var(--surface, #fff);
    color: var(--text-primary);
}
.reminder-delay input:focus { outline: 2px solid var(--brand, #10b981); outline-offset: -1px; border-color: var(--brand, #10b981); }

/* Reminder modal */
.reminder-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: reminderFadeIn 0.15s ease-out;
}
@keyframes reminderFadeIn { from { opacity: 0; } to { opacity: 1; } }
.reminder-modal {
    background: var(--surface-bg, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 440px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.reminder-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.reminder-title { font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }
.reminder-subtitle { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.reminder-close {
    font-size: 1.6rem; line-height: 1;
    color: var(--text-muted);
    width: 28px; height: 28px; border-radius: 6px;
}
.reminder-close:hover { background: var(--gray-100); color: var(--text-primary); }
.reminder-textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn, 8px);
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
    background: var(--surface, #fff);
    color: var(--text-primary);
    direction: rtl;
    min-height: 120px;
    box-sizing: border-box;
}
.reminder-textarea:focus { outline: 2px solid var(--brand, #10b981); outline-offset: -1px; border-color: var(--brand, #10b981); }
.reminder-actions { display: flex; justify-content: flex-start; gap: 8px; }
.reminder-btn-send, .reminder-btn-cancel {
    padding: 8px 18px;
    border-radius: var(--radius-btn, 8px);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reminder-btn-send { background: var(--brand, #10b981); color: #fff; }
.reminder-btn-send:hover:not(:disabled) { background: var(--brand-hover, #059669); }
.reminder-btn-send:disabled { opacity: 0.6; cursor: wait; }
.reminder-btn-cancel { background: var(--gray-100); color: var(--text-primary); }
.reminder-btn-cancel:hover { background: var(--gray-200, #e5e7eb); }

/* Pagination */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-bg);
}
.pagination:first-child {
    border-top: none;
    border-bottom: 1px solid var(--border-subtle);
}
.pagination-buttons {
    display: flex;
    gap: 6px;
}
.pagination button {
    padding: 6px 12px;
    border-radius: var(--radius-btn);
    background: var(--surface-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background var(--dur) var(--ease);
}
.pagination button:hover:not(:disabled) { background: var(--gray-50); border-color: var(--gray-300); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .current-page {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--gray-300); }

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Old compat */
.header-buttons, .header-buttons-row, .search-section, .search-buttons, .sort-section, .clear-search-btn { display: contents; }

/* Search buttons inside toolbar */
.search-buttons button {
    padding: 8px 12px;
    background: var(--accent);
    color: #ffffff;
    border-radius: var(--radius-btn);
    font-size: 0.82rem;
    font-weight: 600;
    transition: background var(--dur) var(--ease);
}
.search-buttons button:hover { background: var(--accent-hover); }
.search-buttons .clear-search-btn,
button.clear-search-btn {
    background: var(--surface-bg) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.search-buttons .clear-search-btn:hover { background: var(--gray-50) !important; }

/* Theme toggle button */
.theme-icon-light { display: inline; }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1180px) {
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .container { padding: 10px; }

    .app-frame {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        top: 0; right: -320px;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        z-index: 1001;
        transition: right 0.28s var(--ease);
        border-left: none;
        box-shadow: -10px 0 40px -10px rgba(0,0,0,0.25);
    }
    .sidebar.open { right: 0; }
    .sidebar-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(15,23,42,0.5);
        z-index: 1000;
        opacity: 0; pointer-events: none;
        transition: opacity 0.2s var(--ease);
    }
    .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

    .groups-menu-btn { display: inline-flex !important; }
}

@media (max-width: 700px) {
    .container { padding: 6px; }
    .app-main { padding: 18px 16px; }
    .page-title { font-size: 1.4rem; }

    /* Compact single-row KPIs — a thin strip of 3 inline stats */
    .kpi-grid {
        display: flex;
        flex-direction: row;
        grid-template-columns: none;
        gap: 6px;
        padding: 8px 10px;
        background: var(--surface-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-btn);
        font-size: 0.72rem;
    }
    .kpi-card {
        flex: 1;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        text-align: center;
    }
    .kpi-card:hover { transform: none; border: none; }
    .kpi-card::after { display: none; }
    .kpi-label {
        font-size: 0.62rem;
        letter-spacing: 0;
        text-transform: none;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .kpi-icon-box { display: none; }
    .kpi-value {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
    .kpi-sub { display: none; }

    .search-wrap { min-width: 100%; max-width: 100%; }
    .toolbar { gap: 8px; }

    .drivers-table { font-size: 0.78rem; }
    .drivers-table thead th, .drivers-table tbody td { padding-left: 10px; padding-right: 10px; }
    .driver-name { max-width: 140px; }

    /* Mobile: reorder columns — name, debt, phone, group, last payment.
       Table rows become flex containers so we can use `order` on each cell. */
    .drivers-table thead tr,
    .drivers-table tbody tr {
        display: flex;
        align-items: center;
        width: 100%;
    }
    .drivers-table th,
    .drivers-table td {
        display: inline-flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        height: auto;
    }
    .drivers-table th:nth-child(1),
    .drivers-table td:nth-child(1) { display: none; }                              /* row-num */
    .drivers-table th:nth-child(2), .drivers-table td:nth-child(2) { order: 1; flex: 1 1 auto; min-width: 0; }   /* name */
    .drivers-table th:nth-child(6), .drivers-table td:nth-child(6) {
        order: 2;
        flex: 0 0 66px !important;
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        display: flex !important;
        direction: ltr !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 10px 0 10px 4px !important;
        box-sizing: border-box;
    }
    /* Phone column hidden on mobile — its content is shown under the name instead */
    .drivers-table th:nth-child(4), .drivers-table td:nth-child(4) { display: none !important; }

    /* Reveal the inline phone block under the name, with compact controls */
    .driver-phone-mobile {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
        font-size: 0.78rem;
        color: var(--text-muted);
    }
    .driver-phone-mobile .whatsapp-link {
        padding: 2px 8px;
        font-size: 0.78rem;
    }
    .driver-phone-mobile .copy-btn,
    .driver-phone-mobile .uchat-btn {
        width: 24px; height: 24px;
    }

    /* Stack name + phone vertically inside the name cell (td is inline-flex on mobile) */
    .drivers-table td:nth-child(2) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2px;
    }
    .drivers-table td:nth-child(2) .driver-name-cell { width: 100%; }
    .drivers-table th:nth-child(3), .drivers-table td:nth-child(3) {
        order: 4;
        flex: 0 0 80px !important;
        width: 80px !important;
        justify-content: center;
    }                                                                                /* group — fixed */
    .drivers-table th:nth-child(5), .drivers-table td:nth-child(5) {
        order: 5;
        flex: 0 0 180px !important;
        width: 180px !important;
    }                                                                                /* last payment — fixed */
    .drivers-table th:nth-child(7), .drivers-table td:nth-child(7) {
        order: 6;
        flex: 0 0 76px !important;
        width: 76px !important;
    }                                                                                /* actions (reminder + hide) — fixed */

    /* Pill is plain inline text inside a block-level LTR cell.
       The cell's text-align:left anchors the ₪ to the cell's left edge,
       which is identical on every row (cell has fixed 96px width). */
    .drivers-table td:nth-child(6) .pill {
        display: inline-block !important;
        direction: ltr !important;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        transform: translateX(40px);           /* visually shift pill rightward into the whitespace left of the driver's name */
    }

    /* The unpaid tab's table has a different column set (#, name, phone,
       charged, open, actions), so the position-based mapping above lands on
       the wrong cells. Remap it — extra class for specificity. */

    /* Only three columns survive on mobile here, so it fits the screen — drop
       the 640px min-width or the name column absorbs the slack and pushes the
       amount past the right edge. */
    .drivers-container > table.unpaid-table { min-width: 0; }
    .drivers-table.unpaid-table th:nth-child(3),
    .drivers-table.unpaid-table td:nth-child(3),
    .drivers-table.unpaid-table th:nth-child(4),
    .drivers-table.unpaid-table td:nth-child(4) { display: none !important; }   /* phone (shown under name) + charged */
    .drivers-table.unpaid-table th:nth-child(5),
    .drivers-table.unpaid-table td:nth-child(5) {
        order: 2;
        flex: 0 0 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        display: flex !important;
        direction: ltr !important;
        justify-content: flex-end !important;
        padding: 10px 0 !important;
    }
    .drivers-table.unpaid-table td:nth-child(5) .pill { transform: none !important; }
    .drivers-table.unpaid-table th:nth-child(6),
    .drivers-table.unpaid-table td:nth-child(6) {
        order: 3;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        direction: rtl !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        transform: none !important;
    }
    /* Group headers stay full-width bands, not flex rows */
    .drivers-table.unpaid-table tbody tr.unpaid-group-row { display: block !important; width: 100%; }
    .drivers-table.unpaid-table tbody tr.unpaid-group-row td {
        display: block !important;
        width: 100%;
        order: 0;
        flex: none !important;
        max-width: none !important;
    }
}

@media (max-width: 520px) {
    .tabs-right { display: none; }
    /* Five tabs on a phone: tighter, so they take two comfortable rows rather
       than three cramped ones. */
    .tab { padding: 9px 9px; font-size: 0.82rem; }
    .tabs-month { width: 100%; }
    .tabs-month .select-pill { flex: 1; min-width: 0; }
}

.groups-menu-btn { display: none; }

/* ---------- Statistics popup (mush only) ---------- */
/* The tab that opens it isn't a view of the table, so it never goes .active —
   the icon is what separates it from the tabs beside it. */
.tab-stats { display: inline-flex; align-items: center; gap: 6px; }
.tab-stats .icon-sm { width: 15px; height: 15px; opacity: 0.75; }

.stats-modal { max-width: 860px; }
.stats-header-actions { display: flex; align-items: center; gap: 4px; }
/* Twelve months don't fit a phone screen, so the table scrolls inside the
   modal instead of the modal growing past the viewport. overflow-x is the
   safety net: the table below is laid out so it shouldn't ever need it, but a
   single unbreakable figure must scroll here rather than be clipped. */
.stats-body {
    max-height: 68vh;
    overflow-y: auto; overflow-x: auto;
    margin: -4px -4px 0; padding: 4px;
}

/* Fixed layout on purpose. The amounts can run to thirteen digits, and with
   automatic layout one bad figure widened the whole table past the popup and
   cut the second station off the edge. Fixed makes the columns divide the
   space available and the text wrap inside them instead. */
.stats-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.stats-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-bg, #fff);
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 6px 10px 8px;
    border-bottom: 1px solid var(--border);
}
.stats-table tbody tr { border-bottom: 1px solid var(--border-subtle, var(--border)); }
.stats-table tbody tr:hover { background: var(--surface-hover); }
.stats-table th.stats-month {
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 10px;
    width: 116px;
    /* Wide enough for the longest month, so the name never breaks in two; the
       "still running" badge beside it drops to its own line when it must. */
    white-space: normal;
}
.stats-cell { padding: 8px 10px; vertical-align: middle; }
.stats-cell-top { display: flex; align-items: center; gap: 8px; }
.stats-pct { font-size: 1rem; font-weight: 700; min-width: 46px; color: var(--text-primary); }
.stats-pct.is-good { color: var(--accent); }
.stats-pct.is-mid  { color: var(--warning); }
.stats-pct.is-low  { color: var(--danger); }
.stats-bar {
    flex: 1; min-width: 40px; height: 6px;
    background: var(--gray-150, #eef0f3);
    border-radius: 99px; overflow: hidden;
}
[data-theme="dark"] .stats-bar { background: rgba(255,255,255,0.09); }
.stats-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
/* Wraps. A thirteen-digit figure held on one line is what pushed the table off
   the edge of the popup in the first place. */
.stats-amounts {
    font-size: 0.74rem; color: var(--text-muted); margin-top: 3px;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.45;
}
.stats-empty { font-size: 0.8rem; color: var(--text-muted); }

/* The month still running always reads low — it's marked so nobody reads it
   as a collapse in collection. */
.stats-table tr.is-current { background: var(--content-bg); }
.stats-live {
    display: inline-block; margin-inline-start: 6px;
    font-size: 0.66rem; font-weight: 600;
    color: var(--amber-text); background: var(--amber-bg);
    padding: 1px 6px; border-radius: 99px;
    vertical-align: middle;
}
.stats-table tr.stats-total { border-bottom: none; }
.stats-table tr.stats-total th, .stats-table tr.stats-total td {
    border-top: 2px solid var(--border);
    padding-top: 12px;
}
.stats-note { font-size: 0.74rem; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }

.stats-loading, .stats-error {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 44px 16px;
    font-size: 0.9rem; color: var(--text-secondary); text-align: center;
}
.stats-loading-sub { font-size: 0.78rem; color: var(--text-muted); }
.stats-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    animation: statsSpin 0.8s linear infinite;
}
@keyframes statsSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .stats-pct { font-size: 0.9rem; min-width: 38px; }
    .stats-bar { display: none; }
    .stats-cell, .stats-table th.stats-month { padding: 8px 6px; }
    .stats-table th.stats-month { width: 84px; font-size: 0.78rem; }
    .stats-table thead th { font-size: 0.72rem; padding: 6px 6px 8px; }
    .stats-amounts { font-size: 0.68rem; }
    /* On a phone the badge never fits beside the month name. */
    .stats-month .stats-live { display: inline-block; margin: 3px 0 0; margin-inline-start: 0; }
}