@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Journey design tokens (shadcn grammar, journeynudge.com 2026 brand) ────
   Token shape mirrors Valerin's globals.css so both codebases read the same.
   Brand source — journeynudge.com :root (June 2026) + Lorenzo's overrides:
     page #faf8f2 · cards pure white · line #E8E4D8 · ink #0F0F0F
     ink-mute #5E5E5C · gold #C4A35A · gold-deep #8C6E2B · orange #F97316
     serif 'Lora' (headings, -0.02/-0.01em tracking) · sans 'Inter' (body)  */
@layer base {
  :root {
    --background: 45 44% 96%;          /* page #faf8f2 */
    --foreground: 0 0% 6%;             /* ink #0F0F0F */
    --card: 0 0% 100%;                 /* pure white cards */
    --card-foreground: 0 0% 6%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 6%;
    --primary: 41 47% 56%;             /* gold #C4A35A */
    --primary-foreground: 0 0% 100%;
    --secondary: 45 35% 93%;           /* card-soft cream #F4F1E8 */
    --secondary-foreground: 0 0% 6%;
    --muted: 45 30% 93%;
    --muted-foreground: 60 1% 37%;     /* ink-mute #5E5E5C */
    --accent: 43 50% 93%;              /* pale gold wash */
    --accent-foreground: 39 53% 36%;   /* gold-deep #8C6E2B */
    --destructive: 0 84% 60%;          /* coral #EF4444 */
    --destructive-foreground: 0 0% 100%;
    --success: 174 70% 27%;            /* green-bubble #14756A */
    --success-foreground: 0 0% 100%;
    --warning: 25 95% 53%;             /* orange #F97316 */
    --warning-foreground: 0 0% 100%;
    --border: 45 26% 88%;              /* line #E8E4D8 */
    --input: 45 26% 88%;
    --ring: 41 47% 56%;
    --radius: 0.625rem;
  }

  * { @apply border-border; }

  body {
    @apply bg-background text-foreground antialiased font-sans;
  }

  /* Brand typography: headings are Lora 500 with the site's tracking
     (h1 -0.02em · h2 -0.01em · h3/h4 -0.005em); body stays Inter. */
  h1 { @apply font-serif font-medium tracking-heading-xl; }
  h2 { @apply font-serif font-medium tracking-heading; }
  h3, h4 { @apply font-serif font-medium tracking-heading-sm; }

  ::selection { background-color: hsl(var(--primary) / 0.25); }
}

