/* =========================================================
   GOOGLE FONTS - Plus Jakarta Sans (modern, playful, premium)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/*
 * Purpose: Global design tokens, shared layout, navigation, modals, toasts, utilities, and responsive shell styles.
 * Keep page-only rules here; shared primitives belong in app.css.
 */
/* =========================================================
   FACILITYPLUS - PREMIUM DESIGN SYSTEM v3
   designspells.com · Linear · Stripe · Vercel quality standard
========================================================= */

:root {
  /* Brand */
  --primary: #ff3347;
  --primary-dim: rgba(255, 51, 71, 0.75);
  --primary-glass: rgba(255, 51, 71, 0.14);
  --primary-subtle: rgba(255, 51, 71, 0.07);
  --primary-glow: 0 8px 32px rgba(255, 51, 71, 0.38);
  --primary-glow-strong: 0 16px 48px rgba(255, 51, 71, 0.55);
  --primary-glow-soft: 0 4px 16px rgba(255, 51, 71, 0.22);

  /* Extended palette - playful & modern */
  --accent-purple: #a855f7;
  --accent-purple-glass: rgba(168, 85, 247, 0.14);
  --accent-purple-glow: 0 8px 32px rgba(168, 85, 247, 0.35);
  --accent-cyan: #06b6d4;
  --accent-cyan-glass: rgba(6, 182, 212, 0.12);
  --accent-cyan-glow: 0 8px 32px rgba(6, 182, 212, 0.30);
  --accent-orange: #f97316;
  --accent-orange-glass: rgba(249, 115, 22, 0.14);
  --accent-lime: #84cc16;
  --accent-lime-glass: rgba(132, 204, 22, 0.12);

  /* Gradient presets */
  --gradient-brand:   linear-gradient(135deg, #ff3347 0%, #ff6b35 100%);
  --gradient-purple:  linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
  --gradient-cyan:    linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
  --gradient-warm:    linear-gradient(135deg, #f97316 0%, #eab308 100%);
  --gradient-magic:   linear-gradient(135deg, #ff3347 0%, #a855f7 50%, #06b6d4 100%);
  --gradient-fire:    linear-gradient(135deg, #ff3347 0%, #ff6b35 60%, #f97316 100%);
  --gradient-cosmic:  linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

  /* Glass surfaces */
  --glass-4:  rgba(255, 255, 255, 0.04);
  --glass-6:  rgba(255, 255, 255, 0.06);
  --glass-8:  rgba(255, 255, 255, 0.08);
  --glass-12: rgba(255, 255, 255, 0.12);
  --glass-18: rgba(255, 255, 255, 0.18);
  --glass-24: rgba(255, 255, 255, 0.24);

  /* Glass borders */
  --border-glass:        rgba(255, 255, 255, 0.08);
  --border-glass-mid:    rgba(255, 255, 255, 0.13);
  --border-glass-strong: rgba(255, 255, 255, 0.20);
  --border-primary:      rgba(255, 51, 71, 0.40);

  /* Blur filters */
  --blur-sm: blur(16px) saturate(160%);
  --blur-md: blur(32px) saturate(180%);
  --blur-lg: blur(56px) saturate(200%);
  --blur-xl: blur(80px) saturate(220%);

  /* Specular highlight */
  --specular:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);

  /* Text */
  --text:           rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.54);
  --text-tertiary:  rgba(255, 255, 255, 0.30);
  --text-primary:   var(--text);
  --text-muted:     var(--text-secondary);

  /* Focus ring (buttons/anchors reset their native outline; this is the shared replacement) */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary);

  /* Status */
  --success:       #30d158;
  --success-glass: rgba(48, 209, 88, 0.15);
  --warning:       #ffd60a;
  --warning-glass: rgba(255, 214, 10, 0.15);
  --danger:        #ff453a;
  --danger-glass:  rgba(255, 69, 58, 0.15);
  --info:          #0a84ff;
  --info-glass:    rgba(10, 132, 255, 0.15);

  /* Shadows */
  --shadow-card:       0 8px 40px rgba(0, 0, 0, 0.45), var(--specular);
  --shadow-card-hover: 0 20px 64px rgba(0, 0, 0, 0.60), var(--specular);
  --shadow-panel:      0 24px 80px rgba(0, 0, 0, 0.55), var(--specular);
  --shadow-sidebar:    24px 0 80px rgba(0, 0, 0, 0.5);
  --shadow-modal:      0 48px 120px rgba(0, 0, 0, 0.7), var(--specular);

  /* Radii */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* Legacy aliases */
  --bg:             #0b0d16;
  --surface:        var(--glass-12);
  --surface-strong: var(--glass-18);
  --surface-muted:  var(--primary-subtle);
  --muted:          var(--text-secondary);
  --border:         var(--border-glass);
  --primary-strong: #e8001a;
  --primary-soft:   var(--primary-glass);
  --shadow:         var(--shadow-card);
  --shadow-soft:    0 8px 32px rgba(0, 0, 0, 0.28);

  /* Sidebar */
  --sidebar-w: 272px;

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.16s;
  --t-base: 0.24s;
  --t-slow: 0.40s;
}

/* =========================================================
   LIGHT THEME - Clean & Readable Design
========================================================= */

body.theme-light {
  /* Brand */
  --primary: #ff3347;
  --primary-dim: rgba(255, 51, 71, 0.90);
  --primary-glass: rgba(255, 51, 71, 0.14);
  --primary-subtle: rgba(255, 51, 71, 0.07);
  --primary-glow: 0 8px 32px rgba(255, 51, 71, 0.16);
  --primary-glow-strong: 0 16px 48px rgba(255, 51, 71, 0.22);
  --primary-glow-soft: 0 4px 16px rgba(255, 51, 71, 0.10);

  /* Glass surfaces - balanced for light theme */
  --glass-4:  rgba(51, 65, 85, 0.04);
  --glass-6:  rgba(51, 65, 85, 0.06);
  --glass-8:  rgba(51, 65, 85, 0.10);
  --glass-12: rgba(51, 65, 85, 0.14);
  --glass-18: rgba(51, 65, 85, 0.18);
  --glass-24: rgba(51, 65, 85, 0.24);

  /* Glass borders - balanced for readability */
  --border-glass:        rgba(51, 65, 85, 0.18);
  --border-glass-mid:    rgba(51, 65, 85, 0.24);
  --border-glass-strong: rgba(51, 65, 85, 0.30);
  --border-primary:      rgba(255, 51, 71, 0.35);

  /* Blur filters */
  --blur-sm: blur(16px) saturate(110%);
  --blur-md: blur(32px) saturate(120%);
  --blur-lg: blur(56px) saturate(130%);
  --blur-xl: blur(80px) saturate(140%);

  /* Specular highlight - light */
  --specular:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);

  /* Text - light theme HIGH CONTRAST */
  --text:           #0f172a;
  --text-secondary: #3f4c66;
  --text-tertiary:  #6b7789;

  /* Status colors - light optimized */
  --success:       #059669;
  --success-glass: rgba(5, 150, 105, 0.14);
  --warning:       #d97706;
  --warning-glass: rgba(217, 119, 6, 0.14);
  --danger:        #dc2626;
  --danger-glass:  rgba(220, 38, 38, 0.14);
  --info:          #0369a1;
  --info-glass:    rgba(3, 105, 161, 0.14);

  /* Shadows - light theme VISIBLE */
  --shadow-card:       0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.12), var(--specular);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.18), var(--specular);
  --shadow-panel:      0 8px 24px rgba(0, 0, 0, 0.16), 0 12px 32px rgba(0, 0, 0, 0.20), var(--specular);
  --shadow-sidebar:    -4px 0 20px rgba(0, 0, 0, 0.12);
  --shadow-modal:      0 12px 40px rgba(0, 0, 0, 0.20), 0 20px 64px rgba(0, 0, 0, 0.26), var(--specular);

  /* Radii */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* Legacy aliases - light with better contrast */
  --bg:             #f5f7fa;
  --surface:        #ffffff;
  --surface-strong: #eff2f7;
  --surface-muted:  #e8ecf3;
  --muted:          var(--text-secondary);
  --border:         var(--border-glass);
  --primary-strong: #e8001a;
  --primary-soft:   var(--primary-glass);
  --shadow:         var(--shadow-card);
  --shadow-soft:    0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ===== LIGHT THEME INPUT STYLING ===== */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light select option {
  background: #ffffff;
  color: var(--text);
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.12);
}

