/*
===============================================================================
SiMORA — STYLE.CSS SATU FILE, TERSTRUKTUR, DAN MUDAH DIEDIT
===============================================================================
Tujuan file ini:
- Semua CSS tetap berada dalam SATU file: assets/style.css
- Tampilan asli dipertahankan.
- Urutan CSS tetap mengikuti cascade sebelumnya, jadi jangan memindahkan bagian
  secara sembarang jika tidak perlu.
- Setiap bagian diberi nomor agar mudah dicari saat ingin mengubah header,
  tombol, kartu ruangan, tabel, modal, responsive, dan lainnya.

CARA EDIT CEPAT:
1. Ingin mengubah warna utama aplikasi? Cari bagian 00 — TEMA.
2. Ingin mengubah header/topbar/menu? Cari bagian 01 — HEADER & NAVIGASI.
3. Ingin mengubah halaman login? Cari bagian 02 — LANDING & LOGIN.
4. Ingin mengubah input/form/tombol umum? Cari bagian 03 — FORM & TOMBOL.
5. Ingin mengubah kartu ruangan? Cari bagian 04 atau 09.
6. Ingin mengubah tabel/modal/alert? Cari bagian 05, 08, atau 11.
7. Ingin mengubah tampilan HP/tablet? Cari bagian 06 atau 10.

PETA TOMBOL:
Tombol 1  .button                 = tombol utama: Simpan, Tambah, Terapkan, Cari
Tombol 2  .button-outlined        = tombol sekunder: Batal, Reset, Kembali
Tombol 3  .button-danger          = tombol bahaya utama
Tombol 4  .room-use-button        = tombol “Gunakan Ruangan”
Tombol 5  .badge-delete           = tombol “Hapus” pada tabel
Tombol 6  .action-button          = tombol aksi di baris tabel jadwal
Tombol 7  .formal-btn             = tombol login
Tombol 8  .scroll-top-btn         = tombol panah ke atas

CATATAN PENTING:
- Bagian 00 berisi variabel utama. Itu tempat paling aman untuk mengganti warna.
- Bagian paling bawah biasanya menang jika ada selector yang sama di atasnya.
- Jangan menghapus !important yang sudah ada, karena beberapa bagian memang
  dipakai sebagai override akhir agar tampilan tetap rapi.
===============================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');


/*
===============================================================================
00 — TEMA & VARIABEL UTAMA
===============================================================================
Bagian yang paling sering diubah:
- Warna utama aplikasi       : --primary
- Warna saat hover           : --primary-hover
- Warna sukses/tersedia      : --success
- Warna peringatan           : --warning
- Warna bahaya/hapus         : --danger
- Warna teks                 : --text, --text-muted
- Sudut komponen             : --radius-sm, --radius-md, --radius-lg
- Bayangan                   : --shadow-sm, --shadow-md, --shadow-lg

Mengubah variabel di sini akan mengubah komponen yang menggunakan variabel tersebut,
tanpa perlu mencari nilai warna yang sama di banyak file.
===============================================================================
*/


:root {
    /* Color Palette - Bright Slate & Modern Indigo */
    --bg-dark: #eef2ff; /* Indigo 50 - Latar belakang terang bersih */
    --bg-accent: #f1f5f9; /* Slate 100 */
    --card-bg: #ffffff; /* Putih bersih untuk kartu */
    --card-border: #e2e8f0; /* Slate 200 */
    --card-hover-border: #cbd5e1; /* Slate 300 */
    
    --primary: #4f46e5; /* Indigo yang sedikit lebih kontras untuk background putih */
    --primary-hover: #3730a3;
    
    --accent: #0891b2; /* Cyan dengan kontras lebih tinggi */

    --success: #15803d; /* Green 700 - agar terbaca jelas di background putih */
    --success-bg: #f0fdf4; /* Green 50 */
    --success-border: #bbf7d0; /* Green 200 */

    --warning: #b45309; /* Amber 700 */
    --warning-bg: #fffbeb; /* Amber 50 */
    --warning-border: #fde68a; /* Amber 200 */

    --danger: #be123c; /* Rose 700 */
    --danger-bg: #fff1f2; /* Rose 50 */
    --danger-border: #fecdd3; /* Rose 200 */

    --text: #0f172a; /* Slate 900 - Teks utama sangat gelap agar terbaca jelas */
    --text-muted: #475569; /* Slate 600 */
    --text-dark: #64748b; /* Slate 500 */
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.08);
    
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/*
===============================================================================
01 — DASAR, LAYOUT, HEADER, NAVIGASI, DAN KARTU UMUM
===============================================================================
Isi file:
1. Reset browser dan body
2. Pembungkus halaman (.page, .container)
3. Header (.app-header, .app-name, .app-user, .topbar-time)
4. Menu navigasi (.nav, .nav-button)
5. Kartu umum (.card)

Edit HEADER utama pada bagian TOPBAR.
Edit MENU pada bagian NAVIGATION.
Edit KARTU umum pada bagian CARDS.
===============================================================================
*/

/* ==========================================================================
   RESET & CORE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* ==========================================================================
   LAYOUT CONTAINERS
   ========================================================================== */

.page {
    padding: 40px 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    width: 100%;
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   TOPBAR
   ========================================================================== */

.app-header {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: 28px;
    overflow: hidden;
    position: relative;
}

.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
}

.app-header-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 28px;
}

.app-header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    justify-self: start;
}

.app-header-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-self: end;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.app-user .user-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--primary);
}

.app-logout-btn {
    padding: 8px 16px;
    font-size: 13px;
}

