/* ============================================================
   DASHBOARD.CSS — Modern Dashboard SIARAN
   Plus Jakarta Sans · Indigo/Emerald/Amber palette
   ============================================================ */

/* ========================
   AUTO INSIGHT BAR
   ======================== */
.insight-bar {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid rgba(67,126,180,0.2);
    box-shadow: 0 4px 20px rgba(67,126,180,0.12);
    animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.25s both;
}
body.dark-mode .insight-bar {
    background: linear-gradient(135deg, #060a12 0%, #0d1020 50%, #060a12 100%);
    border-color: rgba(67,126,180,0.15);
}
.insight-bar-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f0a500;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    padding-top: 3px;
    flex-shrink: 0;
}
.insight-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    flex: 1;
}
.insight-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 99px;
    padding: 4px 13px;
    font-size: 0.76rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.2s;
    cursor: default;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.insight-chip:hover     { background: rgba(255,255,255,0.1); }
.insight-chip.chip-up   { border-color: rgba(16,185,129,0.35); }
.insight-chip.chip-down { border-color: rgba(239,68,68,0.35); }
.insight-chip.chip-warn { border-color: rgba(245,158,11,0.35); }
.chip-icon { font-size: 0.82rem; }

/* ========================
   DASHBOARD GRID
   ======================== */
.db-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
/* Row 1: 3 kartu — masing-masing 2/6 = 1/3 lebar */
.db-card--pmb        { grid-column: 1 / span 2; grid-row: 1; animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.1s both; }
.db-card--penempatan { grid-column: 3 / span 2; grid-row: 1; animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.15s both; }
.db-card--mahasiswa  { grid-column: 5 / span 2; grid-row: 1; animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.2s both; }
/* Row 2: pendapatan & keuangan masing-masing tepat 50%-50% = 3/6 */
.db-card--pendapatan { grid-column: 1 / span 3; grid-row: 2; animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.25s both; }
.db-card--keuangan   { grid-column: 4 / span 3; grid-row: 2; animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1) 0.3s both; }

/* ========================
   DB CARD (Rekomendasi 3: hover lift + shadow)
   ======================== */
