/* MyAIAgent organizer WebUI -- design system per DESIGN.md §3.4 decision (2026-07-16).
   60-30-10: shared neutral tokens (60% paper/surface + 30% structure) + one 10% accent
   (default: 海寶藍 Marine Gem Blue). Token-level theming: :root -> prefers-color-scheme ->
   data-theme override, so the in-app toggle always wins over the OS preference. */

:root {
  --paper: #f0eee8;
  --surface: #faf8f4;
  --structure: #8b8680;
  --structure-subtle: #dad5c9;
  --ink: #2b2a28;
  --ink-soft: #55524c;
  --accent: #3b6b78;
  --accent-ink: #f2fbfc;
  --accent-hover: #2f5760;

  --danger: #ad5850;
  --danger-ink: #fff5f4;
  --success: #3c6b57;
  --success-ink: #f1faf6;
  --warning: #a87c2e;
  --warning-ink: #fff8ec;

  --shadow: 0 1px 2px rgba(43, 42, 40, 0.06), 0 4px 16px rgba(43, 42, 40, 0.06);
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #201f1d;
    --surface: #2a2926;
    --structure: #8f8a80;
    --structure-subtle: #3a3835;
    --ink: #e8e4dc;
    --ink-soft: #b7b2a8;
    --accent: #7caab5;
    --accent-ink: #06181b;
    --accent-hover: #93bcc5;

    --danger: #d48d85;
    --danger-ink: #2c0f0c;
    --success: #74a88f;
    --success-ink: #0b1e16;
    --warning: #d9ad5c;
    --warning-ink: #2b2005;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --paper: #201f1d;
  --surface: #2a2926;
  --structure: #8f8a80;
  --structure-subtle: #3a3835;
  --ink: #e8e4dc;
  --ink-soft: #b7b2a8;
  --accent: #7caab5;
  --accent-ink: #06181b;
  --accent-hover: #93bcc5;

  --danger: #d48d85;
  --danger-ink: #2c0f0c;
  --success: #74a88f;
  --success-ink: #0b1e16;
  --warning: #d9ad5c;
  --warning-ink: #2b2005;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  --paper: #f0eee8;
  --surface: #faf8f4;
  --structure: #8b8680;
  --structure-subtle: #dad5c9;
  --ink: #2b2a28;
  --ink-soft: #55524c;
  --accent: #3b6b78;
  --accent-ink: #f2fbfc;
  --accent-hover: #2f5760;

  --danger: #ad5850;
  --danger-ink: #fff5f4;
  --success: #3c6b57;
  --success-ink: #f1faf6;
  --warning: #a87c2e;
  --warning-ink: #fff8ec;

  --shadow: 0 1px 2px rgba(43, 42, 40, 0.06), 0 4px 16px rgba(43, 42, 40, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
    "Segoe UI", sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
  body, .btn, .card, .modal-backdrop, .modal { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
}

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

h1, h2, h3 { font-weight: 600; margin: 0 0 0.5rem; text-wrap: balance; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.15rem; }

/* --- layout --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--structure-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar .brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
}

.topbar nav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.topbar nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
}

.topbar nav a:hover { background: var(--structure-subtle); }
.topbar nav a.active { color: var(--accent-ink); background: var(--accent); font-weight: 600; }

.topbar .right { display: flex; align-items: center; gap: 0.6rem; }

main.page {
  flex: 1;
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

/* --- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  line-height: 1.2;
}

.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--structure-subtle); }
.btn-secondary:hover { background: var(--structure-subtle); }

.btn-danger { background: var(--danger); color: var(--danger-ink); }
.btn-danger:hover { filter: brightness(0.92); }

.btn-icon { padding: 0.4rem 0.55rem; }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }

/* --- theme toggle --- */

#theme-toggle {
  background: var(--paper);
  border: 1px solid var(--structure-subtle);
  color: var(--ink-soft);
  border-radius: 999px;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
}

#theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- forms --- */

label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 0.3rem; }

input, select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--structure-subtle);
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
}

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

.field { margin-bottom: 1rem; }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row > .field { flex: 1; min-width: 140px; }

.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.checkbox-row input { width: auto; }

.hint { font-size: 0.78rem; color: var(--structure); margin-top: 0.3rem; }

.error-banner {
  background: var(--danger);
  color: var(--danger-ink);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

/* --- cards / tables --- */

.card {
  background: var(--surface);
  border: 1px solid var(--structure-subtle);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}

.card h2 { display: flex; align-items: center; justify-content: space-between; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: left; font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--structure); font-weight: 600; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--structure-subtle); }
td { padding: 0.6rem; border-bottom: 1px solid var(--structure-subtle); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

.list-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--structure-subtle);
}
.list-row:last-child { border-bottom: none; }

/* Two explicit flex groups instead of N independent flex items -- more robust across browsers
   than relying on flex-shrink/flex-basis interactions per item (mobile Safari in particular has
   long-standing quirks with native form-control intrinsic sizing inside flex rows). */
.list-row .lead {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
}
.list-row .trail {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 0 0 auto;
}

.list-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  /* Reset native OS checkbox rendering -- without this, intrinsic sizing is
     platform-dependent and can throw off the row's flex space distribution. */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--structure-subtle);
  border-radius: 3px;
  background: var(--paper);
  cursor: pointer;
  position: relative;
}
.list-row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.list-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.08rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.list-row .title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row .event-time {
  flex: 0 0 auto;
  min-width: 3rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
}
.list-row .title.done { color: var(--structure); text-decoration: line-through; }

/* --- chips / badges --- */

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.chip-h { background: var(--danger); color: var(--danger-ink); }
.chip-m { background: var(--warning); color: var(--warning-ink); }
.chip-l { background: var(--structure-subtle); color: var(--ink-soft); }
.chip-done { background: var(--success); color: var(--success-ink); }
.chip-active { background: var(--accent); color: var(--accent-ink); }
.chip-muted { background: var(--structure-subtle); color: var(--structure); }

/* --- calendar --- */

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--structure-subtle);
  border: 1px solid var(--structure-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-dow {
  background: var(--surface);
  text-align: center;
  font-size: 0.72rem;
  color: var(--structure);
  padding: 0.4rem 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cal-day {
  background: var(--paper);
  min-height: 5.5rem;
  padding: 0.35rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cal-day:hover { background: var(--surface); }
.cal-day.empty { cursor: default; background: var(--surface); opacity: 0.4; }

.cal-day .daynum {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.cal-day.today .daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.cal-day .ev {
  font-size: 0.68rem;
  background: var(--structure-subtle);
  color: var(--ink);
  border-radius: 2px;
  padding: 0.1rem 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- modal --- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 17, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem;
  z-index: 50;
}

.modal {
  background: var(--surface);
  border: 1px solid var(--structure-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.modal-close {
  background: none;
  border: none;
  color: var(--structure);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

/* --- utility --- */

.empty-state { color: var(--structure); font-size: 0.9rem; padding: 1rem 0; }
.stat { font-variant-numeric: tabular-nums; }
.muted { color: var(--structure); font-size: 0.82rem; }
.flex-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .cal-day { min-height: 4rem; }
  .field-row { flex-direction: column; }
}