.app-name {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.status-pill {
    background: rgba(79, 70, 229, 0.08);
    color: var(--primary);
    border: 1px solid rgba(79, 70, 229, 0.15);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.topbar-time {
    justify-self: center;
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    background: rgba(8, 145, 178, 0.06);
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid rgba(8, 145, 178, 0.14);
    text-align: center;
    white-space: nowrap;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nav {
    border-top: 1px solid var(--card-border);
    background: var(--bg);
    padding: 8px 20px;
}

.nav-inner {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-button {
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
}

.nav-button:hover {
    color: var(--primary);
    background: rgba(79, 70, 229, 0.05);
}

.nav-button.active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    border-color: var(--card-hover-border);
    box-shadow: var(--shadow-md);
}

.card h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.small-text {
    color: var(--text-muted);
    font-size: 13.5px;
}

/* Helper utilities for layout grid */
.grid {
    display: grid;
    gap: 24px;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 992px) {
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/*
===============================================================================
02 — HALAMAN AWAL DAN LOGIN
===============================================================================
- Landing/pilihan peran : class .landing-* dan .role-*
- Login formal          : class .formal-*

Tombol login utama memakai .formal-btn.
===============================================================================
*/

/* ==========================================================================
   LANDING PAGE (ROLE SELECTION)
   ========================================================================== */

.landing-shell {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.network-art {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 600px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
}

.network-art svg {
    width: 100%;
    height: 100%;
}

.network-line { stroke: var(--primary); stroke-opacity: 0.4; stroke-width: 2; fill: none; }
.network-dot { fill: var(--primary); fill-opacity: 0.6; }
.network-accent { stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; fill: none; }

.landing-center {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.live-pill {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
    border: 1px solid rgba(79, 70, 229, 0.2);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 999px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 24px;
    box-shadow: 0 0 15px rgba(8, 145, 178, 0.05);
    animation: pulse 2.5s infinite alternate;
}

.landing-title {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 12px;
    background: linear-gradient(to right, var(--text), var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.landing-subtitle {
    font-size: 20px;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 8px auto;
    font-weight: 400;
}

.landing-faculty {
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 48px;
}

.landing-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    text-align: left;
    max-width: 780px;
    margin: 0 auto;
}

.role-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.role-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
    transition: background-color 0.3s ease;
}

.role-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 0 25px rgba(79, 70, 229, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

.role-card:hover::after {
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.role-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.role-icon {
    width: 48px;
    height: 48px;
    color: var(--accent);
    background: rgba(6, 182, 212, 0.08);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(6, 182, 212, 0.2);
    transition: transform 0.3s ease;
}

.role-card:hover .role-icon {
    transform: scale(1.1) rotate(3deg);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}

.role-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.role-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.role-card form button {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--bg-accent);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.role-card:hover form button {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
}

@media (max-width: 768px) {
    .landing-title {
        font-size: 48px;
    }
    .landing-role-grid {
        grid-template-columns: 1fr;
        padding: 0 16px;
    }
}

/* ==========================================================================
   FORMAL LOGIN PAGE
   ========================================================================== */

.formal-login-wrapper {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
}

.formal-login-card {
    width: 100%;
    max-width: 440px;
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 44px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.formal-login-card:hover {
    border-color: rgba(99, 102, 241, 0.25);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(99, 102, 241, 0.1);
}

.formal-logo {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.formal-faculty {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 28px;
}

.formal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.formal-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.formal-form-group {
    text-align: left;
    margin-bottom: 18px;
}

.formal-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.formal-field-head label {
    margin-bottom: 0;
}

.formal-field-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.formal-field-link:hover {
    text-decoration: underline;
    color: var(--primary-hover);
}

.formal-form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formal-input-wrap {
    position: relative;
}

.formal-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-dark);
    pointer-events: none;
    transition: color 0.25s ease;
}

.formal-input {
    width: 100%;
    background: var(--bg-accent);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px 12px 44px;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14.5px;
    transition: all 0.25s ease;
}

.formal-input:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.formal-input-wrap:focus-within .formal-input-icon {
    color: var(--primary);
}

.formal-hint {
    display: block;
    font-size: 11.5px;
    color: var(--text-dark);
    margin-top: 6px;
}

.formal-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 18px;
}

.formal-divider::before,
.formal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-border);
}

.formal-divider span {
    font-size: 11px;
    color: var(--text-dark);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.formal-switch {
    font-size: 13.5px;
    color: var(--text-muted);
    text-align: center;
}

.formal-switch a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.formal-switch a:hover {
    text-decoration: underline;
}

.formal-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.formal-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
}

.formal-step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-accent);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dark);
    transition: all 0.25s ease;
}

.formal-step.active {
    color: var(--primary);
}

.formal-step.active .formal-step-dot {
    background: var(--primary);
    border-color: transparent;
    color: #fff;
}

.formal-step.done .formal-step-dot {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success);
}

.formal-step-line {
    width: 28px;
    height: 2px;
    background: var(--card-border);
    border-radius: 1px;
}

.formal-step-line.done {
    background: var(--success);
}

.formal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
}

.formal-back-link:hover {
    color: var(--primary);
}

.formal-back-link svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.formal-back-link:hover svg {
    transform: translateX(-3px);
}

.formal-login-back {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
}

.formal-login-back .formal-back-link {
    margin-top: 0;
}

.formal-btn {
    width: 100%;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 13px 20px;
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 8px;
}

.formal-btn:hover {
    background: var(--primary-hover);
}

.formal-demo-box {
    margin-top: 28px;
    background: rgba(6, 182, 212, 0.04);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: var(--radius-sm);
    padding: 16px;
    font-size: 13px;
    text-align: left;
    color: var(--text-muted);
}

.formal-demo-box strong {
    color: var(--accent);
}

.formal-footer {
    margin-top: 24px;
    font-size: 12px;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.5;
}

.formal-register-link {
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.formal-register-link a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.formal-register-link a:hover {
    text-decoration: underline;
}

/*
===============================================================================
03 — FORM DAN SISTEM TOMBOL DASAR
===============================================================================
FORM:
- .field                   = pembungkus input
- .field input/select/...  = tampilan kolom input

NOMOR TOMBOL DASAR:
1. .button                 = tombol utama/ungu
2. .button-outlined        = tombol garis/putih
3. .button-danger          = tombol tindakan berbahaya

Ukuran khusus dan susunan tombol dashboard/jadwal tetap berada di file 11 agar
urutan cascade asli tidak berubah.
===============================================================================
*/

/* ==========================================================================
   FIELDS & FORM CONTROLS
   ========================================================================== */

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.field span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field label {
    font-weight: 600;
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--bg-accent);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
    border: none;
    background: var(--primary);
    color: white;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 13.5px;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.button:hover {
    background: var(--primary-hover);
}

.button:active {
    transform: translateY(0);
}

.button-outlined {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    box-shadow: none;
}

.button-outlined:hover {
    background: var(--bg-accent);
    border-color: var(--card-hover-border);
    color: var(--text);
    box-shadow: none;
}

.button-danger {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    box-shadow: none;
}

.button-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/*
===============================================================================
04 — STATISTIK DASHBOARD DAN KARTU RUANGAN
===============================================================================
- .stats, .stat-card       = kotak ringkasan statistik
- .card-row                = jumlah kolom kartu ruangan
- .room-card               = bentuk kartu ruangan
- .pill                    = label status
- .available-bg            = status tersedia
- .busy-bg                 = status digunakan
- .maintenance-bg          = status perbaikan
- .room-info-footer        = bagian bawah kartu
===============================================================================
*/

/* ==========================================================================
   STATS DASHBOARD
   ========================================================================== */

.stats {
    display: grid;
    gap: 12px;
}

.stats-cols-3 {
    grid-template-columns: repeat(9, 1fr);
}

.stats-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.stat-card {
    background: var(--bg-accent);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Admin: 9 kartu ringkas berbentuk kotak kecil satu baris */
.stats-cols-3 {
    gap: 8px;
}

.stats-cols-3 .stat-card {
    padding: 8px 10px;
    gap: 2px;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.stats-cols-3 .stat-card .label {
    font-size: 10px;
    letter-spacing: 0.4px;
    order: 2;
}

.stats-cols-3 .stat-card span {
    margin-top: 0;
    font-size: 17px;
    line-height: 1.2;
    order: 1;
}

.stat-card:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.04);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.stat-card .label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-card span {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
}

@media (max-width: 600px) {
    .stats-cols-3,
    .stats-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   ROOM MONITORING CARDS
   ========================================================================== */

.card-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-top:20px;
}

.room-filter{
    display:flex;
    gap:15px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.room-filter input{
    flex:1;
    min-width:300px;
    height: 44px;
    padding: 10px 16px;
    border:1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text);
    font-size: 14px;
}

.room-filter select{
    width:250px;
    height: 44px;
    padding: 10px 14px;
    border:1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: #ffffff;
    color: var(--text);
    font-size: 14px;
}
.room-card {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card-available {
    background: #fafcfa;
    border-left: 4px solid var(--success);
}
.card-busy {
    background: #fcf8f8;
    border-left: 4px solid var(--danger);
}
.card-maint {
    background: #fcfaf6;
    border-left: 4px solid var(--warning);
}

.room-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md), 0 10px 20px rgba(99, 102, 241, 0.1);
    cursor: pointer;
}

.room-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.room-card p {
    color: var(--text-muted);
    font-size: 13px;
}

.pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.available-bg {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}
.available-bg::before {
    background: var(--success);
}

/* Dot berkedip pada status Tersedia & Digunakan di kartu ruang */
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.room-card .pill.available-bg::before,
.room-card .pill.busy-bg::before {
    animation: statusBlink 1.2s ease-in-out infinite;
}

.busy-bg {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}
.busy-bg::before {
    background: var(--danger);
}

.maintenance-bg {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.08);
}
.maintenance-bg::before {
    background: var(--warning);
}

