/*
 * Plantlet LAB Soft — plantlet.css
 * 2 motywy: Fiori (SAP Enterprise), Botanic (premium)
 * Copyright © 2024–2026 Plantlet LAB Soft
 */

@font-face {
  font-family: 'Azonix';
  src: url('Azonix.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Albert+Sans:wght@400;500;600;700&family=Departure+Mono:wght@400;700&display=swap');
@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:400,500,600,700,800|albert-sans:400,500,600,700&display=swap');

/* ═══════════════════════════════════════════════════════════════
   MOTYW 2 — FIORI (SAP Quartz Light)
   ═══════════════════════════════════════════════════════════════ */
body.theme-fiori {
  /* ── SAP Fiori — Enterprise Productive ──────────────────────
     Granatowy header #354A5F, accent niebieski #0854A0,
     tło #F5F6F7, powierzchnia biała, krawędzie #D5DADD
     Fonts: Inter (bez serifa, gęsty, czytelny)
  ─────────────────────────────────────────────────────────── */
  --bg:           #F5F6F7;
  --surface:      #FFFFFF;
  --surface2:     #FAFAFA;
  --surface3:     #F0F1F3;
  --border:       #D5DADD;
  --border2:      #EDEEF0;
  --text:         #32363A;
  --text2:        #6A6D70;
  --muted:        #89919A;
  --accent:       #0854A0;
  --accent2:      #0A68C8;
  --accent-bg:    #EDF5FF;
  --accent-light: #C5DCF5;
  --elon:         #5B3D8A;
  --elon-bg:      #F0ECFA;
  --prerooting:   #C04E00;
  --prerooting-bg:#FEF5EA;
  --rooting:      #256F3A;
  --rooting-bg:   #F2FAE7;
  --warn:         #C04E00;
  --danger:       #BB0000;
  --info:         #0854A0;
  --color-text-primary:       #32363A;
  --color-text-secondary:     #6A6D70;
  --color-text-tertiary:      #89919A;
  --color-text-danger:        #BB0000;
  --color-text-warning:       #C04E00;
  --color-text-success:       #256F3A;
  --color-text-info:          #0854A0;
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F5F6F7;
  --color-background-info:      #EDF5FF;
  --color-background-success:   #F2FAE7;
  --color-background-warning:   #FEF5EA;
  --color-background-danger:    #FFEBEB;
  --color-border-primary:   #B3B7BB;
  --color-border-secondary: #D5DADD;
  --color-border-tertiary:  #EDEEF0;
  --color-border-info:      #90C4F0;
  --color-border-success:   #D3E8BE;
  --color-border-warning:   #F7C896;
  --color-border-danger:    #F5AAAA;
  --header-bg:    #354A5F;
  --header-text:  #FFFFFF;
  --nav-bg:       #FFFFFF;
  --nav-text:     #6A6D70;
  --nav-active:   #0854A0;
  --nav-active-border: #0854A0;
  --display: 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --r:    3px;
  --r-lg: 4px;
  --shadow-sm: 0 1px 4px rgba(53,74,95,.08);
  --shadow:    0 2px 8px rgba(53,74,95,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 16px rgba(53,74,95,.14);
}

/* ═══════════════════════════════════════════════════════════════
   MOTYW 3 — BOTANIC (premium forest)
   ═══════════════════════════════════════════════════════════════ */
body.theme-botanic {
  --bg:           #F4F3EC;
  --surface:      #FFFFFF;
  --surface2:     #FAF9F2;
  --surface3:     #F0ECDD;
  --border:       #E0DCCB;
  --border2:      #EDE9DA;
  --text:         #1A2F1A;
  --text2:        #4A5A4A;
  --muted:        #786F5A;
  --accent:       #1A2F1A;
  --accent2:      #2D4A2D;
  --accent-bg:    #E8EFE3;
  --accent-light: #C5D9A8;
  --elon:         #5B3D8A;
  --elon-bg:      #EDE5F8;
  --prerooting:   #8A6520;
  --prerooting-bg:#F5EFDB;
  --rooting:      #4A7A2F;
  --rooting-bg:   #E8EFE3;
  --warn:         #8A6520;
  --danger:       #B85447;
  --info:         #1F6FEB;
  --color-text-primary:   #1A2F1A;
  --color-text-secondary: #786F5A;
  --color-text-danger:    #B85447;
  --color-text-warning:   #8A6520;
  --color-text-info:      #1F6FEB;
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F4F3EC;
  --color-border-secondary: #E0DCCB;
  --header-bg:    #1A2F1A;
  --header-text:  #E8E5D8;
  --nav-bg:       #F4F3EC;
  --nav-text:     #786F5A;
  --nav-active:   #1A2F1A;
  --nav-active-border: #1A2F1A;
  --display: 'Fraunces', Georgia, serif;
  --body:    'Work Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --r:    8px;
  --r-lg: 14px;
  --shadow-sm: 0 1px 4px rgba(26,47,26,.06);
  --shadow:    0 2px 12px rgba(26,47,26,.08);
  --shadow-lg: 0 8px 32px rgba(26,47,26,.12);
}

/* ═══════════════════════════════════════════════════════════════
   MOTYW 4 — SAGE PRO (Ciemnozielony header, Plus Jakarta Sans)
   ═══════════════════════════════════════════════════════════════ */
body.theme-sage {
  --bg:           #F4F6F3;
  --surface:      #FFFFFF;
  --surface2:     #EEF2EB;
  --surface3:     #E3EAE0;
  --border:       #D8E0D3;
  --border2:      #E8EDE5;
  --text:         #111D0F;
  --text2:        #2D3D28;
  --muted:        #6B7C64;
  --accent:       #15803D;
  --accent2:      #166534;
  --accent-bg:    #F0FDF4;
  --accent-light: #BBF7D0;
  --elon:         #6D28D9;
  --elon-bg:      #EDE9FE;
  --prerooting:   #B45309;
  --prerooting-bg:#FEF3C7;
  --rooting:      #15803D;
  --rooting-bg:   #F0FDF4;
  --warn:         #B45309;
  --danger:       #B91C1C;
  --info:         #1D4ED8;
  --color-text-primary:       #111D0F;
  --color-text-secondary:     #2D3D28;
  --color-text-tertiary:      #6B7C64;
  --color-text-danger:        #B91C1C;
  --color-text-warning:       #B45309;
  --color-text-success:       #15803D;
  --color-text-info:          #1D4ED8;
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F4F6F3;
  --color-background-info:      #EFF6FF;
  --color-background-success:   #F0FDF4;
  --color-background-warning:   #FFFBEB;
  --color-background-danger:    #FEF2F2;
  --color-border-primary:   #C3CFBD;
  --color-border-secondary: #D8E0D3;
  --color-border-tertiary:  #E8EDE5;
  --color-border-info:      #BFDBFE;
  --color-border-success:   #BBF7D0;
  --color-border-warning:   #FDE68A;
  --color-border-danger:    #FECACA;
  --header-bg:    #1A3323;
  --header-text:  #E8F0E5;
  --nav-bg:       #FFFFFF;
  --nav-text:     #6B7C64;
  --nav-active:   #15803D;
  --nav-active-border: #15803D;
  --display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body:    'Albert Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:    'Departure Mono', 'JetBrains Mono', monospace;
  --r:    4px;
  --r-lg: 6px;
  --shadow-sm: 0 1px 3px rgba(17,29,15,.06);
  --shadow:    0 2px 8px rgba(17,29,15,.08);
  --shadow-lg: 0 6px 20px rgba(17,29,15,.10);
}

/* ═══════════════════════════════════════════════════════════════
   MOTYW 5 — BOTANIC 2.0 (Premium Forest, Ewolucja)
   Ciemnozielony header, kremowe tło, serif nagłówki
   ═══════════════════════════════════════════════════════════════ */
body.theme-botanic2 {
  --bg:           #F5F3EE;
  --surface:      #FDFCF8;
  --surface2:     #F0EDE6;
  --surface3:     #E6E2D8;
  --border:       #DDD8CB;
  --border2:      #EAE6DC;
  --text:         #1C2B1C;
  --text2:        #3D4F37;
  --muted:        #786F5A;
  --accent:       #1D3A1D;
  --accent2:      #2A4A2A;
  --accent-bg:    #EBF2E8;
  --accent-light: #B8D4A8;
  --elon:         #5B3D8A;
  --elon-bg:      #EDE5F8;
  --prerooting:   #96692A;
  --prerooting-bg:#F5EFDB;
  --rooting:      #4A7A2F;
  --rooting-bg:   #E8F0E3;
  --warn:         #96692A;
  --danger:       #B54040;
  --info:         #2A5FA8;
  --color-text-primary:       #1C2B1C;
  --color-text-secondary:     #3D4F37;
  --color-text-tertiary:      #786F5A;
  --color-text-danger:        #B54040;
  --color-text-warning:       #96692A;
  --color-text-success:       #4A7A2F;
  --color-text-info:          #2A5FA8;
  --color-background-primary:   #FDFCF8;
  --color-background-secondary: #F5F3EE;
  --color-background-info:      #E8EEF8;
  --color-background-success:   #EBF2E8;
  --color-background-warning:   #F5EFDB;
  --color-background-danger:    #F8EBEB;
  --color-border-primary:   #C8C2B5;
  --color-border-secondary: #DDD8CB;
  --color-border-tertiary:  #EAE6DC;
  --color-border-info:      #B0C4E0;
  --color-border-success:   #B8D4A8;
  --color-border-warning:   #E5CFA0;
  --color-border-danger:    #E0AAAA;
  --header-bg:    #1D3A1D;
  --header-text:  #E8EFE4;
  --nav-bg:       #F0EDE6;
  --nav-text:     #786F5A;
  --nav-active:   #1D3A1D;
  --nav-active-border: #1D3A1D;
  --display: 'Fraunces', Georgia, serif;
  --body:    'Work Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --r:    8px;
  --r-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(26,47,26,.06);
  --shadow:    0 2px 12px rgba(26,47,26,.08);
  --shadow-lg: 0 12px 40px rgba(26,47,26,.14);
}

/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA PER-MOTYW — HEADER
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   JASNE NAGŁÓWKI — override białych kolorów na ciemne
   Dotyczy: Linear + Fiori (header-bg: biały / jasny)
   ═══════════════════════════════════════════════════════════════ */

/* Logo i tekst */
/* Tydzień / week label */
/* Save indicator */
/* Save button (plik) */
/* User badge */
/* User avatar — ciemny tło w jasnym headerze */
body.theme-fiori .user-avatar {
  background: #0070F2;
  border-color: rgba(0,112,242,.2);
}

/* Lang switcher (PL/EN) */
/* Header role label */
/* License banner (jeśli w headerze) */
/* Fiori — niebieski avatar dla rozróżnienia */
body.theme-fiori .user-badge {
  border-color: rgba(0,112,242,.15);
  background: rgba(0,112,242,.06);
}
/* ── Fiori — granatowy header (SAP Shell) ──────────────────── */
body.theme-fiori header {
  background: #354A5F !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  border-bottom: none;
}
body.theme-fiori .logo {
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body.theme-fiori .logo-app-name  { color: #FFFFFF !important; }
body.theme-fiori .logo-company-name { color: rgba(255,255,255,0.65) !important; }
body.theme-fiori .header-week    { color: rgba(255,255,255,0.55) !important; }
body.theme-fiori .user-name      { color: #FFFFFF !important; }
body.theme-fiori .user-role      { color: rgba(255,255,255,0.6) !important; }
body.theme-fiori .save-indicator {
  background: rgba(255,255,255,0.1) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.15) !important;
}
body.theme-fiori .save-btn-file {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #FFFFFF !important;
}
body.theme-fiori .user-badge {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.2) !important;
}
body.theme-fiori .user-avatar {
  background: #0854A0 !important;
  border-color: rgba(8,84,160,0.4) !important;
}
body.theme-fiori header button {
  color: #FFFFFF !important;
}
body.theme-fiori #hdr-lang-pl {
  background: rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
}
body.theme-fiori #hdr-lang-en  { color: rgba(255,255,255,0.5) !important; }
body.theme-fiori #hdr-role      { color: rgba(255,255,255,0.5) !important; }
body.theme-fiori .save-dot.no-file { background: rgba(255,255,255,0.3) !important; }

/* Nawigacja — biały pasek pod headerem z niebieskim podkreśleniem */
body.theme-fiori nav {
  background: #FFFFFF;
  border-bottom: 1px solid #D5DADD;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
body.theme-fiori nav .nav-btn {
  color: #32363A;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  height: 42px;
}
body.theme-fiori nav .nav-btn:hover {
  background: #F5F6F7;
  color: #0854A0;
}
body.theme-fiori nav .nav-btn.active {
  color: #0854A0;
  font-weight: 500;
  border-bottom: 2px solid #0854A0;
  background: transparent;
}

/* Karty — prostokątne rogi, cienka ramka */
body.theme-fiori .card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: none;
}
body.theme-fiori .card-header {
  background: #FAFAFA;
  border-bottom: 1.5px solid #D5DADD;
  border-radius: 4px 4px 0 0;
}
body.theme-fiori .card-title {
  font-size: 15px;
  font-weight: 500;
  color: #32363A;
}

/* Przyciski — kwadratowe rogi, border-based */
body.theme-fiori .btn {
  border-radius: var(--r);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
body.theme-fiori .btn-primary {
  background: #0854A0;
  border-color: #0854A0;
  color: #FFFFFF;
}
body.theme-fiori .btn-primary:hover { background: #064D96; border-color: #064D96; }
body.theme-fiori .btn-secondary { border-color: #B3B7BB; color: #32363A; background: #FFFFFF; }
body.theme-fiori .btn-secondary:hover { background: #F5F6F7; }

/* Tabela wiersze */
body.theme-fiori table thead th {
  background: #FAFAFA;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #89919A;
  border-bottom: 1px solid #D5DADD;
  padding: 8px 12px;
}
body.theme-fiori table tbody tr:hover { background: #F5F7FF; }

/* Badge statusów — pill z kolorem i obramowaniem */
body.theme-fiori .badge-green, body.theme-fiori .badge-success {
  background: #F2FAE7; color: #256F3A; border: 1px solid #D3E8BE;
  border-radius: 10px; font-size: 12px; font-weight: 500;
}
body.theme-fiori .badge-blue, body.theme-fiori .badge-info {
  background: #EDF5FF; color: #0854A0; border: 1px solid #C5DCF5;
  border-radius: 10px; font-size: 12px; font-weight: 500;
}
body.theme-fiori .badge-amber, body.theme-fiori .badge-warning {
  background: #FEF5EA; color: #C04E00; border: 1px solid #F7C896;
  border-radius: 10px; font-size: 12px; font-weight: 500;
}
body.theme-fiori .badge-red, body.theme-fiori .badge-danger {
  background: #FFEBEB; color: #BB0000; border: 1px solid #F5AAAA;
  border-radius: 10px; font-size: 12px; font-weight: 500;
}
body.theme-fiori .badge-gray {
  background: #F5F6F7; color: #6A6D70; border: 1px solid #D5DADD;
  border-radius: 10px; font-size: 12px; font-weight: 500;
}

/* Inputy */
body.theme-fiori input, body.theme-fiori select, body.theme-fiori textarea {
  border: 1px solid #B3B7BB;
  border-radius: var(--r);
  font-family: 'Inter', sans-serif;
}
body.theme-fiori input:focus, body.theme-fiori select:focus, body.theme-fiori textarea:focus {
  border-color: #0854A0;
  box-shadow: 0 0 0 2px rgba(8,84,160,.15);
}

/* Stat-box / KPI karta z lewym paskiem kolorowym */
body.theme-fiori .stat-box {
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

/* Separator / section label styl SAP */
body.theme-fiori .section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #89919A;
  font-weight: 400;
  padding: 6px 0 4px;
}

/* Botanic — ciemnozielony header, serif logo */
body.theme-botanic .logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #E8E5D8;
}
body.theme-botanic nav {
  background: #F4F3EC;
  border-bottom: 1px solid #E0DCCB;
}
body.theme-botanic nav .nav-btn {
  font-family: 'Work Sans', sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA — KARTY I KOMPONENTY
   ═══════════════════════════════════════════════════════════════ */

/* Fiori — płaskie karty (typowy SAP Quartz) */
body.theme-fiori .card {
  border-radius: 6px;
  border: 1px solid #D9D9D9;
  box-shadow: none;
}
body.theme-fiori .btn-primary {
  background: #0070F2;
  border-color: #0070F2;
}
body.theme-fiori .btn-primary:hover { background: #0860D0; }
body.theme-fiori th { background: #FAFBFC; }

/* Botanic — karty z kości słoniowej + serif nagłówki sekcji */
body.theme-botanic .card {
  background: #FFFFFF;
  border-color: #E0DCCB;
}
body.theme-botanic .section-heading,
body.theme-botanic .card-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
}
body.theme-botanic .btn-primary {
  background: #1A2F1A;
  border-color: #1A2F1A;
}
body.theme-botanic .btn-primary:hover { background: #0F1E0F; }

/* Linear — przyciski czarne, krawędziowe */
/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA — BADGES I STATUSY
   ═══════════════════════════════════════════════════════════════ */
body.theme-fiori .badge-accepted  { background: #EAF2FD; color: #0070F2; border: 1px solid #0070F2; }
body.theme-fiori .badge-completed { background: #E8F5E9; color: #107E3E; }

body.theme-botanic .badge-accepted  { background: #E8EFE3; color: #4A7A2F; }
body.theme-botanic .badge-completed { background: #E8EFE3; color: #1A2F1A; }

/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA — LOGIN SCREEN
   ═══════════════════════════════════════════════════════════════ */
body.theme-fiori #login-screen {
  background: linear-gradient(135deg, #EAF2FD 0%, #F5F6F7 100%);
}

body.theme-botanic #login-screen {
  background: #F4F3EC;
}
body.theme-botanic .login-card {
  border: 1px solid #E0DCCB;
}

/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA — SAGE PRO
   ═══════════════════════════════════════════════════════════════ */

/* Header — ciemnozielony */
body.theme-sage header {
  background: #1A3323 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  border-bottom: none;
}
body.theme-sage .logo-app-name     { color: rgba(255,255,255,.95) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
body.theme-sage .logo-company-name { color: rgba(255,255,255,.45) !important; }
body.theme-sage .header-week       { color: rgba(255,255,255,.4) !important; }
body.theme-sage .user-name         { color: rgba(255,255,255,.92) !important; }
body.theme-sage .save-indicator {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.8) !important;
  border-color: rgba(255,255,255,.15) !important;
}
body.theme-sage .save-btn-file {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.8) !important;
}
body.theme-sage .user-badge {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
}
body.theme-sage .user-avatar       { background: #15803D !important; border-color: rgba(21,128,61,.4) !important; }
body.theme-sage header button      { color: rgba(255,255,255,.65) !important; }
body.theme-sage #hdr-lang-pl       { background: rgba(255,255,255,.18) !important; color: white !important; }
body.theme-sage #hdr-lang-en       { color: rgba(255,255,255,.4) !important; }
body.theme-sage #hdr-role          { color: rgba(255,255,255,.4) !important; }
body.theme-sage .save-dot.no-file  { background: rgba(255,255,255,.3) !important; }

/* Nawigacja */
body.theme-sage nav {
  background: #FFFFFF;
  border-bottom: 1px solid #D8E0D3;
  box-shadow: 0 1px 0 #E8EDE5;
}
body.theme-sage nav .nav-btn {
  color: #6B7C64;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  border-bottom: 2px solid transparent;
}
body.theme-sage nav .nav-btn:hover { background: #EEF2EB; color: #2D3D28; border-radius: var(--r); }
body.theme-sage nav .nav-btn.active {
  color: #15803D;
  font-weight: 600;
  background: transparent;
  border-radius: 0;
  border-bottom-color: #15803D;
}

/* Karty */
body.theme-sage .card {
  background: #FFFFFF;
  border: 1px solid #D8E0D3;
  box-shadow: 0 1px 3px rgba(17,29,15,.06);
  border-radius: 10px;
}
body.theme-sage .card-header {
  background: #EEF2EB;
  border-bottom: 1.5px solid #D8E0D3;
  border-radius: 10px 10px 0 0;
  /* Marginy już obsługiwane globalnie przez .card-header */
}
body.theme-sage .card-title  { font-size: 14px; font-weight: 700; color: #111D0F; letter-spacing: -.01em; }
body.theme-sage .card:hover  { box-shadow: 0 2px 8px rgba(17,29,15,.08); }

/* Przyciski */
body.theme-sage .btn { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; }
body.theme-sage .btn-primary { background: #15803D; border-color: #15803D; box-shadow: 0 1px 2px rgba(21,128,61,.2); }
body.theme-sage .btn-primary:hover { background: #166534; border-color: #166534; box-shadow: 0 3px 10px rgba(21,128,61,.28); transform: translateY(-1px); }
body.theme-sage .btn-secondary { background: #FFFFFF; border-color: #D8E0D3; color: #2D3D28; }
body.theme-sage .btn-secondary:hover { background: #EEF2EB; border-color: #15803D; color: #15803D; }
body.theme-sage .btn-outline { border-color: #15803D; color: #15803D; }
body.theme-sage .btn-outline:hover { background: #F0FDF4; }

/* Tabela */
body.theme-sage table thead th { background: #EEF2EB; color: #6B7C64; border-bottom: 1px solid #D8E0D3; }
body.theme-sage table tbody tr:hover td { background: #F0FDF4; }
body.theme-sage table tbody td { border-bottom-color: #E8EDE5; }

/* Inputy */
body.theme-sage input, body.theme-sage select, body.theme-sage textarea {
  border-color: #D8E0D3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border-radius: 8px;
  background: #FFFFFF;
}
body.theme-sage input:focus, body.theme-sage select:focus, body.theme-sage textarea:focus {
  border-color: #15803D;
  box-shadow: 0 0 0 3px rgba(21,128,61,.1);
}

/* Stage pills */
body.theme-sage .s-mult  { background: #F0FDF4; color: #15803D; }
body.theme-sage .s-root  { background: #FEF3C7; color: #92400E; }

/* Stat-box */
body.theme-sage .stat-box { border-left: 3px solid #15803D; }

/* Badges — z obramowaniem */
body.theme-sage .badge { border: 1px solid transparent; border-radius: 20px; }
body.theme-sage .badge-accepted  { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
body.theme-sage .badge-completed { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
body.theme-sage .badge-green     { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
body.theme-sage .badge-blue      { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
body.theme-sage .badge-amber     { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
body.theme-sage .badge-red       { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
body.theme-sage .badge-gray      { background: #EEF2EB; color: #6B7C64; border-color: #D8E0D3; }
body.theme-sage .badge-cancelled { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
body.theme-sage .badge-draft     { background: #EEF2EB; color: #6B7C64; border-color: #D8E0D3; }
body.theme-sage .badge-production { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }

/* Alert banners */
body.theme-sage .alert-info  { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
body.theme-sage .alert-warn  { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
body.theme-sage .alert-error { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

/* Login */
body.theme-sage #login-screen { background: linear-gradient(160deg, #1A3323 0%, #22472E 40%, #F4F6F3 100%); }
body.theme-sage .login-card   { border: 1px solid #D8E0D3; box-shadow: 0 8px 32px rgba(17,29,15,.12); }

/* Modal */
body.theme-sage .modal { border-radius: 14px; }
body.theme-sage .modal-header { background: #EEF2EB; border-bottom-color: #D8E0D3; }
body.theme-sage .modal-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; }
body.theme-sage .modal-footer { background: #EEF2EB; border-top-color: #D8E0D3; }

/* Section label */
body.theme-sage .section-label { color: #6B7C64; border-bottom-color: #D8E0D3; }

/* ═══════════════════════════════════════════════════════════════
   DOPASOWANIA — BOTANIC 2.0
   ═══════════════════════════════════════════════════════════════ */

/* Header — ciemnozielony */
body.theme-botanic2 header {
  background: #1D3A1D !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.2);
  border-bottom: none;
}
body.theme-botanic2 .logo-app-name     { color: #E8EFE4 !important; font-family: 'Fraunces', serif !important; }
body.theme-botanic2 .logo-company-name { color: rgba(232,239,228,.55) !important; }
body.theme-botanic2 .header-week       { color: rgba(232,239,228,.45) !important; }
body.theme-botanic2 .user-name         { color: #E8EFE4 !important; }
body.theme-botanic2 .save-indicator {
  background: rgba(255,255,255,.10) !important;
  color: #E8EFE4 !important;
  border-color: rgba(255,255,255,.15) !important;
}
body.theme-botanic2 .save-btn-file {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #E8EFE4 !important;
}
body.theme-botanic2 .user-badge {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.15) !important;
}
body.theme-botanic2 .user-avatar      { background: rgba(107,158,63,.85) !important; }
body.theme-botanic2 header button     { color: #E8EFE4 !important; }
body.theme-botanic2 #hdr-lang-pl      { background: rgba(255,255,255,.18) !important; color: #E8EFE4 !important; }
body.theme-botanic2 #hdr-lang-en      { color: rgba(232,239,228,.45) !important; }
body.theme-botanic2 #hdr-role         { color: rgba(232,239,228,.45) !important; }
body.theme-botanic2 .save-dot.no-file { background: rgba(255,255,255,.3) !important; }

/* Nawigacja */
body.theme-botanic2 nav {
  background: #F0EDE6;
  border-bottom: 1px solid #DDD8CB;
}
body.theme-botanic2 nav .nav-btn {
  font-family: 'Work Sans', sans-serif;
  color: #786F5A;
  border-bottom: 2px solid transparent;
}
body.theme-botanic2 nav .nav-btn:hover  { background: #DDE8D5; color: #1D3A1D; }
body.theme-botanic2 nav .nav-btn.active {
  color: #1D3A1D;
  font-weight: 600;
  background: #DDE8D5;
  border-bottom-color: #1D3A1D;
}

/* Karty */
body.theme-botanic2 .card            { background: #FDFCF8; border-color: #DDD8CB; }
body.theme-botanic2 .card-header     { background: #F0EDE6; border-bottom: 1.5px solid #DDD8CB; border-radius: 8px 8px 0 0; }
body.theme-botanic2 .card-title      { font-family: 'Fraunces', serif; font-weight: 500; color: #1C2B1C; }
body.theme-botanic2 .section-heading,
body.theme-botanic2 .card-section-title { font-family: 'Fraunces', serif; font-weight: 500; }

/* Przyciski */
body.theme-botanic2 .btn-primary       { background: #1D3A1D; border-color: #1D3A1D; }
body.theme-botanic2 .btn-primary:hover { background: #142B14; border-color: #142B14; }
body.theme-botanic2 .btn-outline       { border-color: #1D3A1D; color: #1D3A1D; }
body.theme-botanic2 .btn-outline:hover { background: #EBF2E8; }

/* Tabela */
body.theme-botanic2 table thead th            { background: #F0EDE6; border-bottom-color: #DDD8CB; }
body.theme-botanic2 table tbody tr:hover td   { background: #EBF2E8; }

/* Inputy */
body.theme-botanic2 input, body.theme-botanic2 select, body.theme-botanic2 textarea {
  border-color: #DDD8CB;
  font-family: 'Work Sans', sans-serif;
  background: #FDFCF8;
}
body.theme-botanic2 input:focus, body.theme-botanic2 select:focus, body.theme-botanic2 textarea:focus {
  border-color: #1D3A1D;
  box-shadow: 0 0 0 3px rgba(29,58,29,.08);
}

/* Badges */
body.theme-botanic2 .badge-accepted  { background: #EBF2E8; color: #4A7A2F; border: 1px solid #B8D4A8; }
body.theme-botanic2 .badge-completed { background: #EBF2E8; color: #1D3A1D; border: 1px solid #B8D4A8; }
body.theme-botanic2 .badge-green     { background: #EBF2E8; color: #4A7A2F; border: 1px solid #B8D4A8; }
body.theme-botanic2 .badge-blue      { background: #E8EEF8; color: #2A5FA8; border: 1px solid #B0C4E0; }
body.theme-botanic2 .badge-amber     { background: #F5EFDB; color: #96692A; border: 1px solid #E5CFA0; }
body.theme-botanic2 .badge-red       { background: #F8EBEB; color: #B54040; border: 1px solid #E0AAAA; }
body.theme-botanic2 .badge-gray      { background: #F0EDE6; color: #786F5A; border: 1px solid #DDD8CB; }

/* Login */
body.theme-botanic2 #login-screen { background: #F5F3EE; }
body.theme-botanic2 .login-card   { border: 1px solid #DDD8CB; }

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; max-width: 1520px; margin: 0 auto; padding: 18px 24px; width: 100%; }

/* ── HEADER ── */
header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.3);
  min-width: 0;
  overflow: hidden;
}
.logo { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .02em; color: white; white-space: nowrap; flex-shrink: 0; }
.logo sup { font-size: 10px; font-family: var(--body); font-weight: 400; opacity: .6; margin-left: 3px; vertical-align: super; }
.logo-sub { font-family: var(--mono); font-size: 10px; opacity: .4; letter-spacing: .05em; }
.header-spacer { flex: 1; min-width: 8px; }
.header-week { font-family: var(--mono); font-size: 12px; opacity: .5; white-space: nowrap; flex-shrink: 0; }

/* ── NAV ── */
nav {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  gap: 2px;
  position: sticky; top: 56px; z-index: 99;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  height: 48px;
  align-items: center;
}
nav::-webkit-scrollbar { display: none; }
.nav-btn {
  padding: 0 16px;
  height: 36px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 8px;
  border-bottom: 2px solid transparent;
  transition: all .18s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex-shrink: 0;
}
.nav-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
}
.nav-btn.active {
  color: var(--accent);
  font-weight: 600;
  background: var(--accent-bg);
  border-bottom-color: transparent;
}
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 9px;
}
.nav-btn.active .nav-count { background: var(--accent); color: white; }

/* ── TABS ── */
.tab { display: none; }
.tab.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: box-shadow .15s;
}
.card:hover { box-shadow: var(--shadow); }
.card-sm { padding: 14px; }

/* Card-header: pełna belka tytułowa — wyciąga się poza padding karty */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -20px -20px 16px;
  padding: 10px 16px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
}
.card-title {
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.card-title small {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
  letter-spacing: 0;
}

/* Section labels — hierarchia wewnątrz kart */
.section-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin: 18px 0 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ── BUTTONS ── */
.btn {
  padding: 8px 18px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  transition: all .17s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 8px rgba(26,92,50,.3);
}
.btn-primary:hover {
  background: var(--accent2);
  box-shadow: 0 4px 16px rgba(26,92,50,.35);
  transform: translateY(-1px);
}
.btn-secondary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text2);
}
.btn-secondary:hover { background: var(--surface2); border-color: var(--accent); color: var(--accent); }
.btn-outline {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline:hover { background: var(--accent-bg); }
.btn-danger { background: var(--danger); color: white; box-shadow: 0 2px 8px rgba(160,32,32,.2); }
.btn-danger:hover { background: #c02828; transform: translateY(-1px); }
.btn-warning { background: var(--warn); color: white; }
.btn-info    { background: var(--info); color: white; }
.btn-sm  { padding: 5px 12px; font-size: 13px; border-radius: 6px; }
.btn-xs  { padding: 3px 8px;  font-size: 12px; border-radius: 5px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── FORMS ── */
.form-grid { display: grid; gap: 14px; }
.fg-2 { grid-template-columns: repeat(2, 1fr); }
.fg-3 { grid-template-columns: repeat(3, 1fr); }
.fg-4 { grid-template-columns: repeat(4, 1fr); }
.fg-6 { grid-template-columns: repeat(6, 1fr); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: span 2; }
.form-group.span3 { grid-column: span 3; }
.form-group.span4 { grid-column: span 4; }
label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}
input, select, textarea {
  padding: 9px 13px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--body);
  font-size: 15px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  appearance: auto;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(26,92,50,.09);
}
input[type="number"] { font-family: var(--mono); }
input[type="checkbox"], input[type="radio"] {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
textarea { resize: vertical; min-height: 70px; }
.input-hint { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ── TABLES ── */
.tbl-wrap { overflow-x: auto; }

/* ── Scroll arrows na przewijalnych tabelach ── */
.tbl-scroll-host {
  position: relative;
}
.tbl-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface, #fff);
  border: 1px solid var(--color-border-secondary, #ddd);
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  color: var(--color-text-secondary, #555);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: opacity .15s, background .15s;
  opacity: 0;
  pointer-events: none;
}
.tbl-scroll-btn:hover { background: var(--color-background-secondary, #f5f5f5); color: var(--accent, #4A7C59); }
.tbl-scroll-btn.left  { left: -14px; }
.tbl-scroll-btn.right { right: -14px; }
.tbl-scroll-btn.visible { opacity: 1; pointer-events: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--surface2);
  color: var(--muted);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
thead th:first-child { padding-left: 16px; }
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border2);
  vertical-align: middle;
}
td:first-child { padding-left: 16px; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--accent-bg); }
tbody tr[onclick] { cursor: pointer; }
tbody tr[onclick]:hover td { background: var(--accent-bg); }
tbody tr:last-child td { border-bottom: none; }
/* Zebra striping — naprzemienne wiersze */
tbody tr:nth-child(even) td { background: var(--surface2); }
tbody tr:nth-child(even):hover td,
tbody tr:nth-child(even)[onclick]:hover td { background: var(--accent-bg); }
.tbl-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.text-mono { font-family: var(--mono); font-size: 13px; }
.center { text-align: center; }

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-draft      { background: var(--surface2);      color: var(--muted);    border-color: var(--border); }
.badge-accepted   { background: #EFF6FF;               color: #1D4ED8;         border-color: #BFDBFE; }
.badge-production { background: var(--prerooting-bg);  color: var(--prerooting); border-color: #FDE68A; }
.badge-completed  { background: var(--rooting-bg);     color: var(--rooting);  border-color: var(--accent-light); }
.badge-cancelled  { background: #FEF2F2;               color: var(--danger);   border-color: #FECACA; }
.badge-green  { background: var(--rooting-bg);    color: var(--rooting);   border-color: var(--accent-light); }
.badge-blue   { background: #EFF6FF;              color: #1D4ED8;          border-color: #BFDBFE; }
.badge-amber  { background: var(--prerooting-bg); color: var(--prerooting); border-color: #FDE68A; }
.badge-red    { background: #FEF2F2;              color: var(--danger);    border-color: #FECACA; }
.badge-gray   { background: var(--surface2);      color: var(--muted);     border-color: var(--border); }

/* ── STAGE COLORS ── */
.s-mult  { background: var(--accent-bg); color: var(--accent); }
.s-elon  { background: var(--elon-bg);   color: var(--elon); }
.s-pre   { background: var(--prerooting-bg); color: var(--prerooting); }
.s-root  { background: var(--rooting-bg); color: var(--rooting); }
.s-univ  { background: #F3F4F6; color: #6B7280; }
.stage-pill {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .4px;
}

/* ── MODALS ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(10,20,15,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px;
}
.overlay.open { display: flex; animation: overlayIn .2s ease; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: white;
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.2,.8,.3,1);
  display: flex;
  flex-direction: column;
}
.modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.modal-lg { max-width: 1000px; }
.modal-header {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--border);
  z-index: 10;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  flex-shrink: 0;
  min-height: 48px;
}
.modal-title { font-family: var(--body); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.modal-close {
  background: var(--surface2);
  border: none;
  font-size: 19px;
  cursor: pointer;
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
  margin-left: 12px;
}
.modal-close:hover { background: #fee2e2; color: var(--danger); }
.modal-body { padding: 24px 28px; }
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  background: white;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0;
}
.modal-body-old { padding: 24px 28px; }

/* ── MISC UI ── */
.empty-state { text-align: center; padding: 60px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.empty-icon { font-size: 53px; margin-bottom: 16px; opacity: .6; }
.empty-state p { color: var(--muted); font-size: 15px; }
.media-tag {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text2);
}
.alert { border-radius: 8px; padding: 12px 16px; font-size: 14px; margin-bottom: 14px; }
.alert-info  { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.alert-warn  { background: #fff7ed; color: #7c3a00; border: 1px solid #fed7aa; }
.alert-error { background: #fef2f2; color: #7f1d1d; border: 1px solid #fca5a5; }
.two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── CALC RESULTS ── */
.calc-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.flow-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  text-align: center;
}
.flow-num { font-family: var(--mono); font-size: 25px; font-weight: 700; color: var(--accent); }
.flow-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.flow-box.highlight { background: var(--accent); border-color: var(--accent); }
.flow-box.highlight .flow-num,
.flow-box.highlight .flow-label { color: white; }
.surplus-ok   { color: var(--rooting); }
.surplus-high { color: var(--warn); }
.surplus-very-high { color: var(--danger); }

/* ── SAVE BAR ── */
.save-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.save-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--mono);
  color: rgba(255,255,255,.8);
  transition: background .15s;
}
.save-indicator:hover { background: rgba(255,255,255,.18); }
.save-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .3s;
}
.save-dot.no-file  { background: rgba(255,255,255,.3); }
.save-dot.saving   { background: #fbbf24; animation: pulse .9s infinite; }
.save-dot.saved    { background: #34d399; }
.save-dot.unsaved  { background: #f87171; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.save-btn-file {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 13px;
  transition: all .15s;
}
.save-btn-file:hover { background: rgba(255,255,255,.2); }

/* ── HEADER BRANDING ── */
.header-logo-wrap  { display: flex; align-items: center; gap: 12px; }
.header-logo-img   { height: 34px; max-width: 110px; object-fit: contain; border-radius: 4px; display: none; }
.header-logo-text  { }
.logo-app-name     { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: .02em; color: white; }
.logo-app-name sup { font-size: 10px; font-family: var(--body); font-weight: 400; opacity: .5; margin-left: 2px; }
.logo-company-name { font-family: var(--mono); font-size: 10px; opacity: .4; letter-spacing: .06em; color: white; }

/* ── USER BADGE (header) ── */
.user-badge {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  padding: 4px 12px 4px 4px;
  border-radius: 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  transition: background .15s;
}
.user-badge:hover { background: rgba(255,255,255,.18); }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: white;
}
.user-name { font-size: 13px; color: rgba(255,255,255,.85); font-family: var(--body); font-weight: 500; }

/* ── PHYTOTRONS / WAREHOUSE ── */
.phytotron-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.phytotron-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border2);
}
.phytotron-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: white;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.phytotron-name { font-family: var(--display); font-size: 18px; font-weight: 600; }
.phytotron-meta { font-size: 13px; opacity: .75; font-family: var(--mono); margin-top: 2px; }
.phytotron-body { padding: 16px 20px; }
.rack-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 8px; }
.shelf-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.shelf-nr { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 24px; }
.shelf-vessels { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.vessel-tag {
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-family: var(--mono);
  cursor: pointer;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-light);
  transition: all .12s;
}
.vessel-tag:hover { background: var(--accent); color: white; }
.elon-vessel  { background: var(--elon-bg); color: var(--elon); border-color: #c9aff0; }
.pre-vessel   { background: var(--prerooting-bg); color: var(--prerooting); border-color: #e8c88a; }
.root-vessel  { background: var(--rooting-bg); color: var(--rooting); border-color: #90d4b8; }
.add-vessel   { background: var(--surface2); color: var(--muted); border: 1.5px dashed var(--border); cursor: pointer; }
.add-vessel:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.phytotron-stats { display: flex; gap: 12px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.phytotron-stats strong { color: var(--text); }
.capacity-bar { height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.capacity-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s; }

/* ── CONFIRM / DIALOG ── */
.confirm-modal-body { padding: 20px 28px; font-size: 15px; color: var(--text2); line-height: 1.7; }

/* ── PREP SHEET (print) ── */
.prep-sheet { max-width: 800px; margin: 0 auto; font-size: 13px; }
.prep-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.prep-title { font-family: var(--display); font-size: 23px; font-weight: 600; color: var(--accent); }
.prep-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.label-strip {
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  display: inline-flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 16px;
}
@media print {
  nav, header, .no-print, .btn, .tbl-actions { display: none !important; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .phytotron-card { page-break-inside: avoid; }
}

/* ── LOGIN SCREEN ── */
#login-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--header-bg);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(var(--accent-rgb),.25) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--accent-rgb),.15) 0%, transparent 50%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--body);
  transition: background-color .3s;
}
.login-card {
  background: white;
  border-radius: 20px;
  padding: 44px 48px;
  width: 100%; max-width: 420px;
  box-shadow: 0 40px 100px rgba(0,0,0,.5);
  animation: modalIn .3s cubic-bezier(.2,.8,.3,1);
}
.login-logo  { font-family: var(--display); font-size: 28px; font-weight: 700; color: var(--accent); margin-bottom: 2px; letter-spacing: .03em; line-height: 1.1; }
.login-title-plantlet { color: var(--g-dark, #1C4535); font-weight: 700; letter-spacing: .01em; }
.login-title-lab      { color: var(--g-dark, #1C4535); font-weight: 700; letter-spacing: .01em; }
.login-title-soft     { color: var(--g-mid, #4a9a6e); font-size: .62em; font-weight: 500; letter-spacing: .02em; vertical-align: middle; }
.login-sub   { font-size: 12px; color: var(--muted); margin-bottom: 28px; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.login-err   { background: #fef2f2; color: #7f1d1d; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; display: none; }
.login-btn   {
  width: 100%; padding: 14px;
  background: var(--accent); color: white;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: var(--body);
  margin-top: 8px;
  transition: all .18s;
  box-shadow: 0 4px 16px rgba(26,92,50,.35);
}
.login-btn:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(26,92,50,.4); }
.login-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--body);
  margin-top: 5px;
  transition: all .15s;
  background: var(--surface2);
}
.login-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(26,92,50,.09); }
.login-label { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; display: block; }
.login-group { margin-bottom: 16px; }
.login-brand-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; display: none; background: white; box-shadow: 0 2px 12px rgba(28,69,53,.18); border: 3px solid rgba(28,69,53,.08); }
.login-brand-logo.visible { display: block; }
/* Wiersz logo: kółko aplikacji + (opcjonalnie) logo z brandingu obok */
.login-logo-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; }
.login-logo-row .login-brand-logo { margin-bottom: 0; }
.login-brand-secondary { max-height: 84px; max-width: 160px; object-fit: contain; border-radius: 8px; }
@media print { #login-screen { display: none !important; } }

/* ── USER MANAGEMENT ── */
.role-badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; font-family:var(--mono); font-weight:700; text-transform:uppercase; }
.role-admin    { background:#fef9c3; color:#713f12; border:1px solid #fde68a; }
.role-editor   { background:#dbeafe; color:#1e3a8a; border:1px solid #bfdbfe; }
.role-viewer   { background:#f0fdf4; color:#14532d; border:1px solid #bbf7d0; }
.perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.perm-item { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--surface2); border-radius:6px; font-size:13px; border:1px solid var(--border2); }
.perm-item input[type=checkbox] { width:15px; height:15px; accent-color:var(--accent); }

/* ── BRANDING ── */
.logo-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 10px; padding: 24px;
  text-align: center; cursor: pointer;
  transition: all .15s; background: var(--surface2);
  position: relative;
}
.logo-upload-zone:hover { border-color: var(--accent); background: var(--accent-bg); }
.logo-upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.logo-preview-wrap { margin-top: 10px; display: none; background: var(--surface2); border-radius: 6px; padding: 10px; text-align: center; }
.logo-preview-wrap img { max-height: 64px; max-width: 200px; object-fit: contain; }
.login-brand-logo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 14px; display: none; background: #fff; }

/* ── APPEARANCE ── */
.theme-swatch { border: 2px solid transparent; border-radius: 10px; padding: 10px; cursor: pointer; transition: all .15s; text-align: center; position: relative; }
.theme-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.theme-swatch .swatch-bar { height: 28px; border-radius: 6px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.swatch-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.6); }
.theme-swatch .swatch-name { font-size: 12px; font-weight: 700; color: var(--text2); }
.theme-swatch.active::after { content: '✓'; position: absolute; top: 4px; right: 7px; font-size: 14px; color: var(--accent); font-weight: 900; }
.tab-order-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 8px; cursor: grab; user-select: none; transition: all .15s; font-size: 14px; font-weight: 500; }
.tab-order-item:active { cursor: grabbing; }
.tab-order-item.drag-over { border-color: var(--accent); background: var(--accent-bg); }
.tab-order-item.dragging { opacity: .4; }
.tab-drag-handle { color: var(--muted); font-size: 16px; }
.tab-order-item input[type=checkbox] { width:14px;height:14px;accent-color:var(--accent); cursor:pointer; }
.tab-order-item label { cursor:pointer;flex:1;display:flex;align-items:center;gap:8px; margin:0; text-transform:none; font-size:13px; font-weight:500; color:var(--text); letter-spacing:0; }

/* ── SUBINDEX ── */
.subindex-card { border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.subindex-header { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface2); border-bottom: 1px solid var(--border2); }
.subindex-code { font-family: var(--mono); font-size: 16px; font-weight: 800; color: var(--accent); letter-spacing: .5px; }
.subindex-body { padding: 10px 14px; }
.doc-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 12px; font-family: var(--mono); cursor: pointer; transition: background .12s; margin: 2px; }
.doc-chip:hover { background: var(--accent-bg); border-color: var(--accent); }
.doc-chip-del { color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; margin-left: 2px; }
.doc-chip-del:hover { color: var(--danger); }
.doc-upload-zone { border: 1.5px dashed var(--border); border-radius: 6px; padding: 8px 12px; text-align: center; cursor: pointer; color: var(--muted); font-size: 13px; transition: all .13s; display: inline-block; }
.doc-upload-zone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ── SUPPLIES ── */
.sup-status-ok      { background:#dcfce7;color:#166534;border:1px solid #bbf7d0; }
.sup-status-low     { background:#fef9c3;color:#713f12;border:1px solid #fde68a; }
.sup-status-out     { background:#fee2e2;color:#7f1d1d;border:1px solid #fca5a5; }
.sup-status-expired { background:#f3e8ff;color:#6b21a8;border:1px solid #d8b4fe; }
.sup-stat-card { background:var(--surface);border:1.5px solid var(--border2);border-radius:12px;padding:16px 20px;text-align:center;box-shadow:var(--shadow-sm);transition:all .15s; }
.sup-stat-card:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.sup-stat-num  { font-size:30px;font-weight:800;font-family:var(--mono);color:var(--accent); }
.sup-stat-label{ font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:3px; }
.sup-alert-row { display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface2);border-radius:8px;margin-bottom:6px;font-size:13px;border:1px solid var(--border2); }
.tx-btn { background:var(--surface2);border:1.5px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;font-family:var(--mono);transition:all .12s; }
.tx-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accent-bg); }
.sup-log-row { padding:6px 0;border-bottom:1px solid var(--border2);display:flex;gap:8px;align-items:flex-start; }
.sup-log-icon { font-size:14px;flex-shrink:0; }
.sup-log-detail { flex:1; }
.sup-log-time { font-size:10px;color:var(--muted);font-family:var(--mono); }

/* ── EMPLOYEES ── */
.emp-status-active   { background:#dcfce7;color:#166534;border:1px solid #bbf7d0; }
.emp-status-inactive { background:#f1f5f9;color:#475569;border:1px solid #cbd5e1; }
.emp-status-leave    { background:#fef9c3;color:#713f12;border:1px solid #fde68a; }
.qual-chip  { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-light); }
.qual-check { display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface2);border-radius:8px;font-size:13px;cursor:pointer;border:1.5px solid transparent;transition:all .12s; }
.qual-check:hover { border-color:var(--accent);background:var(--accent-bg); }
.qual-check input { width:15px;height:15px;accent-color:var(--accent);cursor:pointer; }
.emp-nr { font-family:var(--mono);font-size:15px;font-weight:800;color:var(--accent); }

/* ── FOOTER ── */
footer {
  background: var(--header-bg);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  font-family: var(--mono);
}
footer strong { color: rgba(255,255,255,.6); }
footer a, footer span[onclick] { cursor: pointer; text-decoration: underline dotted; color: rgba(255,255,255,.4); }
footer a:hover, footer span[onclick]:hover { color: rgba(255,255,255,.7); }

/* ── GRID LAYOUTS ── */
@media(max-width:900px){.two-col,.three-col,.fg-4,.fg-6{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.two-col,.three-col,.fg-2,.fg-3,.fg-4,.fg-6{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  header { padding: 0 16px; gap: 10px; }
  nav { padding: 0 8px; top: 56px; }
  .nav-btn { padding: 0 12px; font-size: 13px; }
  main { padding: 16px; }
  .two-col, .three-col, .fg-4, .fg-6 { grid-template-columns: 1fr 1fr; }
  .card { padding: 16px; }
  .modal { width: calc(100% - 24px); margin: 12px; }
  .modal-body { padding: 16px 18px; }
  .logo-company-name { display: none; }
  .header-week { display: none; }
}

/* ── Small desktop / large tablet (≤ 1100px) ── */
@media (max-width: 1100px) {
  .logo-company-name { display: none; }
  .header-week { display: none; }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
  header {
    padding: 0 12px;
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .logo-app-name { font-size: 17px; }
  .logo-company-name { display: none; }
  .header-week { display: none; }
  .header-spacer { display: none; }
  .user-badge { padding: 3px 8px; }
  .user-name { font-size: 12px; }

  /* Nav — horizontal scroll */
  nav {
    top: 0;
    position: sticky;
    padding: 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 0;
  }
  nav::-webkit-scrollbar { display: none; }
  .nav-btn {
    padding: 0 12px;
    height: 34px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-count { display: none; }

  /* Main content */
  main { padding: 10px; }

  /* All grid layouts → single column */
  .two-col, .three-col,
  .fg-2, .fg-3, .fg-4, .fg-6,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  .form-group.span2,
  .form-group.span3,
  .form-group.span4 { grid-column: span 1; }

  /* Cards */
  .card { padding: 12px; border-radius: 8px; margin-bottom: 12px; }
  .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card-title { font-size: 16px; }

  /* Tables — horizontal scroll with bigger touch targets */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 6px; }
  table { min-width: 600px; }
  td, th { padding: 10px 10px; font-size: 13px; }
  .tbl-actions { flex-wrap: wrap; gap: 3px; }
  .btn-xs { padding: 5px 8px; font-size: 12px; }

  /* Buttons */
  .btn { padding: 9px 14px; font-size: 14px; }
  .btn-sm { padding: 7px 12px; font-size: 13px; }
  .btn-group { flex-wrap: wrap; gap: 6px; }

  /* Modals — full screen on mobile */
  .overlay { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
    max-width: 100% !important;
  }
  .modal-body { max-height: none; }
  .modal-footer .btn { flex: 1; justify-content: center; min-width: 100px; }

  /* Forms */
  input, select, textarea { font-size: 17px !important; } /* prevent iOS zoom */
  input[type="number"] { font-size: 17px !important; }
  label { font-size: 13px; }

  /* Login screen */
  .login-card { padding: 28px 20px; margin: 12px; border-radius: 12px; }
  .login-logo { font-size: 25px; }
  .login-input { font-size: 17px; padding: 13px 14px; }
  .login-btn { padding: 15px; font-size: 17px; }

  /* Stats cards */
  .sup-stat-card { padding: 10px 12px; }
  .sup-stat-num { font-size: 23px; }

  /* Warehouse grid */
  .phytotron-card { margin-bottom: 12px; }

  /* Admin tab sections */
  .perm-grid { grid-template-columns: 1fr; }

  /* Footer */
  footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }

  /* Hide less important columns in employee/supply tables on mobile */
  .hide-mobile { display: none !important; }

  /* Bigger touch targets for checkboxes */
  input[type="checkbox"] { width: 20px !important; height: 20px !important; }
  .qual-check { padding: 10px 12px; }

  /* Fab-style add button — fixed at bottom right */
  .mobile-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    font-size: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    cursor: pointer;
    z-index: 98;
  }

  /* Subindex cards */
  .subindex-card { font-size: 13px; }

  /* Save indicator text — shorter on mobile */
  #save-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── Very small (≤ 375px, iPhone SE) ── */
@media (max-width: 375px) {
  main { padding: 8px; }
  .card { padding: 10px; }
  .nav-btn { padding: 9px 10px; font-size: 12px; }
  .login-card { padding: 24px 16px; }
}

/* ── Touch devices — larger tap targets ── */
@media (hover: none) and (pointer: coarse) {
  .nav-btn { min-height: 44px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .tx-btn { min-height: 36px; min-width: 36px; }
  td { padding: 12px 10px; }
  .tab-order-item { padding: 12px 14px; }
  select, input { min-height: 44px; }
}

/* ── Utility classes (replaces common inline styles) ── */
.u-flex       { display: flex; }
.u-flex-center{ display: flex; align-items: center; }
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-gap-8  { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-14 { gap: 14px; }
.u-mb-8   { margin-bottom: 8px; }
.u-mb-14  { margin-bottom: 14px; }
.u-mb-16  { margin-bottom: 16px; }
.u-text-mono { font-family: var(--mono); }
.u-text-muted{ color: var(--muted); font-size: 13px; }
.u-text-sm   { font-size: 13px; }
.u-text-xs   { font-size: 12px; }
.u-fw-600    { font-weight: 600; }
.u-ta-right  { text-align: right; }
.u-wrap      { flex-wrap: wrap; }
.u-nowrap    { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
 * USPRAWNIENIA UI v2 — skeleton, animacje, sortowanie, dark mode
 * ════════════════════════════════════════════════════════════ */

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Loading placeholder cards (skeleton cards) ── */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 10px;
}
.skeleton-line {
  height: 13px;
  border-radius: 6px;
  background: var(--surface3);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-line + .skeleton-line { margin-top: 8px; }

/* ── Skeleton loader ── */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.skeleton {
  background: var(--surface3);
  border-radius: 6px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  display: block;
}
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border2);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-circle { border-radius: 50% !important; flex-shrink: 0; }

/* ── Modal close animation ── */
@keyframes modalOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.97) translateY(8px); }
}
@keyframes overlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.overlay.closing          { animation: overlayOut .2s ease forwards; pointer-events: none; }
.overlay.closing .modal   { animation: modalOut   .2s cubic-bezier(.4,0,.2,1) forwards; }

/* ── Table hover + sortable columns ── */
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--accent-bg); }
thead th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}
thead th.sortable::after {
  content: '↕';
  font-size: 11px;
  opacity: .35;
  margin-left: 5px;
}
thead th.sort-asc::after  { content: '↑'; opacity: .8; color: var(--accent); }
thead th.sort-desc::after { content: '↓'; opacity: .8; color: var(--accent); }
thead th.sort-asc,
thead th.sort-desc { color: var(--accent); }

/* ── Spinner in buttons ── */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: .8;
}
.btn-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: white;
  border-radius: 50%;
  animation: btn-spin .65s linear infinite;
}
.btn-loading.btn-secondary::after,
.btn-loading.btn-outline::after {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--accent);
}

/* ── Nav count badge ── */
.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  background: var(--accent-bg);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  border-radius: 8px;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.nav-btn.active .nav-count {
  background: var(--accent);
  color: #EAF3DE;
}

/* ── Progress bar ── */
.prod-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin-top: 5px;
  overflow: hidden;
  width: 100%;
}
.prod-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Trend indicator in stat cards ── */
.stat-trend {
  font-size: 12px;
  font-weight: 500;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.trend-up   { color: var(--accent2); }
.trend-down { color: var(--danger); }
.trend-flat { color: var(--muted); }

/* ── Toast notification system ── */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: 90vw;
}
@keyframes toastIn  { from { opacity:0; transform:translateY(12px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes toastOut { to   { opacity:0; transform:translateY(8px) scale(.95); } }
.toast {
  pointer-events: auto;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-family: var(--body);
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  white-space: nowrap;
  animation: toastIn .22s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
.toast-success { background: #1a5c32; color: #EAF3DE; }
.toast-error   { background: #a02020; color: #FCEBEB; }
.toast-warning { background: #b85000; color: #fff8f0; }
.toast-info    { background: #1a3d7a; color: #E6F1FB; }
.toast-closing { animation: toastOut .2s ease forwards; }

/* ═══════════════════════════════════════════════════════════════
   STYL A — ENTERPRISE COMPACT
   Aktywny dla wszystkich motywów (nadpisuje base gdzie potrzeba)
   ═══════════════════════════════════════════════════════════════ */

/* KPI strip — pasek kafelków nad treścią */
.kpi-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 16px;
  flex: 1;
  min-width: 140px;
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kpi.kpi-warn   { border-left-color: var(--warn); }
.kpi.kpi-danger { border-left-color: var(--danger); }
.kpi.kpi-info   { border-left-color: var(--info); }
.kpi.kpi-muted  { border-left-color: var(--muted); }
.kpi.kpi-elon   { border-left-color: var(--elon); }
.kpi-icon { font-size: 21px; opacity: .75; flex-shrink: 0; }
.kpi-body { flex: 1; min-width: 0; }
.kpi-val {
  font-family: var(--mono);
  font-size: 23px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.kpi-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-top: 2px;
}
.kpi-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

/* Status dot — kolorowa kropka w pierwszej kolumnie tabeli */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.green  { background: var(--rooting); }
.status-dot.amber  { background: var(--warn); }
.status-dot.red    { background: var(--danger); }
.status-dot.blue   { background: var(--info); }
.status-dot.gray   { background: var(--muted); }

/* ── Sage — Enterprise Compact overrides ── */
body.theme-sage {
  --r:    4px;
  --r-lg: 6px;
}
body.theme-sage .card {
  border-radius: 6px;
  box-shadow: none;
  border-color: #D8E0D3;
}
body.theme-sage .card:hover { box-shadow: 0 1px 4px rgba(17,29,15,.08); }
body.theme-sage .card-header {
  background: #EEF2EB;
  border-radius: 6px 6px 0 0;
  padding: 8px 14px;
  min-height: 36px;
}
body.theme-sage .card-title {
  font-size: 12px;
  font-weight: 700;
  color: #2D3D28;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-family: var(--mono);
}

/* Tabele — jeszcze zwartsze dla sage */
body.theme-sage thead th { padding: 7px 10px; font-size: 11px; }
body.theme-sage thead th:first-child { padding-left: 14px; }
body.theme-sage td { padding: 8px 10px; }
body.theme-sage td:first-child { padding-left: 14px; }

/* Badges — mniej zaokrąglone */
body.theme-sage .badge { border-radius: 3px; font-size: 11px; padding: 2px 7px; }

/* Przyciski — płaskie, bez transform */
body.theme-sage .btn-primary:hover { transform: none; box-shadow: none; background: #166534; }
body.theme-sage .btn-secondary:hover { transform: none; }
body.theme-sage .btn { border-radius: 4px; }

/* Nav — bardziej zwarta */
body.theme-sage nav { height: 40px; padding: 0 20px; }
body.theme-sage .nav-btn { height: 40px; font-size: 13px; padding: 0 12px; }

/* Modal — kompaktowy */
body.theme-sage .modal-header { padding: 10px 18px; min-height: 44px; }
body.theme-sage .modal-title { font-size: 15px; }
body.theme-sage .modal-body { padding: 18px 22px; }
body.theme-sage .modal-footer { padding: 10px 18px; }
body.theme-sage .modal { border-radius: 6px; }

/* ── Fiori — Enterprise Compact overrides ── */
body.theme-fiori {
  --r:    3px;
  --r-lg: 4px;
}
body.theme-fiori .card { box-shadow: none; border-radius: 4px; }
body.theme-fiori .card-header { padding: 8px 14px; min-height: 36px; border-radius: 4px 4px 0 0; }
body.theme-fiori .card-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; font-family: 'Inter', sans-serif; color: #32363A; }
body.theme-fiori .badge { border-radius: 2px; }
body.theme-fiori .btn { border-radius: 3px; }
body.theme-fiori thead th { padding: 7px 10px; }
body.theme-fiori td { padding: 8px 10px; }


/* ═══════════════════════════════════════════════════════════════
   SAGE PRO — DESIGN REFINEMENTS
   Głębia, precyzja, charakter systemu laboratoryjnego
   ═══════════════════════════════════════════════════════════════ */

/* ── Header: głębszy, z subtelną fakturą ── */
body.theme-sage header {
  background: linear-gradient(180deg, #1E3B27 0%, #152B1C 100%) !important;
  border-bottom: 2px solid #22C55E22;
  box-shadow: 0 2px 0 rgba(34,197,94,.08), 0 4px 24px rgba(0,0,0,.35) !important;
}
body.theme-sage .logo-app-name {
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  font-size: 20px !important;
}

/* ── Nav: pill active zamiast underline ── */
body.theme-sage nav {
  background: #F8FAF7;
  padding: 0 16px;
}
body.theme-sage .nav-btn {
  border-radius: 6px !important;
  border-bottom: none !important;
  height: 32px !important;
  padding: 0 13px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #5A7055 !important;
  transition: all .15s !important;
}
body.theme-sage .nav-btn:hover {
  background: #E8F0E5 !important;
  color: #15803D !important;
  border-radius: 6px !important;
}
body.theme-sage .nav-btn.active {
  background: #15803D !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  box-shadow: 0 1px 4px rgba(21,128,61,.3);
}
body.theme-sage .nav-btn.active .nav-count {
  background: rgba(255,255,255,.25) !important;
  color: #fff !important;
}

/* ── Card headers: lewy pasek akcentu ── */
body.theme-sage .card-header {
  border-left: 3px solid #15803D !important;
  background: #EEF2EB !important;
  padding: 9px 16px 9px 13px !important;
}

/* ── Stage pills: wyraźne osobowości etapów ── */
body.theme-sage .s-mult {
  background: #F0FDF4 !important;
  color: #166534 !important;
  border: 1.5px solid #86EFAC !important;
  font-weight: 700 !important;
}
body.theme-sage .s-elon {
  background: #F5F3FF !important;
  color: #5B21B6 !important;
  border: 1.5px solid #C4B5FD !important;
  font-weight: 700 !important;
}
body.theme-sage .s-pre {
  background: #FFFBEB !important;
  color: #92400E !important;
  border: 1.5px solid #FCD34D !important;
  font-weight: 700 !important;
}
body.theme-sage .s-root {
  background: #FFF7ED !important;
  color: #9A3412 !important;
  border: 1.5px solid #FDBA74 !important;
  font-weight: 700 !important;
}
body.theme-sage .s-univ {
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1.5px solid #CBD5E1 !important;
  font-weight: 700 !important;
}
body.theme-sage .stage-pill {
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 3px 8px !important;
  letter-spacing: .2px !important;
}

/* ── Vessel tags: czytelniejsze, większe ── */
body.theme-sage .vessel-tag {
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  transition: all .12s !important;
}
body.theme-sage .vessel-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(21,128,61,.2);
}

/* ── Phytotron header: bardziej dramatyczny gradient ── */
body.theme-sage .phytotron-header {
  background: linear-gradient(135deg, #1A3323 0%, #15803D 100%) !important;
  border-bottom: 2px solid rgba(134,239,172,.2);
  padding: 14px 18px !important;
}
body.theme-sage .phytotron-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

/* ── Capacity bars: grubsze, bardziej widoczne ── */
body.theme-sage .capacity-bar {
  height: 8px !important;
  border-radius: 4px !important;
  background: #D1FAE5 !important;
  margin-bottom: 12px !important;
}
body.theme-sage .capacity-fill {
  border-radius: 4px !important;
  background: linear-gradient(90deg, #15803D, #22C55E) !important;
  transition: width .5s cubic-bezier(.4,0,.2,1) !important;
}

/* ── KPI strip: mocniejsze wartości ── */
body.theme-sage .kpi-val {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}
body.theme-sage .kpi {
  border-radius: 6px !important;
  transition: box-shadow .15s !important;
}
body.theme-sage .kpi:hover {
  box-shadow: 0 2px 12px rgba(17,29,15,.1) !important;
}

/* ── Flow boxes (kalkulator): wyraźniejsze ── */
body.theme-sage .flow-box {
  border: 1.5px solid #D8E0D3 !important;
  background: #FAFCF9 !important;
  border-radius: 8px !important;
}
body.theme-sage .flow-num {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}
body.theme-sage .flow-box.highlight {
  background: linear-gradient(135deg, #15803D, #166534) !important;
  border-color: #15803D !important;
  box-shadow: 0 4px 16px rgba(21,128,61,.25) !important;
}

/* ── Tabele: mocniejszy hover ── */
body.theme-sage tbody tr:hover td {
  background: #ECFDF5 !important;
}
body.theme-sage tbody tr:nth-child(even):hover td {
  background: #ECFDF5 !important;
}

/* ── Modale: mocniejszy header ── */
body.theme-sage .modal-header {
  background: linear-gradient(180deg, #EEF2EB, #E8EDE5) !important;
  border-bottom: 2px solid #D8E0D3 !important;
}
body.theme-sage .modal {
  box-shadow: 0 20px 60px rgba(17,29,15,.2), 0 4px 16px rgba(17,29,15,.1) !important;
}

/* ── Przyciski primary: głębszy cień ── */
body.theme-sage .btn-primary {
  box-shadow: 0 2px 8px rgba(21,128,61,.3), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
body.theme-sage .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(21,128,61,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transform: translateY(-1px) !important;
}

/* ── Section labels: dekoracyjna linia ── */
body.theme-sage .section-label {
  color: #4A7A45 !important;
  border-bottom-color: #D8E0D3 !important;
  font-size: 11px !important;
}

/* ── Stat boxes (kalkulator roślin): mocniejszy lewy pasek ── */
body.theme-sage .stat-box {
  border-left: 4px solid #15803D !important;
  background: #FAFCF9 !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 10px 14px !important;
  border: 1px solid #E8EDE5;
  border-left: 4px solid #15803D !important;
}
body.theme-sage .stat-val {
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* ── Badge: mocniejsze, bardziej czytelne ── */
body.theme-sage .badge {
  font-size: 12px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

/* ── Login screen: elegancki gradient ── */
body.theme-sage #login-screen {
  background: linear-gradient(145deg, #0F2018 0%, #1A3323 35%, #2D5A3A 65%, #1E4229 100%) !important;
}
body.theme-sage .login-card {
  box-shadow: 0 40px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
}


/* ═══════════════════════════════════════════════════════════════
   OPCJA 2 — BRICOLAGE GROTESQUE + ALBERT SANS + DEPARTURE MONO
   Specyficzne overrides typograficzne dla motywu Sage Pro
   ═══════════════════════════════════════════════════════════════ */

/* Logo — bold industrial */
body.theme-sage .logo-app-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

/* Card title — Bricolage uppercase */
body.theme-sage .card-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: #2D3D28 !important;
}

/* Modal title — Bricolage */
body.theme-sage .modal-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
}

/* Nav — Albert Sans, bez zaokrągleń na przycisku */
body.theme-sage .nav-btn {
  font-family: 'Albert Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  border-radius: 4px !important;
}

/* Body text — Albert Sans */
body.theme-sage,
body.theme-sage td,
body.theme-sage label,
body.theme-sage .btn,
body.theme-sage input,
body.theme-sage select,
body.theme-sage textarea {
  font-family: 'Albert Sans', system-ui, sans-serif;
}

/* Monospace data — Departure Mono */
body.theme-sage .mono,
body.theme-sage .text-mono,
body.theme-sage thead th,
body.theme-sage .kpi-val,
body.theme-sage .kpi-lbl,
body.theme-sage .badge,
body.theme-sage .stage-pill,
body.theme-sage .hdr-week,
body.theme-sage .header-week,
body.theme-sage input[type="number"] {
  font-family: 'Departure Mono', monospace !important;
}

/* Phytotron name — Bricolage */
body.theme-sage .phytotron-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

/* Section labels — Departure Mono uppercase */
body.theme-sage .section-label {
  font-family: 'Departure Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
}

/* Buttons — Albert Sans bold */
body.theme-sage .btn {
  font-family: 'Albert Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  border-radius: 4px !important;
}

/* Modale — spójny z nowym stylem */
body.theme-sage .modal { border-radius: 6px !important; }
body.theme-sage .modal-header { border-radius: 6px 6px 0 0 !important; }

/* Stat box labels */
body.theme-sage .stat-lbl {
  font-family: 'Departure Mono', monospace !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
}

/* KPI labels — Departure Mono */
body.theme-sage .kpi-lbl {
  font-family: 'Departure Mono', monospace !important;
}

/* Login logo — Bricolage max weight */
body.theme-sage .login-logo {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.04em !important;
}

/* Login brand w Azonix (spójnie z nagłówkiem strony, theme-pls) */
body.theme-pls .login-logo {
  font-family: 'Azonix', 'Bricolage Grotesque', sans-serif;
  font-weight: normal;
  font-size: 23px;
  letter-spacing: .04em;
}
body.theme-pls .login-title-plantlet,
body.theme-pls .login-title-lab,
body.theme-pls .login-title-soft { font-weight: normal; }
/* Kolor „Soft" identyczny jak w nagłówku (.tbc-soft) */
body.theme-pls .login-title-soft { color: #92c93b; }


/* ── Bricolage: logo uppercase + cięższy ── */
body.theme-sage .logo-app-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.96) !important;
}
body.theme-sage .logo-company-name {
  font-family: 'Departure Mono', 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  opacity: .38 !important;
  text-transform: uppercase !important;
}

/* ── Albert Sans — cięższy dla lepszej czytelności ── */
body.theme-sage body,
body.theme-sage td,
body.theme-sage p,
body.theme-sage li {
  font-family: 'Albert Sans', system-ui, sans-serif !important;
  font-weight: 500 !important;
}
body.theme-sage .nav-btn {
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

/* ── Departure Mono: thead grubszy ── */
body.theme-sage thead th {
  font-family: 'Departure Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}

/* ── Departure Mono: badge, stage-pill, KPI ── */
body.theme-sage .badge,
body.theme-sage .stage-pill {
  font-family: 'Departure Mono', monospace !important;
  letter-spacing: .04em !important;
}
body.theme-sage .kpi-val {
  font-family: 'Departure Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 27px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY & PERFORMANCE IMPROVEMENTS (UI/UX Pro Max)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. prefers-reduced-motion — wyłącz animacje na żądanie ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 2. Focus visible — nawigacja klawiaturą ── */
:focus-visible {
  outline: 2.5px solid var(--accent, #15803D) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
button:focus-visible,
.btn:focus-visible,
.nav-btn:focus-visible {
  outline: 2.5px solid var(--accent, #15803D) !important;
  outline-offset: 2px !important;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important; /* focus ring already via box-shadow */
}

/* ── 3. Touch targets — btn-xs/sm minimum 36px ── */
.btn-xs {
  min-height: 32px !important;
  min-width: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.btn-sm {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
}
.tbl-actions .btn-xs,
.tbl-actions .btn-sm {
  min-width: 32px !important;
}

/* ── 4. aria-live toast region ── */
#toast-container[aria-live] {
  /* styles already in place — aria-live added via JS */
}

/* ── 5. Skip to main content link ── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 99999;
  background: var(--accent, #15803D);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* ── 6. Cursor pointer na klikalnych elementach ── */
[onclick]:not(input):not(select):not(textarea),
.card[onclick],
.phytotron-card[onclick],
tbody tr[onclick] {
  cursor: pointer;
}

/* ── 7. Disabled state clarity ── */
.btn:disabled,
button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}


/* ── Lucide SVG ikony w nawigacji ── */
.nav-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
  vertical-align: middle;
}
.nav-btn .nav-icon {
  margin-right: 4px;
}

/* ── Lucide ikony w przyciskach akcji ── */
.btn-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── Nawigacja — grupowanie wizualne ── */
/* Separator między grupami zakładek */
body.theme-sage nav .nav-separator {
  width: 1px;
  height: 20px;
  background: var(--border, #D8E0D3);
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

/* Ikony SVG w nawigacji — rozmiar i kolor */
body.theme-sage .nav-btn svg.nav-icon,
body.theme-sage .nav-btn i.nav-icon svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  margin-right: 4px;
  vertical-align: -1px;
  flex-shrink: 0;
}

/* Aktywny tab — ikona biała */
body.theme-sage .nav-btn.active svg.nav-icon,
body.theme-sage .nav-btn.active i.nav-icon svg {
  stroke: white;
}

/* ═══════════════════════════════════════════════════════════════
   MOTYW PLS — BOTANICAL PRECISION (Sidebar layout)
   Sidebar biały, topbar biały, tło #EEF0EB
   Fonts: Fraunces (brand) + Plus Jakarta Sans (body)
   ═══════════════════════════════════════════════════════════════ */
body.theme-pls {
  /* ── Color tokens ── */
  --bg:            #EEF0EB;
  --surface:       #FFFFFF;
  --surface2:      #F4F6F1;
  --surface3:      #EBF0E7;
  --border:        #DDE3D8;
  --border2:       #EAF0E6;
  --text:          #0F1A0C;
  --text2:         #2D4028;
  --muted:         #6B7C64;
  --accent:        #1C4535;
  --accent2:       #2D6A4F;
  --accent-bg:     #E8F5EE;
  --accent-light:  #B2DCC8;
  --elon:          #6D28D9;
  --elon-bg:       #EDE9FE;
  --prerooting:    #B45309;
  --prerooting-bg: #FEF3C7;
  --rooting:       #1C4535;
  --rooting-bg:    #E8F5EE;
  --warn:          #B45309;
  --danger:        #B91C1C;
  --info:          #1D4ED8;
  --color-text-primary:        #0F1A0C;
  --color-text-secondary:      #2D4028;
  --color-text-tertiary:       #6B7C64;
  --color-text-danger:         #B91C1C;
  --color-text-warning:        #B45309;
  --color-text-success:        #15803D;
  --color-text-info:           #1D4ED8;
  --color-background-primary:  #FFFFFF;
  --color-background-secondary:#EEF0EB;
  --color-background-info:     #EFF6FF;
  --color-background-success:  #F0FDF4;
  --color-background-warning:  #FFFBEB;
  --color-background-danger:   #FEF2F2;
  --color-border-primary:      #C3CFBD;
  --color-border-secondary:    #DDE3D8;
  --color-border-tertiary:     #EAF0E6;
  --color-border-info:         #BFDBFE;
  --color-border-success:      #BBF7D0;
  --color-border-warning:      #FDE68A;
  --color-border-danger:       #FECACA;
  --header-bg:    #FFFFFF;
  --header-text:  #0F1A0C;
  --nav-bg:       #FFFFFF;
  --nav-text:     #6B7C64;
  --nav-active:   #1C4535;
  --nav-active-border: #1C4535;
  --display: 'Fraunces', Georgia, serif;
  --body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;
  --r:       6px;
  --r-lg:    10px;
  --shadow-sm: 0 1px 3px rgba(15,26,12,.05);
  --shadow:    0 2px 8px rgba(15,26,12,.08);
  --shadow-lg: 0 6px 20px rgba(15,26,12,.10);

  /* ── SIDEBAR GRID LAYOUT ── */
  display: grid !important;
  flex-direction: unset !important;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar content";
  height: 100vh;
  overflow: hidden;
  background: #EEF0EB;
}

/* ── LOGIN SCREEN — full-screen overlay ponad gridem ── */
body.theme-pls #login-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0A1E10 0%, #1C4535 45%, #EEF0EB 100%) !important;
  grid-area: unset;
}
body.theme-pls .login-card   { border: 1px solid #DDE3D8 !important; box-shadow: 0 8px 32px rgba(15,26,12,.15) !important; }

/* ── HEADER → TOPBAR (prawa górna kolumna) ── */
body.theme-pls header {
  grid-area: topbar;
  background: #FFFFFF !important;
  border-bottom: 1px solid #DDE3D8 !important;
  box-shadow: none !important;
  height: 56px;
  padding: 0 24px !important;
  position: relative !important;
  top: auto !important;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

/* Ukryj blok z logo (nazwa jest w pasku bocznym) */
body.theme-pls .header-logo-wrap { display: none !important; }

/* Środkowy tytuł aplikacji — wyśrodkowany absolutnie */
.topbar-brand-center { display: none; }   /* ukryty w innych motywach */
body.theme-pls .topbar-brand-center {
  display: flex;
  align-items: center;       /* „Soft" wyśrodkowany w pionie względem PLANTLETLAB */
  gap: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  height: 56px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}
body.theme-pls .tbc-plantlet {
  font-family: 'Azonix', 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: normal;
  color: #000000;
  letter-spacing: 1px;
}
body.theme-pls .tbc-lab {
  font-family: 'Azonix', 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: normal;
  color: #000000;
  letter-spacing: 1px;
}
body.theme-pls .tbc-soft {
  font-family: 'Azonix', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #92c93b;
  letter-spacing: .5px;
  margin-left: 4px;
}

/* Tydzień / data */
body.theme-pls .header-week {
  background: #EEF0EB;
  color: #6B7C64 !important;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  opacity: 1 !important;
}
body.theme-pls .header-spacer { flex: 1 !important; min-width: 0 !important; }

/* User badge */
body.theme-pls .user-badge {
  background: transparent !important;
  border: 1.5px solid #DDE3D8 !important;
  border-radius: 8px;
  padding: 4px 10px 4px 6px;
}
body.theme-pls .user-name   { color: #0F1A0C !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; }
body.theme-pls #hdr-role    { color: #6B7C64 !important; }
body.theme-pls .user-avatar { background: #1C4535 !important; border-color: rgba(28,69,53,.2) !important; color: white !important; }

/* Przełącznik języka */
body.theme-pls #hdr-lang-pl  { background: #E8F5EE !important; color: #1C4535 !important; }
body.theme-pls #hdr-lang-en  { color: #6B7C64 !important; }
body.theme-pls header button { color: #6B7C64 !important; }

/* ── NAV → SIDEBAR (lewa kolumna, pełna wysokość) ── */
body.theme-pls nav {
  grid-area: sidebar;
  background: #FFFFFF !important;
  border-right: 1px solid #DDE3D8 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 0 10px 16px !important;
  height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  width: 240px;
  position: static !important;
  top: auto !important;
  z-index: 10;
  scrollbar-width: thin;
  scrollbar-color: #DDE3D8 transparent;
  align-items: stretch !important;
}
body.theme-pls nav::-webkit-scrollbar { width: 3px; }
body.theme-pls nav::-webkit-scrollbar-thumb { background: #DDE3D8; border-radius: 99px; }

/* Nagłówek sidebar — blok z logo i nazwą */
.sidebar-brand { display: none; }   /* ukryty w innych motywach */
body.theme-pls .sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid #EAF0E6;
  margin: 0 -10px 6px;
}
body.theme-pls .sidebar-brand #sidebar-logo-img {
  width: 100%;
  height: auto;
  max-height: 80px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
body.theme-pls .sidebar-brand #sidebar-brand-name {
  display: none;
}

/* Separator między grupami przycisków nawigacji */
body.theme-pls .nav-separator {
  display: block !important;
  width: auto !important;
  height: 1px !important;
  background: #EAF0E6 !important;
  margin: 5px 0 !important;
  border: none !important;
  align-self: stretch;
  flex-shrink: 0;
}

/* Przyciski nawigacji → pionowe pozycje sidebar */
body.theme-pls nav .nav-btn {
  display: flex !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  border-bottom: 2px solid transparent !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #4A5C52 !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  transition: background .1s, color .1s !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.theme-pls nav .nav-btn:hover {
  background: #EEF0EB !important;
  color: #0F1A0C !important;
  border-bottom-color: transparent !important;
}
body.theme-pls nav .nav-btn.active {
  background: #1C4535 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-bottom-color: transparent !important;
}

/* Ikony SVG w sidebar */
body.theme-pls nav .nav-btn svg.nav-icon,
body.theme-pls nav .nav-btn i.nav-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  margin-right: 6px !important;
  flex-shrink: 0;
}
body.theme-pls nav .nav-btn.active svg.nav-icon,
body.theme-pls nav .nav-btn.active i.nav-icon svg { stroke: #FFFFFF !important; }

/* Licznik w przycisku nawigacji */
body.theme-pls .nav-count {
  margin-left: auto !important;
  background: #FEF2F2 !important;
  color: #B91C1C !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 16px !important;
  border-radius: 9px !important;
  padding: 0 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
body.theme-pls nav .nav-btn.active .nav-count {
  background: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.9) !important;
}

/* ── MAIN → CONTENT (prawa dolna kolumna) ── */
body.theme-pls main {
  grid-area: content !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: 100%;
  flex: unset;
  scrollbar-width: thin;
  scrollbar-color: #DDE3D8 transparent;
}
body.theme-pls main::-webkit-scrollbar { width: 4px; }
body.theme-pls main::-webkit-scrollbar-thumb { background: #DDE3D8; border-radius: 99px; }

/* ── KARTY ── */
body.theme-pls .card {
  background: #FFFFFF !important;
  border: 1px solid #DDE3D8 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
}
body.theme-pls .card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08) !important; }
body.theme-pls .card-header {
  background: #F4F6F1 !important;
  border-bottom: 1px solid #DDE3D8 !important;
  border-radius: 12px 12px 0 0 !important;
}
body.theme-pls .card-title { font-size: 15px !important; font-weight: 700 !important; color: #0F1A0C !important; }

/* ── PRZYCISKI ── */
body.theme-pls .btn { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; }
body.theme-pls .btn-primary { background: #1C4535 !important; border-color: #1C4535 !important; }
body.theme-pls .btn-primary:hover { background: #2D6A4F !important; border-color: #2D6A4F !important; transform: translateY(-1px); }
body.theme-pls .btn-secondary { background: #FFFFFF !important; border-color: #DDE3D8 !important; color: #2D4028 !important; }
body.theme-pls .btn-secondary:hover { background: #EEF0EB !important; border-color: #2D6A4F !important; color: #1C4535 !important; }
body.theme-pls .btn-outline { border-color: #1C4535 !important; color: #1C4535 !important; }
body.theme-pls .btn-outline:hover { background: #E8F5EE !important; }

/* ── TABELE ── */
body.theme-pls table thead th {
  background: #F4F6F1 !important;
  color: #6B7C64 !important;
  border-bottom: 1px solid #DDE3D8 !important;
  font-size: 12px;
  letter-spacing: .04em;
}
body.theme-pls table tbody tr:hover td { background: #F0FDF4 !important; }
body.theme-pls table tbody td { border-bottom-color: #EAF0E6 !important; }

/* ── INPUTY I SELECTY ── */
body.theme-pls input, body.theme-pls select, body.theme-pls textarea {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-color: #DDE3D8 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
}
body.theme-pls input:focus, body.theme-pls select:focus, body.theme-pls textarea:focus {
  border-color: #2D6A4F !important;
  box-shadow: 0 0 0 3px rgba(45,106,79,.1) !important;
}

/* ── BADGE'E ── */
body.theme-pls .badge                { border-radius: 20px !important; }
body.theme-pls .badge-green          { background: #F0FDF4 !important; color: #166534 !important; border: 1px solid #BBF7D0 !important; }
body.theme-pls .badge-blue           { background: #EFF6FF !important; color: #1D4ED8 !important; border: 1px solid #BFDBFE !important; }
body.theme-pls .badge-amber          { background: #FFFBEB !important; color: #92400E !important; border: 1px solid #FDE68A !important; }
body.theme-pls .badge-red            { background: #FEF2F2 !important; color: #991B1B !important; border: 1px solid #FECACA !important; }
body.theme-pls .badge-gray           { background: #F4F6F1 !important; color: #6B7C64 !important; border: 1px solid #DDE3D8 !important; }
body.theme-pls .badge-accepted       { background: #EFF6FF !important; color: #1D4ED8 !important; border: 1px solid #BFDBFE !important; }
body.theme-pls .badge-completed      { background: #F0FDF4 !important; color: #166534 !important; border: 1px solid #BBF7D0 !important; }
body.theme-pls .badge-cancelled      { background: #FEF2F2 !important; color: #991B1B !important; border: 1px solid #FECACA !important; }
body.theme-pls .badge-production     { background: #FFFBEB !important; color: #92400E !important; border: 1px solid #FDE68A !important; }
body.theme-pls .badge-draft          { background: #F4F6F1 !important; color: #6B7C64 !important; border: 1px solid #DDE3D8 !important; }
body.theme-pls .s-mult  { background: #F0FDF4 !important; color: #166534 !important; }
body.theme-pls .s-elon  { background: #EDE9FE !important; color: #6D28D9 !important; }
body.theme-pls .s-root  { background: #FEF3C7 !important; color: #92400E !important; }
body.theme-pls .s-univ  { background: #F4F6F1 !important; color: #6B7C64 !important; }

/* ── MODAL ── */
body.theme-pls .modal         { border-radius: 14px !important; }
body.theme-pls .modal-header  { background: #F4F6F1 !important; border-bottom-color: #DDE3D8 !important; border-radius: 14px 14px 0 0 !important; }
body.theme-pls .modal-title   { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; }
body.theme-pls .modal-footer  { background: #F4F6F1 !important; border-top-color: #DDE3D8 !important; }

/* ── ALERTY ── */
body.theme-pls .alert-info  { background: #F0FDF4 !important; color: #166534 !important; border-color: #BBF7D0 !important; }
body.theme-pls .alert-warn  { background: #FFFBEB !important; color: #92400E !important; border-color: #FDE68A !important; }
body.theme-pls .alert-error { background: #FEF2F2 !important; color: #991B1B !important; border-color: #FECACA !important; }

/* ── STAT BOX / SECTION ── */
body.theme-pls .stat-box      { border-left: 3px solid #1C4535 !important; }
body.theme-pls .section-label { color: #6B7C64 !important; border-bottom-color: #EAF0E6 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

/* ── SCROLL ARROWS (tbl-scroll-btn) ── */
body.theme-pls .tbl-scroll-btn { background: #1C4535 !important; color: white !important; }

/* ══════════════════════════════════════════════════════════════
   PLS THEME — MOBILE RESPONSIVE (≤ 768px)
   Sidebar → slide-in drawer z hamburger button i backdrop
   ══════════════════════════════════════════════════════════════ */

/* Przycisk zamknięcia drawer — ukryty domyślnie (tylko mobile) */
.sidebar-close { display: none; }

/* Hamburger — ukryty domyślnie, widoczny tylko w PLS mobile */
.pls-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: #1C4535;
  flex-shrink: 0;
  transition: background .15s;
  padding: 0;
}
.pls-hamburger:hover { background: #EEF0EB; }
.pls-hamburger svg   { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Backdrop — ukryty domyślnie */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,26,12,.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {

  /* ── Grid: sidebar ukryty, topbar + content ── */
  body.theme-pls {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px 1fr !important;
    grid-template-areas:
      "topbar"
      "content" !important;
  }

  /* ── Hamburger widoczny ── */
  body.theme-pls .pls-hamburger {
    display: flex !important;
  }

  /* ── Topbar — lekki padding ── */
  body.theme-pls header {
    padding: 0 14px !important;
    gap: 8px !important;
  }

  /* Tytuł środkowy — trochę mniejszy na małych ekranach */
  body.theme-pls .tbc-plantlet,
  body.theme-pls .tbc-lab {
    font-size: 15px !important;
  }
  body.theme-pls .tbc-soft {
    display: none !important;
  }

  /* ── NAV → fixed drawer (wysuwa się z lewej) ── */
  body.theme-pls nav {
    position: fixed !important;
    left: -272px !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 272px !important;
    height: 100dvh !important;
    z-index: 200 !important;
    border-right: 1px solid #DDE3D8 !important;
    box-shadow: 4px 0 24px rgba(15,26,12,.18) !important;
    transition: left .26s cubic-bezier(.4,0,.2,1) !important;
    overflow-y: auto !important;
    padding-top: 0 !important;
  }

  /* Sidebar brand — dodaj header drawer z przyciskiem zamknięcia */
  body.theme-pls .sidebar-brand {
    height: 56px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    gap: 10px !important;
  }
  body.theme-pls .sidebar-brand #sidebar-logo-img {
    max-height: 36px !important;
    width: auto !important;
    border-radius: 50% !important;
  }
  body.theme-pls .sidebar-brand #sidebar-brand-name {
    display: block !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0F1A0C !important;
    flex: 1 !important;
    margin-left: 10px !important;
  }

  /* Przycisk zamknięcia w drawer */
  body.theme-pls .sidebar-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #6B7C64 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    font-size: 20px !important;
    transition: background .15s !important;
  }
  body.theme-pls .sidebar-close:hover { background: #EEF0EB !important; }

  /* ── Nav otwarta (body.nav-open) ── */
  body.theme-pls.nav-open nav {
    left: 0 !important;
    box-shadow: 8px 0 32px rgba(15,26,12,.25) !important;
  }

  /* ── Backdrop ── */
  body.theme-pls .nav-backdrop {
    display: block !important;
  }
  body.theme-pls.nav-open .nav-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── Main — pełna szerokość ── */
  body.theme-pls main {
    padding: 16px !important;
    height: calc(100dvh - 56px) !important;
  }

  /* ── User badge — skróć ── */
  body.theme-pls .user-name {
    max-width: 90px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body.theme-pls #hdr-role { display: none !important; }

  /* ── Usuń tabele overflow horizontal ── */
  body.theme-pls .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.theme-pls table { min-width: 520px !important; }

  /* Modals — bottom sheet na mobile */
  body.theme-pls .overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  body.theme-pls .modal {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh !important;
    max-width: 100% !important;
  }

  /* Karty — lekki padding */
  body.theme-pls .card { border-radius: 10px !important; }
  body.theme-pls main .card { margin-bottom: 14px !important; }
}

/* ── Bardzo małe ekrany (≤ 390px) ── */
@media (max-width: 390px) {
  body.theme-pls header { padding: 0 10px !important; }
  body.theme-pls main   { padding: 12px !important; }
  body.theme-pls .tbc-plantlet,
  body.theme-pls .tbc-lab { font-size: 14px !important; }
  body.theme-pls .user-name { max-width: 68px !important; }
}