/* ===== LIGHT THEME SIDEBAR ===== */
body.theme-light .sidebar {
  background: #f5f7fa;
  border-right: 1px solid #d6dce6;
}

/* ===== LIGHT THEME CARDS & SURFACES ===== */
body.theme-light .card,
body.theme-light .modal,
body.theme-light [role="dialog"] {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  transition:
    background-color var(--t-base) var(--ease-snappy),
    color var(--t-base) var(--ease-snappy),
    border-color var(--t-base) var(--ease-snappy),
    box-shadow var(--t-base) var(--ease-snappy),
    opacity var(--t-base) var(--ease-snappy);
}

a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
textarea { resize: vertical; }

label {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* =========================================================
   BODY - IMMERSIVE BACKGROUND
========================================================= */

html,
body {
  min-height: 100%;
  font-family:
    "Plus Jakarta Sans", -apple-system, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(ellipse 90% 70% at 5% -10%,   rgba(168, 85, 247, 0.28) 0%, transparent 48%),
    radial-gradient(ellipse 70% 55% at 96% 2%,    rgba(255, 51, 71, 0.32) 0%, transparent 45%),
    radial-gradient(ellipse 60% 45% at 50% 98%,   rgba(6, 182, 212, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 15% 65%,   rgba(99, 102, 241, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 75%,   rgba(249, 115, 22, 0.10) 0%, transparent 45%),
    linear-gradient(160deg, #0a0b18 0%, #0d0820 40%, #07090f 100%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ===== LIGHT THEME BODY STYLING ===== */
body.theme-light {
  background:
    radial-gradient(ellipse 80% 60% at 8% -8%,  rgba(168, 85, 247, 0.07) 0%, transparent 52%),
    radial-gradient(ellipse 70% 50% at 92% 4%,  rgba(255, 51, 71, 0.06) 0%, transparent 48%),
    radial-gradient(ellipse 60% 45% at 50% 98%,  rgba(6, 182, 212, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #f5f7fa 0%, #eff2f7 100%);
  background-attachment: fixed;
}

/* ===== NOISE TEXTURE OVERLAY - premium depth ===== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Aurora ambient orbs - injected by JS */
.aurora-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.aurora-orb-1 {
  width: 700px;
  height: 700px;
  top: -220px;
  left: -160px;
  background: radial-gradient(circle, rgba(255, 51, 71, 0.18) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
  filter: blur(60px);
  animation: aurora-float-1 28s ease-in-out infinite;
}

.aurora-orb-2 {
  width: 550px;
  height: 550px;
  top: 15%;
  right: -180px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(99, 102, 241, 0.08) 50%, transparent 70%);
  filter: blur(70px);
  animation: aurora-float-2 35s ease-in-out infinite;
}

.aurora-orb-3 {
  width: 480px;
  height: 480px;
  bottom: 5%;
  left: 35%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, rgba(14, 165, 233, 0.06) 50%, transparent 70%);
  filter: blur(65px);
  animation: aurora-float-3 22s ease-in-out infinite;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: var(--r-md);
  background: var(--gradient-brand);
  color: #fff;
  padding: 11px 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  box-shadow: var(--primary-glow);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) var(--ease-snappy),
    filter var(--t-base) var(--ease-snappy),
    opacity var(--t-base) var(--ease-snappy);
}

/* Global keyboard-focus ring — buttons/inputs reset their native outline
   above, anchors get no themed ring by default; this restores one everywhere
   that isn't already covered by a more specific focus-visible rule. */
button:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Shimmer "spell" on hover */
button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  transition: transform 0.55s var(--ease-smooth);
  pointer-events: none;
}

button:hover::after {
  transform: translateX(130%);
}

button:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.08);
  box-shadow: var(--primary-glow-strong);
}

button:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.95);
  box-shadow: var(--primary-glow-soft);
}

input,
select,
textarea {
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-md);
  background: var(--glass-8);
  color: var(--text);
  backdrop-filter: var(--blur-sm);
  padding: 11px 14px;
  font: inherit;
}

select option {
  background: #12142a;
  color: rgba(255, 255, 255, 0.92);
}

input::placeholder {
  color: var(--text-tertiary);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-primary);
  background: var(--glass-12);
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.12);
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  flex-shrink: 0;
  background: rgba(9, 10, 22, 0.84);
  -webkit-backdrop-filter: blur(48px) saturate(200%);
          backdrop-filter: blur(48px) saturate(200%);
  color: var(--text);
  padding: 24px 14px 20px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: 1px solid var(--border-glass);
  box-shadow: var(--shadow-sidebar);
  position: relative;
  z-index: 100;
}

.sidebar::-webkit-scrollbar { display: none; }

/* Top shimmer line */
.sidebar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  pointer-events: none;
}

/* Right edge accent */
.sidebar::after {
  content: "";
  position: absolute;
  top: 0; right: -1px;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 51, 71, 0.22) 30%,
    rgba(255, 51, 71, 0.08) 70%,
    transparent
  );
  pointer-events: none;
}

/* =========================================================
   SIDEBAR LOGO
========================================================= */

.sidebar-logo,
.login-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 20px;
  flex-shrink: 0;
}

.sidebar-logo img,
.login-logo img {
  width: 108px;
  height: 108px;
  object-fit: contain;
}

/* =========================================================
   NAV SECTION LABEL
========================================================= */

.nav-section-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 8px;
  margin: 4px 0 8px;
  display: block;
}

/* =========================================================
   SIDEBAR NAV
========================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.sidebar-nav a {
  color: var(--text-secondary);
  padding: 9px 11px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
  min-height: 42px;
  opacity: 0;
  transform: translateX(-14px);
  animation: nav-slide-in var(--t-slow) var(--ease-spring) forwards;
  letter-spacing: 0.005em;
  transition:
    background var(--t-fast) var(--ease-snappy),
    color var(--t-fast) var(--ease-snappy),
    border-color var(--t-fast) var(--ease-snappy),
    box-shadow var(--t-base) var(--ease-snappy),
    transform var(--t-fast) var(--ease-spring),
    opacity var(--t-base) ease;
}

.sidebar-nav a .nav-label {
  min-width: 0;
  flex: 1;
}

/* Shimmer sweep */
.sidebar-nav a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-smooth);
  pointer-events: none;
  border-radius: inherit;
}

/* Left indicator bar */
.sidebar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  width: 3px;
  height: 60%;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, var(--primary), rgba(255, 51, 71, 0.5));
  box-shadow: 0 0 10px rgba(255, 51, 71, 0.6), 0 0 20px rgba(255, 51, 71, 0.3);
  transform: scaleY(0);
  opacity: 0;
  transform-origin: center;
  transition:
    transform 0.22s var(--ease-spring),
    opacity 0.22s ease;
}

/* Stagger entrance delays */
.sidebar-nav > a:nth-child(1)  { animation-delay: 0.05s; }
.sidebar-nav > a:nth-child(2)  { animation-delay: 0.10s; }
.sidebar-nav > a:nth-child(3)  { animation-delay: 0.15s; }
.sidebar-nav > a:nth-child(4)  { animation-delay: 0.20s; }
.sidebar-nav > a:nth-child(5)  { animation-delay: 0.25s; }
.sidebar-nav > a:nth-child(6)  { animation-delay: 0.30s; }
.sidebar-nav > a:nth-child(7)  { animation-delay: 0.35s; }
.sidebar-nav > a:nth-child(8)  { animation-delay: 0.40s; }

.sidebar-nav a:hover {
  background: var(--glass-8);
  color: var(--text);
  border-color: var(--border-glass);
  transform: translateX(3px);
}

