:root{
  --ink:#17242b; --muted:#5d6b72; --paper:#f5f6f3; --card:#ffffff; --rule:#dde2de;
  --brand:#1d4e5f; --brand-dark:#143743; --brand-soft:#e3eef1;
  --amber:#c98a12; --amber-soft:#fbf0d6; --ok:#2f7d4f; --danger:#b3392f;
  --bs-body-font-family:'Public Sans',system-ui,sans-serif;
  --bs-body-color:var(--ink);
}
body{background:var(--paper);font-family:var(--bs-body-font-family);color:var(--ink)}
h1,h2,h3,h4,.brand-name{font-family:'Bricolage Grotesque','Public Sans',sans-serif;letter-spacing:-.01em}
a{color:var(--brand)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* Shell */
.shell{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--brand-dark);color:#d6e4e9;flex:0 0 248px;padding:1.25rem 1rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand-name{color:#fff;font-size:1.25rem;margin:0 0 1.5rem .5rem}
.sidebar .nav-link{color:#b9cfd6;border-radius:.4rem;padding:.55rem .75rem;display:flex;gap:.65rem;align-items:center}
.sidebar .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar .nav-link.active{background:var(--brand);color:#fff;box-shadow:inset 3px 0 0 var(--amber)}
.sidebar .nav-group{font-size:.75rem;color:#7fa1ad;margin:1.25rem .75rem .35rem}
.main{flex:1;min-width:0}
.topbar{background:var(--card);border-bottom:1px solid var(--rule);padding:.75rem 1.5rem;display:flex;justify-content:space-between;align-items:center}
.content{padding:1.75rem 1.5rem 3rem;max-width:1180px}
.page-title{font-size:1.65rem;margin-bottom:.25rem}
.page-sub{color:var(--muted);margin-bottom:1.5rem}

/* Panels */
.panel{background:var(--card);border:1px solid var(--rule);border-radius:.6rem}
.panel-head{padding:.9rem 1.15rem;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center}
.panel-head h2{font-size:1.05rem;margin:0}
.panel-body{padding:1.15rem}
.stat{padding:1.1rem 1.25rem}
.stat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:2rem;line-height:1.1}
.stat .lbl{color:var(--muted);font-size:.9rem}
.stat.accent{border-left:4px solid var(--amber)}
.stat.brand{border-left:4px solid var(--brand)}
.empty{color:var(--muted);padding:1.25rem;text-align:center}
.table>:not(caption)>*>*{padding:.65rem 1.15rem}
.badge-due{background:var(--amber-soft);color:#7a5200}
.badge-soon{background:#fbe3df;color:var(--danger)}
.meter{height:.5rem;background:var(--rule);border-radius:1rem;overflow:hidden}
.meter>span{display:block;height:100%;background:var(--ok)}
.meter.low>span{background:var(--danger)}

/* Login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-side{background:var(--brand-dark);color:#d6e4e9;padding:3rem;display:flex;flex-direction:column;justify-content:space-between}
.login-side h1{color:#fff;font-size:2.4rem;max-width:16ch}
.login-side ul{list-style:none;padding:0;margin:0;color:#b9cfd6}
.login-side li{padding:.35rem 0;border-top:1px solid rgba(255,255,255,.12)}
.login-form{display:flex;align-items:center;justify-content:center;padding:2rem}
.login-form .box{width:100%;max-width:380px}
@media(max-width:860px){
  .login-wrap{grid-template-columns:1fr}.login-side{display:none}
  .sidebar{position:fixed;left:-260px;z-index:1040;transition:left .2s}
  .sidebar.open{left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Timetable */
.tt-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.6rem}
.tt-day{background:var(--card);border:1px solid var(--rule);border-radius:.6rem;padding:.6rem;min-height:160px}
.tt-day.today{border-color:var(--brand);box-shadow:inset 0 3px 0 var(--brand)}
.tt-dayhead{font-size:.95rem;margin:0 0 .5rem}.tt-dayhead span{color:var(--muted);font-weight:400}
.tt-free{color:#8a969c;font-size:.85rem;margin:0}
.tt-ev{border-left:4px solid var(--brand);background:var(--brand-soft);border-radius:.35rem;padding:.4rem .5rem;margin-bottom:.45rem;font-size:.85rem}
.tt-time{font-weight:600}.tt-title{margin:.1rem 0}.tt-meta{color:var(--muted);font-size:.78rem}
.tt-deadline{border-color:var(--amber);background:var(--amber-soft)}
.tt-cat{border-color:#8a5cc2;background:#efe8f8}
.tt-exam{border-color:var(--danger);background:#fbe3df}
.tt-other{border-color:#7b878d;background:#eceeed}
@media(max-width:1100px){.tt-week{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tt-week{grid-template-columns:1fr}.tt-day{min-height:0}}

/* Weekly timetable grid */
.wk{overflow-x:auto;background:var(--card);border:1px solid var(--rule);border-radius:.6rem}
.wk-inner{display:grid;min-width:760px}
.wk-h{padding:.5rem .6rem;font-weight:600;border-bottom:1px solid var(--rule);background:#f1f4f2}
.wk-times{position:relative;border-right:1px solid var(--rule)}
.wk-times span{position:absolute;right:.4rem;transform:translateY(.15rem);font-size:.72rem;color:var(--muted)}
.wk-col{position:relative;border-left:1px solid var(--rule);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--rule) 47px,var(--rule) 48px)}
.wk-slot{position:absolute;border:1px solid;border-left-width:4px;border-radius:.35rem;padding:.2rem .35rem;font-size:.74rem;overflow:hidden;line-height:1.25}
.wk-meta{color:#3e4b52}
.wk-draft{border-style:dashed;border-left-style:solid}
.wk-c0{background:#e3eef1;border-color:#1d4e5f}.wk-c1{background:#fbf0d6;border-color:#c98a12}
.wk-c2{background:#efe8f8;border-color:#8a5cc2}.wk-c3{background:#e2f1e7;border-color:#2f7d4f}
.wk-c4{background:#fbe3df;border-color:#b3392f}.wk-c5{background:#e5eaf7;border-color:#3f5fb5}
.wk-c6{background:#f7e9dd;border-color:#b86a2b}.wk-c7{background:#e7ecec;border-color:#5c6b6b}

/* Timetable sheet: days across the top, times down the side */
.ts{--ink:#14303f;--line:#d5e0e8;background:#fff;border:1px solid var(--line);border-radius:.9rem;overflow:hidden;box-shadow:0 6px 24px rgba(20,48,63,.08);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.ts-head{background:linear-gradient(120deg,var(--brand-dark,#143743) 0%,var(--brand,#1d4e5f) 55%,var(--brand-light,#2b7a8c) 100%);color:#fff;text-align:center;padding:1.1rem 1rem .95rem}
.ts-org{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.ts-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.65rem;letter-spacing:.03em;margin:.15rem 0 .65rem}
.ts-chips{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.ts-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:2rem;padding:.2rem .9rem;font-size:.78rem;display:inline-flex;gap:.45rem;align-items:baseline}
.ts-chip small{text-transform:uppercase;letter-spacing:.09em;font-size:.6rem;opacity:.75}
.ts-chip b{font-weight:600;min-width:2.5rem}
.ts-scroll{overflow-x:auto;padding:.9rem}
.ts-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0}
.ts-table th,.ts-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:.4rem .5rem;vertical-align:middle}
.ts-table tr>*:first-child{border-left:1px solid var(--line)}
.ts-table thead th{border-top:1px solid var(--line)}
.ts-table thead tr>th:first-child{border-top-left-radius:.5rem}
.ts-table thead tr>th:last-child{border-top-right-radius:.5rem}
.ts-corner{background:var(--brand-dark,#143743);color:#cfe0e6;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;width:90px;border-color:var(--brand-dark,#143743)!important}
.ts-dayh{background:var(--brand,#1d4e5f);color:#fff;text-align:center;font-weight:700;letter-spacing:.08em;font-size:.84rem;border-color:var(--brand-dark,#143743)!important}
.ts-dayh small{display:block;font-weight:400;opacity:.8;letter-spacing:0;font-size:.68rem}
.ts-time{background:#f1f6f9;color:var(--ink);text-align:center;font-size:.78rem;line-height:1.3;width:90px;white-space:nowrap}
.ts-time b{display:block;font-weight:700}
.ts-time span{display:block;color:#6a8190;font-size:.7rem}
.ts-empty{background:repeating-linear-gradient(135deg,#fff 0 10px,#fafcfd 10px 20px);height:62px}
.ts-cell{height:62px;font-size:.78rem;line-height:1.28;text-align:left;padding:.45rem .6rem .45rem .75rem;box-shadow:inset 4px 0 0 var(--acc,#1d4e5f)}
.ts-cell strong{display:block;text-transform:uppercase;letter-spacing:.02em;font-size:.75rem;color:var(--ink)}
.ts-cell span{display:block;color:#4f6572;font-size:.68rem;margin-top:.12rem}
.ts-tag{display:inline-block;font-style:normal;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;background:#c98a12;color:#fff;border-radius:.2rem;padding:0 .3rem;margin-top:.1rem}
.ts-t0{background:#e3f1f4;--acc:#1d4e5f}.ts-t1{background:#fdf1d6;--acc:#b9770e}.ts-t2{background:#efe8fa;--acc:#6d4aa6}.ts-t3{background:#e2f3e8;--acc:#2b7a4b}
.ts-t4{background:#fbe4e1;--acc:#b3392f}.ts-t5{background:#e4ecfb;--acc:#3454a8}.ts-t6{background:#fbe9dc;--acc:#b35a1f}.ts-t7{background:#e8edee;--acc:#4b5b60}
.ts-cat{background:#efe8fa;--acc:#6d4aa6}.ts-exam{background:#fbe4e1;--acc:#b3392f}.ts-other{background:#eceff0;--acc:#6b7a80}
.ts-draft{outline:2px dashed #c98a12;outline-offset:-4px}
.ts-brk{background:repeating-linear-gradient(135deg,#e9f0f5 0 10px,#dfe9f0 10px 20px);color:#35566b;text-align:center;font-weight:800;letter-spacing:.7em;font-size:.76rem;padding:.55rem}
.ts-extra{background:#fffdf4;font-size:.72rem;vertical-align:top}
.ts-notes-row .ts-time{background:#fff6dd}
.ts-legend{display:flex;flex-wrap:wrap;gap:.9rem;padding:0 .95rem .7rem;font-size:.72rem;color:#4f6572}
.ts-legend i{display:inline-block;width:.85rem;height:.85rem;border-radius:.2rem;margin-right:.3rem;vertical-align:-.12rem;box-shadow:inset 3px 0 0 var(--acc)}
.ts-sign{display:flex;gap:1.6rem;padding:.4rem .95rem .6rem}
.ts-sign div{flex:1;text-align:center;font-size:.72rem;color:#4f6572}
.ts-sign i{display:block;border-bottom:1px solid #6b7f8b;height:1.7rem;margin-bottom:.25rem}
.ts-gen{text-align:right;font-size:.64rem;color:#8a99a2;padding:0 .95rem .65rem}



/* =========================================
   TIMETABLE: DAYS DOWN, TIME ACROSS
   ========================================= */

.ts-table-days {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

.ts-table-days th,
.ts-table-days td {
    border: 1px solid var(--line, #dbe2ea);
    vertical-align: top;
}

/* Top header row */
.ts-table-days thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f1f6f9;
    color: var(--ink, #243746);
    text-align: center;
    white-space: nowrap;
    padding: 0.65rem 0.5rem;
}

.ts-table-days thead tr > th:first-child {
    border-top-left-radius: 0.5rem;
}

.ts-table-days thead tr > th:last-child {
    border-top-right-radius: 0.5rem;
}

/* Top-left corner cell */
.ts-table-days .ts-corner {
    position: sticky;
    left: 0;
    z-index: 8;
    min-width: 90px;
    width: 90px;
    background: var(--brand-dark, #143743);
    color: #cfe0e6;
    border-color: var(--brand-dark, #143743) !important;
}

/* Day names down the left side */
.ts-table-days .ts-dayh {
    position: sticky;
    left: 0;
    z-index: 4;
    min-width: 100px;
    width: 100px;
    background: var(--brand, #1d4e5f);
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-color: var(--brand-dark, #143743) !important;
    vertical-align: middle;
}

.ts-table-days .ts-dayh small {
    display: block;
    font-weight: 400;
    opacity: 0.8;
    letter-spacing: 0;
    font-size: 0.68rem;
}

/* Time periods across the top */
.ts-table-days .ts-time {
    min-width: 100px;
    width: auto;
    background: #f1f6f9;
    color: var(--ink, #243746);
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
}

.ts-table-days .ts-time b {
    display: block;
    font-weight: 700;
}

.ts-table-days .ts-time span {
    display: block;
    color: #6a8190;
    font-size: 0.7rem;
}

/* Empty timetable slots */
.ts-table-days .ts-empty {
    min-width: 85px;
    height: 62px;
    background: repeating-linear-gradient(
        135deg,
        #fff 0 10px,
        #fafcfd 10px 20px
    );
}

/* Timetable session cells */
.ts-table-days .ts-cell {
    min-width: 100px;
    height: 62px;
    padding: 0.4rem;
    text-align: left;
    vertical-align: top;
    box-shadow: inset 4px 0 0 var(--acc, #1d4e5f);
}

/* Session content inside a cell */
.ts-table-days .ts-session-content {
    margin-bottom: 5px;
    padding: 0.35rem 0.4rem;
    border-radius: 4px;
    overflow-wrap: anywhere;
    background: inherit;
}

.ts-table-days .ts-session-content strong {
    display: block;
    color: var(--ink, #243746);
    font-size: 0.75rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ts-table-days .ts-session-content span {
    display: block;
    color: #4f6572;
    font-size: 0.68rem;
    margin-top: 0.12rem;
}

/* Preserve the existing timetable category colors */
.ts-table-days .ts-t0 { background: #e3f1f4; --acc: #1d4e5f; }
.ts-table-days .ts-t1 { background: #fdf1d6; --acc: #b9770e; }
.ts-table-days .ts-t2 { background: #efe8fa; --acc: #6d4aa6; }
.ts-table-days .ts-t3 { background: #e2f3e8; --acc: #2b7a4b; }
.ts-table-days .ts-t4 { background: #fbe4e1; --acc: #b3392f; }
.ts-table-days .ts-t5 { background: #e4ecfb; --acc: #3454a8; }
.ts-table-days .ts-t6 { background: #fbe9dc; --acc: #b35a1f; }
.ts-table-days .ts-t7 { background: #e8edee; --acc: #4b5b60; }

.ts-table-days .ts-cat { background: #efe8fa; --acc: #6d4aa6; }
.ts-table-days .ts-exam { background: #fbe4e1; --acc: #b3392f; }
.ts-table-days .ts-other { background: #eceff0; --acc: #6b7a80; }

/* Tags */
.ts-table-days .ts-tag {
    display: inline-block;
    font-style: normal;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #c98a12;
    color: #fff;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    margin-top: 0.1rem;
}

/* Break periods */
.ts-table-days .ts-brk {
    min-width: 70px;
    background: repeating-linear-gradient(
        135deg,
        #e9f0f5 0 10px,
        #dfe9f0 10px 20px
    );
    color: #35566b;
    text-align: center;
    vertical-align: middle;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
    padding: 0.55rem;
}

/* Notes / due dates row */
.ts-table-days .ts-extra {
    background: #fffdf4;
    font-size: 0.72rem;
    vertical-align: top;
    line-height: 1.6;
    padding: 0.65rem;
}

.ts-table-days .ts-notes-row .ts-time {
    background: #fff6dd;
}

/* Draft timetable indicator */
.ts-table-days .ts-draft {
    outline: 2px dashed #c98a12;
    outline-offset: -4px;
}

/* Legend and footer */
.ts-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 0 0.95rem 0.7rem;
    font-size: 0.72rem;
    color: #4f6572;
}

.ts-legend i {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 0.2rem;
    margin-right: 0.3rem;
    vertical-align: -0.12rem;
    box-shadow: inset 3px 0 0 var(--acc);
}

.ts-sign {
    display: flex;
    gap: 1.6rem;
    padding: 0.4rem 0.95rem 0.6rem;
}

.ts-sign div {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: #4f6572;
}

.ts-sign i {
    display: block;
    border-bottom: 1px solid #6b7f8b;
    height: 1.7rem;
    margin-bottom: 0.25rem;
}

.ts-gen {
    text-align: right;
    font-size: 0.64rem;
    color: #8a99a2;
    padding: 0 0.95rem 0.65rem;
}

/* Horizontal scrolling on smaller screens */
.ts-table-scroll {
    width: 100%;
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .ts-table-days {
        min-width: 850px;
    }

    .ts-table-days th,
    .ts-table-days td {
        padding: 0.35rem;
    }

    .ts-table-days .ts-dayh,
    .ts-table-days .ts-corner {
        min-width: 85px;
        width: 85px;
    }
}

/* Branding */
.brand-lock{display:flex;align-items:center;gap:.6rem;margin:0 0 1.5rem .5rem}
.brand-lock .brand-name{margin:0}
.brand-logo{height:38px;width:38px;object-fit:contain;background:#fff;border-radius:.4rem;padding:2px}
.login-logo{height:54px;max-width:140px;object-fit:contain;background:#fff;border-radius:.5rem;padding:4px}
.ts-logo{height:46px;max-width:150px;object-fit:contain;background:#fff;border-radius:.5rem;padding:3px;margin-bottom:.4rem}