/*
===============================================================================
05 — TABEL, MODAL, DAN ALERT
===============================================================================
- .table-wrapper, table, th, td = tabel umum
- .modal-backdrop, .modal       = popup/form modal
- .modal-actions                = area tombol bawah modal
- .alert                        = pesan kesalahan/peringatan
===============================================================================
*/

/* ==========================================================================
   TABLES
   ========================================================================== */

.table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--card-bg);
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

th {
    background: var(--bg-accent);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text);
}

tbody tr {
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background: rgba(79, 70, 229, 0.025);
}

tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    background: var(--bg-accent);
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--card-border);
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* ==========================================================================
   MODALS & OVERLAYS
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.modal {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    padding: 32px;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(99, 102, 241, 0.08);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 576px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 20px;
}

/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/*
===============================================================================
06 — ANIMASI DAN RESPONSIVE DASAR
===============================================================================
Berisi keyframe animasi serta penyesuaian awal untuk layar kecil.
Biasanya tidak perlu diubah kecuali ingin mengubah efek gerak atau breakpoint.
===============================================================================
*/

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */

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

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

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.05);
        opacity: 0.9;
    }
    100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
        opacity: 1;
    }
}

/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */

@media (max-width: 768px) {
    .page {
        padding: 20px 16px;
    }
    
    .app-header-top {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px;
        gap: 12px;
    }

    .app-header-brand {
        justify-content: space-between;
        justify-self: auto;
    }

    .app-header-meta {
        flex-wrap: wrap;
        justify-self: auto;
    }

    .app-user {
        max-width: none;
        flex: 1 1 auto;
    }

    .topbar-time {
        align-self: stretch;
        text-align: center;
    }

    .app-logout-btn {
        flex: 1 1 100%;
    }
    
    .nav-inner {
        flex-direction: column;
        width: 100%;
    }
    
    .nav-button {
        width: 100%;
        justify-content: center;
    }
    
    .modal {
        padding: 20px;
    }
}

/*
===============================================================================
07 — UTILITAS DASHBOARD DAN KOMPONEN HALAMAN DATA
===============================================================================
Isi utama:
- Form simulasi dan filter dashboard
- Badge dosen dan tombol hapus kecil
- Utility class seperti .mt-4, .flex-center, .hidden
- Pengaturan kolom tabel data ruang dan pengguna
- Empty state, footer, status summary, tab prodi, dan sorting tabel

TOMBOL KHUSUS:
5. .badge-delete            = tombol Hapus kecil
===============================================================================
*/

/* ==========================================================================
   DASHBOARD & UTILITY CLASSES (CLEANING INLINE STYLES)
   ========================================================================== */

.card-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.dashboard-grid {
    margin-top: 24px;
    gap: 20px;
    align-items: stretch;
    grid-template-columns: 1fr;
}

.dashboard-section {
    margin-top: 32px;
}

.dashboard-section-title {
    margin-bottom: 20px;
}

.simulation-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: auto;
    width: 100%;
}

.simulation-field {
    flex: 1 1 100px;
    margin: 0;
}

.simulation-field span {
    font-size: 0.8rem !important;
}

.simulation-field select,
.simulation-field input {
    margin-top: 4px;
    padding: 8px 12px;
    height: 38px;
}

