@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Global – printed-handbook aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Dark celestial blue — used wherever white text sits on a coloured bg.
       Contrast vs white ≈ 5.7 : 1  (passes WCAG AA).                      */
    --navy:   #1565a8;
    --navy2:  #2478bb;
    --rule:   #1565a8;

    /* Celestial blue accent — borders, highlights, text-on-white emphasis. */
    --accent: #3498db;

    --bg:     #f4f6f9;
    --paper:  #ffffff;
    --text:   #0d0d0d;
    --muted:  #546e7a;
    --border: #aac4de;
    --stripe: #ebf5fb;
}

body {
    font-family: 'Roboto Condensed', 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 12.5px;
    line-height: 1.42;
    color: var(--text);
    background: var(--bg);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ── Page (looks like a single printed sheet) ────────────────────────────── */
.page {
    max-width: 1180px;
    margin: 1.5rem auto 3rem;
    background: var(--paper);
    box-shadow: 0 2px 22px rgba(0,0,0,.20);
    padding: 2rem 2.4rem 2.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Book header — mimics the running-head + title block of the handbook
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   Book header — logo + title block side by side
   ═══════════════════════════════════════════════════════════════════════════ */
.page-hdr-wrap {
    display: flex;
    align-items: flex-start;    /* height driven by text content, not logo */
    gap: 1.2rem;
    margin-bottom: 1.6rem;
    border-top: 3px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    padding: .5rem 0;
}
/* Logo stretches to the wrapper's natural (text-driven) height, never taller */
.page-logo {
    align-self: stretch;
    width: auto;
    max-width: 102px;
    height: 50px;               /* flex stretch controls the height */
    object-fit: contain;
    object-position: left center;
    flex-shrink: 0;
}
.book-hdr {
    flex: 1;
    border: none;               /* borders are now on .page-hdr-wrap */
    padding: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.bh-left { flex: 1; }
.bh-right { text-align: right; }
 
.bh-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.01em;
    line-height: 1.25;
}
.bh-subtitle {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .15rem;
}
.bh-code {
    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--stripe);
    border: 1px solid var(--border);
    padding: .22rem .6rem;
    border-radius: 3px;
    white-space: nowrap;
}
.bh-level {
    font-size: .72rem;
    color: var(--muted);
    margin-top: .2rem;
}

/* Commented
.book-hdr {
    border-top: 3px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    padding: .5rem 0;
    margin-bottom: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.bh-left { flex: 1; }
.bh-right { text-align: right; }

.bh-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.01em;
    line-height: 1.25;
}
.bh-subtitle {
    font-size: .78rem;
    color: var(--muted);
    margin-top: .15rem;
}
.bh-code {
    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--stripe);
    border: 1px solid var(--border);
    padding: .22rem .6rem;
    border-radius: 3px;
    white-space: nowrap;
}
.bh-level {
    font-size: .72rem;
    color: var(--muted);
    margin-top: .2rem;
}
*/
/* ═══════════════════════════════════════════════════════════════════════════
   Section heading
   ═══════════════════════════════════════════════════════════════════════════ */
.sec-head {
    font-size: .7rem;
    letter-spacing: -.01em;
    font-weight: bold;
    color: var(--navy);
    background: transparent;
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    padding: .3rem .65rem;
    margin: 1.6rem 0 .55rem;
}
.sec-head:first-of-type { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Overall Credit Structure  (two tables side by side)
   ═══════════════════════════════════════════════════════════════════════════ */
.credit-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2rem;
    align-items: start;
    justify-content: start;
}
@media (max-width: 620px) { .credit-grid { grid-template-columns: 1fr; } }

.credit-tbl { border-collapse: collapse; font-size: .82rem; }
.credit-tbl th {
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .65rem;
    text-align: left;
    white-space: nowrap;
    border: 1px solid #0d4d8a;
}
.credit-tbl th.r, .credit-tbl td.r {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.credit-tbl td {
    padding: .22rem .65rem;
    border: 1px solid var(--border);
    vertical-align: top;
}
.credit-tbl tbody tr:nth-child(even) td { background: var(--stripe); }
.credit-tbl tfoot td {
    font-weight: 800;
    border-top: 2px solid var(--accent);
    background: var(--stripe);
    padding: .28rem .65rem;
}
/* Indented sub-category rows */
.credit-tbl td.indent { padding-left: 1.4rem; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   PLOs
   ═══════════════════════════════════════════════════════════════════════════ */
.plo-tbl { border-collapse: collapse; width: 100%; font-size: .82rem; }
.plo-tbl th {
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .65rem;
    text-align: left;
    border: 1px solid #0d4d8a;
}
.plo-tbl td {
    padding: .3rem .65rem;
    border: 1px solid var(--border);
    vertical-align: top;
}
.plo-tbl tbody tr:nth-child(even) td { background: var(--stripe); }
.plo-tbl .plo-no {
    white-space: nowrap;
    font-weight: 700;
    color: var(--navy);
    width: 5.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Semester-wise schedule  — one row per semester
   ═══════════════════════════════════════════════════════════════════════════ */
.sem-wrap { overflow-x: auto; }

.sem-tbl {
    border-collapse: collapse;
    width: 100%;
    font-size: .7rem;
}

/* Column widths — 5 columns now (IB and OB merged into Courses) */
.sem-tbl .col-sem   { width: 3rem; }
.sem-tbl .col-crs   { }              /* takes all remaining width */
.sem-tbl .col-hrs   { width: 4.5rem; }
.sem-tbl .col-ngu   { width: 3.5rem; }
.sem-tbl .col-cr    { width: 4rem; }

/* Header row */
.sem-tbl thead th {
    background: var(--navy);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .3rem .5rem;
    text-align: center;
    border: 1px solid #0d4d8a;
    white-space: nowrap;
}
.sem-tbl thead th.left { text-align: left; }

/* Body rows */
.sem-tbl tbody tr { vertical-align: top; }
.sem-tbl tbody tr:nth-child(even) .sem-tbl-td { background: var(--stripe); }

.sem-tbl-td {
    border: 1px solid var(--border);
    padding: .3rem .45rem;
    vertical-align: top;
}

/* Semester number cell */
.sem-num {
    text-align: center;
    font-weight: 800;
    font-size: .88rem;
    color: var(--navy);
    background: var(--stripe) !important;
    vertical-align: middle;
    border-right: 2px solid var(--accent);
}

/* Summer / Winter break rows */
.sem-break {
    font-size: .72rem !important;
    font-weight: 600 !important;
    font-style: italic;
    color: var(--muted) !important;
    background: #f5efe6 !important;
    border-right: 2px solid #c8a060 !important;
    letter-spacing: .02em;
}
.sem-tbl tbody tr:has(td.sem-break) .sem-tbl-td {
    background: #fdf8f2;
    border-color: #ddd0bc;
}

/* Courses cell: flex row of course cards — all entries (mandatory + IB + OB) */
.courses-cell { padding: .15rem .15rem !important; }
.courses-flex {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: flex-start;
}

/* ── Mandatory course card (classic book style) ────────────────────────────── */
.c-card {
    padding: .18rem .35rem;
    width: 9.5rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #fff;
}
.c-card .c-code {
    font-weight: 800;
    font-size: .76rem;
    color: var(--navy);
    letter-spacing: .01em;
    white-space: nowrap;
    line-height: 1.3;
}
.c-card .c-title {
    font-size: .72rem;
    color: var(--text);
    line-height: 1.3;
}
/* c-load is kept for tooltip context but not rendered in the schedule table */

/* ── Basket cards (IB = green, OB = amber) ─────────────────────────────────── */
.b-card {
    padding: .18rem .35rem;
    width: 9.5rem;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: #fff;
    font-size: .74rem;
    line-height: 1.3;
}
/* Institute basket: green left accent */
.b-ib { border-left: 3px solid #3a7d3a; }
.b-ib .b-tag { color: #1a5c1a; font-weight: 800; font-size: .74rem; }
/* Other basket: amber left accent */
.b-ob { border-left: 3px solid #b06000; }
.b-ob .b-tag { color: #7a3a00; font-weight: 800; font-size: .74rem; }

.b-card .b-load  { font-size: .65rem; color: var(--muted); white-space: nowrap; }
.b-card .b-cr    { font-weight: 700; color: var(--navy); font-size: .65rem; }

/* Totals cells */
.tot-cell {
    text-align: center;
    font-weight: 700;
    font-size: .8rem;
    color: var(--navy);
    vertical-align: middle;
}

/* Grand-total footer row */
.sem-tbl tfoot td {
    background: var(--navy);
    color: #fff;
    font-weight: 800;
    font-size: .8rem;
    text-align: center;
    padding: .32rem .5rem;
    border: 1px solid #0d4d8a;
}
.sem-tbl tfoot td.left { text-align: left; }
.sem-tbl tfoot { display: none;}

/* ═══════════════════════════════════════════════════════════════════════════
   Notes box
   ═══════════════════════════════════════════════════════════════════════════ */
.notes-box {
    margin-top: .4rem;
    background: #f0f8ff;
    border: 1px solid var(--accent);
    border-left: 4px solid var(--navy);
    padding: .65rem .85rem;
    font-size: .82rem;
    color: #0d2a40;
    line-height: 1.5;
}
.notes-box p  { margin: .3rem 0; }
.notes-box ul, .notes-box ol {
    padding-left: 1.4rem;
    margin: .3rem 0;
}
.notes-box li { margin: .18rem 0; }
.notes-box ol > li > ul { list-style-type: disc; }
.notes-box strong, .notes-box b { font-weight: 700; }
.notes-box em,     .notes-box i { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   Course catalog (DC / DE)
   ═══════════════════════════════════════════════════════════════════════════ */
.cat-tbl { border-collapse: collapse; width: 100%; font-size: .82rem; }
.cat-tbl th {
    background: var(--navy);
    color: #fff;
    font-size: .69rem;
    font-weight: 700;
    padding: .28rem .6rem;
    text-align: left;
    border: 1px solid #0d4d8a;
    white-space: nowrap;
}
.cat-tbl th.r { text-align: right; }
.cat-tbl td {
    padding: .22rem .6rem;
    border: 1px solid var(--border);
    vertical-align: top;
}
.cat-tbl tbody tr:nth-child(even) td { background: var(--stripe); }
.cat-tbl .t-code {
    font-family: 'Courier New', Courier, monospace;
    font-size: .8rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    width: auto;
}
.cat-tbl .t-title { width: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   Course catalog — two-column flowing layout
   ═══════════════════════════════════════════════════════════════════════════ */
.catalog-columns {
    columns: 2;
    column-gap: 2rem;
    column-fill: balance;
    margin-bottom: 1rem;
}
@media (max-width: 720px) { .catalog-columns { columns: 1; } }

/* Each (sec-head + table) stays in one column, never splits mid-section */
.catalog-section {
    break-inside: avoid;
    margin-bottom: .55rem;
}
/* sec-head always sticks to its table */
.catalog-section .sec-head { break-after: avoid; margin-top: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   Print
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    body { background: #fff; font-size: 11px; }
    .page { box-shadow: none; margin: 0; padding: .8rem 1.2rem; max-width: 100%; }

    /* Force 2-column catalog — overrides any screen-width-based fallback */
    .catalog-columns {
        columns: 2;
        column-gap: 0.5rem;
    }
    .cat-tbl {
	font-size: 9px;
    }
    .cat-tbl td {
    	padding: 0;
	border: none;
    }
    .cat-tbl tr .r {
	padding: 1px;
    }
.cat-tbl tbody tr:nth-child(even) td { background: var(--paper); }
.credit-tbl td {
	padding: 0;
	border: none;
}
.credit-tbl tbody tr:nth-child(even) td { background: var(--paper); }
.plo-tbl td {
    padding: 0;
    border: none;
    vertical-align: top;
}
.plo-tbl tbody tr:nth-child(even) td { background: var(--paper); }
.plo-tbl .plo-no {
    width: 2.5rem;
}

.sec-head {
    font-size: 0.9rem;
    border-top: none;
    border-bottom: none;
    padding: .3rem;
    margin: 1.6rem 0 .55rem;
}
    th {display: none;}
.cat-tbl tfoot {display: none;}
.credit-tbl tfoot tr td { padding: 0; border: none;
	border-top: 2px solid var(--accent); background: var(--paper); }

.sem-tbl {
    border-collapse: collapse;
    width: 102.5%;
    font-size: .7rem;
}
.sem-tbl tfoot { display: none;}
.sem-tbl .col-sem   { width: 0.8rem; }
.sem-tbl .col-crs   { }              /* takes all remaining width */
.sem-tbl .col-hrs   { width: 1.5rem; }
.sem-tbl .col-ngu   { width: 1.5rem; }
.sem-tbl .col-cr    { width: 1.5rem; }
.sem-tbl tbody tr:nth-child(even) .sem-tbl-td { background: var(--paper); }
.sem-num {
    background: var(--paper) !important;
    vertical-align: middle;
    border-right: 1px solid var(--accent);
}
.courses-flex { gap: 0; }
.b-ib { border-left: 4px solid var(--navy); }
.b-ib .b-tag { color: black; font-weight: normal; font-size: .74rem; }
/* Other basket: amber left accent */
.b-ob { border-left: 4px solid var(--navy); }
.b-ob .b-tag { color: black; font-weight: normal; font-size: .74rem; }

    /* Narrower cards so more fit side-by-side in the semester table */
    .c-card, .b-card { width: 3.8rem; font-size:5px;}

    /* Let the semester table expand fully — no scrollbox clipping */
    .sem-wrap { overflow: visible; }
.notes-box {
    margin-top: .2rem;
    background: var(--paper);
    border: 1px solid var(--accent);
    border-left: 4px solid var(--navy);
    padding: .15rem .15rem;
    font-size: .7rem;
    color: #0d2a40;
    line-height: 1;
}
.notes-box p  { margin: .3rem 0; }
.notes-box ul, .notes-box ol {
    padding-left: 1.4rem;
    margin: .3rem 0;
}
.notes-box li { margin: .18rem 0; }
.notes-box ol > li > ul { list-style-type: disc; }
.notes-box strong, .notes-box b { font-weight: 700; }
.notes-box em,     .notes-box i { font-style: italic; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Course-code hover tooltip
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cid] {
    cursor: help;
    border-bottom: 1px dashed var(--navy);
}
#course-tip {
    position: fixed;
    z-index: 9999;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 6px 22px rgba(52,152,219,.18);
    padding: .65rem .85rem;
    font-size: .78rem;
    line-height: 1.48;
    pointer-events: none;
    display: none;
}
#course-tip .tip-code {
    font-weight: 800;
    color: var(--navy);
    font-size: .85rem;
}
#course-tip .tip-title {
    font-weight: 600;
    color: var(--text);
    margin: .1rem 0 .25rem;
}
#course-tip .tip-ltp {
    font-size: .71rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-bottom: .3rem;
}
#course-tip .tip-desc {
    color: #222;
    border-top: 1px solid #dde4ee;
    padding-top: .3rem;
    margin-top: .2rem;
    font-size: .76rem;
    max-height: 10rem;
    overflow-y: auto;
}