.sidebar-nav a:hover::before {
  transform: translateX(180%);
}

.sidebar-nav a:hover::after {
  transform: scaleY(0.5);
  opacity: 0.45;
}

.sidebar-nav a.active {
  background: linear-gradient(
    135deg,
    rgba(255, 51, 71, 0.20) 0%,
    rgba(168, 85, 247, 0.10) 100%
  );
  color: #fff;
  border-color: rgba(255, 51, 71, 0.32);
  box-shadow:
    0 4px 24px rgba(255, 51, 71, 0.16),
    0 1px 0 rgba(168, 85, 247, 0.15) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  transform: translateX(0);
}

.sidebar-nav a.active::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Nav icon */
.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring),
    filter var(--t-fast) ease;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar-nav a:hover .nav-icon {
  opacity: 0.90;
  transform: scale(1.15) rotate(-4deg);
}

.sidebar-nav a.active .nav-icon {
  opacity: 1;
  filter: drop-shadow(0 0 5px rgba(255, 51, 71, 0.55));
}

/* =========================================================
   NAV DROPDOWN
========================================================= */

.admin-section {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.admin-dropdown,
.nav-dropdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-dropdown-toggle,
.nav-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Reset base button shimmer */
  overflow: visible;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease;
}

/* No shimmer on nav toggles */
.admin-dropdown-toggle::after,
.nav-dropdown-toggle::after {
  display: none;
}

.admin-dropdown-toggle:hover,
.nav-dropdown-toggle:hover {
  background: var(--glass-6);
  border-color: var(--border-glass);
  color: var(--text-secondary);
  transform: none;
  box-shadow: none;
}

.admin-dropdown-chevron,
.nav-dropdown-chevron {
  font-size: 13px;
  transition: transform 0.22s var(--ease-spring);
  flex-shrink: 0;
  opacity: 0.55;
}

.admin-dropdown.open .admin-dropdown-chevron,
.nav-dropdown.open   .nav-dropdown-chevron {
  transform: rotate(90deg);
}

.nav-dropdown-icon  { font-size: 13px; display: flex; align-items: center; opacity: 0.6; }
.nav-dropdown-label { flex: 1; text-align: left; }

.admin-dropdown-menu,
.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 4px 10px;
  animation: slideDown 0.18s var(--ease-smooth) forwards;
}

.admin-dropdown.open .admin-dropdown-menu,
.nav-dropdown.open   .nav-dropdown-menu {
  display: flex;
}

.admin-dropdown-menu a,
.nav-dropdown-menu a,
.nav-dropdown-item {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring);
}

.admin-dropdown-menu a::before,
.nav-dropdown-menu a::before,
.nav-dropdown-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.30;
  flex-shrink: 0;
  transition: opacity var(--t-fast) ease, background var(--t-fast) ease;
}

.nav-dropdown-item-icon + ::before {
  display: none !important;
}

.nav-dropdown-item-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-right: 2px;
  opacity: 0.65;
  transition: opacity var(--t-fast) ease;
}

.nav-dropdown-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
}

.nav-dropdown-item:hover .nav-dropdown-item-icon {
  opacity: 0.95;
}

.admin-dropdown-menu a:hover,
.nav-dropdown-menu a:hover,
.nav-dropdown-item:hover {
  background: var(--glass-6);
  border-color: var(--border-glass);
  color: var(--text);
  transform: translateX(3px);
}

.admin-dropdown-menu a.active,
.nav-dropdown-menu a.active,
.nav-dropdown-item.active {
  background: rgba(255, 51, 71, 0.12);
  border-color: rgba(255, 51, 71, 0.22);
  color: #fff;
}

.admin-dropdown-menu a.active::before,
.nav-dropdown-menu a.active::before,
.nav-dropdown-item.active::before {
  background: var(--primary);
  opacity: 1;
  box-shadow: 0 0 5px rgba(255, 51, 71, 0.5);
}

/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.sidebar-footer {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  flex-shrink: 0;
}

/* --------------------------------------------------
   USER PROFILE DROPDOWN - Premium Design
   -------------------------------------------------- */

.sidebar-user-profile {
  position: relative;
  width: 100%;
}

.sidebar-user-profile-btn {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg,
    rgba(255, 51, 71, 0.08) 0%,
    rgba(255, 51, 71, 0.04) 100%
  );
  border: 1px solid rgba(255, 51, 71, 0.16);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
  transition:
    background var(--t-fast) ease,
    border-color var(--t-fast) ease,
    box-shadow var(--t-base) ease;
  position: relative;
  overflow: hidden;
}

.sidebar-user-profile-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.4s var(--ease-smooth);
  pointer-events: none;
}

.sidebar-user-profile-btn:hover {
  background: linear-gradient(135deg,
    rgba(255, 51, 71, 0.12) 0%,
    rgba(255, 51, 71, 0.06) 100%
  );
  border-color: rgba(255, 51, 71, 0.24);
  box-shadow:
    0 4px 16px rgba(255, 51, 71, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

.sidebar-user-profile-btn:hover::before {
  transform: translateX(180%);
}

.sidebar-user-profile-btn:active {
  background: linear-gradient(135deg,
    rgba(255, 51, 71, 0.10) 0%,
    rgba(255, 51, 71, 0.05) 100%
  );
  box-shadow:
    0 2px 8px rgba(255, 51, 71, 0.08),
    inset 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Avatar */
.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), rgba(255, 51, 71, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 13px;
  letter-spacing: -0.5px;
  box-shadow:
    0 4px 12px rgba(255, 51, 71, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  position: relative;
}

.sidebar-user-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* User Info */
.sidebar-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.sidebar-user-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: -0.3px;
}

.sidebar-user-role {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.75;
}

/* Chevron */
.sidebar-user-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.4;
  transition:
    transform 0.22s var(--ease-spring),
    opacity 0.18s ease;
}

.sidebar-user-profile.open .sidebar-user-chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* -- Dropdown Menu -- */
.sidebar-user-menu {
  position: absolute;
  bottom: 100%;
  left: -4px;
  right: -4px;
  background: var(--glass-6);
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: var(--blur-md);
          backdrop-filter: var(--blur-md);
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  margin-bottom: 12px;
  box-shadow:
    0 -12px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: slideUp 0.16s var(--ease-smooth) forwards;
  z-index: 200;
  overflow: hidden;
}

.sidebar-user-profile.open .sidebar-user-menu {
  display: flex;
}

/* Menu Items */
.sidebar-user-menu-item {
  padding: 11px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  box-shadow: none;
  /* Reset base button shimmer */
  overflow: visible;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    padding-left var(--t-fast) ease;
}

/* No shimmer on sidebar menu items */
.sidebar-user-menu-item::after {
  display: none;
}

.sidebar-user-menu-item:hover {
  background: var(--glass-12);
  color: var(--text);
  padding-left: 14px;
}

.sidebar-user-menu-item:active {
  background: var(--glass-16);
  transform: none;
}

/* Menu Item Icons */
.sidebar-user-menu-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity var(--t-fast) ease;
}

.sidebar-user-menu-item:hover .sidebar-user-menu-icon {
  opacity: 0.85;
}

/* Logout Item Special Styling */
.sidebar-user-menu-item.logout {
  color: rgba(255, 69, 58, 0.75);
  border-top: 1px solid var(--border-glass);
  margin-top: 4px;
}

.sidebar-user-menu-item.logout:hover {
  background: rgba(255, 69, 58, 0.10);
  color: #ff453a;
}

.sidebar-user-menu-item.logout .sidebar-user-menu-icon {
  opacity: 0.6;
  color: rgba(255, 69, 58, 0.8);
}

.sidebar-user-menu-item.logout:hover .sidebar-user-menu-icon {
  opacity: 1;
  color: #ff453a;
}

.user-box {
  background: var(--glass-6);
  padding: 9px 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-glass);
  box-shadow: var(--specular);
  -webkit-backdrop-filter: var(--blur-sm);
          backdrop-filter: var(--blur-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  transition:
    background var(--t-fast) ease,
    border-color var(--t-fast) ease;
}

