/* =========================================================
   Dashboard Theme Override — Indigo/Blue modern style
   Loaded AFTER custom-style.css so these rules win.
   Applies to every page that uses main_layout.php
   (Admin & Guru share this layout, so both get restyled).
========================================================= */

:root{
    --dash-primary:#4c5fd9;
    --dash-primary-dark:#3a49b8;
    --dash-primary-light:#7c8ce8;
    --dash-bg:#eef1fb;
    --dash-sidebar-start:#5865d9;
    --dash-sidebar-end:#3c47b0;
    --dash-text-dark:#17224d;
    --dash-text-muted:#8b93a7;
    --dash-radius-lg:20px;
    --dash-radius-md:14px;
    --dash-shadow:0 10px 26px rgba(60,72,180,.14);
}

body#main{
    background:var(--dash-bg);
}

/* ---------- Top bar ---------- */
#topbar.bg-dark,
#topbar{
    background:#fff !important;
    box-shadow:0 2px 14px rgba(23,34,77,.08);
    border-bottom:none;
}
#topbar .navbar-brand{
    color:var(--dash-text-dark) !important;
    font-weight:700;
}
#topbar .navbar-brand img{
    filter:none;
}
#sidebarCollapse{
    background:var(--dash-bg);
    border:none;
    border-radius:10px;
}
#sidebarCollapse .navbar-toggler-icon{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%234c5fd9' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.topbar-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--dash-bg);
    color:var(--dash-primary);
    margin-right:10px;
    font-size:15px;
}
#topbar .nav-item.dropdown > .nav-link{
    color:var(--dash-text-dark) !important;
    display:flex;
    align-items:center;
}
#topbar .avatar-icon{
    background:var(--dash-primary);
    color:#fff;
    width:32px;height:32px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:8px;
}

/* ---------- Sidebar ---------- */
#sidebar.bg-dark,
#sidebar{
    background:linear-gradient(180deg,var(--dash-sidebar-start) 0%,var(--dash-sidebar-end) 100%) !important;
    border-radius:0 24px 24px 0;
    box-shadow:var(--dash-shadow);
    border-right:none;
    overflow-x:hidden; /* always, not just when collapsed -- avoids a flash of
                           wrapped text mid-transition while the width shrinks */
    /* On desktop the sidebar toggles via `width` (250px <-> 80px). On mobile
       it toggles via `margin-left` instead (slides on/off screen), so both
       properties need to be listed here -- otherwise whichever one isn't
       listed changes instantly with no animation, which is what was
       happening on mobile. */
    transition:width .3s ease, margin-left .3s ease;
}
#main #main-content{
    transition:width .3s ease;
}
/* Fade the profile name/dropdown when collapsed (menu labels stay visible --
   see the "Collapsed / mini sidebar" section below, which now keeps a small
   label under each icon instead of hiding it, to match the requested style). */
#sidebar .menu-profile .user-name,
#sidebar .menu-profile .menu-dropdown{
    transition:opacity .15s ease, max-height .2s ease;
    opacity:1;
}
#sidebar.active .menu-profile .user-name,
#sidebar.active .menu-profile .menu-dropdown{
    opacity:0 !important;
}
#sidebar .menu-profile .avatar .avatar-icon,
#sidebar .navbar-nav a.nav-link .fa,
#sidebar .navbar-nav a.nav-link .material-icons,
#sidebar .navbar-nav a.nav-link .icon{
    transition:width .3s ease, height .3s ease, font-size .3s ease, margin .3s ease;
}
#sidebar .menu-profile{
    padding:22px 14px 18px;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.14);
    margin-bottom:10px;
}
#sidebar .menu-profile .avatar .avatar-icon{
    width:56px;height:56px;
    border-radius:50%;
    background:rgba(255,255,255,.16);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:10px;
}
#sidebar .menu-profile .user-name{
    color:#fff;
    font-weight:700;
    font-size:14.5px;
    margin-bottom:8px;
}
#sidebar .menu-profile .user-name small{
    display:block;
    color:rgba(255,255,255,.65) !important;
    font-weight:400;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.5px;
}
#sidebar .menu-profile .dropdown-toggle{
    background:rgba(255,255,255,.18);
    border:none;
}

