/* ============================
   Design tokens & dark mode
   ============================ */
:root {
  --c-edge: #e4e7ec;
  --c-due-overdue: #b91c1c;
  --c-due-today:   #b45309;
  --c-due-soon:    #92400e;
}
html.dark {
  --c-edge: #2d333d;
  --c-due-overdue: #f87171;
  --c-due-today:   #fbbf24;
  --c-due-soon:    #fcd34d;
}

/* Force dark-mode look on legacy bg-card / bg-soft markup until templates migrate */
html.dark .bg-card, html.dark [class*="bg-card"] { background-color: #1a1f29 !important; }
html.dark .bg-soft, html.dark [class*="bg-soft"] { background-color: #0e1116 !important; }
html.dark .border, html.dark .border-b, html.dark .border-t, html.dark .border-l, html.dark .border-r { border-color: var(--c-edge); }
html.dark .text-muted { color: #9aa3b1; }
html.dark .text-gray-600 { color: #c8cfd9; }
html.dark .text-gray-700 { color: #d3dae5; }
html.dark .bg-white { background-color: #1a1f29 !important; }
html.dark .text-ink { color: #e4e7ec; }
html.dark hr { border-color: var(--c-edge); }
html.dark input, html.dark select, html.dark textarea {
  background-color: #0e1116;
  border-color: #2d333d;
  color: #e4e7ec;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #6b7280; }
html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.15) !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }
html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.15) !important; }
html.dark .text-indigo-700 { color: #a5b4fc !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11,0.18) !important; }
html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .bg-green-100 { background-color: rgba(16,185,129,0.18) !important; }
html.dark .text-green-800 { color: #6ee7b7 !important; }
html.dark .bg-red-50 { background-color: rgba(239,68,68,0.15) !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .bg-gray-100 { background-color: #2d333d !important; }
html.dark .text-gray-700 { color: #c8cfd9 !important; }
html.dark .bg-ink, html.dark .bg-ink-DEFAULT { background-color: #4f46e5 !important; }

/* ============================
   Component polish
   ============================ */
.due-overdue { color: var(--c-due-overdue); font-weight: 600; }
.due-today   { color: var(--c-due-today);   font-weight: 600; }
.due-soon    { color: var(--c-due-soon); }
.task-row[data-loading="1"] { opacity: 0.5; }

.htmx-request { opacity: 0.6; transition: opacity 120ms ease-in; }
.htmx-swapping { opacity: 0; transition: opacity 160ms ease-in; }

/* Safe-area insets — covers iPhone notch and foldable hinges/cutouts */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-top    { padding-top:    env(safe-area-inset-top, 0); }
.safe-left   { padding-left:   env(safe-area-inset-left, 0); }
.safe-right  { padding-right:  env(safe-area-inset-right, 0); }

/* Foldable inner display: when unfolded into ~tablet width, hide the bottom nav
   (top nav becomes available) and add a touch-friendly tap target boost. */
@media (min-width: 768px) {
  /* Already handled by md:hidden on bottom nav */
}

/* Foldable cover screen / very narrow widths: tighten paddings so the grid
   header doesn't wrap into 3 rows on a 1.9" cover display. */
@media (max-width: 380px) {
  header > div { padding-left: 0.5rem; padding-right: 0.5rem; }
  .grid-cols-5 > a, .grid-cols-4 > a { padding: 0.5rem 0.25rem; }
}

/* Touch targets on small screens; 16px input font kills iOS zoom */
@media (max-width: 768px) {
  button, select, input[type="checkbox"] { min-height: 38px; }
  input[type="text"], input[type="datetime-local"], input[type="date"], textarea, select {
    font-size: 16px;
  }
}

/* Subtle entrance for newly-swapped content */
.htmx-added { animation: fadein 200ms ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* Card defaults — soft elevation in light, defined edge in dark */
.card {
  background-color: #ffffff;
  border: 1px solid var(--c-edge);
  border-radius: 0.625rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
}
html.dark .card { background-color: #1a1f29; box-shadow: none; }

/* Focus rings — accessible on both themes */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}