/* ═══════════════════════════════════════
   LEGIBLE — Writing Tracker
   css/styles.css
═══════════════════════════════════════ */

/* ── Theme tokens ─────────────────────── */
:root {
  --bg:            #0C0A07;
  --surface:       #131009;
  --surface-alt:   #14110A;
  --surface-hover: #1A1206;
  --border:        #1E1A12;
  --border-dim:    #1C1810;
  --sidebar-bg:    #100E0A;
  --nav-hover:     #161310;

  --accent:        #C8921A;
  --accent-mid:    #A67515;
  --accent-dark:   #8A5F0E;

  --text:          #DDD4C0;
  --text-secondary:#9A8E7A;
  --text-muted:    #7A6E5E;
  --text-dim:      #5A4E3E;
  --text-dimmer:   #3D3425;
  --text-faint:    #2A2318;

  --scroll-track:  #100E0A;
  --scroll-thumb:  #2A2318;
  --scroll-hover:  #3D3425;
}

[data-theme="light"] {
  --bg:            #F5EDD8;
  --surface:       #EDE4CB;
  --surface-alt:   #E8DFC3;
  --surface-hover: #E0D5BA;
  --border:        #D4C8A8;
  --border-dim:    #CCC0A0;
  --sidebar-bg:    #F0E8D0;
  --nav-hover:     #E4DAC0;

  --accent:        #A67515;
  --accent-mid:    #8A5F0E;
  --accent-dark:   #6A4A0A;

  --text:          #2A2010;
  --text-secondary:#5A4A30;
  --text-muted:    #6A5A42;
  --text-dim:      #7A6A50;
  --text-dimmer:   #9A8A70;
  --text-faint:    #B0A080;

  --scroll-track:  #EDE4CB;
  --scroll-thumb:  #CCC0A0;
  --scroll-hover:  #B8AC8C;
}

/* ── Reset & base ─────────────────────── */
* { box-sizing: border-box; }

body {
  background: var(--bg);
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* app-shell fills remaining height after mobile-header */
.app-shell {
  flex: 1;
  overflow: hidden;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }

/* ── Layout ───────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 220px; min-width: 220px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-dim);
  display: flex; flex-direction: column;
  height: 100vh;
  position: sticky; top: 0;
  z-index: 30;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.main-content { flex: 1; overflow-y: auto; background: var(--bg); }

.view { display: none; }
.view.active { display: block; }

/* ── Mobile nav ───────────────────────── */
.mobile-header {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border-dim);
  position: sticky; top: 0; z-index: 40;
}

.mobile-logo { font-size: 15px; font-weight: 600; color: var(--text); }

/* ── Bottom tab bar ───────────────────── */
.tab-bar {
  display: none;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .tab-bar { padding-bottom: env(safe-area-inset-bottom); }
}

.tab-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 4px 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim);
  font-family: 'Manrope', sans-serif;
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.tab-item:active { opacity: 0.7; }
.tab-item.active { color: var(--accent); }
.tab-item.active svg { stroke: var(--accent); }

.tab-log svg { stroke: var(--text-secondary); }
.tab-log.active svg { stroke: var(--accent); }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 35;
  opacity: 0;
  transition: opacity 200ms ease;
}
.sidebar-overlay.open { opacity: 1; }

@media (max-width: 768px) {
  .app-shell { flex-direction: column; }

  .mobile-header { display: flex; }

  /* Sidebar hidden on mobile — navigation lives in the tab bar */
  .sidebar { display: none !important; }
  .sidebar-overlay { display: none !important; }

  /* Bottom tab bar visible */
  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--border-dim);
    z-index: 40;
  }

  .main-content { flex: 1; overflow-y: auto; }

  /* Push content above tab bar (56px bar + safe area) */
  .main-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .view.active { display: block; }

  /* Collapse heavy grids */
  .view.active > .grid,
  .view.active > div > .grid {
    grid-template-columns: 1fr !important;
  }

  .kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .log-grid-2 { grid-template-columns: 1fr !important; }
  .view.active { padding: 16px !important; }
  canvas { max-height: 200px !important; }
}

/* ── Nav ──────────────────────────────── */
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 8px;
  cursor: pointer; transition: all 150ms ease;
  font-size: 14px; color: var(--text-muted); font-weight: 500;
  margin: 2px 8px;
}
.nav-item:hover { background: var(--nav-hover); color: var(--text-secondary); }
.nav-item.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.nav-item svg { flex-shrink: 0; }

