/* ==========================================================================
   @backoffice/ui — tokens.css
   Single source of truth for the look of ALL Backoffice module frontends.
   Structure + type + spacing: Classical design system.
   Accent: eOPUS-Lime (Farbkonzept.html) mapped onto Classical's ramp mechanics.

   Load this file FIRST in every module, before any module CSS.
   Never hard-code a hex, font or px value that exists here as a variable.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  /* — ground & ink — */
  --color-bg:      #f3f2f2;
  --color-surface: #eae9e9;
  --color-text:    #201f1d;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* — accent: eOPUS-Lime. Paragraph-size accent text uses -700 or darker. — */
  --color-accent:     #6E9A26;
  --color-accent-100: #F2F8E4;
  --color-accent-200: #E0EEC2;
  --color-accent-300: #C6DE93;
  --color-accent-400: #A9CB5E;
  --color-accent-500: #8CB43A;
  --color-accent-600: #6E9A26;
  --color-accent-700: #556F1C;
  --color-accent-800: #3D4F14;
  --color-accent-900: #2A360F;

  /* — accent 2: Holz/Warm. Deliveries, orders, warnings that are not errors. — */
  --color-accent-2:     #A8742F;
  --color-accent-2-100: #FFF4DF;
  --color-accent-2-200: #F8E6C2;
  --color-accent-2-300: #E0B978;
  --color-accent-2-400: #D2A55C;
  --color-accent-2-500: #C8954A;
  --color-accent-2-600: #A8742F;
  --color-accent-2-700: #845721;
  --color-accent-2-800: #603D17;
  --color-accent-2-900: #3F2810;

  /* — neutrals (Classical, unchanged) — */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* — semantic — */
  --color-danger: #9A2E2E;
  --color-sidebar-bg: #201f1d;
  --color-sidebar-fg: #cfccc7;
  --color-sidebar-fg-active: #ffffff;
  --color-sidebar-muted: #8a8681;
  --color-sidebar-active-bg: rgba(156, 204, 60, 0.16);

  /* — type — */
  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600;   /* semibold is the ceiling; display goes lighter */
  --font-body: "Lora", system-ui, sans-serif;

  /* — spacing (density 1.15x) — */
  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px  color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* ==========================================================================
   Domain color scales — the ONLY place workflow/appointment colors are defined.
   Every module reads these; nobody redefines a status color locally.
   ========================================================================== */
:root {
  /* Projekte: the 5 phases (Projekte/backend workflow, 14 Stufen grouped) */
  --phase-eingang:   var(--color-neutral-300);
  --phase-planung:   #9CCC3C;
  --phase-angebot:   #7BA82E;
  --phase-umsetzung: #C8954A;
  --phase-abschluss: #3A3A3A;

  /* Termine: appointment_type -> stroke + tint (Termine-API enum) */
  --appt-consultation-studio:    #9CCC3C;
  --appt-consultation-studio-bg: #F4F9E9;
  --appt-measurement-on-site:    #C8954A;
  --appt-measurement-on-site-bg: #FBF3E5;
  --appt-installation:           #7BA82E;
  --appt-installation-bg:        #F1F7E4;
  --appt-delivery:               #E0B978;
  --appt-delivery-bg:            #FCF5E8;
  --appt-service-rework:         #9A2E2E;
  --appt-service-rework-bg:      #F9EDEA;
  --appt-phone-video:            #5A5A5A;
  --appt-phone-video-bg:         #F1F0EE;
}

/* ==========================================================================
   Base — resets and the editorial type scale. Applies to every module.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; font-weight: 400; }  /* display sizes set lighter */
h2 { font-size: 32px; font-weight: 400; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
img { display: block; max-width: 100%; }

/* Figures set tabular; running prose keeps text figures. */
.tnum, .table td, .table th, th, td,
input[type="number"], .kpi-value, .figure-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: var(--color-neutral-700); }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* Photographs are matted like tipped-in plates — never full-bleed banners. */
.plate {
  filter: sepia(0.22) saturate(0.82) contrast(1.05);
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
}

/* ==========================================================================
   @backoffice/ui — components.css
   The shared primitive layer. Load AFTER tokens.css.
   These classes replace every module's local button/input/table/card CSS.
   Color is applied as stroke, not fill: no solid accent buttons, no filled cards.
   ========================================================================== */

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 34px; padding: 6px 13px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.2;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--color-text);
  cursor: pointer; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { border-color: var(--color-accent); color: var(--color-accent-700); }
