/* ============================================================
   SABRE Assessment Management System
   File        : static/css/sabre-ui.css
   Description : Shared visual layer for every SABRE page (loaded
                 last by base.html, guest_base.html and login.html):
                   • typography — Inter (text) and JetBrains Mono
                     (URNs, issue and credit references), served
                     from /static/fonts (no external font service)
                   • refined cards, buttons, inputs, tables, badges
                     and focus states on top of the theme tokens in
                     _theme_vars.html
                   • readability floor for very small inline text
                   • responsive layout for laptop, PC, tablet and
                     phone (project navigation strip, stacked grids,
                     project list, tables, modals)
                 Appearance only — no behaviour is changed.
   Author      : Peter Doughty
   Role        : IT Technical Consultant
   Company     : Design Security LTD
   Copyright   : © Design Security LTD. All rights reserved.
   ============================================================ */

/* ── Fonts (SIL Open Font Licence — see /static/fonts) ───────── */
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap;
  src:url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"),
      url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --radius-sm:6px; --radius:10px; --radius-lg:12px;
}

/* ── Base typography ─────────────────────────────────────────── */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  font-family:var(--font-sans) !important;
  font-size:14px; line-height:1.5;
  font-feature-settings:"cv11","ss01","ss03";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button, input, select, textarea, .btn, .form-control, .form-select { font-family:inherit; }
h1, h2, h3, h4, h5, h6 { letter-spacing:-0.012em; }
.main-content h2 { line-height:1.25; }
strong, b { font-weight:650; }

/* References (URNs, issue IDs, credit refs) — one clear monospace face */
code, pre, kbd, samp, .urn-pill, .urn-display, .issue-id, .section-tag, .kb-urn,
[style*="font-family:monospace"], [style*="font-family: monospace"],
[style*="Courier New"], [style*="font-family:'Courier"] {
  font-family:var(--font-mono) !important;
  font-variant-ligatures:none;
  letter-spacing:0;
}
.urn-display { letter-spacing:.02em; }
table, .prog-bar + span, .score-num, .stat-num { font-variant-numeric:tabular-nums; }

/* Readability floor: the smallest inline sizes are lifted slightly */
[style*="font-size:9px"]  { font-size:10px !important; }
[style*="font-size:10px"] { font-size:11px !important; }

/* Links */
a { text-underline-offset:2px; }
a:not([class]):hover { text-decoration-thickness:2px; }