#sidebar .navbar-nav{
    padding:6px 14px;
}
#sidebar > .navbar-nav:first-child{
    padding-top:16px;
}
#sidebar .navbar-nav a.nav-link{
    color:rgba(255,255,255,.85) !important;
    border-bottom:none !important;
    border-radius:12px;
    margin-bottom:4px;
    padding:11px 14px !important;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:500;
    transition:all .15s ease;
}
#sidebar .navbar-nav a.nav-link .fa,
#sidebar .navbar-nav a.nav-link .material-icons,
#sidebar .navbar-nav a.nav-link .icon{
    width:20px;
    text-align:center;
    font-size:16px;
}
#sidebar .navbar-nav a.nav-link:hover{
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
}
#sidebar .navbar-nav li.nav-item > a.nav-link.active,
#sidebar .navbar-nav li.nav-item.active > a.nav-link{
    background:#fff !important;
    color:var(--dash-primary-dark) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
}
#sidebar .navbar-nav a.dropdown-toggle::after{
    margin-left:auto;
    border-top-color:rgba(255,255,255,.7);
}
#sidebar .submenu .nav-link{
    font-size:13px;
    opacity:.9;
}

/* Collapsed / mini sidebar state keeps same palette */
#sidebar.active .menu-profile .user-name{ color:#fff; }

/* ---------- Main content area ---------- */
#main #main-content{
    background:transparent;
}
#page-content{
    padding:20px 26px 0;
}

/* ---------- Footer ---------- */
footer.footer{
    background:transparent;
    border-top:none !important;
    color:var(--dash-text-muted);
}

/* ---------- Buttons / links / accents recolored to indigo ---------- */
.btn-primary,
.btn-success{
    background:var(--dash-primary) !important;
    border-color:var(--dash-primary) !important;
}
.btn-primary:hover,
.btn-success:hover{
    background:var(--dash-primary-dark) !important;
    border-color:var(--dash-primary-dark) !important;
}
a{ color:var(--dash-primary); }
a:hover{ color:var(--dash-primary-dark); }
.text-success{ color:var(--dash-primary) !important; }
.bg-success{ background-color:var(--dash-primary) !important; }
.page-link{ background-color:var(--dash-primary); }
.page-item.active .page-link{ background-color:var(--dash-primary-dark); }

/* ---------- Dashboard KPI cards (Home page) ---------- */
.dashboard-card-col{
    margin-bottom:20px;
}
.dashboard-card-col .record-count{
    display:flex !important;
    align-items:flex-start;
    background:#fff !important;
    border:none !important;
    border-radius:var(--dash-radius-md);
    box-shadow:0 8px 20px rgba(23,34,77,.06);
    padding:18px 16px;
    color:var(--dash-text-dark) !important;
    transition:transform .15s ease, box-shadow .15s ease;
    min-width:0; /* allow the card to shrink below its content's natural width */
}
.dashboard-card-col .record-count:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(23,34,77,.12);
    text-decoration:none;
}
/* Stack icon / label / value vertically instead of Bootstrap's col-2 + col-10
   row. A horizontal row only has room for short values -- a 4-digit number
   like Agenda's "2652" collided with its label and the icon badge. Stacking
   removes that width constraint entirely, no matter how narrow the card is. */
.dashboard-card-col .record-count .row{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100%;
    min-width:0;
    margin:0;
}
.dashboard-card-col .record-count .col-2{
    flex:0 0 44px;
    max-width:44px;
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    padding:0;
    margin-bottom:12px;
}
.dashboard-card-col .record-count .fa{
    font-size:17px !important;
}
.dashboard-card-col .record-count .col-10{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    width:100%;
    min-width:0;
    max-width:100%;
    padding-left:0;
}
.dashboard-card-col .record-count .title{
    font-size:12.5px;
    color:var(--dash-text-muted);
    font-weight:600;
    margin-bottom:4px;
    white-space:nowrap;
}
.dashboard-card-col .record-count .value{
    margin:0;
    color:var(--dash-text-dark);
    font-size:18px;
    line-height:1.15;
}
/* Individual icon badge colors, cycling through the palette.
   NOTE: dashboard-card-col's first card is "Guru" at nth-child(1) -- the
   old rules started at nth-child(2), which skipped it entirely and left
   its icon with no background (invisible on the white card). */
