/**
 * ═══════════════════════════════════════════════════════════════
 *  LIQUID GLASS DESIGN SYSTEM - CORE BRIDGING STYLESHEET
 *  Chatbot Informasi Akademik — Universitas Sembilanbelas November Kolaka
 *  Redesigned by Senior UI/UX Designer & Design System Architect
 * ═══════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('css/premium-ai.css');

:root {
    /* Wajib Digunakan Palet Warna */
    --primary-dark: #130C22;
    --primary-purple: #24204F;
    --secondary-purple: #494677;
    --bg-light: #E7E2D6;
    --accent: #780814;
    --accent-hover: #9C1221;
    --accent-light: rgba(120, 8, 20, 0.08);

    /* Text */
    --text-utama: #130C22;
    --text-sekunder: #494677;

    /* Status Colors */
    --success: #2E9B66;
    --warning: #D4A832;
    --danger: #780814;

    /* Glass Effect Tokens */
    --card-glass-bg: rgba(255, 255, 255, 0.72);
    --card-glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 12px 32px rgba(19, 12, 34, 0.08);
}

html, body {
    font-family: 'Inter', 'Poppins', sans-serif !important;
    background-color: #E7E2D6 !important;
    color: #130C22 !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Base Glass Card */
.glass-card, .card-liquid {
    background: var(--card-glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--card-glass-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--glass-shadow) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover {
    box-shadow: 0 18px 45px rgba(19, 12, 34, 0.12) !important;
    transform: translateY(-2px);
}

/* Button Standard Override */
.btn-maroon, .btn-primary-liquid {
    background: #780814 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(120, 8, 20, 0.28) !important;
    transition: all 0.25s ease !important;
}

.btn-maroon:hover, .btn-primary-liquid:hover {
    background: #9C1221 !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 22px rgba(120, 8, 20, 0.4) !important;
}

/* Dark Mode Overrides */
body.dark-mode {
    --primary-dark: #F0EDE6;
    --primary-purple: #E7E2D6;
    --secondary-purple: #D1CABF;
    --bg-light: #0B0716;
    --text-primary: #F0EDE6;
    --text-secondary: #D1CABF;
    --text-muted: #A9A29A;
    --text-light: #7A7470;
    --text-utama: #F0EDE6;
    --text-sekunder: #D1CABF;
    --card-glass-bg: rgba(19, 12, 34, 0.85);
    --card-glass-border: rgba(255, 255, 255, 0.15);
    --glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    background-color: #0B0716 !important;
    color: #F0EDE6 !important;
}

body.dark-mode .admin-sidebar {
    background: #130C22;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .main-content {
    background: var(--bg-light);
}

body.dark-mode .admin-topbar,
body.dark-mode .stat-card-liquid,
body.dark-mode .card,
body.dark-mode .chart-panel-liquid,
body.dark-mode .menu-card-liquid,
body.dark-mode .table-container,
body.dark-mode .modal-content {
    background: rgba(19, 12, 34, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--primary-dark);
}

body.dark-mode .admin-topbar h3,
body.dark-mode .profile-info span,
body.dark-mode .stat-value,
body.dark-mode .chart-panel-liquid h4 {
    color: var(--primary-dark) !important;
}

body.dark-mode .stat-title,
body.dark-mode .profile-info small,
body.dark-mode .text-muted {
    color: var(--secondary-purple) !important;
}

body.dark-mode table.dataTable tbody td {
    color: var(--primary-dark);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode table.dataTable thead th {
    background: #24204F;
    color: #ffffff;
}

body.dark-mode .stat-icon-wrap, 
body.dark-mode .stat-icon-liquid {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .menu-card-liquid:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .modal-header {
    background: #130C22 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Fix for ALL modes: Ensure headings in modal headers are readable */
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title {
    color: inherit !important;
}

body.dark-mode .modal-header h1,
body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3,
body.dark-mode .modal-header h4,
body.dark-mode .modal-header h5,
body.dark-mode .modal-header h6 {
    color: #F0EDE6 !important;
}

/* Comprehensive Dark Mode Overrides for Hardcoded Inline Styles */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background: #ffffff"],
body.dark-mode [style*="background:#ffffff"],
body.dark-mode [style*="background: #f8f9fa"],
body.dark-mode [style*="background:#f8f9fa"],
body.dark-mode [style*="background: #f8f9fc"],
body.dark-mode [style*="background:#f8f9fc"],
body.dark-mode [style*="background: #f1f5f9"],
body.dark-mode [style*="background:#f1f5f9"],
body.dark-mode [style*="background: #e2e8f0"] {
    background: rgba(19, 12, 34, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

/* Fix text colors inside hardcoded divs */
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"],
body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color: #1e293b"] {
    color: var(--text-secondary) !important;
}

/* Form Controls & Dropzones */
body.dark-mode .form-control,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode .dropzone {
    background: rgba(19, 12, 34, 0.6) !important;
    color: #F0EDE6 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.dark-mode .dz-message span {
    color: var(--text-secondary) !important;
}

/* SweetAlert2 Modal Overrides for Dark Mode */
body.dark-mode .swal2-popup {
    background: #130C22 !important;
    color: #F0EDE6 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-html-container {
    color: #F0EDE6 !important;
}

body.dark-mode .form-control {
    background: rgba(19, 12, 34, 0.8);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}