/* =======================================================
KiraEdu Management Dashboard System
======================================================= */

:root{
    --dash-gold:#d4af37;
    --dash-gold-dark:#a87908;
    --dash-gold-light:#f4d66b;
    --dash-gold-soft:#fff7d6;

    --dash-dark:#11120f;
    --dash-dark-soft:#1c1d18;
    --dash-dark-surface:#25261f;

    --dash-text:#0f172a;
    --dash-muted:#64748b;

    --dash-page:#f3f0e7;
    --dash-surface:#ffffff;
    --dash-surface-soft:#fbfaf6;

    --dash-border:#e6e0d2;

    --dash-sidebar-width:270px;

    --dash-shadow:
        0 18px 48px rgba(15,23,42,.09);

    --dash-shadow-lg:
        0 28px 72px rgba(15,23,42,.14);

    }

    /* =======================================================
    Reset
    ======================================================= */

    *{
    box-sizing:border-box;
    }

    html{
    scroll-behavior:smooth;
    }

    body{
    margin:0;

    color:var(--dash-text);

    background:
        radial-gradient(
            circle at top right,
            rgba(212,175,55,.09),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #faf9f5,
            var(--dash-page)
        );

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    }

    a{
    color:inherit;
    }

    button,
    input,
    select,
    textarea{
    font:inherit;
    }

    /* =======================================================
    Main Layout
    ======================================================= */

    .layout{
    min-height:100vh;

    display:grid;
    grid-template-columns:var(--dash-sidebar-width) minmax(0,1fr);

    }

    /* =======================================================
    Sidebar
    ======================================================= */

    .sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;

    width:var(--dash-sidebar-width);

    display:flex;
    flex-direction:column;

    padding:26px 20px;

    overflow-y:auto;

    background:
        radial-gradient(
            circle at top right,
            rgba(212,175,55,.16),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            var(--dash-dark),
            var(--dash-dark-soft)
        );

    border-right:1px solid rgba(212,175,55,.18);

    box-shadow:
        16px 0 42px rgba(15,23,42,.14);

    z-index:1000;

    }

    /* =======================================================
    Sidebar Brand
    ======================================================= */

    .brand{
    position:relative;

    display:flex;
    align-items:center;
    gap:12px;

    min-height:58px;

    padding:10px 12px 24px;
    margin-bottom:20px;

    border-bottom:1px solid rgba(255,255,255,.09);

    color:white;
    font-family:var(--font-heading,Georgia,serif);
    font-size:27px;
    font-weight:800;
    letter-spacing:-.02em;

    }

    .brand::before{
    content:"K";

    width:44px;
    height:44px;
    flex-shrink:0;

    display:grid;
    place-items:center;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--dash-gold-light),
        var(--dash-gold),
        var(--dash-gold-dark)
    );

    color:#171711;
    font-family:inherit;
    font-size:22px;
    font-weight:900;

    box-shadow:
        0 12px 28px rgba(212,175,55,.25);

    }

    .brand::after{
    content:"Management";

    position:absolute;
    left:68px;
    bottom:11px;

    color:#aeb6c2;
    font-family:Inter,system-ui,sans-serif;
    font-size:9px;
    font-weight:800;
    letter-spacing:.11em;

    text-transform:uppercase;

    }

    /* =======================================================
    Sidebar Navigation
    ======================================================= */

    .sidebar nav{
    display:flex;
    flex-direction:column;
    gap:7px;
    }

    .sidebar nav::before{
    content:"Command Center";

    display:block;

    margin:4px 12px 9px;

    color:#7f8791;
    font-size:9px;
    font-weight:900;
    letter-spacing:.13em;

    text-transform:uppercase;

    }

    .sidebar nav a{
    position:relative;

    min-height:48px;

    display:flex;
    align-items:center;
    gap:13px;

    padding:12px 14px;

    border:1px solid transparent;
    border-radius:14px;

    color:#d9dee5;
    text-decoration:none;

    font-size:13px;
    font-weight:800;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;

    }

    .sidebar nav a i{
    width:21px;

    color:var(--dash-gold);
    text-align:center;
    font-size:15px;

    transition:
        color .22s ease,
        transform .22s ease;

    }

    .sidebar nav a:hover{
    color:white;

    background:rgba(212,175,55,.10);
    border-color:rgba(212,175,55,.16);

    transform:translateX(4px);

    }

    .sidebar nav a:hover i{
    color:var(--dash-gold-light);
    transform:scale(1.08);
    }

    .sidebar nav a.active{
    color:#171711;

    background:linear-gradient(
        135deg,
        var(--dash-gold-light),
        var(--dash-gold),
        var(--dash-gold-dark)
    );

    border-color:rgba(255,255,255,.12);

    box-shadow:
        0 13px 28px rgba(212,175,55,.24);

    }

    .sidebar nav a.active i{
    color:#171711;
    }

    .sidebar nav a.active::after{
    content:"";

    position:absolute;
    right:12px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#171711;

    }

    /* =======================================================
    Main Content
    ======================================================= */

    .main-content{
    grid-column:2;

    min-width:0;
    min-height:100vh;

    margin-left:0;

    }

    /* =======================================================
    Topbar
    ======================================================= */

    .topbar{
    position:sticky;
    top:0;
    z-index:900;

    min-height:76px;

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

    padding:15px 34px;

    background:rgba(255,255,255,.88);

    border-bottom:1px solid rgba(230,224,210,.95);

    box-shadow:
        0 10px 30px rgba(15,23,42,.06);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    }

    .topbar > div:first-child{
    color:var(--dash-muted);
    font-size:13px;
    }

    .topbar strong{
    color:var(--dash-text);
    font-weight:900;
    }

    .topbar form{
    margin:0;
    }

    .topbar button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:10px 16px;

    border:1px solid rgba(212,175,55,.30);
    border-radius:12px;

    background:var(--dash-gold-soft);
    color:var(--dash-gold-dark);

    cursor:pointer;

    font-size:12px;
    font-weight:900;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;

    }

    .topbar button::before{
    content:"\f2f5";

    font-family:"Font Awesome 6 Free";
    font-weight:900;

    }

    .topbar button:hover{
    transform:translateY(-2px);

    background:#fff0b8;
    border-color:var(--dash-gold);

    box-shadow:
        0 12px 26px rgba(212,175,55,.18);

    }

    /* =======================================================
    Page Content
    ======================================================= */

    .page-content{
    min-width:0;

    padding:34px;

    }

    /* =======================================================
    Generic Dashboard Headings
    ======================================================= */

    .dashboard-header{
    margin-bottom:28px;
    }

    .dashboard-header h1{
    margin:0 0 8px;

    color:var(--dash-text);
    font-family:var(--font-heading,Georgia,serif);
    font-size:clamp(36px,5vw,58px);
    line-height:.98;
    letter-spacing:-.035em;

    }

    .dashboard-header p{
    margin:0;

    color:var(--dash-muted);
    line-height:1.7;

    }

    /* =======================================================
    Generic Statistics
    ======================================================= */

    .stats-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;

    margin-bottom:28px;

    }

    .stat-card{
    position:relative;
    overflow:hidden;

    min-width:0;
    padding:24px;

    border:1px solid var(--dash-border);
    border-radius:22px;

    background:var(--dash-surface);
    box-shadow:var(--dash-shadow);

    transition:
        transform .22s ease,
        box-shadow .22s ease;

    }

    .stat-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--dash-gold),
        transparent
    );

    }

    .stat-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--dash-shadow-lg);
    }

    .stat-label{
    color:var(--dash-muted);
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;

    text-transform:uppercase;

    }

    .stat-value{
    margin-top:10px;

    color:var(--dash-text);
    font-family:var(--font-heading,Georgia,serif);
    font-size:42px;
    font-weight:800;
    line-height:1;

    }

    /* =======================================================
    Generic Cards
    ======================================================= */

    .dashboard-card{
    margin-bottom:26px;
    padding:28px;

    border:1px solid var(--dash-border);
    border-radius:24px;

    background:var(--dash-surface);
    box-shadow:var(--dash-shadow);

    }

    .dashboard-card h3{
    margin:0 0 22px;

    color:var(--dash-text);
    font-family:var(--font-heading,Georgia,serif);
    font-size:28px;

    }

    /* =======================================================
    Generic Tables
    ======================================================= */

    .dashboard-card table{
    width:100%;

    border-collapse:collapse;

    }

    .dashboard-card th,
    .dashboard-card td{
    padding:15px 16px;
    text-align:left;
    }

    .dashboard-card th{
    border-bottom:1px solid var(--dash-border);

    background:var(--dash-surface-soft);

    color:var(--dash-muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;

    text-transform:uppercase;

    }

    .dashboard-card td{
    border-bottom:1px solid #f0ede6;

    color:var(--dash-text);
    font-size:12px;

    }

    .dashboard-card tbody tr:last-child td{
    border-bottom:0;
    }

    .dashboard-card tbody tr{
    transition:background .18s ease;
    }

    .dashboard-card tbody tr:hover{
    background:#fffdf8;
}

/* =======================================================
   Mobile Menu Button
======================================================= */

    .dashboard-menu-toggle{
    display:none;

    width:42px;
    height:42px;

    border:1px solid var(--dash-border);
    border-radius:13px;

    background:white;
    color:var(--dash-text);

    cursor:pointer;

    }

    /* =======================================================
    Responsive
    ======================================================= */

    @media(max-width:1180px){

    :root{
        --dash-sidebar-width:235px;
    }

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

    }

    @media(max-width:850px){

    .layout{
        display:block;
    }

    .sidebar{
        width:min(86vw,300px);

        transform:translateX(-105%);

        transition:transform .26s ease;
    }

    body.dashboard-menu-open .sidebar{
        transform:translateX(0);
    }

    body.dashboard-menu-open::after{
        content:"";

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

        background:rgba(2,6,23,.52);

        backdrop-filter:blur(3px);
        -webkit-backdrop-filter:blur(3px);
    }

    body.dashboard-menu-open .sidebar{
        z-index:1001;
    }

    .main-content{
        margin-left:0;
    }

    .topbar{
        padding:14px 20px;
    }

    .dashboard-menu-toggle{
        display:grid;
        place-items:center;
    }

    .page-content{
        padding:25px 20px;
    }

    }

    @media(max-width:600px){

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

    .topbar{
        min-height:68px;
    }

    .topbar > div:first-child{
        font-size:12px;
    }

    .topbar button{
        padding:9px 11px;
        font-size:0;
    }

    .topbar button::before{
        font-size:14px;
    }

    .page-content{
        padding:22px 12px;
    }

    .dashboard-card{
        padding:22px 17px;
        border-radius:20px;
    }

    .dashboard-card{
        overflow-x:auto;
    }

    .dashboard-card table{
        min-width:650px;
    }

    }

    /* =======================================================
    Reduced Motion
    ======================================================= */

    @media(prefers-reduced-motion:reduce){

    .sidebar,
    .sidebar nav a,
    .stat-card,
    .topbar button{
        transition:none !important;
    }

    .stat-card:hover,
    .sidebar nav a:hover,
    .topbar button:hover{
        transform:none;
    }

    }