/* ════════════════════════════════════════════════════════
   Panells laterals — Estadístiques i Configuració
   ════════════════════════════════════════════════════════ */

/* ── Barra d'autenticació ───────────────────────────────── */
.auth-bar{
  position:sticky;top:0;z-index:70;
  background:var(--paper-deep);
  border-bottom:1px solid rgba(27,26,23,.12);
  padding:7px 20px;
  display:flex;align-items:center;gap:12px;
  font-family:'Manrope';font-size:12px;
}
.auth-ok  { color:var(--positive); font-weight:600 }
.auth-warn{ color:var(--ink-faint) }
.auth-email{ color:var(--ink-faint); margin-left:6px }
#auth-status{ flex:1 }

/* ── Botons d'acció al masthead ─────────────────────────── */
.masthead-actions{
  display:flex;gap:8px;align-items:flex-end;padding-bottom:4px;
}
.icon-action{
  background:transparent;
  border:1px solid rgba(27,26,23,.18);
  border-radius:2px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;cursor:pointer;color:var(--ink-soft);
  transition:background .18s,color .18s;
}
.icon-action:hover{background:var(--ink);color:var(--paper)}

/* ── Panell lateral genèric ─────────────────────────────── */
.side-panel{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(440px, 100vw);
  background:var(--paper);
  border-left:1px solid var(--line);
  z-index:80;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 40px rgba(0,0,0,.15);
}
.side-panel.open{transform:translateX(0)}

.panel-inner{
  padding:36px 28px 60px;
  position:relative;
}
.panel-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;font-size:22px;cursor:pointer;
  color:var(--ink-soft);line-height:1;
}
.panel-close:hover{color:var(--ink)}
.panel-title{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:400;
  font-size:34px;
  margin:0 0 28px;
  letter-spacing:-.01em;
  color:var(--ink);
}

