/**
 * ═══════════════════════════════════════════════════════════════════════════
 * DARAJAERP DASHBOARD ENHANCEMENTS v2.0
 * Modern colorful dashboard styling
 * BlueBridge Group - Connect, Control, Grow
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN BUSINESS SELECTOR — Sidebar Enhancement
   ═══════════════════════════════════════════════════════════════════════════ */

.d-sidebar-business-selector {
    background: linear-gradient(135deg, rgba(0, 156, 213, 0.1), rgba(138, 96, 194, 0.05));
    backdrop-filter: blur(10px);
}

.d-business-selector-wrapper {
    position: relative;
}

.d-business-selector {
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.d-business-selector:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 156, 213, 0.15) !important;
}

.d-business-selector:focus {
    background: white !important;
    color: #1E293B !important;
    border-color: var(--d-primary-500, #009CD5) !important;
    box-shadow: 0 4px 16px rgba(0, 156, 213, 0.2) !important;
}

/* Select2 dropdown styling for business selector */
.d-business-selector.select2-hidden-accessible + .select2-container--default {
    width: 100% !important;
}

.d-business-selector.select2-hidden-accessible + .select2-container--default .select2-selection--single {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    height: auto !important;
    padding: 4px 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.d-business-selector.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: white !important;
    font-weight: 600 !important;
    padding-left: 4px !important;
}

.d-business-selector.select2-hidden-accessible + .select2-container--default .select2-selection--single .select2-selection__arrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

.d-business-selector.select2-hidden-accessible + .select2-container--default.select2-container--open .select2-selection--single {
    background: white !important;
    color: #1E293B !important;
    border-color: var(--d-primary-500, #009CD5) !important;
    box-shadow: 0 4px 16px rgba(0, 156, 213, 0.2) !important;
}

.d-business-selector.select2-hidden-accessible + .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    color: #1E293B !important;
}

/* Select2 dropdown menu styling */
.select2-dropdown.select2-dropdown--below {
    background: white !important;
    border-radius: 12px !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px !important;
}

.select2-results__option {
    padding: 10px 12px !important;
    border-radius: 8px !important;
    margin: 2px 4px !important;
    color: var(--d-text-secondary, #475569) !important;
    transition: all 0.2s ease !important;
}

.select2-results__option:hover,
.select2-results__option--highlighted[aria-selected] {
    background: linear-gradient(135deg, var(--d-primary-50, #E6F7FC), var(--d-primary-100, #CCF0FA)) !important;
    color: var(--d-primary-700, #0369A1) !important;
}

.select2-results__option[aria-selected=true] {
    background: linear-gradient(135deg, var(--d-primary-500, #009CD5), var(--d-primary-600, #0369A1)) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN DATE SELECTOR — Premium Date Control
   ═══════════════════════════════════════════════════════════════════════════ */

#dashboard_date_filter {
    border-radius: 12px !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    background: linear-gradient(135deg, var(--d-gray-100, #F1F5F9), var(--d-gray-50, #F8FAFC)) !important;
    color: var(--d-text-secondary, #475569) !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#dashboard_date_filter:hover {
    border-color: var(--d-primary-300, #7DD3FC) !important;
    background: linear-gradient(135deg, var(--d-gray-200, #E2E8F0), var(--d-gray-100, #F1F5F9)) !important;
    color: var(--d-text-primary, #1E293B) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

#dashboard_date_filter:active,
#dashboard_date_filter:focus {
    border-color: var(--d-primary-500, #009CD5) !important;
    box-shadow: 0 0 0 3px rgba(0, 156, 213, 0.1) !important;
    background: white !important;
    outline: none !important;
}

/* DateRangePicker Styling */
.daterangepicker {
    border-radius: 14px !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    font-family: inherit !important;
}

.daterangepicker .drp-calendar {
    background: white !important;
}

.daterangepicker .drp-calendar.left .calendar-table th,
.daterangepicker .drp-calendar.right .calendar-table th {
    color: var(--d-text-primary, #1E293B) !important;
    font-weight: 700 !important;
    padding: 10px 5px !important;
}

.daterangepicker .drp-calendar .calendar-table td {
    padding: 6px !important;
}

.daterangepicker .drp-calendar .calendar-table td.active,
.daterangepicker .drp-calendar .calendar-table td.in-range,
.daterangepicker .drp-calendar .calendar-table td.start-date,
.daterangepicker .drp-calendar .calendar-table td.end-date {
    background-color: var(--d-primary-500, #009CD5) !important;
    color: white !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.daterangepicker .drp-calendar .calendar-table td.in-range {
    background-color: var(--d-primary-100, #CCF0FA) !important;
    color: var(--d-primary-700, #0369A1) !important;
}

.daterangepicker .drp-calendar .calendar-table td:hover {
    background-color: var(--d-primary-50, #E6F7FC) !important;
    border-radius: 8px !important;
    color: var(--d-primary-700, #0369A1) !important;
}

.daterangepicker .drp-buttons button {
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .drp-buttons .applyBtn {
    background: linear-gradient(135deg, var(--d-primary-500, #009CD5), var(--d-primary-600, #0369A1)) !important;
    color: white !important;
    border: none !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background: linear-gradient(135deg, var(--d-primary-600, #0369A1), var(--d-primary-700, #0284c7)) !important;
    box-shadow: 0 4px 12px rgba(0, 156, 213, 0.3) !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: var(--d-gray-100, #F1F5F9) !important;
    color: var(--d-text-secondary, #475569) !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    background: var(--d-gray-200, #E2E8F0) !important;
}

.daterangepicker .ranges li {
    padding: 8px 12px !important;
    border-radius: 10px !important;
    margin-bottom: 4px !important;
    color: var(--d-text-secondary, #475569) !important;
    transition: all 0.2s ease !important;
}

.daterangepicker .ranges li:hover {
    background: var(--d-gray-50, #F8FAFC) !important;
    color: var(--d-text-primary, #1E293B) !important;
}

.daterangepicker .ranges li.active {
    background: linear-gradient(135deg, var(--d-primary-500, #009CD5), var(--d-primary-600, #0369A1)) !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Brand palette */
.daraja-dashboard {
    --daraja-cyan: var(--brand-blue, #009CD5);
    --daraja-cyan-soft: var(--brand-blue-strong, #03A0D6);
    --daraja-purple: var(--brand-purple, #8A60C2);
    --daraja-purple-soft: var(--brand-lilac, #B576B2);
    --daraja-amber: var(--d-warning-500, #f59e0b);
    --daraja-emerald: var(--d-success-500, #10b981);
    --daraja-navy: var(--brand-navy, #13203D);
    --daraja-ink: var(--brand-ink, #010100);
    --daraja-surface: var(--d-bg-page, #F7FAFC);
    --daraja-border: var(--d-border-light, #E2E8F0);
    --daraja-shadow: 0 16px 40px rgba(4, 18, 35, 0.08), 0 6px 16px rgba(0, 0, 0, 0.06);
    background: radial-gradient(circle at 10% 10%, rgba(0, 156, 213, 0.08), transparent 32%), radial-gradient(circle at 90% 12%, rgba(138, 96, 194, 0.08), transparent 30%), linear-gradient(180deg, var(--d-bg-page, #f7fafc) 0%, #eef2f7 40%, var(--d-bg-page, #f7fafc) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

.content-wrapper {
    background: var(--d-bg-page) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN KPI CARD ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Enhanced KPI Cards with Gradient Accents */
.dashboard-kpi-grid > div {
    position: relative;
    overflow: hidden;
}

.dashboard-kpi-grid > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 12px 12px 0 0;
}

/* Colorful top accent bars for KPI cards */
.dashboard-kpi-grid > div:nth-child(1)::before {
    background: linear-gradient(90deg, var(--d-primary-500), var(--d-primary-600));
}

.dashboard-kpi-grid > div:nth-child(2)::before {
    background: linear-gradient(90deg, var(--d-accent-500), var(--d-accent-400));
}

.dashboard-kpi-grid > div:nth-child(3)::before {
    background: linear-gradient(90deg, var(--d-brand-navy, #13203D), var(--d-gray-800));
}

.dashboard-kpi-grid > div:nth-child(4)::before {
    background: linear-gradient(90deg, var(--d-accent-600), var(--d-accent-500));
}

.dashboard-kpi-grid > div:nth-child(5)::before {
    background: linear-gradient(90deg, var(--d-primary-500), var(--d-primary-400));
}

.dashboard-kpi-grid > div:nth-child(6)::before {
    background: linear-gradient(90deg, var(--d-accent-500), var(--d-accent-600));
}

.dashboard-kpi-grid > div:nth-child(7)::before {
    background: linear-gradient(90deg, var(--d-brand-navy, #13203D), var(--d-primary-600));
}

.dashboard-kpi-grid > div:nth-child(8)::before {
    background: linear-gradient(90deg, var(--d-accent-500), var(--d-primary-500));
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED HEADER GRADIENT
   ═══════════════════════════════════════════════════════════════════════════ */

.tw-bg-gradient-to-r.tw-from-primary-800 {
    background: linear-gradient(135deg, var(--d-primary-700) 0%, var(--d-accent-600) 100%) !important;
}

/* Daraja hero shell */
.daraja-hero-shell {
    background: radial-gradient(circle at 20% 20%, rgba(0, 156, 213, 0.18), transparent 35%), radial-gradient(circle at 80% 0%, rgba(138, 96, 194, 0.2), transparent 32%), linear-gradient(135deg, var(--daraja-navy) 0%, var(--daraja-ink) 55%, var(--d-brand-ink, #010100) 100%) !important;
}

.daraja-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(0, 156, 213, 0.1) 0%, rgba(138, 96, 194, 0.12) 60%, rgba(19, 32, 61, 0.34) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(6px);
    color: var(--d-text-inverse);
}

.daraja-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.daraja-hero-badge {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(0, 156, 213, 0.18), rgba(138, 96, 194, 0.22));
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 32px rgba(0, 156, 213, 0.15), 0 10px 26px rgba(0, 0, 0, 0.25);
}

.daraja-hero-badge img {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

.daraja-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daraja-hero-kicker {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-primary-200);
    margin: 0;
    font-weight: 700;
}

.daraja-hero-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--d-text-inverse);
    letter-spacing: -0.01em;
}

.daraja-hero-sub {
    margin: 0;
    color: var(--d-accent-200);
    font-weight: 600;
}

.daraja-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.daraja-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--d-text-inverse);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-kpi-chip {
    background: rgba(0, 156, 213, 0.18);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--d-text-inverse);
}

.hero-kpi-label {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.hero-kpi-value {
    font-family: var(--d-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
    font-weight: 800;
}

.daraja-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.06);
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.daraja-hero-select {
    min-width: 230px;
    background: linear-gradient(135deg, rgba(0, 156, 213, 0.25), rgba(138, 96, 194, 0.25)) !important;
    color: var(--d-text-inverse) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
    height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD CHARTS (No external libs)
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-chart-shell {
    width: 100%;
    padding: 14px 16px 18px;
}

.daraja-chart {
    height: 240px;
    width: 100%;
    display: block;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.22);
    background: radial-gradient(circle at 20% 0%, rgba(0, 156, 213, 0.12), transparent 45%),
        radial-gradient(circle at 80% 10%, rgba(138, 96, 194, 0.16), transparent 40%),
        linear-gradient(180deg, rgba(0, 156, 213, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 18px 40px rgba(2, 20, 46, 0.18);
}

.daraja-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), transparent 45%);
    opacity: 0.6;
    pointer-events: none;
}

.daraja-chart::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.06) 0,
        rgba(15, 23, 42, 0.06) 1px,
        transparent 1px,
        transparent 12px
    );
    opacity: 0.25;
    pointer-events: none;
}

.daraja-chart-svg {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.daraja-chart-empty {
    height: 220px;
    display: grid;
    place-items: center;
    color: var(--d-text-muted);
    font-weight: 600;
    margin: 10px;
    border-radius: 14px;
    border: 1px dashed rgba(var(--d-primary-500-rgb), 0.3);
    background: rgba(255, 255, 255, 0.6);
}

.daraja-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-top: 10px;
    color: var(--d-text-tertiary);
    font-size: 12px;
    font-weight: 600;
}

.daraja-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.2);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.daraja-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 156, 213, 0.18);
}

.daraja-legend-dot--dashed {
    background: transparent;
    border: 2px dashed rgba(var(--d-brand-ink-rgb), 0.45);
    box-shadow: none;
}

.daraja-legend-item--ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: var(--d-text-secondary);
}

.delta-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--d-bg-hover);
    color: var(--d-primary-600);
    font-weight: 700;
    font-size: 0.75rem;
}

.delta-badge[data-direction="down"] { color: var(--d-danger-600); }
.delta-badge[data-direction="up"] { color: var(--d-success-600); }

.daraja-hero-actions .select2-container--default .select2-selection--single {
    background-color: var(--daraja-navy) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    height: 42px !important;
}

.daraja-hero-actions .select2-selection__rendered {
    color: var(--d-text-inverse) !important;
    line-height: 42px !important;
}

.daraja-filter-toolbar .select2-container--default .select2-selection--single {
    background: rgba(var(--d-bg-card-rgb), 0.08) !important;
    border-color: rgba(var(--d-primary-500-rgb), 0.24) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--d-bg-card-rgb), 0.12);
}

.daraja-filter-toolbar .select2-selection__rendered {
    color: var(--d-text-inverse) !important;
    font-weight: 600;
}

.daraja-hero-actions .select2-selection__arrow {
    height: 42px !important;
}

.daraja-hero-button {
    background: linear-gradient(135deg, var(--d-primary-500), var(--d-primary-600)) !important;
    color: var(--d-text-inverse) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(var(--d-primary-500-rgb), 0.22) !important;
    border: 1px solid rgba(var(--d-bg-card-rgb), 0.14) !important;
}

.daraja-filter-toolbar {
    background: rgba(var(--d-brand-navy-rgb), 0.55);
    border-radius: 18px;
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.28);
    box-shadow: 0 18px 42px rgba(var(--d-brand-navy-rgb), 0.45);
    padding: 10px 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.daraja-filter-chip-group {
    padding: 6px;
    border-radius: 999px;
    background: rgba(var(--d-bg-card-rgb), 0.06);
    border: 1px solid rgba(var(--d-bg-card-rgb), 0.12);
}

@media (max-width: 640px) {
    .daraja-filter-chip-group {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .daraja-filter-chip-group::-webkit-scrollbar {
        display: none;
    }
}

.daraja-hero-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(var(--d-primary-500-rgb), 0.28) !important;
}

.daraja-filter-chip {
    background: rgba(var(--d-bg-card-rgb), 0.1) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(var(--d-bg-card-rgb), 0.14) !important;
    box-shadow: 0 10px 22px rgba(var(--d-brand-navy-rgb), 0.28) !important;
    border-radius: 999px !important;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.daraja-filter-chip:hover {
    transform: translateY(-1px) !important;
    background: rgba(var(--d-primary-500-rgb), 0.16) !important;
    border-color: rgba(var(--d-primary-500-rgb), 0.32) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(var(--d-brand-navy-rgb), 0.34) !important;
}

.daraja-filter-chip.is-active {
    background: linear-gradient(135deg, var(--d-primary-500), var(--d-primary-600)) !important;
    border-color: var(--d-primary-500) !important;
    color: var(--d-text-inverse) !important;
    box-shadow: 0 16px 32px rgba(var(--d-primary-500-rgb), 0.32) !important;
    transform: translateY(-2px);
}

.daraja-filter-chip.is-active:hover {
    background: linear-gradient(135deg, var(--d-primary-600), var(--d-accent-500)) !important;
    border-color: var(--d-primary-600) !important;
}

.daraja-command-btn {
    background: var(--daraja-navy) !important;
    color: var(--d-text-inverse) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 30px rgba(4, 18, 35, 0.25) !important;
}

.daraja-hotkey {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--d-text-inverse);
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Executive cockpit */
.daraja-executive .cockpit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    align-items: stretch;
    grid-auto-rows: minmax(220px, auto);
}

.cockpit-card {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 8px;
    padding: 16px;
    background: var(--d-bg-card);
    border: 1px solid var(--d-border-light);
    border-radius: 16px;
    min-height: 220px;
    align-self: stretch;
    box-shadow: 0 12px 30px rgba(19, 32, 61, 0.05);
    color: inherit;
    text-decoration: none;
    min-width: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cockpit-card:hover {
    transform: translateY(-3px);
    border-color: var(--d-primary-300);
    box-shadow: 0 18px 42px rgba(0, 156, 213, 0.08);
}

.cockpit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.cockpit-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cockpit-value {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    color: var(--d-text-primary);
    line-height: 1.1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cockpit-micro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    font-size: 12px;
    color: var(--d-text-tertiary);
    min-width: 0;
}

.cockpit-micro span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cockpit-micro strong {
    color: var(--d-text-primary);
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cockpit-view {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-primary-600);
    align-self: end;
}

.sparkline {
    min-height: 48px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INSIGHTS TILES (Next.js-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-tile,
.daraja-tile-card {
    --tile-accent: var(--d-primary-500);
    padding: 16px 16px 16px 18px;
    border-radius: 16px;
}

.daraja-tile::before,
.daraja-tile-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: var(--tile-accent);
    opacity: 0.9;
}

.daraja-tile[data-accent='cyan'],
.daraja-tile-card[data-accent='cyan'] {
    --tile-accent: var(--d-primary-500);
}

.daraja-tile[data-accent='purple'],
.daraja-tile-card[data-accent='purple'] {
    --tile-accent: var(--d-accent-500);
}

.daraja-tile[data-accent='lilac'],
.daraja-tile-card[data-accent='lilac'] {
    --tile-accent: var(--d-teal-500);
}

.daraja-tile[data-accent='slate'],
.daraja-tile-card[data-accent='slate'] {
    --tile-accent: var(--d-brand-slate);
}

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

.daraja-tile-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--d-text-secondary);
}

.daraja-tile-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--d-text-tertiary);
    font-weight: 600;
}

.daraja-tile-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-card);
    color: var(--d-primary-700);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: all var(--d-transition-fast);
    white-space: nowrap;
}

.daraja-tile-link:hover {
    background: var(--d-primary-50);
    border-color: var(--d-primary-200);
    color: var(--d-primary-800);
}

.daraja-tile-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--d-primary-200);
    background: var(--d-primary-50);
    color: var(--d-primary-800);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.daraja-tile-body {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.daraja-insight-shell {
    background: none;
}

.daraja-tile-card {
    position: relative;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-card);
    box-shadow: 0 18px 40px rgba(19, 32, 61, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.daraja-tile-card:hover {
    transform: translateY(-4px);
    border-color: var(--d-primary-300);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

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

.daraja-tile-link {
    background: rgba(0, 156, 213, 0.08);
    border-color: transparent;
    color: var(--d-primary-700);
}

.daraja-tile-pill {
    background: rgba(82, 69, 116, 0.12);
    border-color: transparent;
    color: var(--d-brand-slate);
}

.daraja-performance-grid {
    padding: 8px 0;
}

.daraja-performance-card {
    border-radius: 20px;
    border: 1px solid var(--d-border-light);
    padding: 20px 24px;
    background: var(--d-bg-card);
    box-shadow: 0 20px 60px rgba(13, 23, 48, 0.12);
}

.daraja-performance-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.daraja-performance-pretitle {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d-text-muted);
    font-weight: 700;
    margin: 0;
}

.daraja-performance-title {
    margin: 2px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--d-text-primary);
}

.daraja-performance-badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--d-primary-50);
    color: var(--d-primary-700);
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--d-primary-100);
}

.daraja-performance-card-body {
    display: grid;
    gap: 16px;
}

.daraja-performance-sparkline {
    height: 90px;
    min-height: 90px;
    border-radius: 14px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-page);
    padding: 12px;
}

.daraja-performance-sparkline svg {
    height: 100%;
    width: 100%;
}

.daraja-performance-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.daraja-performance-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--d-text-muted);
    margin: 0;
}

.daraja-performance-day {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--d-text-secondary);
}

.daraja-performance-value {
    margin: 2px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--d-text-primary);
}

.daraja-quick-actions-card {
    border-radius: 20px;
    border: 1px solid var(--d-border-light);
    padding: 20px;
    background: var(--d-bg-card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 16px 42px rgba(13, 23, 48, 0.12);
}

.daraja-statement-title {
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--d-text-primary);
}

.daraja-quick-actions-grid {
    display: grid;
    gap: 10px;
}

.daraja-quick-action {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 156, 213, 0.2);
    background: rgba(0, 156, 213, 0.08);
    color: var(--d-text-primary);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.daraja-quick-action small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--d-text-secondary);
    margin-top: 4px;
}

.daraja-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.daraja-dashboard table {
    border-color: var(--d-border-light);
    border-radius: 16px;
    overflow: hidden;
}

.daraja-dashboard table th {
    background: var(--d-primary-50);
    border-color: var(--d-border-light);
    color: var(--d-text-primary);
    font-weight: 700;
}

.daraja-dashboard table td {
    border-color: var(--d-border-light);
    color: var(--d-text-secondary);
}

.daraja-tile-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--d-border-light);
    background: var(--d-gray-50);
}

.daraja-donut {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    flex: 0 0 72px;
}

.daraja-donut-svg {
    width: 72px;
    height: 72px;
}

.daraja-metric-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.daraja-metric-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--d-text-tertiary);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.daraja-metric-value {
    font-size: 22px;
    font-weight: 900;
    color: var(--d-text-primary);
    letter-spacing: -0.02em;
}

.daraja-metric-meta {
    font-size: 12px;
    font-weight: 600;
    color: var(--d-text-tertiary);
}

.daraja-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.daraja-chip-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-card);
    font-size: 12px;
    font-weight: 700;
    color: var(--d-text-secondary);
    white-space: nowrap;
}

.daraja-chip-sm strong {
    font-weight: 900;
    color: var(--d-text-primary);
}

.daraja-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.daraja-micro-tile {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-card);
}

.daraja-micro-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-text-tertiary);
}

.daraja-micro-value {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 900;
    color: var(--d-text-primary);
}

.daraja-ranked-list,
.daraja-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.daraja-ranked-item,
.daraja-activity-item {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-card);
}

.daraja-ranked-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.daraja-ranked-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.daraja-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--row-accent, var(--d-primary-500));
    flex: 0 0 8px;
}

.daraja-ranked-name {
    font-weight: 800;
    color: var(--d-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daraja-ranked-right {
    font-weight: 900;
    color: var(--d-text-primary);
    font-family: var(--d-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace);
    white-space: nowrap;
}

.daraja-ranked-bar {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: var(--d-gray-100);
    overflow: hidden;
}

.daraja-ranked-bar span {
    display: block;
    height: 100%;
    background: var(--row-accent, var(--d-primary-500));
    opacity: 0.9;
}

.daraja-activity-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.daraja-activity-left {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.daraja-activity-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid var(--d-border-light);
    background: var(--d-gray-50);
    color: var(--d-text-secondary);
}

.daraja-activity-badge[data-type='sell'] {
    border-color: var(--d-primary-200);
    background: var(--d-primary-50);
    color: var(--d-primary-800);
}

.daraja-activity-badge[data-type='purchase'] {
    border-color: var(--d-accent-200);
    background: var(--d-accent-50);
    color: var(--d-accent-700);
}

.daraja-activity-badge[data-type='expense'] {
    border-color: var(--d-warning-200);
    background: var(--d-warning-50);
    color: var(--d-warning-800);
}

.daraja-activity-badge[data-type='stock_adjustment'] {
    border-color: var(--d-gray-200);
    background: var(--d-gray-50);
    color: var(--d-text-secondary);
}

.daraja-activity-ref {
    font-weight: 900;
    color: var(--d-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daraja-activity-right {
    text-align: right;
    display: grid;
    gap: 4px;
    flex: 0 0 auto;
}

.daraja-activity-amount {
    font-weight: 900;
    color: var(--d-text-primary);
    white-space: nowrap;
}

.daraja-activity-time {
    font-size: 12px;
    font-weight: 700;
    color: var(--d-text-tertiary);
    white-space: nowrap;
}

.daraja-empty-row {
    padding: 12px;
    border-radius: 14px;
    border: 1px dashed var(--d-border-light);
    background: var(--d-gray-50);
    color: var(--d-text-tertiary);
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .daraja-chip-grid {
        grid-template-columns: 1fr;
    }
}

/* Insight cards */
.daraja-insights .daraja-kpi-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.94) 100%) !important;
    border: 1px solid var(--daraja-border) !important;
    box-shadow: var(--daraja-shadow) !important;
    border-radius: 18px;
}

.daraja-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.daraja-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px dashed var(--daraja-border);
    border-radius: 12px;
    background: rgba(0, 166, 231, 0.03);
    font-size: 0.95rem;
}

.daraja-chip {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--daraja-border);
    background: rgba(0, 166, 231, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    color: var(--daraja-navy);
}

.daraja-chip.muted {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--d-text-inverse);
}

.daraja-aurora-rail {
    margin-top: 12px;
    padding: 14px;
    border-radius: 18px;
    background: radial-gradient(circle at 10% 30%, rgba(0, 156, 213, 0.25), transparent 32%), radial-gradient(circle at 90% 10%, rgba(138, 96, 194, 0.2), transparent 34%), linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 50px rgba(4, 18, 35, 0.3);
    backdrop-filter: blur(6px);
}

.daraja-aurora-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.daraja-aurora-rail__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.daraja-rail-badge {
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(0, 156, 213, 0.18);
    color: var(--d-text-inverse);
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.aurora-pill {
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--d-text-inverse);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.aurora-pill::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--daraja-cyan);
    box-shadow: 0 0 0 6px rgba(0, 156, 213, 0.14);
}

.aurora-pill.risk {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.24);
    color: var(--d-danger-100);
}

.aurora-pill.risk::before {
    background: var(--d-danger-500);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.14);
}

.aurora-pill.win {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(16, 185, 129, 0.24);
    color: var(--d-success-100);
}

.aurora-pill.win::before {
    background: var(--daraja-emerald);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.16);
}

.aurora-pill.info {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.24);
    color: var(--d-warning-300);
}

.aurora-pill.info::before {
    background: var(--daraja-amber);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.16);
}

.aurora-pill.muted {
    color: var(--d-gray-300);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GENERAL CARD + PANEL STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-dashboard .tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 252, 0.98) 100%) !important;
    border: 1px solid var(--daraja-border) !important;
    box-shadow: var(--daraja-shadow) !important;
    position: relative;
    overflow: hidden;
}

.daraja-dashboard .tw-bg-white.tw-shadow-sm.tw-rounded-xl.tw-ring-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(0, 156, 213, 0.06), transparent 40%), radial-gradient(circle at 80% 0%, rgba(138, 96, 194, 0.08), transparent 38%);
    pointer-events: none;
}

/* Dashboard panel headers */
.daraja-panel {
    position: relative;
}

.daraja-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--d-primary-500), var(--d-accent-500));
    opacity: 0.65;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.daraja-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.daraja-panel-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.daraja-panel-title-stack {
    min-width: 0;
}