.user-box:hover {
  background: var(--glass-8);
  border-color: var(--border-glass-mid);
}

.user-box .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex-shrink: 0;
}

.user-box .user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-box .user-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user-box .user-meta {
  font-size: 10.5px;
  color: var(--text-secondary);
}

.role-badge {
  background: linear-gradient(135deg, rgba(255, 51, 71, 0.18) 0%, rgba(168, 85, 247, 0.12) 100%);
  color: var(--primary);
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 800;
  border: 1px solid rgba(255, 51, 71, 0.24);
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 51, 71, 0.12);
}

.version-link {
  display: block;
  margin-top: 6px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--t-fast) ease;
}

.version-link:hover { color: var(--text-secondary); }

/* -- Studio Selector -------------------------------- */
.studio-selector {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 320px);
  min-width: 190px;
  z-index: 100000;
}

.studio-switch-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-glass-mid);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 750;
  color: var(--text);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  justify-content: space-between;
  line-height: 1.2;
  box-shadow: var(--specular);
  -webkit-backdrop-filter: var(--blur-sm);
          backdrop-filter: var(--blur-sm);
}

.studio-switch-btn:hover {
  background: var(--glass-10);
  border-color: rgba(59, 130, 246, 0.34);
  box-shadow: 0 10px 28px rgba(0,0,0,0.24), 0 0 0 3px rgba(59,130,246,0.08);
}

.studio-switch-btn:active {
  background: var(--glass-12);
}

.studio-switch-btn svg:first-child {
  width: 18px;
  height: 18px;
  color: rgba(96, 165, 250, 0.92);
  flex-shrink: 0;
}

#studio-switch-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.studio-switch-btn .chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform var(--t-fast) ease;
}

.studio-switch-btn[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.studio-menu {
  position: fixed;
  top: calc(100% + 8px);
  right: 0;
  min-width: min(240px, calc(100vw - 24px));
  width: min(88vw, 340px);
  background: #1a1d2e;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 2147483000;
  animation: slideDown var(--t-fast) var(--ease-spring);
}

.studio-menu[hidden] {
  display: none;
}

/* Animation primitive used by this stylesheet. */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.studio-menu-header {
  padding: 10px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.studio-list {
  padding: 6px;
}

.studio-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all var(--t-fast) ease;
  text-align: left;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
}

.studio-menu-item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.studio-menu-item.active {
  background: rgba(255, 51, 71, 0.15);
  color: #fff;
  font-weight: 600;
}

.studio-menu-item.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

body.theme-light .studio-menu {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
}

body.theme-light .studio-switch-btn {
  background: #ffffff;
  border-color: #d6deea;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
}

body.theme-light .studio-switch-btn:hover {
  background: #f8fafc;
  border-color: rgba(37, 99, 235, 0.35);
}

body.theme-light .studio-menu-header {
  color: rgba(0,0,0,0.4);
  border-bottom-color: rgba(0,0,0,0.08);
}

body.theme-light .studio-menu-item {
  color: rgba(0,0,0,0.8);
}

body.theme-light .studio-menu-item:hover {
  background: rgba(0,0,0,0.05);
  color: #000;
}

body.theme-light .studio-menu-item.active {
  background: rgba(255,51,71,0.08);
  color: var(--primary);
}

select option {
  background: #12142a;
  color: rgba(255, 255, 255, 0.92);
}

/* =========================================================
   MAIN CONTAINERS
========================================================= */

.dashboard,
.infoboard,
.users,
.inventory,
.tasks,
.reinigung-mgmt,
.logistics,
.locations,
.user-settings,
.contacts,
.chat,
.time-tracking,
.management-page,
.berichtsheft-page {
  flex: 1;
  height: 100vh;
  padding: 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 1;
  animation: page-enter 0.2s var(--ease-smooth) both;
}

/* =========================================================
   PAGE HEADER UTILITY
========================================================= */

.page-eyebrow {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
}

/* =========================================================
   CARDS & PANELS
========================================================= */

.card,
.panel {
  background: rgba(255, 255, 255, 0.042);
  padding: 24px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: var(--blur-md);
          backdrop-filter: var(--blur-md);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--t-base) var(--ease-spring),
    box-shadow var(--t-base) ease,
    border-color var(--t-base) ease,
    background var(--t-base) ease;
}

/* Gradient-glow top edge - inspired by designspells.com micro-details */
.card::before,
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 30%,
    rgba(168, 85, 247, 0.40) 50%,
    rgba(255,255,255,0.22) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--t-base) ease;
}

.card:hover::before,
.panel:hover::before {
  opacity: 1;
}

/* Shimmer sweep on hover */
.card::after,
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.045) 50%,
    transparent 75%
  );
  transform: translateX(-120%) skewX(-10deg);
  transition: transform 0.65s var(--ease-smooth);
  pointer-events: none;
  border-radius: inherit;
}

.card:hover::after,
.panel:hover::after {
  transform: translateX(130%) skewX(-10deg);
}

.card:hover,
.panel:hover {
  transform: translateY(-4px) scale(1.002);
  box-shadow:
    var(--shadow-card-hover),
    0 0 0 1px rgba(168, 85, 247, 0.12),
    0 0 40px rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.20);
  background: rgba(255, 255, 255, 0.062);
}

.card h3 {
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.card {
  min-height: 138px;
}

.card-icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-glass);
  color: var(--text);
  font-size: 18px;
  transition:
    transform var(--t-fast) var(--ease-spring),
    box-shadow var(--t-base) ease;
}

.card:hover .card-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.20);
}

/* KPI number - gradient glow */
.card .number {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(140deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: filter var(--t-base) ease;
}

.card:hover .number {
  filter: drop-shadow(0 0 16px rgba(255,255,255,0.25));
}

.card small {
  display: block;
  margin-top: 12px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =========================================================
   TOAST NOTIFICATIONS
========================================================= */

.toast-container {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  padding: 13px 18px;
  border-radius: var(--r-lg);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14);
  -webkit-backdrop-filter: var(--blur-md);
          backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255,255,255,0.13);
  opacity: 0;
  transform: translateX(20px) scale(0.94);
  pointer-events: auto;
  animation: toast-enter 0.32s var(--ease-spring) both;
  position: relative;
  overflow: hidden;
}

/* Shimmer spell on toasts */
.toast::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.12) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  animation: toast-shimmer 1s var(--ease-smooth) 0.3s both;
}

@keyframes toast-shimmer {
  to { transform: translateX(120%); }
}

.toast.show {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast-success {
  background: linear-gradient(135deg, rgba(48,209,88,0.92), rgba(16,185,129,0.85));
  border-color: rgba(48,209,88,0.30);
}
.toast-warning {
  background: linear-gradient(135deg, rgba(255,214,10,0.92), rgba(234,179,8,0.85));
  border-color: rgba(255,214,10,0.30);
  color: rgba(0,0,0,0.88);
}
.toast-danger,
.toast-error {
  background: linear-gradient(135deg, rgba(255,51,71,0.92), rgba(220,38,38,0.85));
  border-color: rgba(255,51,71,0.30);
}
.toast-info {
  background: linear-gradient(135deg, rgba(10,132,255,0.92), rgba(6,182,212,0.85));
  border-color: rgba(10,132,255,0.30);
}

.toast-confirm        { min-width: 290px; pointer-events: auto; }
.toast-confirm-message{ margin-bottom: 11px; line-height: 1.5; }
.toast-confirm-actions{ display: flex; gap: 8px; justify-content: flex-end; }
.toast-confirm-btn    { padding: 7px 12px; border-radius: 9px; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; box-shadow: none; }
.toast-confirm-yes    { background: rgba(255,255,255,0.24); color: #fff; }
.toast-confirm-no     { background: rgba(0,0,0,0.18); color: rgba(255,255,255,0.70); }
.toast-confirm-btn:hover { transform: none; opacity: 0.80; }

/* =========================================================
   MODALS
========================================================= */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.60);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.modal.show,
.modal.active { display: flex; }

body:has(.modal.show) main,
body:has(.modal.active) main { overflow: hidden; }

.modal-content {
  background: linear-gradient(
    160deg,
    rgba(14, 10, 28, 0.96) 0%,
    rgba(11, 13, 30, 0.94) 100%
  );
  border: 1px solid rgba(168, 85, 247, 0.18);
  border-radius: var(--r-2xl);
  padding: 28px;
  max-width: 50vw;
  width: 100%;
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  -webkit-backdrop-filter: var(--blur-xl);
          backdrop-filter: var(--blur-xl);
  position: relative;
  animation: modal-enter 0.24s var(--ease-spring);
  display: flex;
  flex-direction: column;
  gap: 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-glass-mid) transparent;
}