/* ── Cards ────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.card-sm { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }

/* ── KPI ──────────────────────────────── */
.kpi-val { font-family: 'Fira Code', monospace; font-size: 28px; font-weight: 600; line-height: 1; }
.kpi-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 6px;
}
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

/* ── Badges ───────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600;
}
.badge-draft    { background: rgba(34,197,94,0.12);   color: #22C55E; }
.badge-edit     { background: rgba(168,85,247,0.12);  color: #A855F7; }
.badge-research { background: rgba(245,158,11,0.12);  color: #F59E0B; }
.badge-other    { background: rgba(138,120,96,0.15);  color: #8A7860; }

/* ── Form inputs ──────────────────────── */
.inp {
  width: 100%;
  background: var(--surface-alt);
  border: 1px solid var(--text-faint);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Manrope', sans-serif; font-size: 14px;
  padding: 10px 12px;
  transition: border-color 150ms;
}
.inp:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.inp::placeholder { color: var(--text-dimmer); }
select.inp option { background: var(--surface-alt); color: var(--text); }

.inp.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}
.field-error {
  display: block;
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
  min-height: 16px;
  font-weight: 500;
}

label.lbl {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 6px;
}

/* ── Buttons ──────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-mid); color: #F5E8CC;
  font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: 8px; border: none;
  cursor: pointer; transition: background 150ms;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--text-muted);
  font-weight: 500; font-size: 14px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--text-faint);
  cursor: pointer; transition: all 150ms;
}
.btn-ghost:hover {
  background: var(--nav-hover);
  color: var(--text-secondary);
  border-color: var(--text-dimmer);
}

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: #EF4444;
  font-weight: 500; font-size: 13px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(239,68,68,0.3);
  cursor: pointer; transition: all 150ms;
}
.btn-danger:hover { background: rgba(239,68,68,0.1); }

/* ── Theme toggle ─────────────────────── */
.theme-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; transition: all 150ms;
}
.theme-toggle:hover { background: var(--nav-hover); color: var(--text-secondary); }

/* ── Range tabs ───────────────────────── */
.range-tab {
  padding: 5px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all 150ms;
  color: var(--text-dim);
}
.range-tab.active { background: var(--border); color: var(--text); }
.range-tab:hover:not(.active) { color: var(--text-secondary); }

/* ── Calendar ─────────────────────────── */
.cal-cell {
  position: relative; min-height: 72px;
  background: var(--sidebar-bg);
  border: 1px solid var(--border-dim);
  border-radius: 6px; padding: 6px 8px;
  cursor: pointer; transition: all 150ms;
}
.cal-cell:hover { border-color: var(--accent); background: var(--surface-hover); }
.cal-cell.today { border-color: #F59E0B; }
.cal-cell.other-month { opacity: 0.35; }
.cal-cell.has-data { background: color-mix(in srgb, var(--accent) 8%, var(--sidebar-bg)); }

/* ── Mobile calendar (iOS-style) ─────────── */
.cal-mobile-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 16px;
}
.cal-mobile-header {
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: var(--text-dimmer);
  padding: 6px 0 8px;
}
.cal-mobile-cell {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  justify-content: center; gap: 3px;
  padding: 6px 2px;
  cursor: pointer; border-radius: 8px;
  transition: background 120ms;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.cal-mobile-cell:active { background: var(--surface-hover); }
.cal-mobile-cell.other-month .cal-mobile-num { opacity: 0.25; }
.cal-mobile-num {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: background 120ms, color 120ms;
}
.cal-mobile-cell.today .cal-mobile-num {
  background: #F59E0B;
  color: #0C0A07;
  font-weight: 700;
}
.cal-mobile-cell.selected:not(.today) .cal-mobile-num {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 700;
}
.cal-mobile-dot {
  width: 5px; height: 5px; border-radius: 50%;
}
.cal-mobile-dot.empty { background: transparent; }

/* Selected day detail panel */
.cal-day-panel {
  border-top: 1px solid var(--border-dim);
  padding-top: 16px;
}
.cal-day-panel-header {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 12px;
}
.cal-day-session {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-dim);
}
.cal-day-session:last-child { border-bottom: none; }
.cal-day-empty {
  font-size: 13px; color: var(--text-dim);
  padding: 16px 0; text-align: center; font-style: italic;
}

