/* =====================================================================
   FAHIVIHI PORTAL — DESIGN SYSTEM
   ---------------------------------------------------------------------
   Vibrant party-identity refresh. Layered ON TOP of the existing
   css/style.css — keeps all existing structure/JS hooks intact while
   modernizing the visual language.
   ---------------------------------------------------------------------
   To toggle off temporarily, remove the <link> tag for this file from
   the relevant HTML page and the original look returns immediately.
   ===================================================================== */

/* -----------  DESIGN TOKENS  ----------- */
:root {
    /* Brand palette — Adhaalath green refined. */
    --fv-green-50:  #e6f9f1;
    --fv-green-100: #c5f1de;
    --fv-green-200: #8fe3bf;
    --fv-green-300: #4fd29c;
    --fv-green-400: #1abf80;   /* hover / active */
    --fv-green-500: #03a972;   /* PRIMARY brand */
    --fv-green-600: #028d60;
    --fv-green-700: #016f4b;
    --fv-green-800: #014f36;

    /* Accent — warm gold for highlights / awards / pinned items. */
    --fv-gold-400:  #fbbf24;
    --fv-gold-500:  #f59e0b;
    --fv-gold-600:  #d97706;

    /* Status colors. */
    --fv-success:   #10b981;
    --fv-warning:   #f59e0b;
    --fv-danger:    #ef4444;
    --fv-info:      #3b82f6;

    /* Neutrals — warmer than pure gray. */
    --fv-ink-900:   #0f172a;
    --fv-ink-800:   #1e293b;
    --fv-ink-700:   #334155;
    --fv-ink-600:   #475569;
    --fv-ink-500:   #64748b;
    --fv-ink-400:   #94a3b8;
    --fv-ink-300:   #cbd5e1;
    --fv-ink-200:   #e2e8f0;
    --fv-ink-100:   #f1f5f9;
    --fv-ink-50:    #f8fafc;
    --fv-white:     #ffffff;

    /* Gradients — used sparingly for hero areas, primary buttons, headers. */
    --fv-gradient-brand:      linear-gradient(135deg, #03a972 0%, #028d60 50%, #016f4b 100%);
    --fv-gradient-brand-soft: linear-gradient(135deg, #e6f9f1 0%, #c5f1de 100%);
    --fv-gradient-gold:       linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --fv-gradient-danger:     linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --fv-gradient-info:       linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --fv-gradient-mesh:
        radial-gradient(circle at 10% 0%, rgba(3, 169, 114, 0.08), transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(245, 158, 11, 0.06), transparent 40%);

    /* Shadows — layered, soft, modern. */
    --fv-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --fv-shadow-sm:  0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --fv-shadow-md:  0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --fv-shadow-lg:  0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
    --fv-shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.18);
    --fv-shadow-brand: 0 8px 24px -8px rgba(3, 169, 114, 0.45);
    --fv-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.05);
    --fv-ring:        0 0 0 4px rgba(3, 169, 114, 0.18);
    --fv-ring-danger: 0 0 0 4px rgba(239, 68, 68, 0.18);

    /* Border radii. */
    --fv-radius-xs:  4px;
    --fv-radius-sm:  6px;
    --fv-radius:     10px;
    --fv-radius-lg:  14px;
    --fv-radius-xl:  20px;
    --fv-radius-2xl: 28px;
    --fv-radius-full: 9999px;

    /* Spacing scale. */
    --fv-space-1: 4px;
    --fv-space-2: 8px;
    --fv-space-3: 12px;
    --fv-space-4: 16px;
    --fv-space-5: 20px;
    --fv-space-6: 24px;
    --fv-space-8: 32px;
    --fv-space-10: 40px;
    --fv-space-12: 48px;
    --fv-space-16: 64px;

    /* Typography. Default is Inter (clean modern sans). Baloo only appears
       as a fallback for chars not in Inter (so mixed Dhivehi+English
       still renders correctly). For pure Dhivehi blocks use --fv-font-dv. */
    --fv-font-en:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   'SF Pro Display', 'Helvetica Neue', Arial, 'Baloo Bhaijaan 2', sans-serif;
    --fv-font-mixed: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     'Helvetica Neue', 'Baloo Bhaijaan 2', sans-serif;
    --fv-font-dv:  'MV Iyyu Formal', 'Mv Iyyu Formal', 'Noto Sans Thaana', sans-serif;
    --fv-font-dv-heading: 'MV MAG Round', 'Mv MAG Round Bold', 'Mv Bodu', 'Noto Sans Thaana', sans-serif;
    --fv-font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

    /* Motion. */
    --fv-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --fv-ease-out:    cubic-bezier(0, 0, 0.2, 1);
    --fv-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fv-transition-fast: 120ms var(--fv-ease);
    --fv-transition:      180ms var(--fv-ease);
    --fv-transition-slow: 280ms var(--fv-ease);

    /* Layout. */
    --fv-nav-height: 64px;
    --fv-sidebar-w:  240px;
    --fv-container-max: 1440px;
}

/* Inter is loaded via a <link> tag in each HTML page for reliable priority.
   The @import here used to be silent-fail in some browsers. */

/* -----------  GLOBAL BASE  ----------- */
body {
    font-family: var(--fv-font-mixed);
    background: var(--fv-ink-50);
    background-image: var(--fv-gradient-mesh);
    color: var(--fv-ink-800);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html[dir="rtl"] body,
[dir="rtl"] body {
    font-family: var(--fv-font-dv);
}

/* Better default focus ring — visible but not jarring. */
:focus-visible {
    outline: none;
    box-shadow: var(--fv-ring);
    border-radius: var(--fv-radius-sm);
}

/* Selection color tied to brand. */
::selection {
    background: var(--fv-green-200);
    color: var(--fv-ink-900);
}

/* Smooth scrolling everywhere. */
html { scroll-behavior: smooth; }

/* Scrollbars — subtle and on-brand. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--fv-ink-300);
    border-radius: var(--fv-radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fv-ink-400); background-clip: padding-box; border: 2px solid transparent; }

/* -----------  HEADER / NAV  ----------- */
.header,
header.header,
.admin-header,
.top-header {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-md) !important;
    border-bottom: none !important;
    position: relative;
}
.header::after,
.top-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(255,255,255,0.10), transparent 50%);
    pointer-events: none;
}

.header h1, .top-header h1,
.header h2, .top-header h2,
.header .title { color: var(--fv-white); letter-spacing: -0.01em; font-weight: 700; }

.header .subtitle, .top-header .subtitle { color: rgba(255,255,255,0.85); }

/* -----------  TABS  ----------- */
.tabs,
.nav-tabs,
.tab-bar {
    background: var(--fv-white) !important;
    border-bottom: 1px solid var(--fv-ink-200) !important;
    padding: 0 var(--fv-space-4) !important;
    display: flex; gap: var(--fv-space-1);
    box-shadow: var(--fv-shadow-xs);
    overflow-x: auto;
    scrollbar-width: thin;
}
.tab-link,
.tabs a,
.nav-tabs a,
.tabs .tab-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--fv-space-2);
    padding: 14px 18px !important;
    color: var(--fv-ink-600) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: color var(--fv-transition);
    white-space: nowrap;
}
.tab-link::after,
.tabs a::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px;
    background: var(--fv-gradient-brand);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--fv-transition);
}
.tab-link:hover, .tabs a:hover { color: var(--fv-green-600) !important; background: var(--fv-ink-50) !important; }
.tab-link.active, .tabs a.active,
.tab-link[data-active="true"] { color: var(--fv-green-600) !important; background: var(--fv-white) !important; font-weight: 600 !important; }
.tab-link.active::after, .tabs a.active::after { transform: scaleX(1); }

/* -----------  STAT CARDS  ----------- */
.stat-card,
.stats-card,
.metric-card,
.kpi-card {
    background: var(--fv-white) !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    padding: var(--fv-space-6) !important;
    box-shadow: var(--fv-shadow-sm) !important;
    position: relative;
    overflow: hidden;
    transition: transform var(--fv-transition), box-shadow var(--fv-transition), border-color var(--fv-transition);
}
.stat-card::before,
.kpi-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--fv-gradient-brand);
    opacity: 0.85;
}
.stat-card:hover,
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fv-shadow-lg) !important;
    border-color: var(--fv-green-200) !important;
}
.stat-card .stat-label,
.kpi-card .label,
.stat-card .label { color: var(--fv-ink-500) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-card .stat-value,
.kpi-card .value,
.stat-card .value {
    font-family: var(--fv-font-en);
    color: var(--fv-ink-900) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.1 !important;
    margin-top: var(--fv-space-2) !important;
}
.stat-card .trend,
.kpi-card .trend { display: inline-flex; align-items: center; gap: var(--fv-space-1); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--fv-radius-full); margin-top: var(--fv-space-2); }
.stat-card .trend.up,
.kpi-card .trend.up   { color: var(--fv-success); background: rgba(16,185,129,0.10); }
.stat-card .trend.down,
.kpi-card .trend.down { color: var(--fv-danger);  background: rgba(239,68,68,0.10); }

/* Optional accent variants — apply via class `.accent-gold`, `.accent-danger`, etc. */
.stat-card.accent-gold::before   { background: var(--fv-gradient-gold); }
.stat-card.accent-info::before   { background: var(--fv-gradient-info); }
.stat-card.accent-danger::before { background: var(--fv-gradient-danger); }

