/* =================================================================
   Todo-App PWA (#1 secure) — styling
   Look & feel mirrors the Fyne desktop app:
     - open private todos: pastel rose  (#FFD2D2)
     - priority private:   darker red   (#DC8282)
     - done private:       pastel green (#D2F5D2)
     - open family:        pastel blue  (#D0E8FF)
     - priority family:    darker blue  (#2596BE)
   Layout mode B: table on wide screens, cards on < 900px.
   ================================================================= */

/* CSS variables for font-size levels (set by JS, fallback = level 3 defaults) */
:root {
  --fs-todo-wide:   1em;
  --fs-date-wide:   0.85em;
  --row-py-wide:    10px;
  --fs-todo-narrow: 0.92em;
  --fs-date-narrow: 0.72em;
  --row-py-narrow:  8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  background: #1e1e1e;
  color: #eee;
  min-height: 100vh;
}

button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #555;
  background: #333;
  color: #eee;
  padding: 6px 12px;
  border-radius: 4px;
}
button:hover { background: #444; }
button.primary {
  background: #2596be;
  border-color: #2596be;
  color: #fff;
  font-weight: 600;
}
button.primary:hover { background: #1f7fa0; }

input, textarea {
  font: inherit;
  background: #2a2a2a;
  color: #eee;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 6px 8px;
  width: 100%;
}
textarea { resize: vertical; font-family: inherit; }

.screen { min-height: 100vh; }

/* ---------- Login ---------- */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.login-card h1 { margin: 0 0 4px 0; }
.login-card .subtitle { margin: 0 0 20px 0; color: #aaa; }
.login-card fieldset {
  border: 1px solid #444;
  border-radius: 6px;
  margin: 0 0 14px 0;
  padding: 10px 14px 14px;
}
.login-card legend { padding: 0 6px; color: #bbb; font-size: 0.9em; }
.login-card label {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: #bbb;
}
.login-card label input { margin-top: 2px; }
.login-card button.primary { width: 100%; padding: 10px; margin-top: 6px; }
.error { color: #ff8080; margin: 8px 0 0; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #2a2a2a;
  border-bottom: 1px solid #444;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 { margin: 0; font-size: 1.2em; }
.topbar-actions button { margin-left: 6px; }
#btn-refresh { font-size: 1.2em; padding: 4px 10px; }

/* ---------- Add row ---------- */
.add-row {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: #242424;
  border-bottom: 1px solid #333;
  align-items: flex-start;
}
.add-row textarea { flex: 1; min-height: 80px; }
.add-row-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.add-row-controls button {
  font-size: 1.6em;
  line-height: 1;
  padding: 6px 18px;
}
.target-toggle {
  font-size: 0.75em;
  color: #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

/* ---------- Table header (wide layout) ---------- */
.table-header {
  display: grid;
  grid-template-columns: 1fr 35px 95px 100px 100px 40px;
  gap: 6px;
  padding: 8px 16px;
  background: #e8e8e8;
  border-bottom: 2px solid #bbb;
  font-weight: 600;
  color: #555;
  font-size: 0.85em;
  text-transform: uppercase;
  position: sticky;
  top: 48px;
  z-index: 4;
}
.table-header > div { text-align: center; }
.table-header .col-title { text-align: left; }

/* ---------- Todo list ----------
   The list area uses a light background so the pastel row colours look
   identical to the Fyne desktop app (same hex codes, same visual weight). */
.todo-list {
  background: #f5f5f5;
  padding-bottom: 100px;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: #e0e0e0;
  color: #333;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.section-header .chevron {
  display: inline-block;
  width: 18px;
  font-size: 0.8em;
  color: #888;
}

.todo-row {
  display: grid;
  grid-template-columns: 1fr 35px 95px 100px 100px 40px;
  gap: 6px;
  align-items: center;
  padding: var(--row-py-wide) 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #ffd2d2; /* open private — matches desktop colorOpen */
  color: #111;
}
.todo-row.done      { background: #d2f5d2; } /* matches desktop colorDone */
.todo-row.priority  { background: #dc8282; color: #fff; } /* matches desktop colorPriority */
.todo-row.family    { background: #d0e8ff; } /* matches desktop colorFamilyOpen */
.todo-row.family.priority { background: #2596be; color: #fff; } /* matches desktop colorFamilyPriority */
.todo-row.family.done { background: #d2f5d2; }
/* Done always wins over priority — same behaviour as desktop app */
.todo-row.done.priority        { background: #d2f5d2; color: #111; }
.todo-row.family.done.priority { background: #d2f5d2; color: #111; }

.todo-row .title-cell {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}
.todo-row.done .title-cell {
  text-decoration: line-through;
  opacity: 0.7;
}
.todo-row .from-caption {
  display: block;
  font-size: 0.75em;
  color: #555;
  margin-top: 2px;
  font-style: italic;
}
.todo-row.priority .from-caption,
.todo-row.family.priority .from-caption { color: #f0f0f0; }

.todo-row .cell { text-align: center; }
.todo-row .date-cell { font-size: var(--fs-date-wide); font-variant-numeric: tabular-nums; }

.todo-row button.icon-btn {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.3);
  color: #111;
  padding: 4px 8px;
  border-radius: 3px;
}
.todo-row.priority button.icon-btn,
.todo-row.family.priority button.icon-btn { color: #fff; border-color: rgba(255,255,255,0.5); }
.todo-row button.icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.todo-row .prio-btn { font-weight: 900; }

.todo-row input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; }

/* Bold / italic / etc. markup from *text* syntax */
.todo-row .title-cell b { font-weight: 800; }
.todo-row .title-cell i { font-style: italic; }
.todo-row .title-cell u { text-decoration: underline; }
.todo-row .title-cell .headline {
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  display: inline-block;
}

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 12px 18px;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
/* Ensure hidden attribute overrides display:flex (applies to any element
   that has an explicit display:flex/grid rule and also uses [hidden]) */
.snackbar[hidden]      { display: none !important; }
#login-screen[hidden]  { display: none !important; }
.snackbar button {
  background: transparent;
  border: none;
  color: #2596be;
  font-weight: 700;
  padding: 4px 8px;
}

.empty { text-align: center; padding: 32px; color: #888; }

/* ---------- Narrow layout: cards (< 900px) ----------
   On mobile the row is fully tappable — no inline buttons.
   All actions (edit, prio, done, delete) live in the modal sheet. */
@media (max-width: 899px) {
  .table-header { display: none; }

  .todo-row {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "dates";
    padding: var(--row-py-narrow) 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  }
  .todo-row .title-cell {
    grid-area: title;
    font-size: var(--fs-todo-narrow);
    line-height: 1.25;
  }
  /* Actions are in the modal — hide inline buttons completely */
  .todo-row .actions-wrap { display: none; }

  .todo-row .dates-wrap {
    grid-area: dates;
    display: flex;
    gap: 8px;
    font-size: var(--fs-date-narrow);
    color: #666;
    margin-top: 2px;
  }
  .todo-row.priority .dates-wrap,
  .todo-row.family.priority .dates-wrap { color: #f0f0f0; }

  /* Section headers compact on mobile */
  .section-header { padding: 6px 10px; font-size: 0.9em; }

  .todo-row > .cell.wide-only { display: none; }
}

/* ---------- Tools panel (full-width overlay, top-anchored) ---------- */
.tools-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
  display: flex;
  align-items: flex-start;
}
.tools-overlay[hidden] { display: none !important; }

.tools-sheet {
  background: #fff;
  color: #111;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 0 0 16px 16px;
  padding: 16px 16px 28px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.tools-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 4px;
}
.tools-heading { font-weight: 700; font-size: 1.1em; }

.tools-section {
  padding: 14px 0 10px;
  border-bottom: 1px solid #eee;
}
.tools-section:last-child { border-bottom: none; }
.tools-section-title {
  margin: 0 0 10px 0;
  font-size: 0.95em;
  font-weight: 700;
  color: #444;
}
.tools-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tools-action-btn {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #222;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95em;
  text-align: left;
  cursor: pointer;
}
.tools-action-btn:hover { background: #eaeaea; }
.tools-info {
  margin: 0 0 6px;
  font-size: 0.85em;
  color: #555;
  word-break: break-all;
}
.tools-hint {
  margin: 0 0 10px;
  font-size: 0.8em;
  color: #999;
}

/* ---------- Todo edit modal (mobile bottom sheet) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: flex-start;  /* sheet anchors to top — keyboard opens below */
}
.modal-overlay[hidden] { display: none !important; }

.modal-sheet {
  background: #fff;
  color: #111;
  width: 100%;
  border-radius: 0 0 16px 16px;  /* rounded bottom corners only */
  padding: 16px 16px 24px;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-heading { font-weight: 700; font-size: 1.05em; }
.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 1.1em;
  color: #666;
  padding: 4px 8px;
}
/* Format toolbar above the modal textarea */
.format-bar {
  display: flex;
  gap: 6px;
}
.fmt-btn {
  background: #f0f0f0;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
  min-width: 36px;
}
.fmt-btn:active { background: #ddd; }

.modal-sheet textarea {
  width: 100%;
  min-height: 80px;
  font: inherit;
  font-size: 1em;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical;
  background: #fff;
  color: #111;
}
.modal-toggles { display: flex; flex-direction: column; gap: 8px; }
.modal-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: #f5f5f5;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
}
.modal-toggle-row input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; }
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}
.modal-footer-right { display: flex; gap: 8px; }
.danger-btn {
  background: #e05555;
  border-color: #c04444;
  color: #fff;
  font-weight: 600;
}
.danger-btn:hover { background: #c04444; }
.danger-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- Delete confirmation sheet ---------- */
.confirm-sheet {
  background: #fff;
  color: #111;
  width: 100%;
  border-radius: 0 0 16px 16px;
  padding: 28px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.25);
}
.confirm-question {
  margin: 0;
  font-size: 1.15em;
  font-weight: 600;
  text-align: center;
}
.confirm-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.confirm-buttons button {
  width: 100%;
  padding: 14px;
  font-size: 1em;
  border-radius: 10px;
}

/* ---------- Font size slider in Tools panel ---------- */
.font-size-control { display: flex; flex-direction: column; gap: 6px; }
#font-size-slider {
  width: 100%;
  accent-color: #2596be;
  cursor: pointer;
}
.font-size-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
  color: #777;
}
.fs-label-small { font-size: 0.75em; }
.fs-label-large { font-size: 1.3em; font-weight: 600; }
#fs-current-level { color: #2596be; font-weight: 700; }

@media (min-width: 900px) {
  /* On wide layout the per-cell .wide-only elements are visible and the
     narrow grouping containers must be hidden — otherwise the checkbox,
     priority and delete buttons would render twice (once in each cell
     and once inside .actions-wrap). */
  .todo-row > .actions-wrap,
  .todo-row > .dates-wrap { display: none; }
}