/*
===================================
Lebenshilfe Bremervörde / Zeven gGmbH
Projekt: LHBZ Intranet
Entwickler: Florian Munzert
Datei: lh_premium.css
Zweck: Premium-Design-Ebene ("Variante A"). LETZTE Stilebene über dem bestehenden
       Design-System. Gibt dem GESAMTEN Intranet den neuen Look – jede Seite, jede
       Karte, jedes Formular, jede Tabelle und JEDES Modal (auch Fuhrpark & Tickets,
       da deren Farb-Tokens auf denselben globalen Tokens aufbauen).
       Kernidee: die zentralen Oberflächen-Tokens werden auf flache, solide Werte
       gesetzt -> alles, was diese Tokens nutzt, wird automatisch flach & premium.
       Reines Styling, keine Logik. Hell UND dunkel. Jederzeit reversibel.
Datei-Link: https://intern.lhbz.it/lh_premium.css
===================================
*/

/* =========================================================
   1) OBERFLÄCHEN-TOKENS flach & solide  (das Herzstück)
      Wirkt automatisch auf Karten, Panels, Modals, Felder,
      Chips, Tabs, Bubbles … global + Fuhrpark + Tickets.
   ========================================================= */
html:not([data-theme="dark"]){
  --glass:#f4f7f5;--glass-2:#ffffff;--glass-3:#ffffff;
  --glass-brd:#e6efe9;--hair:#eef2ef;
  --card-shadow:0 14px 34px rgba(12,45,32,.08);
  --accent:#e6892f;--accent-2:#f0a24e;--accent-cyan:#f0a24e;--violet:#e6892f;
  --accent-glow:rgba(230,137,47,.18);--orange:#e6892f;
  --glow-accent:0 10px 26px rgba(12,45,32,.08);--glow-brand:0 10px 26px rgba(10,125,84,.12);
  /* eigene Premium-Hilfstokens */
  --lhp-side-1:#0c6f4c;--lhp-side-2:#064a31;--lhp-side-mint:#7ce0b4;
  --lhp-card:#ffffff;--lhp-card-brd:#e6efe9;--lhp-hair:#eef2ef;
  --lhp-bg:#eef3f1;--lhp-ink:#15241c;--lhp-muted:#5d6f65;
  --lhp-shadow:0 14px 34px rgba(12,45,32,.08);--lhp-shadow-hi:0 20px 48px rgba(12,45,32,.11);
}
html[data-theme="dark"]{
  --glass:#141f1a;--glass-2:#17231e;--glass-3:#17231e;
  --glass-brd:#2b3a33;--hair:rgba(255,255,255,.07);
  --card-shadow:0 22px 46px rgba(0,0,0,.42);
  --accent:#f0a24e;--accent-2:#f6b877;--accent-cyan:#f6b877;--violet:#f0a24e;
  --accent-glow:rgba(240,162,78,.24);--orange:#f0a24e;
  --glow-accent:0 14px 30px rgba(0,0,0,.4);--glow-brand:0 14px 30px rgba(0,0,0,.4);
  --lhp-side-1:#0c6f4c;--lhp-side-2:#064a31;--lhp-side-mint:#7ce0b4;
  --lhp-card:#17231e;--lhp-card-brd:#2b3a33;--lhp-hair:rgba(255,255,255,.07);
  --lhp-bg:#0b130f;--lhp-ink:#eef6f0;--lhp-muted:#9eb0a5;
  --lhp-shadow:0 22px 46px rgba(0,0,0,.42);--lhp-shadow-hi:0 26px 60px rgba(0,0,0,.55);
}

/* =========================================================
   2) RUHIGER, FLACHER HINTERGRUND (Aurora/Glas beruhigen)
   ========================================================= */
html body::before{display:none!important}
html body::after{display:none!important}
html body,html body.app-layout-body,html body .app-main,html body .main-wrapper,html body .content-area,html body .fp-content{background:var(--lhp-bg)!important}