.simulation-submit {
    padding: 0 16px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glow-text-cyan {
    color: var(--accent) !important;
}

.glow-text-indigo {
    color: var(--primary) !important;
}

.glow-text-emerald {
    color: var(--success) !important;
}

.filter-card-header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.badge-delete {
    padding: 6px 12px;
    margin-left: 8px;
    background: var(--danger-bg) !important;
    border-color: var(--danger-border) !important;
    color: var(--danger) !important;
    font-size: 0.85rem;
    box-shadow: none;
}

.badge-delete:hover {
    background: rgba(190, 18, 60, 0.12) !important;
}

.mt-6 {
    margin-top: 24px;
}

/* ==========================================================================
   MISSING UTILITY CLASSES
   ========================================================================== */

.inline-form {
    display: inline-block;
    margin: 0;
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.table-actions .inline-form {
    display: inline-flex;
}

/* Utility classes */
.nowrap { white-space: nowrap; }
.grid-full { grid-column: 1 / -1; }
.section-subheading { font-size: 1rem; margin: 0 0 16px 0; color: var(--text-muted); }
.mt-4 { margin-top: 16px; }
.mt-3 { margin-top: 10px; }
.mb-3 { margin-bottom: 12px; }
.flex-between { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.flex-center { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-1-min300 { flex: 1; min-width: 300px; }
.override-label { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.field-desc { margin: 0; color: var(--text-muted); line-height: 1.6; }
.text-muted { color: var(--text-muted); }
.danger-glow { color: var(--danger) !important; }
.warning-glow { color: var(--warning) !important; }
.table-card-nopad { padding: 0; }
.mt-0-mb-4 { margin-top: 0; margin-bottom: 16px; }
.inline-block { display: inline-block; }
.mb-2 { margin-bottom: 8px; }
.hidden { display: none; }
.status-chip-neutral { background: var(--bg-accent); border-color: var(--card-border); color: var(--text-muted); }
.flex-end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn-danger-gradient { background: var(--danger); }
.footer-tagline { margin-left: 8px; color: var(--text-dark); font-size: 12px; }

/* Tabel data ruang: dekatkan kolom Aksi ke Status.
   Tombol dimulai dari sisi kiri kolom aksi, bukan didorong ke ujung kanan tabel. */
.room-data-table {
    table-layout: fixed;
}

.room-data-table th:nth-child(1),
.room-data-table td:nth-child(1) { width: 10%; }

.room-data-table th:nth-child(2),
.room-data-table td:nth-child(2) { width: 15%; }

.room-data-table th:nth-child(3),
.room-data-table td:nth-child(3) { width: 14%; }

.room-data-table th:nth-child(4),
.room-data-table td:nth-child(4) { width: 9%; }

.room-data-table th:nth-child(5),
.room-data-table td:nth-child(5) { width: 12%; }

.room-data-table th:nth-child(6),
.room-data-table td:nth-child(6) { width: 12%; }

.room-data-table th:nth-child(7),
.room-data-table td:nth-child(7) {
    width: 28%;
    text-align: left;
}

.room-data-table .table-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

@media (max-width: 1100px) {
    .room-data-table {
        table-layout: auto;
    }

    .room-data-table .table-actions {
        flex-wrap: wrap;
    }
}

/* Tabel manajemen pengguna: rapatkan kolom Aksi ke Status.
   Hilangkan dorongan ke ujung kanan dan mulai tombol dari sisi kiri kolom Aksi. */
.user-data-table {
    table-layout: fixed;
}

.user-data-table th:nth-child(1),
.user-data-table td:nth-child(1) { width: 24%; }

.user-data-table th:nth-child(2),
.user-data-table td:nth-child(2) { width: 15%; }

.user-data-table th:nth-child(3),
.user-data-table td:nth-child(3) { width: 12%; }

.user-data-table th:nth-child(4),
.user-data-table td:nth-child(4) { width: 12%; }

.user-data-table th:nth-child(5),
.user-data-table td:nth-child(5) {
    width: 37%;
    text-align: left;
}

.user-data-table .user-actions-cell {
    white-space: nowrap;
}

.user-data-table .user-table-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}

.user-data-table .badge-delete {
    margin-left: 0;
}

@media (max-width: 1100px) {
    .user-data-table {
        table-layout: auto;
    }

    .user-data-table .user-table-actions {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-dark);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.app-footer {
    margin-top: 48px;
    padding: 28px 0 8px 0;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-dark);
}

.app-footer .footer-brand {
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 15px;
}

.app-footer .footer-info {
    font-size: 12px;
    color: var(--text-dark);
    opacity: 0.7;
}

/* ==========================================================================
   STATUS SUMMARY BAR (for room page)
   ========================================================================== */

.status-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.status-chip-available {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
}

.status-chip-busy {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
}

.status-chip-maintenance {
    background: var(--warning-bg);
    color: var(--warning);
    border-color: var(--warning-border);
}

/* ==========================================================================
   ROOM PAGE FILTER BAR
   ========================================================================== */

.room-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.room-page-header h2 {
    margin: 0;
}

/* ==========================================================================
   PRODI FILTER TABS
   ========================================================================== */

.prodi-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.prodi-tab {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--card-border);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-accent);
    color: var(--text-muted);
}

.prodi-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(79, 70, 229, 0.06);
}

.prodi-tab.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* ==========================================================================
   SEARCH HIGHLIGHT
   ========================================================================== */

mark {
    background: rgba(79, 70, 229, 0.15);
    color: var(--primary);
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}

/* ==========================================================================
   SORTABLE TABLE HEADERS
   ========================================================================== */

th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

th.sortable:hover {
    background: rgba(79, 70, 229, 0.06);
    color: var(--primary);
}

th.sortable::after {
    content: ' ↕';
    opacity: 0.4;
    font-size: 10px;
}

th.sorted-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--primary);
}

th.sorted-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--primary);
}

/*
===============================================================================
08 — DIALOG KONFIRMASI, TOAST, SCROLL, PROGRESS, DAN KELENGKAPAN
===============================================================================
- .confirm-dialog-*        = dialog konfirmasi
- .toast-*                 = notifikasi pojok layar
- .scroll-top-btn          = tombol panah kembali ke atas
- .progress-bar-*          = indikator progres
- @media print             = tampilan cetak
- scrollbar dan badge prodi
===============================================================================
*/

/* ==========================================================================
   CONFIRMATION DIALOG
   ========================================================================== */

.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.2s ease;
}

.confirm-dialog {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: zoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.confirm-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.confirm-dialog h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.confirm-dialog p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.confirm-dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.cancel-reason {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.5;
}

.previous-cancel-reason {
    margin: 12px 0 4px;
    padding: 6px 10px;
    background: var(--bg-accent);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.5;
}

.reason-label {
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
}

.reason-value {
    font-weight: 700;
    color: var(--text);
}

.cancel-reason-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    background: var(--input-bg);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.cancel-reason-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.cancel-summary {
    margin: 4px 0 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-accent);
}

.cancel-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
}

.cancel-summary-row + .cancel-summary-row {
    border-top: 1px solid var(--card-border);
}

.cancel-summary-label {
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.cancel-summary-value {
    color: var(--text);
    font-weight: 700;
    text-align: right;
}

.cancel-note {
    margin: 0 0 14px;
    padding: 8px 12px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-md);
    color: var(--warning);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: all;
    min-width: 240px;
    max-width: 360px;
}

.toast-success {
    border-left: 4px solid var(--success);
}

.toast-danger {
    border-left: 4px solid var(--danger);
}

/* ==========================================================================
   SCROLL TO TOP BUTTON
   ========================================================================== */

.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    z-index: 500;
}

.scroll-top-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.scroll-top-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

/* ==========================================================================
   PROGRESS BAR (occupancy)
   ========================================================================== */

.progress-bar-wrap {
    background: var(--bg-accent);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    margin-top: 6px;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESPONSIVE: PRINT STYLES
   ========================================================================== */

@media print {
    .app-user,
    .nav,
    .button,
    .modal-backdrop {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-accent);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.3);
}

/* Selection */
::selection {
    background: rgba(79, 70, 229, 0.15);
    color: var(--primary);
}

/* ==========================================================================
   PRODI BADGES & SECTION TITLES (Room Monitoring Grouping)
   ========================================================================== */

.badge-si{
    background:#e0f2fe;
    color:#0369a1;
}

.badge-ti{
    background:#ede9fe;
    color:#6d28d9;
}

.badge-sd{
    background:#dcfce7;
    color:#15803d;
}

.badge-bm{
    background:#fee2e2;
    color:#b91c1c;
}

.prodi-section{
    margin-bottom:60px;
}

.prodi-title{
    font-size:30px;
    font-weight:700;
    color:#1e293b;
    margin-bottom:25px;
    padding-bottom:10px;
    border-bottom:3px solid #4f46e5;
}

.lantai-title{
    margin:25px 0 15px;
    padding:5px 20px;
    background:#ffffff;
    color:#1e293b;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.25);
    border-top:4px solid #4f46e5;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
    font-size:17px;
    font-weight:700;
    text-align:center;
}

/*
===============================================================================
09 — DETAIL DASHBOARD RUANGAN DAN MODAL DETAIL
===============================================================================
Berisi penyempurnaan akhir untuk:
- Ikon judul
- Grid kartu ruang
- Teks waktu/mata kuliah/prodi pada kartu
- Filter waktu kecil
- Status dibatalkan
- Modal detail ruang

Bagian ini sebelumnya bernama “CLEAN OVERRIDE”. Urutannya tetap dipertahankan
supaya tampilan sama persis dengan versi awal.
===============================================================================
*/

