/* ========================================
   V2 DESIGN TOKENS (Design Handbook V2)
   Flat / sharp: 6px radius, visible borders, no card elevation
   ======================================== */

:root {
  color-scheme: light;
  /* Brand & accent colors */
  --color-primary: #741C47;
  --color-primary-soft: #8F2B5C;
  --color-primary-muted: rgba(116, 28, 71, 0.1);
  /* Primary som tekst/ikon på egen flate (btn-text, lenker). Løftes i dark for kontrast. */
  --color-primary-text: var(--color-primary);
  --color-search-highlight: color-mix(in srgb, var(--color-primary) 80%, transparent);
  --color-secondary: #5856D6;
  --color-secondary-muted: rgba(88, 86, 214, 0.12);
  --color-positive: #34C759;
  --color-warning: #FF9500;
  --color-danger: #FF3B30;
  --color-info: #007AFF;

  /* Pipeline status pills (kunde + tilbud). Text = solid; fill = 20% of the same. Handbook §11. */
  --status-new-lead: #6366F1;
  --status-inspection-requested: #F59E0B;
  --status-inspection-booked: #3B82F6;
  --status-quote-sent: #A855F7;
  --status-quote-accepted: #22C55E;
  --status-job-completed: #10B981;
  --status-no-reply: #9CA3AF;
  --status-not-interested: #EF4444;
  --status-lost: #B91C1C;
  --status-quote-viewed: #F97316;

  /* iOS palette bridge */
  --color-owner: #A64D79;
  --color-owner-muted: rgba(166, 77, 121, 0.18);
  --color-owner-muted-strong: rgba(166, 77, 121, 0.32);
  --color-user-accent: #3B82F6;
  --color-user-muted: rgba(59, 130, 246, 0.15);
  --color-user-muted-strong: rgba(59, 130, 246, 0.25);
  --color-invite-success: #22C55E;
  --color-invite-muted: rgba(34, 197, 94, 0.18);
  --color-neutral-500: #6B7280;

  /* Surfaces — Apple grouped as global standard (handbook §3 / §20.2)
     1. --color-bg: page canvas (gray)
     2. --color-surface: standard cards / glass-card (white)
     3. --color-surface-muted: nested wells inside cards (gray)
     4. --color-bg-alt: elevated white cards/items on the page (client/quote cards)
     5. --color-grouped-card / --color-grouped-nested: same as surface / muted (aliases)
     6. --color-line-element / --color-line-post / --color-line-resource: quote + kalkyle tree */
  --color-bg: #F0F0F0;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-raised: rgba(255, 255, 255, 0.95);
  --color-surface-muted: #F0F0F0;
  --color-grouped-card: #FFFFFF;
  --color-grouped-nested: #F0F0F0;
  /* One step lighter than nested. Subtasks on a white card. Light ≈ #F5F5F5. */
  --color-grouped-nested-sub: color-mix(in srgb, var(--color-grouped-card) 36%, var(--color-grouped-nested));
  /* Quote / kalkyle line tree: gray wells one step darker than page so they
     read on `--color-bg` and on a white card. Same family as nested / on-page wells. */
  --color-line-element: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
  --color-line-post: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
  --color-line-resource: var(--color-grouped-card);
  /* Secondary button fill follows parent surface (handbook §8 / §22).
     On gray page (--color-bg) and gray wells: --color-surface (white / dark card),
     same as .segmented-control--on-page. Do not use nested gray here (gray-on-gray).
     On white cards/modals: --color-btn-secondary-on-surface (nested well). */
  --color-btn-secondary: var(--color-surface);
  --color-btn-secondary-hover: color-mix(in srgb, var(--color-text) 6%, var(--color-surface));
  --color-btn-secondary-on-surface: var(--color-grouped-nested);
  --color-btn-secondary-on-surface-hover: color-mix(in srgb, var(--color-text) 4%, var(--color-grouped-nested));
  --btn-secondary-bg: var(--color-btn-secondary);
  --btn-secondary-bg-hover: var(--color-btn-secondary-hover);
  /* TEST: kantlinjer av — sett tilbake til color-mix … 16%/22% for å gjenopprette */
  --color-border: transparent;
  --color-border-strong: transparent;

  /* Text */
  --color-text: #1C1C1E;
  --color-text-secondary: rgba(28, 28, 30, 0.7);
  --color-text-tertiary: rgba(28, 28, 30, 0.45);
  --color-text-inverse: #FFFFFF;
  /* Toggle idle track — tertiary 28% over nested so it reads on a nested well. */
  --color-toggle-track-idle: color-mix(in srgb, var(--color-text-tertiary) 28%, var(--color-grouped-nested));
  --color-text-white: #FFFFFF;
  /* Public company mini-site accent. Preset = --color-*; custom = hex from palette.css.
     Visitor chrome lives in pages_v2/company-site, not app tokens. */
  --site-accent: var(--color-primary);
  --site-accent-hover: var(--color-primary-soft);
  --site-accent-text: #FFFFFF;
  /* Scrim on photos (caption / remove). Black in both themes so inverse text stays readable. */
  --color-photo-scrim: #000000;

  /* Typography */
  --font-family-base: 'Poppins', Arial, sans-serif;
  --font-family-brand: 'Playfair Display', Georgia, serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-display: clamp(1.5rem, 2.8vw, 1.75rem);
  --letter-spacing-tight: -0.01em;
  /* Dropdown / select chevron — Lucide glyph is optically small in the viewBox */
  --icon-size-chevron: 0.875rem;

  /* Spacing (4pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Page chrome — shared by .app-main + page-header controls (V2) */
  --page-padding: var(--space-5); /* equal inset on all sides of .app-main */
  --page-header-gap: var(--space-2); /* smart-search ↔ Opprett ny / header-actions */
  --page-header-control-height: 34px;
  /* Page empty icon — native WebV2EmptyState 28. Handbook §14. */
  --empty-state-icon-size: 28px;
  /* Comment composer: closed = one text line + padding. Open = taller well. Handbook §10. */
  --comment-composer-closed-min-height: calc(var(--space-2) * 2 + var(--font-size-sm) * 1.5);
  --comment-composer-open-min-height: calc(5rem + var(--font-size-sm) * 1.5);
  --comment-composer-duration: 280ms;
  --comment-composer-fade: 160ms;
  --comment-composer-stagger: 70ms;
  --comment-composer-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --comment-composer-ease-close: cubic-bezier(1, 0, 0.68, 0.28);
  /* Native phone page-level primary (iOS/Android Regular). Web trinn A stays 34.
     In-card `.btn-inline` is unchanged. Handbook §8 / §22. */
  --native-primary-control-height: 40px;
  /* Native phone type + icons. Web compact scale (xs 12 / sm 14 / icon 14) stays.
     Inline `.btn-inline` stays 12. Handbook §4 / §22. */
  --native-font-size-caption: 0.875rem; /* 14px — meta / caption */
  --native-font-size-body: 1rem;        /* 16px — body, dropdown, Regular CTA */
  /* Native quote edit: description/terms empty well = two subtitle lines (16 * 1.375 * 2). */
  --quote-text-well-min-height: 2.75rem;
  --native-font-size-section: 1.125rem; /* 18px — section titles */
  --native-font-size-tab-bar: 0.625rem; /* 10px — tab bar labels, one line. Matches iOS UITabBar */
  --native-icon-size: 1.25rem;          /* 20px — Lucide default (rows, dropdown, header cluster) */
  --native-icon-size-control: 1rem;     /* 16px — Regular primary glyph + chevron */
  /* In-page map marker. Handbook §9 media-frame. Primary circle, white map-pin. */
  --map-marker-width: var(--space-8);   /* 32px */
  --map-marker-height: var(--space-8);
  /* Filvelger selected tile — handbook §10. Same 3px on web / iOS / Android. */
  --import-image-tile-selected-border: 3px;
  /* Primary circle behind selected-tile check. 28px = 20px glyph + 4px inset each side. */
  --import-image-tile-check-plate: 1.75rem;
  /* Large mobile sheets: 90% of viewport. Host + island stay visible.
     Handbook §7 / §22. Native: PresentationDetent.webV2Large / HandbookModalBottomSheet. */
  --native-sheet-max-fraction: 0.90;
  /* iOS may close a floating-card inset up to this. Must stay under the 10% host
     stripe (1 - fraction). Closing that stripe loops layout on every large sheet. */
  --native-sheet-pin-gap-max: 20px;
  /* Public auth / customer CTA — login, register, checkout pay (§8 .btn-cta) */
  --btn-cta-min-height: 52px;
  /* Hover-hint layer (body portal) — above assistant panel 13000, below nothing in app chrome */
  --z-hint-layer: 14000;
  /* Floating helper panel (varebibliotek / Nettside-editor). Below assistant 12100. Handbook §7 */
  --z-float-panel: 1400;
  /* Mobile app sidebar overlay. Above float panel so Meny is not hidden behind /site editor. */
  --z-sidebar-mobile-backdrop: 1500;
  --z-sidebar-mobile: 1600;
  /* Compact RGB wheel in Nettside-editor custom palette */
  --site-color-wheel-size: 7.5rem;
  /* Nettside-editor float panel — wider than varebibliotek so the tree + cover fit and the scrollbar sits at the page edge */
  --site-editor-panel-width: 32rem;
  --site-editor-panel-min-width: 28rem;
  /* Date picker / single-select popovers (body portal) — above project-modals (2000), below toasts (9999) */
  --z-date-picker: 2200;
  --z-select-panel: 2200;
  /* Calendar / staffing toolbars — «I dag», forrige/neste, Uke/Måned/Kalender (Handbook §8) */
  --calendar-toolbar-control-height: 36px;
  /* Smart search omnibox — right cluster next to header-actions */
  --page-header-search-min-width: 200px;
  --page-header-search-max-width: 300px;
  /* Dropdown wider than the field (previous omnibox width) */
  --page-header-search-dropdown-width: 420px;
  --page-header-search-dropdown-max-width: 480px;
  /* Segmented / page tabs — Handbook §8 Faner-standard. Track 34px; segment fills inner after 2px pad + 1px border. */
  --segmented-track-padding: 2px;
  --segmented-gap: var(--space-1);
  --segmented-btn-padding-x: 14px;
  --segmented-segment-min-height: calc(var(--page-header-control-height) - 2 * var(--segmented-track-padding) - 2px);
  /* Listeside controls-panel: søk, select, segmented, toggle — samme chrome */
  --controls-panel-padding: var(--space-4);
  --controls-panel-gap: var(--space-3);
  --controls-panel-control-height: 40px;
  /* Stack between equal cards / sections (Handbook §5) */
  --stack-gap: var(--space-3);
  /* Catalog / extras cards (Markedsplass). Page CSS uses this for grid tracks. */
  --catalog-card-min: 16.5rem;
  /* Title → content inside glass-card (Handbook §4 / §9) */
  --section-header-gap: var(--space-4);
  /* Popup modal chrome — Handbook §7. Header → body is tighter than
     section-header-gap: the title bar already separates from content.
     Use: padding: var(--modal-header-padding-top) var(--modal-header-padding-x) var(--modal-header-padding-bottom);
          padding: var(--modal-body-padding-top) var(--modal-body-padding-x) var(--modal-body-padding-bottom); */
  --modal-header-padding-x: var(--space-5);
  --modal-header-padding-top: var(--space-3);
  --modal-header-padding-bottom: var(--space-2);
  --modal-body-padding-x: var(--space-5);
  --modal-body-padding-top: var(--space-2);
  --modal-body-padding-bottom: var(--space-4);
  /* Gap under a sheet primary action (Ferdig, Velg, Fullfør, Planlegg arbeid).
     Same on every sheet. Not an extra safe-area band. Fasit: Planlegg arbeid. */
  --sheet-footer-padding-bottom: var(--modal-body-padding-bottom);
  /* Full-width quantity stepper in modal wells (fasit: kasse seter) */
  --modal-stepper-size: 48px;
  --controls-panel-search-flex-basis: 240px;
  --controls-panel-search-max-width: 300px;
  /* Compact filter select (toolbar / panel header) — Handbook §10 .calendar-multi--filter */
  --select-filter-min-width: 9rem;
  --select-filter-type-min-width: 11rem;
  --select-filter-max-width: 14rem;
  --select-filter-panel-min-width: 12rem;
  --select-filter-control-height: 36px;
  --select-panel-max-height: 18rem; /* 288px — portaled select / native dropdown */
  /* Date picker — Handbook §8 / §10. Full calendar; overlay (neste kontakt). */
  --date-picker-width: 280px;
  --date-picker-gap: 6px;
  --date-picker-edge-pad: 8px;
  --date-picker-day-size: 28px;
  --date-picker-nav-size: 28px;
  --time-picker-width: 220px;
  /* Compact drum — match native SpinnerTimePicker (3 rows × 32px). Handbook §10 / §22. */
  --time-picker-item-height: 32px;
  --time-picker-wheel-height: 96px;
  /* Toggle-switch — Handbook §10 `.toggle-switch`. Square, not iOS-pill. */
  --toggle-track-width: 51px;
  --toggle-track-height: 31px;
  --toggle-thumb-size: 27px;
  --toggle-thumb-inset: 2px;
  --toggle-thumb-travel: 20px;
  /* Spreadsheet chrome (kalkyle + CSV import). Handbook §12.
     Hairline is a named line color (same as --color-line-element solids),
     not 10% --color-text / color-mix of text. */
  --spreadsheet-cell-height: 30px;
  --spreadsheet-header-height: 28px;
  --spreadsheet-col-min-width: 8rem;
  --spreadsheet-col-num-min-width: 5.5rem;
  --spreadsheet-min-height: 18rem;
  --spreadsheet-hairline: #DFDFDF;
  --import-spreadsheet-modal-max-width: 72rem;
  --import-spreadsheet-modal-max-height: 56rem;
  /* Listebokser: innrykk så innhold ikke ligger flush mot boks-kanten */
  --list-box-padding-x: var(--space-5);
  --list-box-padding-bottom: var(--space-5);
  /* Native + smal web: avstand mellom ikon-meta på entity-kort (kunde, adresse, beløp). */
  --list-meta-gap: var(--space-5);
  /* Sidebar chrome — Handbook §13. Same nav-button padding in rail, flyout and open
     so icons stay put (14px left centers the 20px icon in the 72px rail). */
  --sidebar-width: 240px;
  --sidebar-rail-width: 72px;
  --sidebar-nav-icon-inset: 14px;
  --sidebar-nav-button-padding: 6px 8px 6px var(--sidebar-nav-icon-inset);
  --sidebar-rail-button-padding: var(--sidebar-nav-button-padding);
  /* Scrollbar — fasit: dashboard «Nylig aktivitet» (.attention-list). Thin track + nested-gray thumb. */
  --scrollbar-size: 6px;
  --scrollbar-thumb-inset: 2px;
  --scrollbar-thumb: color-mix(in srgb, var(--color-text) 18%, var(--color-grouped-nested));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 30%, var(--color-grouped-nested));
  --scrollbar-track: transparent;

  /* Radii — Design Handbook V2 (sharp / dense) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  /* Full-width mobile sheets (native iOS/Android + web bottom-sheet). 8px is
     invisible on phone width; 16 is the mobile standard. Not iOS ~38. In-page
     cards/buttons stay --radius-sm. Handbook §6 / §15 / §22. */
  --radius-sheet: 16px;
  --radius-pill: 999px;
  --blur-soft: 20px;

  /* Elevation — slightly stronger card lift (borders off) */
  --shadow-soft: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-card: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-border: none;
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 28, 30, 0.1);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.14);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-medium: 250ms ease;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Modal enter/exit — canonical for all dialogs (DESIGN_HANDBOOK_V2 §7 / §16) */
  --modal-duration: 250ms;
  --modal-duration-dialog: 350ms;
  --modal-ease-backdrop: ease;
  --modal-ease-dialog: var(--transition-spring);
  --modal-dialog-offset-y: 12px;
  --modal-dialog-scale-from: 0.96;

  /* In-place task complete: check pop, then hold, then collapse — DESIGN_HANDBOOK_V2 §12 */
  --task-complete-pop: 400ms;
  --task-complete-collapse: 280ms;
  --task-complete-collapse-delay: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --modal-duration: 1ms;
    --modal-duration-dialog: 1ms;
    --task-complete-pop: 1ms;
    --task-complete-collapse: 1ms;
    --task-complete-collapse-delay: 0ms;
    --comment-composer-duration: 1ms;
    --comment-composer-fade: 1ms;
    --comment-composer-stagger: 1ms;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Slightly lifted page canvas so card elevation (rim + shadow) reads clearly */
  --color-bg: #121212;
  --color-bg-alt: #1C1C1E;
  --color-surface: #1C1C1E;
  --color-surface-raised: rgba(28, 28, 30, 0.95);
  --color-surface-muted: #2C2C2E;
  --color-grouped-card: #1C1C1E;
  --color-grouped-nested: #2C2C2E;
  /* Lighter than nested in dark (text 6% over nested, ≈ #38383A). */
  --color-grouped-nested-sub: color-mix(in srgb, var(--color-text) 6%, var(--color-grouped-nested));
  --color-line-element: color-mix(in srgb, var(--color-text) 10%, var(--color-grouped-nested));
  --color-line-post: color-mix(in srgb, var(--color-text) 5%, var(--color-grouped-nested));
  --color-line-resource: var(--color-grouped-card);
  --color-btn-secondary-on-surface-hover: color-mix(in srgb, var(--color-text) 8%, var(--color-grouped-nested));
  /* TEST: kantlinjer av */
  --color-border: transparent;
  --color-border-strong: transparent;

  --color-text: #F5F5F7;
  --color-text-secondary: rgba(245, 245, 247, 0.75);
  --color-text-tertiary: rgba(245, 245, 247, 0.5);
  --color-text-white: #FFFFFF;

  /* #741C47 gir ~1.5:1 mot mørke flater; løftet rosetone gir 4.5:1+ for tekst */
  --color-primary-text: #C2688F;

  --color-owner-muted: rgba(166, 77, 121, 0.35);
  --color-owner-muted-strong: rgba(166, 77, 121, 0.5);
  --color-user-muted: rgba(59, 130, 246, 0.25);
  --color-user-muted-strong: rgba(59, 130, 246, 0.45);
  --color-invite-muted: rgba(34, 197, 94, 0.25);

  /* Scrollbar on dark surfaces — readable on #1C1C1E panels */
  --scrollbar-thumb: color-mix(in srgb, var(--color-text) 28%, var(--color-surface-muted));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--color-text) 42%, var(--color-surface-muted));
  --spreadsheet-hairline: #3C3C3E;

  /* Dark elevation — same geometry as light; slightly stronger for dark surfaces */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}