/* app.css — single source of truth for the UMKC FM Residency portal.
   Design tokens + shared components used by every page. */

:root {
  /* Brand palette (HSL so we can derive shades) */
  --brand:        hsl(207 65% 38%);
  --brand-dark:   hsl(207 65% 26%);
  --brand-soft:   hsl(207 70% 96%);
  --gold:         hsl(44 70% 52%);
  --gold-soft:    hsl(44 70% 95%);

  /* Neutrals */
  --ink:          hsl(215 28% 14%);
  --ink-2:        hsl(215 22% 28%);
  --muted:        hsl(215 14% 46%);
  --muted-2:      hsl(215 14% 64%);
  --bg:           hsl(210 24% 97%);
  --surface:      #ffffff;
  --border:       hsl(215 22% 90%);
  --border-2:     hsl(215 22% 82%);

  /* Status */
  --danger:       hsl(0 70% 46%);
  --danger-soft:  hsl(0 70% 96%);
  --success:      hsl(142 60% 36%);
  --success-soft: hsl(142 60% 95%);
  --warn:         hsl(38 92% 48%);
  --warn-soft:    hsl(38 92% 96%);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter Tight",
               system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  /* Spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radii */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);

  /* Layout */
  --topbar-h: 56px;
  --content-max: 1100px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); text-decoration: underline; }
button { font: inherit; cursor: pointer; }

/* ───────── App shell layout ───────── */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-main {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
  flex: 1 1 auto;
}
.app-main h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 var(--s2);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.app-main .lede {
  color: var(--muted);
  margin: 0 0 var(--s6);
  font-size: 15px;
}
.app-main h2 {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s4);
}

/* ───────── Topbar ───────── */

.app-topbar {
  position: sticky; top: 0; z-index: 100;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  padding: 0 var(--s5);
  gap: var(--s5);
  font-size: 14px;
}
.app-topbar__brand {
  display: flex; align-items: baseline; gap: var(--s2);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  font-size: 15px;
  white-space: nowrap;
}
.app-topbar__brand:hover { text-decoration: none; color: var(--brand-dark); }
.app-topbar__brand small {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-topbar__nav::-webkit-scrollbar { display: none; }
.app-topbar__nav a {
  color: var(--ink-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.app-topbar__nav a:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
  text-decoration: none;
}
.app-topbar__nav a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 600;
}
.app-topbar__right {
  display: flex; align-items: center; gap: var(--s3);
  margin-left: auto;
}
.app-topbar__user {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-topbar__user strong {
  color: var(--ink);
  font-weight: 600;
}
.app-topbar__logout {
  color: var(--muted);
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.app-topbar__logout:hover {
  background: var(--danger-soft);
  color: var(--danger);
  text-decoration: none;
}

/* ───────── Card / surface ───────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--shadow-1);
}
.card + .card { margin-top: var(--s4); }
.card h3 { margin: 0 0 var(--s3); font-size: 16px; font-weight: 600; }

/* ───────── Buttons ───────── */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 8px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background .12s, border-color .12s, transform .04s;
}
.btn:hover { background: var(--bg); border-color: var(--muted-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover { filter: brightness(.92); color: #fff; }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--brand);
}
.btn-ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ───────── Form fields ───────── */

.field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--s4);
}
.field label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 9px 12px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

/* ───────── Badge / tag ───────── */

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge--brand   { background: var(--brand-soft);   color: var(--brand-dark);   border-color: var(--brand-soft); }
.badge--success { background: var(--success-soft); color: var(--success);      border-color: var(--success-soft); }
.badge--warn    { background: var(--warn-soft);    color: hsl(38 92% 30%);     border-color: var(--warn-soft); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);       border-color: var(--danger-soft); }

/* ───────── Avatar ───────── */

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.avatar--lg { width: 56px; height: 56px; font-size: 18px; }

/* ───────── Frame (dashboard iframe) ───────── */

.app-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  display: block;
  background: var(--bg);
  height: calc(100vh - var(--topbar-h));
}

/* ───────── Mobile ───────── */

@media (max-width: 720px) {
  .app-topbar {
    padding: 0 var(--s3);
    gap: var(--s3);
    height: auto;
    min-height: var(--topbar-h);
    flex-wrap: wrap;
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }
  .app-topbar__brand small { display: none; }
  .app-topbar__nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    padding-bottom: var(--s1);
  }
  .app-topbar__user { display: none; }
  .app-main { padding: var(--s5) var(--s4) var(--s7); }
  .app-main h1 { font-size: 22px; }
  .app-frame { height: auto; min-height: calc(100vh - 96px); }
}

/* Hide content until nav.js says it's ready */
body.app-loading { visibility: hidden; }

/* ───────── Rotation drawer (shared via /assets/rotation-drawer.js) ───────── */
.rdr-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 8000;
}
.rdr-backdrop.open { opacity: 1; pointer-events: auto; }
.rdr-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 92vw;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(15,23,42,.12);
  transform: translateX(100%); transition: transform .25s ease;
  z-index: 9000; overflow-y: auto; display: flex; flex-direction: column;
}
.rdr-drawer.open { transform: translateX(0); }
.rdr-drawer__head {
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.rdr-drawer__head .id-tag {
  display: inline-block; background: var(--brand-soft); color: var(--brand-dark);
  border-radius: var(--r-sm); padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: var(--s2);
}
.rdr-drawer__head h2 { margin: 0; font-size: 18px; color: var(--ink); line-height: 1.3; }
.rdr-drawer__head .date { color: var(--muted); font-size: 13px; margin-top: 2px; }
.rdr-drawer__close {
  background: none; border: none; padding: 4px 8px; font-size: 22px; line-height: 1;
  color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
}
.rdr-drawer__close:hover { background: var(--bg); color: var(--ink); }
.rdr-drawer__body { padding: var(--s4) var(--s5); flex: 1; }
.rdr-times-row { display: flex; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.rdr-time-box {
  background: var(--brand-soft); color: var(--brand-dark);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  flex: 1 1 120px;
}
.rdr-time-box .lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; font-weight: 700;
}
.rdr-time-box .val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rdr-row {
  display: grid; grid-template-columns: 90px 1fr; gap: var(--s2) var(--s4);
  padding: var(--s3) 0; border-top: 1px solid var(--border); align-items: baseline;
}
.rdr-row .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700;
}
.rdr-row .val { color: var(--ink); font-size: 13px; line-height: 1.55; word-break: break-word; }
.rdr-row .val a { color: var(--brand-dark); }
.rdr-empty { color: var(--muted); font-style: italic; font-size: 13px; padding: var(--s3) 0; }
@media (max-width: 640px) {
  .rdr-drawer { width: 100%; }
}