/*
  Spirit Web Static Export

  This file is generated by scripts/ux-export-spirit-web.sh.

  Do not edit this file by hand.
  Change the source files in src/styles instead, then run the export script again.

  Intended use:
  - server-rendered Spirit apps
  - Kotlin/Spring templates
  - static HTML apps
  - non-React apps that need the Spirit visual standard
*/

/* ==========================================================================
   Spirit themes
   Source: src/styles/themes/spirit.css
   ========================================================================== */

:root,
:root[data-theme='spirit-dawn'] {
  --text: 50 20 14;
  --muted: 100 93 88;
  --bg: 253 242 236;
  --card: 255 248 245;
  --accent: 170 55 28;
  --accent-strong: 130 40 20;
  --on-accent: 255 255 255;

  --ui-border-soft: 0 0 0 / 0.08;
  --ui-border-default: 0 0 0 / 0.16;
  --ui-border-strong: 0 0 0 / 0.22;
  --table-head-divider: 0 0 0 / 0.2;
  --table-row-divider: 0 0 0 / 0.08;
  --row-hover: 0 0 0 / 0.05;
  --icon-hover: 0 0 0 / 0.06;

  --state-error: 130 40 20;
  --state-error-bg: 170 55 28 / 0.15;
  --state-error-border: 170 55 28 / 0.3;

  --state-success: 15 80 50;
  --state-success-bg: 21 128 61 / 0.16;
  --state-success-border: 21 128 61 / 0.3;

  --state-info: 25 70 130;
  --state-info-bg: 37 99 235 / 0.16;
  --state-info-border: 37 99 235 / 0.3;

  --state-warning: 120 50 10;
  --state-warning-bg: 217 119 6 / 0.16;
  --state-warning-border: 217 119 6 / 0.35;

  --mix-light: 255 255 255;
  --mix-dark: 0 0 0;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

:root[data-theme='spirit-ember'] {
  --text: 249 245 241;
  --muted: 168 162 158;
  --bg: 28 20 17;
  --card: 41 29 25;
  --accent: 194 65 12;
  --accent-strong: 154 52 18;
  --on-accent: 255 245 240;

  --ui-border-soft: 255 255 255 / 0.08;
  --ui-border-default: 255 255 255 / 0.16;
  --ui-border-strong: 255 255 255 / 0.24;
  --table-head-divider: 255 255 255 / 0.32;
  --table-row-divider: 255 255 255 / 0.12;
  --row-hover: 255 255 255 / 0.06;
  --icon-hover: 255 255 255 / 0.06;

  --state-error: 252 165 165;
  --state-error-bg: 248 113 113 / 0.2;
  --state-error-border: 248 113 113 / 0.35;

  --state-success: 134 239 172;
  --state-success-bg: 74 222 128 / 0.2;
  --state-success-border: 74 222 128 / 0.35;

  --state-info: 147 197 253;
  --state-info-bg: 96 165 250 / 0.22;
  --state-info-border: 96 165 250 / 0.35;

  --state-warning: 253 186 116;
  --state-warning-bg: 251 146 60 / 0.2;
  --state-warning-border: 251 146 60 / 0.35;

  --mix-light: 255 255 255;
  --mix-dark: 0 0 0;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.45);
}

/* ==========================================================================
   Spirit tokens
   Source: src/styles/tokens.css
   ========================================================================== */


:root {
  --ring: var(--accent);

  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
}

/* ==========================================================================
   Base styles
   Source: src/styles/base.css
   ========================================================================== */

