/* =====================================================================
   UMT LMS — Tema warna mengikuti logo Universitas Muhammadiyah Tangerang
   Biru royal, kuning emas, hijau aksen, putih.
   ===================================================================== */
:root {
    --umt-blue: #15357a;
    --umt-blue-700: #102b63;
    --umt-blue-900: #0b1f49;
    --umt-blue-300: #3a5bb0;
    --umt-gold: #f5c518;
    --umt-gold-dark: #d4a800;
    --umt-green: #2e9e3a;
    --umt-green-dark: #237b2c;
    --umt-bg: #f4f6fb;
    --umt-sidebar-w: 256px;

    --bs-primary: #15357a;
    --bs-primary-rgb: 21, 53, 122;
}

* { scrollbar-width: thin; scrollbar-color: var(--umt-blue-300) transparent; }

body {
    background: var(--umt-bg);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: #1f2733;
}

a { color: var(--umt-blue); }
a:hover { color: var(--umt-blue-700); }

/* ----------------------------- Buttons -------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--umt-blue);
    --bs-btn-border-color: var(--umt-blue);
    --bs-btn-hover-bg: var(--umt-blue-700);
    --bs-btn-hover-border-color: var(--umt-blue-700);
    --bs-btn-active-bg: var(--umt-blue-900);
    --bs-btn-active-border-color: var(--umt-blue-900);
    --bs-btn-disabled-bg: var(--umt-blue);
    --bs-btn-disabled-border-color: var(--umt-blue);
}
.btn-gold {
    --bs-btn-color: #3a2e00;
    --bs-btn-bg: var(--umt-gold);
    --bs-btn-border-color: var(--umt-gold);
    --bs-btn-hover-color: #3a2e00;
    --bs-btn-hover-bg: var(--umt-gold-dark);
    --bs-btn-hover-border-color: var(--umt-gold-dark);
    --bs-btn-active-bg: var(--umt-gold-dark);
    font-weight: 600;
}
.btn-success {
    --bs-btn-bg: var(--umt-green);
    --bs-btn-border-color: var(--umt-green);
    --bs-btn-hover-bg: var(--umt-green-dark);
    --bs-btn-hover-border-color: var(--umt-green-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--umt-blue);
    --bs-btn-border-color: var(--umt-blue);
    --bs-btn-hover-bg: var(--umt-blue);
    --bs-btn-hover-border-color: var(--umt-blue);
}
.text-primary { color: var(--umt-blue) !important; }
.bg-primary { background-color: var(--umt-blue) !important; }
.text-gold { color: var(--umt-gold-dark) !important; }
.bg-gold { background-color: var(--umt-gold) !important; }

/* ----------------------------- Layout --------------------------------- */
.umt-shell { display: flex; min-height: 100vh; }

