/* ========================================
   TEAL THEME — Global UI Cohesion
   Deep teal brand across sidebar, views, cards
   ======================================== */

/* ---------- Dark Teal Sidebar ---------- */
.sidebar {
    background:
        linear-gradient(180deg, rgba(13, 51, 51, 0.98) 0%, rgba(10, 42, 42, 0.99) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        4px 0 24px rgba(0, 0, 0, 0.18),
        inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

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

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.sidebar-logo:hover {
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
}

.sidebar-faculty {
    color: #ffffff;
}

.sidebar-university {
    color: rgba(255, 255, 255, 0.72);
}

.sidebar-badge {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sidebar-badge i {
    color: var(--gold);
}

.nav-accordion-header:hover,
.nav-accordion.open .nav-accordion-header {
    background: rgba(255, 255, 255, 0.06);
}

.nav-accordion-header .nav-label {
    color: rgba(255, 255, 255, 0.72);
}

.accordion-chevron {
    color: rgba(255, 255, 255, 0.65);
}

.nav-divider-sidebar {
    background: rgba(255, 255, 255, 0.1);
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-link.active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.nav-link.active::before {
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}

.nav-number {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-link.active .nav-number {
    background: linear-gradient(135deg, var(--upm-teal-600), var(--upm-teal-800));
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.38);
}

.btn-refresh-sidebar {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-refresh-sidebar:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(212, 175, 55, 0.45);
}

.sidebar-toggle {
    background: rgba(13, 51, 51, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-toggle:hover {
    background: var(--upm-teal-800);
    border-color: rgba(212, 175, 55, 0.35);
}

/* ---------- Compact Avatar Menu (header) ---------- */
.floating-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

.user-menu-trigger {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.35);
}

.user-menu-trigger:hover {
    border-color: var(--gold);
}

.user-menu-profile .user-name {
    color: var(--upm-teal-900);
}

.user-menu-profile .user-role {
    color: var(--text-muted);
}

/* ---------- Full-bleed views (hero extends edge) ---------- */
#view-dashboard,
#view-upm-hub,
#view-monev-rtl,
#view-sop-catalog,
#view-ami-evidence,
#view-kinerja-fakultas {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0;
}

#view-dashboard .hero-section {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

#view-dashboard .hero-section--unified {
    border-radius: var(--radius-2xl);
    margin: 0 32px 20px;
}

#view-dashboard .hero-countdown .countdown-value {
    -webkit-text-fill-color: transparent;
}

/* ---------- Dashboard cards & controls ---------- */
.glass-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(238, 246, 246, 0.88) 100%);
    border: 1px solid rgba(19, 78, 74, 0.1);
    box-shadow:
        var(--shadow-float-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.glass-card:hover {
    border-color: rgba(32, 96, 96, 0.22);
}

.countdown-section {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 246, 246, 0.9) 100%);
    border: 1px solid rgba(19, 78, 74, 0.1);
}

.countdown-section::before {
    background: linear-gradient(90deg, transparent, var(--upm-teal-600), var(--gold), var(--upm-teal-600), transparent);
}

.countdown-value {
    color: var(--upm-teal-800);
}

.toggle-btn.active {
    color: #fff;
    background: linear-gradient(135deg, var(--upm-teal-700), var(--upm-teal-600));
    box-shadow: 0 2px 10px rgba(10, 42, 42, 0.2);
}

.toggle-slider {
    display: none;
}

.progress-bar-fill {
    background: linear-gradient(90deg, var(--upm-teal-700), var(--upm-teal-500), var(--gold));
}

.progress-percent {
    color: var(--upm-teal-800);
}

/* ---------- Kriteria / SOP / SPMI sections ---------- */
.kriteria-section,
.sarpras-section {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 246, 0.9));
    border: 1px solid rgba(19, 78, 74, 0.08);
}

.kriteria-number {
    background: linear-gradient(135deg, var(--upm-teal-700), var(--upm-teal-900));
    box-shadow: 0 4px 14px rgba(10, 42, 42, 0.2);
}

.ring-fill {
    stroke: var(--upm-teal-600);
}

.sub-kriteria-card {
    border: 1px solid rgba(19, 78, 74, 0.08);
    background: rgba(255, 255, 255, 0.85);
}

.sub-kriteria-card.expanded {
    border-color: rgba(32, 96, 96, 0.2);
    box-shadow: 0 4px 16px rgba(10, 42, 42, 0.06);
}

.sub-header {
    background: linear-gradient(135deg, rgba(19, 78, 74, 0.06), rgba(19, 78, 74, 0.02));
}

