/* These are fallback defaults only — every actual page load overrides them
   via the per-request <style> block in partials/head.ejs, built from
   lib/themes.js's THEMES[settings.theme]. Kept here as the pre-JS-render
   default (and for the rare case theme is somehow undefined) so it matches
   the "red" theme's light palette rather than the old dark one. */
:root{
  --bg:#f9f8f8; --panel:#ffffff; --panel2:#f5f2f3; --text:#272122; --muted:#726466;
  --accent:#c83749; --accent-dim:#8c212f; --accent-soft:#f7f0f1;
  --danger:#c8384a; --success:#357956; --border:#e4ddde; --radius:10px;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none;}
.layout{display:flex;min-height:100vh;}
.sidebar{width:220px;background:var(--panel);border-right:1px solid var(--border);padding:20px 12px;flex-shrink:0;}
.sidebar h1{font-size:16px;color:var(--accent);margin:0 0 4px 8px;}
.sidebar .tagline{font-size:11px;color:var(--muted);margin:0 0 20px 8px;}
.sidebar nav a{display:block;padding:9px 10px;border-radius:8px;color:var(--muted);font-size:14px;margin-bottom:2px;}
.sidebar nav a:hover{background:var(--panel2);color:var(--text);}
.sidebar nav a.active{background:var(--accent-dim);color:#fff;}

/* Mobile-only hamburger toggle (checkbox hack — no JS). Hidden entirely on
   desktop; the @media block below both reveals it and wires up the actual
   show/hide behavior via the :checked ~ sibling selectors. */
.mobile-nav-toggle{display:none;}
.hamburger-btn{display:none;}
.main{flex:1;padding:28px 36px;max-width:1000px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
.topbar h2{margin:0;font-size:22px;}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.stat{background:var(--panel2);border-radius:var(--radius);padding:14px;}
.stat .num{font-size:26px;font-weight:700;color:var(--accent);}
.stat .label{font-size:12px;color:var(--muted);margin-top:4px;}
button,.btn{background:var(--accent);color:#fff;border:none;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px;}
button.secondary,.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border);}
button.danger{background:var(--danger);}
input,textarea,select{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--border);background:var(--panel2);color:var(--text);font-size:14px;margin-bottom:10px;}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--border);}
.tag{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;background:var(--panel2);color:var(--muted);margin-right:4px;}
.badge-green{color:var(--success);}
.badge-red{color:var(--danger);}
.muted{color:var(--muted);font-size:13px;}
.login-wrap{display:flex;align-items:center;justify-content:center;height:100vh;}
.login-box{width:340px;background:var(--panel);padding:28px;border-radius:12px;border:1px solid var(--border);}
.flex-between{display:flex;justify-content:space-between;align-items:center;}
.err{color:var(--danger);font-size:13px;margin-bottom:10px;}
.theme-swatch{display:inline-flex;align-items:center;gap:10px;padding:12px;border-radius:10px;border:2px solid var(--border);cursor:pointer;width:100%;margin-bottom:8px;background:var(--panel2);}
.theme-swatch.selected{border-color:var(--accent);}
.theme-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;}

/* Icon buttons (speaker/mic/flag/plus/trash) — no border, transparent by default,
   only tinted accent-red while actively playing/recording. Tap target padded
   larger than the visible icon so it's easy to hit on mobile. */
.icon-btn{background:transparent;border:none;padding:10px;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;
  color:var(--muted);width:auto;}
.icon-btn:hover{background:var(--panel2);}
.icon-btn.active{color:var(--accent);}
.icon-btn svg{width:18px;height:18px;fill:currentColor;pointer-events:none;}
.icon-row{display:flex;align-items:center;gap:2px;}
.sentence-row{display:flex;align-items:center;gap:6px;padding:8px 4px;border-bottom:1px solid var(--border);}
.sentence-row .text{flex:1;}
.sentence-col{flex:1;min-width:260px;}
.sentence-col.locked{opacity:0.4;pointer-events:none;}
.status-pill{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--panel2);color:var(--muted);}
.status-pill.mastered{color:var(--success);}
.status-pill.learning{color:var(--accent);}
.status-pill.review{color:var(--accent);}
.status-pill.difficult{color:var(--danger);}
.status-pill.forgotten{color:var(--danger);}
.status-pill.new{color:var(--muted);}

/* ---- Mobile responsiveness ----
   This app is meant to be installed as a PWA on a phone home screen, so the
   fixed 220px sidebar + desktop padding/table layout needs real adaptation
   below tablet width, not just a shrunk desktop page. */