.modal-content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-glass);
  flex-shrink: 0;
}

.modal-header h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

.modal-header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-shadow: none;
  /* Reset shimmer from base button */
  overflow: visible;
  position: relative;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring);
}

/* Disable shimmer ::after on icon-only close buttons */
.modal-header button::after,
.modal-close-btn::after,
[aria-label="Schließen"]::after,
[aria-label="Close"]::after {
  display: none !important;
}

.modal-header button:hover {
  background: var(--danger-glass);
  border-color: rgba(255,69,58,0.20);
  color: var(--danger);
  transform: scale(1.08);
  box-shadow: none;
}

.modal-content form { display: flex; flex-direction: column; gap: 11px; }

.modal-content label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.modal-content .checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.modal-content input:not([type="checkbox"]),
.modal-content select,
.modal-content textarea {
  padding: 11px 12px;
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  border-color: var(--border-primary);
  background: rgba(255,51,71,0.06);
  box-shadow: 0 0 0 3px rgba(255,51,71,0.09);
}

.modal-content button[type="submit"] {
  margin-top: 4px;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  box-shadow: var(--primary-glow);
}

.modal-content button[type="submit"]:hover { box-shadow: var(--primary-glow-strong); }

.reset-tutorial-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--r-md);
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.reset-tutorial-btn:hover { background: var(--glass-12); color: var(--text); }

.warning-card { border-top: 2px solid var(--warning); }
.success-card  { border-top: 2px solid var(--success); }

/* =========================================================
   LOADING SPINNER
========================================================= */

.loading-overlay,
.toast {
  animation: fade-in-up 0.30s ease both;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,9,15,0.65);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  z-index: 2200;
  border-radius: inherit;
}

.loading-overlay--fixed { position: fixed; border-radius: 0; }

.loading-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid var(--glass-12);
  border-top-color: var(--primary);
  box-shadow: 0 0 16px rgba(255,51,71,0.22);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 2201;
  animation: spin 800ms linear infinite;
}

.loading-spinner--fixed    { position: fixed; }
.loading-spinner--absolute { position: absolute; }
.content-with-spinner      { position: relative; }

/* =========================================================
   MOBILE TOPBAR
========================================================= */

.mobile-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  border-radius: var(--r-md);
  font-size: 21px;
  line-height: 1;
  z-index: 1200;
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  box-shadow: none;
  color: var(--text);
  transition:
    background var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring);
}

.mobile-menu-btn:hover {
  background: var(--glass-12);
  border-color: var(--border-glass-strong);
  transform: scale(1.05);
}

.mobile-topbar,
.sidebar-overlay {
  display: none;
}

.mobile-topbar-logo {
  display: flex;
  align-items: center;
  min-width: 0;
}

.mobile-topbar-logo img {
  width: 108px;
  height: 78px;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(255,51,71,0.22));
}

/* =========================================================
   INVITATION NOTICE
========================================================= */

.invitation-notice {
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
}

/* =========================================================
   SETTINGS LINK
========================================================= */

.settings-link {
  color: var(--text-secondary);
  padding: 9px 11px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
  margin-top: 3px;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring);
}

.settings-link::before {
  content: "⚙";
  font-size: 14px;
  opacity: 0.55;
}

.settings-link:hover,
.settings-link.active {
  background: var(--glass-8);
  border-color: var(--border-glass);
  color: var(--text);
  transform: translateX(3px);
}

/* =========================================================
   CUSTOM SELECT
========================================================= */

.c-select { display: block; width: 100%; position: relative; }

.c-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(14, 16, 34, 0.88);
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-sm);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color var(--t-fast) ease,
    background var(--t-fast) ease,
    box-shadow var(--t-base) ease;
}

.c-select__trigger:hover {
  border-color: var(--border-glass-strong);
  background: rgba(20,22,46,0.94);
  transform: none;
  box-shadow: none;
}

.c-select.open .c-select__trigger,
.c-select__trigger:focus-visible {
  border-color: var(--border-primary);
  background: rgba(20,22,46,0.96);
  box-shadow: 0 0 0 3px rgba(255,51,71,0.10);
  outline: none;
}

.c-select.disabled .c-select__trigger { opacity: 0.40; cursor: not-allowed; }

.c-select__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.c-select__arrow {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.22s var(--ease-spring), color 0.22s ease;
  display: flex; align-items: center;
}

.c-select__arrow svg { width: 100%; height: 100%; display: block; }
.c-select.open .c-select__arrow { transform: rotate(180deg); color: var(--primary); }

.c-select__menu {
  position: fixed;
  z-index: 9999;
  background: rgba(10, 12, 28, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  padding: 6px;
  -webkit-backdrop-filter: blur(48px) saturate(200%);
          backdrop-filter: blur(48px) saturate(200%);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.05),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-glass-mid) transparent;
  animation: menu-enter 0.14s var(--ease-smooth) both;
  transform-origin: top center;
  width: auto !important;
}

.c-select__option {
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
          user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.c-select__option::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.12s ease;
}

.c-select__option:hover { background: var(--glass-8); color: var(--text); }
.c-select__option.selected { background: var(--primary-glass); color: var(--primary); font-weight: 700; }
.c-select__option.selected::before { background: var(--primary); box-shadow: 0 0 5px var(--primary); }
.c-select__option.selected:hover { background: rgba(255,51,71,0.22); }

/* =========================================================
   SCROLL REVEAL ENGINE
========================================================= */

[data-reveal] {
  transition:
    opacity 0.25s var(--ease-smooth),
    transform 0.25s var(--ease-smooth),
    filter 0.25s ease,
    background-color var(--t-base) ease,
    border-color var(--t-base) ease,
    box-shadow var(--t-base) ease;
}

html.reveal-ready [data-reveal="up"]    { opacity: 0; transform: translateY(14px); }
html.reveal-ready [data-reveal="down"]  { opacity: 0; transform: translateY(-10px); }
html.reveal-ready [data-reveal="left"]  { opacity: 0; transform: translateX(-18px); }
html.reveal-ready [data-reveal="right"] { opacity: 0; transform: translateX(18px); }
html.reveal-ready [data-reveal="scale"] { opacity: 0; transform: scale(0.95); }
html.reveal-ready [data-reveal="blur"]  { opacity: 0; filter: blur(6px); transform: scale(0.98); }

[data-reveal].revealed,
html.reveal-ready [data-reveal].revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-delay="1"] { transition-delay: 0.04s; }
[data-delay="2"] { transition-delay: 0.08s; }
[data-delay="3"] { transition-delay: 0.13s; }
[data-delay="4"] { transition-delay: 0.18s; }
[data-delay="5"] { transition-delay: 0.24s; }
[data-delay="6"] { transition-delay: 0.30s; }
[data-delay="7"] { transition-delay: 0.36s; }
[data-delay="8"] { transition-delay: 0.42s; }

/* =========================================================
   ANIMATIONS
========================================================= */

/* Animation primitive used by this stylesheet. */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes nav-slide-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes menu-enter {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes toast-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animation primitive used by this stylesheet. */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Animation primitive used by this stylesheet. */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Animation primitive used by this stylesheet. */
@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation primitive used by this stylesheet. */
@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Animation primitive used by this stylesheet. */
@keyframes aurora-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(70px, -50px) scale(1.12); }
  66%  { transform: translate(-40px, 35px) scale(0.94); }
}

