/* ── Auth pages ─────────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{width:100%;max-width:440px;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-soft);background:var(--color-surface);padding:2rem 2rem 1.75rem}

/* Brand header inside card */
.auth-brand{display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.auth-brand img{height:30px}

/* Headings */
.auth-title{font-size:1.3rem;font-weight:700;margin:0 0 0.2rem;color:var(--color-text)}
.auth-sub{color:var(--color-muted);font-size:0.875rem;margin:0 0 1.5rem}

/* Social buttons */
.auth-social{display:flex;flex-direction:column;gap:0.45rem;margin-bottom:1.1rem}
.auth-social-btn{display:flex;align-items:center;gap:10px;width:100%;padding:0.58rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);font-size:0.92rem;font-weight:500;cursor:pointer;color:var(--color-text);text-align:left;transition:background .12s,border-color .12s}
.auth-social-btn:hover{background:var(--color-bg);border-color:#b8c4e8}
.auth-social-btn svg{width:20px!important;height:20px!important;min-width:20px;max-width:20px;flex-shrink:0;display:block}
.auth-social-btn-label{flex:1}
.auth-social-btn-soon{font-size:0.62rem;font-weight:700;color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;padding:1px 5px;text-transform:uppercase;letter-spacing:.04em}

/* Or-divider */
.auth-divider{display:flex;align-items:center;gap:.6rem;margin:.9rem 0;color:var(--color-muted);font-size:0.78rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--color-border)}

/* Role pill toggle */
.auth-role-label{font-size:0.82rem;color:var(--color-muted);margin-bottom:.4rem}
.auth-role-pills{display:flex;gap:.5rem;margin-bottom:1.1rem}
.auth-role-pill{flex:1;padding:.46rem 1rem;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);background:var(--color-surface);font-size:.9rem;font-weight:500;cursor:pointer;text-align:center;color:var(--color-muted);transition:all .15s;appearance:none}
.auth-role-pill.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}

/* Footer link row */
.auth-footer-link{margin-top:1.1rem;text-align:center;font-size:.875rem;color:var(--color-muted)}
.auth-footer-link a{color:var(--color-primary);font-weight:500;text-decoration:none}
.auth-footer-link a:hover{text-decoration:underline}
.auth-link-subtle{color:var(--color-primary);font-size:.85rem;text-decoration:none}
.auth-link-subtle:hover{text-decoration:underline}

/* Social notice */
.auth-social-notice{font-size:.83rem;color:var(--color-muted);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.5rem .75rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}

/* Auth form inputs — standalone styling (Bootstrap not loaded in MAUI) */
.auth-card label{display:block;font-size:0.875rem;font-weight:500;color:var(--color-text);margin-bottom:0.35rem}
.auth-card .form-group{margin-bottom:1rem}
.auth-card .form-control,.auth-card input[type="email"],.auth-card input[type="password"],.auth-card input[type="text"]{display:block;width:100%;box-sizing:border-box;padding:0.6rem 0.85rem;font-size:1rem;line-height:1.5;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-sm);appearance:none;-webkit-appearance:none;transition:border-color 0.15s,box-shadow 0.15s}
.auth-card .form-control:focus,.auth-card input[type="email"]:focus,.auth-card input[type="password"]:focus,.auth-card input[type="text"]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(57,87,194,0.13)}
.auth-card .btn-primary,.auth-card button[type="submit"]{display:block;width:100%;padding:0.65rem 1rem;font-size:1rem;font-weight:600;text-align:center;border:none;border-radius:var(--radius-sm);background:var(--color-primary);color:#fff;cursor:pointer;transition:all 0.15s}
.auth-card .btn-primary:hover,.auth-card button[type="submit"]:hover{filter:brightness(0.92)}
.auth-card .btn-primary:disabled,.auth-card button[type="submit"]:disabled{opacity:0.55;cursor:not-allowed}
.auth-card .form-text,.auth-card .text-muted{display:block;font-size:0.8rem;color:var(--color-muted);margin-top:0.25rem}

/* Legacy size helpers — kept for backward compat */
.auth-400{max-width:400px}
.auth-420{max-width:420px}
.auth-480{max-width:480px}
.auth-560{max-width:560px}

/* Utility layout helpers */
.u-row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:0.75rem;flex-wrap:wrap}
.u-row-center{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.u-chips{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap}
.u-table-stack{margin-top:0.75rem}
.u-table-stack-sm{margin-top:0.5rem}
.u-text-12{font-size:12px}
.u-nowrap{white-space:nowrap}
.u-table-wrap{overflow:auto;max-height:70vh}
.u-table-sticky{position:relative}
.u-table-sticky thead th{position:sticky;top:0;background:#f8fafc;z-index:2;box-shadow:0 2px 4px -2px rgba(0,0,0,0.2)}
.u-table-min-720{min-width:720px}
.u-table-min-900{min-width:900px}
.u-table-min-960{min-width:960px}

/* ── Unified Timeslip Controls Toolbar ──────────────────────────────────────
   Used by both TimeSlipsViewer and TimeSlipTable.
   .ts-controls          outer flex column
   .ts-ctrl-search       full-width rounded search input
   .ts-ctrl-strip        horizontally-scrollable pill bar
   .ts-ctrl-grp          group of pills within strip
   .ts-ctrl-div          vertical divider between groups
   .ts-ctrl-lbl          small-caps group label
   .ts-pill              pill button (base)
   .ts-pill--on          active state (primary colour)
   .ts-pill--rt          RT modifier pill (orange when on)
   .ts-pill--sort        sort pill (same active state, used for clarity)
── */
.ts-controls{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}

/* Top row: search input + filters toggle button */
.ts-ctrl-top{display:flex;align-items:center;gap:0.5rem}

/* Search */
.ts-ctrl-search{position:relative;flex:1 1 auto;min-width:0}
.ts-ctrl-search-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-muted);pointer-events:none;flex-shrink:0}
.ts-ctrl-search input{width:100%;height:44px;padding:0 1rem 0 2.4rem;border:1.5px solid var(--color-border);border-radius:22px;background:var(--color-surface);font-size:1rem;color:var(--color-text);box-sizing:border-box;transition:border-color .12s,box-shadow .12s}
.ts-ctrl-search input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(57,87,194,.12)}