@layer base {
  html {
    scroll-behavior: smooth;
  }

  html,
  body,
  #root,
  .app-shell {
    background-color: rgb(var(--bg)) !important;
    color: rgb(var(--text)) !important;
  }

  body {
    font-family:
      ui-sans-serif,
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      Ubuntu,
      Cantarell,
      'Noto Sans',
      'Helvetica Neue',
      Arial,
      'Apple Color Emoji',
      'Segoe UI Emoji';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Typography: warmer + letter-spacing */
  h1 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.015em;
  }
  h2 {
    font-size: 1.375rem;
    line-height: 2rem;
    font-weight: 700;
    letter-spacing: 0.0125em;
  }
  h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  small,
  .muted,
  .text-muted {
    color: rgb(var(--muted));
  }

  /* Links met warme swing */
  a {
    color: rgb(var(--accent));
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition:
      color var(--dur-fast) var(--easing),
      text-decoration-thickness var(--dur-fast) var(--easing);
  }
  a:hover {
    color: rgb(var(--accent-strong));
    text-decoration-thickness: 2px;
  }

  ::selection {
    background-color: rgb(var(--accent) / 0.18);
    color: rgb(var(--on-accent));
  }

  /* Focus for non-TW elements */
  :focus-visible {
    outline: 2px solid rgb(var(--ring));
    outline-offset: 2px;
  }

  /* Subtle lift utility */
  .hover-lift {
    transition:
      transform var(--dur) var(--easing),
      box-shadow var(--dur) var(--easing);
    will-change: transform, box-shadow;
  }
  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  /* Soft borders for separators */
  .soft-border {
    border: 1px solid rgb(var(--ui-border-soft));
    border-radius: 0.75rem;
  }

  /* --- Text roles --- */
  .page-title {
    letter-spacing: 0.015em;
  }
  .subtitle {
    color: rgb(var(--muted));
    font-size: 0.875rem; /* ~text-sm */
    line-height: 1.25rem;
  }
  .label {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: rgb(var(--text));
  }

  /* Global table separators: strong header divider, softer body row dividers */
  table thead {
    border-bottom: 1px solid rgb(var(--table-head-divider));
  }

  table tbody tr + tr td,
  table tbody tr + tr th {
    border-top: 1px solid rgb(var(--table-row-divider));
  }

  /* Semantic utility classes for app pages */
  .text-error {
    color: rgb(var(--state-error));
  }
  .text-success {
    color: rgb(var(--state-success));
  }
  .text-warning {
    color: rgb(var(--state-warning));
  }
  .text-info {
    color: rgb(var(--state-info));
  }

  .border-default {
    border-color: rgb(var(--ui-border-default));
  }
  .border-soft-token {
    border-color: rgb(var(--ui-border-soft));
  }
  .border-warning {
    border-color: rgb(var(--state-warning-border));
  }

  .row-hover {
    transition: background-color var(--dur-fast) var(--easing);
  }
  .row-hover:hover {
    background-color: rgb(var(--row-hover));
  }
}

/* ==========================================================================
   Form styles
   Source: src/styles/forms.css
   ========================================================================== */

@layer base {
  /* ---------- Inputs (filled, not white-outline-only) ---------- */
  input,
  select,
  textarea {
    appearance: none;
    background-color: rgb(var(--card));
    color: rgb(var(--text));
    border: 1px solid rgb(var(--ui-border-default));
    border-radius: 0.75rem; /* ~rounded-xl */
    padding: 0.625rem 0.75rem; /* ~py-2.5 px-3 */
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgb(var(--mix-light) / 0.25);
    transition:
      border-color var(--dur-fast) var(--easing),
      box-shadow var(--dur-fast) var(--easing),
      background-color var(--dur-fast) var(--easing);
  }
  input::placeholder,
  textarea::placeholder {
    color: rgb(var(--muted));
  }
  input:focus,
  select:focus,
  textarea:focus {
    border-color: rgb(var(--accent));
    box-shadow: 0 0 0 3px rgba(var(--accent), 0.18);
    outline: none;
  }
  input[disabled],
  select[disabled],
  textarea[disabled] {
    background-color: rgb(var(--ui-border-soft));
    color: rgb(var(--muted));
  }

  /* --- Alerts --- */
  .alert {
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    border: 1px solid transparent;
  }
  .alert-error {
    color: rgb(var(--state-error));
    background-color: rgb(var(--state-error-bg));
    border-color: rgb(var(--state-error-border));
  }

  /* --- Buttons: disabled state --- */
  .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Writable fields: slightly separate from card bg */
  input:not([readonly]):not([disabled]),
  select:not([disabled]),
  textarea:not([readonly]):not([disabled]) {
    background-color: color-mix(in oklab, rgb(var(--card)) 85%, rgb(var(--mix-light)));
    border-color: rgb(var(--ui-border-strong));
  }

  /* Readonly fields: more subdued, clearly non-editable but not disabled */
  input[readonly],
  textarea[readonly] {
    background-color: color-mix(in oklab, rgb(var(--card)) 92%, rgb(var(--mix-dark)));
    color: rgb(var(--text));
    border-color: rgb(var(--ui-border-default));
    box-shadow: inset 0 1px 0 rgb(var(--mix-light) / 0.15);
    user-select: none;
    -webkit-user-select: none;
  }

  /* Readonly display fields: styled like inputs but not actual inputs (prevents password managers) */
  .readonly-display {
    display: block;
    background-color: color-mix(in oklab, rgb(var(--card)) 92%, rgb(var(--mix-dark)));
    color: rgb(var(--text));
    border: 1px solid rgb(var(--ui-border-default));
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgb(var(--mix-light) / 0.15);
    user-select: none;
    -webkit-user-select: none;
    word-break: break-word;
  }

  /* Optional softer variant used by your sale amount field */
  .input--soft {
    background-color: color-mix(in oklab, rgb(var(--card)) 78%, rgb(var(--mix-light))) !important;
    border-color: rgb(var(--ui-border-strong)) !important;
  }

  /* ---------- Checkbox: input-like bg + SVG check ---------- */
  input[type='checkbox'].checkbox {
    appearance: none;
    -webkit-appearance: none;

    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;

    /* SAME background as enabled inputs */
    background-color: color-mix(in oklab, rgb(var(--card)) 85%, rgb(var(--mix-light)));
    border: 1.5px solid rgb(var(--ui-border-strong));

    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }

  input[type='checkbox'].checkbox:checked {
    /* background stays identical */
    background-color: color-mix(in oklab, rgb(var(--card)) 85%, rgb(var(--mix-light)));

    /* white SVG check */
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M20 6L9 17l-5-5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
  }

  input[type='checkbox'].checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent), 0.25);
  }

  input[type='checkbox'].checkbox:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

