/* ── M3 token structure, yondertele.com palette ─────────────────────
     Brand source: ~/Code/yondertele_com theme.json — primary gold #FFCC00
     on the shadcn slate scale (navy #020817). Gold is a light color, so the
     per-mode --md-primary is the *legible* accent (deep amber in light
     mode, pure gold in dark); the always-gold CTA is handled by the
     .btn.filled override below. */
  :root {
    --yt-gold: #ffcc00; --yt-navy: #020817;
    --md-primary: #7a5c00;          --md-on-primary: #ffffff;
    --md-primary-container: #ffe589; --md-on-primary-container: #4a3900;
    --md-surface: #ffffff;           --md-on-surface: #020817;
    --md-surface-dim: #f1f5f9;       /* app background (slate-100) */
    --md-surface-container: #f1f5f9; --md-surface-container-high: #e2e8f0;
    --md-surface-container-highest: #cbd5e1;
    --md-on-surface-variant: #475569;
    --md-outline: #64748b;           --md-outline-variant: #cbd5e1;
    --md-error: #b3261e;             --md-error-container: #f9dedc;
    --md-on-error-container: #410e0b;
    --md-success: #146c2e;           --md-success-container: #c4eed0;
    --md-on-success-container: #072711;
    --md-inverse-surface: #0f172a;   --md-inverse-on-surface: #f1f5f9;
    --md-scrim: rgba(0,0,0,.32);
    --md-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
    --md-shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --md-primary: #ffcc00;          --md-on-primary: #020817;
      --md-primary-container: #4a3900; --md-on-primary-container: #ffe589;
      --md-surface: #060d1f;           --md-on-surface: #f8fafc;
      --md-surface-dim: #020817;
      --md-surface-container: #0a1428; --md-surface-container-high: #111a2e;
      --md-surface-container-highest: #1a2745;
      --md-on-surface-variant: #94a3b8;
      --md-outline: #64748b;           --md-outline-variant: #1e293b;
      --md-error: #f2b8b5;             --md-error-container: #8c1d18;
      --md-on-error-container: #f9dedc;
      --md-success: #6dd58c;           --md-success-container: #0f5223;
      --md-on-success-container: #c4eed0;
      --md-inverse-surface: #e2e8f0;   --md-inverse-on-surface: #0f172a;
      --md-shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.3);
      --md-shadow-2: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px 2px rgba(0,0,0,.3);
    }
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font: 400 14px/1.45 "Google Sans Text", Roboto, "Segoe UI", system-ui, sans-serif;
    background: var(--md-surface-dim);
    color: var(--md-on-surface);
    -webkit-font-smoothing: antialiased;
  }
  svg.ic { width: 20px; height: 20px; fill: currentColor; flex: none; }
  a { color: var(--md-primary); }

  /* ── buttons (M3) ──────────────────────────────────────────────────── */
  .btn {
    font: 500 14px/1 inherit; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 24px; border-radius: 100px; border: none;
    cursor: pointer; color: var(--md-primary); background: transparent;
    transition: background-color .15s, box-shadow .15s;
    white-space: nowrap; user-select: none;
  }
  .btn:hover { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
  .btn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
  .btn:disabled { opacity: .38; cursor: default; pointer-events: none; }
  /* primary CTA is always brand gold on navy, both modes — matches the
     yondertele.com hero button */
  .btn.filled { background: var(--yt-gold); color: var(--yt-navy); }
  .btn.filled:hover { box-shadow: var(--md-shadow-1); background: #e6b800; }
  .btn.tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
  .btn.tonal:hover { box-shadow: var(--md-shadow-1); }
  .btn.outlined { border: 1px solid var(--md-outline-variant); }
  .btn.danger { color: var(--md-error); }
  .btn.danger:hover { background: color-mix(in srgb, var(--md-error) 8%, transparent); }
  .btn.small { height: 32px; padding: 0 16px; font-size: 13px; }

  /* ── text fields: M3 outlined, label resting on the border ─────────── */
  .field { position: relative; display: inline-flex; flex-direction: column; }
  .field > label {
    position: absolute; top: -8px; left: 12px; padding: 0 4px;
    font-size: 12px; color: var(--md-on-surface-variant);
    background: var(--md-surface); border-radius: 4px; z-index: 1;
  }
  .field > input, .field > select {
    font: inherit; color: var(--md-on-surface);
    height: 48px; padding: 0 14px; min-width: 130px;
    border: 1px solid var(--md-outline); border-radius: 8px;
    background: var(--md-surface); outline: none;
    transition: border-color .15s, box-shadow .15s;
  }
  .field > input:hover, .field > select:hover { border-color: var(--md-on-surface); }
  .field > input:focus, .field > select:focus {
    border: 2px solid var(--md-primary); padding: 0 13px;
  }
  .field > input:focus + label, .field:focus-within > label { color: var(--md-primary); }
  ::selection { background: color-mix(in srgb, var(--md-primary) 30%, transparent); }

  /* ── top app bar: brand navy + gold rule, echoing the website header ── */
  .appbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 12px;
    height: 64px; padding: 0 16px;
    background: var(--yt-navy); color: #f8fafc;
    border-bottom: 2px solid var(--yt-gold);
  }
  .appbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .appbar .mark {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: var(--yt-gold); color: var(--yt-navy);
  }
  .appbar h1 { font: 400 20px/1.2 "Google Sans", inherit; margin: 0; white-space: nowrap; }
  .appbar .tenant {
    font-size: 13px; color: #94a3b8; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* appbar children sit on navy in BOTH modes */
  .appbar .btn { color: var(--yt-gold); }
  .appbar .btn:hover { background: color-mix(in srgb, var(--yt-gold) 12%, transparent); }
  .appbar .field > label { background: var(--yt-navy); color: #94a3b8; }
  .appbar .field > input, .appbar .field > select {
    background: transparent; color: #f8fafc; border-color: #334155;
  }
  .appbar .spacer { flex: 1; }
  #progress {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    overflow: hidden; opacity: 0; transition: opacity .2s; pointer-events: none;
  }
  #progress.on { opacity: 1; }
  #progress::before {
    content: ""; position: absolute; inset: 0; width: 40%;
    background: var(--md-primary); border-radius: 2px;
    animation: indeterminate 1.2s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes indeterminate {
    0% { transform: translateX(-100%); } 100% { transform: translateX(350%); }
  }

  /* ── layout: nav rail + content ────────────────────────────────────── */
  .shell { display: flex; min-height: calc(100% - 64px); }
  nav.rail { width: 232px; flex: none; padding: 12px; }
  nav.rail .navbtn {
    display: flex; align-items: center; gap: 12px; width: 100%;
    height: 44px; padding: 0 16px 0 14px; margin-bottom: 4px;
    border: none; border-radius: 100px; background: transparent;
    font: 500 14px/1 inherit; font-family: inherit; color: var(--md-on-surface-variant);
    cursor: pointer; text-align: left; transition: background-color .15s;
  }
  nav.rail .navbtn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
  nav.rail .navbtn:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
  nav.rail .navbtn.active {
    background: var(--md-primary-container); color: var(--md-on-primary-container);
  }
  main { flex: 1; min-width: 0; padding: 24px 24px 48px; }
  .pagehead { margin: 4px 0 16px; }
  .pagehead h2 { font: 400 24px/1.3 "Google Sans", inherit; margin: 0 0 2px; }
  .cardtitle { font: 500 16px/1.3 "Google Sans", inherit; margin: 0 0 12px; }
  .pagehead p { margin: 0; color: var(--md-on-surface-variant); font-size: 13px; }

  /* compliance banner: quality/training retention notice above the tables */
  .notice {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 16px; padding: 10px 16px; border-radius: 12px;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    font-size: 13px;
  }
  .notice svg.ic { width: 18px; height: 18px; }

  .card {
    background: var(--md-surface); border-radius: 16px;
    border: 1px solid var(--md-outline-variant); padding: 20px;
  }

  /* ── filters row ───────────────────────────────────────────────────── */
  .filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }

  /* ── data table (M3) ───────────────────────────────────────────────── */
  .tablewrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th {
    text-align: left; font: 500 12px/1.3 inherit; font-family: inherit;
    color: var(--md-on-surface-variant); padding: 12px 12px;
    border-bottom: 1px solid var(--md-outline-variant); white-space: nowrap;
  }
  td {
    padding: 10px 12px; border-bottom: 1px solid
    color-mix(in srgb, var(--md-outline-variant) 55%, transparent); white-space: nowrap;
  }
  tbody tr { transition: background-color .1s; }
  tbody tr:hover { background: color-mix(in srgb, var(--md-on-surface) 4%, transparent); }
  tbody tr:last-child td { border-bottom: none; }
  .num { font-variant-numeric: tabular-nums; }

  /* chips */
  .chip {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 12px/1 inherit; font-family: inherit;
    height: 24px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant);
  }
  .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--md-outline); }
  .chip.inbound .dot { background: var(--md-success); }
  .chip.outbound .dot { background: var(--md-primary); }
  .chip.ok { border-color: transparent; background: var(--md-success-container); color: var(--md-on-success-container); }
  .chip.bad { border-color: transparent; background: var(--md-error-container); color: var(--md-on-error-container); }
  .disp.failed, .disp.busy, .disp.no_answer { color: var(--md-error); font-weight: 500; }
  .muted { color: var(--md-on-surface-variant); }

  /* bulk-selection: checkbox column + contextual action bar (Gmail pattern) */
  th.selcol, td.selcol { width: 30px; padding-right: 2px; }
  input.sel {
    width: 18px; height: 18px; margin: 0; vertical-align: middle;
    accent-color: var(--md-primary); cursor: pointer;
  }
  .selbar {
    display: none; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    border-radius: 12px; padding: 8px 8px 8px 16px; margin: 4px 0 12px;
    font-size: 13px; font-weight: 500;
  }
  .selbar.on { display: flex; }
  .selbar .btn:not(.filled) { color: var(--md-on-primary-container); }
  .selbar .btn:not(.filled):hover {
    background: color-mix(in srgb, var(--md-on-primary-container) 10%, transparent);
  }

  .foot { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
  .empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 44px 16px; color: var(--md-on-surface-variant); text-align: center;
  }
  .empty svg { width: 40px; height: 40px; opacity: .5; }
  audio { height: 36px; vertical-align: middle; max-width: 280px; }
  .btn.iconbtn { width: 32px; height: 32px; padding: 0; border-radius: 50%; }
  .playcell { min-width: 130px; white-space: nowrap; }
  .playcell .btn + .btn, .playcell audio + .btn { margin-left: 8px; }
  .playcell audio { vertical-align: middle; height: 32px; max-width: 260px; }
  code { font: 13px/1.4 "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

  /* one-time secret banner */
  .secret {
    display: none; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--md-success-container); color: var(--md-on-success-container);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
  }
  .secret.on { display: flex; }
  .secret code { word-break: break-all; white-space: normal; }
  .secret .btn { color: var(--md-on-success-container); height: 32px; padding: 0 16px; }
  .secret .btn:hover { background: color-mix(in srgb, var(--md-on-success-container) 10%, transparent); }

  /* ── login page: brand-navy backdrop like the website hero ─────────── */
  #login {
    display: grid; place-items: start center; min-height: 100%;
    padding: 10vh 16px 0; background: var(--yt-navy);
    background-image:
      linear-gradient(rgba(148,163,184,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(148,163,184,.07) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  #login .card { width: 100%; max-width: 400px; padding: 36px 36px 30px;
    border-top: 3px solid var(--yt-gold); }
  #login .mark {
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
    display: grid; place-items: center;
    background: var(--yt-gold); color: var(--yt-navy);
  }
  #login h2 { font: 400 24px/1.3 "Google Sans", inherit; margin: 0 0 4px; }
  #login p.sub { margin: 0 0 26px; color: var(--md-on-surface-variant); }
  #login .field { display: flex; margin-bottom: 20px; }
  #login .field > input { width: 100%; }
  #login .actions { display: flex; justify-content: flex-end; gap: 20px; margin-top: 6px; }
  .formerror { color: var(--md-error); font-size: 13px; min-height: 1.2em; margin: 0; }

  /* snackbar */
  #snackbar {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
    background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
    padding: 12px 18px; border-radius: 8px; box-shadow: var(--md-shadow-2);
    font-size: 14px; max-width: min(560px, calc(100vw - 32px));
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50;
  }
  #snackbar.on { opacity: 1; transform: translate(-50%, 0); }

  /* ── responsive ────────────────────────────────────────────────────── */
  @media (max-width: 900px) {
    .shell { display: block; }
    nav.rail { display: flex; width: auto; gap: 6px; padding: 10px 12px 2px; overflow-x: auto; }
    nav.rail .navbtn { width: auto; margin: 0; flex: none; }
    main { padding: 16px 12px 40px; }
    .appbar h1 { font-size: 17px; }
    .appbar .tenant { display: none; }
    .card { padding: 16px; border-radius: 12px; }
    .tablewrap { margin: 0 -16px; padding: 0 16px; }
  }