/* ── Estadístiques ──────────────────────────────────────── */
.stat-summary{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-bottom:28px;
  padding:16px;
  background:var(--paper-deep);
  border:1px solid rgba(27,26,23,.1);
}
.stat-num{display:flex;flex-direction:column;gap:2px;min-width:60px}
.stat-num strong{font-family:'Fraunces',serif;font-size:28px;font-weight:500;color:var(--ink);line-height:1}
.stat-num span{font-family:'Manrope';font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

.stat-section{margin-bottom:24px}
.stat-section-title{
  font-family:'Manrope';font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid rgba(27,26,23,.1);
}

.stat-bar-row{
  display:grid;grid-template-columns:90px 1fr 32px;
  gap:8px;align-items:center;margin-bottom:6px;
}
.stat-label{font-family:'Manrope';font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-bar-track{background:rgba(27,26,23,.07);border-radius:1px;height:6px;overflow:hidden}
.stat-bar-fill{height:100%;border-radius:1px;transition:width .4s ease;min-width:4px}
.stat-count{font-family:'Manrope';font-size:11px;color:var(--ink-faint);text-align:right}
.stat-empty{font-size:13px;color:var(--ink-faint);font-style:italic}

.val-pills{display:flex;flex-wrap:wrap;gap:8px}
.val-pill{
  display:flex;align-items:center;gap:6px;
  font-family:'Manrope';font-size:12px;color:var(--ink-soft);
  padding:5px 10px;
  background:rgba(27,26,23,.05);
  border-radius:999px;
}
.val-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.val-pill strong{color:var(--ink)}
.val-pill em{color:var(--ink-faint);font-style:normal}

.gap-item{font-family:'Manrope';font-size:13px;color:var(--ink-soft);margin-bottom:4px}
.gap-none{font-family:'Manrope';font-size:13px;color:var(--positive)}

.stat-question blockquote{
  font-family:'Fraunces',serif;font-style:italic;
  font-size:19px;line-height:1.45;
  color:var(--ink-soft);
  margin:10px 0 14px;
  padding-left:14px;
  border-left:3px solid var(--accent);
}

/* ── Configuració ───────────────────────────────────────── */
.settings-section{margin-bottom:28px}
.settings-title{
  font-family:'Manrope';font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
  padding-bottom:6px;border-bottom:1px solid rgba(27,26,23,.1);
}
.settings-hint{font-size:12px;color:var(--ink-faint);margin-bottom:10px}

/* Temes */
.theme-swatches{display:flex;gap:10px;flex-wrap:wrap}
.theme-swatch{
  background:transparent;border:2px solid transparent;border-radius:3px;
  padding:6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:border-color .18s;
}
.theme-swatch:hover{border-color:var(--ink-faint)}
.theme-swatch.active{border-color:var(--accent)}
.swatch-preview{
  width:56px;height:40px;border-radius:2px;
  position:relative;overflow:hidden;
  border:1px solid rgba(0,0,0,.1);
  display:flex;align-items:flex-end;padding:4px;gap:3px;
}
.swatch-ink{width:18px;height:3px;border-radius:1px}
.swatch-accent{width:10px;height:10px;border-radius:50%;position:absolute;top:6px;right:6px}
.swatch-label{font-family:'Manrope';font-size:11px;color:var(--ink-soft)}

/* Categories */
.cat-row{
  display:grid;grid-template-columns:30px 1fr 28px;
  gap:8px;align-items:center;margin-bottom:8px;
}
.cat-color{
  width:28px;height:28px;border:none;padding:0;
  border-radius:2px;cursor:pointer;
  background:transparent;
}
.cat-name{
  background:transparent;border:none;
  border-bottom:1px solid rgba(27,26,23,.15);
  font-family:'Manrope';font-size:14px;
  color:var(--ink);padding:3px 0;
  outline:none;
}
.cat-name:focus{border-bottom-color:var(--accent)}
.cat-del{font-size:16px;color:var(--ink-faint);padding:0 4px}
.cat-del:hover{color:var(--accent-deep)}

/* ── Secció privada del modal (diari + re-lectures) ─────── */
.private-section{
  margin-top:20px;
  border-top:1px dashed rgba(27,26,23,.18);
  padding-top:14px;
}
.private-section summary{
  font-family:'Manrope';font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
  cursor:pointer;user-select:none;
  padding:4px 0;
  list-style:none;
}
.private-section summary::before{content:'🔒 '}
.private-section summary::-webkit-details-marker{display:none}
.private-section[open] summary{color:var(--ink-soft)}
.private-section .priv-inner{padding-top:14px;display:flex;flex-direction:column;gap:14px}

.retro-list{
  display:flex;flex-direction:column;gap:8px;
  margin-bottom:8px;
}
.retro-item{
  font-size:13px;color:var(--ink-soft);
  padding:8px 10px;
  background:rgba(27,26,23,.04);
  border-left:2px solid var(--ink-faint);
}
.retro-item em{font-size:11px;color:var(--ink-faint);font-style:normal;display:block;margin-bottom:3px}
.retro-empty{font-size:12px;color:var(--ink-faint);font-style:italic}

/* ── Temes ──────────────────────────────────────────────── */

/* Fosc */
[data-theme="dark"]{
  --paper:#1C1B18;
  --paper-deep:#141310;
  --ink:#EDE7D9;
  --ink-soft:#B5AD9E;
  --ink-faint:#7A7368;
  --accent:#C45C3C;
  --accent-deep:#E06A48;
  --line:#3A3830;
  --card:#252320;
  --positive:#4A9A5E;
  --challenging:#B05040;
  --milestone:#C89030;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 18px 30px -22px rgba(0,0,0,.6);
}
[data-theme="dark"] body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(196,92,60,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(74,154,94,.06), transparent 55%),
    var(--paper);
}

/* Sèpia */
[data-theme="sepia"]{
  --paper:#F5E9CB;
  --paper-deep:#EAD9AD;
  --ink:#2A1F0F;
  --ink-soft:#5A3A1A;
  --ink-faint:#907050;
  --accent:#8B4513;
  --accent-deep:#6B3510;
  --line:#4A3020;
  --card:#FAF0DC;
  --positive:#3A6A3A;
  --challenging:#8A3A2A;
  --milestone:#AA7820;
}
[data-theme="sepia"] body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(139,69,19,.08), transparent 60%),
    var(--paper);
}

/* Minimal */
[data-theme="minimal"]{
  --paper:#FAFAF9;
  --paper-deep:#F0F0EE;
  --ink:#111111;
  --ink-soft:#444444;
  --ink-faint:#888888;
  --accent:#2B6CB0;
  --accent-deep:#1A4F88;
  --line:#DDDDDD;
  --card:#FFFFFF;
  --positive:#276749;
  --challenging:#9B2C2C;
  --milestone:#B7791F;
  --shadow:0 1px 0 rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="minimal"] body{background:var(--paper)}
[data-theme="minimal"] .grain{opacity:0}
[data-theme="minimal"] .timeline::before{
  background:linear-gradient(to bottom, transparent, var(--line) 5%, var(--line) 95%, transparent);
}

/* Adaptació grain per al tema fosc */
[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.25}

/* ── Responsive panells ─────────────────────────────────── */
@media (max-width:480px){
  .side-panel{width:100vw}
  .panel-inner{padding:24px 16px 48px}
  .stat-bar-row{grid-template-columns:70px 1fr 28px}
}