:root{
    --ink: #000000;
    --muted: #747a85;
    --grid: #1f2937;
    --accent: #22d3ee;
    --slot-shadow: rgba(0,0,0,0.35);
    --time-col-w: 120px;
    --room-col-w: 130px;
}

html, body { height: 100%; }
body {
    margin: 0; color: var(--ink);
    font-family: 'Times New Roman', Times, serif;
}

.wrap { padding: 0 16px; }
h1 { font-size: 20px; margin: 0 0 12px 0; font-weight: 700; letter-spacing: 0.2px; }
a:visited{
    color: blue;
}

.controls {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--grid); padding: 12px; border-radius: 10px; margin-bottom: 14px;
}
.controls label { color: var(--muted); }
  
.pill { display: inline-flex; border: 1px solid var(--grid); border-radius: 999px; overflow: hidden; }
.pill label { padding: 6px 10px; cursor: pointer; border-right: 1px solid var(--grid); user-select: none; }
.pill label:last-child { border-right: none; }
.pill input { display: none; }
.pill input:checked + span {color: var(--accent); font-weight: 700; }

.days { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }

table{
    border-radius: 1px;
}

table.schedule {
    border-collapse: separate; border-spacing: 0;
    border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); border-radius: 10px; overflow: hidden;
    
}
.room-wsc { background: #ffff00; color: #000; }   /* yellow */
.room-brg { background: #00b0f0; color: #000; }   /* dark blue */
.room-las { background: #ffc000; color: #000; }   /* orange */

table.schedule th, table.schedule td {
    box-shadow: inset 1px 1px 0 0 var(--grid);
    text-align: center; vertical-align: middle; padding: 3px 3px;
}
/*table.schedule th:last-child, table.schedule td:last-child { border-right: none;}
table.schedule tr:last-child td { border-bottom: none; }*/

thead th { font-weight: 700; letter-spacing: 0.3px; }
thead th.term { width: var(--time-col-w); background: var(--accent); color: blue;}
thead th.day { text-transform: uppercase; color: red;}
thead th.buildings {color: blue; padding: 20px;}


tbody th.time {
    width: var(--time-col-w);
    position: static; left: 0; z-index: 1; color: blue; font-weight: 600;
}
tbody td { width: var(--room-col-w); height: 28px; }

.slot {
    color: #000;
    font-weight: bold;
    /*box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 3px var(--slot-shadow);
    border-radius: 6px;*/
}
.slot .line { display: block; }
.slot .courses { font-size: 13px; letter-spacing: 0.2px; }
.slot .labs { font-size: 12px; opacity: 0.95; }
.slot .prof { font-size: 12px; font-weight: 600; opacity: 0.85; }

.legend { margin-top: 8px; color: var(--muted); font-size: 12px; }
.legend b { color: var(--ink); }

.error { color: #fca5a5; font-weight: 600; }
.ok { color: #86efac; font-weight: 600; }

.room-col[data-time]:hover::after {
  content: attr(data-time);
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  top: 30px;
  left: 50%;
}
.room-col {
    position: relative; /* so ::after is positioned against cell */
}
.time{
    height: 28px;
}


.toolbar { position: relative; display: flex; gap: 12px; align-items: center; }
.btn { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
.btn[aria-expanded="true"] { border-color: #888; }

.dropdown[hidden] { display: none; }
.dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 20;
    min-width: 320px; max-height: 60vh; overflow: auto;
    background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 12px;
}

.fs { border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.fs legend { font-weight: 600; padding: 0 6px; }

.checks { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 6px 12px; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: 0.95rem; }

.link { background: none; border: none; color: #0b65d8; cursor: pointer; padding: 2px 6px; }
.link:hover { text-decoration: underline; }
.row { display: flex; gap: 8px; margin-top: 6px; }

.event.is-hidden { display: none !important; } /* hide filtered slots */

#extraFrame{
    overflow: auto;
    scale: 0.95;
}
.extra{
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    th {
        background-color: #003366; /* dark blue */
        color: white;
        padding: 6px 8px;
        border: 2px solid #ccc;
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    td {
        border: 1px solid #ccc;
        padding: 6px 8px;
        overflow: auto;
    }
}
  

@media print and (orientation: portrait) {
    .controls, #msg.legend, #extraContainer, h1 { display: none !important; }
    #output.days { display: block !important; }
    #output{
        transform: scale(0.8);
        transform-origin: top left;
        width: 125%;
    }
    .schedule {
        display: block;
        width: 100% !important;
        table-layout: fixed;
        break-before: page;
        break-inside: auto !important;
        page-break-before: always;
        font-size: 9.5pt;
    }
    .schedule th, .schedule td {
        border: 0.994pt solid #000;
        padding: 2px 3px;
        font-size: 8.5pt;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
    .schedule tr{
        break-inside: avoid;
    }
}