.umt-sidebar {
    width: var(--umt-sidebar-w);
    min-width: var(--umt-sidebar-w);
    background: linear-gradient(180deg, var(--umt-blue) 0%, var(--umt-blue-900) 100%);
    color: #dde6ff;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}
.umt-sidebar .brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.umt-sidebar .brand img { width: 42px; height: 42px; }
.umt-sidebar .brand .brand-text { line-height: 1.05; }
.umt-sidebar .brand .brand-text strong { color: #fff; font-size: 1.05rem; letter-spacing: .2px; }
.umt-sidebar .brand .brand-text span { color: var(--umt-gold); font-size: .72rem; }

.umt-nav { padding: .75rem .6rem; overflow-y: auto; flex: 1; }
.umt-nav .nav-section {
    color: #9fb3e6; font-size: .68rem; text-transform: uppercase;
    letter-spacing: 1px; margin: 1rem .6rem .35rem;
}
.umt-nav a {
    display: flex; align-items: center; gap: .7rem;
    color: #cdd9f5; text-decoration: none;
    padding: .58rem .8rem; border-radius: .55rem;
    font-size: .92rem; margin-bottom: .15rem;
    transition: background .15s, color .15s;
}
.umt-nav a .bi { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.umt-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.umt-nav a.active {
    background: var(--umt-gold);
    color: #3a2e00; font-weight: 600;
    box-shadow: 0 2px 8px rgba(245,197,24,.35);
}
.umt-sidebar .sidebar-foot {
    padding: .8rem 1rem; font-size: .72rem; color: #8ea4d8;
    border-top: 1px solid rgba(255,255,255,.1);
}

.umt-main {
    flex: 1;
    margin-left: var(--umt-sidebar-w);
    display: flex; flex-direction: column; min-width: 0;
}
.umt-topbar {
    background: #fff;
    border-bottom: 1px solid #e6eaf2;
    padding: .65rem 1.25rem;
    display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 1030;
}
.umt-topbar .page-title { font-weight: 600; color: var(--umt-blue); margin: 0; font-size: 1.05rem; }
.umt-content { padding: 1.5rem; flex: 1; }

.role-badge {
    background: var(--umt-gold); color: #3a2e00;
    font-size: .7rem; font-weight: 700; padding: .2rem .55rem;
    border-radius: 999px; text-transform: uppercase; letter-spacing: .3px;
}

/* ----------------------------- Cards ---------------------------------- */
.card { border: 1px solid #e9edf5; border-radius: .8rem; box-shadow: 0 1px 2px rgba(16,30,70,.04); }
.card-header { background: #fff; border-bottom: 1px solid #eef1f7; font-weight: 600; color: var(--umt-blue); }

.stat-card { border-radius: .9rem; overflow: hidden; border: none; color: #fff; }
.stat-card .stat-icon { font-size: 1.8rem; opacity: .85; }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: .8rem; opacity: .9; }
.stat-blue   { background: linear-gradient(135deg, var(--umt-blue), var(--umt-blue-300)); }
.stat-gold   { background: linear-gradient(135deg, var(--umt-gold-dark), var(--umt-gold)); color: #3a2e00; }
.stat-green  { background: linear-gradient(135deg, var(--umt-green-dark), var(--umt-green)); }
.stat-navy   { background: linear-gradient(135deg, var(--umt-blue-900), var(--umt-blue-700)); }

/* ----------------------------- Tables --------------------------------- */
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { background: #f0f3fa; color: var(--umt-blue-700); font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; border-bottom: 2px solid #dde4f1; }

/* ----------------------------- Login ---------------------------------- */
.umt-login {
    min-height: 100vh; display: grid; place-items: center;
    background: radial-gradient(1200px 600px at 80% -10%, var(--umt-blue-300), transparent),
                linear-gradient(135deg, var(--umt-blue) 0%, var(--umt-blue-900) 100%);
    padding: 1.5rem;
}
.umt-login .login-card {
    width: 100%; max-width: 410px; background: #fff;
    border-radius: 1rem; box-shadow: 0 20px 60px rgba(5,15,45,.45);
    overflow: hidden;
}
.umt-login .login-head {
    text-align: center; padding: 2rem 1.5rem 1rem;
    border-bottom: 4px solid var(--umt-gold);
}
.umt-login .login-head img { width: 84px; height: 84px; margin-bottom: .6rem; }
.umt-login .login-head h1 { font-size: 1.25rem; color: var(--umt-blue); font-weight: 700; margin: 0; }
.umt-login .login-head p { color: #6b778c; font-size: .85rem; margin: .25rem 0 0; }
.umt-login .login-body { padding: 1.5rem; }
.umt-login .form-control { padding: .65rem .85rem; }

/* ----------------------------- Misc ----------------------------------- */
.code-chip {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    background: var(--umt-blue); color: #fff; letter-spacing: 2px;
    padding: .3rem .7rem; border-radius: .5rem; font-weight: 700; font-size: 1.1rem;
}
.timeline-meeting {
    border-left: 3px solid var(--umt-gold);
    padding-left: 1rem; margin-left: .5rem;
}
.avatar-circle {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--umt-gold); color: #3a2e00;
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
}
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .umt-sidebar { transform: translateX(-100%); }
    .umt-sidebar.open { transform: translateX(0); }
    .umt-main { margin-left: 0; }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(5,15,45,.5); z-index: 1035;
    }
}