/* -----------  BUTTONS  ----------- */
.btn,
button.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fv-space-2);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--fv-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--fv-transition-fast),
                box-shadow var(--fv-transition),
                background var(--fv-transition),
                border-color var(--fv-transition),
                color var(--fv-transition);
    line-height: 1.2;
    white-space: nowrap;
    user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-primary,
.btn.btn-primary {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-brand);
    border: none !important;
}
.btn-primary:hover { box-shadow: 0 12px 28px -6px rgba(3, 169, 114, 0.55); }

.btn-success { background: var(--fv-success) !important; color: var(--fv-white) !important; border: none !important; box-shadow: var(--fv-shadow-sm); }
.btn-danger  { background: var(--fv-gradient-danger) !important; color: var(--fv-white) !important; border: none !important; box-shadow: 0 8px 20px -6px rgba(239,68,68,0.40); }
.btn-warning { background: var(--fv-gradient-gold) !important; color: var(--fv-ink-900) !important; border: none !important; box-shadow: 0 8px 20px -6px rgba(245,158,11,0.40); }
.btn-info    { background: var(--fv-gradient-info) !important; color: var(--fv-white) !important; border: none !important; box-shadow: 0 8px 20px -6px rgba(59,130,246,0.40); }
.btn-secondary,
.btn-outline {
    background: var(--fv-white) !important;
    color: var(--fv-ink-800) !important;
    border: 1px solid var(--fv-ink-300) !important;
    box-shadow: var(--fv-shadow-xs);
}
.btn-secondary:hover,
.btn-outline:hover { border-color: var(--fv-green-400) !important; color: var(--fv-green-600) !important; }
.btn-ghost { background: transparent !important; color: var(--fv-ink-700) !important; border: none !important; }
.btn-ghost:hover { background: var(--fv-ink-100) !important; }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--fv-radius-sm); }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: var(--fv-radius-lg); }

/* -----------  FORMS / INPUTS  ----------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--fv-ink-900);
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-300);
    border-radius: var(--fv-radius);
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition);
    line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--fv-green-500);
    box-shadow: var(--fv-ring);
}
input::placeholder, textarea::placeholder { color: var(--fv-ink-400); }
label { font-size: 13px; font-weight: 600; color: var(--fv-ink-700); display: block; margin-bottom: 6px; }

/* -----------  CARDS / PANELS  ----------- */
.card,
.panel,
.section,
.tab-content > section {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius-lg);
    box-shadow: var(--fv-shadow-sm);
}

/* -----------  TABLES  ----------- */
table,
.table,
table.data-table {
    width: 100%;
    background: var(--fv-white);
    border-radius: var(--fv-radius-lg);
    overflow: hidden;
    border: 1px solid var(--fv-ink-200);
    box-shadow: var(--fv-shadow-sm);
    border-collapse: separate;
    border-spacing: 0;
}
table thead th {
    background: var(--fv-ink-50) !important;
    color: var(--fv-ink-600) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.06em;
    padding: 14px 16px !important;
    text-align: left;
    border-bottom: 1px solid var(--fv-ink-200) !important;
    position: sticky;
    top: 0;
}
table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--fv-ink-100) !important;
    color: var(--fv-ink-800);
    font-size: 14px;
    vertical-align: middle;
}
table tbody tr { transition: background var(--fv-transition-fast); }
table tbody tr:hover td { background: var(--fv-green-50); }
table tbody tr:last-child td { border-bottom: none !important; }

/* -----------  BADGES / PILLS  ----------- */
.badge,
.pill,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--fv-space-1);
    padding: 4px 10px;
    border-radius: var(--fv-radius-full);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--fv-ink-100);
    color: var(--fv-ink-700);
}
.badge-success, .status-active, .status-resolved, .status-approved { background: rgba(16,185,129,0.12); color: var(--fv-success); }
.badge-warning, .status-pending { background: rgba(245,158,11,0.12); color: var(--fv-warning); }
.badge-danger,  .status-rejected, .status-former { background: rgba(239,68,68,0.12); color: var(--fv-danger); }
.badge-info,    .status-info     { background: rgba(59,130,246,0.12); color: var(--fv-info); }
.badge-brand    { background: var(--fv-green-50); color: var(--fv-green-700); }

/* -----------  MODALS  ----------- */
.modal,
.modal-overlay,
.dialog-overlay {
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal-content,
.modal-dialog,
.dialog,
.modal-box {
    background: var(--fv-white) !important;
    border-radius: var(--fv-radius-xl) !important;
    box-shadow: var(--fv-shadow-xl) !important;
    border: none !important;
    overflow: hidden;
}
.modal-header,
.modal-content > .header,
.dialog-header {
    padding: var(--fv-space-5) var(--fv-space-6) !important;
    border-bottom: 1px solid var(--fv-ink-200) !important;
    font-weight: 700;
    color: var(--fv-ink-900);
    font-size: 18px;
}
.modal-body, .dialog-body { padding: var(--fv-space-6) !important; }
.modal-footer, .dialog-footer {
    padding: var(--fv-space-4) var(--fv-space-6) !important;
    border-top: 1px solid var(--fv-ink-200) !important;
    display: flex; gap: var(--fv-space-3); justify-content: flex-end;
    background: var(--fv-ink-50);
}

/* -----------  TOASTS — slightly refined  ----------- */
.toast { border-radius: var(--fv-radius-lg) !important; box-shadow: var(--fv-shadow-lg) !important; }
.toast.success { background: var(--fv-gradient-brand) !important; }
.toast.error   { background: var(--fv-gradient-danger) !important; }
.toast.warning { background: var(--fv-gradient-gold) !important; color: var(--fv-ink-900) !important; }
.toast.info    { background: var(--fv-gradient-info) !important; }

/* -----------  CHARTS (Chart.js wrapper)  ----------- */
.chart-card,
.chart-container,
canvas.chart {
    background: var(--fv-white);
    border-radius: var(--fv-radius-lg);
    padding: var(--fv-space-5);
    box-shadow: var(--fv-shadow-sm);
    border: 1px solid var(--fv-ink-200);
}
.chart-card h3, .chart-container h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--fv-ink-700);
    margin-bottom: var(--fv-space-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* -----------  DHIVEHI / RTL POLISH  ----------- */
[dir="rtl"] .header,
[dir="rtl"] .top-header,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
    font-family: var(--fv-font-dv-heading);
    letter-spacing: 0;
    line-height: 1.5;
}
[dir="rtl"] body,
[dir="rtl"] .tab-link,
[dir="rtl"] .btn,
[dir="rtl"] table,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: var(--fv-font-dv);
    line-height: 1.9;
    letter-spacing: 0;
}
[dir="rtl"] .stat-card::before,
[dir="rtl"] .kpi-card::before { left: auto; right: 0; }

/* Mixed content (English NID inside an otherwise Dhivehi block). */
.fv-en-text, [data-en] { font-family: var(--fv-font-en) !important; direction: ltr; unicode-bidi: embed; }

/* -----------  LOGIN CARD (admin + voter)  ----------- */
.login-card,
.auth-card {
    background: var(--fv-white) !important;
    border-radius: var(--fv-radius-2xl) !important;
    box-shadow: var(--fv-shadow-xl) !important;
    border: 1px solid var(--fv-ink-200);
    padding: var(--fv-space-10) !important;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: var(--fv-gradient-brand);
}

/* -----------  SIDEBAR / DRAWER (vote portal)  ----------- */
.sidebar, .drawer {
    background: var(--fv-white);
    border-right: 1px solid var(--fv-ink-200);
    box-shadow: var(--fv-shadow-sm);
}
[dir="rtl"] .sidebar, [dir="rtl"] .drawer { border-right: none; border-left: 1px solid var(--fv-ink-200); }