.daraja-panel-title {
    margin: 0;
    color: var(--daraja-navy);
    letter-spacing: -0.01em;
}

.daraja-panel-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--d-primary-500), var(--d-accent-500));
    box-shadow: 0 12px 24px rgba(2, 20, 46, 0.18);
    flex-shrink: 0;
}

.daraja-panel-icon svg {
    color: #ffffff !important;
}

.daraja-panel-icon--warning {
    background: linear-gradient(135deg, var(--d-warning-500), var(--d-warning-700));
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.28);
}

.daraja-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.daraja-panel-actions .select2-container {
    min-width: 220px;
}

@media (max-width: 768px) {
    .daraja-panel-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .daraja-panel-actions .select2-container {
        width: 100% !important;
    }
}

.daraja-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--d-primary-500-rgb), 0.12);
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.24);
    color: var(--d-primary-700);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.daraja-table-shell {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 6px 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

.daraja-table-shell .tw--mx-4,
.daraja-table-shell .tw--mx-5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.daraja-table-shell .tw--my-2 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.daraja-table-shell table {
    border-radius: 12px;
    overflow: hidden;
}

.daraja-dashboard .tw-border.tw-border-gray-200.tw-border-dashed {
    border-color: rgba(0, 156, 213, 0.35) !important;
    background: linear-gradient(135deg, var(--d-bg-page, #f7fafc) 0%, #eef2f9 100%) !important;
}

.daraja-dashboard .tw-border-2 {
    border-color: rgba(0, 156, 213, 0.3) !important;
    background: rgba(0, 156, 213, 0.08) !important;
}

.daraja-dashboard h3 {
    color: var(--daraja-navy) !important;
}

.daraja-dashboard .tw-text-gray-500 {
    color: var(--d-text-secondary) !important;
}

.daraja-dashboard .tw-text-gray-900 {
    color: var(--daraja-navy) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE THEMING
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-dashboard .table > thead > tr > th {
    background: var(--d-gray-50) !important;
    color: var(--d-text-secondary) !important;
    border-color: var(--d-border-light) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.daraja-dashboard .table > tbody > tr > td {
    border-color: var(--d-border-light) !important;
}

.daraja-dashboard .table > tbody > tr:hover {
    background: var(--d-primary-50) !important;
}

.daraja-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
    border: 1px solid var(--d-border-light) !important;
    background: var(--d-bg-card) !important;
    color: var(--d-text-secondary) !important;
    transition: all var(--d-transition-fast);
}

.daraja-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--d-primary-50) !important;
    border-color: var(--d-primary-200) !important;
    color: var(--d-text-primary) !important;
}

.daraja-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--d-primary-500) !important;
    border-color: var(--d-primary-500) !important;
    color: var(--d-text-inverse) !important;
}