/* ========================================================================== 
   CLEAN OVERRIDE - SiMORA ROOM DASHBOARD & DETAIL MODAL
   Tempel bagian ini setelah CSS utama. Hapus override lama yang bertumpuk.
   ========================================================================== */

/* ---------- Heading icon formal ---------- */
.ui-icon,
.nav-icon,
.brand-icon,
.button-icon,
.chip-icon,
.text-icon,
.alert-icon,
.stat-svg,
.empty-state-svg,
.confirm-dialog-svg {
    width: 64px;
    height: 64px;
    display: block;
}


.ui-icon {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.section-heading {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.section-heading .ui-icon {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 9px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.14);
}

.nav-icon { width: 18px; height: 18px; }
.button-icon { width: 16px; height: 16px; }

/* ---------- Dashboard grid ruang ---------- */
.floor-section {
    margin-top: 26px;
}

.floor-section + .floor-section {
    border-top: 2px solid #d8e0ea;
    padding-top: 8px;
}

.card-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px !important;
    margin-top: 18px;
}

.room-card {
    min-height: 185px !important;
    height: 100%;
    padding: 18px 20px !important;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.room-card h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
    margin: 10px 0 4px !important;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.room-card .small-text,
.room-card p {
    font-size: 12.7px !important;
    line-height: 1.42 !important;
    color: var(--text-muted);
}

.room-card .pill {
    font-size: 10.5px !important;
    padding: 4px 9px !important;
    white-space: nowrap;
}

.room-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.room-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.room-code {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.room-location {
    margin: 0 0 12px !important;
}

.room-card > .room-use-button,
.room-card > .inline-form {
    margin-top: auto;
}

.room-card-status {
    margin-top: 6px;
    margin-bottom: 12px;
}

.room-card-status > .room-status-item + .room-status-item {
    border-top: 1px dashed var(--card-border);
    padding-top: 9px;
    margin-top: 9px;
}

.room-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.room-info-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-muted);
    margin-top: -1px;
}

.room-info-icon.room-ready-icon {
    color: var(--success);
}

.room-time-label {
    color: var(--accent);
    font-size: 12.7px;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.room-course-label {
    font-size: 12.7px !important;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text) !important;
}

.room-meta-label {
    display: inline-block;
    min-width: 46px;
    font-weight: 700;
    color: var(--text);
}

.room-meta-value {
    color: var(--text-muted);
    font-size: 12.7px;
    font-weight: 600;
    line-height: 1.4;
}

.room-status-ready {
    color: var(--success);
    font-size: 12.7px;
    font-weight: 700;
    line-height: 1.4;
}

.room-maint-info {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12.7px;
    line-height: 1.4;
}

.room-capacity-label {
    font-weight: 600;
    color: var(--text-muted) !important;
    font-size: 12.7px;
    line-height: 1.4;
}

/* Hilangkan ikon pada statistik dashboard */
.stats .stat-card .stat-icon,
.stats .stat-card .ui-icon,
.stats .stat-card > svg {
    display: none !important;
}

/* ---------- Filter waktu seragam (Dashboard / Jadwal / TV) ---------- */
.time-filter {
    margin: 24px 0;
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    box-shadow: var(--shadow-sm);
}

/* ---------- Filter waktu di dalam kartu statistik dashboard ---------- */
.stats-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.stats-head-title h2 {
    margin-bottom: 4px;
}

.stats-filter {
    margin: 0;
    align-items: flex-end;
}

.stats-filter .time-filter-field {
    min-width: 140px;
    flex: 0 1 140px;
}

.stats-filter .time-filter-field input {
    height: 40px;
}

.stats-filter .time-filter-actions {
    margin-left: 0;
}

.stats-filter .time-filter-actions .button {
    min-width: 100px;
    min-height: 40px;
}

@media (max-width: 768px) {
    .stats-filter {
        width: 100%;
    }

    .stats-filter .time-filter-field {
        flex: 1 1 140px;
    }
}

.section-heading-date {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 15px;
    letter-spacing: 0;
}

/* ---------- Toolbar pencarian tabel (Ruang / Pengguna) ---------- */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 22px;
    border-bottom: 1px solid var(--card-border);
}

.table-toolbar-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.table-search {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px;
}

.table-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: var(--text-muted);
    pointer-events: none;
}

.table-search input {
    width: 100%;
    height: 42px;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: var(--bg-accent);
    color: var(--text);
    font-size: 14px;
    font-family: var(--font-sans);
}

.table-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.table-wrapper .room-data-table tbody tr,
.table-wrapper .user-data-table tbody tr {
    transition: opacity 0.15s ease;
}

.no-results-row td {
    padding: 0;
}

.time-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.time-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    flex: 0 1 170px;
    margin: 0;
}

.time-filter-field > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-filter-field-search {
    flex: 1 1 220px;
    min-width: 180px;
}

.time-filter-form input,
.time-filter-form select {
    height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--card-border);
    background: var(--bg-accent);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
}

.time-filter-form input[readonly] {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-muted);
    cursor: default;
}

.time-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.time-filter-actions .button {
    min-width: 110px;
}

/* Jadwal: filter satu baris menyamping, tidak boleh menumpuk */
#jadwalFilterForm {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr minmax(150px, 1.3fr) auto;
    gap: 14px;
    align-items: flex-end;
    width: 100%;
    min-width: 0;
}

#jadwalFilterForm .time-filter-field {
    min-width: 0;
    flex: none;
}

#jadwalFilterForm .time-filter-field-search {
    flex: none;
}

#jadwalFilterForm .time-filter-field input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
}

#jadwalFilterForm .time-filter-actions {
    margin-left: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

#jadwalFilterForm .time-filter-actions .button {
    min-width: 0;
    white-space: nowrap;
    padding: 8px 12px;
}

/* Biarkan tombol aksi admin turun ke baris sendiri agar filter mendapat ruang penuh */
.filter-card-header {
    flex-wrap: wrap;
}

@media (max-width: 1400px) {
    .filter-card-header .schedule-admin-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 1100px) {
    #jadwalFilterForm {
        grid-template-columns: repeat(3, 1fr) auto;
    }
    #jadwalFilterForm .time-filter-field-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1180px) {
    #jadwalFilterForm .time-filter-field > span {
        display: none;
    }
}

/* Tetap satu baris horizontal di layar kecil (id lebih spesifik dari .time-filter-form) */
@media (max-width: 768px) {
    #jadwalFilterForm {
        display: grid;
        grid-template-columns: repeat(2, 1fr) auto;
        flex-direction: row;
    }
    #jadwalFilterForm .time-filter-field,
    #jadwalFilterForm .time-filter-field-search,
    #jadwalFilterForm .time-filter-actions {
        flex-direction: row;
        width: auto;
        flex: 0 1 auto;
    }
    #jadwalFilterForm .time-filter-field-search {
        grid-column: auto;
    }
}