/* Animation primitive used by this stylesheet. */
@keyframes aurora-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, 70px) scale(1.18); }
}

/* Animation primitive used by this stylesheet. */
@keyframes aurora-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(55px, -40px) scale(1.22); }
}

/* =========================================================
   DESIGN SPELLS - Magical Microinteraction Keyframes
   Inspired by designspells.com
========================================================= */

/* Gradient border glow pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.12), 0 0 20px rgba(168, 85, 247, 0.06); }
  50%       { box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.28), 0 0 40px rgba(168, 85, 247, 0.14); }
}

/* Number pop-in with elastic spring */
@keyframes number-pop {
  0%   { transform: scale(0.72); opacity: 0; }
  65%  { transform: scale(1.06); }
  100% { transform: scale(1);    opacity: 1; }
}

/* Floating up animation */
@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Gradient text flow */
@keyframes gradient-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sparkle reveal */
@keyframes sparkle {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  50%  { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 0.8; }
}

/* Elastic badge pop */
@keyframes badge-pop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Subtle shimmer flow for progress bars */
@keyframes shimmer-flow {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Smooth reveal from bottom (used by reveal.js) */
@keyframes reveal-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   DESIGN SPELLS - Utility classes
========================================================= */

.spell-glow-pulse { animation: glow-pulse 2.5s ease-in-out infinite; }
.spell-float      { animation: float-up 4s ease-in-out infinite; }
.spell-number-pop { animation: number-pop 0.45s var(--ease-spring) both; }

/* Gradient text magic */
.gradient-text {
  background: var(--gradient-magic);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 4s ease infinite;
}

/* Glowing badge */
.badge-glow {
  animation: badge-pop 0.4s var(--ease-spring) both;
}

/* Shimmer progress bar */
.progress-shimmer {
  background: linear-gradient(
    90deg,
    var(--primary) 0%,
    rgba(168, 85, 247, 0.9) 50%,
    var(--primary) 100%
  );
  background-size: 200% auto;
  animation: shimmer-flow 2s linear infinite;
}

/* =========================================================
   SCROLLBAR - Custom styled (premium feel)
========================================================= */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168, 85, 247, 0.25) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 51, 71, 0.30), rgba(168, 85, 247, 0.30));
  border-radius: var(--r-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 51, 71, 0.55), rgba(168, 85, 247, 0.55));
}



/* Responsive overrides for this breakpoint. */
@media (max-width: 900px) {
  html, body { overflow: auto; }

  body {
    flex-direction: column;
    height: auto;
    min-height: auto;
    padding-top: 72px;
  }

  .sidebar {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - 72px);
    padding: 16px 12px;
    transform: translateX(-110%);
    transition: transform 0.30s var(--ease-spring);
    z-index: 1100;
    border-radius: 0;
    box-shadow:
      24px 0 80px rgba(255,51,71,0.10),
      var(--shadow-sidebar);
  }

  .sidebar.show { transform: translateX(0); }
  .sidebar-logo { display: none; }

  .mobile-topbar {
    position: fixed;
    inset: 0 0 auto;
    height: 72px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(9, 10, 22, 0.92);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
            backdrop-filter: blur(40px) saturate(180%);
    z-index: 1200;
  }

  .mobile-menu-btn { display: flex; }

  .dashboard,
  .infoboard,
  .users,
  .inventory,
  .tasks,
  .reinigung-mgmt,
  .logistics,
  .locations,
  .user-settings,
  .contacts,
  .chat,
  .time-tracking,
  .management-page,
  .berichtsheft-page {
    width: 100%;
    min-height: calc(100dvh - 72px) !important;
    height: auto;
    padding: 20px 16px;
    border-radius: 0;
  }

  .sidebar-overlay {
    position: fixed;
    inset: 72px 0 0;
    display: none;
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 1000;
  }

  .sidebar-overlay.show { display: block; }

  .user-box { padding: 6px 8px; }
  .user-box .user-avatar { width: 32px; height: 32px; }
  .user-box .user-name { font-size: 12px; }
  .studio-selector {
    width: min(100%, 280px);
    min-width: 0;
    font-size: 12px;
  }

  .studio-switch-btn {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12.5px;
  }

  .studio-menu {
    left: auto;
    right: 0;
    width: min(88vw, 320px);
  }
}

/* =========================================================
   LIGHT THEME - COMPREHENSIVE OVERRIDES
========================================================= */

/* Cards and Panels */
body.theme-light .card,
body.theme-light .panel,
body.theme-light .card-hover {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text);
}

/* Main containers */
body.theme-light main {
  background: #eff2f7;
}

