/* Laborwerte360 shared design system */
:root {
  --lw-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lw-color-bg: #f4f7f8;
  --lw-color-surface: #ffffff;
  --lw-color-surface-subtle: #eef4f4;
  --lw-color-surface-raised: #ffffff;
  --lw-color-text: #142326;
  --lw-color-text-muted: #637376;
  --lw-color-border: #dce7e7;
  --lw-color-border-strong: #c7d6d7;
  --lw-color-primary: #0f766e;
  --lw-color-primary-hover: #0b625c;
  --lw-color-primary-soft: #dff5f1;
  --lw-color-accent: #2563eb;
  --lw-color-success: #167451;
  --lw-color-success-soft: #dcfce7;
  --lw-color-warning: #a16207;
  --lw-color-warning-soft: #fef3c7;
  --lw-color-danger: #b42318;
  --lw-color-danger-soft: #fee4e2;
  --lw-radius-xs: 8px;
  --lw-radius-sm: 11px;
  --lw-radius-md: 14px;
  --lw-radius-lg: 20px;
  --lw-radius-xl: 26px;
  --lw-shadow-sm: 0 4px 14px rgba(24, 55, 57, .06);
  --lw-shadow-md: 0 14px 38px rgba(24, 55, 57, .09);
  --lw-shadow-lg: 0 24px 72px rgba(15, 23, 42, .18);
  --lw-focus-ring: 0 0 0 4px rgba(15, 118, 110, .18);
  --lw-space-1: 4px;
  --lw-space-2: 8px;
  --lw-space-3: 12px;
  --lw-space-4: 16px;
  --lw-space-5: 20px;
  --lw-space-6: 24px;
  --lw-space-8: 32px;
  --lw-control-height: 42px;
  --lw-transition: 150ms ease;

  /* Backwards-compatible aliases used by the main app. */
  --bg: var(--lw-color-bg);
  --surface: var(--lw-color-surface);
  --surface-2: var(--lw-color-surface-subtle);
  --text: var(--lw-color-text);
  --muted: var(--lw-color-text-muted);
  --line: var(--lw-color-border);
  --primary: var(--lw-color-primary);
  --primary-2: #14b8a6;
  --danger: var(--lw-color-danger);
  --warning: var(--lw-color-warning);
  --shadow: var(--lw-shadow-md);
}

:root[data-theme="dark"] {
  --lw-color-bg: #0d1719;
  --lw-color-surface: #142124;
  --lw-color-surface-subtle: #192a2d;
  --lw-color-surface-raised: #18272a;
  --lw-color-text: #edf7f6;
  --lw-color-text-muted: #9bb0b1;
  --lw-color-border: #294043;
  --lw-color-border-strong: #365154;
  --lw-color-primary: #2dd4bf;
  --lw-color-primary-hover: #5eead4;
  --lw-color-primary-soft: rgba(45, 212, 191, .14);
  --lw-color-accent: #60a5fa;
  --lw-color-success: #6ee7b7;
  --lw-color-success-soft: rgba(22, 116, 81, .22);
  --lw-color-warning: #fbbf24;
  --lw-color-warning-soft: rgba(161, 98, 7, .22);
  --lw-color-danger: #f87171;
  --lw-color-danger-soft: rgba(180, 35, 24, .22);
  --lw-shadow-sm: 0 4px 18px rgba(0, 0, 0, .2);
  --lw-shadow-md: 0 18px 48px rgba(0, 0, 0, .34);
  --lw-shadow-lg: 0 28px 80px rgba(0, 0, 0, .45);
  --lw-focus-ring: 0 0 0 4px rgba(45, 212, 191, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--lw-font-sans); color: var(--lw-color-text); background: var(--lw-color-bg); }
body { color: var(--lw-color-text); background-color: var(--lw-color-bg); text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--lw-focus-ring);
}
::selection { background: var(--lw-color-primary-soft); color: var(--lw-color-text); }