/* TV: filter menyatu dengan tema terang (sama seperti halaman lainnya) */

/* ---------- Status jadwal dibatalkan ---------- */
.cancelled-bg {
    background: #f8fafc;
    color: #64748b;
    border-color: #cbd5e1;
}

.cancelled-bg::before {
    background: #94a3b8;
}

.badge-warning {
    color: var(--warning) !important;
    border-color: var(--warning-border) !important;
    background: var(--warning-bg) !important;
}

/* ---------- Modal detail ruang yang benar ---------- */
.room-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 9999;
}

.room-modal {
    width: min(640px, calc(100vw - 36px));
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 24px 26px;
    position: relative;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    animation: zoomIn 0.22s ease;
}

.room-modal h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 36px 20px 0;
    padding: 0;
    border: none;
    font-weight: 800;
    color: var(--text);
}

.close-modal {
    position: absolute;
    right: 18px;
    top: 14px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text);
    background: transparent;
}

.close-modal:hover {
    background: var(--bg-accent);
}

.room-modal .modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
    margin-top: 0;
}

.room-modal .modal-grid > div {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--card-border);
}

.room-modal .modal-grid strong {
    font-size: 12.4px;
    line-height: 1.25;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    flex-basis: 98px;
    text-align: left;
    position: relative;
    padding-right: 14px;
}

.room-modal .modal-grid strong::after {
    content: ':';
    color: var(--text-muted);
    position: absolute;
    right: 0;
    top: 0;
}

.room-modal .modal-grid p {
    margin: 0;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    word-break: normal;
    overflow-wrap: anywhere;
}

.room-modal .modal-info {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--card-border);
    font-size: 13.5px;
    line-height: 1.42;
    color: var(--text);
}

.room-modal .modal-info strong {
    font-weight: 800;
}

.room-modal #modalInfo {
    color: var(--text-muted);
}

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

    .room-modal {
        width: calc(100vw - 28px);
        padding: 22px;
    }
}

@media (max-width: 1180px) {
    .card-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .card-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
===============================================================================
10 — PERBAIKAN IKON DAN RESPONSIVE FINAL
===============================================================================
- Ukuran ikon status dan alert
- Perilaku tabel pada layar kecil
- Tablet (maks. 992px)
- HP (maks. 768px)
- HP kecil/login (maks. 576px)

Edit file ini saat ingin mengatur tampilan mobile tanpa mengubah desktop.
===============================================================================
*/

/* ==========================================================================
   FIX STATUS SUMMARY ICONS
   Merapikan ikon pada ringkasan Total, Admin, Dosen, Tersedia, dan Perbaikan.
   ========================================================================== */

.status-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.status-chip .chip-icon,
.chip-icon {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: inline-block !important;
    flex: 0 0 16px !important;
}

.status-chip svg {
    width: 16px !important;
    height: 16px !important;
}

/* ========================================================================== 
   RESPONSIVE FIX FINAL - Login alert, icon, dan mobile layout
   ========================================================================== */

/* Merapikan ikon alert yang sebelumnya membesar */
.alert {
    width: 100%;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: anywhere;
}

.alert .alert-icon,
.alert-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    flex: 0 0 22px !important;
    display: inline-block !important;
    margin-top: 1px;
}

.alert svg {
    width: 22px !important;
    height: 22px !important;
}

/* Ukuran dasar ikon agar tidak ikut membesar di browser tertentu */
.nav-icon,
.button-icon,
.chip-icon,
.ui-icon,
.text-icon,
.brand-icon {
    flex-shrink: 0;
}

/* Tabel tetap rapi di layar kecil */
.table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 760px;
}

/* Layout tombol aksi di tabel tetap terbaca */
td .button,
td .button-outlined,
td form .button {
    white-space: nowrap;
}

/* Responsive tablet */
@media (max-width: 992px) {
    .page {
        padding: 28px 18px;
    }

    .card {
        padding: 24px;
    }

    .filter-card-header,
    .room-page-header {
        align-items: flex-start;
    }

    .filter-form {
        width: 100%;
        min-width: 0;
    }

    .status-summary {
        width: 100%;
    }
}

