/* ============================================================
   shared.css — design system shared by index.html, time.html
   and tasks.html.

   Source of truth for this system is tasks.html, which had the
   most developed theme infrastructure of the three pages. These
   custom properties, theme definitions, and the "core" component
   styles below were extracted from tasks.html verbatim (values
   unchanged) so all three pages render identically and theme
   switching (via #themeSelect, see header.js) stays in sync.

   Anything page-specific (task board, calendar, memory panel,
   timer/invoice UI, etc.) stays in each page's own <style> block —
   this file only holds what's genuinely shared.
   ============================================================ */

* { box-sizing: border-box; }

:root {
  --bg-primary: #faf9f5;
  --bg-secondary: #F5F4EF;
  --bg-card: #ffffff;
  --text-primary: #141413;
  --text-secondary: #5c5c5a;
  --text-muted: #8c8c8a;
  --accent: #D97757;
  --accent-hover: #c4684a;
  --border: #e5e4df;
  --border-light: #eeeee9;
  --shadow: rgba(20, 20, 19, 0.04);
  --shadow-hover: rgba(20, 20, 19, 0.08);
}

body.theme-green {
  --bg-primary: #f3f7f1;
  --bg-secondary: #e8f1e4;
  --bg-card: #ffffff;
  --text-primary: #1c2b1a;
  --text-secondary: #4d6b47;
  --text-muted: #7f9979;
  --accent: #2f9e44;
  --accent-hover: #268a3a;
  --border: #d7e6d1;
  --border-light: #e6f0e2;
  --shadow: rgba(20, 40, 15, 0.05);
  --shadow-hover: rgba(20, 40, 15, 0.09);
}

body.theme-blue {
  --bg-primary: #f2f6fb;
  --bg-secondary: #e6eef8;
  --bg-card: #ffffff;
  --text-primary: #142033;
  --text-secondary: #445a76;
  --text-muted: #7c92ab;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --border: #d7e3f2;
  --border-light: #e6eef8;
  --shadow: rgba(15, 30, 60, 0.05);
  --shadow-hover: rgba(15, 30, 60, 0.09);
}

body.theme-dark {
  --bg-primary: #17181c;
  --bg-secondary: #1f2126;
  --bg-card: #24262c;
  --text-primary: #f2f2f0;
  --text-secondary: #b7b8bd;
  --text-muted: #83858c;
  --accent: #e08a63;
  --accent-hover: #ec9c78;
  --border: #34363d;
  --border-light: #2b2d33;
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.45);
}

body.theme-terminal {
  --bg-primary: #0a0e0a;
  --bg-secondary: #0f140f;
  --bg-card: #0d120d;
  --text-primary: #33ff66;
  --text-secondary: #22cc4d;
  --text-muted: #1a8f38;
  --accent: #33ff66;
  --accent-hover: #29e058;
  --border: #1a3a22;
  --border-light: #142c1a;
  --shadow: rgba(0, 0, 0, 0.5);
  --shadow-hover: rgba(0, 0, 0, 0.6);
  font-family: 'Courier New', monospace;
}

body.theme-retro80s {
  --bg-primary: #1a1033;
  --bg-secondary: #241448;
  --bg-card: #2b1854;
  --text-primary: #ffe9fb;
  --text-secondary: #ff9ff3;
  --text-muted: #b98ee8;
  --accent: #ff2d95;
  --accent-hover: #ff58ab;
  --border: #4a2a7a;
  --border-light: #3a2065;
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-hover: rgba(0, 0, 0, 0.55);
}

/* ===== BASE / TYPOGRAPHY =====
   Pages still set their own layout rules (height, padding, overflow,
   flex direction, etc.) in their own <style> block — this just
   supplies the shared color/font baseline so a page's own rules
   don't have to repeat it. */

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

h1, h2, h3 { letter-spacing: -0.01em; }

a { color: var(--accent); }

/* ===== BUTTONS ===== */

button {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.15s ease;
}

button:hover {
  background: var(--bg-secondary);
  border-color: var(--text-muted);
}

button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

button.ghost:hover {
  background: var(--bg-secondary);
}

button.danger-ghost,
button.danger {
  background: transparent;
  color: #dc2626;
  border: 1px solid transparent;
  font-weight: 400;
}

button.danger-ghost:hover,
button.danger:hover {
  background: rgba(220, 38, 38, 0.08);
}

/* ===== FORM CONTROLS ===== */

select, input, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
}

/* On macOS/iOS Safari, a native <select>'s internal chrome (dropdown arrow,
   padding) is drawn by the OS and largely ignores CSS height/padding — this
   was the actual root cause behind selects never quite lining up with the
   inputs/buttons next to them, no matter how their padding was tuned
   (timer row, project rows, time log toolbar, etc). Stripping native
   appearance and drawing our own arrow makes <select> a plain CSS box that
   behaves exactly like <input> for sizing, fixing it everywhere at once
   rather than one row at a time. */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

select:focus, input:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

textarea { resize: vertical; }

label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 3px;
}

#themeSelect {
  width: auto;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 6px 26px 6px 10px;
  background-position: right 8px center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}

/* Generic focus-visible ring for keyboard navigation, layered under any
   more specific :focus rule a page already defines (those still win). */
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== CARDS ===== */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px var(--shadow);
}

.card h2 {
  font-size: 13px;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  color: var(--text-muted);
}

.section-header {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

/* ===== BADGES / CHIPS / PILLS ===== */

.pill {
  display: inline-block;
  background: var(--bg-secondary);
  color: var(--accent-hover);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.chip {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 2px 4px 2px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.chip button {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 5px;
  font-size: 12px;
  font-weight: 400;
}

.chip button:hover {
  color: #dc2626;
  background: none;
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ===== CHECKBOX (custom) ===== */

.checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--border);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
}

.checkbox:hover {
  border-color: var(--accent);
}

.checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox.checked::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* ===== EMPTY STATE ===== */

.empty-state {
  text-align: center;
  padding: 80px 40px;
  color: var(--text-muted);
}

.empty-state button {
  font-size: 16px;
  padding: 14px 28px;
  background: var(--accent);
  border: none;
  color: white;
}

.empty-state button:hover {
  background: var(--accent-hover);
}

/* ===== STATUS TOAST ===== */

.status-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-primary);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 4px 20px rgba(20, 20, 19, 0.15);
  z-index: 200;
  pointer-events: none;
}

.status-bar.visible { opacity: 1; }

/* ===== MODAL ===== */

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 19, 0.5);
  z-index: 100;
  align-items: center;
  justify-content: center;
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  background: var(--bg-card);
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(20, 20, 19, 0.2);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.modal-close:hover { color: var(--text-primary); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-group {
  margin-bottom: 16px;
}

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

.form-group textarea {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
  min-height: 300px;
  resize: vertical;
}

.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ===== SCROLLBARS ===== */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ============================================================
   APP HEADER / NAV — shared top bar injected by header.js into
   each page's <div id="appHeader"></div>. One definition, reused
   by index.html, time.html and tasks.html.
   ============================================================ */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.app-brand svg { flex-shrink: 0; }

.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.app-nav a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.app-nav a:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.app-nav a.active {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.app-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-auth-name {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-auth-btn {
  padding: 6px 12px;
  font-size: 12px;
}

.app-auth-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.app-auth-btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

@media (max-width: 768px) {
  .app-header {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 10px 12px;
  }

  .app-header-left {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .app-header-right {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-left: auto;
  }

  .app-nav a {
    padding: 8px 10px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  #themeSelect {
    min-height: 40px;
  }

  .app-auth-btn {
    min-height: 36px;
  }
}