/* Glass containers - convert to light surfaces */
body.theme-light [class*="glass"],
body.theme-light .invitation-notice,
body.theme-light .settings-link {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

/* Mobile topbar */
body.theme-light .mobile-topbar {
  background: #eff2f7;
  border-bottom: 1px solid #d6dce6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Dashboard - specific overrides */
body.theme-light .dashboard-grid,
body.theme-light .stats-grid,
body.theme-light .data-grid {
  background: transparent;
}

body.theme-light .stat-card,
body.theme-light .data-card,
body.theme-light .chart-card {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .stat-value,
body.theme-light .data-value {
  color: var(--text);
}

body.theme-light .stat-label,
body.theme-light .data-label {
  color: var(--text-secondary);
}

/* Tables */
body.theme-light table,
body.theme-light thead,
body.theme-light tbody {
  background: #ffffff;
  color: var(--text);
}

body.theme-light thead th {
  background: #eff2f7;
  border-bottom: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light tbody tr {
  border-bottom: 1px solid #d6dce6;
}

body.theme-light tbody tr:hover {
  background: #eff2f7;
}

/* Badges and tags */
body.theme-light .badge,
body.theme-light .tag {
  background: var(--primary-glass);
  color: var(--primary);
}

body.theme-light .badge.success { 
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
}

body.theme-light .badge.warning {
  background: rgba(217, 119, 6, 0.15);
  color: #d97706;
}

body.theme-light .badge.danger {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}

body.theme-light .badge.info {
  background: rgba(3, 105, 161, 0.15);
  color: #0369a1;
}

/* Form labels */
body.theme-light label,
body.theme-light .label {
  color: var(--text);
}

/* List items */
body.theme-light .list-item,
body.theme-light li {
  background: #ffffff;
  color: var(--text);
}

body.theme-light .list-item:hover {
  background: #eff2f7;
}

/* Buttons */
body.theme-light button:not(.primary) {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light button:not(.primary):hover {
  background: #eff2f7;
  border-color: #d6dce6;
}

/* Headers and titles */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6 {
  color: var(--text);
}

/* Text content */
body.theme-light p,
body.theme-light span,
body.theme-light div {
  color: inherit;
}

/* Borders */
body.theme-light hr {
  border-color: #d6dce6;
}

/* Scrollbars */
body.theme-light ::-webkit-scrollbar-track {
  background: #eff2f7;
}

body.theme-light ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Links */
body.theme-light a {
  color: var(--primary);
}

body.theme-light a:hover {
  color: var(--primary-dim);
}

/* Modals and dialogs */
body.theme-light .modal-overlay {
  background: rgba(0, 0, 0, 0.25);
}

/* Light theme modal content */
body.theme-light .modal-content {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .modal-content::before {
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
}

body.theme-light .modal-header {
  border-bottom: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .modal-header h2 {
  color: var(--text);
}

body.theme-light .modal-header button {
  background: #eff2f7;
  border: 1px solid #d6dce6;
  color: var(--text-secondary);
}

body.theme-light .modal-header button:hover {
  background: rgba(255, 51, 71, 0.08);
  border-color: rgba(255, 51, 71, 0.20);
  color: var(--primary);
}

body.theme-light .modal-content label {
  color: var(--text-secondary);
}

body.theme-light .modal-content input,
body.theme-light .modal-content select,
body.theme-light .modal-content textarea {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .modal-content input::placeholder,
body.theme-light .modal-content textarea::placeholder {
  color: var(--text-tertiary);
}

body.theme-light .modal-content input:focus,
body.theme-light .modal-content select:focus,
body.theme-light .modal-content textarea:focus {
  border-color: var(--primary);
  background: rgba(255, 51, 71, 0.04);
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.08);
}

body.theme-light .modal-content button[type="submit"] {
  background: var(--primary);
  color: #ffffff;
}

body.theme-light .modal-content button[type="submit"]:hover {
  box-shadow: var(--primary-glow);
}

body.theme-light .dialog {
  background: #ffffff;
  color: var(--text);
}

body.theme-light .dialog-header {
  border-bottom: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .dialog-footer {
  border-top: 1px solid #d6dce6;
  background: #eff2f7;
}

/* Alerts and messages */
body.theme-light .alert,
body.theme-light .message,
body.theme-light .notification {
  background: #ffffff;
  border: 1px solid #d6dce6;
  color: var(--text);
}

body.theme-light .alert.success {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.20);
}

body.theme-light .alert.warning {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.20);
}

body.theme-light .alert.error,
body.theme-light .alert.danger {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.20);
}

body.theme-light .alert.info {
  background: rgba(3, 105, 161, 0.08);
  border-color: rgba(3, 105, 161, 0.20);
}

/* Loading spinners and animations */
body.theme-light .spinner,
body.theme-light .loader {
  color: var(--primary);
}

/* Tooltips */
body.theme-light .tooltip {
  background: var(--text);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Code blocks */
body.theme-light code,
body.theme-light pre {
  background: #eff2f7;
  border: 1px solid #d6dce6;
  color: #0f172a;
}

/* Separators */
body.theme-light .divider,
body.theme-light .separator {
  background: #d6dce6;
}

/* Focus states */
body.theme-light *:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.10);
}

/* Generic Light Theme - Convert all white glass to light colors */
body.theme-light [class*="section"],
body.theme-light [class*="container"],
body.theme-light [class*="box"],
body.theme-light [class*="wrapper"] {
  background-color: inherit !important;
}

/* Fix all rgba(255, 255, 255) backgrounds in light mode */
body.theme-light *[style*="background: rgba(255"],
body.theme-light *[style*="background-color: rgba(255"] {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Overrides for common dark elements */
body.theme-light .content,
body.theme-light .page,
body.theme-light [data-page],
body.theme-light [role="main"] {
  background: #eff2f7;
  color: var(--text);
}

body.theme-light .header-bar,
body.theme-light .top-bar,
body.theme-light [data-header] {
  background: #ffffff;
  border-color: #d6dce6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* List and table styling for light mode */
body.theme-light .list,
body.theme-light ul,
body.theme-light ol {
  background: #ffffff;
}

body.theme-light .list-item,
body.theme-light li:not(.nav-item) {
  border-color: #d6dce6;
}

body.theme-light .list-item:hover,
body.theme-light li:hover {
  background: #eff2f7;
}

/* Chat and messaging */
body.theme-light .chat-container,
body.theme-light .message-list,
body.theme-light .chat-input-area {
  background: #eff2f7;
}

body.theme-light .message,
body.theme-light .chat-message {
  background: #ffffff;
  border-color: #d6dce6;
}

body.theme-light .message.own,
body.theme-light .chat-message.own {
  background: var(--primary-glass);
  border-color: var(--primary);
}

/* Forms and fields in light mode */
body.theme-light form,
body.theme-light .form-section {
  background: transparent;
}

body.theme-light .form-group,
body.theme-light .field-group {
  background: #ffffff;
}

/* Task and item lists */
body.theme-light .task,
body.theme-light .todo-item,
body.theme-light .item-card {
  background: #ffffff;
  border-color: #d6dce6;
}

body.theme-light .task:hover,
body.theme-light .todo-item:hover,
body.theme-light .item-card:hover {
  background: #eff2f7;
  border-color: #d6dce6;
}

body.theme-light .task.completed,
body.theme-light .todo-item.completed {
  background: rgba(5, 150, 105, 0.08);
  border-color: rgba(5, 150, 105, 0.20);
}

/* Charts and graphs */
body.theme-light .chart,
body.theme-light .graph,
body.theme-light svg text {
  color: var(--text);
  fill: var(--text);
}

body.theme-light svg line,
body.theme-light svg path {
  stroke: var(--text-tertiary);
}

/* Breadcrumbs */
body.theme-light .breadcrumb {
  background: #eff2f7;
  border-color: #d6dce6;
}

body.theme-light .breadcrumb-item {
  color: var(--text-secondary);
}

body.theme-light .breadcrumb-item.active {
  color: var(--text);
}

/* Tags and labels */
body.theme-light .tag,
body.theme-light .label,
body.theme-light .chip {
  background: var(--primary-glass);
  border-color: var(--primary);
  color: var(--primary);
}

/* Search and filter areas */
body.theme-light .search-box,
body.theme-light .filter-area,
body.theme-light .search-container {
  background: #eff2f7;
  border-color: #d6dce6;
}

/* Empty states */
body.theme-light .empty-state,
body.theme-light [data-empty] {
  color: var(--text-secondary);
}

body.theme-light .empty-state-icon {
  color: var(--text-tertiary);
  opacity: 0.5;
}

/* Responsive overrides for this breakpoint. */
@media (max-width: 480px) {
  body { padding-top: 64px; }

  .mobile-topbar { height: 64px; padding: 8px 14px; }

  .mobile-topbar-logo img { width: 96px; height: 68px; }

  .mobile-menu-btn { width: 40px; height: 40px; font-size: 19px; }

  .sidebar {
    top: 64px;
    width: 100vw;
    max-width: 100vw;
    height: calc(100dvh - 64px);
  }

  .sidebar-overlay { inset: 64px 0 0; }

  .data-user-name { display: none; }
}

/* =========================================================
   CONFIRM DIALOG - globales Premium-Bestätigungsfenster
========================================================= */

.fp-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.2s, backdrop-filter 0.2s;
}

.fp-confirm-overlay--in {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fp-confirm-overlay--out {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.fp-confirm-box {
  width: 100%;
  max-width: 360px;
  background: rgba(18, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 28px 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 2px 0 rgba(255,255,255,0.05) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}

.fp-confirm-overlay--in .fp-confirm-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.fp-confirm-overlay--out .fp-confirm-box {
  transform: scale(0.95) translateY(6px);
  opacity: 0;
}

.fp-confirm-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 4px;
}

.fp-confirm-icon svg { width: 20px; height: 20px; }

.fp-confirm-icon--danger {
  background: rgba(255, 69, 58, 0.14);
  border: 1px solid rgba(255, 69, 58, 0.25);
  color: #ff6961;
}

.fp-confirm-icon--info {
  background: rgba(10, 132, 255, 0.12);
  border: 1px solid rgba(10, 132, 255, 0.25);
  color: #4db8ff;
}

.fp-confirm-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.fp-confirm-msg {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 8px;
  line-height: 1.55;
}

.fp-confirm-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.fp-confirm-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s, transform 0.12s;
  outline: none;
}

.fp-confirm-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

.fp-confirm-btn:active { transform: scale(0.97); }

.fp-confirm-btn--cancel {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.fp-confirm-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fp-confirm-btn--danger {
  background: rgba(255, 69, 58, 0.85);
  border-color: rgba(255, 69, 58, 0.6);
  color: #fff;
}

.fp-confirm-btn--danger:hover { background: rgba(255, 69, 58, 1); }

.fp-confirm-btn--ok {
  background: rgba(10, 132, 255, 0.85);
  border-color: rgba(10, 132, 255, 0.6);
  color: #fff;
}

.fp-confirm-btn--ok:hover { background: rgba(10, 132, 255, 1); }

/* =========================================================
   RESPONSIVE - Mobile & Tablet Optimization
========================================================= */

/* Responsive overrides for this breakpoint. */
@media (max-width: 768px) {
  /* Sidebar user profile responsive */
  .sidebar-user-profile-btn {
    padding: 9px 10px;
    border-radius: var(--r-md);
  }

  .sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
  }

  .sidebar-user-name {
    font-size: 12px;
  }

  .sidebar-user-role {
    font-size: 9.5px;
  }

  .sidebar-user-chevron {
    width: 13px;
    height: 13px;
  }

  .sidebar-user-menu-item {
    padding: 10px 11px;
    font-size: 12.5px;
  }

  .sidebar-user-menu {
    left: -6px;
    right: -6px;
    margin-bottom: 10px;
  }
}

/* Responsive overrides for this breakpoint. */
@media (max-width: 480px) {
  /* Ultra-compact mobile layout */
  .sidebar-user-profile-btn {
    padding: 8px 9px;
  }

  .sidebar-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 11px;
  }

  .sidebar-user-info {
    gap: 1px;
  }

  .sidebar-user-name {
    font-size: 11.5px;
  }

  .sidebar-user-role {
    font-size: 9px;
  }

  .sidebar-user-chevron {
    width: 12px;
    height: 12px;
  }

  .sidebar-user-menu {
    padding: 5px 0;
  }

  .sidebar-user-menu-item {
    padding: 9px 10px;
    font-size: 12px;
    gap: 8px;
  }

  .sidebar-user-menu-icon {
    width: 15px;
    height: 15px;
  }
}

/* =========================================================
   ICON BUTTONS
========================================================= */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--r-lg, 10px);
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
  transition:
    background var(--t-fast) ease,
    color var(--t-fast) ease,
    border-color var(--t-fast) ease,
    transform var(--t-fast) var(--ease-spring);
}

.icon-btn:hover {
  background: var(--glass-16);
  border-color: var(--border-glass-strong);
  color: var(--text-primary);
  transform: scale(1.06);
  box-shadow: none;
}

.icon-btn svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.icon-btn.delete-btn:hover,
.icon-btn.delete-time-btn:hover,
.icon-btn.delete-maintenance-btn:hover,
.icon-btn.delete-static-product-btn:hover,
.icon-btn.remove-task-btn:hover {
  background: var(--danger-glass);
  border-color: rgba(255,69,58,0.20);
  color: var(--danger);
}

.icon-btn.activate-btn:hover {
  background: rgba(48,209,88,0.10);
  border-color: rgba(48,209,88,0.25);
  color: #30d158;
}

.icon-btn.disable-btn:hover {
  background: rgba(255,159,10,0.10);
  border-color: rgba(255,159,10,0.25);
  color: #ff9f0a;
}

.user-username {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  border-radius: 5px;
  padding: 1px 6px;
  vertical-align: middle;
  letter-spacing: 0;
}

/* =========================================================
   DESIGN SPELLS - Global Page Header Upgrade
   Consistent gradient top-line on all panel::before elements
========================================================= */

/* All panels & forms get the gradient top shimmer line */
.panel,
.card {
  /* Gradient border paint via box-shadow trick */
  --panel-glow: 0 0 0 0 transparent;
}

/* Elevated sections on hover */
section.panel:hover,
.panel.elevated:hover {
  box-shadow:
    var(--shadow-card-hover),
    0 0 60px rgba(168, 85, 247, 0.06);
}

/* =========================================================
   DESIGN SPELLS - Input Focus Spell
   Purple glow ring on focus (not just red)
========================================================= */

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.55);
  background: var(--glass-12);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.14),
    0 0 0 1px rgba(255, 51, 71, 0.08);
}