.btn-primary:hover  { background: var(--color-accent-100); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-200); color: var(--color-accent-800); }

.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover  { background: color-mix(in srgb, var(--color-text) 5%, transparent); border-color: var(--color-neutral-400); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); }

.btn-ghost { border-color: transparent; color: var(--color-neutral-700); }
.btn-ghost:hover  { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-text) 9%, transparent); }

.btn-danger { border-color: var(--color-danger); color: var(--color-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }

.btn-icon  { padding: 6px; min-width: 34px; justify-content: center; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* Touch targets on the mobile Montageprotokoll are never below 44px. */
.btn-touch { min-height: 44px; padding: 11px 18px; font-size: 16px; }

/* — tags / status pills — */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; line-height: 1.4; white-space: nowrap;
  border: 1px solid var(--color-divider);
}
.tag-accent   { border-color: var(--color-accent-300);   background: var(--color-accent-100);   color: var(--color-accent-800); }
.tag-accent-2 { border-color: var(--color-accent-2-300); background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral  { border-color: var(--color-neutral-300);  background: var(--color-neutral-100);  color: var(--color-neutral-800); }
.tag-danger   { border-color: var(--color-danger); background: #F9EDEA; color: var(--color-danger); }
.tag-outline  { background: transparent; }

/* — form fields — */
.field { display: block; }
.field > label {
  display: block; margin-bottom: 4px;
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-neutral-700);
}
.input {
  display: block; width: 100%;
  min-height: 34px; padding: 6px 10px;
  font-family: var(--font-body); font-size: 14px; color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent); }
.input::placeholder { color: var(--color-neutral-500); }
textarea.input { min-height: 76px; resize: vertical; line-height: 1.55; }
select.input { appearance: none; padding-right: 28px; }

.radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14px; }
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio .dot {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1px solid var(--color-neutral-500);
}
.radio input:checked + .dot {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-bg), inset 0 0 0 9px var(--color-accent);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.seg-opt { padding: 5px 13px; font-size: 13px; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

/* — cards (bordered, never filled) — */
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  background: transparent; padding: var(--space-4);
}
.card-kicker { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); margin: 0; }
.card-title  { font-family: var(--font-heading); font-size: 20px; margin: 2px 0 0; }
.card-body   { margin: var(--space-2) 0 0; }
.card-meta   { margin: auto 0 0; padding-top: var(--space-2); font-size: 12px; color: var(--color-neutral-600); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — data tables (dense; this is where the density lives) — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; padding: 7px 11px;
  font-family: var(--font-body); font-size: 11px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-divider);
}
.table td { padding: 9px 11px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }

/* — the app shell (identical in all 11 modules) — */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: 236px; flex: none;
  display: flex; flex-direction: column;
  padding: var(--space-4) 0;
  background: var(--color-sidebar-bg); color: var(--color-sidebar-fg);
}
.app-sidebar-brand {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-heading); font-size: 22px; color: #fff;
}
.app-nav { display: flex; flex-direction: column; padding: var(--space-3) var(--space-2) 0; gap: 1px; }
.app-nav-label {
  padding: 0 var(--space-2) 6px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-sidebar-muted);
}
.app-nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-2); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-sidebar-fg);
  font-family: var(--font-body); font-size: 14px; text-align: left; cursor: pointer;
}
.app-nav-item:hover { background: rgba(255,255,255,0.07); }
.app-nav-item[aria-current="page"] { background: var(--color-sidebar-active-bg); color: var(--color-sidebar-fg-active); }
.app-nav-count { margin-left: auto; font-size: 11px; color: var(--color-sidebar-muted); font-feature-settings: 'tnum'; }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-header {
  flex: none; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.app-header-kicker { margin: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); }
.app-header-title  { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: -0.015em; }
.app-body { flex: 1; min-height: 0; overflow: auto; }

/* — responsive: tablet collapses the sidebar to icons, mobile to a bottom bar — */
@media (max-width: 1100px) {
  .app-sidebar { width: 60px; }
  .app-sidebar-brand span:not(:first-child), .app-nav-item span, .app-nav-label { display: none; }
}
@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .app-sidebar {
    order: 2; width: 100%; flex-direction: row; padding: 0;
    position: sticky; bottom: 0; z-index: 10;
  }
  .app-sidebar-brand, .app-nav-label, .app-sidebar-footer { display: none; }
  .app-nav { flex-direction: row; flex: 1; justify-content: space-around; padding: 0; }
  .app-nav-item { flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; font-size: 10px; }
  .app-header { flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
}