.dashboard-card-col:nth-child(1) .col-2{ background:#4c5fd9; }
.dashboard-card-col:nth-child(2) .col-2{ background:#2c3e6b; }
.dashboard-card-col:nth-child(3) .col-2{ background:#f5a623; }
.dashboard-card-col:nth-child(4) .col-2{ background:#18c9a1; }
.dashboard-card-col:nth-child(5) .col-2{ background:#ef5a6f; }

/* Account/profile header box (avatar + name) on the "My Account" page.
   The name can be long (e.g. "CHILWA ELIYANA, S.Pd.") and the default h1
   size made it overflow/dominate the box on phones. Center it, let it
   wrap cleanly, and scale the font down with viewport width. */
.profile{
    text-align:center;
}
.profile .title{
    font-size:clamp(16px, 4.5vw, 28px);
    word-break:break-word;
    line-height:1.3;
}
@media (max-width:576px){
    .profile{ padding:16px; }
    .profile .avatar img{ max-width:70px; max-height:70px; }
}

/* Dashboard greeting card */
.dashboard-greeting{
    background:linear-gradient(120deg,var(--dash-sidebar-start),var(--dash-sidebar-end));
    border-radius:var(--dash-radius-lg);
    color:#fff;
    padding:26px 30px;
    margin-bottom:22px;
    box-shadow:var(--dash-shadow);
}
.dashboard-greeting h4{
    font-weight:700;
    margin-bottom:6px;
    font-size:clamp(16px, 4.2vw, 24px);
    line-height:1.3;
    word-break:break-word;
}
.dashboard-greeting p{
    opacity:.9;
    margin:0;
    font-size:13.5px;
    max-width:520px;
}
.dashboard-greeting .dashboard-clock{
    opacity:.85;
    margin:10px 0 0;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.2px;
}
.dashboard-greeting .dashboard-clock .fa{
    margin-right:5px;
}

/* Quick-links card (right column) styled like a calendar/list widget */
.dashboard-quicklinks{
    background:#fff;
    border-radius:var(--dash-radius-lg);
    box-shadow:0 8px 20px rgba(23,34,77,.06);
    padding:22px;
}
.dashboard-quicklinks h6{
    font-weight:700;
    color:var(--dash-text-dark);
    margin-bottom:16px;
}
.dashboard-quicklinks .quicklink-item{
    display:flex;
    align-items:center;
    padding:12px 10px;
    border-left:3px solid var(--dash-primary);
    background:var(--dash-bg);
    border-radius:0 10px 10px 0;
    margin-bottom:10px;
    color:var(--dash-text-dark);
    font-size:13.5px;
    font-weight:600;
    transition:background .15s ease;
}
.dashboard-quicklinks .quicklink-item:hover{
    background:#e4e8fb;
    text-decoration:none;
    color:var(--dash-text-dark);
}
.dashboard-quicklinks .quicklink-item i{
    width:26px;
    color:var(--dash-primary);
}

/* ---------- Sidebar scrollbar ----------
   custom-style.css sets the scrollbar track to solid white, which shows up
   as a stray white sliver running down the purple sidebar. Make it blend in
   instead: a transparent track and a faint white thumb. */
#sidebar::-webkit-scrollbar{
    width:5px;
}
#sidebar::-webkit-scrollbar-track{
    background:transparent;
    border:none;
}
#sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:10px;
}
#sidebar::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.45);
}
#sidebar{
    scrollbar-width:thin; /* Firefox */
    scrollbar-color:rgba(255,255,255,.25) transparent;
}

/* Pesan + notifikasi + akun user: satu kelompok flex di kanan topbar, selalu
   dalam satu baris (tidak wrap) baik di desktop maupun mobile, jadi icon
   pesan & notifikasi selalu menempel di sebelah icon user. Tombol sidebar
   (hamburger) sekarang ditaruh di sebelah logo (kiri), terpisah dari
   kelompok ini yang tetap didorong ke kanan lewat ml-auto. */
