/*
 * theme.css — TaskFlow's design-system values.
 * Soft-saas: big rounded corners, pill buttons, gentle layered shadows.
 * Bright, colorful accents on a mostly-white ground.
 */

:root {
  --canvas: #f7faf9;
  --surface: #ffffff;
  --surface-2: #eef4f2;
  --border: #dbe6e3;
  --border-strong: #b9cac6;
  --ink: #172623;
  --muted: #5c6b68;

  --accent: #0f766e;
  --accent-hover: #0c645d;
  --accent-ink: #ffffff;
  --accent-text: #0b6f66;
  --accent-strong: #0b5c54;
  --accent-soft: #d9f3ef;
  --accent-border: #a9ded4;

  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dcf9e6;
  --success-strong: #157a3c;

  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #fef0d2;
  --warning-strong: #a75c05;

  --danger: #c81e3a;
  --danger-ink: #ffffff;
  --danger-soft: #fde1e5;
  --danger-strong: #b91e35;

  --chart-1: #0f766e;
  --chart-2: #2b66da;
  --chart-3: #16a34a;
  --chart-4: #8b5cf6;
  --chart-5: #d97706;
  --chart-6: #0891b2;

  /* TaskFlow's own tokens: two more status hues job cards need (blue + purple)
     beyond what success/warning/danger cover. */
  --x-blue: #2b66da;
  --x-blue-soft: #dfe9fe;
  --x-blue-ink: #1d4ed8;
  --x-purple: #8b5cf6;
  --x-purple-soft: #ede7fe;
  --x-purple-ink: #6d28d9;
  --x-rail-bg: #ffffff;

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 999px;
  --radius-card: 1.375rem;
  --radius-input: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.375rem;
  --border-w: 1px;
  --border-strong-w: 1.5px;
  --card-pad: 1.5rem;
  --btn-weight: 700;
  --caps: none;

  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-raised: 0 20px 45px -18px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-btn: 0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  --shadow-xs: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent);
}

html[data-theme="dark"] {
  --canvas: #0f1520;
  --surface: #161d29;
  --surface-2: #1e2632;
  --border: #2a3341;
  --border-strong: #3d4859;
  --ink: #eef1f6;
  --muted: #9aa4b3;

  --accent: #2dd4bf;
  --accent-hover: #45e0cb;
  --accent-ink: #052e2b;
  --accent-text: #5eead4;
  --accent-strong: #99f6e4;
  --accent-soft: #123832;
  --accent-border: #1f5d54;

  --success: #34c979;
  --success-ink: #05210f;
  --success-soft: #12301f;
  --success-strong: #6ee3a4;

  --warning: #f0a533;
  --warning-ink: #241703;
  --warning-soft: #3a2a0c;
  --warning-strong: #fbc766;

  --danger: #f4576b;
  --danger-ink: #250509;
  --danger-soft: #3b151c;
  --danger-strong: #f89aa6;

  --chart-1: #2dd4bf;
  --chart-2: #7fa8ff;
  --chart-3: #34c979;
  --chart-4: #ac93fb;
  --chart-5: #f0a533;
  --chart-6: #35c4e8;

  --x-blue: #7fa8ff;
  --x-blue-soft: #17233a;
  --x-blue-ink: #a7c3ff;
  --x-purple: #ac93fb;
  --x-purple-soft: #241d3c;
  --x-purple-ink: #cbb8fd;
  --x-rail-bg: #131a25;

  --shadow-card: 0 1px 2px color-mix(in srgb, black 30%, transparent), 0 16px 32px -16px color-mix(in srgb, black 55%, transparent);
  --shadow-raised: 0 24px 50px -20px color-mix(in srgb, black 65%, transparent);
  --shadow-btn: 0 10px 24px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-xs: 0 1px 2px color-mix(in srgb, black 40%, transparent);
}

