/* design-system.css — ratiopharm ulm Design System Override Layer (Phase 25)
 * Loaded after PicoCSS CDN — overrides all --pico-* variables for Dark Mode.
 * Source: docs/ratiopharm-ulm-design-system/project/colors_and_type.css
 * Decisions: D-01 (override layer), D-02 (dark mode), D-03 (radius 0),
 *            D-04 (Crystal VF), D-05 (3 type cuts)
 */

/* ---- Font ---- */
@font-face {
  font-family: "Crystal VF";
  src: url("/static/fonts/Crystal-VF.ttf") format("truetype-variations");
  font-weight: 100 950;
  font-stretch: 25% 200%;
  font-display: swap;
}

/* ---- Brand Primitives ---- */
:root {
  --ru-orange:   #ff6500;
  --ru-black:    #000000;
  --ru-white:    #ffffff;
  --ru-gray-500: #787878;
  --ru-gray-700: #2e2e2e;
  --ru-gray-800: #1a1a1a;
  --ru-gray-900: #111111;
  --ru-gray-950: #0d0d0d;

  /* Funktionale Status-Ampel (NICHT Brand) — Staleness-Indikator Handscanner-Roster.
     Bewusst -600-Shades, damit die per SC-2 verbotenen Alt-Paletten-Hex
     (#22c55e / #eab308 / #ef4444) nicht reintroduziert werden. */
  --status-green:  #16a34a;
  --status-yellow: #ca8a04;
  --status-red:    #dc2626;
  --status-gray:   var(--ru-gray-500);
}

/* ---- PicoCSS Variable Overrides (D-01, D-02) ---- */
/* Selector matches PicoCSS [data-theme="dark"] specificity (0,2,0) */
:root[data-theme="dark"] {
  /* Typography */
  --pico-font-family:                         "Crystal VF", "Helvetica Neue", Arial, sans-serif;
  --pico-font-size:                           16px;

  /* Background / Color — Dark Mode (D-02) */
  --pico-background-color:                    #000000;
  --pico-color:                               #ffffff;
  --pico-h1-color:                            #ffffff;
  --pico-h2-color:                            #ffffff;
  --pico-h3-color:                            #ffffff;
  --pico-h4-color:                            #ffffff;
  --pico-muted-color:                         #787878;
  --pico-muted-border-color:                  #2e2e2e;

  /* Primary = Orange */
  --pico-primary:                             #ff6500;
  --pico-primary-background:                  #ff6500;
  --pico-primary-hover:                       #ff6500;
  --pico-primary-hover-background:            #cc5200;
  --pico-primary-focus:                       rgba(255, 101, 0, 0.35);
  --pico-primary-inverse:                     #ffffff;

  /* Secondary */
  --pico-secondary:                           #787878;
  --pico-secondary-hover:                     #ffffff;
  --pico-secondary-focus:                     rgba(120, 120, 120, 0.25);
  --pico-secondary-inverse:                   #000000;

  /* Links */
  --pico-a-color:                             #ff6500;
  --pico-a-hover-color:                       #ffffff;

  /* Cards (D-02) */
  --pico-card-background-color:               #1a1a1a;
  --pico-card-border-color:                   #2e2e2e;
  --pico-card-box-shadow:                     none;
  --pico-card-sectioning-background-color:    #0d0d0d;

  /* Forms */
  --pico-form-element-background-color:       #1a1a1a;
  --pico-form-element-border-color:           #2e2e2e;
  --pico-form-element-color:                  #ffffff;
  --pico-form-element-placeholder-color:      #787878;
  --pico-form-element-active-border-color:    #ff6500;
  --pico-form-element-focus-color:            rgba(255, 101, 0, 0.35);
  --pico-form-element-valid-border-color:     #ff6500;
  --pico-form-element-invalid-border-color:   #ff6500;

  /* Border radius — CI: strikt 0 (D-03) */
  --pico-border-radius:                       0;

  /* Nav */
  --pico-nav-element-spacing-vertical:        12px;

  /* Code */
  --pico-code-background-color:               #0d0d0d;
  --pico-code-color:                          #cfcfcf;

  /* Modal */
  --pico-modal-overlay-background-color:      rgba(0, 0, 0, 0.75);

  /* Table */
  --pico-table-border-color:                  #2e2e2e;
  --pico-table-row-stripped-background-color: #111111;

  /* Dropdown */
  --pico-dropdown-background-color:           #1a1a1a;
  --pico-dropdown-border-color:               #2e2e2e;
  --pico-dropdown-color:                      #ffffff;
  --pico-dropdown-hover-background-color:     #2e2e2e;

  /* Mark/highlight */
  --pico-mark-background-color:               rgba(255, 101, 0, 0.2);
  --pico-mark-color:                          #ffffff;

  /* Blockquote */
  --pico-blockquote-border-color:             #ff6500;
  --pico-blockquote-footer-color:             #787878;

  /* HR */
  --pico-hr-border-color:                     #2e2e2e;

  /* Progress */
  --pico-progress-background-color:           #2e2e2e;
  --pico-progress-color:                      #ff6500;
}

