/* ================================================================
   Valley View SIS — design system
   Classic-SIS chrome after PowerSchool/Aeries/Skyward-era screens
   (reference corpus: see reference/catalog-data.js).
   Constraints: no bundler, no webfonts, small serif-free type,
   hard 1px borders, alternating table rows, dense layout.

   S1b visual-fidelity pass (see reference/chrome-delta.md, deltas D1–D7):
   D1 two-tier header (navy branding bar + darker context/action strip)
   D2 dark-blue panel headers with white bold text
   D3 raised-gray active tab / plain-text inactive tabs
   D4 dense data grids: dark-blue header row, stripes, right-aligned numerics
   D5 accent devices: .sis-metabar, .col-current, .col-accent-{blue,orange}
   D6 beveled buttons + .sis-button-warn / .sis-button-go
   D7 14px page title with underline, 2px section separators, 980px shell
   ================================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: #d4d0c8;            /* warm desktop gray (D7: kept) */
  color: #1a1a1a;
  font: 11px/1.45 Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif;
}

#shell {
  width: 980px;                   /* D7: keep the 980px shell */
  margin: 8px auto;
  background: #fff;
  border: 1px solid #7f7f7f;
}

.clear { clear: both; }

/* ---------- D1: two-tier header --------------------------------
   Tier 1 = solid navy branding bar (#27506e) with a 3px darker
   bottom border. Tier 2 = darker context/action strip (#1e3d55)
   holding small bordered selects and the right-aligned control
   cluster (search input + icon buttons + circular user chip).
   -------------------------------------------------------------- */

#topbar {
  background: #27506e;            /* D1 tier 1: branding bar */
  color: #fff;
  padding: 6px 10px 6px;
  border-bottom: 3px solid #16324a;
}
#topbar-title {
  font-size: 12px;                /* D1: 12px semibold white brand text */
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
}

/* tier 2 — darker context/action strip */
#topbar-context {
  background: #1e3d55;            /* D1 tier 2: darker strip */
  color: #d6e2ee;
  padding: 4px 10px 4px;
  border-bottom: 1px solid #132c40;
  font-size: 10px;
  overflow: hidden;               /* clearfix for floated cluster */
}
#topbar-context .ctx-label { color: #9fb8cc; }

/* small bordered selects on the context strip */
#topbar-context select,
.sis-context-select {
  font-size: 10px;
  background: #fdfdfb;
  color: #1a1a1a;
  border: 1px solid #4f7186;
  border-top-color: #35566b;
  border-left-color: #35566b;
  padding: 0 2px;
  height: 18px;
  vertical-align: middle;
}