/* =========================================================
   DESIGN SPELLS - Page H1 Titles (global)
========================================================= */

h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* =========================================================
   DESIGN SPELLS - Status Badges Upgrade
========================================================= */

.badge,
[class*="status-badge"],
[class*="-badge"] {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* =========================================================
   DESIGN SPELLS - Selection Color
========================================================= */

::selection {
  background: rgba(168, 85, 247, 0.30);
  color: #fff;
}

/* =========================================================
   DESIGN SPELLS - Sidebar glow bottom gradient
========================================================= */

.sidebar {
  background: linear-gradient(
    180deg,
    rgba(9, 10, 22, 0.88) 0%,
    rgba(12, 8, 28, 0.92) 100%
  );
}

/* =========================================================
   SHIMMER RESET - Icon-only & transparent buttons
   Prevents button::after shimmer from overlaying SVG icons
========================================================= */

.studio-switch-btn::after,
.mobile-menu-btn::after,
.panel-link::after,
.sidebar-user-profile-btn::after,
.studio-menu-item::after,
.toast-confirm-btn::after,
.modal-close-btn::after {
  display: none !important;
}

.studio-switch-btn,
.mobile-menu-btn,
.panel-link,
.studio-menu-item,
.toast-confirm-btn {
  overflow: visible;
}

/* =========================================================
   LIVE AUDIO CONTROL
========================================================= */

.live-audio-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 5000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid var(--border-glass-mid);
  border-radius: var(--r-full);
  background: rgba(18, 20, 42, 0.86);
  color: var(--text);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.live-audio-toggle::after {
  display: none;
}

.live-audio-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.live-audio-toggle.is-muted {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  box-shadow: none;
}

body.theme-light .live-audio-toggle {
  background: #ffffff;
  border-color: #d6dce6;
  color: var(--text);
}

body.theme-light .live-audio-toggle.is-muted {
  background: #eff2f7;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .live-audio-toggle {
    right: 14px;
    bottom: 14px;
  }
}

/* =========================================================
   CROSS-DOCUMENT VIEW TRANSITIONS (Chrome 111+)
   Smooth fade-out on navigate away, instant paint on arrive
========================================================= */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 100ms ease-in vt-fade-out;
}

::view-transition-new(root) {
  animation: none;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@supports (view-transition-name: none) {
  main, .dashboard, .chat, .time-tracking {
    animation: none;
  }
}

/* =========================================================
   MONTH CALENDAR (shared component)
   Compact 7-column day grid used by marketing + marketing
   management to jump straight to a day instead of scrolling
   a flat list. Shared here so both pages stay visually
   consistent and no rules get duplicated per page.
========================================================= */

.month-calendar {
  background: var(--glass-8);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  padding: 20px;
  backdrop-filter: var(--blur-sm);
  box-shadow: var(--shadow-card);
}

.month-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}

.month-calendar-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.month-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 40px;
  background: var(--glass-8);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast) var(--ease-snappy), border-color var(--t-fast) var(--ease-snappy), transform var(--t-fast) var(--ease-spring);
}

.cal-day:hover {
  background: var(--glass-18);
  transform: translateY(-1px);
}

.cal-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 51, 71, 0.30);
}

.cal-day.is-today {
  border-color: var(--border-primary);
  color: var(--primary);
}

.cal-day.is-selected {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

.cal-day.is-selected:hover {
  background: var(--gradient-brand);
  transform: none;
}

.cal-day.has-content {
  background: color-mix(in srgb, var(--success) 14%, var(--glass-8));
  border-color: color-mix(in srgb, var(--success) 35%, var(--border-glass));
}

.cal-day.has-content:hover {
  background: color-mix(in srgb, var(--success) 22%, var(--glass-18));
}

.cal-day.has-content::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--success);
}

.cal-day.is-selected.has-content::after {
  background: #fff;
}

/* =========================================================
   TOGGLE SWITCH (shared)
   Drop-in replacement for a plain checkbox: add class
   "toggle-switch" directly to the <input type="checkbox">,
   no extra markup required. Animated slide + color change.
========================================================= */

.toggle-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: var(--r-full);
  background: var(--glass-8);
  border: 1px solid var(--border-glass-mid);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--t-fast) var(--ease-spring);
}

.toggle-switch:checked {
  background: var(--primary);
  border-color: transparent;
}

.toggle-switch:checked::after {
  transform: translateX(18px);
  background: #fff;
}

.toggle-switch:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.toggle-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================
   REDUCED MOTION
   Kill decorative/ambient loops and long entrances; keep
   state-change feedback but make it instant.
========================================================= */

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

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  @view-transition {
    navigation: none;
  }
}