{{--
    ═══════════════════════════════════════════════════════════════
    SHARED DASHBOARD STYLES — KKD
    Paste blok <style> ini di SETIAP dashboard:
      - resources/views/admin/dashboard.blade.php
      - resources/views/dokter/dashboard.blade.php
      - resources/views/petugas/dashboard.blade.php

    Dengan begini semua dashboard pakai warna & komponen yang sama.
    ═══════════════════════════════════════════════════════════════
--}}
<style>
    /* ── CSS Variables — Light Mode ─────────────────────────────── */
    :root {
        --card-bg           : #ffffff;
        --card-border       : #e2e8f0;
        --card-shadow       : 0 1px 4px rgba(15,23,42,.07), 0 0 0 1px rgba(15,23,42,.03);
        --card-shadow-hover : 0 8px 24px rgba(15,23,42,.10), 0 0 0 1px rgba(20,184,166,.15);
        --accent-grad       : linear-gradient(90deg, #0d9488, #06b6d4);
        --accent-primary    : #0d9488;
        --accent-light      : #ccfbf1;
        --text-heading      : #0f172a;
        --text-body         : #334155;
        --text-muted        : #64748b;
    }

    /* ── CSS Variables — Dark Mode ──────────────────────────────── */
    .dark {
        --card-bg           : #1e293b;
        --card-border       : #334155;
        --card-shadow       : 0 1px 4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.15);
        --card-shadow-hover : 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(20,184,166,.2);
        --accent-primary    : #2dd4bf;
        --accent-light      : rgba(20,184,166,.15);
        --text-heading      : #f8fafc;
        --text-body         : #cbd5e1;
        --text-muted        : #94a3b8;
    }

    * { font-family: 'Plus Jakarta Sans', sans-serif; }
    .mono { font-family: 'JetBrains Mono', monospace; }

    /* ── Base Card ──────────────────────────────────────────────── */
    .dashboard-card {
        background   : var(--card-bg);
        border       : 1px solid var(--card-border);
        box-shadow   : var(--card-shadow);
        border-radius: 14px;
        padding      : 1.25rem;
        transition   : box-shadow .2s, border-color .2s;
    }
    .dashboard-card:hover { box-shadow: var(--card-shadow-hover); }

    /* ── Stat Card (top accent bar) ─────────────────────────────── */
    .stat-card { position: relative; overflow: hidden; }
    .stat-card::before {
        content   : '';
        position  : absolute;
        top: 0; left: 0; right: 0;
        height    : 3px;
        background: var(--accent-grad);
        border-radius: 14px 14px 0 0;
    }
    .stat-num {
        font-size  : 2.125rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -.03em;
        color: var(--text-heading);
    }

    /* ── Icon Wrap — teal by default ────────────────────────────── */
    .icon-wrap {
        width : 46px; height: 46px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        background: var(--accent-light);
    }
    .icon-wrap svg { color: var(--accent-primary); width: 20px; height: 20px; }

    /* Semantic overrides — hanya untuk status, bukan estetika */
    .icon-wrap.danger { background: #fef2f2; }
    .dark .icon-wrap.danger { background: rgba(239,68,68,.15); }
    .icon-wrap.danger svg { color: #ef4444; }

    .icon-wrap.warning { background: #fffbeb; }
    .dark .icon-wrap.warning { background: rgba(245,158,11,.15); }
    .icon-wrap.warning svg { color: #f59e0b; }

    /* ── KPI Bar ────────────────────────────────────────────────── */
    .kpi-bar-track {
        height    : 5px;
        background: #e2e8f0;
        border-radius: 999px;
        overflow  : hidden;
    }
    .dark .kpi-bar-track { background: #334155; }
    .kpi-bar-fill {
        height    : 100%;
        background: var(--accent-grad);
        border-radius: 999px;
        transition: width 1.2s cubic-bezier(.4,0,.2,1);
    }

    /* ── Action Card ─────────────────────────────────────────────  */
    .action-card {
        display: flex; align-items: center;
        gap: 1rem;
        text-decoration: none;
        transition: transform .15s, box-shadow .15s;
    }
    .action-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
    .action-card:hover .action-icon { transform: scale(1.08); }
    .action-icon {
        flex-shrink  : 0;
        width: 44px; height: 44px;
        min-width: 44px; min-height: 44px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        background: var(--accent-light);
        transition: transform .2s;
    }
    .action-icon svg { width: 20px; height: 20px; color: var(--accent-primary); }

    /* ── Table Row ───────────────────────────────────────────────── */
    .table-row {
        display: flex; align-items: center; gap: .75rem;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--card-border);
        transition: background .15s;
    }
    .table-row:last-child { border-bottom: none; }
    .table-row:hover { background: #f8fafc; }
    .dark .table-row:hover { background: rgba(255,255,255,.03); }

    /* ── Badge ───────────────────────────────────────────────────── */
    .badge {
        display: inline-flex; align-items: center;
        padding: .2rem .55rem;
        border-radius: 999px;
        font-size: .7rem; font-weight: 700; letter-spacing: .02em;
    }

    /* ── Alert Row ───────────────────────────────────────────────── */
    .alert-item {
        display: flex; align-items: flex-start; gap: .75rem;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--card-border);
        transition: background .15s;
    }
    .alert-item:last-child { border-bottom: none; }
    .alert-item:hover { background: #f8fafc; }
    .dark .alert-item:hover { background: rgba(255,255,255,.03); }

    /* ── Section Label ───────────────────────────────────────────── */
    .sec-title {
        font-size: .75rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--text-muted);
    }

    /* ── Legend Dot (chart) ──────────────────────────────────────── */
    .doughnut-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }

    /* ── Count Up ────────────────────────────────────────────────── */
    .count-up { display: inline-block; }

    /* ── Gradient Text ───────────────────────────────────────────── */
    .grad-text {
        background: var(--accent-grad);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ── Slide-up animation ──────────────────────────────────────── */
    @keyframes slideUp {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .anim-up                    { animation: slideUp .4s ease both; }
    .anim-up:nth-child(2)       { animation-delay: .06s; }
    .anim-up:nth-child(3)       { animation-delay: .12s; }
    .anim-up:nth-child(4)       { animation-delay: .18s; }
    .anim-up:nth-child(5)       { animation-delay: .24s; }
    .anim-up:nth-child(6)       { animation-delay: .30s; }

    /* ── Chart color palette — teal/cyan unified ─────────────────── */
    /* Gunakan array ini di setiap Chart.js bar chart:
    backgroundColor: [
        'rgba(13,148,136,.80)',   teal-600
        'rgba(20,184,166,.80)',   teal-500
        'rgba(45,212,191,.80)',   teal-400
        'rgba(6,182,212,.80)',    cyan-500
        'rgba(8,145,178,.80)',    cyan-600
        'rgba(14,116,144,.80)',   cyan-700
        'rgba(100,116,139,.75)',  slate-500
    ],
    */
</style>