/* YATT UI components.

   The design system is DaisyUI, themed in app/assets/tailwind/application.css.
   This file holds only two things:
     1. Adjustments where a DaisyUI component's default look diverges from
        docs/design-guide.md.
     2. The handful of layouts DaisyUI has no equivalent for.
   See docs/plans/2026-09-02-daisyui-design-system.md */

/* ══ DaisyUI adjustments ══════════════════════════════════════════════ */

/* DaisyUI derives the default button's border from --depth, which the yatt theme
   keeps at 0 for flatness — leaving unmodified buttons borderless. Restore the
   design guide's white / zinc-200 border / zinc-500 label treatment for the
   secondary button role (`btn btn-sm` with no colour modifier). */
.btn:not(.btn-primary, .btn-secondary, .btn-accent, .btn-neutral,
         .btn-info, .btn-success, .btn-warning, .btn-error,
         .btn-ghost, .btn-link, .btn-outline, .btn-dash, .btn-soft) {
  --btn-bg: #fff;
  --btn-border: #e4e4e7;
  --btn-fg: #71717a;
}

/* DaisyUI sizes .input/.select as clamp(3rem, 20rem, 100%); every form in this
   app was full-width under the old .yatt-input, so keep that the default rather
   than adding w-full to ~120 call sites. */
.input, .select, .textarea { width: 100%; }

/* Sidebar: DaisyUI's .menu-active is a filled dark row. The design guide calls
   for a light zinc-100 row with dark text, and 14px icons at 60% opacity. */
.menu :where(li > a) { color: #71717a; font-size: 13px; padding: 5px 10px; }
.menu :where(li > a):hover { background: #f4f4f5; color: #18181b; }
.menu :where(li > a).menu-active,
.menu :where(li > a).menu-active:hover {
  background: #f4f4f5; color: #18181b; font-weight: 500;
}
.menu :where(li > a) svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }
.menu :where(li > a).menu-active svg { opacity: 1; }
.menu :where(.menu-title) {
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  color: #a1a1aa; padding: 12px 10px 4px; text-transform: uppercase;
}

/* Page tabs: the design uses a dark filled pill for the active tab, where
   DaisyUI's .tabs-box lifts a white tab out of a grey trough. */
.tabs-box { background: transparent; padding: 0; gap: 4px; }
.tabs-box :where(.tab) {
  color: #71717a; font-size: 12px; padding: 4px 12px;
  border-radius: 5px; --tab-bg: transparent;
}
.tabs-box :where(.tab):hover { background: #f4f4f5; color: #18181b; }
.tabs-box :where(.tab-active) {
  background: #18181b; color: #fff; font-weight: 500; --tab-bg: #18181b;
}

/* Progress bars are 3px in this design; DaisyUI's default is 8px. */
.progress { background: #f4f4f5; border-radius: 2px; }

/* ══ Components DaisyUI has no equivalent for ═════════════════════════ */

/* Form labels. DaisyUI 5's .label is an inline affix designed to sit *inside*
   .input (display:inline-flex, 60% opacity) — not a standalone block label above
   a field. The idiomatic v5 alternative, .fieldset-legend, would require wrapping
   every field in <fieldset>. */
.yatt-label {
  display: block; font-size: 12px; font-weight: 500;
  color: #71717a; margin-bottom: 4px;
}

/* ── Projects list ── */
.project-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 180px 80px;
  align-items: center; padding: 14px 24px;
  border-bottom: 1px solid #f4f4f5;
  transition: background 0.1s; gap: 16px;
}
.project-row:hover { background: #fafafa; }
.project-row.header-row {
  padding-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid #e4e4e7;
}
.project-row.header-row:hover { background: transparent; }
.header-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: #a1a1aa;
}
/* ── Timesheet ─────────────────────────────────────── */
.ts-table { border-collapse: collapse; width: 100%; }
.ts-table th {
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: #a1a1aa;
  padding: 8px 12px; text-align: center;
  border-bottom: 1px solid #e4e4e7;
  white-space: nowrap;
}
.ts-table th.project-col { text-align: left; padding-left: 24px; }
.ts-table td {
  border-bottom: 1px solid #f4f4f5;
  border-right: 1px solid #f4f4f5;
  vertical-align: middle;
}
.ts-table td:last-child { border-right: none; }
.ts-table .project-name { padding: 0 16px; min-width: 200px; }
.ts-input {
  width: 100%; border: none; background: transparent;
  text-align: center; font-size: 13px; font-weight: 400;
  color: #18181b; padding: 10px 8px; outline: none;
  font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.ts-input::placeholder { color: #d4d4d8; }
.ts-input:focus { background: #fafafa; }
.ts-input.non-billable { color: #a1a1aa; }
td.ts-today { background: #fafafa; }
td.ts-today .ts-input:not(:placeholder-shown) { font-weight: 500; }
td.ts-weekend { background: #fafafa; }
td.ts-weekend .ts-input { color: #d4d4d8; }
.ts-table tfoot tr td {
  padding: 10px 12px; border-top: 1px solid #e4e4e7;
  font-size: 12px; font-weight: 500; text-align: center; color: #3f3f46;
}
.ts-table tfoot td.project-col { text-align: left; padding-left: 24px; }
.row-total {
  font-weight: 500; text-align: right; padding-right: 16px;
  font-size: 12px; color: #3f3f46; min-width: 60px;
  border-left: 1px solid #f4f4f5;
}
.billable-tag { font-size: 9px; color: #a1a1aa; display: block; text-align: center; margin-top: -4px; }
.nb-tag { font-size: 9px; color: #d4d4d8; display: block; text-align: center; margin-top: -4px; }