/*
 * app.css — TaskFlow's own stylesheet. Everything no primitive covers:
 * the app shell (rail + bottom nav), status colour system, stat tiles,
 * job/team/customer cards, the wizard, the calendar, the ledger, the
 * activity feed, and the one motion the brief asked for (a staggered
 * grid). Tokens only — no colour literal below.
 */

@layer components {

  /* A small SVG sitting inline after a heading/tagline/button label, in
     place of a decorative emoji (emoji glyphs don't render reliably across
     every browser/OS and are never used for icons on this app). */
  .icon-heading { @apply inline-block size-5 shrink-0 align-[-0.25em]; color: var(--accent-text); }

  /* ============================================================
     STATUS COLOUR SYSTEM — one class sets three custom properties;
     every surface that carries it (badge, card border, dot) reads them.
     ============================================================ */
  .status-scheduled   { --status-color: var(--x-blue);    --status-soft: var(--x-blue-soft);    --status-ink: var(--x-blue-ink); }
  .status-in_progress { --status-color: var(--accent);    --status-soft: var(--accent-soft);    --status-ink: var(--accent-strong); }
  .status-completed   { --status-color: var(--success);   --status-soft: var(--success-soft);   --status-ink: var(--success-strong); }
  .status-cancelled   { --status-color: var(--danger);    --status-soft: var(--danger-soft);    --status-ink: var(--danger-strong); }
  .status-rescheduled { --status-color: var(--x-purple);  --status-soft: var(--x-purple-soft);  --status-ink: var(--x-purple-ink); }
  .status-paid        { --status-color: var(--success);   --status-soft: var(--success-soft);   --status-ink: var(--success-strong); }
  .status-pending      { --status-color: var(--warning);   --status-soft: var(--warning-soft);   --status-ink: var(--warning-strong); }
  .status-overdue     { --status-color: var(--danger);    --status-soft: var(--danger-soft);    --status-ink: var(--danger-strong); }

  .status-badge { background: var(--status-soft); color: var(--status-ink); }
  .status-badge .dot { background: currentColor; }

  /* ============================================================
     APP SHELL — desktop rail, mobile bottom bar, technician bar.
     ============================================================ */
  .app-frame { @apply relative; }
  .app-main { @apply mx-auto w-full max-w-[68rem] px-5 py-8 md:px-10 md:py-10; padding-bottom: 6rem; }
  @media (min-width: 64rem) { .app-frame { min-height: 100vh; padding-left: 5.75rem; } .app-main { padding-bottom: 2.5rem; } }

  .rail {
    @apply fixed inset-y-0 left-0 z-20 hidden w-[5.75rem] flex-col items-center gap-4 border-r border-border py-5;
    background: var(--x-rail-bg);
  }
  @media (min-width: 64rem) { .rail { display: flex; } }
  .rail-brand { @apply mb-1; }
  .rail-logo { @apply grid size-11 place-items-center rounded-2xl; background: var(--accent-soft); color: var(--accent-strong); }
  .rail-logo .icon { @apply size-5; }
  .rail-logo-sm { @apply size-8 rounded-xl; }
  .rail-logo-sm .icon { @apply size-4; }
  .rail-logo-lg { @apply size-16 rounded-3xl; }
  .rail-logo-lg .icon { @apply size-7; }
  .rail-cta {
    @apply grid size-12 shrink-0 place-items-center rounded-2xl transition-transform duration-150;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-btn);
  }
  .rail-cta:hover { transform: scale(1.06); }
  .rail-cta .icon { @apply size-6; }
  .rail-nav { @apply flex w-full flex-1 flex-col items-center gap-1 overflow-y-auto py-2; }
  .rail-item {
    @apply flex w-[4.25rem] flex-col items-center gap-1 rounded-2xl py-2.5 text-[0.65rem] font-semibold text-muted no-underline transition-colors duration-150;
  }
  .rail-item .icon { @apply size-5; }
  .rail-item:hover { @apply text-ink; background: var(--surface-2); }
  .rail-item.is-active { color: var(--accent-strong); background: var(--accent-soft); }
  .rail-foot { @apply mt-auto flex flex-col items-center gap-3; }
  .rail-theme { @apply size-9; }
  .rail-avatar { @apply cursor-pointer list-none; }
  .rail-avatar::-webkit-details-marker { display: none; }

  /* Fixed to the viewport, not to the document flow: on a short page (a
     one-card wizard step, an empty list) an in-flow FAB lands right after
     the content and leaves a screen-sized dead zone before the fixed bottom
     nav. Pinned above the bottom nav, it never leaves that gap on any page. */
  .fab {
    @apply fixed z-30 grid size-14 place-items-center rounded-full;
    right: 1.25rem;
    bottom: 4.75rem;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow-raised);
  }
  .fab .icon { @apply size-7; }
  @media (min-width: 64rem) { .fab { display: none; } }

  .bottom-nav {
    @apply fixed inset-x-0 bottom-0 z-20 flex items-stretch gap-0.5 overflow-x-auto border-t border-border px-1.5 py-1.5;
    background: var(--surface);
    box-shadow: var(--shadow-raised);
  }
  @media (min-width: 64rem) { .bottom-nav { display: none; } }
  .bottom-nav-item { @apply flex min-w-16 flex-1 flex-col items-center gap-0.5 rounded-xl py-1.5 text-[0.6rem] font-semibold text-muted no-underline; }
  .bottom-nav-item .icon { @apply size-5; }
  .bottom-nav-item.is-active { color: var(--accent-strong); background: var(--accent-soft); }

  .tech-frame { @apply min-h-screen; }
  .tech-bar { @apply sticky top-0 z-20 flex items-center justify-between border-b border-border px-5 py-4; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); }
  .tech-main { @apply mx-auto w-full max-w-xl px-5 py-6; }

  /* ============================================================
     LOGIN
     ============================================================ */
  .login-body { @apply flex items-center justify-center p-6; }
  .login-wrap { @apply flex min-h-screen w-full items-center justify-center; }
  .login-card { @apply w-full max-w-sm; }
  .login-brand { @apply mb-6 flex flex-col items-center gap-2 text-center; }
  .login-divider { @apply relative my-5 text-center text-xs font-semibold text-muted; }
  .login-divider::before { content: ""; @apply absolute left-0 top-1/2 h-px w-[42%]; background: var(--border); }
  .login-divider::after { content: ""; @apply absolute right-0 top-1/2 h-px w-[42%]; background: var(--border); }
  .login-hint { @apply mt-5 text-center text-xs text-muted; }

  /* ============================================================
     PAGE HEAD / SECTION HEAD
     ============================================================ */
  .page-head { @apply mb-6; }
  .schedule-head { @apply flex flex-col items-stretch gap-4 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between; }
  .section-head { @apply mb-4 mt-10 flex items-center justify-between; }
  .quick-actions-head { @apply mt-8 mb-3; }

  /* ============================================================
     STAT TILES
     ============================================================ */
  .stat-grid { @apply grid grid-cols-2 gap-4 lg:grid-cols-4; }
  .stat-grid-3 { @apply grid-cols-1 sm:grid-cols-3 lg:grid-cols-3; }
  .stat-tile { @apply relative overflow-hidden rounded-[var(--radius-card)] p-5; background: var(--tile-soft, var(--surface-2)); box-shadow: var(--shadow-card); }
  .stat-blue { --tile-color: var(--x-blue); --tile-soft: var(--x-blue-soft); --tile-ink: var(--x-blue-ink); }
  .stat-orange { --tile-color: var(--accent); --tile-soft: var(--accent-soft); --tile-ink: var(--accent-strong); }
  .stat-green { --tile-color: var(--success); --tile-soft: var(--success-soft); --tile-ink: var(--success-strong); }
  .stat-purple { --tile-color: var(--x-purple); --tile-soft: var(--x-purple-soft); --tile-ink: var(--x-purple-ink); }
  .stat-tile-icon { @apply mb-3 grid size-10 place-items-center rounded-xl; background: color-mix(in srgb, var(--tile-color) 22%, transparent); color: var(--tile-color); }
  .stat-tile-num { @apply text-3xl font-extrabold tracking-tight; color: var(--tile-ink); }
  .stat-tile-label { @apply mt-1 text-sm font-semibold text-muted; }

  /* ============================================================
     QUICK ACTIONS
     ============================================================ */
  .create-job-btn { @apply w-full justify-center text-lg; }
  .quick-grid { @apply mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4; }
  .quick-tile {
    @apply flex flex-col items-center gap-2 rounded-2xl border border-border bg-surface px-3 py-4 text-center text-sm font-semibold text-ink no-underline transition-colors duration-150;
    box-shadow: var(--shadow-xs);
  }
  .quick-tile:hover { background: var(--surface-2); }
  .quick-tile .icon { @apply size-6; color: var(--accent-text); }

  /* ============================================================
     JOB CARD (dashboard, schedule day view, search results)
     ============================================================ */
  .job-grid { @apply grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3; }
  .job-card {
    @apply flex flex-col gap-2 rounded-[var(--radius-card)] border border-border bg-surface p-5 no-underline transition-transform duration-150;
    border-left: 4px solid var(--status-color);
    box-shadow: var(--shadow-card);
  }
  .job-card:hover { transform: translateY(-2px); }
  .job-card-head { @apply flex items-center justify-between gap-2; }
  .job-card-service { @apply font-display text-base font-bold; }
  .job-card-customer { @apply text-lg font-semibold; }
  .job-card-meta { @apply flex items-center gap-2 text-sm text-muted; }
  .icon-sm { @apply size-4 shrink-0; }
  .job-card-foot { @apply mt-2 flex items-center justify-between gap-2 border-t border-border pt-3; }
  .job-card-tech { @apply flex items-center gap-2 text-sm font-medium text-ink; }
  .job-card-link { @apply flex items-center gap-1 text-sm font-semibold; color: var(--accent-text); }

  /* ============================================================
     TECHNICIAN VIEW
     ============================================================ */
  .tech-job-list { @apply flex flex-col gap-4; }
  .tech-job-card { border-left: 5px solid var(--status-color); }
  .tech-job-actions { @apply mt-3 flex gap-3; }
  .btn-tech-complete { background: var(--success); border-color: var(--success); color: var(--success-ink); }
  .btn-tech-complete:hover { background: var(--success-strong); border-color: var(--success-strong); }

  /* ============================================================
     WIZARD (Create New Job)
     ============================================================ */
  .wizard-rail { @apply mb-6 flex list-none flex-wrap gap-x-6 gap-y-3 p-0; }
  .wizard-step { @apply flex items-center gap-2 text-sm font-semibold text-muted; }
  .wizard-step-num { @apply grid size-7 shrink-0 place-items-center rounded-full border-2 border-border-strong text-xs; }
  .wizard-step.is-active .wizard-step-num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .wizard-step.is-active .wizard-step-label { color: var(--ink); }
  .wizard-step.is-done .wizard-step-num { border-color: var(--success); background: var(--success); color: var(--success-ink); }
  .wizard-card { @apply mx-auto max-w-2xl; }
  .wizard-legend { @apply mb-4 font-display text-lg font-bold; }
  .chip-row { @apply grid grid-cols-2 gap-2 sm:flex sm:flex-wrap; }
  .wizard-actions { @apply flex items-center gap-3; }

  /* ============================================================
     JOB DETAIL
     ============================================================ */
  .job-summary-wrap { @apply mx-auto max-w-3xl; }
  .job-summary-card { @apply mx-auto; }
  .job-summary-top { @apply flex items-start justify-between gap-3; }
  .job-summary-id { @apply text-sm text-muted; }
  .job-summary-grid { @apply mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2; }
  .job-summary-item { @apply flex items-start gap-3; }
  .job-summary-icon { @apply mt-0.5 grid size-9 shrink-0 place-items-center rounded-xl; background: var(--surface-2); color: var(--accent-text); }
  .job-summary-notes { @apply mt-5 rounded-xl border border-border p-4; background: var(--surface-2); }
  .job-actions { @apply mx-auto mt-5 grid max-w-3xl grid-cols-2 gap-3 sm:grid-cols-3; }
  .job-action-complete { background: var(--success); border-color: var(--success); color: var(--success-ink); }
  .job-action-complete:hover { background: var(--success-strong); border-color: var(--success-strong); }

  /* ============================================================
     SCHEDULE — toggle, date nav, week grid, month grid
     ============================================================ */
  .schedule-controls { @apply mb-6 flex flex-wrap items-center justify-between gap-4; }
  .schedule-toggle { @apply flex gap-2; }
  .schedule-datenav { @apply flex items-center gap-2; }
  .schedule-datenav-title { @apply min-w-[11rem] text-center font-display text-base font-bold; }

  .week-grid { @apply grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-7; }
  .week-col { @apply flex flex-col rounded-[var(--radius-card)] border border-border bg-surface p-3; box-shadow: var(--shadow-xs); }
  .week-col.is-today { border-color: var(--accent-border); background: var(--accent-soft); }
  .week-col-head { @apply mb-2 flex items-baseline justify-between border-b border-border pb-2; }
  .week-col-dow { @apply text-xs font-bold uppercase tracking-wide text-muted; }
  .week-col-num { @apply font-display text-lg font-bold; }
  .week-col-body { @apply flex flex-col gap-2; }
  .week-col-empty { @apply py-4 text-center text-xs text-muted; }
  .slot-item {
    @apply flex flex-col gap-0.5 rounded-lg border-l-[3px] px-2.5 py-2 text-xs no-underline;
    border-left-color: var(--status-color);
    background: var(--status-soft);
    color: var(--status-ink);
  }
  .slot-time { @apply font-mono text-[0.7rem] font-bold; }
  .slot-customer { @apply font-semibold text-ink; }
  .slot-service { @apply text-muted; }
  .slot-dot { @apply hidden; }

  .month-grid { @apply grid grid-cols-7 gap-1.5; }
  .month-dow { @apply pb-1 text-center text-xs font-bold uppercase tracking-wide text-muted; }
  .month-cell {
    @apply flex aspect-square flex-col items-center gap-1 rounded-xl border border-border bg-surface p-1.5 no-underline transition-colors duration-150;
  }
  .month-cell:hover { background: var(--surface-2); }
  .month-cell.is-out { @apply opacity-40; }
  .month-cell.is-today { border-color: var(--accent); }
  .month-cell-num { @apply text-sm font-semibold; }
  .month-cell-dots { @apply flex flex-wrap items-center justify-center gap-0.5; }
  .dot-status { @apply inline-block size-1.5 rounded-full; background: var(--status-color); }
  .month-cell-more { @apply text-[0.6rem] text-muted; }

  /* ============================================================
     CUSTOMERS
     ============================================================ */
  .search-bar { @apply mb-6 max-w-xl; }
  .customer-grid { @apply grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3; }
  .customer-card { @apply flex flex-col gap-3 no-underline transition-transform duration-150; }
  .customer-card:hover { transform: translateY(-2px); }
  .customer-card-meta { @apply flex items-center gap-2 text-sm text-muted; }
  .customer-card-foot { @apply mt-1 flex items-center justify-between gap-2 border-t border-border pt-3; }

  .profile-head { @apply flex flex-wrap items-center gap-4; }
  .profile-avatar { @apply size-16 text-xl; }
  .profile-grid { @apply mt-6 grid grid-cols-1 gap-5 lg:grid-cols-3; }
  .contact-row { @apply flex items-center gap-3 py-2 text-sm; }
  .contact-row + .contact-row { @apply border-t border-border; }
  .history-list { @apply flex flex-col; }
  .history-row { @apply flex items-center gap-3 py-3 no-underline; }
  .history-row + .history-row { @apply border-t border-border; }
  .history-icon { @apply grid size-9 shrink-0 place-items-center rounded-xl; background: var(--surface-2); color: var(--muted); }
  .history-icon .icon { @apply size-4; }

  /* ============================================================
     TEAM
     ============================================================ */
  .team-grid { @apply grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3; }
  .team-card { @apply flex flex-col gap-3; }
  .team-card-top { @apply flex items-center gap-3 no-underline; }
  .team-avatar-blue { background: var(--x-blue-soft); color: var(--x-blue-ink); }
  .team-avatar-orange { background: var(--accent-soft); color: var(--accent-strong); }
  .team-avatar-green { background: var(--success-soft); color: var(--success-strong); }
  .team-avatar-purple { background: var(--x-purple-soft); color: var(--x-purple-ink); }
  .team-card-row { @apply flex items-center gap-2 text-sm text-muted; }
  .availability-dot { @apply size-2.5 shrink-0 rounded-full; }
  .availability-dot.is-available { background: var(--success); }
  .availability-dot.is-unavailable { background: var(--border-strong); }

  /* ============================================================
     PAYMENTS
     ============================================================ */
  .payment-list { @apply flex flex-col gap-3; }
  .payment-row {
    @apply flex flex-wrap items-center gap-3 rounded-[var(--radius-card)] border border-border bg-surface p-4;
    border-left: 4px solid var(--status-color);
    box-shadow: var(--shadow-xs);
  }
  .payment-row-icon { @apply grid size-10 shrink-0 place-items-center rounded-xl; background: var(--status-soft); color: var(--status-ink); }
  .payment-row-amount { @apply text-lg font-bold; }

  /* ============================================================
     REPORTS
     ============================================================ */
  .report-grid { @apply grid grid-cols-1 gap-5 lg:grid-cols-2; }

  /* ============================================================
     NOTIFICATIONS & SEARCH
     ============================================================ */
  .search-panel { @apply mb-8 flex flex-col gap-4; }
  .search-filters { @apply grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5; }
  .notif-list { @apply flex flex-col gap-2; }
  .notif-row { @apply flex items-center gap-3 rounded-[var(--radius-card)] border border-border bg-surface p-4; box-shadow: var(--shadow-xs); }
  .notif-icon { @apply grid size-9 shrink-0 place-items-center rounded-xl; background: var(--surface-2); }
  .notif-info .notif-icon { background: var(--x-blue-soft); color: var(--x-blue-ink); }
  .notif-success .notif-icon { background: var(--success-soft); color: var(--success-strong); }
  .notif-warning .notif-icon { background: var(--warning-soft); color: var(--warning-strong); }
  .notif-danger .notif-icon { background: var(--danger-soft); color: var(--danger-strong); }
  .notif-text { @apply flex-1 text-sm; }
  .notif-time { @apply shrink-0 text-xs text-muted; }

  /* ============================================================
     MOTION — the one grid that matters staggers its cards in.
     Default state is fully visible (no JS / reduced-motion still works);
     app.js arms `.stagger-armed` only once a container enters view.
     ============================================================ */
  [data-stagger] > * { opacity: 1; transform: none; }
  [data-stagger].stagger-armed > * {
    animation: tf-stagger-up 480ms var(--ease-out, ease-out) both;
    animation-delay: calc(var(--stagger-i, 0) * 70ms);
  }
  @keyframes tf-stagger-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  html.reduced-motion [data-stagger].stagger-armed > * { animation: none; }
}