/* =========================================================
   3) SIDEBAR – satte grüne Premium-Sidebar (hell + dunkel)
   ========================================================= */
.app-sidebar.sidebar{
  background:linear-gradient(168deg,var(--lhp-side-1) 0%,var(--lhp-side-2) 100%)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border-right:0!important;box-shadow:2px 0 34px rgba(6,45,32,.16)!important;overflow:hidden!important;
}
.app-sidebar.sidebar::before{background:radial-gradient(720px 320px at 28% -8%,rgba(255,255,255,.14),transparent 60%)!important;opacity:1!important}
.app-sidebar.sidebar::after{display:none!important}
.app-sidebar.sidebar .sidebar-header{border-bottom-color:rgba(255,255,255,.12)!important}
.app-sidebar.sidebar .sidebar-logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.22))!important;animation:none!important}
.app-sidebar.sidebar .sidebar-logo-link.has-dark-logo .sidebar-logo.logo-light{display:none!important}
.app-sidebar.sidebar .sidebar-logo-link.has-dark-logo .sidebar-logo.logo-dark{display:block!important}
:root[data-theme="dark"] .app-sidebar.sidebar .sidebar-logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))!important}
.app-sidebar.sidebar .menu-item,.app-sidebar.sidebar .submenu-item,.app-sidebar.sidebar .menu-group-head{color:rgba(255,255,255,.82)!important;background:transparent!important}
.app-sidebar.sidebar .menu-item svg:not(.chevron),.app-sidebar.sidebar .submenu-item svg,.app-sidebar.sidebar .menu-group-head svg:not(.chevron){color:rgba(255,255,255,.85)!important;opacity:.92!important}
.app-sidebar.sidebar .menu-group-head .chevron{color:rgba(255,255,255,.55)!important;opacity:.7!important}
.app-sidebar.sidebar .submenu-section{color:rgba(255,255,255,.45)!important}
.app-sidebar.sidebar .submenu{border-left-color:rgba(255,255,255,.14)!important}
.app-sidebar.sidebar .menu-item:hover,.app-sidebar.sidebar .submenu-item:hover,.app-sidebar.sidebar .menu-group-head:hover{background:rgba(255,255,255,.10)!important;color:#fff!important;transform:none!important;box-shadow:none!important;border-color:transparent!important}
.app-sidebar.sidebar .menu-item:hover svg:not(.chevron),.app-sidebar.sidebar .submenu-item:hover svg{color:#fff!important;transform:none!important}
.app-sidebar.sidebar .menu-item.active,.app-sidebar.sidebar .menu-group-head.active-group,.app-sidebar.sidebar .submenu-item.active{
  color:#fff!important;font-weight:700!important;background:rgba(255,255,255,.16)!important;background-size:auto!important;animation:none!important;
  box-shadow:inset 3px 0 0 var(--lhp-side-mint)!important;border-color:transparent!important;
}
.app-sidebar.sidebar .menu-item.active svg:not(.chevron),.app-sidebar.sidebar .submenu-item.active svg{color:#fff!important;opacity:1!important}
.app-sidebar.sidebar .menu-item.active::before,.app-sidebar.sidebar .menu-group-head.active-group::before,.app-sidebar.sidebar .submenu-item.active::before{display:none!important}
.app-sidebar.sidebar .menu-item::after,.app-sidebar.sidebar .submenu-item::after{background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent)!important}
:root[data-theme="dark"] .app-sidebar.sidebar .menu-item.active,:root[data-theme="dark"] .app-sidebar.sidebar .menu-group-head.active-group,:root[data-theme="dark"] .app-sidebar.sidebar .submenu-item.active{color:#fff!important;background:rgba(255,255,255,.17)!important;box-shadow:inset 3px 0 0 var(--lhp-side-mint)!important}
:root[data-theme="dark"] .app-sidebar.sidebar .menu-item.active svg:not(.chevron),:root[data-theme="dark"] .app-sidebar.sidebar .submenu-item.active svg{color:#fff!important}
:root[data-theme="dark"] .app-sidebar.sidebar .menu-item:hover svg:not(.chevron),:root[data-theme="dark"] .app-sidebar.sidebar .submenu-item:hover svg{color:#fff!important}
.app-sidebar.sidebar .sidebar-footer{border-top-color:rgba(255,255,255,.12)!important;background:transparent!important}
.app-sidebar.sidebar .sidebar-user{color:rgba(255,255,255,.62)!important}
.app-sidebar.sidebar .sidebar-user::before{background:var(--lhp-side-mint)!important;box-shadow:none!important;animation:none!important}
.app-sidebar.sidebar .logout-btn{background:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.85)!important;border-color:rgba(255,255,255,.18)!important}
.app-sidebar.sidebar .logout-btn:hover{background:rgba(214,80,64,.92)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 8px 20px rgba(200,60,46,.3)!important}
.app-sidebar.sidebar .logout-btn:hover svg{color:#fff!important}
.app-sidebar.sidebar .task-sidebar-badge{background:var(--orange)!important;box-shadow:0 4px 12px rgba(230,137,47,.4)!important}

/* =========================================================
   4) KOPFZEILE (Topbar)
   ========================================================= */
html body .topbar,html body header.topbar,html body .topbar.fp-top{
  background:rgba(255,255,255,.85)!important;backdrop-filter:blur(8px) saturate(1.1)!important;-webkit-backdrop-filter:blur(8px) saturate(1.1)!important;
  border-bottom-color:var(--lhp-card-brd)!important;box-shadow:none!important;
}
html body .topbar::after,html body header.topbar::after{display:none!important}
html body .topbar .topbar-title,html body header.topbar .topbar-title{color:var(--brand-deep)!important}
html[data-theme="dark"] body .topbar,html[data-theme="dark"] body header.topbar,html[data-theme="dark"] body .topbar.fp-top{background:rgba(16,28,23,.72)!important;border-bottom-color:rgba(255,255,255,.07)!important}
.user-avatar{box-shadow:0 8px 20px rgba(0,95,58,.22)!important}
.user-avatar::after{border-color:rgba(255,255,255,.5)!important}
.lh-theme-toggle{background:#fff!important;border-color:var(--lhp-card-brd)!important;box-shadow:0 6px 16px rgba(12,45,32,.06)!important;backdrop-filter:none!important}
:root[data-theme="dark"] .lh-theme-toggle{background:var(--lhp-card)!important;border-color:var(--lhp-card-brd)!important}

/* =========================================================
   5) KARTEN – flach, solide, weicher Schatten  (inkl. Module)
   ========================================================= */
.card,.admin-card,.settings-card,.info-panel,.app-card,.lh-card,
.hero,.welcome-card,.intro-card,.page-intro,.hero-panel,
.news-card,.episode-card,.training-card,.glow-card,.task-card,
.mp-card,.mp-panel,.mp-section,.room-panel,.chat-panel,
.fp-card,.tk-card,.tk-rep-card{
  background:var(--lhp-card)!important;border-color:var(--lhp-card-brd)!important;
  box-shadow:var(--lhp-shadow)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.card:hover,.app-card:hover,.lh-card:hover,.news-card:hover,.episode-card:hover,.training-card:hover,.glow-card:hover,.fp-card:hover{border-color:#dbe7e0!important;box-shadow:var(--lhp-shadow-hi)!important;transform:none!important}
.card::after,.lh-card::after,.news-card::after,.episode-card::after,.training-card::after,.glow-card::after,.news-card.clickable-news-card::after,.app-card::before,.app-card::after,.fp-card::before,.fp-card::after{display:none!important;opacity:0!important;animation:none!important}
:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .app-card:hover,:root[data-theme="dark"] .lh-card:hover,:root[data-theme="dark"] .fp-card:hover{border-color:#3a4a42!important}

/* =========================================================
   6) DASHBOARD – Hero, Kachel-Grid, Mini-Statistiken
   ========================================================= */
.hero{background:linear-gradient(135deg,#ffffff 0%,#f3f9f5 100%)!important;border-color:var(--lhp-card-brd)!important;box-shadow:var(--lhp-shadow)!important}
.hero::before,.hero::after{display:none!important}
:root[data-theme="dark"] .hero{background:linear-gradient(135deg,#17231e 0%,#132019 100%)!important}
.hero h1{text-shadow:none!important;color:var(--brand-deep)!important}
:root[data-theme="dark"] .hero h1{color:#eef6f0!important}
.eyebrow{background:#eaf6f0!important;border-color:#d7ece1!important;color:var(--brand-deep)!important;box-shadow:none!important;backdrop-filter:none!important}
:root[data-theme="dark"] .eyebrow{background:rgba(52,227,155,.12)!important;border-color:rgba(52,227,155,.24)!important;color:#7ce0b4!important}
.app-card:hover{transform:none!important;box-shadow:var(--lhp-shadow-hi)!important;border-color:#cfe6da!important}
.mini-stat{background:var(--lhp-card)!important;border-color:var(--lhp-hair)!important}
.mini-stat:hover{border-color:#cfe6da!important;box-shadow:var(--lhp-shadow)!important;transform:none!important}
.mini-stat strong{color:var(--brand-deep)!important}
:root[data-theme="dark"] .mini-stat strong{color:#7ce0b4!important}
.btn-light{background:#fff!important;color:var(--brand-deep)!important;border-color:#cfe6da!important;backdrop-filter:none!important;box-shadow:0 6px 16px rgba(12,45,32,.06)!important}
.btn-main::before,.btn-light::before{display:none!important;opacity:0!important}
:root[data-theme="dark"] .btn-light{background:var(--lhp-card)!important;color:#7ce0b4!important;border-color:var(--lhp-card-brd)!important}

/* =========================================================
   7) BUTTONS – Primär grün (bleibt), Sekundär flach
   ========================================================= */
.btn-primary,.btn-submit,button.btn-primary,a.btn-primary,input[type="submit"].btn-primary,input[type="submit"].btn-submit{box-shadow:0 8px 18px rgba(10,125,84,.22)!important}
.btn-danger,.btn.danger,.btn-danger-action,button.danger,button.delete,a.delete,[data-action="delete"]{box-shadow:0 8px 18px rgba(200,60,46,.2)!important}
.btn-primary::before,.btn-submit::before,.btn-secondary::before,.btn-secondary-action::before,.btn-ghost::before,.btn.secondary::before,a.btn::before,a.btn:not(.btn-primary)::before,button.btn-primary::before,.btn-main::before,.btn-light::before{content:none!important;display:none!important;opacity:0!important}
/* NUR die benannten Sekundär-Buttons flach weiß machen – NICHT alle Buttons,
   damit Modul-Buttons (z. B. Fuhrpark .fp-btn = grün, .fp-btn-alt = orange) ihren
   gefüllten Look behalten. Generische Buttons regelt bereits lh_buttons.css. */
.btn-secondary,.btn.secondary,.btn-secondary-action,.btn-ghost,
.btn:not(.btn-primary):not(.btn-submit):not(.danger):not(.delete):not(.btn-danger),
a.btn:not(.btn-primary):not(.btn-submit):not(.danger):not(.delete):not(.btn-danger){
  background:#fff!important;color:var(--brand-deep)!important;border-color:#cfe6da!important;box-shadow:none!important;backdrop-filter:none!important;
}
:root[data-theme="dark"] .btn-secondary,:root[data-theme="dark"] .btn.secondary,:root[data-theme="dark"] .btn-secondary-action,:root[data-theme="dark"] .btn-ghost{background:var(--lhp-card)!important;color:#7ce0b4!important;border-color:var(--lhp-card-brd)!important}
#lhNavBurger{background:linear-gradient(135deg,var(--lhp-side-1),var(--lhp-side-2))!important;color:#fff!important;border:0!important}
/* Modul-Buttons (Fuhrpark/Tickets) GEFÜLLT lassen. Die breite Sekundär-Regel in
   lh_buttons.css hat sehr hohe Spezifität (viele :not()) und würde diese sonst
   weiß färben – deshalb hier per :not(#_) auf ID-Ebene angehoben. */
.fp-btn:not(#_),.fp-btn-alt:not(#_),.fp-btn-danger:not(#_){color:#fff!important;border:0!important;backdrop-filter:none!important;text-shadow:none!important}
.fp-btn:not(#_){background:linear-gradient(135deg,var(--brand,#0a7d54),var(--brand-deep,#06593a))!important;box-shadow:0 8px 18px rgba(10,125,84,.2)!important}
.fp-btn-alt:not(#_){background:linear-gradient(135deg,#eda766,var(--orange,#e6892f))!important;box-shadow:0 8px 18px rgba(230,137,47,.2)!important}
.fp-btn-danger:not(#_){background:linear-gradient(135deg,#e74c3c,#a93226)!important;box-shadow:0 8px 18px rgba(169,50,38,.2)!important}
.fp-btn:not(#_):hover,.fp-btn-alt:not(#_):hover,.fp-btn-danger:not(#_):hover{filter:saturate(1.05) brightness(1.02);box-shadow:0 12px 26px rgba(10,125,84,.26)!important}

/* =========================================================
   8) FORMULARE – NUR umlackiert: solide weiß, saubere Rahmenfarbe,
      grüner Fokus. KEINE Größen/Abstände/Radien -> Layout bleibt 1:1.
   ========================================================= */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea,select,.form-control,.input,.textarea{
  background-color:#fff!important;border-color:#d7e3dc!important;color:var(--lhp-ink)!important;box-shadow:none!important;
}
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,select:focus,.form-control:focus,.input:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(10,125,84,.15)!important;outline:0!important}
:root[data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:root[data-theme="dark"] textarea,:root[data-theme="dark"] select,:root[data-theme="dark"] .form-control{background-color:#12201a!important;border-color:var(--lhp-card-brd)!important;color:var(--lhp-ink)!important}
label,.field-label,.form-label{color:var(--brand-deep)!important}

/* =========================================================
   9) MODALS – ALLE Varianten: flach weiß, weicher Schatten,
      dunkles Overlay, sichtbares Schließen-Kreuz (×)
   ========================================================= */
.modal-box,.modalbox,.modal-card,.mp-modal-box,.chat-modal-box,.lh-modal-box,.admin-page-visibility-box,.tutorial-first-box,.fp-modal-box,.tk-modal-box,.lh-detail-box{
  background:var(--lhp-card)!important;border-color:var(--lhp-card-brd)!important;
  box-shadow:0 40px 90px rgba(6,45,32,.22)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.modal-overlay,.modal,.mp-modal,.chat-modal,.lh-modal,.admin-page-visibility-modal,.fp-modal,.tk-modal,.lh-detail-modal{
  background:rgba(6,20,14,.5)!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;
}
/* Schließen-Button – nur umlackiert (Position/Größe kommen unverändert aus lh_overrides.css) */
.modal-close,.close,.lh-detail-close,.lh-xclose,.mp-modal-close,.chat-modal-close,.tutorial-first-close,.admin-page-visibility-close,.tk-modal-x{
  background:#f4f7f5!important;color:var(--brand-deep)!important;border-color:var(--lhp-card-brd)!important;box-shadow:none!important;backdrop-filter:none!important;
}
:root[data-theme="dark"] .modal-close,:root[data-theme="dark"] .close,:root[data-theme="dark"] .lh-detail-close,:root[data-theme="dark"] .mp-modal-close,:root[data-theme="dark"] .chat-modal-close,:root[data-theme="dark"] .tutorial-first-close,:root[data-theme="dark"] .admin-page-visibility-close,:root[data-theme="dark"] .tk-modal-x{background:#1b2a23!important;color:#7ce0b4!important;border-color:var(--lhp-card-brd)!important}
/* × als SVG (bestehend) sichtbar halten */
.modal-close svg,.close svg,.lh-detail-close svg,.mp-modal-close svg,.chat-modal-close svg,.tutorial-first-close svg,.admin-page-visibility-close svg,.tk-modal-x svg{display:block!important;width:20px!important;height:20px!important;opacity:1!important;visibility:visible!important}
.modal-close svg path,.close svg path,.lh-detail-close svg path,.mp-modal-close svg path,.tk-modal-x svg path{stroke:currentColor!important;fill:none!important}
/* Sicherheitsnetz: Close-Buttons OHNE SVG bekommen ein garantiertes × */
.modal-close:not(:has(svg)):not(:has(.lh-x-ico))::after,
.close:not(:has(svg))::after,
.lh-detail-close:not(:has(svg))::after,
.mp-modal-close:not(:has(svg))::after,
.chat-modal-close:not(:has(svg))::after,
.tutorial-first-close:not(:has(svg))::after,
.admin-page-visibility-close:not(:has(svg))::after,
.tk-modal-x:not(:has(svg))::after{
  content:''!important;display:block!important;width:16px!important;height:16px!important;background:currentColor!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6 L18 18 M18 6 L6 18' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat!important;
}

/* =========================================================
   10) TABELLEN – klar, ruhige Zeilen
   ========================================================= */
.answer-table,.table,table.table,.data-table,.admin-table{background:#fff!important;border-color:var(--lhp-card-brd)!important}
.answer-table thead th,.table thead th,.data-table thead th,.admin-table thead th,table.table thead th{background:#f4f8f6!important;color:var(--brand-deep)!important}
.answer-table td,.table td,.data-table td,.admin-table td,.answer-table th,.table th,.data-table th,.admin-table th{border-color:var(--lhp-hair)!important}
.answer-table tbody tr:nth-child(even) td,.table tbody tr:nth-child(even) td,.data-table tbody tr:nth-child(even) td,.admin-table tbody tr:nth-child(even) td{background:#fafcfb!important}
:root[data-theme="dark"] .answer-table,:root[data-theme="dark"] .table,:root[data-theme="dark"] table.table,:root[data-theme="dark"] .data-table,:root[data-theme="dark"] .admin-table{background:var(--lhp-card)!important;border-color:var(--lhp-card-brd)!important}
:root[data-theme="dark"] .answer-table thead th,:root[data-theme="dark"] .table thead th,:root[data-theme="dark"] .data-table thead th,:root[data-theme="dark"] .admin-table thead th{background:rgba(255,255,255,.04)!important;color:#7ce0b4!important}
:root[data-theme="dark"] .answer-table tbody tr:nth-child(even) td,:root[data-theme="dark"] .table tbody tr:nth-child(even) td,:root[data-theme="dark"] .data-table tbody tr:nth-child(even) td,:root[data-theme="dark"] .admin-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)!important}

/* =========================================================
   11) KLEINTEILE
   ========================================================= */
.news-card .badge.orange,.episode-card .badge.orange,.training-card .badge.orange{background:rgba(230,137,47,.16)!important;color:#b56a22!important;border-color:rgba(230,137,47,.32)!important}
.read-more{color:var(--brand-deep)!important}
::-webkit-scrollbar-thumb{background:#cfe0d7!important;border-radius:9px}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14)!important}

/*
===================================
Lebenshilfe Bremervörde / Zeven gGmbH · lh_premium.css · Ende
===================================
*/