.sub-header:hover {
    background: linear-gradient(135deg, rgba(19, 78, 74, 0.1), rgba(19, 78, 74, 0.04));
}

.spmi-glass-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 246, 0.92));
    border: 1px solid rgba(19, 78, 74, 0.1);
}

.spmi-glass-card::before {
    background: radial-gradient(circle, rgba(42, 117, 117, 0.12) 0%, transparent 70%);
}

.spmi-icon {
    background: linear-gradient(135deg, var(--upm-teal-600), var(--upm-teal-800));
}

.spmi-title {
    color: var(--upm-teal-900);
}

.element-table th {
    background: rgba(19, 78, 74, 0.06);
    color: var(--upm-teal-800);
}

.status-indicator.active {
    color: var(--upm-teal-700);
}

.status-indicator.active .dot {
    background: var(--upm-teal-600);
}

.link-input:focus {
    border-color: var(--upm-teal-500);
    box-shadow: 0 0 0 3px rgba(32, 96, 96, 0.12);
}

.btn-table-open {
    background: linear-gradient(135deg, var(--upm-teal-800), var(--upm-teal-600));
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 8px rgba(10, 42, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.btn-table-open:hover {
    background: linear-gradient(135deg, var(--upm-teal-900), var(--upm-teal-700));
    color: #ffffff;
}

.verify-pill.verify-diverifikasi {
    background: rgba(19, 78, 74, 0.12);
    color: var(--upm-teal-800);
}

/* ---------- Predictor & tiers ---------- */
.predictor-card {
    border: 1px solid rgba(19, 78, 74, 0.1);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 246, 0.9));
}

.predictor-header {
    border-bottom-color: rgba(19, 78, 74, 0.08);
}

.tier-unggul5 .tier-indicator { background: linear-gradient(180deg, var(--upm-teal-500), var(--upm-teal-700)); }
.tier-unggul4 .tier-indicator { background: linear-gradient(180deg, #5aa3a3, var(--upm-teal-600)); }
.tier-unggul3 .tier-indicator { background: linear-gradient(180deg, #8fc4c4, #5aa3a3); }

/* ---------- Admin ---------- */
.admin-table-card,
.admin-monitoring-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 246, 0.9));
    border: 1px solid rgba(19, 78, 74, 0.1);
}

.admin-table th {
    background: rgba(19, 78, 74, 0.05);
}

.status-active {
    background: #c5e3e3;
    color: var(--upm-teal-900);
}

.fab-admin {
    background: linear-gradient(135deg, var(--upm-teal-800), var(--upm-teal-600));
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 10px 28px rgba(10, 42, 42, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fab-admin:hover {
    background: linear-gradient(135deg, var(--upm-teal-900), var(--upm-teal-700));
    box-shadow:
        0 14px 32px rgba(10, 42, 42, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-approve {
    background: var(--upm-teal-600);
}

.btn-approve:hover {
    background: var(--upm-teal-700);
}

/* ---------- Toast notifications ---------- */
.toast {
    border: 1px solid rgba(19, 78, 74, 0.12);
}

.toast-success {
    border-left-color: var(--upm-teal-600);
}

.toast-success .toast-icon {
    color: var(--upm-teal-600);
}

/* ---------- Scrollbar global teal tint ---------- */
::-webkit-scrollbar-thumb {
    background: rgba(19, 78, 74, 0.18);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(19, 78, 74, 0.3);
}

/* ---------- Realtime status (sidebar dark bg) ---------- */
.realtime-sidebar-row {
    margin: 10px 14px 4px;
    gap: 8px;
}

.realtime-pill-sidebar {
    justify-content: flex-start;
    padding: 6px 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.realtime-pill-sidebar i {
    color: rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

.realtime-pill-sidebar.state-connected {
    color: #ffffff;
    background: rgba(90, 163, 163, 0.22);
    border-color: rgba(143, 196, 196, 0.45);
    box-shadow:
        0 0 0 1px rgba(143, 196, 196, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.realtime-pill-sidebar.state-connected i {
    color: #8fc4c4;
}

.realtime-pill-sidebar.state-connecting,
.realtime-pill-sidebar.state-reconnecting {
    color: #fde68a;
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.35);
}

.realtime-pill-sidebar.state-connecting i,
.realtime-pill-sidebar.state-reconnecting i {
    color: var(--gold);
}

.realtime-pill-sidebar.state-fallback {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(147, 197, 253, 0.35);
}

.realtime-pill-sidebar.state-fallback i {
    color: #93c5fd;
}

.realtime-pill-sidebar.state-offline {
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.realtime-pill-sidebar.state-offline i {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    .sidebar.open {
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
    }
}