.daraja-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--d-primary-600) !important;
    border-color: var(--d-primary-600) !important;
    color: var(--d-text-inverse) !important;
}

.daraja-dashboard .dataTables_wrapper .dataTables_filter label,
.daraja-dashboard .dataTables_wrapper .dataTables_length label {
    font-weight: 600;
    color: var(--d-text-secondary);
}

.daraja-dashboard .dataTables_wrapper .dataTables_filter input {
    border-radius: 12px !important;
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.2) !important;
    background: #ffffff !important;
    padding: 6px 12px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.daraja-dashboard .dataTables_wrapper .dataTables_filter input:focus {
    border-color: rgba(var(--d-primary-500-rgb), 0.5) !important;
    box-shadow: 0 0 0 3px rgba(var(--d-primary-500-rgb), 0.15);
}

.daraja-dashboard .dataTables_wrapper .dataTables_length select {
    border-radius: 12px !important;
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.2) !important;
    background: #ffffff !important;
    padding: 6px 10px !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.daraja-dashboard table.dataTable td.dataTables_empty {
    padding: 28px 16px !important;
    text-align: center;
    color: var(--d-text-muted) !important;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(0, 156, 213, 0.04), rgba(138, 96, 194, 0.04)) !important;
    border-radius: 12px;
}

.daraja-dashboard .dataTables_wrapper .dataTables_info {
    color: var(--d-text-tertiary);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-command-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 25, 47, 0.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1100;
}

.daraja-command-overlay.active {
    display: flex;
}

.daraja-command-card {
    width: min(720px, 100%);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(4, 18, 35, 0.22);
    padding: 14px;
    border: 1px solid var(--daraja-border);
}

.daraja-command-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.daraja-command-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.daraja-command-close {
    border: 1px solid var(--daraja-border);
    background: var(--d-bg-hover);
    border-radius: 10px;
    padding: 6px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.daraja-command-input {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--daraja-border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--d-bg-hover);
}

.daraja-command-input input {
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    font-size: 0.95rem;
}

.daraja-command-list {
    margin-top: 12px;
    max-height: 360px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--daraja-border);
    background: linear-gradient(180deg, var(--d-bg-card) 0%, var(--d-bg-page, #f7fafc) 100%);
}

.daraja-command-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--daraja-border);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.daraja-command-item:last-child {
    border-bottom: none;
}

.daraja-command-item:hover {
    background: rgba(0, 166, 231, 0.06);
    transform: translateX(2px);
}

.daraja-command-item .title {
    font-weight: 700;
    color: var(--daraja-navy);
}

.daraja-command-item .meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--d-text-secondary);
    font-size: 0.9rem;
}

.daraja-command-item .meta .badge {
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(0, 156, 213, 0.14);
    color: var(--d-primary-600);
    font-weight: 700;
}