.hm-cell { width: 13px; height: 13px; border-radius: 2px; cursor: pointer; transition: opacity 150ms; }
.hm-cell:hover { opacity: 0.7; outline: 1px solid var(--accent); }

/* ── Progress bar ─────────────────────── */
.pbar-track { height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 3px; transition: width 800ms cubic-bezier(.4,0,.2,1); }

/* ── Trend indicators ─────────────────── */
.trend-up   { color: #22C55E; }
.trend-down { color: #EF4444; }
.trend-flat { color: var(--text-muted); }

/* ── Delight layer ────────────────────── */
#toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
@keyframes toastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(6px); } }
.toast-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 18px;
  font-size: 13px; color: var(--text-secondary);
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  animation: toastIn 280ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  white-space: nowrap;
}
.toast-item.out { animation: toastOut 280ms ease forwards; }

.session-insight {
  font-size: 12px; color: var(--text-dim); font-style: italic;
  margin-top: 10px; min-height: 18px; opacity: 0;
  transition: opacity 600ms ease;
}
.session-insight.visible { opacity: 1; }

#sidebar-greeting {
  font-size: 11px; color: var(--text-dim); font-style: italic;
  margin-bottom: 8px; letter-spacing: 0.02em;
}
#sidebar-quote {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--border-dim);
  font-size: 10px; line-height: 1.55; color: var(--text-dim); font-style: italic;
}
#sidebar-quote cite {
  display: block; margin-top: 4px;
  font-style: normal; font-size: 9.5px; color: var(--text-dimmer); letter-spacing: 0.04em;
}

@keyframes wphPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.wph-pulse { animation: wphPulse 220ms ease; }
@keyframes numReveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.num-reveal { animation: numReveal 350ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* ── Modal ────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 50; display: none;
  align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--text-faint);
  border-radius: 16px; padding: 28px;
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
}

/* ── Confirm dialog buttons ──────────── */
.btn-confirm-yes {
  flex: 1;
  padding: 10px 0; border-radius: 8px; border: none;
  background: #16a34a; color: #fff;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background 150ms;
}
.btn-confirm-yes:hover { background: #15803d; }

.btn-confirm-no {
  flex: 1;
  padding: 10px 0; border-radius: 8px; border: none;
  background: #dc2626; color: #fff;
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background 150ms;
}
.btn-confirm-no:hover { background: #b91c1c; }

/* ── Project card delete X ───────────── */
.proj-card-wrap { position: relative; }
.proj-delete-x {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms, color 150ms;
  z-index: 2;
}
.proj-delete-x:hover { background: rgba(239,68,68,0.15); color: #ef4444; }

/* ── Heatmap legend gradient ──────────── */
.hm-legend {
  width: 80px; height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--surface-hover), var(--accent-dark), var(--accent));
}

/* ── Streak pill ──────────────────────── */
.streak-pill {
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25);
  color: #F59E0B; border-radius: 20px; padding: 3px 10px;
  font-family: 'Fira Code', monospace; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Section title ────────────────────── */
.section-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim);
}

/* ── Animate number ───────────────────── */
@keyframes numIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.num-anim { animation: numIn 350ms ease forwards; }

/* ── Divider ──────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border-dim); margin: 0; }

/* ── Recent sessions divider ─────────── */
#recent-sessions > div + div {
  border-top: 1px solid var(--border-dim);
}

/* ── Chart tooltip ────────────────────── */
.chartjs-tooltip {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* ── Project color picker ────────────────── */
.proj-color-opt {
  transition: transform 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms ease, outline 150ms ease;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.proj-color-opt:hover {
  transform: scale(1.25);
  outline-color: rgba(255,255,255,0.3);
}
.proj-color-opt.selected {
  transform: scale(1.3);
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
[data-theme="light"] .proj-color-opt:hover   { outline-color: rgba(0,0,0,0.25); }
[data-theme="light"] .proj-color-opt.selected { outline-color: rgba(0,0,0,0.5); }

/* ── Utility ──────────────────────────────── */
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}

/* ── Light mode: override JS inline styles ── */
[data-theme="light"] .view { color: var(--text); }
[data-theme="light"] .main-content { background: var(--bg); }