@media (max-width: 768px){
  .layout{flex-direction:column;min-height:auto;}
  .sidebar{
    width:100%;border-right:none;border-bottom:1px solid var(--border);
    padding:10px 14px;
  }

  /* Collapsed by default: just a top row with the title + hamburger button.
     Tapping the button (a <label for="mobile-nav-toggle">) checks the hidden
     checkbox, which the ~ sibling rules below use to drop the full nav (and
     the logout form) open as a vertical list underneath — no horizontal
     scrolling strip anymore. */
  .sidebar-topbar{display:flex;align-items:center;justify-content:space-between;}
  .sidebar h1{margin:0;}
  .sidebar .tagline{display:none;} /* saves vertical space; nav is what matters on mobile */

  .hamburger-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:36px;height:36px;padding:8px;cursor:pointer;border-radius:8px;}
  .hamburger-btn:hover{background:var(--panel2);}
  .hamburger-btn span{display:block;width:100%;height:2px;background:var(--text);border-radius:2px;}

  .sidebar nav{display:none;flex-direction:column;gap:2px;margin-top:12px;}
  .mobile-nav-toggle:checked ~ nav{display:flex;}
  .sidebar nav a{padding:11px 12px;margin-bottom:0;white-space:normal;font-size:15px;}

  .sidebar form{display:none;margin-top:12px !important;}
  .mobile-nav-toggle:checked ~ form{display:block;}

  .main{padding:16px;max-width:100%;}
  .topbar{flex-wrap:wrap;gap:8px;margin-bottom:16px;}
  .topbar h2{font-size:19px;}
  .grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;}
  .stat{padding:10px;}
  .stat .num{font-size:21px;}
  .card{padding:14px;}
  .login-box{width:90vw;max-width:340px;padding:22px;}

  /* Tables don't reflow well on narrow screens — let them scroll horizontally
     inside their card rather than squeezing columns unreadably thin. */
  table{display:block;overflow-x:auto;white-space:nowrap;}

  /* Two-column layouts (Speaking Studio's EN/IT columns, etc.) stack instead
     of sitting side by side and getting squeezed. */
  .sentence-col{min-width:100%;}

  /* Icon buttons already have generous padding for touch, but bump the icon
     itself up slightly since screens are viewed closer on a phone. */
  .icon-btn{padding:12px;}
  .icon-btn svg{width:20px;height:20px;}

  button,.btn{padding:11px 16px;font-size:15px;} /* comfortable tap target */
  input,textarea,select{font-size:16px;} /* 16px prevents iOS Safari auto-zoom on focus */
}

@media (max-width: 420px){
  .grid{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));}
  .main{padding:12px;}
}

/* ---- Quick Notes floating widget ----
   Present on every logged-in page (see partials/quicknotes.ejs), fixed to
   the viewport so it stays reachable no matter how far down the page is
   scrolled or which module is currently open. */
.qn-fab{
  position:fixed;right:20px;bottom:20px;z-index:1000;
  width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-size:22px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
}
.qn-badge{
  position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;
  border-radius:20px;font-size:11px;line-height:1;padding:4px 6px;
  display:inline-flex;align-items:center;justify-content:center;min-width:16px;
  border:2px solid var(--bg);
}
.qn-panel{
  position:fixed;right:20px;bottom:82px;z-index:1000;
  width:340px;max-width:calc(100vw - 32px);max-height:70vh;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(12px) scale(0.98);opacity:0;pointer-events:none;
  transition:transform 0.15s ease,opacity 0.15s ease;
}
.qn-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}
.qn-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.qn-add-form{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);flex-shrink:0;}
.qn-add-form input{margin-bottom:0;}
.qn-add-form button{flex-shrink:0;width:auto;padding:9px 14px;}
.qn-list{overflow-y:auto;padding:6px 8px;}
.qn-item{
  display:flex;align-items:flex-start;gap:8px;padding:8px 6px;
  border-radius:8px;border-bottom:1px solid var(--border);
}
.qn-item:last-child{border-bottom:none;}
.qn-item.qn-starred{background:var(--accent-soft);}
.qn-item .qn-check{width:auto;margin:2px 0 0;flex-shrink:0;}
.qn-item .qn-index{color:var(--muted);font-size:12px;flex-shrink:0;min-width:18px;padding-top:1px;}
.qn-item.qn-checked .qn-index{color:var(--success);}
.qn-item .qn-text{flex:1;font-size:13px;word-break:break-word;padding-top:1px;}
.qn-item.qn-checked .qn-text{color:var(--muted);text-decoration:line-through;}
.qn-item .qn-text.qn-bold{font-weight:700;color:var(--text);}
.qn-item .qn-edit-input{flex:1;margin:0;padding:4px 6px;font-size:13px;}
.qn-item .qn-actions{display:flex;gap:2px;flex-shrink:0;}
.qn-item .qn-actions button{
  background:transparent;border:none;color:var(--muted);cursor:pointer;
  padding:3px 5px;font-size:13px;border-radius:6px;width:auto;
}
.qn-item .qn-actions button:hover{background:var(--panel2);color:var(--text);}
.qn-item .qn-star{color:var(--muted);}
.qn-item.qn-starred .qn-star{color:#e8b13a;}

@media (max-width: 480px){
  .qn-panel{right:12px;left:12px;width:auto;bottom:78px;}
  .qn-fab{right:16px;bottom:16px;}
}

/* ---- Pomodoro break-warning overlay ----
   Hidden by default (opacity 0, pointer-events none — never blocks the page
   underneath). public/js/pomodoro-tracker.js adds .pomo-visible for the 10s
   countdown, then .pomo-full right before navigating to the rest page, so
   the screen genuinely fades to black rather than jump-cutting. Deliberately
   fixed near-black colors here (not theme variables) — a warning overlay
   about to hand off to the relaxation page shouldn't be tinted by whichever
   productivity color she picked in Settings. */
.pomo-overlay{
  position:fixed;inset:0;z-index:2000;background:#0a0a0c;opacity:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;transition:opacity 0.6s ease;
}
.pomo-overlay.pomo-visible{opacity:0.92;}
.pomo-overlay.pomo-full{opacity:1;transition:opacity 0.9s ease;}
.pomo-overlay-inner{text-align:center;color:#f2eced;transition:opacity 0.4s ease;}
.pomo-overlay.pomo-full .pomo-overlay-inner{opacity:0;}
.pomo-count{font-size:64px;font-weight:700;line-height:1;}
.pomo-overlay-msg{margin-top:10px;font-size:15px;color:#c9c2c6;}