/* mCaptions – shared theme tokens + app header.
 *
 * Loaded by every page before its own stylesheet. Pages use only the tokens
 * below for colour, so a theme is just a different set of values:
 *   :root                     dark (the original look, the default)
 *   :root[data-theme=light]   light ("white mode")
 * ui.js sets data-theme on <html> before first paint (saved choice, else the
 * system preference), so there is no flash of the wrong theme. */

:root{
  color-scheme:dark;
  --bg:#12141d;              /* page */
  --bg-sunk:#0e1018;         /* recessed strips (timeline well, code) */
  --input-bg:#0e1018;
  --surface:#1a1d2e;         /* header, modals, sidebar */
  --surface-2:#161928;       /* toolbar, job list */
  --surface-3:#12141f;       /* table heads, inset panels */
  --hover:#1e2236;
  --selected:#253048;
  --selected-strong:#1e3050;
  --border:#2a2d45;
  --border-soft:#1e2133;
  --border-faint:#22253a;
  --text:#e0e0e0;
  --text-strong:#fff;
  --text-body:#bbb;          /* transcript lines */
  --text-2:#aaa;
  --text-3:#888;
  --text-4:#666;
  --text-5:#444;
  --accent:#7eb8f7;          /* accent for text / icons */
  --accent-hover:#aee0ff;
  --accent-bg:#1a2d40;       /* soft accent button */
  --accent-bg-hover:#253d58;
  --accent-border:#2a4060;
  --accent-border-strong:#3a5080;
  --accent-muted:#5a7aaa;
  --primary:#8a6800;         /* the one main call to action (Upload) */
  --primary-hover:#b08800;
  --on-primary:#fff;
  --rec:#b03040;
  --rec-hover:#d03848;
  --ok:#4caf50;
  --ok-bg:#1e4d2b;
  --ok-btn:#2a6a2a;
  --ok-btn-hover:#3a8a3a;
  --on-ok:#4caf50;
  --ok-border:#2a5a2a;
  --ok-surface:#192b1e;
  --info:#5ab4f5;
  --info-bg:#1e3d5c;
  --warn:#c8a84b;
  --warn-bg:#2e2a14;
  --orange:#c8844b;
  --orange-bg:#3a2a1e;
  --danger:#f57c7c;
  --danger-bg:#4d1e1e;
  --danger-surface:#3a1212;
  --danger-border:#7a2828;
  --danger-strong:#f0908a;
  --danger-btn:#b83232;      /* filled destructive button (white text) */
  --purple:#a07aef;
  --purple-bg:#2a1a4a;
  --purple-border:#3a2a5a;
  --purple-hover:#3a2a5a;
  --timeline-bg:#1a1d2e;
  --playhead:#fff;
  --overlay:rgba(0,0,0,.75);
  --shadow:0 8px 32px rgba(0,0,0,.6);
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --tap:36px;                /* icon-button size; 44px on touch layouts */
}

:root[data-theme=light]{
  color-scheme:light;
  --bg:#f6f5f2;
  --bg-sunk:#efece7;
  --input-bg:#fff;
  --surface:#fff;
  --surface-2:#fbfaf8;
  --surface-3:#f5f3ef;
  --hover:#f3f0eb;
  --selected:#fff0e2;
  --selected-strong:#ffe8d3;
  --border:#e3dfd8;
  --border-soft:#eeebe5;
  --border-faint:#ebe7e1;
  --text:#1d1b18;
  --text-strong:#000;
  --text-body:#2b2925;
  --text-2:#57534c;
  --text-3:#6f6a62;
  --text-4:#8f8a82;
  --text-5:#b3aea6;
  --accent:#c25400;
  --accent-hover:#8f3d00;
  --accent-bg:#fff1e4;
  --accent-bg-hover:#ffe3c8;
  --accent-border:#f1c9a0;
  --accent-border-strong:#e9a86a;
  --accent-muted:#c0773a;
  --primary:#f07c00;
  --primary-hover:#d86e00;
  --on-primary:#fff;
  --rec:#d13a4a;
  --rec-hover:#b52f3e;
  --ok:#1e7b34;
  --ok-bg:#e3f3e6;
  --ok-btn:#1f8a3b;
  --ok-btn-hover:#18722f;
  --on-ok:#fff;
  --ok-border:#b9dfc1;
  --ok-surface:#f1f8f2;
  --info:#1a5fb4;
  --info-bg:#e4eefb;
  --warn:#7d6000;
  --warn-bg:#fbf3d6;
  --orange:#a24f0f;
  --orange-bg:#fcebdc;
  --danger:#c62828;
  --danger-bg:#fde7e7;
  --danger-surface:#fdf1f1;
  --danger-border:#f0b9b9;
  --danger-strong:#b71c1c;
  --danger-btn:#c62828;
  --purple:#6b3fd0;
  --purple-bg:#f1ebff;
  --purple-border:#d6c7fb;
  --purple-hover:#e6dcff;
  --timeline-bg:#efece7;
  --playhead:#1d1b18;
  --overlay:rgba(30,25,20,.45);
  --shadow:0 8px 28px rgba(40,30,20,.18);
  --shadow-sm:0 1px 4px rgba(40,30,20,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
     background:var(--bg);color:var(--text);
     height:100vh;display:flex;flex-direction:column;overflow:hidden;
     -webkit-tap-highlight-color:transparent}

/* Help and other long texts carry both languages; show the active one. */
html[lang=cs] [data-help-lang=en],
html:not([lang=cs]) [data-help-lang=cs]{display:none !important}

/* ── app header (shared by Browser and Speaker Manager) ── */
#hdr{background:var(--surface);padding:0 18px;border-bottom:1px solid var(--border);
     display:flex;align-items:center;gap:12px;flex-shrink:0;height:64px}