/* ── Header ──────────────────────────────────────────────────── */
.app-header { box-shadow:0 2px 14px rgba(5,20,45,0.28); }
.header-title h1 { font-size:15.5px; font-weight:700; letter-spacing:-0.01em; }
.header-title p  { font-size:11.5px; opacity:.78; }
.header-nav { gap:2px; }
.header-nav a { font-size:12px; font-weight:500; color:rgba(255,255,255,0.88); padding:5px 10px; border-radius:7px; }
.header-nav a:hover { background:rgba(255,255,255,0.14); color:#fff; }
.header-nav a.active { background:rgba(255,255,255,0.2); color:#fff; font-weight:600; box-shadow:inset 0 -2px 0 rgba(255,255,255,0.85); }
.theme-toggle { font-family:inherit; }

/* ── Sidebar (project pages) ─────────────────────────────────── */
.sidebar { box-shadow:1px 0 0 var(--border); }
.sidebar a { font-size:13px; font-weight:500; color:var(--text-secondary); }
.sidebar a.active { font-weight:650; }
.sidebar-section { color:var(--text-muted); font-weight:700; letter-spacing:.07em; }

/* ── Main area ───────────────────────────────────────────────── */
.main-content { padding:24px; }

/* ── Cards ───────────────────────────────────────────────────── */
.card { border-radius:var(--radius-lg); border-color:var(--border); box-shadow:var(--card-shadow); }
.card-header-ds, .card-header-orange { font-size:13.5px; font-weight:600; letter-spacing:.005em; padding:11px 16px; }
.card-header-ds i, .card-header-orange i { opacity:.92; }
/* Secondary text placed inside the coloured card headers stays readable */
.card-header-ds [style*="var(--text-muted)"], .card-header-orange [style*="var(--text-muted)"],
.card-header-ds [style*="var(--text-secondary)"], .card-header-orange [style*="var(--text-secondary)"] {
  color:rgba(255,255,255,0.78) !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-ds-primary, .btn-ds-orange, .btn-ds-danger, .btn-ds-ghost {
  border-radius:var(--radius-sm); font-weight:600; line-height:1.3;
  transition:background-color .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s;
}
.btn-ds-primary { background:var(--btn-primary); color:#fff; box-shadow:0 1px 2px rgba(13,74,138,0.25); }
.btn-ds-primary:hover { background:var(--btn-primary-hover); color:#fff; opacity:1; }
.btn-ds-orange { background:var(--btn-orange); color:#fff; }
.btn-ds-danger { background:var(--btn-danger); color:#fff; }
.btn-ds-orange:hover, .btn-ds-danger:hover { filter:brightness(.93); opacity:1; color:#fff; }
/* Inline-styled filled blue buttons and pills follow the same accessible fill */
[style*="background:var(--ds-blue)"][style*="color:#fff"] { background:var(--btn-primary) !important; }
.filter-btn:hover, .filter-btn.active { background:var(--btn-primary); border-color:var(--btn-primary); color:#fff; }
[style*="background:var(--ds-orange)"][style*="color:#fff"] { background:var(--btn-orange) !important; }
/* Dark theme: filled shapes with white text use the deeper button blue / orange */
[data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .tut-steps li::before, [data-theme="dark"] .cl-section-hdr,
[data-theme="dark"] .kb-avatar, [data-theme="dark"] .btn-login,
[data-theme="dark"] .captcha-tile .check-badge { background:var(--btn-primary, #2f7ac4); border-color:var(--btn-primary, #2f7ac4); }
[data-theme="dark"] .kb-avatar.owner { background:var(--btn-orange, #c2461b); }
[data-theme="dark"] .kb-avatar.view_only { background:#5b677a; }
.btn-ds-ghost { color:var(--text-primary); border-color:var(--border-strong); background:var(--bg-surface); font-weight:550; }
.btn-ds-ghost:hover { background:var(--bg-surface-2); border-color:var(--ds-blue); color:var(--ds-blue); }
button:disabled, .btn-ds-primary:disabled, .btn-ds-ghost:disabled, .btn-ds-orange:disabled { opacity:.55; cursor:not-allowed; }

/* Keyboard focus — clearly visible, never on mouse click */
a:focus-visible, button:focus-visible, .btn-ds-primary:focus-visible, .btn-ds-ghost:focus-visible,
.btn-ds-orange:focus-visible, .btn-ds-danger:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline:none; box-shadow:var(--focus-ring) !important; border-radius:var(--radius-sm);
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-label { font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.form-control, .form-select {
  border-radius:var(--radius-sm); border-color:var(--input-border) !important;
  font-size:13.5px; min-height:38px;
}
textarea.form-control { min-height:auto; }
.form-control:hover, .form-select:hover { border-color:var(--border-strong) !important; }
.form-control:focus, .form-select:focus {
  border-color:var(--input-focus) !important; box-shadow:var(--focus-ring) !important;
}
.form-control::placeholder { color:var(--text-muted) !important; opacity:.85; }
input[type=checkbox], input[type=radio] { accent-color:var(--ds-blue); }
.form-check-input:checked { background-color:var(--ds-blue); border-color:var(--ds-blue); }

/* ── Tables ──────────────────────────────────────────────────── */
table th { font-weight:650; }
thead th { color:var(--text-secondary) !important; font-size:11.5px; letter-spacing:.04em; }
.table { --bs-table-bg:transparent; --bs-table-color:var(--text-primary); --bs-table-border-color:var(--border); }
.table > :not(caption) > * > * { border-bottom-color:var(--ev-row-border); padding:.6rem .75rem; }

/* ── Badges, pills, flashes ──────────────────────────────────── */
.rating-badge { letter-spacing:.03em; }
.flash-success, .flash-error { border-radius:var(--radius); font-size:13.5px; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.flash-success i, .flash-error i { margin-top:3px; }
.mandatory-flag { letter-spacing:.02em; }
a.mandatory-link { text-decoration:none; cursor:pointer; transition:filter .15s, box-shadow .15s; }
a.mandatory-link:hover, a.mandatory-link:focus-visible { filter:brightness(1.08); box-shadow:0 0 0 2px var(--mand-border); color:var(--mand-color); }

/* Section headers / issue rows (tracker) */
.section-header { border-radius:var(--radius); }
.section-tag { font-size:12.5px; }
.issue-row { border-radius:var(--radius); }
.issue-row:hover { box-shadow:var(--card-shadow-hover); }
.issue-title { font-weight:550; }

/* ── Modals ──────────────────────────────────────────────────── */
.modal-box { border-radius:14px; box-shadow:0 24px 64px rgba(5,20,45,0.35); }

/* ── Footer ──────────────────────────────────────────────────── */
.app-footer { font-size:11.5px; color:var(--text-muted); }
.footer-logos img { opacity:.75; }

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:6px; border:2px solid var(--bg-surface-2); }
* { scrollbar-color:var(--border-strong) transparent; }

/* ── Project list (home page) ────────────────────────────────── */
.proj-row { row-gap:8px; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* Large laptops / small desktops: project list wraps neatly */
@media (max-width:1180px) {
  .proj-head { display:none !important; }
  .proj-row > div { min-width:0 !important; }
  .proj-row > div:nth-child(1) { width:auto !important; flex:1 1 230px !important; }
  .proj-row > div:nth-child(2) { width:auto !important; flex:0 0 auto !important; }
  .proj-row > div:nth-child(3) { width:auto !important; flex:1 1 160px !important; }
  .proj-row > div:nth-child(4) { width:auto !important; flex:0 0 auto !important; }
  .proj-row > div:nth-child(5) { flex:1 1 220px !important; }
  .proj-row > div:nth-child(6) { width:auto !important; flex:0 1 auto !important; }
  .proj-row > div:nth-child(7) { width:auto !important; flex:0 0 auto !important; margin-left:auto; }
}
.proj-row > div:nth-child(4) .rating-badge { width:auto !important; min-width:60px; }

/* Tablets and below: project pages get a navigation strip instead of the sidebar */
@media (max-width:900px) {
  .app-layout { flex-direction:column; }
  .sidebar {
    display:flex !important; width:100%; flex-direction:row; align-items:center;
    overflow-x:auto; padding:6px 10px; gap:2px; border-right:none;
    border-bottom:1px solid var(--border); box-shadow:none;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .sidebar::-webkit-scrollbar { display:none; }
  .sidebar-section, .sidebar > div { display:none !important; }
  .sidebar a {
    flex:0 0 auto; white-space:nowrap; border-left:none !important;
    border-bottom:2px solid transparent; border-radius:7px; padding:7px 11px; font-size:12.5px;
  }
  .sidebar a.active { border-bottom-color:var(--sidebar-active-border); }
  .sidebar a:hover { border-left:none; }
  .main-content { padding:16px; }
  .header-logos { display:none; }
}

/* Phones */
@media (max-width:640px) {
  body { font-size:14px; }
  .main-content { padding:12px; }
  .main-content h2 { font-size:19px !important; }
  .header-nav a { font-size:12px; padding:6px 10px; }

  /* Fixed multi-column grids written inline stack on a phone */
  [style*="grid-template-columns:180px 1fr 1fr"],
  [style*="grid-template-columns:160px 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr auto"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }

  /* Project list rows become cards */
  .proj-row > div:nth-child(1) { flex:1 1 100% !important; }
  .proj-row > div:nth-child(1) span { max-width:none !important; }
  .proj-row > div:nth-child(3) { flex:1 1 100% !important; }
  .proj-row > div:nth-child(5) { flex:1 1 100% !important; }
  .proj-row > div:nth-child(7) { flex:1 1 100% !important; justify-content:flex-start !important; margin-left:0; }

  /* Wide tables scroll inside their card instead of stretching the page */
  .card table, .main-content table { display:block; overflow-x:auto; max-width:100%; }
  /* List-style tables (users, boards admin) become one card per row */
  table.stack-table, table.stack-table tbody, table.stack-table tr, table.stack-table td { display:block; width:100% !important; }
  table.stack-table { overflow:visible; }
  table.stack-table thead { display:none; }
  table.stack-table tr { border-top:1px solid var(--border); padding:8px 0; }
  table.stack-table td { padding:4px 14px !important; text-align:left !important; border:none !important; }
  table.stack-table td:empty { display:none; }
  table.stack-table select, table.stack-table input { max-width:100%; }

  /* Modals use the full width */
  .modal-box { width:96% !important; max-height:92vh; overflow-y:auto; }
  .flash-success, .flash-error { font-size:13px; }
  .row { --bs-gutter-x:0.75rem; }
}

@media (max-width:400px) {
  .main-content { padding:10px; }
}