/* right-aligned control cluster */
.sis-control-cluster {
  float: right;
  white-space: nowrap;
}
.sis-control-cluster .quicksearch {
  float: none;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  color: #d6e2ee;
}
.sis-control-cluster .quicksearch label { font-size: 10px; }
.sis-control-cluster .quicksearch input {
  font-size: 10px;
  height: 18px;
  width: 130px;
  border: 1px solid #4f7186;
  padding: 0 3px;
}
.sis-iconbtn {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 18px;
  margin-left: 3px;
  border: 1px solid #4f7186;
  border-top-color: #6f93a8;
  border-left-color: #6f93a8;
  background: #2f546c;
  color: #eaf2f8;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.sis-iconbtn:hover { background: #3c6884; color: #fff; }
/* circular user chip with initials */
.sis-userchip {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  border-radius: 50%;
  background: #d8e6f1;
  color: #21435f;
  border: 1px solid #4f7186;
  font-size: 10px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}
.sis-userchip:hover { background: #fff; color: #14304a; }

#topbar a.topbar-link,
#topbar a.topbar-link:visited { color: #ffe9a8; }

/* ---------- D3: tab row (module nav) ---------------------------
   Inactive tabs = plain 11px text on the strip (no box).
   Active tab   = raised light tab (#f7f8f7, 1px border, no bottom
   border) merging into the page body. No gradient / fused bar.
   -------------------------------------------------------------- */

#tabbar {
  background: #e8e6e1;
  border-bottom: 1px solid #9a958c;
  padding: 4px 8px 0;
}
ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
ul.tabs li {
  float: left;
  margin: 0 1px 0 0;
  border: 1px solid transparent;   /* D3: inactive = plain text */
  border-bottom: none;
  background: transparent;
}
ul.tabs li a {
  display: block;
  padding: 3px 9px 2px;
  text-decoration: none;
  color: #204060;
  font-size: 11px;
  font-weight: normal;             /* D3: plain-text inactive */
}
ul.tabs li a:hover { background: #f2efe8; }
ul.tabs li.active {
  background: #f7f8f7;             /* D3: raised light active tab */
  border: 1px solid #9a958c;
  border-bottom: 1px solid #f7f8f7;/* no bottom border (merges) */
  position: relative;
  top: 1px;
}
ul.tabs li.active a { color: #1a1a1a; font-weight: bold; }

/* legacy quick search (kept for non-cluster placements) */
.quicksearch {
  float: right;
  padding: 2px 2px 4px;
  font-size: 10px;
  color: #555;
}
.quicksearch input { font-size: 11px; }

/* ---------- content & D7 page title / separators --------------- */

#content { padding: 8px 10px 10px; }

/* D7: 14px bold page title with a 1px underline */
.sis-page-title {
  font-size: 14px;
  font-weight: bold;
  color: #1f3d57;
  padding-bottom: 3px;
  margin: 0 0 8px;
  border-bottom: 1px solid #a8b4b8;
}

/* D7: section separators as 2px bars */
hr, .sis-sep {
  border: none;
  border-top: 2px solid #c2ccce;
  height: 0;
  margin: 8px 0;
}

table.layout { width: 100%; border-collapse: collapse; }
table.layout > tbody > tr > td { vertical-align: top; padding: 0; }
td.col-left  { width: 58%; padding-right: 8px !important; }
td.col-right { width: 42%; }

/* ---------- boxed panels (D2: dark-blue headers) -------------- */

.sis-box {
  border: 1px solid #9a958c;
  background: #fdfdfb;
  margin-bottom: 10px;
}
.sis-box-title {
  background: #2b5570;             /* D2: dark-blue bar */
  border-bottom: 1px solid #1e3d55;
  padding: 3px 8px;
  font-weight: bold;
  font-size: 11px;
  color: #fff;                     /* D2: white bold text */
}
.sis-box-body { padding: 7px 8px; }
.sis-box-body p { margin: 0 0 6px; }

/* ================================================================
   V1 screen-level fidelity pass (see reference/v1-screen-deltas.md,
   patterns P1–P11). Reusable utility classes:
     P1  .sis-bar + .sis-bar-actions + .sis-caret  (blue section bar)
     P2  .sis-accordion + .sis-accordion-body      (gray chevron rows)
     P3  .sis-rail                                  (left link rail)
     P4  .sis-pill / .sis-pill-go / .sis-actionbar  (pill + icon bar)
     P5  .sis-status-ok / .sis-status-bad           (circular status)
     P6  .sis-stepper                               (‹ Name ▾ › bar)
     P7  .sis-band                                  (grouped header band)
     P8  .sis-resultsbar / .sis-filters             (count bar, filters)
     P9  .sis-button-primary-danger(.sis-full)      (wide red primary)
   All controls are server-rendered; nothing here needs JS.
   ================================================================ */

/* ---------- P1: blue collapsible-looking section bar ----------- */

.sis-bar {
  background: #2b5570;
  border: 1px solid #1e3d55;
  color: #fff;
  padding: 3px 8px;
  overflow: hidden;               /* clearfix for floats */
  margin-bottom: 6px;
}
.sis-bar .sis-bar-title {
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  float: left;
  padding-top: 1px;
}
/* right-aligned small white/near-white buttons inside the bar */
.sis-bar-actions {
  float: right;
  white-space: nowrap;
}
.sis-bar-actions a,
.sis-bar-actions button,
.sis-bar-actions .sis-bar-btn {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  height: 16px;
  line-height: 15px;
  font-size: 10px;
  font-weight: bold;
  color: #22415a;
  background: #fbfcfc;
  border: 1px solid #16293a;
  text-decoration: none;
  cursor: pointer;
}
.sis-bar-actions a:hover,
.sis-bar-actions button:hover { background: #e7eff4; }
/* inert right-floated collapse caret glyph */
.sis-caret {
  float: right;
  margin-left: 6px;
  color: #cfe0ec;
  font-size: 11px;
  font-weight: bold;
  cursor: default;
  text-decoration: none;
}

/* ---------- P2: gray accordion row with chevron ----------------- */

.sis-accordion {
  background: #e4e8e9;
  border: 1px solid #b3bcbf;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: bold;
  color: #23405a;
  overflow: hidden;
  cursor: default;
}
.sis-accordion .sis-accordion-chevron {
  float: right;
  color: #5c6f7c;
  font-size: 11px;
  font-weight: bold;
}
.sis-accordion-body {
  border: 1px solid #b3bcbf;
  border-top: none;
  background: #fdfdfb;
  padding: 6px 8px;
  margin-bottom: 6px;
}

/* ---------- P3: left navigation rail ---------------------------- */

.sis-rail {
  width: 180px;
  border: 1px solid #b3bcbf;
  background: #f4f6f7;
  padding: 4px;
}
.sis-rail a {
  display: block;                 /* every rail link is block-level */
  padding: 3px 6px;
  margin-bottom: 2px;
  font-size: 11px;
  color: #1c4f8b;
  background: #dbe7f1;
  border: 1px solid #a9c1d6;
  text-decoration: none;
}
.sis-rail a:hover { background: #cfe0ef; color: #b03000; }
.sis-rail a.current {
  background: #fdfdfb;            /* highlighted current item */
  border: 1px solid #6d8ba3;
  color: #14304a;
  font-weight: bold;
}

/* ---------- P4: pill buttons + icon action bar ------------------ */

.sis-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 12px;
  font-size: 10px;
  font-weight: bold;
  text-decoration: none;
  background: #e6e2da;
  border: 1px solid #8d8d8d;
  color: #1a1a1a;
  cursor: pointer;
  line-height: 16px;
}
.sis-pill:hover { background: #f0ede6; }
.sis-pill-go {
  background: #3f8f4a;
  border-color: #2f7038;
  color: #fff;
}
.sis-pill-go:hover { background: #367d41; color: #fff; }

/* row of small white icon-buttons, 6px gaps */
.sis-actionbar {
  white-space: nowrap;
  margin: 0 0 6px;
}
.sis-actionbar > a,
.sis-actionbar > button,
.sis-actionbar > form {
  display: inline-block;
  margin-right: 6px;              /* 6px gaps between icon buttons */
  vertical-align: middle;
}
.sis-actionbar > form { margin: 0 6px 0 0; }
.sis-actionbar .sis-iconbtn {
  width: 22px;
  height: 18px;
  margin-left: 0;
  background: #fbfcfc;
  border: 1px solid #7f8f9a;
  color: #22415a;
}
.sis-actionbar .sis-iconbtn:hover { background: #e7eff4; }

/* ---------- P5: circular status icons --------------------------- */

.sis-status-ok,
.sis-status-bad {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
.sis-status-ok  { background: #3f8f4a; border: 1px solid #2c6d36; }
.sis-status-bad { background: #c0392b; border: 1px solid #8f2b20; }

/* ---------- P6: student/teacher stepper bar --------------------- */

.sis-stepper {
  background: #e4e8e9;
  border: 1px solid #b3bcbf;
  padding: 2px 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: #23405a;
  overflow: hidden;
}
.sis-stepper .sis-step-arrow {
  text-decoration: none;
  font-weight: bold;
  color: #1c4f8b;
  padding: 0 5px;
  font-size: 13px;
  line-height: 16px;
}
.sis-stepper .sis-step-arrow:hover { color: #b03000; }
.sis-stepper .sis-step-label {
  font-weight: bold;
  color: #14304a;
  padding: 0 3px;
}
.sis-stepper .sis-step-menu { color: #5c6f7c; font-size: 10px; }

/* ---------- P7: grouped table header band ----------------------- */

table.sis-table th.sis-band {
  background: #234a63;            /* slightly darker than the header row */
  color: #fff;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* ---------- P8: filters row + results bar ----------------------- */

.sis-filters {
  padding: 3px 2px 5px;
  font-size: 11px;
}
.sis-filters label,
.sis-filters .sis-filter-item {
  display: inline-block;
  margin-right: 8px;              /* 8px gaps between items */
  font-size: 11px;
  color: #1a1a1a;
  white-space: nowrap;
}
.sis-filters input[type="checkbox"] { vertical-align: middle; margin: 0 2px 0 0; }

.sis-resultsbar {
  background: #f1f3f3;
  border: 1px solid #b3bcbf;
  padding: 3px 8px;
  overflow: hidden;
  font-size: 11px;
  color: #23405a;
}
.sis-resultsbar .sis-results-count {
  float: left;
  font-weight: bold;
  padding-top: 1px;
}
.sis-resultsbar .sis-results-actions {
  float: right;
  white-space: nowrap;
}
/* highlighted secondary button for the results bar */
.sis-resultsbar .sis-btn-secondary {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  height: 17px;
  line-height: 16px;
  font-size: 10px;
  font-weight: bold;
  color: #14304a;
  background: #d5e3ee;
  border: 1px solid #6d8ba3;
  text-decoration: none;
  cursor: pointer;
}
.sis-resultsbar .sis-btn-secondary:hover { background: #c3d7e6; color: #14304a; }

/* ---------- P9: wide red primary button ------------------------- */

.sis-button-primary-danger,
button.sis-button-primary-danger {
  background: #c0392b;
  border: 1px solid #8f2b20;
  border-top-color: #d9705f;
  color: #fff;
  font-weight: bold;
  padding: 2px 12px;
  cursor: pointer;
}
.sis-button-primary-danger:hover { background: #a93226; }
.sis-button-primary-danger.sis-full,
button.sis-button-primary-danger.sis-full {
  display: block;
  width: 100%;                    /* span the whole panel */
  padding: 3px 12px;
  margin-top: 6px;
}

/* small inert link rail under a panel (recently viewed / other searches) */
.sis-linkrail {
  margin: 6px 0 0;
  font-size: 10px;
  color: #5b6b76;
}
.sis-linkrail a { font-size: 10px; }

/* ---------- D5: accent & meta devices -------------------------
   .sis-metabar  — light-blue assignment/record meta strip above a grid
   .col-current  — salmon "current entry column" header + body tint
   .col-accent-blue / .col-accent-orange — 4px colored top bars on
                   column headers. Apply to a <th> in a score grid.
   These are documented chrome devices; the grading score-grid slice
   will be their natural home (no module view is wired to them yet).
   -------------------------------------------------------------- */

.sis-metabar {
  background: #dbeaf5;
  border: 1px solid #9db9cf;
  padding: 3px 8px;
  font-size: 11px;
  color: #1f3d57;
}
.sis-metabar .meta-label { color: #5b7a92; }
.sis-metabar .meta-strong { font-weight: bold; }

/* active entry column (salmon header, pale body) */
.col-current {
  background: #fdf0ef;
}
th.col-current,
td.col-current {
  background: #f8d7d5;
  color: #6b241f;
}
th.col-current { font-weight: bold; }

/* 4px colored accent top bars on column headers */
.col-accent-blue   { border-top: 4px solid #2f7fb5 !important; }
.col-accent-orange { border-top: 4px solid #e8a33d !important; }

/* ---------- D4: data grids ------------------------------------- */

table.sis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
table.sis-table th,
table.sis-table td {
  border: 1px solid #c5c0b8;
  padding: 2px 6px;
  text-align: left;
}
/* D4: dark-blue header row, white 10px uppercase letterspaced */
table.sis-table thead th,
table.sis-table th {
  background: #2b5570;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
/* D4: alternating stripes */
table.sis-table tr:nth-child(even) > td { background: #eeeeee; }
table.sis-table tbody tr:nth-child(odd) > td { background: #fff; }
table.sis-table td.num {
  text-align: right;
  font-family: "Lucida Console", Menlo, monospace;
  font-size: 10px;
}
/* D4: blue underlined links inside grids */
table.sis-table a,
table.sis-table a:visited {
  color: #14568c;
  text-decoration: underline;
}

table.kv th { width: 38%; font-weight: bold; }
table.kv th,
table.kv td {
  border: none;
  border-bottom: 1px dotted #ccc5bb;
  padding: 3px 4px;
  background: transparent;
  color: #1a1a1a;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- links / lists ---------- */

ul.links { list-style: square; margin: 0; padding-left: 18px; }
ul.links li { margin-bottom: 3px; }

a, a:visited { color: #1c4f8b; }
a:hover { color: #b03000; }

.fineprint { font-size: 10px; color: #666; }

/* ---------- forms & buttons (D6) ------------------------------- */

input, select, textarea, button {
  font: 11px Verdana, Arial, sans-serif;
  color: #1a1a1a;
}
input[type="text"], input[type="search"], select, textarea {
  border: 1px solid #8a8a8a;
  border-top-color: #6a6a6a;
  border-left-color: #6a6a6a;
  background: #fff;
  padding: 1px 3px;
}

/* D6: beveled gray base button */
.btn, button.btn {
  background: #e6e2da;
  border: 1px solid #7f7f7f;
  border-top-color: #fff;
  border-left-color: #f0ede6;
  padding: 1px 10px;
  cursor: pointer;
}
.btn:hover { background: #f0ede6; }

/* D6: outlined-semantic variants */
.sis-button-warn, button.sis-button-warn {
  background: #fffbe8;
  border: 1px solid #e0a800;
  color: #7a5c00;
  font-weight: bold;
  padding: 1px 10px;
  cursor: pointer;
}
.sis-button-warn:hover { background: #fff6cf; }

.sis-button-go, button.sis-button-go {
  background: #3f8f4a;
  border: 1px solid #2f7038;
  border-top-color: #6fbb78;
  color: #fff;
  font-weight: bold;
  padding: 1px 10px;
  cursor: pointer;
}
.sis-button-go:hover { background: #367d41; }

/* ---------- footer ---------- */

#footer {
  border-top: 1px solid #9a958c;
  background: #e8e6e1;
  padding: 4px 10px;
  font-size: 10px;
  color: #555;
}
.footer-left  { float: left; }
.footer-right { float: right; }

/* ---------- print ---------- */

@media print {
  body { background: #fff; font-size: 10pt; }
  #shell { width: auto; border: none; margin: 0; }
  #tabbar, .quicksearch { display: none; }
}