@layer components {
  /* ── Cards (valerin rhythm: p-6, header gap 1.5) ─────────────────────── */
  .card        { @apply bg-card text-card-foreground rounded-xl border border-border shadow-sm; }
  .card-header { @apply flex flex-col space-y-1.5 p-6; }
  .card-title  { @apply font-serif text-lg font-medium tracking-heading-sm leading-none; }
  .card-description { @apply text-sm text-muted-foreground; }
  .card-content { @apply p-6 pt-0; }
  .card-footer  { @apply flex items-center p-6 pt-0; }

  /* ── Buttons (valerin variants; 44px touch floor on mobile) ──────────── */
  .btn-primary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 min-h-11 md:min-h-9; }
  .btn-secondary { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-colors hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 min-h-11 md:min-h-9; }
  .btn-outline { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-card px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 min-h-11 md:min-h-9; }
  .btn-ghost   { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 min-h-11 md:min-h-9; }
  .btn-destructive { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground shadow-sm transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 min-h-11 md:min-h-9; }
  .btn-link    { @apply inline-flex items-center gap-1 text-sm font-medium text-accent-foreground underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring rounded-sm; }
  .btn-sm      { @apply px-3 py-1.5 text-xs md:min-h-8; }
  .btn-lg      { @apply px-8 py-2.5 md:min-h-10; }
  .btn-icon    { @apply p-2 min-w-11 md:min-w-9; }

  /* ── Form controls ───────────────────────────────────────────────────── */
  .input { @apply flex w-full rounded-md border border-input bg-card px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm; }
  .textarea { @apply flex min-h-[60px] w-full rounded-md border border-input bg-card px-3 py-2 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm; }
  .label { @apply text-sm font-medium leading-none text-foreground; }
  .select-trigger { @apply flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-card px-3 py-2 text-sm shadow-sm transition-colors focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50; }

  /* ── Badges ──────────────────────────────────────────────────────────── */
  .badge       { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors; }
  .badge-primary { @apply badge bg-primary/15 text-accent-foreground; }
  .badge-secondary { @apply badge bg-secondary text-secondary-foreground; }
  .badge-success { @apply badge bg-success/10 text-success; }
  .badge-warning { @apply badge bg-warning/10 text-warning; }
  .badge-destructive { @apply badge bg-destructive/10 text-destructive; }
  .badge-muted   { @apply badge bg-muted text-muted-foreground; }
  .badge-outline { @apply badge border border-border text-foreground; }

  /* ── Data tables (valerin: quiet headers, hover rows, card shell) ────── */
  .table-shell { @apply card overflow-hidden; }
  .data-table  { @apply w-full text-sm; }
  .data-table thead th { @apply h-10 px-4 text-left align-middle text-xs font-medium uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border whitespace-nowrap; }
  .data-table tbody tr { @apply border-b border-border transition-colors hover:bg-muted/40; }
  .data-table tbody tr:last-child { @apply border-b-0; }
  .data-table tbody td { @apply px-4 py-3 align-middle; }

  /* ── Dropdown menus ──────────────────────────────────────────────────── */
  .menu { @apply z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md; }
  .menu-item { @apply relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-left outline-none transition-colors hover:bg-accent hover:text-accent-foreground; }
  .menu-separator { @apply -mx-1 my-1 h-px bg-muted; }
  .menu-label { @apply px-2 py-1.5 text-sm font-semibold; }

  /* ── Modals ──────────────────────────────────────────────────────────── */
  .modal-overlay { @apply fixed inset-0 z-50 bg-black/60; }
  .modal { @apply fixed left-1/2 top-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-card p-6 shadow-lg; }
  .modal-title { @apply font-serif text-lg font-medium tracking-heading-sm leading-none; }
  .modal-description { @apply text-sm text-muted-foreground; }
  .modal-footer { @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end; }
  .modal-close { @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring; }

  /* ── Page scaffolding ────────────────────────────────────────────────── */
  .page-header { @apply flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6; }
  .page-title { @apply font-serif text-2xl sm:text-3xl font-medium tracking-heading-xl text-foreground; }
  .page-description { @apply text-sm text-muted-foreground mt-1; }

  /* Brand hero greeting — sans frame around a serif-italic accent word:
     <h1 class="greeting">Good <em>afternoon</em>, Lorenzo</h1>             */
  .greeting { @apply font-sans font-semibold tracking-tight text-foreground; }
  .greeting em, .serif-accent { @apply font-serif italic font-medium; }

  /* ── Stat cards ──────────────────────────────────────────────────────── */
  .stat-card  { @apply card p-6 transition-colors; }
  .stat-label { @apply text-sm font-medium text-muted-foreground; }
  .stat-value { @apply text-3xl font-semibold tracking-tight font-sans; }
  .stat-delta { @apply text-xs text-muted-foreground; }

  /* ── Onboarding checklist (orange bubbles, conditionally checked) ────── */
  .checklist-item { @apply flex items-center gap-3 rounded-lg border border-border bg-card p-3 transition-colors hover:bg-muted/50; }
  .check-bubble { @apply flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 border-warning bg-transparent transition-colors; }
  .check-bubble.done { @apply bg-warning border-warning text-warning-foreground; }

  /* ── Tabs ────────────────────────────────────────────────────────────── */
  .tabs-list { @apply inline-flex h-9 items-center rounded-lg bg-muted p-1 text-muted-foreground overflow-x-auto max-w-full; }
  .tab-trigger { @apply inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50; }
  .tab-trigger.active { @apply bg-card text-foreground shadow; }

  /* ── Progress ────────────────────────────────────────────────────────── */
  .progress { @apply relative h-2 w-full overflow-hidden rounded-full bg-primary/20; }
  .progress-indicator { @apply h-full rounded-full bg-primary transition-all; }

  /* ── Loading / empty states ──────────────────────────────────────────── */
  .skeleton { @apply animate-pulse rounded-md bg-primary/10; }
  .empty-state { @apply rounded-xl border border-dashed border-border bg-card/50 p-12 text-center; }
  .empty-state-icon { @apply mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground; }

  /* ── Sidebar nav items ───────────────────────────────────────────────── */
  .sidebar-item { @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground; }
  .sidebar-item.active { @apply bg-accent text-accent-foreground; }

  /* ── Compose style chips ─────────────────────────────────────────────── */
  .chip { @apply inline-flex items-center gap-1.5 rounded-lg border border-primary/40 bg-card px-3 py-1.5 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring; }

  /* Mobile bottom navigation (Granola-style): visible < sm only */
  .mobile-tabbar {
    @apply fixed bottom-0 inset-x-0 z-40 flex items-stretch justify-around border-t border-border bg-card/95 backdrop-blur sm:hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tab { @apply flex flex-col items-center justify-center gap-0.5 py-2 px-3 text-[11px] text-muted-foreground min-h-[52px] flex-1; }
  .mobile-tab.active { @apply text-foreground font-medium; }
}

@layer components {
  .pagy {
    @apply flex space-x-1 font-semibold text-sm text-muted-foreground;
  }

  .pagy a {
    @apply block rounded-lg px-3 py-1 bg-muted;
  }

  .pagy a:hover {
    @apply bg-secondary;
  }

  .pagy a:not([href]) {
    @apply text-muted-foreground/50 bg-muted/50 cursor-default;
  }

  .pagy a.current {
    @apply text-primary-foreground bg-primary;
  }

  .pagy label {
    @apply inline-block whitespace-nowrap bg-muted rounded-lg px-3 py-0.5;
  }

  .pagy label input {
    @apply bg-card border-none rounded-md;
  }
}