/* Shared button language across App, Auth and Admin. */
.btn, .admin-btn, .auth-submit {
  min-height: var(--lw-control-height);
  border-radius: var(--lw-radius-sm);
  font-weight: 750;
  transition: background-color var(--lw-transition), border-color var(--lw-transition), color var(--lw-transition), transform var(--lw-transition), box-shadow var(--lw-transition);
}
.btn:hover, .admin-btn:hover, .auth-submit:hover { transform: translateY(-1px); }
.btn:active, .admin-btn:active, .auth-submit:active { transform: translateY(0); }
.btn.primary, .admin-btn.primary, .auth-submit {
  border-color: var(--lw-color-primary);
  background: var(--lw-color-primary);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--lw-color-primary) 22%, transparent);
}
.btn.primary:hover, .admin-btn.primary:hover, .auth-submit:hover { background: var(--lw-color-primary-hover); }
.btn.ghost, .admin-btn {
  border: 1px solid var(--lw-color-border);
  background: var(--lw-color-surface);
  color: var(--lw-color-text);
}
.admin-btn.danger { border-color: var(--lw-color-danger); background: var(--lw-color-danger); color: #fff; }

/* Shared inputs. */
:is(.sidebar-search, .auth-field input, .admin-form-react input, .admin-form-react select, .admin-inline-actions select, .form-grid input, .form-grid select, .form-grid textarea, .modal-search) {
  border-color: var(--lw-color-border);
  border-radius: var(--lw-radius-sm);
  background: var(--lw-color-surface);
  color: var(--lw-color-text);
  transition: border-color var(--lw-transition), box-shadow var(--lw-transition), background-color var(--lw-transition);
}
:is(.auth-field input, .admin-form-react input, .admin-form-react select, .admin-inline-actions select, .form-grid input, .form-grid select, .form-grid textarea, .modal-search):focus {
  border-color: var(--lw-color-primary);
  box-shadow: var(--lw-focus-ring);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--lw-color-text-muted) 82%, transparent); }

/* Shared surfaces and cards. */
.panel, .kpi-grid article, .admin-card-react, .tenant-card, .auth-card, .modal-card, .admin-modal, .report-card, .report-section {
  border-color: var(--lw-color-border);
  border-radius: var(--lw-radius-lg);
  background: var(--lw-color-surface);
  color: var(--lw-color-text);
  box-shadow: var(--lw-shadow-sm);
}
.panel, .admin-card-react, .auth-card { box-shadow: var(--lw-shadow-md); }

/* Shared status chips. */
.status, .admin-badge {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .01em;
}
.status.ok, .admin-badge.ok { background: var(--lw-color-success-soft); color: var(--lw-color-success); }
.status.warn, .admin-badge.warn { background: var(--lw-color-danger-soft); color: var(--lw-color-danger); }
.admin-badge:not(.ok):not(.warn) { background: var(--lw-color-primary-soft); color: var(--lw-color-primary); }

/* Admin now uses the same palette and spacing as the app. */
body:has(.admin-shell-react) {
  background: radial-gradient(circle at 80% 0, color-mix(in srgb, var(--lw-color-primary) 9%, transparent), transparent 30%), var(--lw-color-bg);
}
.admin-shell-react { color: var(--lw-color-text); }
.admin-brand small { color: var(--lw-color-primary); }
.admin-brand p, .admin-card-react header p, .tenant-card p, .tenant-card small, .tenant-stats span, .user-row-react > div > span, .admin-empty, .admin-loading { color: var(--lw-color-text-muted); }
.admin-nav { border-color: var(--lw-color-border); background: color-mix(in srgb, var(--lw-color-surface) 90%, transparent); }
.admin-nav button { color: var(--lw-color-text-muted); }
.admin-nav button.active { background: var(--lw-color-text); color: var(--lw-color-surface); }
.admin-card-react, .tenant-card, .tenant-stats > div, .admin-modal { background: var(--lw-color-surface); border-color: var(--lw-color-border); }
.admin-table-react th, .admin-table-react td { border-color: var(--lw-color-border); }
.admin-table-react th { color: var(--lw-color-text-muted); }
.admin-alert.success { background: var(--lw-color-success-soft); color: var(--lw-color-success); border-color: color-mix(in srgb, var(--lw-color-success) 35%, transparent); }
.admin-alert.error { background: var(--lw-color-danger-soft); color: var(--lw-color-danger); border-color: color-mix(in srgb, var(--lw-color-danger) 35%, transparent); }

/* Authentication adopts the same brand system. */
body:has(.auth-card) {
  background: radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--lw-color-primary) 18%, transparent), transparent 34%), radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--lw-color-accent) 14%, transparent), transparent 38%), var(--lw-color-bg);
}
.auth-card { background: color-mix(in srgb, var(--lw-color-surface) 94%, transparent); }
.auth-brand p, .auth-intro p, .auth-success p { color: var(--lw-color-text-muted); }
.auth-field input { color: var(--lw-color-text); background: var(--lw-color-surface); }
.auth-error { background: var(--lw-color-danger-soft); color: var(--lw-color-danger); border-color: color-mix(in srgb, var(--lw-color-danger) 35%, transparent); }

/* Common modal/backdrop treatment. */
.modal-backdrop, .admin-modal-backdrop { background: rgba(4, 18, 20, .58); backdrop-filter: blur(8px); }

/* Common typography rhythm. */
h1, h2, h3 { letter-spacing: -.025em; text-wrap: balance; }
p { line-height: 1.55; }
.eyebrow, .admin-brand small { text-transform: uppercase; }

/* Accessibility and reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 700px) {
  :root { --lw-control-height: 46px; --lw-radius-lg: 17px; }
  .btn, .admin-btn, .auth-submit { min-height: 46px; }
}