.topbar-icons-always-visible{
    display:flex;
    flex-wrap:nowrap;
    list-style:none;
    margin:0;
}
.topbar-icons-always-visible .topbar-icon-btn{
    margin-right:0;
}
.topbar-icons-always-visible .nav-item + .nav-item{
    margin-left:10px;
}
.topbar-icons-always-visible .avatar-icon{
    margin-right:6px;
}
.topbar-icons-always-visible .dropdown-toggle::after{
    display:none;
}
/* Bootstrap's own stylesheet makes .navbar-nav .dropdown-menu "position:static"
   by default (it only switches to floating/absolute above the md breakpoint,
   and even then only some theme builds add the matching right-alignment
   rule). That's what caused the notif/pesan/user dropdown to push the rest
   of the topbar down and open from the left instead of floating over the
   page -- on both mobile and desktop. Force it to always float, right-
   aligned, regardless of screen size or theme. */
.topbar-icons-always-visible .nav-item.dropdown{
    position:relative;
}
.topbar-icons-always-visible .dropdown-menu{
    position:absolute !important;
    top:100% !important;
    right:0 !important;
    left:auto !important;
    float:none !important;
    margin-top:8px;
}
/* sidebarCollapse now sits right after the brand/logo (left side of the
   topbar) on every screen size, instead of at the far right past the user
   menu -- makes it read as "toggle the sidebar next to it" rather than
   looking like a stray icon tacked on after the account controls. */
#topbar .navbar-toggler,
#topbar #sidebarCollapse{
    padding:0;
    border:none;
    margin-left:16px;
    margin-right:0;
    order:0;
}
#topbar .navbar-brand{
    margin-right:0;
}

@media (max-width:767px){
    /* On mobile only the round avatar icon is shown -- the "Hi Name!" text
       is dropped so the pesan/notif/user icons all fit on one line. */
    .topbar-icons-always-visible .user-menu-label{
        display:none;
    }
    .topbar-icons-always-visible .avatar-icon{
        margin-right:0;
    }
}

@media (max-width:480px){
    #topbar .navbar-brand{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        max-width:38vw;
    }
    #topbar .topbar-icon-btn,
    #topbar .avatar-icon{
        width:30px;
        height:30px;
        font-size:13px;
    }
    .topbar-icons-always-visible .nav-item + .nav-item{
        margin-left:6px;
    }
    #topbar .navbar-toggler,
    #topbar #sidebarCollapse{
        margin-left:8px;
    }
}

@media (max-width:767px){
    #page-content{ padding:14px 14px 0; }
    /* Keep the rounded top-right corner (inherited from the base #sidebar
       rule above) instead of forcing it square -- a square edge sitting
       right under the header reads as "stuck together"; the curve plus a
       shadow gives it a bit of visual breathing room from the header. */
    #sidebar{ box-shadow:0 6px 18px rgba(23,34,77,.18); }

    /* Greeting card: the name (e.g. "CHILWA ELIYANA, S.Pd.") can be long,
       so scale the heading down and tighten the card padding on phones
       instead of letting it overflow/wrap huge. */
    .dashboard-greeting{ padding:18px 18px; }
    .dashboard-greeting p{ font-size:12.5px; }
    .dashboard-greeting .dashboard-clock{ font-size:11.5px; }
}

/* ---------- Collapsed / mini sidebar (icon-only) fixes ----------
   The base template only shrinks #sidebar's width to 80px; it does not
   shrink the profile name or the menu labels, so they were overflowing
   the narrow column and pushing/breaking the rest of the layout.
   Force icon-only mode here so nothing overflows the 80px column. */
#sidebar.active{
    overflow-x:hidden;
}
#sidebar.active .menu-profile{
    padding:18px 4px 14px;
}
#sidebar.active .menu-profile .avatar .avatar-icon{
    width:40px;
    height:40px;
    font-size:16px;
    margin-bottom:0;
}
#sidebar .menu-profile .user-name,
#sidebar .menu-profile .menu-dropdown{
    max-height:60px;
    overflow:hidden;
}
#sidebar.active .menu-profile .user-name,
#sidebar.active .menu-profile .menu-dropdown{
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
}
/* Belt-and-braces: some browsers keep a 1px remnant of a 0-max-height,
   flex/dropdown-toggle child alive. display:none removes it completely
   once the fade-out transition (opacity/max-height above) has run. */