/* ---- Typography Hierarchy (D-05) ---- */

/* Page Titles: wght 900, wdth 75, uppercase (ru-01/02 Headline-Stil) */
h1, .dashboard-page-title {
  font-family: "Crystal VF", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 900, "wdth" 75;
  font-weight: inherit;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Section Labels / Eyebrows: wght 700, wdth 100, uppercase (ru-04 Topheadline-Stil) */
h2, h3, .dashboard-section-label {
  font-family: "Crystal VF", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 700, "wdth" 100;
  font-weight: inherit;
  text-transform: uppercase;
}

/* Body / Tables / Labels: wght 400, wdth 100, sentence case (ru-05 Fliesstext-Stil) */
body, p, td, th, label, small, .dashboard-body {
  font-family: "Crystal VF", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  font-weight: inherit;
}

/* Form-Controls: Descender-Clipping vermeiden (Quick 260630-fdh).
   PicoCSS gibt Form-Elementen ein grosses vertikales Default-padding (~0.75rem).
   Kombiniert mit den seitenweit gesetzten festen height:36px-Selects presste das
   den Inhaltsbereich auf ~10px zusammen, wodurch die Unterlaengen (g, p, ue) der
   Crystal-VF-Hausschrift unten abgeschnitten wurden. Reduziertes padding-block
   (steht nicht im Inline-Style, greift also) gibt der Schrift wieder vertikalen
   Raum; line-height 1.4 zentriert sie sauber. Form-Controls erhalten zudem
   explizit die Hausschrift (waren nicht in der Typografie-Liste oben enthalten). */
select,
input:not([type="checkbox"]):not([type="radio"]),
textarea {
  font-family: "Crystal VF", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wght" 400, "wdth" 100;
  line-height: 1.4;
  padding-block: 0.4rem;
}

/* ---- Header (D-02) ---- */
header {
  background: #000000;
  border-bottom: 2px solid #ff6500;
}

/* ---- Soundwave Login Background (D-07) ---- */
.login-soundwave-bg {
  max-width: 400px;
  margin: 24px auto 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Icon Utilities ---- */
.status-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 8px;
  filter: invert(1);
}
.status-icon--offline {
  filter: invert(39%) sepia(98%) saturate(2000%) hue-rotate(4deg);
}

/* ---- Button Icon Visibility (Dark Mode Fix) ---- */
/* SVG icons loaded as <img> default to black fill — invert to white on dark bg */
button img:not(.htmx-indicator):not(.spinner),
[type="submit"] img:not(.htmx-indicator):not(.spinner) {
  filter: invert(1);
  transition: filter 140ms cubic-bezier(0.5, 0.6, 0, 1);
}
/* btn-primary hover: bg goes black, text/icon goes orange */
.btn-primary:hover img:not(.htmx-indicator):not(.spinner) {
  filter: invert(39%) sepia(98%) saturate(2000%) hue-rotate(4deg);
}
/* btn-outline-danger default: icon white (already handled by button img rule) */
/* btn-outline-danger hover: bg goes orange, icon stays white — no override needed */

/* ---- Button Styles (D-02, D-03) ---- */
.btn-primary {
  background-color: #ff6500;
  color: #ffffff;
  border: 1.5px solid #ff6500;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.5, 0.6, 0, 1),
              color 140ms cubic-bezier(0.5, 0.6, 0, 1);
}
.btn-primary:hover {
  background-color: #000000;
  color: #ff6500;
  border-color: #ff6500;
}

.btn-outline-danger {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #ff6500;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.5, 0.6, 0, 1),
              color 140ms cubic-bezier(0.5, 0.6, 0, 1);
}
.btn-outline-danger:hover {
  background-color: #ff6500;
  color: #ffffff;
}

/* ---- Transition Easing (CI: "Uuulmer Rhythmus") ---- */
a {
  transition: color 140ms cubic-bezier(0.5, 0.6, 0, 1);
}