/* -----------  ELECTION CARDS / CANDIDATE CARDS (vote portal)  ----------- */
.candidate-card,
.election-card {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius-lg);
    padding: var(--fv-space-5);
    box-shadow: var(--fv-shadow-sm);
    transition: transform var(--fv-transition), box-shadow var(--fv-transition), border-color var(--fv-transition);
    cursor: pointer;
}
.candidate-card:hover,
.election-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--fv-shadow-lg);
    border-color: var(--fv-green-300);
}
.candidate-card.selected,
.candidate-card.is-selected {
    border-color: var(--fv-green-500);
    background: var(--fv-green-50);
    box-shadow: var(--fv-shadow-brand);
}
.candidate-photo {
    width: 80px; height: 80px;
    border-radius: var(--fv-radius-full);
    overflow: hidden;
    background: var(--fv-gradient-brand-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: var(--fv-green-600);
    margin: 0 auto var(--fv-space-3);
    border: 3px solid var(--fv-white);
    box-shadow: var(--fv-shadow-md);
}
.candidate-photo img { width: 100%; height: 100%; object-fit: cover; }
.candidate-name {
    font-weight: 600; color: var(--fv-ink-900); font-size: 15px; text-align: center;
    line-height: 1.4; margin-top: var(--fv-space-2);
}

/* -----------  EMPTY STATES  ----------- */
.empty-state,
.no-data,
.empty {
    text-align: center;
    padding: var(--fv-space-12) var(--fv-space-6);
    color: var(--fv-ink-500);
}
.empty-state .icon { font-size: 48px; opacity: 0.5; margin-bottom: var(--fv-space-3); }

/* -----------  UTILITY  ----------- */
.fv-divider { height: 1px; background: var(--fv-ink-200); margin: var(--fv-space-6) 0; }
.fv-card-grid { display: grid; gap: var(--fv-space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fv-fade-in { animation: fvFadeIn 320ms var(--fv-ease) both; }
@keyframes fvFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Hide native scrollbar on the tab bar in webkit. */
.tabs::-webkit-scrollbar { display: none; }
.tabs { scrollbar-width: none; }

/* Print: drop shadows + gradients, keep readable. */
@media print {
    .stat-card, .card, table { box-shadow: none !important; border-color: #ccc !important; }
    .header, .top-header { background: #fff !important; color: #000 !important; }
    .btn { display: none !important; }
}

/* =====================================================================
   PHASE 34 — LISTS / TABLES / PAGINATION / BULK ACTIONS
   Consistent treatment across every list in both portals.
   ===================================================================== */

/* ----- List container — wraps a list section with title + actions ----- */
.list-section,
.tab-content > .members-container,
.tab-content > .requests-container,
.list-card {
    background: var(--fv-white);
    border-radius: var(--fv-radius-lg);
    box-shadow: var(--fv-shadow-sm);
    border: 1px solid var(--fv-ink-200);
    overflow: hidden;
}
.list-header,
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--fv-space-4);
    padding: var(--fv-space-5) var(--fv-space-6);
    border-bottom: 1px solid var(--fv-ink-200);
    background: var(--fv-white);
}
.list-header h2,
.list-header h3,
.section-header h2,
.section-header h3 {
    margin: 0;
    color: var(--fv-ink-900);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.list-header .actions,
.section-header .actions { display: flex; gap: var(--fv-space-2); align-items: center; flex-wrap: wrap; }

/* ----- Filters / search bar above lists ----- */
.filters-row,
.filters-container,
.search-filters,
.filter-bar {
    display: flex; flex-wrap: wrap; gap: var(--fv-space-3);
    padding: var(--fv-space-4) var(--fv-space-6);
    background: var(--fv-ink-50);
    border-bottom: 1px solid var(--fv-ink-200);
    align-items: center;
}
.filters-row > input,
.filters-row > select,
.filters-container > input,
.filters-container > select {
    flex: 0 1 220px;
    min-width: 160px;
    background: var(--fv-white);
}
.filters-row .filter-label,
.filters-container .filter-label { font-size: 12px; color: var(--fv-ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-right: var(--fv-space-1); }
.result-count {
    font-size: 13px;
    color: var(--fv-ink-600);
    background: var(--fv-white);
    padding: 6px 12px;
    border-radius: var(--fv-radius-full);
    border: 1px solid var(--fv-ink-200);
    font-weight: 600;
    white-space: nowrap;
}
.result-count strong { color: var(--fv-green-600); }

/* ----- Table — horizontal scroll wrapper for mobile ----- */
.table-wrapper,
.table-scroll,
.table-container,
.members-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--fv-white);
}
.table-wrapper > table,
.table-scroll > table,
.table-container > table {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    box-shadow: none;
}

/* Tighter row padding inside list sections so density feels right. */
.list-section table tbody td,
.list-card table tbody td { padding: 12px 16px !important; }

/* Row-action buttons (icons / small buttons in a table cell). */
.row-actions,
table td .actions,
table td .row-actions { display: inline-flex; gap: 6px; align-items: center; }
.btn-icon,
button.btn-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--fv-radius);
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    color: var(--fv-ink-600);
    cursor: pointer;
    transition: all var(--fv-transition);
    font-size: 14px;
}
.btn-icon:hover { border-color: var(--fv-green-400); color: var(--fv-green-600); background: var(--fv-green-50); }
.btn-icon.danger:hover { border-color: var(--fv-danger); color: var(--fv-danger); background: rgba(239,68,68,0.06); }

/* Sortable column header indicator. */
table thead th[data-sortable],
table thead th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 28px !important;
}
table thead th[data-sortable]::after,
table thead th.sortable::after {
    content: '↕';
    position: absolute;
    right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--fv-ink-300);
    font-size: 12px;
    transition: color var(--fv-transition);
}
table thead th.sort-asc::after  { content: '↑'; color: var(--fv-green-600); }
table thead th.sort-desc::after { content: '↓'; color: var(--fv-green-600); }
table thead th[data-sortable]:hover::after,
table thead th.sortable:hover::after { color: var(--fv-ink-600); }

/* Row selection (checkbox column). */
table tbody tr.selected td,
table tbody tr.is-selected td,
table tbody tr:has(input[type="checkbox"]:checked) td { background: var(--fv-green-50) !important; }
table thead th:first-child input[type="checkbox"],
table tbody td:first-child input[type="checkbox"] { transform: scale(1.1); accent-color: var(--fv-green-500); cursor: pointer; }

/* ----- Pagination — modern, matches the new look ----- */
.pagination-container {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    padding: var(--fv-space-4) var(--fv-space-6) !important;
    background: var(--fv-white) !important;
    border: none !important;
    border-top: 1px solid var(--fv-ink-200) !important;
    border-radius: 0 0 var(--fv-radius-lg) var(--fv-radius-lg);
    gap: var(--fv-space-4);
}
.pagination-info {
    color: var(--fv-ink-600) !important;
    font-size: 13px !important;
    font-weight: 500;
}
.pagination-info strong { color: var(--fv-ink-900); font-weight: 700; }
.pagination-controls {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
}
.pagination-btn {
    padding: 8px 14px !important;
    border: 1px solid var(--fv-ink-300) !important;
    background: var(--fv-white) !important;
    color: var(--fv-ink-700) !important;
    border-radius: var(--fv-radius) !important;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all var(--fv-transition) !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.pagination-btn:hover:not(:disabled) {
    background: var(--fv-green-50) !important;
    color: var(--fv-green-700) !important;
    border-color: var(--fv-green-400) !important;
}
.pagination-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    border-color: var(--fv-ink-200) !important;
    color: var(--fv-ink-400) !important;
    background: var(--fv-ink-50) !important;
}
.pagination-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.page-btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 8px;
    border: 1px solid var(--fv-ink-200) !important;
    background: var(--fv-white) !important;
    color: var(--fv-ink-700) !important;
    border-radius: var(--fv-radius) !important;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all var(--fv-transition) !important;
}
.page-btn:hover:not(.active):not(.ellipsis) {
    border-color: var(--fv-green-400) !important;
    color: var(--fv-green-600) !important;
    background: var(--fv-green-50) !important;
}
.page-btn.active {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    border-color: transparent !important;
    box-shadow: var(--fv-shadow-brand);
}
.page-btn.ellipsis {
    border: none !important;
    background: none !important;
    cursor: default !important;
    color: var(--fv-ink-400) !important;
}
.pagination-jump {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px;
    color: var(--fv-ink-600);
    font-weight: 500;
}
.pagination-jump input {
    width: 64px !important;
    padding: 6px 10px !important;
    border: 1px solid var(--fv-ink-300) !important;
    border-radius: var(--fv-radius) !important;
    text-align: center;
    font-weight: 600;
    color: var(--fv-ink-900);
    font-size: 13px;
}
.pagination-jump input:focus { border-color: var(--fv-green-500) !important; box-shadow: var(--fv-ring); }

/* ----- Bulk action bar (above lists when items are selected) ----- */
.bulk-actions-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--fv-space-4);
    padding: var(--fv-space-3) var(--fv-space-5);
    background: linear-gradient(135deg, var(--fv-green-50) 0%, var(--fv-white) 100%);
    border: 1px solid var(--fv-green-200);
    border-radius: var(--fv-radius-lg);
    margin-bottom: var(--fv-space-4);
    box-shadow: var(--fv-shadow-sm);
    flex-wrap: wrap;
}
.bulk-actions-bar .bulk-select { display: flex; align-items: center; gap: var(--fv-space-3); font-weight: 600; color: var(--fv-ink-800); font-size: 14px; }
.bulk-actions-bar .bulk-select input[type="checkbox"] { transform: scale(1.15); accent-color: var(--fv-green-500); }
.bulk-actions-bar .bulk-buttons { display: flex; gap: var(--fv-space-2); flex-wrap: wrap; }
#selectedCount, #selectedPhoneRequestsCount, [id*="selectedCount"] {
    color: var(--fv-green-700);
    font-weight: 700;
}