/* ==========================================================================
   Role styles
   Source: src/styles/roles.css
   ========================================================================== */

@layer base {
  /* Card base */
  .card {
    background-color: rgb(var(--card));
    border-radius: 1rem;
    border: 1px solid rgb(var(--ui-border-soft));
    box-shadow: var(--shadow-sm);
  }
  /* --- Text roles (centrale stijl) --- */
  .meta {
    color: rgb(var(--muted));
    font-size: 0.875rem; /* ~text-sm */
    line-height: 1.25rem;
    letter-spacing: 0.005em;
    font-weight: 600;
  }
  .caption {
    color: rgb(var(--muted));
    font-size: 0.75rem; /* ~text-xs */
    line-height: 1rem;
    letter-spacing: 0.005em;
  }
  .emph {
    font-weight: 600;
  }

  /* --- Section title as role (voor h2 varianten) --- */
  .section-title {
    font-size: 1.25rem; /* ~text-xl */
    line-height: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.0125em;
  }

  /* Lijst en rijen (typografie via bestaande roles) */
  .list {
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--ui-border-soft));
    overflow: hidden;
    background-color: rgb(var(--card));
  }
  .row {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.625rem; /* ~py-2 px-2.5 */
    display: block;
    transition: background-color var(--dur-fast) var(--easing);
  }
  .row:hover {
    background-color: rgb(var(--row-hover));
  }
  .row:focus-visible {
    outline: 2px solid rgb(var(--ring));
    outline-offset: -2px; /* binnen de list-omlijsting */
  }

  /* Header container + border */
  .app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgb(var(--card));
    border-bottom: 1px solid rgb(var(--ui-border-soft));
    backdrop-filter: saturate(120%) blur(4px);
    -webkit-backdrop-filter: saturate(120%) blur(4px);
  }

  /* Brand title (warmer, iets gespatieerd) */
  .brand-title {
    font-size: 1.25rem; /* ~text-xl */
    line-height: 1.75rem;
    font-weight: 800;
    letter-spacing: 0.04em; /* inter-letter spacing */
  }

  /* Greeting text role (neutraal) */
  .greeting {
    font-size: 0.875rem; /* ~text-sm */
    line-height: 1.25rem;
  }

  /* Brand accent stripe (geen gradient) */
  .brand-stripe {
    height: 3px;
    background-color: rgb(var(--accent));
  }

  /* Small button size variant (hergebruikt je .btn stijlen) */
  .btn-sm {
    padding: 0.375rem 0.625rem; /* ~py-1.5 px-2.5 */
    font-weight: 600;
    font-size: 0.875rem; /* ~text-sm */
  }


  /* Footer container (stijl centraal, geen inline kleuren in component) */
  .app-footer {
    background-color: rgb(var(--card));
    border-top: 1px solid rgb(var(--ui-border-soft));
  }

  /* Tekstrol voor footer */
  .footer-meta {
    font-size: 0.75rem; /* ~text-xs */
    line-height: 1rem;
    color: rgb(var(--muted));
    letter-spacing: 0.005em;
  }
}

