/*
==========================================================
SMANSASOO Academic Portal
Settings Drawer Stylesheet
Version : 1.0.0
==========================================================
Styling untuk js/settings-drawer.js. Komponen toggle
(.theme-toggle) SENGAJA tidak didefinisikan ulang di sini —
itu sudah ada di css/theme.css supaya satu sumber kebenaran.
File ini HARUS dimuat setelah css/theme.css.

Warna semuanya lewat var(--...) dari variables.css, jadi
otomatis ikut gelap kalau html[data-theme="dark"] aktif
(lihat css/theme.css).
==========================================================
*/

/* ==========================================
   TOMBOL TRIGGER (selalu kelihatan)
========================================== */

.settings-trigger{

    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;

    border:1px solid var(--border-light);
    border-radius:50%;

    background:var(--surface);
    color:var(--text-light);

    box-shadow:var(--shadow-md);
    cursor:pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.settings-trigger:hover{
    color:var(--primary);
    border-color:var(--primary-light);
    transform:rotate(25deg);
}

.settings-trigger[aria-expanded="true"]{
    color:var(--primary);
}

/* ==========================================
   OVERLAY (backdrop gelap di belakang drawer)
========================================== */

.settings-drawer-overlay{

    position:fixed;
    inset:0;
    z-index:1190;

    background:rgba(0,0,0,.35);

    opacity:0;
    pointer-events:none;

    transition:opacity var(--transition);

}

.settings-drawer-overlay.open{
    opacity:1;
    pointer-events:auto;
}

/* ==========================================
   PANEL DRAWER
   Default: digeser penuh keluar layar (kanan).
   ".open" -> masuk ke posisi normal.
========================================== */

.settings-drawer{

    position:fixed;
    top:0;
    right:0;
    z-index:1195;

    width:min(340px, 88vw);
    height:100vh;
    height:100dvh;

    background:var(--surface);
    border-left:1px solid var(--border-light);
    box-shadow:var(--shadow-lg);

    display:flex;
    flex-direction:column;

    transform:translateX(100%);
    transition:transform var(--transition-slow, .35s) ease;

}

.settings-drawer.open{
    transform:translateX(0);
}

.settings-drawer-head{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:var(--space-lg);
    border-bottom:1px solid var(--border-light);

}

.settings-drawer-head strong{
    font-size:var(--font-lg);
    color:var(--text);
}

.settings-close{

    display:flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;

    border:none;
    border-radius:50%;

    background:var(--surface-alt);
    color:var(--text-light);

    font-size:1.25rem;
    line-height:1;
    cursor:pointer;

    transition:background var(--transition-fast), color var(--transition-fast);

}

.settings-close:hover{
    background:var(--border-light);
    color:var(--text);
}

.settings-drawer-body{
    padding:var(--space-lg);
    overflow-y:auto;
}

.settings-row{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-md);

    padding:var(--space-md) 0;

}

.settings-row-text{
    display:flex;
    flex-direction:column;
    gap:.2rem;
}

.settings-row-title{
    font-size:var(--font-sm);
    font-weight:var(--weight-semibold);
    color:var(--text);
}

.settings-row-desc{
    font-size:var(--font-xs);
    color:var(--text-muted);
}

/* ==========================================
   MENU ADMIN (dalam .settings-row--stack)
========================================== */

.settings-row--stack{
    flex-direction:column;
    align-items:stretch;
}

.settings-admin-list{
    display:grid;
    gap:var(--space-sm);
    margin:var(--space-sm) 0 0;
    padding:0;
    list-style:none;
}

.settings-admin-item{

    display:grid;
    grid-template-columns:36px 1fr auto;
    align-items:center;
    gap:var(--space-sm);

    width:100%;
    min-height:56px;
    padding:var(--space-sm) var(--space-sm);
    text-align:left;

    border:1px solid var(--border-light);
    border-radius:var(--radius-md);

    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;

    transition:background var(--transition-fast), border-color var(--transition-fast);

}

.settings-admin-item:hover{
    background:var(--surface-alt);
    border-color:var(--primary-light);
}

.settings-admin-ico{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    background:var(--surface-alt);
    color:var(--primary);
}

.settings-admin-text{
    display:flex;
    flex-direction:column;
    gap:.15rem;
    min-width:0;
}

.settings-admin-name{
    font-size:var(--font-sm);
    font-weight:var(--weight-semibold);
    color:var(--text);
    line-height:1.2;
}

.settings-admin-desc{
    font-size:var(--font-xs);
    color:var(--text-muted);
    line-height:1.3;
}

.settings-admin-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:3px 8px;
    border-radius:999px;
    background:var(--surface-alt);
    color:var(--primary);
    font-size:.7rem;
    font-weight:var(--weight-semibold);
    white-space:nowrap;
}

.settings-admin-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-sm);
    margin-top:var(--space-sm);
    padding-top:var(--space-sm);
    border-top:1px solid var(--border-light);
    color:var(--text-muted);
    font-size:var(--font-xs);
}

.settings-admin-status[hidden]{
    display:none;
}

.settings-admin-logout{
    min-height:32px;
    padding:0 var(--space-sm);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:var(--font-xs);
    font-weight:var(--weight-semibold);
    cursor:pointer;
}

.settings-admin-logout:hover{
    background:var(--surface-alt);
}

@media (max-width: 640px){

    .settings-trigger{
        right:16px;
        bottom:16px;
    }

}