#sidebar.active .menu-profile .menu-dropdown,
#sidebar.active .menu-profile .user-name{
    display:none !important;
}
/* Extra hardening: whatever the exact content/length of the username or
   role text turns out to be, the profile block itself must never grow
   past the collapsed column width -- clamp it directly instead of only
   relying on child elements being hidden. */
#sidebar.active .menu-profile{
    width:100% !important;
    max-width:80px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}
#sidebar.active .navbar-nav{
    padding:6px 8px;
}
#sidebar.active .navbar-nav a.nav-link{
    flex-direction:column;
    justify-content:center;
    padding:10px 2px !important;
    gap:4px;
    text-align:center;
}
#sidebar .navbar-nav a.nav-link .menu-label{
    max-height:24px;
    overflow:hidden;
    transition:font-size .2s ease, max-height .2s ease;
}
#sidebar.active .navbar-nav a.nav-link .menu-label{
    font-size:10.5px;
    font-weight:600;
    line-height:1.2;
    max-height:26px;
    white-space:normal;
}
#sidebar.active .navbar-nav a.nav-link .fa,
#sidebar.active .navbar-nav a.nav-link .material-icons,
#sidebar.active .navbar-nav a.nav-link .icon{
    font-size:17px !important;
    width:auto;
}
#sidebar.active .navbar-nav a.dropdown-toggle::after{
    margin:2px auto 0 !important;
    float:none;
}
#sidebar.active .submenu{
    margin-left:0;
}
#sidebar .submenu .nav-link .menu-label{
    max-height:24px;
    overflow:hidden;
}
#sidebar.active .submenu .nav-link .menu-label{
    font-size:10px;
    max-height:26px;
    white-space:normal;
}

/* =========================================================
   Notifikasi (lonceng topbar)
========================================================= */
.notif-badge{
    position:absolute;
    top:-3px;
    right:-3px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#ef5a6f;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
}
.notif-dropdown{
    width:340px;
    max-width:90vw;
    padding:0;
    border:none;
    border-radius:var(--dash-radius-md);
    box-shadow:0 14px 34px rgba(23,34,77,.18);
    overflow:hidden;
}
.notif-dropdown-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    border-bottom:1px solid #eef1fb;
    font-weight:700;
    color:var(--dash-text-dark);
    font-size:14px;
}
.notif-dropdown-header a{
    font-size:11.5px;
    font-weight:600;
    color:var(--dash-primary);
    cursor:pointer;
}
.notif-dropdown-body{
    max-height:320px;
    overflow-y:auto;
}
.notif-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 16px;
    border-bottom:1px solid #f3f4fb;
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}
.notif-item:hover{
    background:var(--dash-bg);
    text-decoration:none;
    color:inherit;
}
.notif-item.unread{
    background:#f5f6fe;
}
.notif-item .notif-item-icon{
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:var(--dash-primary);
    font-size:14px;
    box-shadow:0 2px 8px rgba(23,34,77,.1);
}
.notif-item.unread .notif-item-icon{
    background:linear-gradient(120deg,var(--dash-sidebar-start),var(--dash-sidebar-end));
    color:#fff;
}
.notif-item .notif-item-title{
    font-size:12.5px;
    font-weight:700;
    color:var(--dash-text-dark);
    margin-bottom:2px;
}
.notif-item .notif-item-msg{
    font-size:11.5px;
    color:var(--dash-text-muted);
    margin-bottom:3px;
    line-height:1.35;
}
.notif-item .notif-item-time{
    font-size:10.5px;
    color:var(--dash-text-muted);
}
.notif-empty-mini{
    padding:34px 16px;
    text-align:center;
    color:var(--dash-text-muted);
    font-size:12.5px;
}
.notif-dropdown-footer{
    display:block;
    text-align:center;
    padding:11px;
    font-size:12px;
    font-weight:700;
    color:var(--dash-primary);
    background:var(--dash-bg);
}
.notif-dropdown-footer:hover{
    background:#e4e8fb;
    text-decoration:none;
    color:var(--dash-primary-dark);
}