/* Responsive HP */
@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .page {
        padding: 18px 12px;
    }

    .container {
        max-width: 100%;
    }

    .app-header,
    .nav,
    .card,
    .table-wrapper,
    .time-filter {
        border-radius: 14px;
    }

    .app-header-top {
        padding: 14px 16px;
        gap: 12px;
    }

    .status-pill {
        margin-right: 8px;
        font-size: 11.5px;
        padding: 5px 10px;
    }

    .app-name {
        font-size: 22px;
    }

    .nav {
        padding: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-inner {
        flex-direction: row;
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .nav-button {
        width: auto;
        min-width: 150px;
        justify-content: center;
        padding: 10px 14px;
        font-size: 13px;
    }

    .card {
        padding: 22px 18px;
    }

    .card h2,
    .section-heading {
        font-size: 18px;
        line-height: 1.35;
    }

    .status-summary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .status-chip {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        padding: 9px 12px;
        font-size: 12px;
    }

    .filter-card-header,
    .simulation-form,
    .time-filter-form,
    .room-filter,
    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .time-filter-field,
    .time-filter-field-search,
    .simulation-field,
    .room-filter input,
    .room-filter select {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
    }

    .button,
    .formal-btn,
    .simulation-submit {
        width: 100%;
        min-height: 44px;
    }

    .modal-backdrop {
        padding: 14px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal {
        width: 100%;
        max-width: 100%;
        padding: 22px 18px;
        margin: 20px 0;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .toast {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    .scroll-top-btn {
        right: 16px;
        bottom: 16px;
    }
}

/* Responsive khusus halaman login dan halaman pilihan peran */
@media (max-width: 576px) {
    .formal-login-wrapper {
        min-height: 100dvh;
        justify-content: flex-start;
        padding: 24px 12px;
    }

    .formal-login-card {
        max-width: 100%;
        padding: 30px 20px;
        border-radius: 18px;
    }

    .formal-logo {
        font-size: 26px;
    }

    .formal-faculty {
        font-size: 10px;
        letter-spacing: 1.6px;
        margin-bottom: 22px;
    }

    .formal-title {
        font-size: 21px;
        line-height: 1.35;
    }

    .formal-desc {
        font-size: 13px;
        margin-bottom: 22px;
    }

    .formal-demo-box {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .landing-shell {
        min-height: 100dvh;
        align-items: flex-start;
        padding: 28px 0;
    }

    .landing-title {
        font-size: clamp(42px, 16vw, 72px);
        letter-spacing: -1px;
    }

    .landing-subtitle {
        font-size: 15.5px;
        line-height: 1.6;
        padding: 0 8px;
    }

    .landing-faculty {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 28px;
    }

    .landing-role-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        max-width: 100%;
        padding: 0;
    }

    .role-card {
        padding: 24px 20px;
        border-radius: 18px;
    }

    .role-heading {
        align-items: flex-start;
        gap: 12px;
    }

    .role-card h2 {
        font-size: 21px;
    }

    .role-icon {
        width: 44px;
        height: 44px;
    }

    .status-summary {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .confirm-dialog-actions {
        flex-direction: column;
    }
}

/*
===============================================================================
11 — TABEL JADWAL DAN SISTEM TOMBOL FINAL
===============================================================================
PETA TOMBOL LENGKAP:
1. .button                   = tombol utama
2. .button-outlined          = tombol outline
3. .button-danger            = tombol bahaya utama
4. .room-use-button          = tombol “Gunakan Ruangan”
5. .badge-delete             = tombol “Hapus” pada tabel
6. .action-button            = tombol aksi dalam baris jadwal
7. .formal-btn               = tombol login (gaya dasar ada di file 02)
8. .scroll-top-btn           = tombol panah ke atas (ada di file 08)

File ini mengatur ukuran akhir, lebar minimum, susunan toolbar, dan responsive
tombol. Warna dasar tombol tetap di file 03 dan warna global di file 00.
===============================================================================
*/

/* ==========================================================
   Perapihan Tabel Jadwal - Compact Dashboard Layout
   ========================================================== */

.table-wrapper {
    overflow-x: auto;
}

.table-wrapper table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrapper th {
    font-size: 13px;
    letter-spacing: .04em;
    padding: 14px 12px;
    white-space: nowrap;
}

.table-wrapper td {
    padding: 14px 12px;
    vertical-align: middle;
    font-size: 14px;
}

.table-wrapper tbody tr:hover {
    background: rgba(79,70,229,.03);
}

.table-wrapper td:nth-child(2) {
    min-width: 110px;
    white-space: nowrap;
}

.table-wrapper td:nth-child(3) {
    min-width: 150px;
}

.table-wrapper td:nth-child(5) {
    max-width: 170px;
}

.table-wrapper td:nth-child(6) {
    white-space: nowrap;
}

.table-wrapper td:last-child {
    min-width: 150px;
    white-space: nowrap !important;
}

.table-wrapper td:last-child .button,
.table-wrapper td:last-child button {
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 8px;
    margin: 2px;
}

.table-wrapper .pill,
.table-wrapper .badge {
    font-size: 12px;
    padding: 5px 9px;
}

@media (max-width: 1200px) {
    .table-wrapper td:last-child {
        white-space: normal !important;
    }
}

/* ========================================================================== 
   JADWAL: AKSI BERDASARKAN ROLE
   ========================================================================== */
.schedule-action-cell {
    min-width: 190px;
    white-space: normal !important;
}

.schedule-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.schedule-row-actions .inline-form {
    display: inline-flex;
    margin: 0;
}

.schedule-row-actions .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    margin: 0 !important;
    white-space: nowrap;
}

.schedule-row-actions .badge-delete {
    margin-left: 0;
}

.action-note {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.035);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.action-note-expired {
    background: rgba(148, 163, 184, 0.10);
}

@media (max-width: 1200px) {
    .schedule-action-cell {
        min-width: 170px;
    }
}

/* ========================================================================== 
   FINAL BUTTON SYSTEM - konsisten, rapi, dan responsif
   ========================================================================== */

/* Semua tombol utama memiliki tinggi visual yang sama. */
.button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

.button .button-icon,
.button > .button-icon {
    width: 16px;
    height: 16px;
}

/* Toolbar aksi Admin (Jadwal): tombol ditempatkan di sisi kanan. */
.schedule-admin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end;
}

.schedule-admin-actions .button {
    min-width: 138px;
}

/* Tombol penggunaan ruang selalu memenuhi lebar area aksi kartu. */
.room-use-button {
    width: 100%;
    min-height: 40px;
    padding: 8px 14px;
    margin-top: 12px;
    background: #f0fdf4;
    color: var(--success);
    border: 1px solid #86efac;
    border-radius: 12px;
    font-weight: 700;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.room-use-button:hover {
    background: var(--success);
    border-color: var(--success);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.2);
}

/* Aksi tabel dibuat seukuran dan sejajar. */
.schedule-action-cell {
    min-width: 210px;
}

.schedule-row-actions {
    gap: 8px;
    justify-content: flex-start;
}

.schedule-row-actions .action-button {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.15;
}

.action-note {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
}

/* Halaman data master: tombol aksi tidak saling menempel dan tidak meloncat posisi. */
.table-actions,
.user-table-actions {
    gap: 8px;
    align-items: center;
}

.table-actions .button,
.user-table-actions .button,
.room-data-table .button,
.user-data-table .button {
    min-height: 36px;
    padding: 7px 11px;
    border-radius: 9px;
    font-size: 12px;
}

/* Tombol di footer modal memiliki lebar minimum yang seimbang. */
.modal-actions {
    align-items: center;
    gap: 10px;
}

.modal-actions .button {
    min-width: 112px;
}

/* Dialog konfirmasi: kedua tombol seimbang. */
.confirm-dialog-actions .button {
    min-width: 120px;
}

@media (max-width: 1100px) {
    .schedule-admin-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .time-filter-actions,
    .schedule-admin-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .time-filter-actions .button,
    .schedule-admin-actions .button {
        width: 100%;
        min-width: 0;
    }

    .schedule-row-actions {
        align-items: stretch;
    }

    .schedule-row-actions .inline-form,
    .schedule-row-actions .action-button {
        width: 100%;
    }

    .modal-actions .button,
    .confirm-dialog-actions .button {
        width: 100%;
        min-width: 0;
    }
}

/* Header halaman data master: tombol utama rata kanan dan seukuran. */
.room-page-header > .button,
.room-page-header .flex-end .button {
    min-width: 148px;
}

.app-header .app-logout-btn {
    min-height: 40px;
    padding: 0 15px;
}

/* ==========================================================================
   TV MONITOR PAGE — Samakan dengan halaman lain
   ========================================================================== */

.page.tv-page {
    padding: 10px 18px;
    background: #eef2ff;
    font-family: var(--font-sans);
}

.page.tv-page .container {
    max-width: 100%;
    animation: none;
}

/* ---------- HEADER ---------- */

.tv-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px 22px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}

.tv-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
}

.tv-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
    min-width: 0;
}

.tv-header-center {
    text-align: center;
    justify-self: center;
}

.tv-header-right {
    display: flex;
    align-items: center;
    justify-self: end;
}

.tv-header-icon {
    width: 28px;
    height: 28px;
    color: var(--primary);
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.14);
    padding: 5px;
    border-radius: 9px;
    flex-shrink: 0;
}

.tv-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.tv-subtitle {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 6px 0 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.tv-sep {
    color: var(--card-border);
}

.tv-day {
    color: var(--text);
    font-weight: 700;
}

.tv-date {
    color: var(--text-muted);
    font-weight: 500;
}

.tv-clock {
    color: var(--accent);
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 15px;
}

.tv-refresh-info {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: rgba(8, 145, 178, 0.06);
    border-radius: 999px;
    border: 1px solid rgba(8, 145, 178, 0.14);
}

.tv-refresh-icon {
    width: 14px;
    height: 14px;
    color: var(--accent);
    animation: tvSpin 3s linear infinite;
}

.tv-refresh-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

@keyframes tvSpin {
    to { transform: rotate(360deg); }
}

#tvRefreshText {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-family: var(--font-mono);
    min-width: 18px;
    text-align: center;
}