.daraja-command-empty {
    padding: 16px;
    text-align: center;
    color: var(--d-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTS & BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-dashboard .select2-container--default .select2-selection--single {
    border-color: var(--daraja-border) !important;
    box-shadow: 0 4px 12px rgba(4, 18, 35, 0.06) !important;
}

.daraja-dashboard .label,
.daraja-dashboard .badge {
    background: rgba(0, 156, 213, 0.14) !important;
    color: var(--daraja-navy) !important;
}

.daraja-dashboard .badge-success,
.daraja-dashboard .label-success {
    background: rgba(16, 185, 129, 0.16) !important;
    color: var(--d-success-700) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TITLE STRIPS FOR GRIDS
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-dashboard .tw-grid.tw-grid-cols-1.tw-gap-4.tw-mt-4 .tw-transition-all::after,
.daraja-dashboard .tw-grid.tw-grid-cols-1.tw-gap-4 .tw-transition-all::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--d-primary-500), var(--d-accent-500));
    border-radius: 12px 12px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER MODERNIZATION — Complete Design System
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared icon size ── */
.d-h-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── App Header shell ── */
.daraja-app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, var(--d-brand-navy, #13203D) 0%, var(--d-primary-600) 45%, var(--d-accent-600) 100%);
    box-shadow: 0 4px 24px rgba(4, 18, 35, 0.25), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.daraja-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    min-height: 56px;
}

/* ── Left section ── */
.daraja-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.daraja-toggle-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Show hamburger on mobile, sidebar-collapse on desktop */
.d-header-mobile-toggle  { display: inline-flex; }
.d-header-desktop-toggle { display: none; }
@media (min-width: 992px) {
    .d-header-mobile-toggle  { display: none; }
    .d-header-desktop-toggle { display: inline-flex; }
}

/* ── Brand pill ── */
.daraja-brand-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 7px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s;
}

.daraja-brand-pill:hover,
.daraja-brand-pill:focus {
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    text-decoration: none;
}

.daraja-brand-pill img {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255,255,255,.9);
    padding: 3px;
}

.daraja-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.daraja-brand-name {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.daraja-brand-sub {
    color: rgba(226, 232, 240, 0.7);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Actions bar (right) ── */
.daraja-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}

/* ── Base icon button (all header buttons) ── */
.d-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    list-style: none;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.d-header-icon-btn:hover,
.d-header-icon-btn:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff;
    text-decoration: none;
    outline: none;
}

.d-header-icon-btn:active {
    transform: scale(0.96);
}

/* Button text label (hidden on small screens) */
.d-header-btn-label {
    display: none;
}
@media (min-width: 768px) {
    .d-header-btn-label { display: inline; }
}

