/* ============================================================
   EduMagix – Master Layout CSS
   Sidebar · Topbar · Cards · Buttons · Forms · Tables · Utilities
   ============================================================ */

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

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

:root {
    --sw: 64px;                          /* sidebar collapsed width  */
    --sx: 220px;                         /* sidebar expanded width   */
    --sb-bg: #0f1923;
    --sb-hover: #162637;
    --accent:  #00b4d8;
    --accent2: #0077b6;
    --text-lt: #cdd9e5;
    --text-mu: #6b8299;
    --bg-page: #f0f4f8;
    --bg-card: #ffffff;
    --border:  #e2e8f0;
    --success: #10b981;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --shadow:  0 2px 12px rgba(0,0,0,.07);
    --shadow-lg: 0 8px 28px rgba(0,0,0,.12);
    --radius:  12px;
    --hh:      60px;                     /* top-bar height           */
}

body { font-family:'Inter',sans-serif; background:var(--bg-page); color:#1e293b; overflow-x:hidden; }

/* Brand accent — "lix" in Edulix */
.brand-lix {
    color: #F97316;
    -webkit-text-fill-color: #F97316;
    background: none !important;
    -webkit-background-clip: unset !important;
}

/* ──────────────────────────────────────────
   SIDEBAR
────────────────────────────────────────── */
.sidebar {
    position: fixed; top:0; left:0;
    width: var(--sw); height:100vh;
    background: var(--sb-bg);
    display: flex; flex-direction: column;
    z-index: 1100; overflow: hidden;
    transition: width .25s cubic-bezier(.4,0,.2,1);
}
.sidebar:hover { width: var(--sx); }

/* Logo strip */
.sb-logo {
    display:flex; align-items:center; gap:10px;
    padding:14px; min-height:var(--hh);
    border-bottom:1px solid rgba(255,255,255,.06);
    white-space:nowrap; overflow:hidden;
}
.sb-logo-icon {
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    background:linear-gradient(135deg,#00b4d8,#0077b6);
    display:flex; align-items:center; justify-content:center;
}
.sb-logo-icon i { color:#fff; font-size:17px; }
.sb-brand {
    font-size:17px; font-weight:800; letter-spacing:-.3px;
    background:linear-gradient(135deg,#00b4d8,#90e0ef);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    opacity:0; transition:opacity .18s .08s;
    line-height:1.1;
}
.sb-brand small { display:block; font-size:9px; font-weight:400;
    -webkit-text-fill-color:#6b8299; letter-spacing:.3px; margin-top:2px; }
.sidebar:hover .sb-brand { opacity:1; }

/* Nav */
.sb-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:6px 0 12px; }
.sb-nav::-webkit-scrollbar { width:3px; }
.sb-nav::-webkit-scrollbar-thumb { background:#1e3a52; border-radius:3px; }

.sb-section { margin-top:4px; }
.sb-sec-title {
    font-size:9.5px; text-transform:uppercase; letter-spacing:1.2px;
    color:var(--text-mu); padding:10px 20px 3px;
    white-space:nowrap; opacity:0; transition:opacity .18s;
}
.sidebar:hover .sb-sec-title { opacity:1; }

.sb-item {
    display:flex; align-items:center; gap:12px;
    padding:9px 20px; cursor:pointer;
    color:var(--text-mu); text-decoration:none;
    transition:background .13s, color .13s;
    white-space:nowrap; position:relative;
}
.sb-item i { font-size:16px; min-width:24px; text-align:center; flex-shrink:0; }
.sb-item span { font-size:12.5px; font-weight:500; opacity:0; transition:opacity .15s .06s; }
.sidebar:hover .sb-item span { opacity:1; }

.sb-item:hover  { background:var(--sb-hover); color:var(--accent); }
.sb-item.active { background:var(--sb-hover); color:var(--accent); }
.sb-item.active::before {
    content:''; position:absolute; left:0; top:0;
    width:3px; height:100%;
    background:var(--accent); border-radius:0 3px 3px 0;
}

/* ──────────────────────────────────────────
   TOPBAR
────────────────────────────────────────── */
.topbar {
    position:fixed; top:0;
    left:var(--sw); right:0; height:var(--hh);
    background:var(--sb-bg);
    display:flex; align-items:center; padding:0 20px; gap:14px;
    z-index:1000; transition:left .25s cubic-bezier(.4,0,.2,1);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.tb-school {
    flex:1; display:flex; align-items:center; gap:0;
    justify-content:center;
}
.tb-school-name {
    font-size:15px; font-weight:700; color:#fff; letter-spacing:.2px;
}
.tb-session {
    font-size:12px; color:#90e0ef; font-weight:500;
    background:rgba(0,180,216,.15); padding:3px 10px;
    border-radius:20px; margin-left:10px;
}

.tb-actions { display:flex; align-items:center; gap:8px; }
.tb-btn {
    background:none; border:none; cursor:pointer;
    color:var(--text-mu); font-size:17px; padding:7px;
    border-radius:8px; transition:background .13s, color .13s;
    display:flex; align-items:center; gap:6px; text-decoration:none;
}
.tb-btn:hover { background:rgba(255,255,255,.08); color:var(--accent); }
.tb-btn .lbl { font-size:12px; font-weight:500; color:var(--text-mu); }
.tb-btn:hover .lbl { color:var(--accent); }

.tb-avatar {
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:13px; cursor:pointer;
    border:2px solid rgba(255,255,255,.15);
}
.tb-divider { width:1px; height:22px; background:rgba(255,255,255,.08); }

/* ──────────────────────────────────────────
   MAIN WRAPPER
────────────────────────────────────────── */
.main-wrap {
    margin-left:var(--sw); padding-top:var(--hh);
    min-height:100vh; transition:margin-left .25s cubic-bezier(.4,0,.2,1);
}
.page-body { padding:24px; }

/* ──────────────────────────────────────────
   PAGE HEADER
────────────────────────────────────────── */
.page-hdr {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px; flex-wrap:wrap; gap:10px;
}
.page-hdr-left h1 { font-size:20px; font-weight:700; color:#0f1923; }
.breadcrumb { font-size:12px; color:var(--text-mu); margin-top:2px; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* ──────────────────────────────────────────
   CARD
────────────────────────────────────────── */
.card {
    background:var(--bg-card); border-radius:var(--radius);
    box-shadow:var(--shadow); border:1px solid var(--border);
    overflow:hidden;
}
.card-head {
    padding:14px 20px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,#0f1923,#1a3a5c);
    color:#fff;
}
.card-head i { font-size:16px; color:var(--accent); }
.card-head h2 { font-size:14px; font-weight:600; }
.card-body { padding:20px; }
.card-body-p0 { padding:0; }

/* ──────────────────────────────────────────
   FORM ELEMENTS
────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }

.form-group { display:flex; flex-direction:column; gap:5px; }
.form-group label {
    font-size:11px; font-weight:700; color:var(--text-mu);
    text-transform:uppercase; letter-spacing:.5px;
}
.form-ctrl {
    height:40px; padding:0 13px;
    border:1.5px solid var(--border); border-radius:8px;
    font-size:13.5px; color:#1e293b; background:#f8fafc;
    transition:border-color .15s, box-shadow .15s;
    outline:none; width:100%; font-family:inherit;
}
.form-ctrl:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,180,216,.1); background:#fff; }
select.form-ctrl {
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%236b8299' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;
}
textarea.form-ctrl { height:auto; min-height:80px; padding:10px 13px; resize:vertical; }
select[multiple].form-ctrl { height:90px; padding:6px 10px; background-image:none; }

.input-icon-wrap { position:relative; }
.input-icon-wrap i.pre-icon {
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color:#94a3b8; font-size:14px; pointer-events:none;
}
.input-icon-wrap .form-ctrl { padding-left:38px; }
.input-icon-wrap .eye-btn {
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer;
    color:#94a3b8; font-size:14px; padding:2px;
    line-height:1; display:flex; align-items:center;
}
.input-icon-wrap .eye-btn:hover { color:var(--accent); }

/* ──────────────────────────────────────────
   BUTTONS
────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 20px; border-radius:8px;
    font-size:13px; font-weight:600; cursor:pointer;
    border:none; transition:all .15s; text-decoration:none;
    font-family:inherit; line-height:1;
}
.btn-primary {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; box-shadow:0 3px 10px rgba(0,180,216,.25);
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(0,180,216,.35); }
.btn-success { background:#10b981; color:#fff; }
.btn-success:hover { background:#059669; }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-danger:hover  { background:#dc2626; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:#475569; }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:5px 11px; font-size:12px; border-radius:6px; }
.btn-icon { padding:6px; gap:0; }

/* ──────────────────────────────────────────
   DATA TABLE
────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table.dtbl { width:100%; border-collapse:collapse; font-size:13px; }
.dtbl thead tr { background:linear-gradient(135deg,#0f1923,#1a3a5c); color:#fff; }
.dtbl thead th {
    padding:12px 15px; text-align:left;
    font-weight:600; font-size:11.5px;
    text-transform:uppercase; letter-spacing:.5px; white-space:nowrap;
}
.dtbl tbody tr { border-bottom:1px solid var(--border); transition:background .1s; }
.dtbl tbody tr:last-child { border:none; }
.dtbl tbody tr:hover { background:#f0f9ff; }
.dtbl tbody td { padding:11px 15px; color:#334155; }

/* ──────────────────────────────────────────
   BADGES
────────────────────────────────────────── */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-admin      { background:#dbeafe; color:#1d4ed8; }
.badge-employee   { background:#d1fae5; color:#065f46; }
.badge-teacher    { background:#fef3c7; color:#92400e; }
.badge-management { background:#ede9fe; color:#5b21b6; }

/* ──────────────────────────────────────────
   ALERTS
────────────────────────────────────────── */
.alert {
    padding:11px 15px; border-radius:8px;
    font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.alert-error,
.alert-danger  { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.alert-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }

/* ── Toast notification (fixed-position, auto-dismiss) ── */
.sys-toast {
    position:fixed; top:20px; right:20px; z-index:9999;
    padding:12px 20px; border-radius:8px; font-size:13px; font-weight:600;
    box-shadow:0 4px 16px rgba(0,0,0,.15); min-width:200px;
    display:flex; align-items:center; gap:8px;
    animation:toastIn .2s ease;
}
.sys-toast-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.sys-toast-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.sys-toast-info    { background:#dbeafe; color:#1e40af; border:1px solid #93c5fd; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ──────────────────────────────────────────
   UTILITIES
────────────────────────────────────────── */
.d-flex { display:flex; }
.align-c { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }
.gap-16 { gap:16px; }
.mt-8   { margin-top:8px; }
.mt-16  { margin-top:16px; }
.mt-20  { margin-top:20px; }
.mb-16  { margin-bottom:16px; }
.mb-20  { margin-bottom:20px; }
.w-full { width:100%; }
.text-c { text-align:center; }
.text-mu { color:var(--text-mu); font-size:12px; }

/* ──────────────────────────────────────────
   SUB-NAV (pills inside a module)
────────────────────────────────────────── */
.sub-nav { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.sub-nav a {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:7px;
    font-size:12px; font-weight:600; text-decoration:none;
    border:1.5px solid var(--border); color:#475569;
    transition:all .14s;
}
.sub-nav a:hover, .sub-nav a.active {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; border-color:transparent;
}
.sub-nav a i { font-size:12px; }

/* ──────────────────────────────────────────
   MODAL
────────────────────────────────────────── */
.modal-overlay {
    display:none; position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,.45); align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-box {
    background:#fff; border-radius:16px;
    padding:26px; width:490px; max-width:96vw;
    box-shadow:0 24px 60px rgba(0,0,0,.25);
    animation:modalUp .2s ease;
}
@keyframes modalUp {
    from { transform:translateY(24px); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
}
.modal-hdr {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px;
}
.modal-title { font-size:15px; font-weight:700; color:#0f1923; }
.modal-close { background:none; border:none; cursor:pointer; font-size:20px; color:#94a3b8; }
.modal-close:hover { color:var(--danger); }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* ──────────────────────────────────────────
   HAMBURGER BUTTON (hidden on desktop)
────────────────────────────────────────── */
.tb-hamburger {
    display: none;
    background: none; border: none; cursor: pointer;
    color: #fff; font-size: 20px; padding: 6px 8px;
    border-radius: 8px; transition: background .13s;
    flex-shrink: 0;
}
.tb-hamburger:hover { background: rgba(255,255,255,.1); }

/* ──────────────────────────────────────────
   SIDEBAR BACKDROP (mobile only)
────────────────────────────────────────── */
.sb-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 1050;
    background: rgba(0,0,0,.45);
}
.sb-backdrop.sb-backdrop-open { display: block; }
.sb-body-lock { overflow: hidden; }

/* ──────────────────────────────────────────
   MOBILE  (≤ 767px)
────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Show hamburger */
    .tb-hamburger { display: flex; align-items: center; justify-content: center; }

    /* Sidebar: slide off-screen by default */
    .sidebar {
        width: var(--sx) !important;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        z-index: 1200;
    }
    .sidebar.sb-open { transform: translateX(0); }

    /* Show names when sidebar is open on mobile */
    .sidebar.sb-open .sb-brand      { opacity: 1 !important; }
    .sidebar.sb-open .sb-sec-title  { opacity: 1 !important; }
    .sidebar.sb-open .sb-item span  { opacity: 1 !important; }

    /* Topbar: full width, no left offset */
    .topbar { left: 0 !important; }

    /* Main wrap: no left indent */
    .main-wrap { margin-left: 0 !important; }

    /* Page body: tighter padding */
    .page-body { padding: 14px; }

    /* Topbar: tighten up */
    .topbar { padding: 0 10px; gap: 8px; }

    /* School name: wrap to 2 lines, show full name */
    .tb-school {
        min-width: 0; flex: 1; overflow: visible;
        flex-direction: column; align-items: center; gap: 2px;
    }
    .tb-school-name {
        font-size: 11px; font-weight: 700;
        white-space: normal; word-break: break-word;
        text-align: center; line-height: 1.25;
        display: block;
    }
    .tb-session { font-size: 9px; padding: 1px 6px; margin-left: 0; white-space: nowrap; }

    /* Hide non-essential topbar items */
    .tb-btn .lbl         { display: none; }
    .tb-divider          { display: none; }
    /* Hide helpdesk & chat on very small screens, keep avatar + logout */
    .tb-actions .tb-btn:not([title="Sign Out"]) { display: none; }

    /* Form grids: single column */
    .form-grid,
    .form-grid-2,
    .form-grid-3 { grid-template-columns: 1fr !important; }

    /* Cards */
    .modal-box { padding: 18px; }
}

/* ──────────────────────────────────────────
   TABLET  (768px – 1023px)
────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
    .tb-hamburger { display: flex; align-items: center; justify-content: center; }

    .sidebar {
        width: var(--sx) !important;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4,0,.2,1);
        z-index: 1200;
    }
    .sidebar.sb-open { transform: translateX(0); }

    .sidebar.sb-open .sb-brand      { opacity: 1 !important; }
    .sidebar.sb-open .sb-sec-title  { opacity: 1 !important; }
    .sidebar.sb-open .sb-item span  { opacity: 1 !important; }

    .topbar    { left: 0 !important; }
    .main-wrap { margin-left: 0 !important; }

    .page-body { padding: 18px; }

    .form-grid-3 { grid-template-columns: repeat(2,1fr) !important; }
}