.table-default {
  @apply w-full whitespace-nowrap;
}

.table-default thead tr {
  @apply h-20 w-full text-sm leading-none text-gray-600;
}

.table-default thead tr th {
  @apply focus:outline-none font-normal text-left ;
}

.table-default tbody {
  @apply w-full;
}

.table-default tbody tr {
  @apply h-20 text-sm leading-none text-gray-700 border-b border-t border-gray-200 bg-white hover:bg-gray-100;
}

.table-default tbody td {
  @apply pl-10;
}

.table-default tbody td:first-child {
  @apply pl-4;
}

.table-default .btn {
  @apply focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 focus:outline-none bg-gray-100 mr-5 hover:bg-gray-200 py-2.5 px-5 rounded text-sm leading-3 text-gray-600;
}
/* ---------------------------------------------------------------------------
   Legacy-compat (un-layered on purpose — no tree-shaking, loads verbatim).
   The admin layout loads ONLY this stylesheet; these classes are referenced
   by views that haven't been migrated to the component grammar above yet.
   Remove entries as pages are rebuilt.
   --------------------------------------------------------------------------- */
.rounded-lg-custom { border-radius: 20px; }
.rounded-lg-custom1 { border-radius: 70px; }

/* Week tab buttons (journey editors) — token-tuned */
.button-bg1 { color: hsl(var(--foreground)); background-color: hsl(var(--secondary)) !important; }
.button-bg1:hover { color: hsl(var(--foreground)); }
.bg-white-imp { background-color: #ffffff !important; }

/* Edit Style / Automated With AI buttons */
.edit-button,
.automated-button {
  height: 43px;
  box-shadow: 0 4px 6px rgba(218, 182, 122, 0.5);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.edit-button:hover { box-shadow: 0 4px 8px rgba(218, 182, 122, 0.7); }
.automated-button { border: 1px solid rgba(218, 182, 122, 0.5); border-radius: 4px; }
.button-bg-edit,
.button-bg-automated { color: hsl(var(--foreground)); background-color: hsl(var(--card)) !important; }
.button-bg-edit:hover,
.edit-button.button-bg-edit:hover { color: hsl(var(--foreground)); background-color: hsl(var(--muted)) !important; }

/* "+" add-week dropdowns. Scoped under their wrappers so they can't collide
   with other .dropdown-content usages (e.g. the journeys index menus). */
.week-dropdown, .week-dropdown1 { position: relative; display: inline-block; }
.plus-button, .plus-button1 {
  background-color: hsl(var(--secondary));
  color: hsl(var(--foreground));
  width: 44px;
  height: 44px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.plus-button:hover, .plus-button1:hover { color: hsl(var(--accent-foreground)); background-color: hsl(var(--accent)); }
.week-dropdown .dropdown-content,
.week-dropdown1 .dropdown-content1 {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
  z-index: 20;
  border-radius: 6px;
  margin-top: 5px;
}
.week-dropdown .dropdown-content.show,
.week-dropdown1 .dropdown-content1.show { display: block; }
.week-dropdown .dropdown-content button,
.week-dropdown1 .dropdown-content1 button,
.week-dropdown .dropdown-content form,
.week-dropdown1 .dropdown-content1 form { width: 100%; }
.week-dropdown .dropdown-content button,
.week-dropdown1 .dropdown-content1 button {
  background: none;
  border: none;
  color: hsl(var(--foreground));
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.week-dropdown .dropdown-content button:hover,
.week-dropdown1 .dropdown-content1 button:hover {
  background-color: hsl(var(--accent));
  border-radius: 6px;
  color: hsl(var(--accent-foreground));
}
.week-form { right: -10px; }
.week-form1 { right: -10px; }

/* Hover-reveal delete X on week tabs (scoped to the editors' .tabs strip) */
.tabs .relative.inline-block .p-1 { opacity: 0; transition: opacity 0.2s ease-in-out; }
.tabs .relative.inline-block:hover .p-1 { opacity: 1; }

/* Right-click "Duplicate Week" context button */
.duplicate-btn {
  z-index: 30;
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.duplicate-btn.visible { display: block; }

/* AI compose page (legacy classes still referenced by un-migrated views) */
.compose-text1 { border: 1.5px solid #dfd5b6; border-radius: 7px; }
.compose-start {
  margin-right: 40px;
  box-shadow: 0 1px 9px 4px #dfd5b6;
  border: 2px solid #e4c999;
  border-radius: 7px;
}
.compose-box {
  border: 2px solid #dfd5b6;
  padding-left: 0;
  padding-right: 0;
  box-shadow: 0 20px 20px 1px #dfd5b6;
}

/* Auto-expanding nudge textareas */
.expandable-textarea {
  transition: height 0.2s ease;
  resize: none;
  overflow: hidden;
  min-height: 42px;
}
.expandable-textarea.expanded { overflow: auto; }
.expandable-textarea:focus { min-height: 100px; }