/* ----- Request cards (used by phone-change + update requests) ----- */
.requests-grid {
    display: grid;
    gap: var(--fv-space-4);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    padding: var(--fv-space-5) var(--fv-space-6);
}
.request-card {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius-lg);
    overflow: hidden;
    box-shadow: var(--fv-shadow-sm);
    transition: transform var(--fv-transition), box-shadow var(--fv-transition), border-color var(--fv-transition);
    display: flex; flex-direction: column;
}
.request-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--fv-shadow-md);
    border-color: var(--fv-ink-300);
}
.request-card.pending  { border-top: 4px solid var(--fv-warning); }
.request-card.approved { border-top: 4px solid var(--fv-success); }
.request-card.rejected { border-top: 4px solid var(--fv-danger); }
.request-card .request-header {
    display: flex; align-items: center; justify-content: space-between; gap: var(--fv-space-2);
    padding: var(--fv-space-4) var(--fv-space-5) var(--fv-space-3);
    border-bottom: 1px solid var(--fv-ink-100);
    background: var(--fv-ink-50);
    flex-wrap: wrap;
}
.request-card .request-header strong { color: var(--fv-ink-900); font-size: 15px; font-weight: 700; }
.request-card .request-body {
    padding: var(--fv-space-4) var(--fv-space-5);
    font-size: 13px;
    color: var(--fv-ink-700);
    flex: 1;
}
.request-card .request-body p { margin: 0 0 6px 0; line-height: 1.6; }
.request-card .request-body p strong { color: var(--fv-ink-800); font-weight: 600; }
.request-card .attachment-links {
    display: flex; gap: var(--fv-space-2); flex-wrap: wrap;
    margin-top: var(--fv-space-3);
}
.request-card .attachment-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--fv-info);
    color: var(--fv-white);
    border-radius: var(--fv-radius);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background var(--fv-transition);
}
.request-card .attachment-links a:hover { background: #2563eb; }
.request-card .attachment-links .no-attachment {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--fv-ink-100);
    color: var(--fv-ink-500);
    border-radius: var(--fv-radius);
    font-size: 12px;
    font-weight: 500;
}
.request-card .request-actions {
    display: flex; gap: var(--fv-space-2); padding: var(--fv-space-3) var(--fv-space-5) var(--fv-space-4);
    border-top: 1px solid var(--fv-ink-100);
    background: var(--fv-ink-50);
    flex-wrap: wrap;
}
.request-card .request-actions .btn { flex: 1; min-width: 100px; }
.request-card .view-only-msg {
    margin: var(--fv-space-3) var(--fv-space-5) var(--fv-space-4);
    padding: 8px 12px;
    background: var(--fv-ink-100);
    color: var(--fv-ink-500);
    border-radius: var(--fv-radius);
    font-size: 12px;
    text-align: center;
    font-style: italic;
}
.request-card .request-checkbox {
    display: inline-flex; align-items: center;
    margin-right: var(--fv-space-2);
}
.request-card .request-checkbox input { transform: scale(1.1); accent-color: var(--fv-green-500); cursor: pointer; }

/* ----- Empty states / no-data ----- */
.empty-state,
.no-data,
.empty,
.no-results {
    text-align: center;
    padding: var(--fv-space-12) var(--fv-space-6);
    color: var(--fv-ink-500);
    background: var(--fv-white);
}
.empty-state .icon,
.empty-state-icon,
.empty .icon { font-size: 56px; opacity: 0.4; margin-bottom: var(--fv-space-3); display: block; }
.empty-state h3,
.empty h3 { color: var(--fv-ink-700); font-size: 16px; font-weight: 600; margin: 0 0 var(--fv-space-2); }
.empty-state p,
.empty p { color: var(--fv-ink-500); font-size: 14px; margin: 0; }

/* ----- Loading skeleton for lists ----- */
.skeleton,
.is-loading .row-skeleton {
    background: linear-gradient(90deg, var(--fv-ink-100) 0%, var(--fv-ink-200) 50%, var(--fv-ink-100) 100%);
    background-size: 200% 100%;
    animation: fvShimmer 1.4s ease-in-out infinite;
    border-radius: var(--fv-radius-sm);
    height: 14px;
}
@keyframes fvShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.loading-spinner {
    width: 48px; height: 48px;
    border: 4px solid var(--fv-ink-200);
    border-top-color: var(--fv-green-500);
    border-radius: 50%;
    animation: fvSpin 0.8s linear infinite;
}
@keyframes fvSpin { to { transform: rotate(360deg); } }

/* ----- Search input with icon (when wrapped in .search-group) -----
   NOTE: legacy decorative emoji magnifier removed. Modern search inputs
   use the inline SVG icon defined further down in PHASE 39. The
   .search-group wrapper is kept for backward compatibility (some
   inputs still use it) but no longer paints a ::before icon. */
.search-group {
    position: relative;
}
.search-group input[type="search"],
.search-group input[type="text"] {
    /* Padding is handled by the input-specific rule below, not by the
       wrapper, so the input lines up correctly whether or not it sits
       inside .search-group. */
}
.search-group::before { content: none !important; }

/* ----- Stat strip (small inline stats above a list) ----- */
.stat-item {
    display: inline-flex; flex-direction: column;
    padding: 8px 16px;
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius);
    transition: all var(--fv-transition);
}
.stat-item.filter-active { border-color: var(--fv-green-500); background: var(--fv-green-50); cursor: pointer; }
.stat-item .stat-label { font-size: 11px; color: var(--fv-ink-500); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.stat-item .stat-value { font-size: 18px; color: var(--fv-ink-900); font-weight: 700; line-height: 1.2; }

/* ----- Responsive: tables become horizontally scrollable on small screens ----- */
@media (max-width: 768px) {
    table { font-size: 13px !important; min-width: 600px; }
    .pagination-container { flex-direction: column; align-items: stretch; padding: var(--fv-space-3) !important; }
    .pagination-info, .pagination-jump { text-align: center; justify-content: center; }
    .pagination-controls { justify-content: center; }
    .filters-row, .filters-container { padding: var(--fv-space-3); gap: var(--fv-space-2); }
    .filters-row > input, .filters-row > select { flex: 1 1 100%; }
    .list-header, .section-header { padding: var(--fv-space-4); flex-direction: column; align-items: flex-start; gap: var(--fv-space-3); }
    .requests-grid { grid-template-columns: 1fr; padding: var(--fv-space-4); }
    .stat-item { width: 100%; }
}

/* RTL adjustments for new components. */
[dir="rtl"] .request-card.pending,
[dir="rtl"] .request-card.approved,
[dir="rtl"] .request-card.rejected { /* top border already direction-agnostic */ }
[dir="rtl"] table thead th[data-sortable],
[dir="rtl"] table thead th.sortable { padding-right: 14px !important; padding-left: 28px !important; }
[dir="rtl"] table thead th[data-sortable]::after,
[dir="rtl"] table thead th.sortable::after { right: auto; left: 12px; }
[dir="rtl"] .search-group input { padding-left: 14px; padding-right: 36px; }
/* RTL flip for the decorative emoji is no longer needed — emoji removed. */

/* =====================================================================
   PHASE 35/36 — AUDIT FIXES FROM LIVE BROWSER INSPECTION
   Findings from auditing /admin, /, /vote/login, /dashboard live.
   Each block is keyed to a numbered finding in the audit report.
   ===================================================================== */

/* ---- Fix 1: admin top nav (.navbar / .admin-navbar) was solid green ---- */
.navbar,
.navbar.admin-navbar,
nav.navbar {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-md) !important;
    border-bottom: none !important;
    position: relative;
}
.navbar::after,
nav.navbar::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 90% 50%, rgba(255,255,255,0.10), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.navbar > *, nav.navbar > * { position: relative; z-index: 1; }
.navbar .nav-brand,
.navbar .nav-links,
.navbar .nav-section { color: var(--fv-white) !important; }
.navbar a,
.navbar .nav-link,
nav.navbar a {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 600 !important;
    transition: color var(--fv-transition);
}
.navbar a:hover,
.navbar .nav-link:hover,
nav.navbar a:hover { color: var(--fv-white) !important; }
.navbar a.active,
.navbar .nav-link.active,
nav.navbar a.active {
    color: var(--fv-white) !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: var(--fv-radius-full) !important;
    padding: 8px 16px !important;
}
/* Logo inside the navbar: drop the inline #03a972 so it reads white. */
.navbar .nav-brand span,
.navbar .nav-brand .brand-text { color: var(--fv-white) !important; }
.navbar .nav-brand .portal-text,
.navbar .nav-brand .subtitle { color: rgba(255,255,255,0.85) !important; }

/* ---- Fix 2 + 3 + 4: blanket override for inline-style backgrounds that
        use the OLD hardcoded greens, ambers, and reds. Specificity beats
        inline only when we use the same `style` attribute selector. ---- */
[style*="#03a972"][style*="background"]:not(.btn):not(button):not(.toast):not(.lang-btn) {
    /* Don't try to nuke every inline hex — instead, normalize the few
       known UI elements that were inline-styled. The selectors below
       cover the specific elements we audited. */
}

/* Dashboard "dash-card" tiles with inline yellow gradient — replace
   the surface with a neutral white card. Keep the inline gradient's
   role of "amber accent" via a top border-bar. */
.dash-card {
    background: var(--fv-white) !important;
    background-image: none !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    box-shadow: var(--fv-shadow-sm) !important;
    position: relative;
    overflow: hidden;
    padding: var(--fv-space-5) !important;
}
.dash-card::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--fv-gradient-gold);
}
.dash-card.brand::before { background: var(--fv-gradient-brand); }
.dash-card.info::before  { background: var(--fv-gradient-info); }
.dash-card.danger::before{ background: var(--fv-gradient-danger); }

/* Custom modal headers that were inline-styled with #ef4444 etc.
   They keep their semantic color but use the brand palette. */
.custom-modal-header,
.modal-header[class*="danger"],
.modal-header.danger {
    background: var(--fv-gradient-danger) !important;
    color: var(--fv-white) !important;
}
.modal-header.success { background: var(--fv-gradient-brand) !important; color: var(--fv-white) !important; }
.modal-header.warning { background: var(--fv-gradient-gold) !important; color: var(--fv-ink-900) !important; }
.modal-header.info    { background: var(--fv-gradient-info) !important; color: var(--fv-white) !important; }