.tv-refresh-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ---------- FILTER ---------- */

.tv-page .time-filter {
    margin: 0 0 12px;
}

.tv-filter-input {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-family: inherit;
}

.tv-filter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.tv-filter-btn,
.tv-now-btn {
    font-size: 12px !important;
    padding: 0 16px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
}

.tv-filter-btn {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
}

.tv-filter-btn:hover {
    background: var(--primary-hover) !important;
}

.tv-now-btn {
    background: #ffffff !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--card-border) !important;
}

.tv-now-btn:hover {
    background: var(--bg-accent) !important;
    color: var(--text) !important;
}

/* ---------- STATS ---------- */

.tv-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.tv-stat {
    flex: 1;
    background: var(--bg-accent);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
}

.tv-stat:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.04);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
}

.tv-stat-icon {
    display: none;
}

.tv-stat-num {
    font-size: 20px;
    font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.2;
    color: var(--text);
}

.tv-stat-avail .tv-stat-num { color: var(--success); }
.tv-stat-used .tv-stat-num { color: var(--danger); }
.tv-stat-maint .tv-stat-num { color: var(--warning); }
.tv-stat-total .tv-stat-num { color: var(--primary); }

.tv-stat-lbl {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ---------- FLOOR ---------- */

.tv-floor {
    margin-bottom: 16px;
}

.tv-lantai-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 7px;
    padding: 5px 14px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-top: 4px solid #4f46e5;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.tv-floor-icon {
    width: 16px;
    height: 16px;
    color: #4f46e5;
    flex-shrink: 0;
}

.tv-floor-count {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-left: auto;
}

/* ---------- CARD ROW ---------- */

.tv-card-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

/* ---------- CARD ---------- */

.tv-card {
    min-height: 185px;
    height: 100%;
    padding: 18px 20px !important;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tv-card .room-code {
    font-size: 10px;
}

.tv-card h3 {
    font-size: 13.5px !important;
    margin: 7px 0 3px !important;
}

.tv-card .room-time-label,
.tv-card .room-course-label,
.tv-card .room-meta-value,
.tv-card .room-status-ready,
.tv-card .room-maint-info,
.tv-card .room-capacity-label {
    font-size: 11px !important;
}

.tv-card .pill {
    font-size: 9.5px !important;
    padding: 3px 8px !important;
}

/* ---------- FOOTER ---------- */

.tv-footer {
    display: flex;
    justify-content: space-between;
    padding: 6px 0 2px;
    font-size: 11px;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1500px) {
    .tv-card-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .tv-card-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .tv-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .tv-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 12 — FITUR MATRIKS JADWAL (GRID VIEW EXCEL-STYLE) ---------- */

.schedule-view-switcher {
    display: inline-flex;
    align-items: center;
    background: #e2e8f0;
    padding: 3px;
    border-radius: 8px;
    gap: 4px;
    margin-right: 12px;
}

.view-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.view-tab-btn:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}

.view-tab-btn.active {
    background: #ffffff;
    color: #4f46e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.view-tab-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Excel Header Box & Subheader Legend */
.matrix-banner-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px 20px;
    margin-top: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.matrix-header-box {
    background: #f1f5f9;
    border: 1px solid #94a3b8;
    text-align: center;
    padding: 10px 16px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.matrix-header-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.matrix-legend-bar {
    background: #fef08a;
    border: 1px solid #ca8a04;
    padding: 4px 12px;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #713f12;
    border-radius: 3px;
    margin-bottom: 12px;
}

.matrix-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    text-align: center;
    color: #000000;
    table-layout: fixed;
    min-width: 900px;
}

.matrix-table th,
.matrix-table td {
    border: 1px solid #64748b;
    padding: 4px 6px;
    vertical-align: middle;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.matrix-table th {
    background-color: #cbd5e1;
    font-weight: 800;
    color: #0f172a;
    font-size: 12px;
    height: 34px;
    text-transform: uppercase;
}

.matrix-table th.col-hari {
    width: 80px;
}

.matrix-table th.col-jam {
    width: 95px;
}

.matrix-table td.cell-hari {
    background-color: #e2e8f0;
    font-weight: 800;
    font-size: 12px;
    color: #0f172a;
    text-transform: uppercase;
}

.matrix-table td.cell-jam {
    background-color: #f1f5f9;
    font-weight: 700;
    font-size: 11px;
    color: #1e293b;
    white-space: nowrap;
}

.matrix-table tr.isoma-row td {
    background-color: #e2e8f0;
    font-weight: 800;
    font-size: 12px;
    color: #0f172a;
    letter-spacing: 2px;
    padding: 6px;
}

/* Sel Jadwal dalam Grid */
.matrix-slot-empty {
    background-color: #ffffff;
}

.matrix-course-block {
    padding: 4px;
    border-radius: 3px;
    height: 100%;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.matrix-course-block:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.matrix-class-tag {
    font-weight: 800;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.matrix-course-name {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: 3px;
}

.matrix-lecturer-name {
    font-weight: 500;
    font-size: 10px;
    line-height: 1.2;
    opacity: 0.95;
}

/* Palet Warna Terkurasi untuk Sel Jadwal (Menyerupai Gambar Sampel) */
.mc-cyan { background-color: #38bdf8; color: #0f172a; }
.mc-blue { background-color: #60a5fa; color: #0f172a; }
.mc-indigo { background-color: #818cf8; color: #ffffff; }
.mc-magenta { background-color: #f43f5e; color: #ffffff; }
.mc-purple { background-color: #c084fc; color: #0f172a; }
.mc-pink { background-color: #f472b6; color: #0f172a; }
.mc-red { background-color: #ef4444; color: #ffffff; }
.mc-orange { background-color: #fb923c; color: #0f172a; }
.mc-amber { background-color: #f59e0b; color: #0f172a; }
.mc-yellow { background-color: #facc15; color: #0f172a; }
.mc-lime { background-color: #a3e635; color: #0f172a; }
.mc-green { background-color: #4ade80; color: #0f172a; }
.mc-emerald { background-color: #34d399; color: #0f172a; }
.mc-teal { background-color: #2dd4bf; color: #0f172a; }
.mc-darkgreen { background-color: #3f6212; color: #ffffff; }
.mc-darkblue { background-color: #1e3a8a; color: #ffffff; }

/* Filter & Controls Khusus Matriks */
.matrix-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.matrix-prodi-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

.matrix-prodi-filter select {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    background: #ffffff;
}

@media print {
    .app-user, .nav, .jadwal-filter-section, .schedule-view-switcher, .modal-backdrop, .schedule-admin-actions {
        display: none !important;
    }
    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .matrix-banner-card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .matrix-table-container {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    .matrix-table th, .matrix-table td {
        border: 1px solid #000 !important;
    }
}