.db-card {
    background: var(--surface, #fff);
    border-radius: 14px;
    padding: 20px;
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow 0.25s cubic-bezier(0.4,0,0.2,1), transform 0.25s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}
.db-card:hover {
    box-shadow: 0 8px 32px rgba(67,126,180,0.1), 0 2px 8px rgba(0,0,0,0.06);
    transform: translateY(-3px);
}
body.dark-mode .db-card {
    background: var(--dm-card, #131929);
    border-color: var(--border, #1e293b);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.dark-mode .db-card:hover {
    box-shadow: 0 8px 32px rgba(67,126,180,0.2), 0 2px 8px rgba(0,0,0,0.3);
}

/* Card header */
.db-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid var(--border, #e2e8f0);
}
.db-card-title-wrap { display: flex; align-items: center; gap: 8px; }
.db-card-num {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #437eb4 0%, #3570a5 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.db-card-title {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text, #0f172a);
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.db-card-meta { font-size: 0.7rem; color: var(--text-sec, #64748b); white-space: normal; font-weight: 500; overflow-wrap: break-word; line-height: 1.4; }

/* Highlight strip */
.db-card-highlight {
    background: #f8fafc;
    border-radius: 10px;
    padding: 9px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    border: 1px solid #f1f5f9;
}
body.dark-mode .db-card-highlight { background: #1e293b; border-color: #1e293b; }

.highlight-label { font-size: 0.7rem; color: var(--text-sec, #64748b); font-weight: 500; }
.highlight-val { font-size: 1.05rem; font-weight: 800; color: var(--text, #0f172a); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.highlight-val.up   { color: #2ecc9a; }
.highlight-val.down { color: #ef4444; }
.highlight-badge { font-size: 0.68rem; padding: 2px 9px; border-radius: 99px; font-weight: 600; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.badge-up   { background: #d0f5ea; color: #059669; }
.badge-down { background: #fee2e2; color: #dc2626; }
.badge-neu  { background: #eaf3fb; color: #437eb4; }
body.dark-mode .badge-up   { background: #064e3b; color: #34d399; }
body.dark-mode .badge-down { background: #450a0a; color: #f87171; }
body.dark-mode .badge-neu  { background: #1e1b4b; color: #90bde8; }

/* Chart wrap */
.db-chart-wrap        { position: relative; width: 100%; min-height: 155px; }
.db-chart-wrap--tall  { min-height: 155px; }

/* Card insight footer */
.db-card-insight {
    font-size: 0.72rem;
    color: var(--text-sec, #64748b);
    line-height: 1.6;
    padding-top: 7px;
    border-top: 1px dashed var(--border, #e2e8f0);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.insight-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

/* ========================
   GAUGE GRID (Penempatan)
   ======================== */
.db-gauge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-items: start;
}
.gauge-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gauge-wrap { position: relative; width: 78px; height: 78px; }
.gauge-wrap canvas { width: 78px !important; height: 78px !important; }
.gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gauge-pct {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text, #0f172a);
    line-height: 1;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.gauge-label {
    font-size: 0.63rem;
    color: var(--text-sec, #64748b);
    text-align: center;
    line-height: 1.3;
    max-width: 78px;
    word-break: break-word;
    font-weight: 500;
}

/* ========================
   DONUT ROW (Pendapatan)
   ======================== */
.db-donut-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: start;
}
.donut-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.donut-wrap { position: relative; width: 88px; height: 88px; }
.donut-wrap canvas { width: 88px !important; height: 88px !important; }
.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.donut-val {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text, #0f172a);
    line-height: 1.2;
    text-align: center;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.donut-name { font-size: 0.63rem; color: var(--text-sec, #64748b); text-align: center; line-height: 1.3; font-weight: 600; }
.donut-legend { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.donut-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.58rem; color: var(--text-sec, #64748b); font-weight: 500; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ========================
   MAHASISWA TABLE
   ======================== */
.mhs-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.mhs-table th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-sec, #64748b);
    font-weight: 600;
    font-size: 0.68rem;
    border-bottom: 1.5px solid var(--border, #e2e8f0);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mhs-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
body.dark-mode .mhs-table th { border-bottom-color: var(--border, #1e293b); }
body.dark-mode .mhs-table td { border-bottom-color: var(--border, #1e293b); color: var(--text-sec, #94a3b8); }
.mhs-table tr:last-child td { border-bottom: none; }
.mhs-bar-bg { background: #f1f5f9; border-radius: 4px; height: 5px; overflow: hidden; min-width: 60px; }
body.dark-mode .mhs-bar-bg { background: #1e293b; }
.mhs-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }

/* ========================
   VIEW TOGGLE
   ======================== */
.db-view-toggle { display: flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 2px; }
body.dark-mode .db-view-toggle { background: #1e293b; }
.db-toggle-btn { padding: 4px 12px; font-size: 0.7rem; font-weight: 600; border: none; border-radius: 6px; background: transparent; color: var(--text-sec, #64748b); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.db-toggle-btn.active { background: #fff; color: #437eb4; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
body.dark-mode .db-toggle-btn.active { background: #131929; color: #90bde8; }

/* ========================
   SKELETON LOADING (Rekomendasi 3)
   ======================== */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 400px 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 8px;
}
body.dark-mode .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #263347 50%, #1e293b 75%);
    background-size: 400px 100%;
}

/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 1200px) {
    .db-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .db-card--pmb        { grid-column: 1; grid-row: 1; }
    .db-card--penempatan { grid-column: 2; grid-row: 1; }
    .db-card--keuangan   { grid-column: 1; grid-row: 2; }
    .db-card--pendapatan { grid-column: 2; grid-row: 2; }
    .db-card--mahasiswa  { grid-column: 1 / span 2; grid-row: 3; }
    .db-donut-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .db-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .db-donut-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .db-gauge-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .gauge-wrap, .gauge-wrap canvas { width: 68px !important; height: 68px !important; }
    .donut-wrap, .donut-wrap canvas { width: 78px !important; height: 78px !important; }
}
@media (max-width: 767px) {
    .db-grid { grid-template-columns: 1fr; gap: 12px; }
    .db-card--pmb, .db-card--penempatan, .db-card--keuangan,
    .db-card--pendapatan, .db-card--mahasiswa {
        grid-column: 1 !important; grid-row: auto !important;
    }
    .db-donut-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .db-gauge-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .insight-bar { flex-direction: column; gap: 10px; padding: 12px 14px; }
    .insight-list { gap: 6px; }
    .db-card-highlight { flex-wrap: wrap; gap: 8px; }
    .db-chart-wrap { min-height: 130px; }
    .db-chart-wrap--tall { min-height: 170px; }
    .db-card:hover { transform: none; }
}
@media (max-width: 480px) {
    .db-donut-row { grid-template-columns: repeat(2, 1fr); }
    .donut-wrap, .donut-wrap canvas { width: 72px !important; height: 72px !important; }
    .gauge-wrap, .gauge-wrap canvas { width: 64px !important; height: 64px !important; }
    .gauge-pct { font-size: 0.78rem; }
    .db-card { padding: 14px; }
}