/* Filters toggle button — hidden on ≥700px desktop, shown on mobile */
.ts-ctrl-toggle{display:none;flex-shrink:0;align-items:center;gap:0.3rem;height:44px;padding:0 0.8rem;border:1.5px solid var(--color-border);border-radius:22px;background:var(--color-surface);font-size:0.82rem;font-weight:600;color:var(--color-muted);cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s,background .12s;-webkit-tap-highlight-color:transparent}
.ts-ctrl-toggle--open,.ts-ctrl-toggle:hover,.ts-ctrl-toggle:focus-visible{border-color:var(--color-primary);color:var(--color-primary);background:rgba(57,87,194,.06);outline:none}

/* Active filter count badge */
.ts-ctrl-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 3px;border-radius:9px;background:var(--color-primary);color:#fff;font-size:.62rem;font-weight:800;line-height:1}

/* Reaction time toggle — always visible in top bar, accent orange when on */
.ts-ctrl-rt-toggle{display:inline-flex;flex-shrink:0;align-items:center;gap:0.3rem;height:44px;padding:0 0.9rem;border:1.5px solid var(--color-border);border-radius:22px;background:var(--color-surface);font-size:0.82rem;font-weight:600;color:var(--color-muted);cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s,background .12s;-webkit-tap-highlight-color:transparent}
.ts-ctrl-rt-toggle:hover,.ts-ctrl-rt-toggle:focus-visible{border-color:var(--color-accent,#f97316);color:var(--color-accent,#f97316);background:rgba(249,115,22,.06);outline:none}
.ts-ctrl-rt-toggle--on{border-color:var(--color-accent,#f97316);background:var(--color-accent,#f97316);color:#fff}
.ts-ctrl-rt-toggle--on:hover,.ts-ctrl-rt-toggle--on:focus-visible{background:#e05a08;border-color:#e05a08;color:#fff}

/* Strip — pill bar; wraps on all sizes, each group is a flex row */
.ts-ctrl-strip{display:flex;align-items:flex-start;flex-wrap:wrap;gap:4px 0;padding:2px 0}

/* Remove gradient + allow wrap on wide screens  */
@media(min-width:900px){
  .ts-ctrl-strip{flex-wrap:wrap;overflow-x:visible;gap:4px 0}
}

/* Group, divider, label */
.ts-ctrl-grp{display:flex;align-items:center;flex-wrap:wrap;gap:3px;flex-shrink:0;padding:1px 2px}
/* Each group fills the row on mobile → CLASS / SHOW / SORT each on own line */
@media(max-width:700px){
  .ts-ctrl-toggle{display:inline-flex}
  .ts-ctrl-strip--hidden{display:none}
  .ts-ctrl-grp{width:100%}
  .ts-ctrl-div{display:none}

  /* On focus: wrap container so search can claim full row, buttons drop below */
  .ts-ctrl-top:focus-within{flex-wrap:wrap}
  .ts-ctrl-top:focus-within .ts-ctrl-search{flex:1 1 100%}

  /* Keep expanded while search field still has content */
  .ts-ctrl-top:has(.ts-ctrl-search input:not(:placeholder-shown)){flex-wrap:wrap}
  .ts-ctrl-top:has(.ts-ctrl-search input:not(:placeholder-shown)) .ts-ctrl-search{flex:1 1 100%}
}
.ts-ctrl-div{width:1px;height:20px;background:var(--color-border);flex-shrink:0;margin:0 6px}
.ts-ctrl-lbl{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--color-muted);padding:0 3px 0 2px;white-space:nowrap;user-select:none}

/* Pill */
.ts-pill{display:inline-flex;align-items:center;height:30px;padding:0 .65rem;border:1.5px solid var(--color-border);border-radius:999px;background:var(--color-surface);font-size:.78rem;font-weight:600;color:var(--color-muted);cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;flex-shrink:0;-webkit-tap-highlight-color:transparent;line-height:1}
.ts-pill:hover,.ts-pill:focus-visible{border-color:var(--color-primary);color:var(--color-primary);outline:none;background:var(--color-bg)}
.ts-pill--on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.ts-pill--on:hover,.ts-pill--on:focus-visible{background:#2f4aaa;border-color:#2f4aaa;color:#fff}
/* RT pill: accent (orange) when active so it reads as a "modifier", not a column toggle */
.ts-pill--rt.ts-pill--on{background:var(--color-accent,#f97316);border-color:var(--color-accent,#f97316)}
.ts-pill--rt.ts-pill--on:hover{background:#e05a08;border-color:#e05a08}