/* ── POS accent button ── */
.d-header-btn-pos {
    background: var(--d-accent-600, #7c5ba3) !important;
    border-color: var(--d-accent-500, #9678b8) !important;
}
.d-header-btn-pos:hover {
    background: var(--d-accent-500, #9678b8) !important;
}

/* ── Color variants ── */
.d-header-btn-accent {
    background: var(--d-accent-600, #7c5ba3);
    border-color: var(--d-accent-500, #9678b8);
}
.d-header-btn-accent:hover {
    background: var(--d-accent-500, #9678b8);
}

.d-header-btn-subtle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}

/* ── Details / dropdown system ── */
.d-header-details {
    position: relative;
}

.d-header-details > summary {
    list-style: none;
}
.d-header-details > summary::-webkit-details-marker {
    display: none;
}

.d-header-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    min-width: 200px;
    padding: 6px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--d-border-light, rgba(15,23,42,.08));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0,0,0,.06);
    animation: d-header-dd-in 0.15s ease-out;
}

@keyframes d-header-dd-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.d-header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--d-text-secondary, #334155);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
}

.d-header-dropdown-item:hover,
.d-header-dropdown-item:focus {
    background: var(--d-primary-50, #edf6fb);
    color: var(--d-primary-700, #0c5a83);
    text-decoration: none;
}

.d-header-dropdown-item--warn {
    color: #b45309;
}
.d-header-dropdown-item--warn:hover {
    background: #fffbeb;
    color: #92400e;
}

.d-header-dropdown-item--danger {
    color: #dc2626;
}
.d-header-dropdown-item--danger:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

.d-header-dropdown-divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--d-border-light, rgba(15, 23, 42, 0.08));
}

/* ── User dropdown ── */
.d-header-dropdown--user {
    min-width: 220px;
}

.d-header-dropdown-user-info {
    padding: 12px 14px;
    border-bottom: 1px solid var(--d-border-light, rgba(15,23,42,.06));
}

.d-header-dropdown-label {
    margin: 0;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.d-header-dropdown-name {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--d-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-header-dropdown-email {
    margin: 2px 0 0;
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.d-header-dropdown-body {
    padding: 4px 0;
}

/* ── User avatar ── */
.d-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
}

.d-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.d-user-name {
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.d-header-user-btn {
    gap: 8px;
    padding: 4px 10px 4px 4px;
}

.d-header-chevron {
    width: 14px;
    height: 14px;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.d-header-user-details[open] .d-header-chevron {
    transform: rotate(180deg);
}

/* ── Date chip ── */
.d-header-date {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Notification badge ── */
.d-header-notif-wrap {
    position: relative;
}

.d-header-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--d-brand-navy, #13203D);
    font-size: 0;
    line-height: 0;
    pointer-events: none;
}

.d-header-notif-badge:empty {
    display: none;
}

/* ── Notification dropdown override ── */
.d-header-notif-dropdown {
    right: 0 !important;
    left: auto !important;
    width: 320px !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px !important;
    border-radius: 14px !important;
    border: 1px solid var(--d-border-light, rgba(15,23,42,.08)) !important;
    background: #fff !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
    -webkit-overflow-scrolling: touch;
}

/* ── Conditional hide helpers — toggled by responsive breakpoints below ── */

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATOR — Popover Design
   ═══════════════════════════════════════════════════════════════════════════ */

.pos-calculator {
    width: 260px;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.pos-calculator-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--d-border-light, #e8ecf0);
    margin-bottom: 10px;
}

.pos-calculator-heading {
    display: flex;
    flex-direction: column;
}

.pos-calculator-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--d-text-primary, #0f172a);
}

.pos-calculator-sub {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.pos-calculator-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: var(--d-danger-50, #fef2f2);
    color: var(--d-danger-600, #dc2626);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s;
}

.pos-calculator-close:hover {
    background: var(--d-danger-100, #fee2e2);
}

.pos-calculator-display {
    margin-bottom: 10px;
}

.pos-calculator-display .screen {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--d-border-light, #e2e8f0);
    border-radius: 12px;
    background: var(--d-gray-50, #f8fafc);
    color: var(--d-text-primary, #0f172a);
    font-size: 22px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.pos-calculator-display .screen:focus {
    border-color: var(--d-primary-400, #38bdf8);
}

.pos-calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.pos-calculator-keys .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid var(--d-border-light, #e2e8f0);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.08s;
    padding: 0;
    line-height: 1;
}

.pos-calculator-keys .btn:active {
    transform: scale(0.94);
}

/* Number keys */
.pos-calculator-keys .btn.number {
    background: #fff;
    color: var(--d-text-primary, #0f172a);
}

.pos-calculator-keys .btn.number:hover {
    background: var(--d-gray-50, #f1f5f9);
}

/* Zero spans 2 cols */
.pos-calculator-keys .btn.number.zero {
    grid-column: span 2;
}

/* Operator keys */
.pos-calculator-keys .btn.operator {
    background: var(--d-primary-50, #edf6fb);
    color: var(--d-primary-700, #0c5a83);
    border-color: var(--d-primary-100, #d1eaf8);
}

.pos-calculator-keys .btn.operator:hover {
    background: var(--d-primary-100, #d1eaf8);
}

/* Utility keys */
.pos-calculator-keys .btn.utility {
    font-size: 13px;
    font-weight: 700;
}

.pos-calculator-keys .btn.utility.danger {
    background: var(--d-danger-50, #fef2f2);
    color: var(--d-danger-600, #dc2626);
    border-color: var(--d-danger-100, #fee2e2);
}

.pos-calculator-keys .btn.utility.danger:hover {
    background: var(--d-danger-100, #fee2e2);
}

.pos-calculator-keys .btn.utility.warning {
    background: var(--d-warning-50, #fffbeb);
    color: var(--d-warning-700, #b45309);
    border-color: var(--d-warning-100, #fef3c7);
}

.pos-calculator-keys .btn.utility.warning:hover {
    background: var(--d-warning-100, #fef3c7);
}

/* Equals key */
.pos-calculator-keys .btn.equals {
    background: linear-gradient(135deg, var(--d-primary-500, #009cd5), var(--d-accent-600, #7c5ba3));
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 800;
}

.pos-calculator-keys .btn.equals:hover {
    filter: brightness(1.08);
}

/* ── Fix Bootstrap popover wrapper for calculator ── */
.popover {
    max-width: 300px;
    border-radius: 16px;
    border: 1px solid var(--d-border-light, #e2e8f0);
    box-shadow: 0 16px 48px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.05);
}

.popover .popover-content {
    padding: 14px;
}

/* Hide popover title bar (calculator uses its own header) */
.popover .popover-title:empty,
.popover .popover-title {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — Responsive Breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Large desktop ≥1200px: everything visible ── */

/* ── ≤991px: hide date, compress actions ── */
@media (max-width: 991.98px) {
    .d-header-hide-md {
        display: none !important;
    }

    .d-user-name {
        display: none;
    }

    .d-header-chevron {
        display: none;
    }

    .d-header-user-btn {
        padding: 4px;
    }

    .d-header-btn-label {
        display: none !important;
    }
}

/* ── ≤767px: single-row compact header ── */
@media (max-width: 767.98px) {
    .daraja-header-inner {
        padding: 6px 10px;
        gap: 8px;
        min-height: 48px;
    }

    .daraja-brand-text {
        display: none;
    }

    .daraja-brand-pill {
        padding: 5px;
        border-radius: 10px;
    }

    .d-header-icon-btn {
        height: 34px;
        min-width: 34px;
        padding: 0 8px;
        border-radius: 9px;
        font-size: 12px;
    }

    .d-h-icon {
        width: 18px;
        height: 18px;
    }

    .d-user-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 8px;
        font-size: 11px;
    }

    .daraja-header-actions {
        gap: 4px;
    }

    /* Dropdown opens full-width on phone */
    .d-header-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 18px 18px 0 0;
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: d-header-dd-slide-up 0.2s ease-out;
    }

    @keyframes d-header-dd-slide-up {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .d-header-notif-dropdown {
        width: calc(100vw - 16px) !important;
        max-width: 360px !important;
        right: -4px !important;
    }
}

/* ── ≤640px: hide lower-priority buttons ── */
@media (max-width: 640px) {
    .d-header-hide-sm {
        display: none !important;
    }
}

/* ── ≤479px: absolute minimum ── */
@media (max-width: 479px) {
    .daraja-header-inner {
        padding: 5px 8px;
        gap: 6px;
    }

    .d-header-icon-btn {
        height: 32px;
        min-width: 32px;
        padding: 0 6px;
        border-radius: 8px;
    }

    .d-h-icon {
        width: 16px;
        height: 16px;
    }

    .d-header-dropdown {
        padding: 10px;
    }

    .d-header-dropdown-item {
        padding: 10px 12px;
        font-size: 14px;
    }

    .d-header-notif-dropdown {
        width: calc(100vw - 8px) !important;
        right: -2px !important;
        max-height: 55vh;
    }

    .pos-calculator {
        width: 100%;
        max-width: 260px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED STAT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-kpi-card {
    position: relative;
    overflow: hidden;
    background: var(--d-bg-card) !important;
    border: 1px solid var(--d-border-light) !important;
    box-shadow: var(--d-shadow-sm) !important;
    border-radius: 16px;
    transition: transform var(--d-transition-fast), box-shadow var(--d-transition-fast), border-color var(--d-transition-fast);
}

.daraja-kpi-card::after {
    content: none;
}

.daraja-kpi-card:hover {
    transform: translateY(-2px);
    border-color: var(--d-primary-200) !important;
    box-shadow: var(--d-shadow-md) !important;
}

.daraja-kpi-icon {
    box-shadow: 0 10px 22px rgba(0, 156, 213, 0.16);
    border: 1px solid rgba(0, 156, 213, 0.1);
}

/* Primary Sales Card */
.tw-bg-sky-100 {
    background: linear-gradient(135deg, var(--d-primary-50), var(--d-primary-100)) !important;
}

.tw-text-sky-500 {
    color: var(--d-primary-500) !important;
}

/* Success/Net Card */
.tw-bg-green-100 {
    background: linear-gradient(135deg, var(--d-success-50), var(--d-success-100)) !important;
}

/* Warning Card */
.tw-bg-yellow-100 {
    background: linear-gradient(135deg, var(--d-warning-50), var(--d-warning-200)) !important;
}

/* Danger Card */
.tw-bg-red-100 {
    background: linear-gradient(135deg, var(--d-danger-50), var(--d-danger-200)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN CARD STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

.tw-ring-1.tw-ring-gray-200 {
    border: 1px solid var(--d-border-light) !important;
    box-shadow: var(--d-shadow-sm) !important;
    transition: all var(--d-transition-normal) !important;
}

.tw-ring-1.tw-ring-gray-200:hover {
    box-shadow: var(--d-shadow-md) !important;
    transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART CONTAINER ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.tw-border-dashed {
    border-style: solid !important;
    border-color: var(--d-border-light) !important;
    background: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WELCOME MESSAGE STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

h1.tw-text-primary-800.text-white {
    color: white !important;
    font-weight: var(--d-font-bold) !important;
    letter-spacing: -0.02em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATE FILTER BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

#dashboard_date_filter {
    background: linear-gradient(135deg, var(--d-primary-600), var(--d-teal-500)) !important;
    color: var(--d-text-inverse) !important;
    border: 1px solid rgba(var(--d-primary-500-rgb), 0.22) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(var(--d-primary-500-rgb), 0.22) !important;
    font-weight: var(--d-font-semibold) !important;
    transition: all var(--d-transition-fast) !important;
}

#dashboard_date_filter:hover {
    background: linear-gradient(135deg, var(--d-primary-500), var(--d-accent-400)) !important;
    box-shadow: 0 16px 34px rgba(var(--d-primary-500-rgb), 0.26) !important;
    transform: translateY(-1px) !important;
}

#dashboard_date_filter:focus-visible {
    outline: 2px solid rgba(var(--d-primary-500-rgb), 0.55) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(var(--d-primary-500-rgb), 0.18) !important;
}

#dashboard_date_filter span,
#dashboard_date_filter svg {
    color: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VALUE DISPLAY ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.total_sell,
.net,
.invoice_due,
.total_sell_return,
.total_purchase,
.purchase_due,
.total_purchase_return,
.total_expense {
    font-family: var(--d-font-sans) !important;
    font-weight: 700 !important;
    font-feature-settings: 'tnum' 1 !important;
    color: var(--d-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET BOX MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.box {
    border-radius: var(--d-radius-xl) !important;
    border: 1px solid var(--d-border-light) !important;
    box-shadow: var(--d-shadow-sm) !important;
    overflow: hidden !important;
}

.box-header {
    background: var(--d-gray-50) !important;
    border-bottom: 1px solid var(--d-border-light) !important;
    padding: var(--d-space-4) var(--d-space-5) !important;
}

.box-header .box-title {
    font-size: var(--d-text-base) !important;
    font-weight: var(--d-font-semibold) !important;
    color: var(--d-text-primary) !important;
}

.box-body {
    padding: var(--d-space-5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.table {
    font-family: var(--d-font-sans) !important;
}

.table > thead > tr > th {
    background: var(--d-gray-50) !important;
    font-size: var(--d-text-xs) !important;
    font-weight: var(--d-font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--d-text-secondary) !important;
    border-bottom: 1px solid var(--d-border-light) !important;
    padding: var(--d-space-3) var(--d-space-4) !important;
}

.table > tbody > tr > td {
    padding: var(--d-space-3) var(--d-space-4) !important;
    border-bottom: 1px solid var(--d-border-light) !important;
    color: var(--d-text-primary) !important;
}

.table > tbody > tr:hover {
    background: var(--d-bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
    background: linear-gradient(135deg, var(--d-primary-500) 0%, var(--d-primary-600) 100%) !important;
    border: none !important;
    border-radius: var(--d-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
    font-weight: var(--d-font-medium) !important;
    transition: all var(--d-transition-fast) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--d-primary-600) 0%, var(--d-primary-700) 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--d-success-500) 0%, var(--d-success-600) 100%) !important;
    border: none !important;
    border-radius: var(--d-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

.btn-danger {
    background: linear-gradient(135deg, var(--d-danger-500) 0%, var(--d-danger-600) 100%) !important;
    border: none !important;
    border-radius: var(--d-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

.btn-warning {
    background: linear-gradient(135deg, var(--d-warning-500) 0%, var(--d-warning-600) 100%) !important;
    border: none !important;
    border-radius: var(--d-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}

.btn-info {
    background: linear-gradient(135deg, var(--d-info-500) 0%, var(--d-info-600) 100%) !important;
    border: none !important;
    border-radius: var(--d-radius-lg) !important;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25) !important;
}

.btn-default,
.btn-secondary {
    background: var(--d-gray-100) !important;
    color: var(--d-text-primary) !important;
    border: 1px solid var(--d-border-light) !important;
    border-radius: var(--d-radius-lg) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--d-gray-200) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUT MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.form-control {
    border: 1px solid var(--d-border-default) !important;
    border-radius: var(--d-radius-lg) !important;
    padding: 0.625rem 1rem !important;
    font-family: var(--d-font-sans) !important;
    transition: all var(--d-transition-fast) !important;
}

.form-control:focus {
    border-color: var(--d-primary-500) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: none !important;
}

/* Select2 Modernization */
.select2-container--default .select2-selection--single {
    border: 1px solid var(--d-border-default) !important;
    border-radius: var(--d-radius-lg) !important;
    height: 40px !important;
    padding: 5px 10px !important;
}

.select2-container--default .select2-selection--single:focus {
    border-color: var(--d-primary-500) !important;
}

.select2-dropdown {
    border-radius: var(--d-radius-lg) !important;
    box-shadow: var(--d-shadow-lg) !important;
    border: 1px solid var(--d-border-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.label,
.badge {
    font-family: var(--d-font-sans) !important;
    font-weight: var(--d-font-medium) !important;
    border-radius: var(--d-radius-full) !important;
    padding: 0.125rem 0.625rem !important;
    font-size: var(--d-text-xs) !important;
}

.label-success,
.badge-success {
    background: var(--d-success-100) !important;
    color: var(--d-success-700) !important;
}

.label-danger,
.badge-danger {
    background: var(--d-danger-100) !important;
    color: var(--d-danger-700) !important;
}

.label-warning,
.badge-warning {
    background: var(--d-warning-100) !important;
    color: var(--d-warning-700) !important;
}

.label-info,
.badge-info {
    background: var(--d-info-100) !important;
    color: var(--d-info-700) !important;
}

.label-primary,
.badge-primary {
    background: var(--d-primary-100) !important;
    color: var(--d-primary-700) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ALERT MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.alert {
    border-radius: var(--d-radius-lg) !important;
    border: none !important;
    font-family: var(--d-font-sans) !important;
}

.alert-success {
    background: var(--d-success-50) !important;
    color: var(--d-success-800) !important;
    border-left: 4px solid var(--d-success-500) !important;
}

.alert-danger {
    background: var(--d-danger-50) !important;
    color: var(--d-danger-800) !important;
    border-left: 4px solid var(--d-danger-500) !important;
}

.alert-warning {
    background: var(--d-warning-50) !important;
    color: var(--d-warning-800) !important;
    border-left: 4px solid var(--d-warning-500) !important;
}

.alert-info {
    background: var(--d-info-50) !important;
    color: var(--d-info-800) !important;
    border-left: 4px solid var(--d-info-500) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.modal-content {
    border-radius: var(--d-radius-2xl) !important;
    border: none !important;
    box-shadow: var(--d-shadow-2xl) !important;
}

.modal-header {
    border-bottom: 1px solid var(--d-border-light) !important;
    padding: var(--d-space-5) !important;
}

.modal-title {
    font-weight: var(--d-font-semibold) !important;
    font-size: var(--d-text-lg) !important;
}

.modal-body {
    padding: var(--d-space-5) !important;
}

.modal-footer {
    border-top: 1px solid var(--d-border-light) !important;
    padding: var(--d-space-4) var(--d-space-5) !important;
    background: var(--d-gray-50) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.pagination > li > a,
.pagination > li > span {
    border-radius: var(--d-radius-md) !important;
    margin: 0 2px !important;
    border: 1px solid var(--d-border-light) !important;
    color: var(--d-text-secondary) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--d-primary-500) !important;
    border-color: var(--d-primary-500) !important;
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN MODERNIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
    border-radius: var(--d-radius-lg) !important;
    box-shadow: var(--d-shadow-lg) !important;
    border: 1px solid var(--d-border-light) !important;
    padding: var(--d-space-2) !important;
}

.dropdown-menu > li > a {
    border-radius: var(--d-radius-md) !important;
    padding: var(--d-space-2) var(--d-space-3) !important;
    color: var(--d-text-primary) !important;
    transition: all var(--d-transition-fast) !important;
}

.dropdown-menu > li > a:hover {
    background: var(--d-bg-hover) !important;
    color: var(--d-primary-600) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smooth loading animation for values */
@keyframes shimmer {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.loading-placeholder {
    animation: shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, var(--d-gray-200) 25%, var(--d-gray-100) 50%, var(--d-gray-200) 75%);
    background-size: 200% 100%;
}

/* Fade in animation for dashboard cards */
.tw-transition-all {
    animation: fadeInUp 0.4s ease-out;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .tw-text-2xl.md\:tw-text-4xl {
        font-size: 1.5rem !important;
    }
    
    .box-body {
        padding: var(--d-space-4) !important;
    }

    .daraja-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .daraja-hero-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 8px;
        border-radius: 12px;
    }

    .daraja-hero-select,
    .daraja-hero-button,
    .daraja-command-btn {
        width: 100% !important;
    }

    .daraja-hero-copy h1 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .daraja-aurora-rail__items {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD TRANSFORMATION v2.1 — Enhanced Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── SKELETON LOADERS ─── */
.daraja-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, 
        var(--d-gray-100, #f1f5f9) 0%, 
        var(--d-gray-50, #f8fafc) 50%, 
        var(--d-gray-100, #f1f5f9) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.daraja-skeleton--text {
    height: 1.2em;
    width: 80%;
    border-radius: 4px;
}

.daraja-skeleton--value {
    height: 2rem;
    width: 60%;
    border-radius: 6px;
}

.daraja-skeleton--lg {
    height: 2.5rem;
    width: 70%;
}

.daraja-skeleton--sm {
    height: 0.875rem;
    width: 50%;
}

.daraja-skeleton--circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── ANIMATED NUMBER COUNTERS ─── */
.daraja-animated-value {
    transition: opacity 0.15s ease;
}

.daraja-animated-value.is-counting {
    opacity: 0.7;
}

.daraja-value-highlight {
    animation: valueHighlight 0.6s ease-out;
}

@keyframes valueHighlight {
    0% { 
        transform: scale(1.05);
        color: var(--d-primary-500);
    }
    100% { 
        transform: scale(1);
        color: inherit;
    }
}

/* ─── LIVE PULSE ANIMATION ─── */
.daraja-live-pulse {
    position: relative;
}

.daraja-live-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    width: 6px;
    height: 6px;
    background: var(--d-success-500, #10b981);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    50% { 
        opacity: 0.6;
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

.daraja-rail-badge,
.daraja-tile-pill {
    position: relative;
    padding-left: 18px;
}

.daraja-rail-badge::before,
.daraja-tile-pill::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--d-success-400, #34d399);
    border-radius: 50%;
    transform: translateY(-50%);
    animation: livePulse 2s ease-in-out infinite;
}

/* ─── FINANCIAL HEALTH SCORE GAUGE ─── */
.daraja-health-gauge {
    --health-score: 0;
    --gauge-size: 140px;
    position: relative;
    width: var(--gauge-size);
    height: calc(var(--gauge-size) / 2 + 20px);
    margin: 0 auto;
}

.daraja-health-gauge-arc {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--gauge-size);
    height: calc(var(--gauge-size) / 2);
    overflow: hidden;
}

.daraja-health-gauge-arc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--gauge-size);
    height: var(--gauge-size);
    border-radius: 50%;
    border: 12px solid transparent;
    border-bottom-color: var(--d-gray-200, #e2e8f0);
    border-left-color: var(--d-gray-200, #e2e8f0);
    transform: rotate(-45deg);
    box-sizing: border-box;
}

.daraja-health-gauge-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--gauge-size);
    height: var(--gauge-size);
    border-radius: 50%;
    border: 12px solid transparent;
    border-bottom-color: var(--d-primary-500, #009CD5);
    border-left-color: var(--d-primary-500, #009CD5);
    transform: rotate(calc(-45deg + (var(--health-score) * 1.8deg)));
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.daraja-health-gauge-fill[data-level="good"] {
    border-bottom-color: var(--d-success-500, #10b981);
    border-left-color: var(--d-success-500, #10b981);
}

.daraja-health-gauge-fill[data-level="warning"] {
    border-bottom-color: var(--d-warning-500, #f59e0b);
    border-left-color: var(--d-warning-500, #f59e0b);
}

.daraja-health-gauge-fill[data-level="danger"] {
    border-bottom-color: var(--d-danger-500, #ef4444);
    border-left-color: var(--d-danger-500, #ef4444);
}

.daraja-health-gauge-center {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.daraja-health-gauge-score {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--d-text-primary);
    font-family: var(--d-font-mono);
}

.daraja-health-gauge-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--d-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ─── ACTIONABLE INSIGHT CARDS ─── */
.daraja-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--d-bg-card);
    border: 1px solid var(--d-border-light);
    border-left: 4px solid var(--insight-color, var(--d-primary-500));
    border-radius: 12px;
    transition: all 0.2s ease;
}

.daraja-insight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--insight-color, var(--d-primary-300));
}

.daraja-insight-card[data-type="alert"] {
    --insight-color: var(--d-warning-500, #f59e0b);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), transparent);
}

.daraja-insight-card[data-type="opportunity"] {
    --insight-color: var(--d-success-500, #10b981);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), transparent);
}

.daraja-insight-card[data-type="urgent"] {
    --insight-color: var(--d-danger-500, #ef4444);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), transparent);
}

.daraja-insight-card[data-type="info"] {
    --insight-color: var(--d-primary-500, #009CD5);
    background: linear-gradient(135deg, rgba(0, 156, 213, 0.04), transparent);
}

.daraja-insight-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(var(--d-primary-500-rgb), 0.1);
    color: var(--insight-color, var(--d-primary-500));
}

.daraja-insight-card[data-type="alert"] .daraja-insight-icon {
    background: rgba(245, 158, 11, 0.12);
}

.daraja-insight-card[data-type="opportunity"] .daraja-insight-icon {
    background: rgba(16, 185, 129, 0.12);
}

.daraja-insight-card[data-type="urgent"] .daraja-insight-icon {
    background: rgba(239, 68, 68, 0.12);
}

.daraja-insight-content {
    flex: 1;
    min-width: 0;
}

.daraja-insight-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--d-text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

.daraja-insight-desc {
    font-size: 0.8rem;
    color: var(--d-text-secondary);
    margin: 0;
    line-height: 1.4;
}

.daraja-insight-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.daraja-insight-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 8px;
    border: 1px solid var(--d-border-light);
    background: var(--d-bg-hover);
    color: var(--d-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.daraja-insight-btn:hover {
    background: var(--d-primary-50);
    border-color: var(--d-primary-300);
    color: var(--d-primary-700);
}

.daraja-insight-btn--primary {
    background: var(--d-primary-500);
    border-color: var(--d-primary-500);
    color: var(--d-text-inverse);
}

.daraja-insight-btn--primary:hover {
    background: var(--d-primary-600);
    border-color: var(--d-primary-600);
    color: var(--d-text-inverse);
}

/* ─── ACTIVITY TIMELINE ─── */
.daraja-activity-timeline {
    position: relative;
    padding-left: 24px;
}

.daraja-activity-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--d-primary-200), var(--d-gray-200));
    border-radius: 1px;
}

.daraja-timeline-item {
    position: relative;
    padding: 8px 0;
    display: flex;
    gap: 12px;
}

.daraja-timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 14px;
    width: 10px;
    height: 10px;
    background: var(--d-bg-card);
    border: 2px solid var(--d-primary-500);
    border-radius: 50%;
    z-index: 1;
}

.daraja-timeline-item[data-type="sell"]::before {
    border-color: var(--d-primary-500);
}

.daraja-timeline-item[data-type="purchase"]::before {
    border-color: var(--d-accent-500);
}

.daraja-timeline-item[data-type="expense"]::before {
    border-color: var(--d-warning-500);
}

.daraja-timeline-item[data-type="payment"]::before {
    border-color: var(--d-success-500);
    background: var(--d-success-500);
}

.daraja-timeline-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--d-text-tertiary);
    min-width: 50px;
    font-family: var(--d-font-mono);
}

.daraja-timeline-content {
    flex: 1;
    min-width: 0;
}

.daraja-timeline-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--d-text-primary);
    margin: 0;
    line-height: 1.3;
}

.daraja-timeline-meta {
    font-size: 0.75rem;
    color: var(--d-text-tertiary);
    margin-top: 2px;
}

.daraja-timeline-amount {
    font-weight: 700;
    color: var(--d-text-primary);
    font-family: var(--d-font-mono);
}

/* ─── MICRO INTERACTIONS ─── */
.cockpit-card {
    position: relative;
    overflow: hidden;
}

.cockpit-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(0, 156, 213, 0.03) 0%, 
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cockpit-card:hover::before {
    opacity: 1;
}

.cockpit-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--d-primary-500), var(--d-accent-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.cockpit-card:hover::after {
    transform: scaleX(1);
}

/* Card accent variations */
.cockpit-card:nth-child(1)::after { background: linear-gradient(90deg, var(--d-primary-500), var(--d-primary-600)); }
.cockpit-card:nth-child(2)::after { background: linear-gradient(90deg, var(--d-warning-500), var(--d-warning-400)); }
.cockpit-card:nth-child(3)::after { background: linear-gradient(90deg, var(--d-accent-500), var(--d-accent-600)); }
.cockpit-card:nth-child(4)::after { background: linear-gradient(90deg, var(--d-success-500), var(--d-success-600)); }
.cockpit-card:nth-child(5)::after { background: linear-gradient(90deg, var(--d-danger-500), var(--d-danger-400)); }
.cockpit-card:nth-child(6)::after { background: linear-gradient(90deg, var(--d-primary-600), var(--d-accent-500)); }
.cockpit-card:nth-child(7)::after { background: linear-gradient(90deg, var(--d-success-600), var(--d-success-500)); }

/* ─── HEALTH SUMMARY CARD ─── */
.daraja-health-card {
    padding: 20px;
    background: linear-gradient(135deg, 
        rgba(0, 156, 213, 0.06) 0%, 
        rgba(138, 96, 194, 0.04) 50%,
        rgba(255, 255, 255, 1) 100%);
    border: 1px solid var(--d-border-light);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
}

.daraja-health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.daraja-health-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--d-text-primary);
    margin: 0;
}

.daraja-health-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    background: var(--d-success-100);
    color: var(--d-success-700);
}

.daraja-health-status[data-level="warning"] {
    background: var(--d-warning-100);
    color: var(--d-warning-700);
}

.daraja-health-status[data-level="danger"] {
    background: var(--d-danger-100);
    color: var(--d-danger-700);
}

.daraja-health-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.daraja-health-metric {
    text-align: center;
    padding: 10px 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border: 1px solid var(--d-border-light);
}

.daraja-health-metric-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--d-text-primary);
    font-family: var(--d-font-mono);
}

.daraja-health-metric-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--d-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ─── INSIGHTS STACK ─── */
.daraja-insights-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daraja-insights-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.daraja-insights-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--d-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.daraja-insights-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 800;
    background: var(--d-primary-500);
    color: var(--d-text-inverse);
    border-radius: 999px;
}

/* ─── DELTA BADGE ENHANCEMENTS ─── */
.delta-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--d-font-mono);
    transition: all 0.3s ease;
}

.delta-badge[data-direction="up"] {
    background: rgba(16, 185, 129, 0.12);
    color: var(--d-success-600);
}

.delta-badge[data-direction="down"] {
    background: rgba(239, 68, 68, 0.12);
    color: var(--d-danger-600);
}

.delta-badge[data-direction="flat"] {
    background: var(--d-gray-100);
    color: var(--d-text-tertiary);
}

.delta-badge.is-animating {
    animation: deltaPop 0.4s ease-out;
}

@keyframes deltaPop {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ─── EMPTY STATES ─── */
.daraja-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    color: var(--d-text-tertiary);
}

.daraja-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.daraja-empty-text {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.daraja-empty-hint {
    font-size: 0.8rem;
    margin-top: 4px;
    opacity: 0.7;
}

/* ─── RESPONSIVE ADJUSTMENTS ─── */
@media (max-width: 768px) {
    .daraja-health-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .daraja-insights-stack {
        gap: 10px;
    }
    
    .daraja-insight-card {
        padding: 12px;
    }
    
    .daraja-health-gauge {
        --gauge-size: 120px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN CHART CARDS — Clean & Premium
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-chart-card {
    background: var(--d-bg-card, #FFFFFF);
    border-radius: 24px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.03),
        0 1px 3px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.daraja-chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--d-primary-500, #009CD5), var(--d-primary-400, #00B4E6));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.daraja-chart-card:hover::before {
    opacity: 1;
}

.daraja-chart-card:hover {
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
    border-color: rgba(0, 156, 213, 0.2);
}

/* Second card gets accent gradient */
.daraja-chart-card:nth-child(2)::before {
    background: linear-gradient(90deg, var(--d-accent-500, #8A60C2), var(--d-accent-400, #A370E0));
}

.daraja-chart-card:nth-child(2):hover {
    border-color: rgba(138, 96, 194, 0.2);
}

.daraja-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px 0;
    position: relative;
}

.daraja-chart-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.daraja-chart-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--d-primary-50, #E6F7FC), var(--d-primary-100, #CCF0FA));
    color: var(--d-primary-600, #0284c7);
    box-shadow: 
        0 4px 12px rgba(0, 156, 213, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.daraja-chart-card:hover .daraja-chart-icon {
    transform: scale(1.05);
    box-shadow: 
        0 6px 16px rgba(0, 156, 213, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.daraja-chart-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.2;
}

.daraja-chart-card:nth-child(2) .daraja-chart-icon {
    background: linear-gradient(145deg, var(--d-accent-50, #F5F0FA), var(--d-accent-100, #EBE0F5));
    color: var(--d-accent-600, #7c3aed);
    box-shadow: 
        0 4px 12px rgba(138, 96, 194, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.daraja-chart-card:nth-child(2):hover .daraja-chart-icon {
    box-shadow: 
        0 6px 16px rgba(138, 96, 194, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.daraja-chart-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--d-text-primary, #1E293B);
    margin: 0;
    letter-spacing: -0.01em;
}

.daraja-chart-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--d-text-tertiary, #94A3B8);
    margin: 4px 0 0;
}

/* Stats row under header */
.daraja-chart-stats {
    display: flex;
    gap: 32px;
    padding: 20px 28px;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0.5), transparent);
}

.daraja-chart-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daraja-chart-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--d-text-tertiary, #94A3B8);
}

.daraja-chart-stat-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--d-font-mono, 'SFMono-Regular', Consolas, monospace);
    color: var(--d-text-primary, #1E293B);
}

.daraja-chart-stat-value.positive {
    color: var(--d-success-600, #059669);
}

.daraja-chart-stat-value.negative {
    color: var(--d-danger-600, #dc2626);
}

/* Chart container */
.daraja-chart-body {
    padding: 16px 28px 28px;
    position: relative;
}

.daraja-chart-container {
    width: 100%;
    min-height: 200px;
    position: relative;
    border-radius: 12px;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0.3), transparent);
}

.daraja-chart-svg {
    width: 100%;
    height: 200px;
    display: block;
}

/* Empty state */
.daraja-chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 40px 20px;
    color: var(--d-text-tertiary, #94A3B8);
    gap: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
    border-radius: 16px;
    border: 2px dashed var(--d-border-light, #E2E8F0);
}

.daraja-chart-empty-icon {
    width: 64px;
    height: 64px;
    opacity: 0.4;
    color: var(--d-primary-400, #38BDF8);
}

.daraja-chart-empty-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--d-text-secondary, #64748B);
    text-align: center;
}

/* Legend styles */
.daraja-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 28px 24px;
    border-top: 1px solid var(--d-border-light, #E2E8F0);
    background: linear-gradient(to bottom, var(--d-gray-50, #F8FAFC), var(--d-bg-card, #FFFFFF));
}

.daraja-chart-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--d-bg-card, #FFFFFF);
    border: 1px solid var(--d-border-light, #E2E8F0);
    transition: all 0.2s ease;
}

.daraja-chart-legend-item:hover {
    border-color: var(--d-primary-300, #7DD3FC);
    box-shadow: 0 2px 8px rgba(0, 156, 213, 0.1);
}

.daraja-chart-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.daraja-chart-legend-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--d-text-secondary, #475569);
}

.daraja-chart-legend-value {
    font-size: 0.85rem;
    font-weight: 800;
    font-family: var(--d-font-mono, 'SFMono-Regular', Consolas, monospace);
    color: var(--d-text-primary, #1E293B);
    margin-left: 6px;
}

/* Charts grid */
.daraja-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
    gap: 28px;
    margin-top: 28px;
}

/* Responsive chart adjustments */
@media (max-width: 768px) {
    .daraja-chart-card {
        border-radius: 20px;
    }
    
    .daraja-chart-header {
        padding: 20px 20px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .daraja-chart-icon {
        width: 46px;
        height: 46px;
    }
    
    .daraja-chart-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .daraja-chart-title {
        font-size: 1.05rem;
    }
    
    .daraja-chart-stats {
        padding: 16px 20px;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .daraja-chart-body {
        padding: 16px 20px 20px;
    }
    
    .daraja-chart-legend {
        padding: 16px 20px 20px;
        gap: 12px;
    }
    
    .daraja-chart-legend-item {
        padding: 6px 10px;
    }
    
    .daraja-chart-container {
        min-height: 180px;
    }
    
    .daraja-charts-row {
        gap: 20px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN METRICS CARDS — Premium Dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 32px 0;
}

.daraja-metric-card {
    position: relative;
    background: var(--d-bg-card, #FFFFFF);
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.03),
        0 1px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    color: inherit;
    display: block;
}

.daraja-metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--d-primary-500, #009CD5), var(--d-primary-400, #00B4E6));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.daraja-metric-card:hover::before {
    opacity: 1;
}

.daraja-metric-card:hover {
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
    border-color: rgba(0, 156, 213, 0.2);
}

/* Card accent variations */
.daraja-metric-card:nth-child(1)::before { background: linear-gradient(90deg, var(--d-primary-500, #009CD5), var(--d-primary-600, #0284C7)); }
.daraja-metric-card:nth-child(2)::before { background: linear-gradient(90deg, var(--d-warning-500, #F59E0B), var(--d-warning-400, #FBBF24)); }
.daraja-metric-card:nth-child(3)::before { background: linear-gradient(90deg, var(--d-accent-500, #8B5CF6), var(--d-accent-600, #7C3AED)); }
.daraja-metric-card:nth-child(4)::before { background: linear-gradient(90deg, var(--d-success-500, #10B981), var(--d-success-600, #059669)); }
.daraja-metric-card:nth-child(5)::before { background: linear-gradient(90deg, var(--d-danger-500, #EF4444), var(--d-danger-400, #F87171)); }
.daraja-metric-card:nth-child(6)::before { background: linear-gradient(90deg, var(--d-primary-600, #0284C7), var(--d-accent-500, #8B5CF6)); }
.daraja-metric-card:nth-child(7)::before { background: linear-gradient(90deg, var(--d-success-600, #059669), var(--d-success-500, #10B981)); }

.daraja-metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    margin-bottom: 16px;
}

.daraja-metric-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.daraja-metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--d-primary-50, #E6F7FC), var(--d-primary-100, #CCF0FA));
    color: var(--d-primary-600, #0284c7);
    box-shadow: 
        0 4px 12px rgba(0, 156, 213, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.daraja-metric-card:hover .daraja-metric-icon {
    transform: scale(1.05);
    box-shadow: 
        0 6px 16px rgba(0, 156, 213, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.daraja-metric-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.daraja-metric-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--d-text-primary, #1E293B);
    margin: 0;
    letter-spacing: -0.01em;
}

.daraja-metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--d-gray-100, #F1F5F9);
    color: var(--d-text-secondary, #475569);
    transition: all 0.2s ease;
}

.daraja-metric-card:hover .daraja-metric-badge {
    background: var(--d-primary-100, #CCF0FA);
    color: var(--d-primary-700, #0369A1);
}

.daraja-metric-badge--positive {
    background: var(--d-success-100, #DCFCE7);
    color: var(--d-success-700, #047857);
}

.daraja-metric-badge--negative {
    background: var(--d-danger-100, #FEE2E2);
    color: var(--d-danger-700, #B91C1C);
}

.daraja-metric-body {
    padding: 0 24px 20px;
}

.daraja-metric-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--d-text-primary, #1E293B);
    line-height: 1.1;
    margin: 0;
    font-family: var(--d-font-mono, 'SFMono-Regular', Consolas, monospace);
    letter-spacing: -0.02em;
}

.daraja-metric-subvalues {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0 20px;
}

.daraja-metric-subvalue {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.daraja-metric-subvalue-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--d-text-tertiary, #94A3B8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.daraja-metric-subvalue-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--d-text-primary, #1E293B);
    font-family: var(--d-font-mono, 'SFMono-Regular', Consolas, monospace);
}

.daraja-metric-chart {
    height: 60px;
    margin: 16px 0 0;
    border-radius: 8px;
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0.5), transparent);
    position: relative;
    overflow: hidden;
}

.daraja-metric-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--d-border-light, #E2E8F0);
    background: linear-gradient(to bottom, var(--d-gray-50, #F8FAFC), var(--d-bg-card, #FFFFFF));
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--d-primary-600, #0284c7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.daraja-metric-card:hover .daraja-metric-action {
    color: var(--d-primary-700, #0369A1);
    background: linear-gradient(to bottom, var(--d-primary-50, #E6F7FC), var(--d-bg-card, #FFFFFF));
}

/* Icon color variations */
.daraja-metric-icon--revenue {
    background: linear-gradient(145deg, var(--d-primary-50), var(--d-primary-100));
    color: var(--d-primary-600);
}

.daraja-metric-icon--receivables {
    background: linear-gradient(145deg, var(--d-warning-50, #FFFBEB), var(--d-warning-100, #FEF3C7));
    color: var(--d-warning-600, #D97706);
}

.daraja-metric-icon--purchases {
    background: linear-gradient(145deg, var(--d-accent-50), var(--d-accent-100));
    color: var(--d-accent-600);
}

.daraja-metric-icon--inventory {
    background: linear-gradient(145deg, var(--d-success-50, #F0FDF4), var(--d-success-100, #DCFCE7));
    color: var(--d-success-600, #059669);
}

.daraja-metric-icon--alerts {
    background: linear-gradient(145deg, var(--d-danger-50, #FEF2F2), var(--d-danger-100, #FEE2E2));
    color: var(--d-danger-600, #DC2626);
}

.daraja-metric-icon--profit {
    background: linear-gradient(145deg, var(--d-emerald-50, #ECFDF5), var(--d-emerald-100, #D1FAE5));
    color: var(--d-emerald-600, #059669);
}

.daraja-metric-icon--cash {
    background: linear-gradient(145deg, var(--d-indigo-50, #EEF2FF), var(--d-indigo-100, #E0E7FF));
    color: var(--d-indigo-600, #4F46E5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .daraja-metrics-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0;
    }
    
    .daraja-metric-card {
        border-radius: 16px;
    }
    
    .daraja-metric-header {
        padding: 20px 20px 0;
    }
    
    .daraja-metric-body {
        padding: 0 20px 16px;
    }
    
    .daraja-metric-value {
        font-size: 1.8rem;
    }
    
    .daraja-metric-subvalues {
        gap: 12px;
        margin: 12px 0 16px;
    }
    
    .daraja-metric-action {
        padding: 12px 20px 20px;
        font-size: 0.8rem;
    }
}

.daraja-table-card {
    background: var(--d-bg-card, #FFFFFF);
    border-radius: 20px;
    border: 1px solid var(--d-border-light, #E2E8F0);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.03),
        0 1px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.3s ease;
}

.daraja-table-card:hover {
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODERN FILTER TOOLBAR — Premium Date & Location Controls
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    margin: 24px 0 32px 0;
}

.daraja-filter-chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.daraja-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--d-gray-100, #F1F5F9), var(--d-gray-50, #F8FAFC));
    border: 1px solid var(--d-border-light, #E2E8F0);
    color: var(--d-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.daraja-filter-chip:hover {
    background: linear-gradient(135deg, var(--d-gray-200, #E2E8F0), var(--d-gray-100, #F1F5F9));
    border-color: var(--d-primary-300, #7DD3FC);
    color: var(--d-text-primary, #1E293B);
    transform: translateY(-1px);
}

.daraja-filter-chip.active {
    background: linear-gradient(135deg, var(--d-primary-500, #009CD5), var(--d-primary-600, #0369A1));
    border-color: var(--d-primary-600, #0369A1);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 156, 213, 0.25);
}

.daraja-filter-chip.active:hover {
    background: linear-gradient(135deg, var(--d-primary-600, #0369A1), var(--d-primary-700, #0284c7));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 156, 213, 0.3);
}

/* Filter Controls Container */
.daraja-filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Location Selector */
.daraja-hero-select {
    border-radius: 12px !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--d-gray-100, #F1F5F9), var(--d-gray-50, #F8FAFC)) !important;
    color: var(--d-text-secondary, #475569) !important;
    transition: all 0.25s ease !important;
    max-width: 280px !important;
}

.daraja-hero-select:hover {
    border-color: var(--d-primary-300, #7DD3FC) !important;
    background: linear-gradient(135deg, var(--d-gray-200, #E2E8F0), var(--d-gray-100, #F1F5F9)) !important;
}

.daraja-hero-select:focus {
    border-color: var(--d-primary-500, #009CD5) !important;
    box-shadow: 0 0 0 3px rgba(0, 156, 213, 0.1) !important;
    background: white !important;
}

/* Date Filter Button */
#dashboard_date_filter {
    border-radius: 12px !important;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    background: linear-gradient(135deg, var(--d-gray-100, #F1F5F9), var(--d-gray-50, #F8FAFC)) !important;
    color: var(--d-text-secondary, #475569) !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

#dashboard_date_filter:hover {
    border-color: var(--d-primary-300, #7DD3FC) !important;
    background: linear-gradient(135deg, var(--d-gray-200, #E2E8F0), var(--d-gray-100, #F1F5F9)) !important;
    color: var(--d-text-primary, #1E293B) !important;
    transform: translateY(-1px);
}

#dashboard_date_filter:focus {
    border-color: var(--d-primary-500, #009CD5) !important;
    box-shadow: 0 0 0 3px rgba(0, 156, 213, 0.1) !important;
    background: white !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .daraja-filter-toolbar {
        gap: 16px;
        padding: 16px 0;
        margin: 20px 0 24px 0;
    }
    
    .daraja-filter-controls {
        gap: 10px;
    }
}

@media (max-width: 640px) {
    .daraja-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .daraja-filter-chip-group {
        width: 100%;
    }
    
    .daraja-filter-controls {
        width: 100%;
        gap: 8px;
    }
    
    .daraja-hero-select {
        flex: 1 !important;
        max-width: none !important;
    }
    
    #dashboard_date_filter {
        flex: 1;
    }
}

/* Card Header */
.daraja-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--d-border-light, #E2E8F0);
    background: linear-gradient(to bottom, var(--d-bg-card, #FFFFFF), var(--d-gray-50, #F8FAFC));
}

.daraja-table-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.daraja-table-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.daraja-table-icon svg {
    width: 22px;
    height: 22px;
}

/* Icon color variants */
.daraja-table-icon--warning {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #D97706;
}

.daraja-table-icon--danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    color: #DC2626;
}

.daraja-table-icon--info {
    background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
    color: #2563EB;
}

.daraja-table-icon--success {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #059669;
}

.daraja-table-icon--primary {
    background: linear-gradient(135deg, var(--d-primary-50, #E6F7FC), var(--d-primary-100, #CCF0FA));
    color: var(--d-primary-600, #0284c7);
}

.daraja-table-icon--purple {
    background: linear-gradient(135deg, var(--d-accent-50, #F5F0FA), var(--d-accent-100, #EBE0F5));
    color: var(--d-accent-600, #7c3aed);
}

.daraja-table-title-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.daraja-table-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--d-text-primary, #1E293B);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.daraja-table-subtitle {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--d-text-tertiary, #94A3B8);
    margin: 0;
}

/* Badge for count or status */
.daraja-table-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--d-gray-100, #F1F5F9);
    color: var(--d-text-secondary, #475569);
}

.daraja-table-badge--warning {
    background: #FEF3C7;
    color: #92400E;
}

.daraja-table-badge--danger {
    background: #FEE2E2;
    color: #991B1B;
}

/* Filter/Actions area */
.daraja-table-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.daraja-table-actions .form-control,
.daraja-table-actions .select2-container {
    min-width: 180px;
    max-width: 220px;
}

/* Table Body */
.daraja-table-body {
    padding: 0;
}

/* Override DataTables default styling */
.daraja-table-card .dataTables_wrapper {
    padding: 16px 20px 20px;
}

.daraja-table-card .dataTables_wrapper .dataTables_length,
.daraja-table-card .dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.daraja-table-card .dataTables_wrapper .dataTables_length label,
.daraja-table-card .dataTables_wrapper .dataTables_filter label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--d-text-secondary, #475569);
}

.daraja-table-card .dataTables_wrapper .dataTables_length select {
    padding: 6px 28px 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--d-border-light, #E2E8F0);
    font-size: 0.85rem;
    margin: 0 6px;
}

.daraja-table-card .dataTables_wrapper .dataTables_filter input {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--d-border-light, #E2E8F0);
    font-size: 0.85rem;
    min-width: 200px;
    transition: all 0.2s ease;
}

.daraja-table-card .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--d-primary-400, #38bdf8);
    box-shadow: 0 0 0 3px rgba(0, 156, 213, 0.1);
    outline: none;
}

/* Table styling */
.daraja-table-card table.dataTable {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.daraja-table-card table.dataTable thead th {
    background: var(--d-gray-50, #F8FAFC);
    border-bottom: 2px solid var(--d-border-light, #E2E8F0);
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--d-text-secondary, #475569);
    white-space: nowrap;
}

.daraja-table-card table.dataTable thead th:first-child {
    border-radius: 10px 0 0 0;
}

.daraja-table-card table.dataTable thead th:last-child {
    border-radius: 0 10px 0 0;
}

.daraja-table-card table.dataTable tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--d-border-light, #E2E8F0);
    color: var(--d-text-primary, #1E293B);
    vertical-align: middle;
}

.daraja-table-card table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

.daraja-table-card table.dataTable tbody tr:hover td {
    background: var(--d-gray-50, #F8FAFC);
}

/* Empty state */
.daraja-table-card .dataTables_empty,
.daraja-table-card table.dataTable tbody td.dataTables_empty {
    padding: 48px 24px !important;
    text-align: center;
    color: var(--d-text-tertiary, #94A3B8);
    font-size: 0.9rem;
    background: transparent !important;
}

/* Pagination styling */
.daraja-table-card .dataTables_wrapper .dataTables_paginate {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--d-border-light, #E2E8F0);
}

.daraja-table-card .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 8px;
    border: 1px solid var(--d-border-light, #E2E8F0) !important;
    background: var(--d-bg-card, #FFFFFF) !important;
    color: var(--d-text-secondary, #475569) !important;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.daraja-table-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--d-gray-50, #F8FAFC) !important;
    border-color: var(--d-gray-300, #CBD5E1) !important;
    color: var(--d-text-primary, #1E293B) !important;
}

.daraja-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--d-primary-500, #009CD5) !important;
    border-color: var(--d-primary-500, #009CD5) !important;
    color: white !important;
}

.daraja-table-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.daraja-table-card .dataTables_wrapper .dataTables_info {
    font-size: 0.8rem;
    color: var(--d-text-tertiary, #94A3B8);
    padding-top: 16px;
}

/* Table grid layout */
.daraja-tables-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.daraja-tables-grid .daraja-table-card--full {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .daraja-tables-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .daraja-table-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .daraja-table-actions {
        width: 100%;
    }
    
    .daraja-table-actions .form-control,
    .daraja-table-actions .select2-container {
        width: 100% !important;
        max-width: none;
    }
    
    .daraja-table-card .dataTables_wrapper {
        padding: 12px 16px 16px;
    }
    
    .daraja-table-card table.dataTable thead th,
    .daraja-table-card table.dataTable tbody td {
        padding: 10px 12px;
    }
}

/* Action buttons in tables */
.daraja-table-card .btn-xs {
    padding: 4px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
}

.daraja-table-card .btn-group .btn-xs {
    border-radius: 0;
}

.daraja-table-card .btn-group .btn-xs:first-child {
    border-radius: 6px 0 0 6px;
}

.daraja-table-card .btn-group .btn-xs:last-child {
    border-radius: 0 6px 6px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE — Dashboard Quick-Action Overlay
   Hidden by default; shown via .active class toggled by JS (home.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.daraja-command-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.daraja-command-overlay.active {
    display: flex;
}

.daraja-command-card {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: daraja-cmdk-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes daraja-cmdk-enter {
    from { opacity: 0; transform: scale(0.96) translateY(-8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.daraja-command-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.daraja-command-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.daraja-command-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s;
}

.daraja-command-close:hover {
    background: #e2e8f0;
    color: #334155;
}

.daraja-hotkey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    line-height: 1.6;
}

.daraja-command-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.daraja-command-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #1e293b;
    background: transparent;
}

.daraja-command-input input::placeholder {
    color: #94a3b8;
}

.daraja-command-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
}

.daraja-command-empty {
    padding: 24px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.daraja-command-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
}

.daraja-command-item:hover,
.daraja-command-item.is-active {
    background: #f1f5f9;
}

.daraja-command-btn {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(241,245,249,0.9));
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.daraja-command-btn:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}