/* Progress bars rendered with inline gradients — neutralize the
   container, force the fill to use brand gradient. */
.progress-bar,
.progress-fill,
[class*="progress"][style*="linear-gradient"] {
    background-image: var(--fv-gradient-brand) !important;
}
.progress, .progress-track {
    background: var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-full) !important;
    overflow: hidden;
}

/* ---- Fix 5: permission-group inline #e8f5e9 → token-based ---- */
.permission-group {
    background: var(--fv-green-50) !important;
    border: 1px solid var(--fv-green-200) !important;
    border-radius: var(--fv-radius) !important;
    padding: var(--fv-space-4) !important;
}
.permission-group + .permission-group { margin-top: var(--fv-space-3); }

/* ---- Fix 6: language toggle (member login) ---- */
.lang-btn {
    transition: all var(--fv-transition);
    border-radius: var(--fv-radius) !important;
}
.lang-btn:not(.active):hover { background: var(--fv-ink-100) !important; }
.lang-btn.active {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-brand);
}

/* ---- Fix 7: dashboard.html member-portal dashboard-tab styling ---- */
.dashboard-tabs {
    background: var(--fv-white) !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    padding: 6px !important;
    box-shadow: var(--fv-shadow-xs);
    gap: 4px !important;
}
.dashboard-tab {
    color: var(--fv-ink-600) !important;
    font-weight: 600 !important;
    transition: all var(--fv-transition);
    border-radius: var(--fv-radius) !important;
}
.dashboard-tab:hover {
    background: var(--fv-ink-100) !important;
    color: var(--fv-ink-900) !important;
}
.dashboard-tab.active {
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-brand);
}

/* Dashboard.html .voters-* table — bring it inline with the design ---- */
.voters-scroll-list {
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    box-shadow: var(--fv-shadow-sm) !important;
}
.voters-table thead {
    background: var(--fv-ink-50) !important;
    color: var(--fv-ink-600) !important;
}
.voters-table th {
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--fv-ink-200);
}
.voters-table td { color: var(--fv-ink-800); }
.voters-table tbody tr:hover { background: var(--fv-green-50) !important; }
.voters-table tbody tr:nth-child(even) { background: transparent !important; }
.voters-scroll-list::-webkit-scrollbar-thumb {
    background: var(--fv-green-500) !important;
}
.voters-scroll-list::-webkit-scrollbar-thumb:hover {
    background: var(--fv-green-600) !important;
}
.voters-count {
    background: var(--fv-green-50) !important;
    border: 1px solid var(--fv-green-200) !important;
    border-radius: var(--fv-radius-lg) !important;
}
.voters-count .number { color: var(--fv-green-700) !important; }
.voters-count .label  { color: var(--fv-green-700) !important; opacity: 0.8; }

/* ---- Fix 8: Chrome autofill yellow/blue → neutral with brand accent ---- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--fv-white) inset !important;
    -webkit-text-fill-color: var(--fv-ink-900) !important;
    border: 1px solid var(--fv-ink-300) !important;
    transition: background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
    border-color: var(--fv-green-500) !important;
    box-shadow: 0 0 0 100px var(--fv-white) inset, var(--fv-ring) !important;
}

/* ---- Fix 10: old `box-shadow: 0 4px 20px rgba(17,153,142,0.3)` ---- */
[class*="shadow"] { transition: box-shadow var(--fv-transition); }

/* ---- Fix 11: login card title polish ---- */
.login-card h1,
.login-card h2,
.auth-card h1,
.auth-card h2 {
    color: var(--fv-ink-900);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: var(--fv-space-3);
}
.login-card .subtitle,
.auth-card .subtitle {
    color: var(--fv-ink-500);
    font-size: 14px;
    margin-bottom: var(--fv-space-6);
}

/* ---- Fix 12: vote portal .btn-login class ---- */
.btn-login,
button.btn-login,
.vote-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fv-space-2);
    padding: 14px 24px !important;
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: var(--fv-radius-lg) !important;
    border: none !important;
    background: var(--fv-gradient-brand) !important;
    color: var(--fv-white) !important;
    box-shadow: var(--fv-shadow-brand) !important;
    cursor: pointer;
    transition: transform var(--fv-transition-fast), box-shadow var(--fv-transition) !important;
    width: 100%;
    letter-spacing: 0.01em;
}
.btn-login:hover { box-shadow: 0 14px 32px -6px rgba(3, 169, 114, 0.55) !important; }
.btn-login:active { transform: translateY(1px); }

/* Header + brand text combos used by both portals. */
.brand-text,
.vote-brand-text {
    font-family: var(--fv-font-en);
    font-weight: 800;
    color: var(--fv-white);
    letter-spacing: -0.02em;
}

/* ---- Fix 13: blanket polish for inline-style buttons / actions ---- */
button:not(.btn):not(.tab-link):not(.dashboard-tab):not(.lang-btn):not(.toast):not(.close):not(.modal-close):not([class*="page"]) {
    /* Don't restyle everything; just sand off the harsh OS defaults. */
    font-family: inherit;
    cursor: pointer;
}

/* ---- Fix 14: extra polish: smooth-scroll, focus visibility, consistent
        :hover transitions across interactive content ---- */
a, button, .btn, .tab-link, .dashboard-tab, .stat-card, .candidate-card,
.election-card, .request-card, table tbody tr {
    transition-property: background-color, color, border-color, box-shadow, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--fv-ease);
}

/* ---- Fix 15: container width control on wide monitors ---- */
.container,
.app-container,
.admin-container,
.main-container {
    max-width: var(--fv-container-max);
    margin-left: auto;
    margin-right: auto;
}

/* ---- Fix 16: text headings rhythm across the apps ---- */
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; }
h4 { font-size: 15px; font-weight: 700; line-height: 1.4; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.5; }

/* ---- Fix 17: standardize info-box / alert blocks ---- */
.info-box, .alert, .notice {
    border-radius: var(--fv-radius-lg);
    padding: var(--fv-space-4) var(--fv-space-5);
    border-left: 4px solid var(--fv-info);
    background: rgba(59,130,246,0.06);
    color: var(--fv-ink-800);
    font-size: 14px;
    line-height: 1.6;
}
.alert.success, .info-box.success { border-left-color: var(--fv-success); background: rgba(16,185,129,0.06); }
.alert.warning, .info-box.warning { border-left-color: var(--fv-warning); background: rgba(245,158,11,0.06); }
.alert.danger,  .info-box.danger  { border-left-color: var(--fv-danger);  background: rgba(239,68,68,0.06); }

/* ---- Fix 18: visible "active filter" on stat-item (was a brand check) ---- */
.stat-item.filter-active {
    border-color: var(--fv-green-500) !important;
    background: var(--fv-green-50) !important;
    box-shadow: var(--fv-shadow-brand);
}
.stat-item.filter-active .stat-label,
.stat-item.filter-active .stat-value { color: var(--fv-green-700) !important; }
.filter-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--fv-green-100);
    color: var(--fv-green-700);
    border-radius: var(--fv-radius-full);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* =====================================================================
   PHASE 37 — PROFESSIONAL TABS + FILTER CARD
   Targeted overrides keyed to the actual admin.html markup.
   ===================================================================== */

/* ---- Admin nav tabs (inside the green .navbar). The .tab-link anchors
        live in .nav-links. On a green navbar the previous styling read
        as dark-on-green (illegible). Restyle as white-pill tabs. ---- */
.navbar .nav-links .tab-link,
nav.navbar .tab-link {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--fv-radius-full) !important;
    padding: 8px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: background var(--fv-transition), color var(--fv-transition);
    text-transform: none;
    position: relative;
}
.navbar .nav-links .tab-link::after,
nav.navbar .tab-link::after { display: none !important; }
.navbar .nav-links .tab-link:hover,
nav.navbar .tab-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--fv-white) !important;
}
.navbar .nav-links .tab-link.active,
nav.navbar .tab-link.active {
    background: var(--fv-white) !important;
    color: var(--fv-green-700) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Force the Vote Portal + My Profile yellow inline color into white
   so they don't read as "toy" gold against the green. */
.navbar .nav-links a[style*="#ffd700"],
.navbar .nav-links a[style*="ffd700"] {
    color: rgba(255, 255, 255, 0.85) !important;
}
.navbar .nav-links a[style*="#ffd700"]:hover {
    color: var(--fv-white) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--fv-radius-full) !important;
}

/* The nav-links container needs a bit more breathing room and wraps
   on smaller widths. */
.navbar .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* The admin-info-bar (small "Logged in as / Role" strip) — restyle as
   a subtle subheader instead of clinging to the navbar. */
.admin-info-bar {
    background: var(--fv-white) !important;
    border-bottom: 1px solid var(--fv-ink-200);
    padding: 8px 24px !important;
    font-size: 12.5px !important;
    color: var(--fv-ink-600) !important;
    display: flex;
    gap: 24px;
}
.admin-info-bar strong {
    color: var(--fv-ink-900);
    font-weight: 600;
}

