/* ==========================================================================
   Print Production Tool — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for every visual value of the tool (app, login,
   maintenance page). Loaded before pt-theme.css / pt-login.css.

   Theme mechanics (unchanged behaviour, see header.php bootstrap script):
     - no stored choice      → follows the OS (color-scheme: light dark)
     - data-theme="light"    → forced light
     - data-theme="dark"     → forced dark
   Every colour token is defined ONCE as light-dark(<light>, <dark>), so both
   themes are designed side by side and resolve automatically via the
   inherited `color-scheme`. Surfaces with a fixed tonality can opt out with
   data-surface="dark|light" — all tokens below flip inside that subtree.

   Rule: components never use raw colour values — only these tokens.
   See docs/design-system.md.
   ========================================================================== */

/* --- Font-Face (Poppins, self-hosted) ------------------------------------- */

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Theme switch ---------------------------------------------------------- */

:root                     { color-scheme: light dark; }
html[data-theme="light"]  { color-scheme: light; }
html[data-theme="dark"]   { color-scheme: dark; }
[data-surface="light"]    { color-scheme: light; }
[data-surface="dark"]     { color-scheme: dark; }

/* --- Tokens ---------------------------------------------------------------- */

:root {
	/* Layers — light: chrome (sidebar + topbar) subtly tinted, working area
	   white; dark: working area darkest, chrome and surfaces step up. */
	--c-bg:            light-dark(#ffffff, #0e1014);   /* working area (content) */
	--c-chrome:        light-dark(#f5f6f8, #13161b);   /* navigation chrome: sidebar, topbar */
	--c-surface:       light-dark(#ffffff, #171a20);   /* cards, tables, panels */
	--c-surface-2:     light-dark(#f4f5f8, #1f232a);   /* table header, secondary fills */
	--c-surface-3:     light-dark(#e9ebef, #2a2f37);   /* hover fills on secondary surfaces */
	--c-elevated:      light-dark(#ffffff, #1d2128);   /* popovers, modals (opaque fallback) */

	/* Controls (inputs, selects, search, filter pills) — on the white working
	   area they carry a faint fill and a clearer outline to stay recognisable. */
	--c-control-bg:     light-dark(#f8f9fb, #171a20);
	--c-control-border: light-dark(#d9dde4, #2a2f38);

	/* Materials (translucent layers; blur only where content moves beneath) */
	--mat-bar:         light-dark(rgba(245, 246, 248, .84), rgba(23, 26, 32, .74)); /* topbar = chrome */
	--mat-popover:     light-dark(rgba(255, 255, 255, .86), rgba(32, 36, 44, .86));
	--mat-sheet:       light-dark(rgba(255, 255, 255, .90), rgba(29, 33, 40, .90));
	--mat-card:        light-dark(rgba(255, 255, 255, .80), rgba(23, 26, 32, .76));
	--mat-highlight:   light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .06));
	--mat-scrim:       light-dark(rgba(15, 18, 24, .32), rgba(0, 0, 0, .55));
	--mat-poster-scrim: light-dark(rgba(245, 246, 248, .18), rgba(8, 10, 14, .45));
	--mat-blur:        blur(20px) saturate(180%);
	--mat-blur-soft:   blur(6px);

	/* Lines */
	--c-border:        light-dark(#e1e4e9, #2a2f38);
	--c-border-strong: light-dark(#c9ced7, #3b414c);
	--c-separator:     light-dark(rgba(15, 23, 42, .08), rgba(255, 255, 255, .07));

	/* Text */
	--c-text:          light-dark(#111827, #e8ebf0);
	--c-text-muted:    light-dark(#5b6270, #9ba3b1);
	--c-text-subtle:   light-dark(#868d99, #737b88);
	--c-muted:         var(--c-text-muted); /* legacy alias */
	--c-muted-bg:      var(--c-surface-2);  /* legacy alias */

	/* Accent (brand-neutral blue — candidate for a Design setting later) */
	--c-primary:       light-dark(#1d4ed8, #5ea5f3);
	--c-primary-hover: light-dark(#1e40af, #84bbf6);
	--c-primary-fill:  light-dark(#1d4ed8, #2c6fd8);   /* filled controls */
	--c-primary-fill-hover: light-dark(#1e40af, #3a7fe6);
	--c-on-primary:    #ffffff;
	--c-primary-light: light-dark(#e6edfd, #172a47);   /* tinted selected bg */
	--c-primary-text:  light-dark(#1e3a8a, #9cc7f8);   /* text on tinted bg */
	--c-accent:        var(--c-primary);

	/* Interaction fills */
	--c-fill-hover:    light-dark(rgba(15, 23, 42, .05), rgba(255, 255, 255, .06));
	--c-fill-active:   light-dark(rgba(15, 23, 42, .09), rgba(255, 255, 255, .10));
	--c-fill-selected: light-dark(rgba(29, 78, 216, .10), rgba(94, 165, 243, .16));
	--c-highlight-on-fill: rgba(255, 255, 255, .18); /* top edge on filled buttons */

	/* Segmented control */
	--c-segment-track: light-dark(#eef0f3, #1f232a);
	--c-segment-thumb: light-dark(#ffffff, #353b46);

	/* Media viewing (lightbox) — intentionally dark in both themes */
	--c-media-scrim:         rgba(8, 10, 14, .86);
	--c-on-media:            #ffffff;
	--c-on-media-muted:      rgba(255, 255, 255, .70);
	--c-media-control:       rgba(255, 255, 255, .12);
	--c-media-control-hover: rgba(255, 255, 255, .22);
	--c-paper:               #ffffff; /* PDF preview background */

	/* Shell */
	--c-header-bg:     var(--mat-bar);
	--c-header-text:   var(--c-text);
	--c-nav-bg:        var(--c-chrome);
	--c-nav-border:    var(--c-separator);
	--c-nav-item:      light-dark(#374151, #c3c9d3);
	--c-nav-item-hover:  var(--c-fill-hover);
	--c-nav-item-active: var(--c-fill-selected);
	--c-nav-active-text: var(--c-primary);
	--c-nav-label:     var(--c-text-subtle);

	/* Semantic tones: text/icon, tinted background, border */
	--c-success:        light-dark(#11723a, #5ccf88);
	--c-success-bg:     light-dark(#e3f6ea, #10291a);
	--c-success-border: light-dark(#b4e4c4, #1d4a2c);
	--c-danger:         light-dark(#c81e1e, #f47c76);
	--c-danger-bg:      light-dark(#fdeaea, #331617);
	--c-danger-border:  light-dark(#f5c0c0, #5a2526);
	--c-danger-fill:    light-dark(#dc2626, #d63b35);
	--c-warning:        light-dark(#a3530a, #f1bb45);
	--c-warning-bg:     light-dark(#fff4dc, #2d2410);
	--c-warning-border: light-dark(#f2d48d, #4e3d14);
	--c-info:           var(--c-primary);
	--c-info-bg:        light-dark(#e6edfd, #14243c);
	--c-info-border:    light-dark(#bccdf7, #213b62);
	--c-neutral:        light-dark(#4b5260, #b3bac6);
	--c-neutral-bg:     light-dark(#f0f1f4, #252930);
	--c-neutral-border: light-dark(#dcdfe5, #363b45);

	/* Status badges (semantics of the order workflow — hues must not change) */
	--badge-entwurf-bg:      var(--c-neutral-bg);
	--badge-entwurf-fg:      var(--c-neutral);
	--badge-entwurf-border:  var(--c-neutral-border);
	--badge-eingereicht-bg:     var(--c-warning-bg);
	--badge-eingereicht-fg:     var(--c-warning);
	--badge-eingereicht-border: var(--c-warning-border);
	--badge-druckdaten-bg:      var(--c-info-bg);
	--badge-druckdaten-fg:      var(--c-primary);
	--badge-druckdaten-border:  var(--c-info-border);
	--badge-bestellt-bg:     light-dark(#f0ebfe, #251b3e);
	--badge-bestellt-fg:     light-dark(#6d28d9, #c3aaf8);
	--badge-bestellt-border: light-dark(#d8cbfb, #3d2c66);
	--badge-lagernd-bg:      light-dark(#ddf6f1, #0f2a28);
	--badge-lagernd-fg:      light-dark(#0f766e, #6ad6c6);
	--badge-lagernd-border:  light-dark(#a9e8dc, #1c4642);
	--badge-geliefert-bg:     var(--c-success-bg);
	--badge-geliefert-fg:     var(--c-success);
	--badge-geliefert-border: var(--c-success-border);
	--badge-abgelehnt-bg:     var(--c-danger-bg);
	--badge-abgelehnt-fg:     var(--c-danger);
	--badge-abgelehnt-border: var(--c-danger-border);
	--badge-offen-bg:     light-dark(#f7f8fa, #1c1f25);
	--badge-offen-fg:     light-dark(#6b7280, #98a0ad);
	--badge-offen-border: light-dark(#e1e4e9, #2f343d);

	/* Focus */
	--focus-ring-color: light-dark(rgba(29, 78, 216, .38), rgba(94, 165, 243, .50));
	--focus-ring:       0 0 0 3px var(--focus-ring-color);

	/* Elevation (shadow colour deepens in dark) */
	--shadow-1: 0 1px 2px light-dark(rgba(15, 23, 42, .05), rgba(0, 0, 0, .30));
	--shadow-2: 0 2px 6px light-dark(rgba(15, 23, 42, .06), rgba(0, 0, 0, .30)),
	            0 10px 28px light-dark(rgba(15, 23, 42, .12), rgba(0, 0, 0, .45));
	--shadow-3: 0 4px 12px light-dark(rgba(15, 23, 42, .08), rgba(0, 0, 0, .35)),
	            0 28px 70px light-dark(rgba(15, 23, 42, .20), rgba(0, 0, 0, .60));
	--shadow-highlight: inset 0 1px 0 var(--mat-highlight);
	--shadow-sticky: 0 1px 0 var(--c-border), 0 6px 10px -6px light-dark(rgba(15, 23, 42, .16), rgba(0, 0, 0, .55)); /* docked table header */
	/* legacy aliases */
	--shadow-xs: var(--shadow-1);
	--shadow-sm: var(--shadow-1);
	--shadow-md: var(--shadow-2);
	--shadow-lg: var(--shadow-3);

	/* Radius (concentric: inner = outer − padding) */
	--r-2xs:  4px;
	--r-xs:   6px;
	--r-sm:   8px;
	--r-md:   10px;
	--r-lg:   14px;
	--r-xl:   20px;
	--r-pill: 999px;
	/* legacy aliases */
	--pt-radius-sm: var(--r-xs);
	--pt-radius:    var(--r-md);
	--pt-radius-lg: var(--r-lg);
	--pt-radius-xl: var(--r-xl);

	/* Spacing (4px grid) */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 32px;
	--sp-8: 40px;
	--sp-9: 48px;
	--pt-gap: var(--sp-6);

	/* Typography */
	--pt-font:  'Poppins', system-ui, sans-serif;
	--fs-2xs:   11px;
	--fs-xs:    12px;
	--fs-sm:    13px;
	--fs-md:    14px;
	--fs-base:  15px;
	--fs-lg:    18px;
	--fs-xl:    22px;
	--fs-2xl:   28px;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Controls & icons */
	--control-h:      36px;
	--control-h-sm:   32px;
	--control-h-xs:   26px;
	--control-radius: var(--r-md);
	--pt-control-h:   var(--control-h); /* legacy alias */
	--icon-sm: 14px;
	--icon-md: 16px;
	--icon-lg: 18px;

	/* Layout */
	--pt-sidenav-width:     264px;
	--pt-sidenav-collapsed: 60px;
	--pt-header-height:     56px;
	--pt-impersonation-height: 40px; /* impersonation banner above the topbar */
	--pt-maintenance-height:   38px; /* maintenance banner below the topbar (admins) */
	--pt-pwa-install-height:   68px; /* PWA install banner below chrome (JS-visible) */
	/* Permanently visible chrome at the top of the viewport:
	   --pt-chrome-offset = where the topbar starts (below the impersonation banner),
	   --pt-sticky-top    = bottom edge of all sticky chrome — the line sticky
	                        content (table headers, sidenav, sidebars) docks to.
	   Both are adjusted below when a banner is present. */
	--pt-chrome-offset: 0px;
	--pt-sticky-top:    calc(var(--pt-chrome-offset) + var(--pt-header-height));

	/* Motion */
	--dur-1: 100ms;
	--dur-2: 160ms;
	--dur-3: 240ms;
	--ease-out:      cubic-bezier(.2, .8, .2, 1);
	--ease-standard: cubic-bezier(.4, 0, .2, 1);
	--t-fast:   var(--dur-1) var(--ease-out);   /* legacy alias */
	--t-normal: var(--dur-3) var(--ease-standard); /* legacy alias */

	/* Layers */
	--z-table-head:    2;    /* sticky table header — above its rows, below all chrome */
	--z-banner:        90;
	--z-mention:       300;
	--z-nav-overlay:   149;
	--z-sidenav:       150;
	--z-header:        200;
	--z-impersonation: 210;
	--z-panel-overlay: 1099;
	--z-panel:         1100;
	--z-modal:         9000;
	--z-lightbox:      9100;
	--z-popover:       9500;
	--z-lightbox-nav:  10001;

	/* Inline icons used as backgrounds (cannot inherit currentColor) */
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235b6270' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E");
}

/* Layout offsets with banners (same values the banners use as their height).
   Composite offsets are (re)computed on body: var() inside a custom property
   resolves where it is declared, so overriding --pt-chrome-offset on body
   would not reach a value computed on :root. */
body {
	--pt-sticky-top: calc(var(--pt-chrome-offset) + var(--pt-header-height));
}
body.pt-impersonation-active {
	--pt-chrome-offset: var(--pt-impersonation-height);
}
body:has(> .pt-maintenance-banner) {
	--pt-sticky-top: calc(var(--pt-chrome-offset) + var(--pt-header-height) + var(--pt-maintenance-height));
}
/* Install banner sits under current sticky chrome; extend dock line while visible. */
body.pt-pwa-install-visible:has(> .pt-maintenance-banner) {
	--pt-sticky-top: calc(var(--pt-chrome-offset) + var(--pt-header-height) + var(--pt-maintenance-height) + var(--pt-pwa-install-height));
}
body.pt-pwa-install-visible:not(:has(> .pt-maintenance-banner)) {
	--pt-sticky-top: calc(var(--pt-chrome-offset) + var(--pt-header-height) + var(--pt-pwa-install-height));
}

/* Non-colour values that differ per theme (light-dark() only accepts colours).
   Uses the same three cases as the theme bootstrap: forced dark, OS dark
   without stored choice, and surfaces with a fixed dark tonality. */
html[data-theme="dark"],
html [data-surface="dark"] {
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239ba3b1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--icon-search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba3b1' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) {
		--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239ba3b1' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		--icon-search:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ba3b1' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M20.5 20.5l-4-4'/%3E%3C/svg%3E");
	}
}

/* --- Logo by surface --------------------------------------------------------
   pt_logo_markup() renders both variants; CSS shows the one matching the
   surface the logo sits on — not merely the global theme.
   positive (dark artwork) → light surfaces, negative (light artwork) → dark. */

.pt-logo-img--on-dark { display: none; }

html[data-theme="dark"] .pt-logo-img--on-light { display: none; }
html[data-theme="dark"] .pt-logo-img--on-dark  { display: block; }

@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .pt-logo-img--on-light { display: none; }
	html:not([data-theme]) .pt-logo-img--on-dark  { display: block; }
}

html [data-surface="dark"]  .pt-logo-img--on-light { display: none; }
html [data-surface="dark"]  .pt-logo-img--on-dark  { display: block; }
html [data-surface="light"] .pt-logo-img--on-light { display: block; }
html [data-surface="light"] .pt-logo-img--on-dark  { display: none; }

/* --- Accessibility preferences --------------------------------------------- */

/* Durations shrink to 1ms instead of 0/none: several components rely on
   `transitionend` / `animationend` to finish closing (modal, lightbox,
   notification panel). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-1: 1ms;
		--dur-2: 1ms;
		--dur-3: 1ms;
	}
	*, *::before, *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}

/* Opaque materials when transparency is reduced or blur is unsupported. */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--mat-bar:     var(--c-surface);
		--mat-popover: var(--c-elevated);
		--mat-sheet:   var(--c-elevated);
		--mat-card:    var(--c-elevated);
		--mat-blur:    none;
		--mat-blur-soft: none;
	}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--mat-bar:     var(--c-surface);
		--mat-popover: var(--c-elevated);
		--mat-sheet:   var(--c-elevated);
		--mat-card:    var(--c-elevated);
	}
}

/* Instant theme switch: suppress transitions for one frame while toggling so
   no component animates through an intermediate colour state. */
html.pt-theme-switching *,
html.pt-theme-switching *::before,
html.pt-theme-switching *::after {
	transition: none !important;
}