/* ==========================================================================
   Layout styles
   Source: src/styles/layout.css
   ========================================================================== */

/* Spirit Solutions — warm components (buttons, chips, sections) */

@layer components {
  /* App shell grid */
  .app-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* Container */
  .container-narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem; /* = px-4 */
    max-width: 48rem; /* ~lg:max-w-3xl */
  }
  @media (min-width: 640px) {
    .container-narrow {
      max-width: 32rem;
    }
  } /* sm */
  @media (min-width: 768px) {
    .container-narrow {
      max-width: 42rem;
    }
  } /* md */
  @media (min-width: 1024px) {
    .container-narrow {
      max-width: 48rem;
    }
  } /* lg */

  /* Buttons — NOT black; warm filled defaults */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem; /* ~rounded-xl */
    padding: 0.625rem 1rem; /* ~py-2.5 px-4 */
    font-weight: 700;
    letter-spacing: 0.01em;
    transition:
      background-color var(--dur-fast) var(--easing),
      color var(--dur-fast) var(--easing),
      box-shadow var(--dur-fast) var(--easing),
      transform var(--dur-fast) var(--easing);
    will-change: transform, box-shadow;
    border: 1px solid transparent;
  }
  .btn:focus-visible {
    outline: 2px solid rgb(var(--ring));
    outline-offset: 2px;
  }

  .btn-primary {
    color: rgb(var(--on-accent));
    background-color: rgb(var(--accent));
    border-color: rgb(var(--accent-strong));
    box-shadow: 0 2px 8px -2px rgb(var(--accent) / 0.4);
  }
  .btn-primary:hover {
    background-color: rgb(var(--accent-strong));
    border-color: rgb(var(--accent-strong));
    box-shadow: 0 4px 12px -2px rgb(var(--accent-strong) / 0.5);
    transform: translateY(-1px);
  }

  .btn-ghost {
    color: rgb(var(--text));
    background-color: transparent;
    border-color: rgb(var(--ui-border-strong));
  }
  .btn-ghost:hover {
    background-color: rgb(var(--row-hover));
    border-color: rgb(var(--text) / 0.25);
  }

  .btn-outline {
    color: rgb(var(--accent-strong));
    background-color: transparent;
    border-color: rgb(var(--accent));
  }
  .btn-outline:hover {
    color: rgb(var(--on-accent));
    background-color: rgb(var(--accent));
    border-color: rgb(var(--accent));
  }

  /* Pagination button variant - visible borders like header buttons */
  .btn-pagination {
    color: rgb(var(--text));
    background-color: rgb(var(--card));
    border-color: rgb(var(--text) / 0.35);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
  }
  .btn-pagination:hover:not(:disabled) {
    background-color: rgb(var(--accent));
    color: rgb(var(--on-accent));
    border-color: rgb(var(--accent));
    transform: translateY(-1px);
  }
  .btn-pagination:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    color: rgb(var(--muted));
    background-color: rgb(var(--card));
    border-color: rgb(var(--ui-border-soft));
  }

  /* Chips */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1rem; /* ~text-sm */
    color: rgb(var(--accent-strong));
    background-color: rgb(var(--accent) / 0.12);
    border: 1px solid rgb(var(--accent) / 0.25);
  }

  /* Icon-only buttons used in page headers */
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color var(--dur-fast) var(--easing);
  }
  .icon-btn:hover {
    background-color: rgb(var(--icon-hover));
  }
  .icon-btn:focus-visible {
    outline: 2px solid rgb(var(--ring));
    outline-offset: 2px;
  }

  /* Voucher status badges */
  .badge {
    display: inline-block;
    min-width: 5rem;
    text-align: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
  }
  .badge-info {
    color: rgb(var(--state-info));
    background-color: rgb(var(--state-info-bg));
    border: 1px solid rgb(var(--state-info-border));
  }
  .badge-success {
    color: rgb(var(--state-success));
    background-color: rgb(var(--state-success-bg));
    border: 1px solid rgb(var(--state-success-border));
  }
  .badge-muted {
    color: rgb(var(--muted));
    background-color: rgb(var(--ui-border-soft));
    border: 1px solid rgb(var(--ui-border-default));
  }
  .badge-error {
    color: rgb(var(--state-error));
    background-color: rgb(var(--state-error-bg));
    border: 1px solid rgb(var(--state-error-border));
  }

  /* Stack utility */
  .stack > * + * {
    margin-top: 0.5rem;
  } /* ~space-y-2 */

  /* SR-only */
  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
  }
}