/* ---- Filter card: the new container for Members tab filters ---- */
.filter-card {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius-lg);
    box-shadow: var(--fv-shadow-sm);
    padding: var(--fv-space-4) var(--fv-space-5);
    margin-bottom: var(--fv-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--fv-space-3);
}
.filter-row {
    display: flex;
    gap: var(--fv-space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-row-multi { gap: var(--fv-space-3); }
.filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    flex: 1;
}
.filter-field.flex-grow { flex: 3; min-width: 240px; }
.filter-field.filter-narrow { flex: 0 0 130px; min-width: 130px; }
.filter-field label {
    font-size: 11px;
    color: var(--fv-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 0;
}
.filter-field input,
.filter-field select:not([multiple]) {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--fv-ink-300);
    border-radius: var(--fv-radius);
    background: var(--fv-white);
    font-size: 14px;
    color: var(--fv-ink-900);
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition);
}
.filter-field input:focus,
.filter-field select:focus {
    outline: none;
    border-color: var(--fv-green-500);
    box-shadow: var(--fv-ring);
}
.filter-actions {
    display: flex;
    gap: var(--fv-space-2);
    align-items: flex-end;
    padding-bottom: 1px;
}
.filter-actions .btn { height: 38px; padding: 0 18px; }

/* The 4-multi-select row — each takes equal share, never squeezed below 180px. */
.filter-row-multi .filter-field { min-width: 180px; flex: 1; }

/* Choices.js inside the new filter-card — make the control 38px tall
   to align with the regular inputs. */
.filter-card .search-group .choices,
.filter-card .filter-field .choices { font-size: 13px; }
.filter-card .choices__inner {
    min-height: 38px !important;
    padding: 6px 10px 4px !important;
    border-radius: var(--fv-radius) !important;
    border: 1px solid var(--fv-ink-300) !important;
    background-color: var(--fv-white) !important;
    align-items: center;
}
.filter-card .choices__inner:focus-within {
    border-color: var(--fv-green-500) !important;
    box-shadow: var(--fv-ring) !important;
}
.filter-card .choices__list--multiple .choices__item {
    background-color: var(--fv-green-500) !important;
    border: none !important;
    border-radius: var(--fv-radius-sm) !important;
    color: var(--fv-white) !important;
    font-size: 12px !important;
    padding: 3px 8px !important;
    margin: 2px 4px 2px 0 !important;
}
.filter-card .choices__list--dropdown {
    border: 1px solid var(--fv-ink-300) !important;
    border-top: none !important;
    border-radius: 0 0 var(--fv-radius) var(--fv-radius) !important;
    box-shadow: var(--fv-shadow-md);
    z-index: 9999 !important;
}
.filter-card .choices__list--dropdown .choices__item--selectable.is-highlighted,
.filter-card .choices__list--dropdown .choices__item--selectable:hover {
    background-color: var(--fv-green-50) !important;
    color: var(--fv-green-700) !important;
}

/* ---- Override the OLD .search-filter-bar inline-style block in admin.html
        when it's STILL used (e.g. former members search before refactor). ---- */
.search-filter-bar:not(.filter-card) {
    background: var(--fv-white) !important;
    border: 1px solid var(--fv-ink-200) !important;
    box-shadow: var(--fv-shadow-sm) !important;
}

/* ---- Members-table-container: same shell treatment as .list-section ---- */
.members-table-container {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    border-radius: var(--fv-radius-lg);
    box-shadow: var(--fv-shadow-sm);
    overflow: hidden;
}
.members-table-container > table { border: none; box-shadow: none; border-radius: 0; }
.members-table-container + .pagination-container {
    margin-top: 0;
    border-top: 1px solid var(--fv-ink-200);
}

/* Download bar (the row above tables: result count + action buttons) ---- */
.download-bar {
    display: flex; justify-content: space-between; align-items: center;
    margin: var(--fv-space-4) 0 var(--fv-space-3);
    gap: var(--fv-space-3);
    flex-wrap: wrap;
}
.download-bar .action-buttons {
    display: flex; gap: var(--fv-space-2); flex-wrap: wrap;
}

/* ---- Responsive: pile filters on small screens ---- */
@media (max-width: 1024px) {
    .filter-row-multi .filter-field { min-width: 140px; }
}
@media (max-width: 768px) {
    .filter-row, .filter-row-multi { gap: var(--fv-space-2); }
    .filter-field { min-width: 100% !important; flex: 1 1 100% !important; }
    .filter-actions { width: 100%; }
    .filter-actions .btn { flex: 1; }
    .navbar .nav-links .tab-link { font-size: 12.5px !important; padding: 6px 10px !important; }
}

/* =====================================================================
   PHASE 38 — HIGH-SPECIFICITY OVERRIDES
   Wins over the chunky rules in style.css (lines 711-786 navbar,
   537-577 .members-table) and admin.html inline (.search-filter-bar
   etc.) without deleting them — safer rollback.
   ===================================================================== */

/* ===== Header / navbar polish ===== */

/* The whole admin navbar: reduce padding, modernize gradient. */
nav.navbar.admin-navbar,
body .admin-navbar {
    background: var(--fv-gradient-brand) !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.10) !important;
    padding: 10px 24px !important;
    gap: 16px !important;
    align-items: center !important;
}

/* Brand block: 44px logo, 22px brand title in Inter (not the
   42px InkBrush cursive — that reads as a casual blog title). */
body .admin-navbar .nav-brand { gap: 12px !important; align-items: center !important; }
body .admin-navbar .nav-brand .nav-logo {
    width: 44px !important;
    height: 44px !important;
    filter: brightness(0) invert(1) !important;
    flex-shrink: 0;
}
body .admin-navbar .nav-brand .nav-brand-text { line-height: 1.15 !important; }
/* =====================================================================
   PHASE 41 — DASHBOARD CARDS: RESPONSIVE LAYOUT FIX
   ---------------------------------------------------------------------
   Issues Shifan reported ("UI issues in dashboard cards, when browser
   size adjust issues come"):
     - Labels like "Phone Change Requests" wrap to THREE lines, while
       "Male" stays on one line → uneven card heights, ugly grid.
     - Male/Female icon images render at 70px, leaving very little
       horizontal room for the value + label column.
     - Card values at 32px feel oversized once 5-6 cards squeeze into
       a row.
     - Grid uses repeat(auto-fit, minmax(250px, 1fr)) which can pack
       up to 6 cards on a 1440px screen — too narrow.

   Fix:
     - Icon image shrunk to 44px (was 70px); emoji icons 28px.
     - Value: clamp to 26px (28px at >=1280px) — still bold and
       readable, but leaves room for labels.
     - Labels: 12.5px, 600 weight, line-height 1.25, allowed to wrap
       to a maximum of 2 lines (-webkit-line-clamp), with a fixed
       min-height so single-line and double-line cards align.
     - Equal card heights via min-height: 108px.
     - Grid columns minmax bumped to 220px so cards have more
       breathing room, plus a hard cap on number of cards per row at
       4 below 1280px (using auto-fill instead of auto-fit so empty
       cells are reserved).
     - Responsive cascade: 4 → 3 → 2 → 1 card per row at the standard
       breakpoints.
   ===================================================================== */

/* The grid that holds the dashboard cards. The container in admin.html
   carries the (badly-named) class .permissions-grid, but we scope to
   only those grids that contain .dash-card so we don't disturb the
   actual permissions UI. */
body .permissions-grid:has(.dash-card),
body .dash-grid,
body .dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--fv-space-3) !important;
    align-items: stretch !important;
}

/* Hard caps so a single oversized card or row of 6 doesn't squeeze
   labels to 3-line wraps. */
@media (max-width: 1280px) {
    body .permissions-grid:has(.dash-card),
    body .dash-grid,
    body .dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
}
@media (max-width: 960px) {
    body .permissions-grid:has(.dash-card),
    body .dash-grid,
    body .dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }
}
@media (max-width: 700px) {
    body .permissions-grid:has(.dash-card),
    body .dash-grid,
    body .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 460px) {
    body .permissions-grid:has(.dash-card),
    body .dash-grid,
    body .dashboard-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Card surface: equal height, comfortable padding. */
body .dash-card {
    min-height: 108px !important;
    padding: 16px !important;
    gap: 14px !important;
    align-items: center !important;
}

/* Icon column — fixed size, never grows. */
body .dash-card .dash-card-icon {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    line-height: 1 !important;
}
body .dash-card .dash-card-icon img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
}