#hdr-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
           min-width:0}
#hdr-brand .logo{height:46px;width:auto;display:block;flex-shrink:0}
#hdr-brand .logo-light{display:none}
:root[data-theme=light] #hdr-brand .logo-dark{display:none}
:root[data-theme=light] #hdr-brand .logo-light{display:block}
#hdr-title-wrap{display:flex;flex-direction:column;justify-content:center;min-width:0}
#hdr-title{font-family:"Open Sans",sans-serif;font-size:1.45rem;color:var(--text-strong);
           font-weight:600;margin:0;letter-spacing:.3px;white-space:nowrap;line-height:1.15}
#version-number{font-size:.5em;color:var(--text-3);font-weight:400;margin-left:4px}
#hdr-tagline{font-size:.74rem;color:var(--text-3);white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis}
#hdr-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.hdr-divider{width:1px;height:26px;background:var(--border);margin:0 2px}
#hdr-auth{display:flex;align-items:center;gap:8px;flex-shrink:0}
#user-info{font-size:.78rem;color:var(--text-2);white-space:nowrap;max-width:220px;
           overflow:hidden;text-overflow:ellipsis}

/* role badges */
.role-badge{display:inline-block;padding:3px 9px;border-radius:4px;font-size:.68rem;
            font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.role-badge:empty{display:none}
.role-badge.role-demo{background:#6c757d;color:#fff}
.role-badge.role-full{background:#28a745;color:#fff}
.role-badge.role-power{background:#6f42c1;color:#fff}
.role-badge.role-admin{background:#faa847;color:#252e42}

/* ── buttons shared across pages ── */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
          min-width:var(--tap);height:var(--tap);padding:0 10px;
          background:var(--surface);border:1px solid var(--border);border-radius:8px;
          color:var(--text-2);font-size:.82rem;font-weight:600;font-family:inherit;
          cursor:pointer;text-decoration:none;white-space:nowrap;
          transition:background .15s,color .15s,border-color .15s}
.icon-btn i{font-size:1.05rem}
.icon-btn:hover{background:var(--hover);color:var(--accent);border-color:var(--accent-border)}
.icon-btn.ghost{border-color:transparent;background:none}
.icon-btn.ghost:hover{background:var(--hover)}
.icon-btn.danger:hover{color:var(--danger);border-color:var(--danger-border)}
.icon-btn[aria-current=page]{background:var(--accent-bg);color:var(--accent);
                             border-color:var(--accent-border)}

/* logged out: Login is the call to action — filled, with a pulsing glow */
#login-btn{background:var(--primary);border-color:var(--primary);color:var(--on-primary);
           animation:login-pulse 1.6s ease-out infinite}
#login-btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--on-primary);
                 animation-play-state:paused}
@keyframes login-pulse{
  0%  {box-shadow:0 0 0 0 var(--primary);filter:brightness(1);transform:scale(1)}
  15% {filter:brightness(1.3);transform:scale(1.06)}
  40% {filter:brightness(1);transform:scale(1)}
  75% {box-shadow:0 0 0 14px color-mix(in srgb,var(--primary) 0%,transparent)}
  100%{box-shadow:0 0 0 14px transparent}
}
@media (prefers-reduced-motion:reduce){#login-btn{animation:none}}

/* header menu (☰): language, theme, help */
#hdr-menu{position:relative;flex-shrink:0}
#menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:1000;min-width:250px;
          display:flex;flex-direction:column;padding:6px;
          background:var(--surface);border:1px solid var(--border);border-radius:10px;
          box-shadow:var(--shadow)}
#menu-pop[hidden]{display:none}
#menu-pop [role=menuitem]{display:flex;align-items:center;gap:12px;width:100%;
          min-height:var(--tap);padding:0 12px;background:none;border:none;border-radius:6px;
          color:var(--text);font-family:inherit;font-size:.86rem;text-align:left;
          white-space:nowrap;cursor:pointer;text-decoration:none;box-sizing:border-box}
#menu-pop [role=menuitem][aria-current=page]{color:var(--accent)}
#menu-pop [role=menuitem]:hover,#menu-pop [role=menuitem]:focus-visible{
          background:var(--hover);color:var(--accent);outline:none}
#menu-pop [role=menuitem] i{width:18px;text-align:center;font-size:1rem;color:var(--text-2)}
#menu-pop [role=menuitem]:hover i{color:var(--accent)}

/* theme item shows the icon of the CURRENT theme */
#theme-btn .fa-sun{display:none}
:root[data-theme=light] #theme-btn .fa-sun{display:inline-block}
:root[data-theme=light] #theme-btn .fa-moon{display:none}

/* ── touch / narrow layouts: bigger targets, icon-only header ── */
@media (max-width:768px), (pointer:coarse){
  :root{--tap:44px}
  .icon-btn i{font-size:1.25rem}
}
@media (max-width:768px){
  body{height:100dvh}
  #hdr{height:auto;min-height:60px;padding:8px 12px;gap:8px;flex-wrap:wrap}
  #hdr-brand{gap:9px}
  #hdr-brand .logo{height:38px}
  #hdr-title{font-size:1.15rem}
  #hdr-tagline{display:none}
  #hdr-actions{gap:6px}
  #hdr-actions .lbl,#user-info,.hdr-divider{display:none}
  #hdr-actions #login-btn .lbl{display:inline}   /* keep "Login" readable on phones */
  .role-badge{display:none}
}
@media (max-width:420px){
  /* very narrow phones: actions get their own row under the brand */
  #hdr-actions{margin-left:0;width:100%;justify-content:flex-end}
}