/* Value + label column. */
body .dash-card > div:not(.dash-card-icon) {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body .dash-card .dash-card-value {
    font-family: var(--fv-font-en) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: var(--fv-ink-900) !important;
    letter-spacing: -0.02em !important;
}
@media (min-width: 1280px) {
    body .dash-card .dash-card-value { font-size: 28px !important; }
}

/* Label: max 2 lines, then ellipsis. Fixed min-height so single and
   double-line cards have the same overall height. */
body .dash-card .dash-card-label {
    font-family: var(--fv-font-en) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--fv-ink-500) !important;
    line-height: 1.25 !important;
    min-height: calc(12.5px * 1.25 * 2) !important;  /* 31.25px = 2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

/* Cards that have an inline progress bar ("Needed for 10,000") — the
   progress takes a third row inside the value column. Allow extra
   height. */
body .dash-card:has(.progress-bar, .progress, [class*="progress"]) {
    min-height: 132px !important;
}
body .dash-card .dash-card-label + div,
body .dash-card .dash-card-label + p {
    font-size: 11px !important;
    color: var(--fv-ink-500) !important;
}

/* "FahiVihi" wordmark — restore the InkBrush brush-script brand font.
   This is loaded via @font-face in admin.html / index.html etc. from
   /assets/fonts/InkBrushArabic_DEMO-Textured.otf. Falling back to
   cursive if the font asset hasn't loaded yet. */
body .admin-navbar .nav-brand .brand-title {
    font-family: 'InkBrush', cursive !important;
    font-size: 38px !important;
    font-weight: normal !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    color: var(--fv-white) !important;
}
body .admin-navbar .nav-brand .brand-subtitle {
    font-family: 'Baloo Bhaijaan 2', var(--fv-font-en) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    margin-top: 2px !important;
}

/* Nav links / tabs in the admin-navbar — these were 18px and felt
   toy-ish. Now: 13.5px, pill style with proper active state. */
body .admin-navbar .nav-links {
    flex-wrap: wrap !important;
    gap: 4px !important;
    align-items: center !important;
}
body .admin-navbar .nav-links a,
body .admin-navbar .nav-links .tab-link {
    color: rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 7px 14px !important;
    border-radius: var(--fv-radius-full) !important;
    line-height: 1.2 !important;
    transition: background var(--fv-transition), color var(--fv-transition);
    border: none !important;
}
body .admin-navbar .nav-links a:hover,
body .admin-navbar .nav-links .tab-link:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--fv-white) !important;
}
body .admin-navbar .nav-links a.active,
body .admin-navbar .nav-links .tab-link.active {
    background: var(--fv-white) !important;
    color: var(--fv-green-700) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body .admin-navbar .nav-links a[style*="ffd700"] {
    color: rgba(255, 255, 255, 0.85) !important;
}
body .admin-navbar .nav-links a[style*="ffd700"]:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    color: var(--fv-white) !important;
}
body .admin-navbar .nav-links .tab-link::after { display: none !important; }

/* Admin info bar (Logged in as / Role) — was mint green #e6f7f5.
   Now: subtle white sub-header with small ink text. */
body .admin-info-bar {
    background: var(--fv-white) !important;
    color: var(--fv-ink-600) !important;
    padding: 8px 24px !important;
    font-size: 12.5px !important;
    border-bottom: 1px solid var(--fv-ink-200) !important;
    justify-content: flex-end !important;
    gap: 24px !important;
}
body .admin-info-bar strong { color: var(--fv-ink-900) !important; font-weight: 600 !important; }

/* ===== Members table polish ===== */

/* Container: clean white shell, no harsh shadow. */
body .members-table-container {
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    box-shadow: var(--fv-shadow-sm) !important;
    background: var(--fv-white) !important;
}

/* The min-width 900px on .members-table is correct — it forces
   horizontal scroll inside the container on narrow viewports.
   But override the green header + center-everything styles. */
body .members-table {
    font-size: 13.5px !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
body .members-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}
body .members-table thead th {
    background: var(--fv-ink-50) !important;
    color: var(--fv-ink-600) !important;
    padding: 12px 14px !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none !important;
    border-bottom: 1px solid var(--fv-ink-200) !important;
    white-space: nowrap;
}
body .members-table tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--fv-ink-100) !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left !important;
    color: var(--fv-ink-800);
    vertical-align: middle;
}
/* Center columns that benefit from it: NID (1), Sex (3), Phone (4),
   Joined Date (8). Keep Name (2), Atoll&Island (5), District (6),
   Address (7), Constituency (9) left-aligned. */
body .members-table tbody td:nth-child(1),
body .members-table tbody td:nth-child(3),
body .members-table tbody td:nth-child(4) {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}
body .members-table thead th:nth-child(1),
body .members-table thead th:nth-child(3),
body .members-table thead th:nth-child(4) {
    text-align: center !important;
}
body .members-table tbody tr { transition: background var(--fv-transition-fast); }
body .members-table tbody tr:hover { background: var(--fv-green-50) !important; }
body .members-table tbody tr:hover td { background: transparent !important; }
body .members-table tbody tr:last-child td { border-bottom: none !important; }

/* The Name column should be a touch bolder so the row scans well. */
body .members-table tbody td:nth-child(2) {
    font-weight: 600;
    color: var(--fv-ink-900);
}

/* "Hidden" phone pill — when admin lacks members_view_phone. */
body .members-table .hidden-phone {
    display: inline-block;
    background: var(--fv-ink-100);
    color: var(--fv-ink-500);
    padding: 2px 8px;
    border-radius: var(--fv-radius-full);
    font-size: 11px;
    font-weight: 600;
}

/* ===== Filter card alignment fixes ===== */

/* Override the old .search-filter-bar shell — when present, kill its
   green-tinted shadow and mint background. */
body .search-filter-bar {
    background: var(--fv-white) !important;
    border: 1px solid var(--fv-ink-200) !important;
    box-shadow: var(--fv-shadow-sm) !important;
    border-radius: var(--fv-radius-lg) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px;
}

/* All inputs INSIDE filter card get an identical 38px height so the
   row aligns cleanly with Choices.js controls + buttons. */
body .filter-card .filter-field input,
body .filter-card .filter-field select:not([multiple]) {
    height: 38px !important;
    padding: 0 12px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
}

/* Choices.js: precise height match.  */
body .filter-card .choices,
body .filter-card .search-group .choices { margin-bottom: 0 !important; }
body .filter-card .choices__inner,
body .filter-card .search-group .choices__inner {
    min-height: 38px !important;
    height: auto;
    padding: 4px 10px !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 13px !important;
}
body .filter-card .choices__list--multiple,
body .filter-card .search-group .choices__list--multiple { margin: 0 !important; padding: 0 !important; }
body .filter-card .choices__list--multiple .choices__item,
body .filter-card .search-group .choices__list--multiple .choices__item {
    margin: 2px 4px 2px 0 !important;
    padding: 3px 22px 3px 8px !important;
    position: relative;
}
body .filter-card .choices__placeholder { line-height: 30px !important; }

/* Search button needs an icon for affordance + align the icon. */
body .filter-card .filter-actions .btn-primary::before {
    content: '🔍';
    margin-right: 6px;
    font-size: 13px;
    line-height: 1;
}

/* Inside the Active Members filter card, the upper row should NOT
   wrap unless we're below 760px (otherwise Search/Clear get pushed
   to a new line ugly). */
@media (min-width: 761px) {
    body .filter-card .filter-row.filter-row-search {
        flex-wrap: nowrap;
    }
}

/* Label icon alignment helper — for labels like "🏝 Atoll", "🗳 Constituency"
   render the icon as a small badge so it aligns with text baseline. */
body .filter-field label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* ===== Pagination polish for the new shell ===== */

/* When pagination is INSIDE the table container shell, remove its
   own borders so the parent's border shows through. */
body .members-table-container + .pagination-container,
body .list-section > .pagination-container,
body .list-card > .pagination-container {
    border-top: 1px solid var(--fv-ink-200) !important;
    border-left: 1px solid var(--fv-ink-200);
    border-right: 1px solid var(--fv-ink-200);
    border-bottom: 1px solid var(--fv-ink-200);
    border-radius: 0 0 var(--fv-radius-lg) var(--fv-radius-lg);
    margin-top: -1px;
}

/* ===== "Download bar" right-aligned action group ===== */
body .download-bar {
    background: transparent;
    margin: 16px 0 12px !important;
}
body .download-bar .result-count {
    background: var(--fv-white);
    border: 1px solid var(--fv-ink-200);
    padding: 6px 14px;
    border-radius: var(--fv-radius-full);
    font-size: 13px;
    color: var(--fv-ink-700);
    font-weight: 600;
}
body .download-bar .action-buttons .btn { font-size: 13px; }

/* ===== Dashboard cards (.dash-card with inline gradients) =====
   Strip the inline yellow gradient and let the design surface through. */
body .dash-card[style*="linear-gradient"] {
    background: var(--fv-white) !important;
    background-image: none !important;
    border: 1px solid var(--fv-ink-200) !important;
    box-shadow: var(--fv-shadow-sm) !important;
}
body .dash-card[style*="linear-gradient"]::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 3px;
    background: var(--fv-gradient-gold);
}
body .dash-card { position: relative; }

/* ===== Tab content padding tweak (prevent the body bg leaking) ===== */
body .container.admin-container { padding-top: 24px; }

/* ===== Misc — uniform `.btn` heights so they align with inputs ===== */
body .filter-card .btn,
body .download-bar .btn {
    height: 38px;
    padding: 0 18px;
}
body .filter-card .filter-actions .btn { min-width: 110px; }

/* =====================================================================
   PHASE 39 — FORCE INTER + KILL CHROME AUTOFILL + REBUILD SEARCH UX
   ===================================================================== */

/* ---- Force Inter (or system) on EVERY readable surface in the apps.
        The body font cascade was being beaten by inline font-family
        declarations on .nav-brand, .brand-title, etc. This sweep applies
        Inter to all the readable content, leaving brand titles + Dhivehi
        with their custom fonts. ---- */
body,
body input,
body select,
body textarea,
body button,
body table,
body th,
body td,
body label,
body p,
body h1, body h2, body h3, body h4, body h5, body h6,
body .btn,
body .filter-field input,
body .filter-field select,
body .filter-field label,
body .members-table,
body .members-table th,
body .members-table td,
body .pagination-info,
body .pagination-btn,
body .page-btn,
body .stat-card,
body .stat-card *,
body .request-card,
body .request-card *,
body .login-card,
body .login-card input,
body .login-card label,
body .modal-content,
body .modal-content * {
    font-family: var(--fv-font-en) !important;
}

/* Brand bits keep their custom fonts (they're meant to be distinct). */
body .nav-brand .brand-title,
body .logo h1.en-title,
body .page-header h1.en-title,
body .header-logo h1 {
    font-family: 'InkBrush', cursive, var(--fv-font-en) !important;
}
body .logo h1.dv-title,
body .page-header h1.dv-title,
body .logo .portal-text.dv-sub,
body .page-header .portal-text.dv-sub,
body .dv-text,
body .dv-mode * {
    font-family: 'MV Bodu', 'MV Iyyu Formal', 'Noto Sans Thaana', sans-serif !important;
}

/* ---- Chrome autofill — REALLY kill the light-blue input background.
        The previous rule used -webkit-box-shadow inset which only works
        when no other shadow wins. Use a more specific rule + transition
        delay trick. ---- */
body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active,
body input:-internal-autofill-selected,
body input:-internal-autofill-previewed,
body textarea:-webkit-autofill,
body select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--fv-white) inset !important;
    box-shadow: 0 0 0 1000px var(--fv-white) inset !important;
    -webkit-text-fill-color: var(--fv-ink-900) !important;
    caret-color: var(--fv-ink-900) !important;
    transition: background-color 600000s 0s, color 600000s 0s !important;
    background-color: var(--fv-white) !important;
    background-image: none !important;
}

/* ---- Rebuild the .search-filter-bar that's still in admin.html (for
        Former Members search and any other place using the old shell).
        Make it a CLEAN single row: input + buttons, properly aligned. ---- */
body .search-filter-bar {
    background: var(--fv-white) !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius-lg) !important;
    box-shadow: var(--fv-shadow-sm) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body .search-filter-bar > input[type="text"],
body .search-filter-bar > input[type="search"] {
    flex: 1 1 220px;
    min-width: 180px;
    height: 40px !important;
    padding: 0 14px 0 38px !important;
    border: 1px solid var(--fv-ink-300) !important;
    border-radius: var(--fv-radius) !important;
    font-size: 14px !important;
    background-color: var(--fv-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
    color: var(--fv-ink-900) !important;
}
body .search-filter-bar > input:focus {
    outline: none;
    border-color: var(--fv-green-500) !important;
    box-shadow: var(--fv-ring) !important;
}
body .search-filter-bar > .btn {
    height: 40px !important;
    padding: 0 18px !important;
    flex: 0 0 auto;
}

/* ---- Same icon treatment for the .filter-card row 1 search input ---- */
body .filter-card .filter-row-search .filter-field.flex-grow input[type="text"] {
    padding-left: 40px !important;
    background-color: var(--fv-white) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
}

/* Search button icon — replace 🔍 prefix with a clean inline SVG so it
   aligns to the button text baseline. */
body .filter-card .filter-actions .btn-primary::before { content: none !important; }
body .filter-card .filter-actions .btn-primary {
    padding-left: 16px !important;
}
body .filter-card .filter-actions .btn-primary {
    background-image: var(--fv-gradient-brand) !important;
}

/* ---- Tighten label vertical rhythm ---- */
body .filter-field label,
body .search-group label {
    font-family: var(--fv-font-en) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fv-ink-500) !important;
    margin-bottom: 6px !important;
    line-height: 1 !important;
}

/* ---- Make sure inputs have a calm, readable 14px body text ---- */
body input,
body select,
body textarea {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--fv-ink-900) !important;
}

/* ---- The "Logged in as / Role" strip text font ---- */
body .admin-info-bar {
    font-family: var(--fv-font-en) !important;
}

/* =====================================================================
   PHASE 40 — MEMBERS TAB SEARCH BAR: FULL REBUILD
   ---------------------------------------------------------------------
   Fixes called out by Shifan:
     - "search box not good. layout wrong" — the 4 multi-selects in
        row 2 (Atoll/Island/District/Constituency) were rendering with
        a floating 🔎 emoji to their left (legacy .search-group::before)
        and the label was being pushed to the visual centre as a result.
     - The Search/Clear buttons sat at a different vertical offset to
        the search input baseline.
     - The main search input lacked breathing room.

   Approach:
     - .search-group is no longer treated as an inline-flex wrapper. It
       has been reduced to position:relative and content:none on ::before
       (done above).
     - Inside .filter-card .filter-row-multi every .filter-field is
       FORCED into a clean column layout: label flush-left at 11px, the
       Choices.js control directly below at 40px tall. No padding-left
       reservation for a non-existent icon.
     - Row 1 (search + sex + buttons) uses align-items:flex-end so that
       the buttons sit exactly on the same baseline as the inputs.
     - The main search input is bumped to 40px tall (was 38) to match
       the buttons and Choices controls underneath.
   ===================================================================== */

/* Row layout: cleanly two rows, both align inputs at the bottom edge. */
body .filter-card .filter-row.filter-row-search,
body .filter-card .filter-row.filter-row-multi {
    display: flex;
    align-items: flex-end;
    gap: var(--fv-space-3);
    flex-wrap: wrap;
}

/* Every .filter-field inside the filter-card is a column: label on
   top (small), control underneath (full width). No leftover inline
   flex from .search-group. */
body .filter-card .filter-field,
body .filter-card .filter-field.search-group,
body .filter-card .filter-field.filter-multi,
body .filter-card .filter-field.search-group.filter-multi {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 0 !important;
    position: relative;
}

/* Label: small, 700, left-aligned, sits flush above the control. */
body .filter-card .filter-field > label,
body .filter-card .filter-field.search-group > label {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: var(--fv-font-en) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--fv-ink-500) !important;
    line-height: 1 !important;
}

/* Main search input: 40px tall, comfortable padding, SVG icon at 14px
   left. Border + focus ring consistent with the rest of the design
   system. */
body .filter-card .filter-row-search .filter-field.flex-grow input[type="text"],
body .filter-card .filter-row-search input#searchInput {
    height: 40px !important;
    padding: 0 14px 0 40px !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius) !important;
    background-color: var(--fv-white) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 16px 16px !important;
    font-family: var(--fv-font-en) !important;
    font-size: 14px !important;
    color: var(--fv-ink-900) !important;
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition) !important;
}
body .filter-card .filter-row-search .filter-field.flex-grow input[type="text"]:focus,
body .filter-card .filter-row-search input#searchInput:focus {
    border-color: var(--fv-green-500) !important;
    box-shadow: var(--fv-ring) !important;
    outline: none !important;
}

/* Sex select: matches input height + border. */
body .filter-card .filter-row-search select#filterSex {
    height: 40px !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius) !important;
    background-color: var(--fv-white) !important;
    font-family: var(--fv-font-en) !important;
    font-size: 14px !important;
    color: var(--fv-ink-900) !important;
}

/* Search + Clear buttons: 40px tall, sit exactly on the input baseline. */
body .filter-card .filter-row-search .filter-actions {
    display: flex !important;
    gap: var(--fv-space-2) !important;
    align-self: flex-end !important;
    padding: 0 !important;
}
body .filter-card .filter-row-search .filter-actions .btn {
    height: 40px !important;
    min-width: 100px !important;
    padding: 0 18px !important;
    font-family: var(--fv-font-en) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: var(--fv-radius) !important;
}

/* The Choices.js control inside each multi-select field: 40px tall,
   same border / radius as the inputs above, no extra left padding
   (the emoji icon is gone). */
body .filter-card .filter-row-multi .filter-field .choices {
    margin: 0 !important;
    width: 100% !important;
}
body .filter-card .filter-row-multi .filter-field .choices__inner {
    min-height: 40px !important;
    height: auto !important;
    padding: 5px 10px !important;
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius) !important;
    background-color: var(--fv-white) !important;
    font-size: 13px !important;
    color: var(--fv-ink-900) !important;
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition) !important;
}
body .filter-card .filter-row-multi .filter-field .choices.is-focused .choices__inner,
body .filter-card .filter-row-multi .filter-field .choices.is-open .choices__inner {
    border-color: var(--fv-green-500) !important;
    box-shadow: var(--fv-ring) !important;
}
body .filter-card .filter-row-multi .filter-field .choices__input {
    background: transparent !important;
    font-size: 13px !important;
    color: var(--fv-ink-900) !important;
    margin: 0 !important;
}
body .filter-card .filter-row-multi .filter-field .choices__list--dropdown {
    border: 1px solid var(--fv-ink-200) !important;
    border-radius: var(--fv-radius) !important;
    box-shadow: var(--fv-shadow-2) !important;
    margin-top: 4px !important;
}

/* Belt-and-braces: nuke any leftover ::before pseudo content from the
   legacy .search-group selector regardless of where it's applied. */
body .filter-card .filter-field.search-group::before,
body .filter-card .filter-field.filter-multi::before { content: none !important; display: none !important; }

/* Responsive: on narrow screens the two rows collapse, every field
   becomes full-width, buttons stretch. */
@media (max-width: 768px) {
    body .filter-card .filter-row.filter-row-search,
    body .filter-card .filter-row.filter-row-multi {
        flex-direction: column;
        align-items: stretch;
    }
    body .filter-card .filter-row-search .filter-actions {
        width: 100%;
    }
    body .filter-card .filter-row-search .filter-actions .btn {
        flex: 1 1 auto;
    }
}