/**
 * shell.css – SEMPERconnect Shell-Styles v5.0 (2026 Design System)
 * Upload: /web/shop/SEMPERconnect/core/shell.css
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* ── Color Tokens ── */
  --blue:#1B7599;--dark:#0d3d52;--orange:#E88B00;--green:#1a6640;
  --red:#c0392b;--bg:#f2f5f8;--white:#fff;--border:#e0e7ee;
  --text:#1a2a34;--muted:#6b7f90;
  --hover:#f6f8fa;--sel:#d4ecf7;
  --panel:#fff;--accent:#1B7599;--danger:#c0392b;--surface:#f5f8fa;
  /* ── Radius ── */
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-full:100px;
  /* ── Shadow ── */
  --sh-xs:0 1px 2px rgba(0,0,0,.04);
  --sh-sm:0 2px 6px rgba(0,0,0,.05);
  --sh-md:0 4px 16px rgba(0,0,0,.07);
  --sh-lg:0 8px 32px rgba(0,0,0,.10);
  --sh-focus:0 0 0 3px rgba(27,117,153,.14);
  /* ── Spacing ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  /* ── Timing ── */
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-bounce:cubic-bezier(.175,.885,.32,1.275);
  --dur:.18s;--dur-md:.25s;--dur-lg:.35s;
}
[data-theme="dark"]{
  --blue:#4da8da;--dark:#0a1520;--orange:#E88B00;--green:#4caf7a;
  --bg:#0f1419;--white:#1a2332;--border:#253545;
  --text:#d4dce6;--muted:#7a8fa0;
  --hover:#1e2d3d;--sel:#1d4a6a;
  --panel:#1a2332;--accent:#4da8da;--danger:#e57373;--surface:#151e2a;
  --sh-xs:0 1px 2px rgba(0,0,0,.15);--sh-sm:0 2px 6px rgba(0,0,0,.2);
  --sh-md:0 4px 16px rgba(0,0,0,.3);--sh-lg:0 8px 32px rgba(0,0,0,.4);
  --sh-focus:0 0 0 3px rgba(77,168,218,.2);
}
[data-theme="dark"] .auth-box{border:1px solid var(--border);}
[data-theme="dark"] .msg.customer .bubble{background:var(--hover);border-color:var(--border);color:var(--text);}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--bg);color:var(--text);border-color:var(--border);}
[data-theme="dark"] .app-header{background:linear-gradient(135deg,#071218,#0d2030 50%,#143d4c);}

[data-theme="pink"]{
  --blue:#b04080;--dark:#7a2055;--orange:#d45090;--green:#b04080;
  --bg:#fdf2f8;--white:#fff;--border:#f0d0e0;
  --text:#4a1030;--muted:#a06080;
  --hover:#fce8f2;--sel:#f0b5d0;
  --panel:#fff;--accent:#b04080;--danger:#c0392b;--surface:#fdf2f8;
  --sh-focus:0 0 0 3px rgba(176,64,128,.12);
}
[data-theme="pink"] .app-header{background:linear-gradient(135deg,#7a2055,#b04080 50%,#d45090);}
[data-theme="pink"] .btn-primary{background:linear-gradient(135deg,#b04080,#d45090);}
[data-theme="pink"] .msg.agent .bubble{background:linear-gradient(135deg,#b04080,#d45090);color:#fff;}
[data-theme="pink"] .admin-nav-item.sel{border-color:#b04080;color:#b04080;background:#fce8f2;}
[data-theme="pink"] input:focus,[data-theme="pink"] select:focus,[data-theme="pink"] textarea:focus{border-color:#b04080!important;box-shadow:var(--sh-focus);}

[data-theme="gray"]{
  --blue:#5a6672;--dark:#3a4450;--orange:#8a9060;--green:#6a7a6a;
  --bg:#f2f3f5;--white:#fff;--border:#dcdfe3;
  --text:#2c3e50;--muted:#7f8c9b;
  --hover:#eceef0;--sel:#cdd4dc;
  --panel:#fff;--accent:#5a6672;--danger:#c0392b;--surface:#f2f3f5;
  --sh-focus:0 0 0 3px rgba(90,102,114,.12);
}
[data-theme="gray"] .app-header{background:linear-gradient(135deg,#2c3e50,#4a5568 50%,#5a6672);}
[data-theme="gray"] .btn-primary{background:linear-gradient(135deg,#4a5568,#5a6672);}
[data-theme="gray"] .msg.agent .bubble{background:linear-gradient(135deg,#4a5568,#5a6672);color:#fff;}
[data-theme="gray"] .admin-nav-item.sel{border-color:#5a6672;color:#5a6672;background:#e0e4e8;}
[data-theme="gray"] input:focus,[data-theme="gray"] select:focus,[data-theme="gray"] textarea:focus{border-color:#5a6672!important;box-shadow:var(--sh-focus);}

/* ── Global ── */
body{font-family:'Inter',Barlow,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
::selection{background:rgba(27,117,153,.15);color:var(--text);}
.screen{display:none;flex:1;flex-direction:column;overflow:hidden;}
.screen.active{display:flex;}
input,textarea,select{font-family:inherit;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;border:none;border-radius:var(--r-md);padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);font-family:inherit;white-space:nowrap;position:relative;overflow:hidden;}
.btn:hover{opacity:.92;}
.btn:active{transform:scale(.97);transition-duration:.08s;}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--dark));color:#fff;box-shadow:var(--sh-sm);}
.btn-primary:hover{opacity:1;filter:brightness(1.08);box-shadow:0 4px 14px rgba(27,117,153,.25);}
.btn-orange{background:linear-gradient(135deg,#F5A623,var(--orange));color:#fff;box-shadow:var(--sh-sm);}
.btn-orange:hover{opacity:1;filter:brightness(1.08);}
.btn-green{background:linear-gradient(135deg,#2e9e5e,var(--green));color:#fff;box-shadow:var(--sh-sm);}
.btn-green:hover{opacity:1;filter:brightness(1.08);}
.btn-danger{background:linear-gradient(135deg,#e05555,var(--red));color:#fff;box-shadow:var(--sh-sm);}
.btn-danger:hover{opacity:1;filter:brightness(1.08);box-shadow:0 4px 14px rgba(192,57,43,.25);}
.btn-ghost{background:rgba(255,255,255,.1);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:hover{opacity:1;border-color:var(--blue);color:var(--blue);background:rgba(27,117,153,.04);}
.btn-sm{padding:5px 10px;font-size:11.5px;border-radius:var(--r-sm);}
.btn-block{width:100%;justify-content:center;}
.badge{display:inline-block;padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.badge-blue{background:#dbeeff;color:var(--blue);}
.badge-orange{background:#fff0d6;color:var(--orange);}
.badge-green{background:#d4edda;color:var(--green);}

/* Auth */
.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#071f2b,var(--blue));}
.auth-box{background:var(--white);border-radius:var(--r-xl);padding:40px 36px;width:380px;box-shadow:var(--sh-lg);}
.auth-logo{text-align:center;margin-bottom:28px;}
.auth-logo h2{font-size:22px;font-weight:800;color:var(--blue);}
.auth-logo p{font-size:12px;color:var(--muted);margin-top:5px;}
.form-row{margin-bottom:12px;}
.form-row label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:5px;}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-md);padding:10px 13px;font-size:13px;outline:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);box-sizing:border-box;background:var(--bg);font-family:inherit;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--blue);box-shadow:var(--sh-focus);background:var(--white);}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted);opacity:.55;}
.err{background:#fdecea;color:var(--red);border-radius:var(--r-sm);padding:8px 12px;font-size:12.5px;margin-bottom:12px;display:none;}
.err.show{display:block;}

/* App Header */
.app-header{
  background:
    radial-gradient(ellipse 30% 80% at 100% 50%, rgba(68,153,212,.25) 0%, transparent 70%),
    radial-gradient(ellipse 20% 60% at 0% 50%, rgba(232,139,0,.08) 0%, transparent 70%),
    linear-gradient(135deg,#061a25 0%,#0a2838 35%,var(--dark) 65%,var(--blue) 100%);
  padding:0 20px;
  display:flex;align-items:center;gap:12px;
  min-height:52px;flex-shrink:0;z-index:1000;
  position:relative;
  box-shadow:0 2px 10px rgba(0,0,0,.12),inset 0 -1px 0 rgba(255,255,255,.05);
}
/* Subtle animated light sweep at the top edge */
.app-header::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:50% 100%;background-position:-50% 0;
  animation:headerShimmer 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes headerShimmer{
  0%,100%{background-position:-50% 0;opacity:.4;}
  50%{background-position:150% 0;opacity:.7;}
}
.app-logo{font-size:14px;font-weight:800;color:#fff;letter-spacing:.07em;white-space:nowrap;}
.app-logo sub{font-size:10px;opacity:.6;font-weight:400;margin-left:6px;}
.status-toggle{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;cursor:pointer;border:none;font-family:inherit;font-size:12px;font-weight:700;transition:all var(--dur) var(--ease);margin-left:8px;}
.status-toggle.off{background:rgba(255,255,255,.1);color:rgba(255,255,255,.7);}
.status-toggle.on{background:rgba(74,222,128,.18);color:#4ade80;border:1px solid rgba(74,222,128,.3);}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.status-toggle.off .sdot{background:rgba(255,255,255,.4);}
.status-toggle.on .sdot{background:#4ade80;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════════════════════════════════════════════════
   PRIMARY NAVIGATION — Premium design with shimmer hover,
   overflow-safe (no cut-off), theme-aware, font-scale-resilient
   ═══════════════════════════════════════════════════════════════ */
.header-nav{
  display:flex;gap:6px;
  margin:0 12px;flex:1;min-width:0;
  /* overflow-x:clip allows translateY to show while clipping horizontal excess.
     Fallback: overflow-x:auto only when truly needed via .nav-overflow class. */
  overflow:visible;
  padding:4px 0; /* Buffer so hover-lift isn't clipped */
  position:relative;
  /* Scroll snap when in overflow mode */
  scroll-behavior:smooth;
}
.header-nav.nav-overflow{overflow-x:auto;overflow-y:visible;scrollbar-width:none;}
.header-nav.nav-overflow::-webkit-scrollbar{display:none;}
/* Fade hint when scrollable */
.header-nav.nav-overflow::after{
  content:'';position:sticky;right:0;width:32px;flex-shrink:0;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.15));
  pointer-events:none;margin-left:-32px;
}

.nav-tab{
  display:flex;align-items:center;gap:7px;
  padding:10px 18px;
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
  font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:color .2s var(--ease),border-color .2s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden; /* Contains shimmer */
  isolation:isolate; /* For pseudo z-index */
  min-height:38px;
  flex-shrink:0;
}
.nav-tab i{font-size:14px;opacity:.95;transition:transform .3s var(--ease-bounce);}
/* Shimmer sweep layer (hidden by default, reveals on hover) */
.nav-tab::before{
  content:'';
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,.18) 55%,
    transparent 70%);
  background-size:200% 100%;background-position:-100% 0;
  opacity:0;
  transition:opacity .2s,background-position .7s var(--ease-out);
  pointer-events:none;
}
/* Gradient colored glow layer — theme-shifts */
.nav-tab::after{
  content:'';
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(135deg,
    rgba(74,168,218,.0),
    rgba(139,92,246,.0),
    rgba(232,139,0,.0));
  transition:opacity .35s var(--ease-out);
  pointer-events:none;
}
.nav-tab:hover{
  border-color:rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 6px 18px rgba(0,0,0,.18);
}
.nav-tab:hover::before{opacity:1;background-position:200% 0;}
.nav-tab:hover::after{
  background:linear-gradient(135deg,
    rgba(74,168,218,.25),
    rgba(139,92,246,.18),
    rgba(232,139,0,.22));
  opacity:1;
}
.nav-tab:hover i{transform:scale(1.12);}
/* Active state: solid pill with theme-primary text */
.nav-tab.active{
  background:linear-gradient(135deg,#fff,#f7fafc);
  color:var(--blue);
  border-color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.5);
  font-weight:700;
}
.nav-tab.active i{opacity:1;color:var(--blue);}
.nav-tab.active::before,.nav-tab.active::after{display:none;}
/* Badge inside tab */
.nav-tab .unread-badge{background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:2px;}

/* Pink theme: shift hover glow to pink accents */
[data-theme="pink"] .nav-tab:hover::after{
  background:linear-gradient(135deg,
    rgba(212,80,144,.3),
    rgba(176,64,128,.22),
    rgba(250,140,180,.25));
}
[data-theme="pink"] .nav-tab.active{color:#b04080;}
[data-theme="pink"] .nav-tab.active i{color:#b04080;}

/* Dark theme: softer glow */
[data-theme="dark"] .nav-tab:hover::after{
  background:linear-gradient(135deg,
    rgba(77,168,218,.3),
    rgba(167,139,250,.25),
    rgba(232,139,0,.2));
}

/* Gray theme: warm subdued glow */
[data-theme="gray"] .nav-tab:hover::after{
  background:linear-gradient(135deg,
    rgba(138,144,96,.3),
    rgba(90,102,114,.22),
    rgba(106,122,106,.25));
}

/* ═══════════════════════════════════════════════════════════════
   HEADER RIGHT AREA — Admin button, prefs, profile chip
   ═══════════════════════════════════════════════════════════════ */
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Distinctive Admin Button — theme-aware shimmer */
.admin-nav-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 18px;
  border:1.5px solid rgba(232,139,0,.5);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(232,139,0,.28),rgba(232,139,0,.14));
  color:#fff;
  font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;
  transition:color .2s,border-color .2s,background-color .25s,box-shadow .25s;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(232,139,0,.2);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:38px;
}
.admin-nav-btn i{font-size:14px;color:#ffc871;filter:drop-shadow(0 0 4px rgba(255,200,113,.5));}
.admin-nav-btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,200,113,.35) 50%,transparent 70%);
  background-size:200% 100%;background-position:-100% 0;
  opacity:0;
  transition:opacity .2s,background-position .8s var(--ease-out);
}
.admin-nav-btn:hover{
  background:linear-gradient(135deg,rgba(232,139,0,.45),rgba(232,139,0,.28));
  border-color:rgba(232,139,0,.8);
  box-shadow:0 6px 20px rgba(232,139,0,.35),0 0 0 1px rgba(255,200,113,.2);
}
.admin-nav-btn:hover::before{opacity:1;background-position:200% 0;}
.admin-nav-btn:hover i{filter:drop-shadow(0 0 6px rgba(255,200,113,.8));}
.admin-nav-btn.active{
  background:linear-gradient(135deg,#E88B00,#d17800);
  border-color:#E88B00;
  color:#fff;
  box-shadow:0 3px 14px rgba(232,139,0,.5);
}
.admin-nav-btn.active i{color:#fff;filter:none;}

/* Compact variant: icon-only square button (40x40), matches the prefs-btn size in the header.
   Keeps the distinctive gold styling but takes much less horizontal space. Used in the header
   after the nav-tabs so admins always have direct access without opening the profile menu. */
.admin-nav-btn.admin-nav-btn-compact{
  width:40px;height:40px;padding:0;
  min-height:unset;
  justify-content:center;
  border-radius:10px;
  gap:0;
}
.admin-nav-btn.admin-nav-btn-compact i{font-size:15px;}
.admin-nav-btn.admin-nav-btn-compact .admin-nav-btn-label{display:none;}

/* Compact Preferences Button */
.prefs-btn{
  width:40px;height:40px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);
  cursor:pointer;
  font-size:15px;
  transition:background-color .25s var(--ease),color .2s,border-color .2s,box-shadow .25s;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
/* Soft radial glow that grows from center — no conic-gradient edge bleeding */
.prefs-btn::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35) 0%,rgba(255,255,255,.15) 40%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .2s;
  opacity:0;
  pointer-events:none;
}
.prefs-btn:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.prefs-btn:hover::before{
  width:64px;height:64px;
  opacity:1;
}
.prefs-btn:hover i{animation:prefsTilt .5s var(--ease-bounce);}
@keyframes prefsTilt{0%,100%{transform:rotate(0);}50%{transform:rotate(20deg);}}

/* Profile Chip with gear */
.profile-chip{
  display:flex;align-items:center;gap:8px;
  padding:5px 14px 5px 5px;
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:22px;
  background:rgba(255,255,255,.08);
  cursor:pointer;
  transition:all var(--dur) var(--ease);
  max-width:220px;
  min-height:40px;
  position:relative;overflow:hidden;isolation:isolate;
}
.profile-chip::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.14) 55%,transparent 70%);
  background-size:200% 100%;background-position:-100% 0;
  opacity:0;transition:opacity .25s,background-position .7s var(--ease-out);
}
.profile-chip:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.45);}
.profile-chip:hover::before{opacity:1;background-position:200% 0;}
.profile-chip .ha-avatar,.profile-chip .ha-avatar-ph{width:30px;height:30px;border-radius:50%;flex-shrink:0;}
.profile-chip .ha-name{font-size:13px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.profile-chip-gear{font-size:11px;color:rgba(255,255,255,.65);flex-shrink:0;transition:transform .4s var(--ease-bounce),color var(--dur);}
.profile-chip:hover .profile-chip-gear{color:#fff;transform:rotate(60deg);}
.profile-chip.active{background:linear-gradient(135deg,#fff,#f7fafc);border-color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.2);}
.profile-chip.active .ha-name{color:var(--blue);}
.profile-chip.active .profile-chip-gear{color:var(--blue);}
[data-theme="pink"] .profile-chip.active .ha-name{color:#b04080;}
[data-theme="pink"] .profile-chip.active .profile-chip-gear{color:#b04080;}

/* Legacy agent area (for old templates) */
.header-agent{margin-left:auto;display:flex;align-items:center;gap:10px;}
.ha-avatar{width:32px;height:32px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.3);}
.ha-avatar-ph{width:32px;height:32px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.25);}
.ha-name{font-size:13px;color:#fff;font-weight:600;}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENU (Profile + Preferences)
   ═══════════════════════════════════════════════════════════════ */
.dd-menu{
  position:fixed;top:60px;right:12px;z-index:9999;
  min-width:240px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  padding:6px;
  animation:ddSlide .15s var(--ease-out);
}
@keyframes ddSlide{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.dd-menu-hdr{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px 10px 8px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.dd-menu-name{font-size:13px;font-weight:700;color:var(--text);}
.dd-menu-sub{color:var(--muted);}
.dd-item{
  display:flex;align-items:center;gap:10px;
  width:100%;
  padding:9px 12px;
  border:none;background:transparent;
  color:var(--text);
  font-size:13px;font-weight:500;
  text-align:left;text-decoration:none;
  cursor:pointer;font-family:inherit;
  border-radius:8px;
  transition:background var(--dur);
}
.dd-item:hover{background:var(--hover);}
.dd-item i{width:16px;color:var(--muted);font-size:13px;}
.dd-item:hover i{color:var(--blue);}
.dd-item.dd-danger{color:#d32f2f;}
.dd-item.dd-danger i{color:#d32f2f;}
.dd-item.dd-danger:hover{background:rgba(211,47,47,.08);}
/* ═══ Verwaltung Special-Button im header-right ═══
   Matches the 40x40 size + rounded corners of the prefs-btn so all header-right buttons
   share the same visual baseline. BUT has a distinct turquoise/blue glow to mark it as
   the special Verwaltungs-Entry-Point (like Admin has gold). Desktop shows icon + label,
   mobile shows icon only. */
.verwaltung-wrap{display:inline-flex;position:relative;}
.verwaltung-btn{
  height:40px;min-width:40px;
  padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1.5px solid rgba(107,195,240,.5);
  border-radius:12px;
  background:rgba(27,117,153,.18);
  color:#fff;
  font-size:13px;font-weight:700;font-family:inherit;
  cursor:pointer;
  transition:background-color .25s var(--ease),color .2s,border-color .2s,box-shadow .25s;
  white-space:nowrap;
  box-shadow:0 0 0 1px rgba(107,195,240,.15) inset;
  position:relative;
  isolation:isolate;
}
.verwaltung-btn i:first-child{font-size:15px;color:#6BC3F0;transition:color .2s;}
.verwaltung-btn .verwaltung-chevron{font-size:10px;opacity:.6;transition:transform .2s,opacity .2s;}
.verwaltung-btn:hover{
  background:rgba(27,117,153,.35);
  border-color:rgba(107,195,240,.8);
  box-shadow:0 0 0 3px rgba(107,195,240,.1),0 2px 10px rgba(27,117,153,.25);
  color:#fff;
}
.verwaltung-btn:hover i:first-child{color:#B8E8FF;}
.verwaltung-btn:hover .verwaltung-chevron{opacity:1;}
.verwaltung-btn.open{
  background:linear-gradient(135deg,#1B7599 0%,#156a89 100%);
  border-color:#6BC3F0;
  color:#fff;
  box-shadow:0 0 0 3px rgba(107,195,240,.18),0 3px 14px rgba(27,117,153,.4);
}
.verwaltung-btn.open i:first-child{color:#fff;}
.verwaltung-btn.open .verwaltung-chevron{transform:rotate(180deg);opacity:1;}

.verwaltung-menu{
  position:fixed;      /* fixed escapes all stacking contexts */
  min-width:280px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.15),0 2px 6px rgba(0,0,0,.08);
  padding:6px;
  z-index:9999;
  animation:verwaltungSlideDown .18s ease-out;
}
@keyframes verwaltungSlideDown{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
.verwaltung-menu .dd-item i{color:#1B7599;}
.verwaltung-menu .dd-item:hover{background:rgba(107,195,240,.12);}
.verwaltung-menu .dd-item:hover i{color:#0f5f7a;}
body.dark-theme .verwaltung-menu,
body.theme-dark .verwaltung-menu{background:var(--surface);border-color:var(--border);}
body.dark-theme .verwaltung-menu .dd-item i,
body.theme-dark .verwaltung-menu .dd-item i{color:#6BC3F0;}

/* Mobile: compact - label ausblenden, nur Icon + Chevron */
@media(max-width:768px){
  .verwaltung-btn{padding:0 10px;min-width:40px;}
  .verwaltung-btn .verwaltung-btn-label{display:none;}
  .verwaltung-menu{
    position:fixed;
    top:auto;bottom:0;left:0;right:0;
    min-width:0;
    border-radius:14px 14px 0 0;
    padding:12px 8px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 20px rgba(0,0,0,.18);
    animation:verwaltungSlideUp .22s ease-out;
    z-index:1000;
  }
  @keyframes verwaltungSlideUp{
    from{transform:translateY(100%);}
    to{transform:translateY(0);}
  }
  .verwaltung-menu .dd-item{padding:14px 16px;font-size:14px;}
}

/* Mobile-drawer Verwaltung-Entry: türkis styling zu match dem Header-Button */
.mmd-grid .mmd-item.mmd-verwaltung{
  background:linear-gradient(135deg,rgba(27,117,153,.08) 0%,rgba(27,117,153,.15) 100%);
  border:1.5px solid rgba(27,117,153,.4);
  color:#0f5f7a;
  font-weight:700;
  position:relative;
  overflow:hidden;
}
.mmd-grid .mmd-item.mmd-verwaltung i{
  color:#1B7599;
  filter:drop-shadow(0 0 4px rgba(27,117,153,.5));
}
.mmd-grid .mmd-item.mmd-verwaltung::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(27,117,153,.18) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:verwaltungShine 4s infinite ease-in-out;
  animation-delay:2s; /* offset from adminShine so they don't shine in unison */
  pointer-events:none;
}
@keyframes verwaltungShine{
  0%,90%,100%{transform:translateX(-100%);}
  50%{transform:translateX(100%);}
}
.mmd-grid .mmd-item.mmd-verwaltung:hover,
.mmd-grid .mmd-item.mmd-verwaltung:active{
  background:linear-gradient(135deg,rgba(27,117,153,.18) 0%,rgba(27,117,153,.28) 100%);
  border-color:rgba(27,117,153,.6);
  box-shadow:0 3px 10px rgba(27,117,153,.25);
}
body.dark-theme .mmd-grid .mmd-item.mmd-verwaltung,
body.theme-dark .mmd-grid .mmd-item.mmd-verwaltung{
  color:#B8E8FF;
  border-color:rgba(107,195,240,.55);
  background:linear-gradient(135deg,rgba(107,195,240,.08) 0%,rgba(107,195,240,.15) 100%);
}
body.dark-theme .mmd-grid .mmd-item.mmd-verwaltung i,
body.theme-dark .mmd-grid .mmd-item.mmd-verwaltung i{color:#6BC3F0;}
   Dieser Button ist der Haupt-Zugang zur Verwaltung — daher wird er farbig hervorgehoben. */
.dd-item.dd-admin{
  font-weight:700;
  background:linear-gradient(135deg,rgba(232,139,0,.12) 0%,rgba(232,139,0,.22) 100%);
  border:1.5px solid rgba(232,139,0,.5)!important;
  color:#B06B00;
  margin:4px 0;
  position:relative;
  overflow:hidden;
}
.dd-item.dd-admin i{
  color:#E88B00!important;
  filter:drop-shadow(0 0 4px rgba(232,139,0,.6));
}
.dd-item.dd-admin:hover{
  background:linear-gradient(135deg,rgba(232,139,0,.22) 0%,rgba(232,139,0,.35) 100%);
  box-shadow:0 3px 10px rgba(232,139,0,.3);
  transform:translateY(-1px);
}
.dd-item.dd-admin:hover i{color:#d17800!important;}
body.dark-theme .dd-item.dd-admin,
body.theme-dark .dd-item.dd-admin{
  background:linear-gradient(135deg,rgba(232,139,0,.2) 0%,rgba(232,139,0,.3) 100%);
  color:#ffc871;
  border-color:rgba(232,139,0,.6)!important;
}
.dd-sep{height:1px;background:var(--border);margin:6px 0;}

/* Preferences Rows */
.prefs-row{padding:8px 4px;border-bottom:1px solid var(--border);}
.prefs-row:last-child{border-bottom:none;}
.prefs-lbl{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:6px;
}
.prefs-lbl i{font-size:12px;color:var(--blue);}
.prefs-segment{
  display:flex;gap:2px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:3px;
}
.prefs-segment button{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 10px;
  border:none;background:transparent;
  color:var(--muted);
  font-size:11px;font-weight:600;font-family:inherit;
  cursor:pointer;
  border-radius:5px;
  transition:all var(--dur);
}
.prefs-segment button:hover{background:var(--hover);color:var(--text);}
.prefs-segment button.active{background:var(--blue);color:#fff;box-shadow:0 1px 3px rgba(27,117,153,.3);}
.prefs-fs button{font-weight:700;padding:4px 8px;min-height:32px;}

/* Theme selector grid 2x2 with color swatches */
.prefs-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:4px;}
.prefs-theme-grid button{flex-direction:row;gap:8px;padding:9px 10px;justify-content:flex-start;}
.theme-swatch{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.theme-swatch.theme-light{background:linear-gradient(135deg,#1B7599,#2a9fc9);}
.theme-swatch.theme-dark{background:linear-gradient(135deg,#1a2332,#4da8da);}
.theme-swatch.theme-pink{background:linear-gradient(135deg,#b04080,#d45090);}
.theme-swatch.theme-gray{background:linear-gradient(135deg,#5a6672,#8a9060);}
.prefs-theme-grid button.active .theme-swatch{border-color:#fff;box-shadow:0 0 0 2px var(--blue),inset 0 1px 2px rgba(0,0,0,.1);}

/* ═══════════════════════════════════════════════════════════════
   FLOATING MUTE INDICATOR (TV-like blinking when sound is off)
   ═══════════════════════════════════════════════════════════════ */
#mute-indicator{
  position:fixed;
  bottom:18px;left:18px;
  width:48px;height:48px;
  background:rgba(211,47,47,.92);
  color:#fff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  z-index:9998;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(211,47,47,.45);
  animation:muteBlink 1.8s infinite;
  border:2px solid rgba(255,255,255,.3);
  transition:transform .15s;
}
#mute-indicator:hover{transform:scale(1.1);}
@keyframes muteBlink{
  0%,100%{opacity:.95;transform:scale(1);}
  50%{opacity:.55;transform:scale(.96);}
}

/* ═══════════════════════════════════════════════════════════════
   FONT-SCALE SYSTEM — applied via `zoom` on body for non-breaking UI
   + Auto-collapse nav labels when space gets tight at higher scales
   ═══════════════════════════════════════════════════════════════ */
body{zoom:var(--ui-zoom,1);}
@supports not (zoom:1){
  /* Firefox <126 fallback: scale-based approach on body only */
  body.fs-125{font-size:calc(1em * 1.25);}
  body.fs-150{font-size:calc(1em * 1.5);}
  body.fs-175{font-size:calc(1em * 1.75);}
  body.fs-200{font-size:calc(1em * 2);}
}

/* At 150%+ font-scale: compact the nav (hover-expand tabs, smaller admin/profile) */
body.fs-150 .nav-tab .nav-label,
body.fs-175 .nav-tab .nav-label,
body.fs-200 .nav-tab .nav-label{
  max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .25s,opacity .18s,margin-left .22s;
  white-space:nowrap;display:inline-block;
}
body.fs-150 .nav-tab:hover .nav-label,
body.fs-175 .nav-tab:hover .nav-label,
body.fs-200 .nav-tab:hover .nav-label,
body.fs-150 .nav-tab.active .nav-label,
body.fs-175 .nav-tab.active .nav-label,
body.fs-200 .nav-tab.active .nav-label{max-width:140px;opacity:1;margin-left:4px;}
body.fs-150 .nav-tab,
body.fs-175 .nav-tab,
body.fs-200 .nav-tab{padding:10px 12px;gap:0;min-width:40px;justify-content:center;}
body.fs-150 .nav-tab:hover,
body.fs-175 .nav-tab:hover,
body.fs-200 .nav-tab:hover,
body.fs-150 .nav-tab.active,
body.fs-175 .nav-tab.active,
body.fs-200 .nav-tab.active{padding:10px 14px;gap:7px;}
body.fs-150 .profile-chip .ha-name,
body.fs-175 .profile-chip .ha-name,
body.fs-200 .profile-chip .ha-name{display:none;}
body.fs-175 .admin-nav-btn-label,
body.fs-200 .admin-nav-btn-label{
  max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .25s,opacity .18s,margin-left .22s;
  white-space:nowrap;display:inline-block;
}
body.fs-175 .admin-nav-btn:hover .admin-nav-btn-label,
body.fs-200 .admin-nav-btn:hover .admin-nav-btn-label{max-width:60px;opacity:1;margin-left:5px;}
body.fs-200 .app-logo img{height:22px !important;}

/* When using zoom (most browsers), apply same hover-expand pattern via data-zoom attr */
body[data-zoom="1.5"] .nav-tab .nav-label,
body[data-zoom="1.75"] .nav-tab .nav-label,
body[data-zoom="2"] .nav-tab .nav-label{
  max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .25s,opacity .18s,margin-left .22s;
  white-space:nowrap;display:inline-block;
}
body[data-zoom="1.5"] .nav-tab:hover .nav-label,
body[data-zoom="1.75"] .nav-tab:hover .nav-label,
body[data-zoom="2"] .nav-tab:hover .nav-label,
body[data-zoom="1.5"] .nav-tab.active .nav-label,
body[data-zoom="1.75"] .nav-tab.active .nav-label,
body[data-zoom="2"] .nav-tab.active .nav-label{max-width:140px;opacity:1;margin-left:4px;}
body[data-zoom="1.5"] .nav-tab,
body[data-zoom="1.75"] .nav-tab,
body[data-zoom="2"] .nav-tab{padding:10px 12px;gap:0;min-width:40px;justify-content:center;}
body[data-zoom="1.5"] .nav-tab:hover,
body[data-zoom="1.75"] .nav-tab:hover,
body[data-zoom="2"] .nav-tab:hover,
body[data-zoom="1.5"] .nav-tab.active,
body[data-zoom="1.75"] .nav-tab.active,
body[data-zoom="2"] .nav-tab.active{padding:10px 14px;gap:7px;}
body[data-zoom="1.5"] .profile-chip .ha-name,
body[data-zoom="1.75"] .profile-chip .ha-name,
body[data-zoom="2"] .profile-chip .ha-name{display:none;}
body[data-zoom="1.75"] .admin-nav-btn-label,
body[data-zoom="2"] .admin-nav-btn-label{
  max-width:0;opacity:0;overflow:hidden;margin-left:0;
  transition:max-width .25s,opacity .18s,margin-left .22s;
  white-space:nowrap;display:inline-block;
}
body[data-zoom="1.75"] .admin-nav-btn:hover .admin-nav-btn-label,
body[data-zoom="2"] .admin-nav-btn:hover .admin-nav-btn-label{max-width:60px;opacity:1;margin-left:5px;}
body[data-zoom="2"] .app-logo img{height:22px !important;}

/* ═══════════════════════════════════════════════════════════════
   Legacy sound-toggle fallback (kept for any remaining references)
   ═══════════════════════════════════════════════════════════════ */
.sound-toggle{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);cursor:pointer;font-size:15px;color:#fff;padding:5px 8px;transition:all var(--dur) var(--ease);margin-left:4px;border-radius:8px;line-height:1;}
.sound-toggle:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.35);}

/* App Body */
.app-body{display:flex;flex:1;overflow:hidden;}

/* Sidebar */
.sidebar{width:280px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.sidebar-hdr{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.sidebar-hdr h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);}
.session-list{overflow-y:auto;flex:1;}
.sitem{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:all var(--dur) var(--ease);position:relative;border-left:3px solid transparent;}
.sitem:hover{background:var(--hover);}
.sitem.sel{background:var(--sel);border-left:4px solid var(--blue);box-shadow:inset 0 0 0 1px rgba(27,117,153,.12);}
.sitem.sel .si-name{color:var(--blue);}
.sitem.waiting{border-left-color:var(--orange);}
.sitem.waiting.sel{border-left-color:var(--blue);background:var(--sel);}
.sitem.ai-session{border-left-color:#8b5cf6;background:#f8f6ff;}
.sitem.ai-session.sel{border-left-color:var(--blue);background:var(--sel);}
.sitem.customer-left{opacity:.65;border-left-color:#ef9a9a;}
.sitem.customer-left .si-prev{font-style:italic;}
.si-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;}
.si-new{background:var(--orange);color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 6px;}
.si-ai{background:#8b5cf6;color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 6px;}
.si-ci{font-size:11px;margin-left:4px;opacity:.7;}
.si-pri{font-size:6px;margin-right:4px;vertical-align:middle;}
.status-sel{padding:2px 4px;border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;background:var(--bg);cursor:pointer;font-family:inherit;color:var(--text);outline:none;}
.status-sel:focus{border-color:var(--blue);}
.pri-sel{padding:2px 4px;border:1px solid var(--border);border-radius:4px;font-size:10px;font-weight:600;background:var(--bg);cursor:pointer;font-family:inherit;color:var(--text);outline:none;max-width:70px;}
.pri-sel:focus{border-color:var(--orange);}
.nav-tab i,.admin-nav-item i,.panel-hdr i,.btn i,.folder-item i{margin-right:4px;}
.nav-icon i{font-size:14px;}
.si-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.si-prev{font-size:11.5px;color:#555;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.no-sess{padding:40px 16px;text-align:center;color:#ccc;font-size:13px;}

/* Chat Area */
.chat-area{flex:1;display:flex;overflow:hidden;}
.chat-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);opacity:.6;}
.chat-placeholder svg{width:56px;height:56px;stroke:var(--border);fill:none;stroke-width:1;opacity:.5;}
.chat-main{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.chat-hdr{padding:12px 18px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.ch-info h3{font-size:14px;font-weight:700;}
.ch-info p{font-size:11px;color:var(--muted);}
.ch-actions{margin-left:auto;display:flex;gap:7px;align-items:center;}

/* Messages */
.msgs{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:9px;background:var(--bg);}
.msg{display:flex;align-items:flex-end;gap:7px;max-width:78%;}
.msg.customer{align-self:flex-start;}
.msg.agent{align-self:flex-end;flex-direction:row-reverse;}
.msg.system{align-self:center;max-width:100%;}
.msg.ai-msg{align-self:flex-end;flex-direction:row-reverse;}
.msg-av{width:28px;height:28px;border-radius:10px;object-fit:cover;flex-shrink:0;}
.msg-av-ph{width:28px;height:28px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.msg-av-ai{width:28px;height:28px;border-radius:10px;background:#8b5cf6;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.msg-body{display:flex;flex-direction:column;gap:3px;}
.msg.agent .msg-body,.msg.ai-msg .msg-body{align-items:flex-end;}
.msg-who{font-size:10px;color:var(--muted);font-weight:600;}
.bubble{padding:9px 13px;border-radius:var(--r-lg);font-size:13px;line-height:1.55;word-break:break-word;}
.msg.customer .bubble{background:var(--white);border:1px solid var(--border);border-radius:4px 14px 14px 14px;box-shadow:var(--sh-xs);}
.msg.agent .bubble{background:linear-gradient(135deg,var(--blue),var(--dark));color:#fff;border-radius:14px 4px 14px 14px;box-shadow:var(--sh-sm);}
.msg.ai-msg .bubble{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;border-radius:14px 4px 14px 14px;box-shadow:var(--sh-sm);}
.msg.system .bubble{background:rgba(0,0,0,.03);color:var(--muted);font-size:11.5px;text-align:center;border-radius:var(--r-md);width:100%;padding:6px 14px;}
.msg-time{font-size:10px;color:#bbb;}

/* Shortcuts bar */
.shortcuts-bar{padding:7px 14px;background:var(--bg);border-top:1px solid var(--border);display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════
   SMART REPLIES — KI-generierte Antwortvorschläge
   ═══════════════════════════════════════════════════════════════ */
.smart-reply-bar{
  flex-direction:column;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(139,92,246,.05),rgba(109,40,217,.02));
  border-top:1px solid rgba(139,92,246,.2);
  border-bottom:1px solid rgba(139,92,246,.15);
  gap:8px;
  flex-shrink:0;
  transition:opacity .2s;
}
.sr-header{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;
  color:#6d28d9;
  text-transform:uppercase;letter-spacing:.5px;
}
[data-theme=dark] .sr-header{color:#a78bfa;}
.sr-header i{font-size:12px;}
.sr-refresh,.sr-close{
  margin-left:auto;
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:4px;
  transition:all var(--dur);
}
.sr-close{font-size:18px;line-height:1;padding:0 6px;}
.sr-refresh:hover,.sr-close:hover{background:var(--hover);color:var(--text);}
.sr-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
}
.sr-card{
  background:var(--white);
  border:1.5px solid rgba(139,92,246,.3);
  border-radius:8px;
  padding:10px 12px;
  cursor:pointer;
  transition:all var(--dur);
  display:flex;
  flex-direction:column;
  gap:5px;
  position:relative;
  overflow:hidden;
}
.sr-card::before{
  content:'';
  position:absolute;top:0;left:0;
  width:4px;height:100%;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
}
.sr-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(139,92,246,.18);
  border-color:#8b5cf6;
}
.sr-card:active{transform:translateY(0);}
.sr-label{
  font-size:10px;
  font-weight:700;
  color:#6d28d9;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding-left:8px;
}
[data-theme=dark] .sr-label{color:#a78bfa;}
.sr-text{
  font-size:12px;
  line-height:1.5;
  color:var(--text);
  padding-left:8px;
  max-height:80px;
  overflow:hidden;
}
.sr-hint{
  font-size:9px;
  color:var(--muted);
  padding-left:8px;
  display:flex;
  align-items:center;
  gap:4px;
  opacity:0;
  transition:opacity var(--dur);
}
.sr-card:hover .sr-hint{opacity:1;}
.sr-loading{
  display:flex;align-items:center;gap:10px;
  padding:12px;
  font-size:12px;
  color:#6d28d9;
  font-weight:600;
}
[data-theme=dark] .sr-loading{color:#a78bfa;}
.sr-loading i{font-size:14px;}
.sr-error{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  font-size:12px;
  color:#c0392b;
  background:rgba(192,57,43,.08);
  border-radius:6px;
  font-weight:500;
}
.sr-error .sr-close{margin-left:auto;}
@media(max-width:768px){
  .smart-reply-bar{padding:8px 10px;}
  .sr-cards{grid-template-columns:1fr;}
  .sr-card{padding:8px 10px;}
}
.sc-btn{padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--white);font-size:11px;font-weight:600;color:var(--blue);cursor:pointer;transition:all var(--dur) var(--ease);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sc-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Input */
.input-area{padding:10px 14px;background:var(--white);border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;flex-shrink:0;}
.input-area textarea{flex:1;border:1.5px solid var(--border);border-radius:var(--r-md);padding:9px 13px;font-size:13px;resize:none;outline:none;min-height:42px;max-height:200px;line-height:1.45;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);font-family:inherit;box-sizing:border-box;}
.input-area textarea:focus{border-color:var(--blue);box-shadow:var(--sh-focus);}
.send-btn{width:42px;height:42px;background:linear-gradient(135deg,var(--blue),var(--dark));border:none;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--dur) var(--ease);box-shadow:var(--sh-sm);}
.send-btn svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* Customer Info Panel */
.info-panel{width:320px;background:var(--white);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;min-width:220px;max-width:50%;}
.ip-hdr{padding:12px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;justify-content:space-between;align-items:center;}
.ip-section{padding:12px 14px;border-bottom:1px solid var(--border);}
.ip-section h4{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;}
.ip-field{margin-bottom:8px;}
.ip-field label{display:block;font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:3px;}
.ip-field input,.ip-field textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;outline:none;background:var(--bg);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);box-sizing:border-box;font-family:inherit;}
.ip-field input:focus,.ip-field textarea:focus{border-color:var(--blue);background:var(--white);box-shadow:var(--sh-focus);}
.ip-field select{width:100%;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px;outline:none;background:var(--bg);box-sizing:border-box;font-family:inherit;transition:border-color var(--dur) var(--ease);}
.ip-actions{padding:12px 14px;display:flex;gap:7px;flex-wrap:wrap;}
.ip-row{display:flex;gap:8px;}
.ip-row .ip-field{flex:1;}

/* ═══════════════════════════════════════════════════
   Admin View — Vertical Nav (Gambio-Style)
   ═══════════════════════════════════════════════════ */
.admin-layout{flex:1;display:flex;overflow:hidden;}
.admin-nav{width:220px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--blue) var(--surface,#f0f0f0);scrollbar-gutter:stable;position:relative;}
/* Sichtbare Scrollbar in Webkit-Browsern (Chrome/Safari/Edge) */
.admin-nav::-webkit-scrollbar{width:8px;}
.admin-nav::-webkit-scrollbar-track{background:var(--surface,#f0f0f0);}
.admin-nav::-webkit-scrollbar-thumb{background:var(--blue,#1B7599);border-radius:4px;}
.admin-nav::-webkit-scrollbar-thumb:hover{background:var(--blue,#1B7599);opacity:.8;}
/* Scroll-Shadow am unteren Rand wenn mehr Inhalt unten ist (visueller Hint) */
.admin-nav::after{content:'';position:sticky;bottom:0;display:block;height:24px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.08));pointer-events:none;margin-top:-24px;flex-shrink:0;}
.admin-nav h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:14px 16px 6px;}
.admin-nav-item{padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all var(--dur) var(--ease);border-left:3px solid transparent;color:var(--text);position:relative;}
.admin-nav-item:hover{background:var(--hover);color:var(--blue);}
.admin-nav-item.sel{background:var(--sel);border-left-color:var(--blue);color:var(--blue);font-weight:700;}
.admin-nav-item .nav-icon{font-size:16px;width:22px;text-align:center;}
.admin-center{flex:1;overflow:hidden;padding:0;display:flex;flex-direction:column;}
.admin-section{padding:20px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.admin-section.admin-sec-full{padding:0;flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* ═══════════════════════════════════════════════════
   Verwaltung View — Parallel to Admin, türkis-branded
   ═══════════════════════════════════════════════════
   Same structural approach as admin-layout (sidebar + content-center) but with
   türkis accent color and a dedicated header to distinguish from Admin. */
.verwaltung-layout{flex:1;display:flex;overflow:hidden;}
.verwaltung-nav{
  width:220px;
  background:var(--white);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  flex-shrink:0;
  overflow-y:auto;
  transition:width .2s ease;
  position:relative;
}
/* Collapse button in header */
.verw-collapse-btn{
  margin-left:auto;padding:0 0 0 10px;
  border:none;border-left:1px solid rgba(27,117,153,.18);
  background:none;
  width:38px;height:28px;border-radius:0 6px 6px 0;
  display:flex;align-items:center;justify-content:center;
  color:#1B7599;cursor:pointer;font-size:14px;
  transition:all .15s;
}
.verw-collapse-btn:hover{background:rgba(27,117,153,.12);}
.verwaltung-nav.collapsed .verw-collapse-btn{margin:0 auto;}
.verwaltung-nav.collapsed .verw-collapse-btn i{transform:rotate(180deg);}
.verwaltung-nav.collapsed .verwaltung-nav-hdr span{display:none;}
.verwaltung-nav.collapsed .verwaltung-nav-hdr{justify-content:center;padding:12px 0;}
.verwaltung-nav.collapsed .verwaltung-nav-hdr i.fa-clipboard-list{display:none;}
.verwaltung-nav.collapsed .verwaltung-nav-item span{display:none;}
.verwaltung-nav.collapsed .verwaltung-nav-item{justify-content:center;padding:12px 0;gap:0;}
.verwaltung-nav.collapsed .verwaltung-nav-item .nav-icon{margin:0;font-size:18px;}
.verwaltung-nav-hdr{
  padding:16px 18px 12px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:#1B7599;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(27,117,153,.06) 0%,transparent 100%);
}
.verwaltung-nav-item{
  padding:10px 16px;
  font-size:13px;font-weight:600;
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
  transition:all var(--dur) var(--ease);
  border-left:3px solid transparent;
  color:var(--text);
  background:transparent;
  border-top:none;border-right:none;border-bottom:none;
  width:100%;
  font-family:inherit;
  text-align:left;
  position:relative;
}
.verwaltung-nav-item:hover{
  background:rgba(27,117,153,.06);
  color:#1B7599;
}
.verwaltung-nav-item.sel{
  background:rgba(27,117,153,.1);
  border-left-color:#1B7599;
  color:#1B7599;
  font-weight:700;
}
.verwaltung-nav-item .nav-icon{
  font-size:16px;width:22px;text-align:center;
  color:#1B7599;
}
.verwaltung-nav-item.sel .nav-icon{color:#1B7599;}
.verwaltung-content{
  flex:1;
  overflow-y:auto;
  padding:0;
  display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
}
.verwaltung-section{
  padding:0;
  flex:1;
  overflow-y:auto;
  min-height:0;
}
/* Standard: Sub-Tabs (Leistungsarten/Equipment/Kontakte/Einstellungen) müssen
   scrollen, nur die Disposition hat eigene Scroll-Container. */
#verwaltung-section-kalender{overflow-y:auto;-webkit-overflow-scrolling:touch;}
/* Disposition-Sub-Tab: eigene Scroll-Container drin → outer hidden */
#verwaltung-section-kalender:has(.cal-dispo-active),
#verwaltung-section-kalender.is-dispo{overflow-y:hidden;}
/* WHEEL-FIX: cal-body und cal-floating-list innerhalb der Verwaltung dürfen
   KEINE scroll-container sein — sonst fressen sie das Mausrad-Event statt es
   an vac-page (echter Scroll-Container) durchzureichen. Browser sieht overflow:auto
   als scroll-target und stoppt die Event-Propagation, auch wenn der Container
   gar nicht scrollen kann (sH==cH). overflow:hidden umgeht das in unserem Setup. */
#verwaltung-section-kalender .cal-body,
#verwaltung-section-kalender .cal-floating-list{
  overflow:hidden !important;
}
.verwaltung-welcome{
  flex:1;
  display:flex;align-items:center;justify-content:center;
}

/* ── Verwaltung Mobile: Sidebar wird horizontaler Scroll-Strip ──
   Auf 220px-Sidebar verbraucht die Hälfte des Mobile-Viewports und auf
   sehr schmalen Screens (≤540px) wird sie auf Höhe 48px gequetscht
   → User sieht keine Nav-Items mehr. */
@media (max-width:768px){
  .verwaltung-layout{flex-direction:column;}
  .verwaltung-nav{
    width:auto;
    flex-direction:row;
    flex-shrink:0;
    overflow-x:auto;
    overflow-y:hidden;
    border-right:none;
    border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch;
  }
  .verwaltung-nav-hdr{display:none;}
  .verw-collapse-btn{display:none;}
  .verwaltung-nav-item{
    width:auto;
    flex:0 0 auto;
    padding:10px 14px;
    border-left:none;
    border-bottom:3px solid transparent;
    white-space:nowrap;
  }
  .verwaltung-nav-item.sel{
    border-left-color:transparent;
    border-bottom-color:#1B7599;
  }
  .verwaltung-nav-item span{font-size:12px;}
  .verwaltung-content{min-width:0;}
  .verwaltung-section{min-width:0;}
}

/* Dark mode overrides */
body.dark-theme .verwaltung-nav,
body.theme-dark .verwaltung-nav{background:var(--surface);}
body.dark-theme .verwaltung-nav-hdr,
body.theme-dark .verwaltung-nav-hdr{
  color:#6BC3F0;
  background:linear-gradient(180deg,rgba(107,195,240,.06) 0%,transparent 100%);
}
body.dark-theme .verwaltung-nav-item .nav-icon,
body.theme-dark .verwaltung-nav-item .nav-icon{color:#6BC3F0;}
body.dark-theme .verwaltung-nav-item:hover,
body.theme-dark .verwaltung-nav-item:hover{
  background:rgba(107,195,240,.08);
  color:#6BC3F0;
}
body.dark-theme .verwaltung-nav-item.sel,
body.theme-dark .verwaltung-nav-item.sel{
  background:rgba(107,195,240,.12);
  border-left-color:#6BC3F0;
  color:#6BC3F0;
}

/* Mobile: collapse sidebar to horizontal top-bar (parallel to admin-nav mobile behavior) */
@media(max-width:768px){
  .verwaltung-layout{flex-direction:column;}
  .verwaltung-nav{
    width:100%;
    border-right:none;border-bottom:1px solid var(--border);
    flex-direction:row;overflow-x:auto;overflow-y:hidden;
    padding:0;gap:0;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    position:sticky;top:0;z-index:100;
    min-height:48px;
  }
  .verwaltung-nav::-webkit-scrollbar{display:none;}
  .verwaltung-nav-hdr{display:none;}
  .verwaltung-nav-item{
    padding:10px 14px;font-size:12px;
    white-space:nowrap;flex-shrink:0;
    border-left:none;border-bottom:3px solid transparent;
    min-height:44px;
    gap:6px;
  }
  .verwaltung-nav-item.sel{
    border-left:none;
    border-bottom-color:#1B7599;
    background:rgba(27,117,153,.04);
  }
  .verwaltung-nav-item .nav-icon{font-size:14px;}
}

/* Panel (used inside admin-center) */
.panel{background:var(--white);border-radius:var(--r-lg);border:1px solid var(--border);margin-bottom:18px;overflow:hidden;box-shadow:var(--sh-xs);transition:box-shadow var(--dur-md) var(--ease);}
.panel:hover{box-shadow:var(--sh-sm);}
.panel-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.panel-hdr h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);}
.panel-hdr[onclick] h3::before{content:'▾ ';font-size:10px;opacity:.5;}
.panel-hdr[onclick]+.panel-body.collapsed+*,.panel-hdr[onclick]+.collapsed{border-bottom:none;}
.panel-hdr[onclick]+.collapsed~*{display:none;}
.panel-hdr:has(+.collapsed) h3::before{content:'▸ ';}
.panel-body{padding:18px;}
.panel-body.collapsed{display:none;}

/* Admin Toggles & Rows */
.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.toggle-row label{font-size:13.5px;font-weight:600;}
.toggle-row small{font-size:11px;color:var(--muted);margin-top:2px;}
.tog{position:relative;width:46px;height:24px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;}
.tog-sl{position:absolute;inset:0;background:#c8d1da;border-radius:var(--r-full);cursor:pointer;transition:background var(--dur-md) var(--ease);}
.tog-sl::before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:var(--white);border-radius:50%;transition:transform var(--dur-md) var(--ease-bounce);box-shadow:0 1px 3px rgba(0,0,0,.15);}
input:checked+.tog-sl{background:var(--green);}
input:checked+.tog-sl::before{transform:translateX(22px);}
.slider-row{margin-top:14px;}
.slider-row label{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;margin-bottom:6px;}
.slider-row label span{color:var(--blue);font-weight:700;}
input[type=range]{width:100%;accent-color:var(--blue);}
.proactive-msgs{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.pmsg-row{display:flex;align-items:center;gap:8px;}
.pmsg-row span{font-size:11px;font-weight:700;color:var(--muted);width:24px;flex-shrink:0;}
.pmsg-row input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 11px;font-size:13px;outline:none;box-sizing:border-box;font-family:inherit;background:var(--bg);}
.pmsg-row input:focus{border-color:var(--blue);}

/* Users */
.users-grid{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--r-md);overflow:hidden;}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--white);}
.ua{width:34px;height:34px;border-radius:50%;object-fit:cover;}
.ua-ph{width:34px;height:34px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;}
.user-info{flex:1;}
.user-info strong{display:block;font-size:13px;}
.user-info small{font-size:11px;color:var(--muted);}
.new-user-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}

/* Agent Messages Config */
.am-item{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;margin-bottom:10px;position:relative;}
.am-item .slider-row{margin-top:0;}
.am-remove{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--red);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);line-height:1;}
.am-remove:hover{background:var(--red);color:#fff;border-color:var(--red);}

/* Profile View */
.avatar-area{display:flex;align-items:center;gap:20px;margin-bottom:20px;}
.av-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--border);}
.av-ph{width:80px;height:80px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;border:3px solid var(--border);}
.sc-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.sc-row{display:flex;gap:8px;align-items:center;margin-bottom:6px;}
.sc-row input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;outline:none;box-sizing:border-box;font-family:inherit;background:var(--bg);}
.sc-row input:focus{border-color:var(--blue);}
.sc-row .am-remove{position:static;flex-shrink:0;}

/* AI History View */
.history-view{flex:1;display:flex;overflow:hidden;}
.history-detail{flex:1;overflow-y:auto;padding:20px;}
.history-detail h3{font-size:14px;font-weight:700;margin-bottom:14px;color:var(--muted);}
.hd-msg{margin-bottom:10px;display:flex;flex-direction:column;max-width:80%;}
.hd-msg.user{align-self:flex-start;}
.hd-msg.claude{align-self:flex-end;align-items:flex-end;}
.hd-msg .bubble{border-radius:14px;padding:9px 13px;font-size:13px;line-height:1.5;}
.hd-msg.user .bubble{background:var(--white);border:1px solid var(--border);border-radius:4px 14px 14px 14px;}
.hd-msg.internal{align-self:center;max-width:90%;opacity:.7;}
.hd-msg.internal .bubble{background:#fff8e1;border:1px dashed #E88B00;color:#7a6020;font-size:11px;font-style:italic;}
.hd-msg.system{align-self:center;max-width:90%;}
.hd-msg.system .bubble{background:var(--hover);color:var(--muted);font-size:11px;text-align:center;}
.hd-msg.claude .bubble{background:linear-gradient(135deg,var(--blue),var(--dark));color:#fff;border-radius:14px 4px 14px 14px;}

/* Folder Sidebar */
.folder-sidebar{width:180px;background:var(--white);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.folder-sidebar h4{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:12px 12px 6px;}
.folder-item{padding:8px 12px;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;transition:background var(--dur) var(--ease);border-left:3px solid transparent;white-space:nowrap;overflow:hidden;}
.folder-item > span:not(.fi-cnt):not(.fi-del){overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.folder-item:hover{background:var(--hover);}
.folder-item.sel{background:var(--sel);border-left-color:var(--blue);}
.folder-item.drop-target{background:#dbeeff;border-left-color:var(--orange);}
.folder-item .fi-cnt{margin-left:auto;font-size:9px;color:var(--muted);background:var(--bg);padding:2px 6px;border-radius:10px;white-space:nowrap;min-width:18px;text-align:center;flex-shrink:0;font-weight:700;line-height:1.2;}
.folder-item .fi-del{margin-left:4px;background:none;border:none;color:#ccc;cursor:pointer;font-size:12px;display:none;}
.folder-item:hover .fi-del{display:inline;}
.folder-add{padding:8px 12px;}
.folder-add input{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:5px 8px;font-size:11.5px;outline:none;}

/* History Table — Modern Design */
.hist-table{width:100%;border-collapse:separate;border-spacing:0 4px;font-size:12.5px;}
.hist-table th{text-align:left;padding:6px 10px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;white-space:nowrap;user-select:none;border:none;}
.hist-table th:hover{color:var(--blue);}
.hist-table th .sort-arrow{font-size:9px;margin-left:3px;}
.hist-table td{padding:10px 10px;vertical-align:middle;background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.hist-table td:first-child{border-left:1px solid var(--border);border-radius:10px 0 0 10px;}
.hist-table td:last-child{border-right:1px solid var(--border);border-radius:0 10px 10px 0;}
.hist-table tr:hover td{background:var(--sel);border-color:rgba(27,117,153,0.15);}
.hist-table tr.selected td{background:rgba(27,117,153,0.08);border-color:rgba(27,117,153,0.2);}
.hist-table tr[draggable="true"]{cursor:grab;}
.hist-table tr.dragging{opacity:.4;}
.hist-table .cb{width:16px;height:16px;cursor:pointer;accent-color:var(--blue);}
/* Status + Priority Selects hübscher */
.hist-table .status-sel,.hist-table .pri-sel{
  border:1.5px solid var(--border);border-radius:8px;padding:4px 6px;
  font-size:11px;font-family:inherit;background:var(--surface);
  cursor:pointer;outline:none;max-width:120px;
}
.hist-table .status-sel:focus,.hist-table .pri-sel:focus{border-color:var(--blue);}
/* Actions: immer sichtbar aber dezent */
.hist-actions{display:flex;gap:4px;align-items:center;}
.hist-actions .btn{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;padding:0;font-size:12px;
  transition:all .12s;
}
.hist-actions .btn:hover{background:var(--hover);transform:scale(1.1);}
.hist-act-hover{opacity:0.3;transition:opacity .15s;}
tr:hover .hist-act-hover{opacity:1;}
/* Toolbar */
.hist-toolbar{padding:10px 14px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;}
.hist-toolbar input[type=text]{border:1.5px solid var(--border);border-radius:var(--r-md);padding:6px 10px;font-size:12.5px;outline:none;width:200px;font-family:inherit;box-sizing:border-box;background:var(--bg);}
.hist-toolbar input:focus{border-color:var(--blue);}
.hist-toolbar select{border:1.5px solid var(--border);border-radius:var(--r-md);padding:6px 10px;font-size:12px;font-family:inherit;background:var(--bg);outline:none;cursor:pointer;}
.hist-toolbar select:focus{border-color:var(--blue);}
.bulk-bar{display:none;padding:8px 14px;background:#fff8e1;border-bottom:1px solid #f5dfa0;align-items:center;gap:8px;font-size:12px;font-weight:600;}
.bulk-bar.show{display:flex;}

/* Bot Profile */
.bot-preview{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg);border-radius:var(--r-md);margin-top:12px;}
.bot-av-wrap{width:56px;height:56px;border-radius:12px;overflow:hidden;background:rgba(27,117,153,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid var(--border);}
.bot-av-wrap img{width:100%;height:100%;object-fit:cover;}
.bot-av-wrap .bot-av-ph{font-size:22px;color:var(--blue);}

/* Print */
@media print{
  .app-header,.sidebar,.info-panel,.input-area,.shortcuts-bar,.ch-actions,.header-agent,.header-nav,.status-toggle,.admin-nav{display:none!important;}
  .app-body,.admin-layout{display:block!important;}
  .chat-main,.msgs,.admin-center{overflow:visible!important;max-height:none!important;}
  body{overflow:visible!important;height:auto!important;}
}

/* Text-Verwaltung */
.txt-group{margin-bottom:8px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--white);}
.txt-group:last-child{margin-bottom:0;}
.txt-group h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0;padding:12px 16px;display:flex;align-items:center;gap:6px;cursor:pointer;background:var(--hover);transition:background var(--dur) var(--ease);user-select:none;}
.txt-group h4:hover{background:var(--border);}
.txt-group h4 i{font-size:11px;color:var(--blue);}
.txt-group h4::after{content:'▾';margin-left:auto;font-size:10px;opacity:.5;transition:transform .2s;}
.txt-group.tg-closed h4::after{transform:rotate(-90deg);}
.txt-group.tg-closed .txt-group-body{display:none;}
.txt-group-body{padding:14px 16px;}
.txt-row{margin-bottom:12px;}
.txt-row label{font-size:11px;font-weight:600;color:var(--text);display:block;margin-bottom:4px;}
.txt-langs{display:flex;flex-direction:column;gap:4px;}
.txt-l{display:flex;align-items:center;gap:6px;}
.txt-l span{font-size:10px;font-weight:700;color:var(--muted);min-width:20px;text-align:center;}
.txt-l input{flex:1;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:inherit;box-sizing:border-box;background:var(--bg);}
.txt-l input:focus{border-color:var(--blue);outline:none;}

/* Typing dots */
.typing-dots{display:flex;gap:4px;padding:8px 12px;}
.typing-dots span{width:6px;height:6px;background:var(--blue);border-radius:50%;animation:tdot 1.2s infinite;opacity:.3;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* Internal notes */
.msg.internal{align-self:center;max-width:90%;}
.internal-note{background:#FFF9C4!important;color:#5D4037!important;border:1px dashed #FFD54F!important;font-style:italic;font-size:12px!important;}

/* Unread badge */
.unread-badge{background:#d32f2f;color:#fff;font-size:9px;font-weight:700;border-radius:50%;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:0 4px;}

/* Internal note input */
.internal-note-area{padding:6px 14px;background:#FFFDE7;border-top:1px dashed #FFD54F;display:flex;gap:6px;align-items:center;}
.internal-note-area input{flex:1;border:1px solid #FFD54F;border-radius:6px;padding:5px 10px;font-size:11px;font-family:inherit;background:var(--white);box-sizing:border-box;}
.internal-note-area button{padding:4px 10px;font-size:11px;background:#FFD54F;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-family:inherit;transition:background var(--dur) var(--ease);}
.internal-note-area button:hover{background:#F9A825;}

/* Entity field readonly */
.ip-field input[readonly]{background:var(--bg-alt,#f0f4f7);color:var(--blue);font-weight:600;cursor:default;}

/* Chat header: prevent overflow */
.ch-info{min-width:0;overflow:hidden;}
.ch-info h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ch-info p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* Password success message */
.pw-ok{color:#2e7d32;font-size:12px;font-weight:600;margin-top:8px;}

/* Custom texts: grouped sections */
/* txt-group-body padding handled inline */

/* History: sort button */
.hist-sort{padding:4px 8px;font-size:11px;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer;font-family:inherit;color:var(--muted);}

/* Responsive: Tablet */
@media(max-width:1100px){
  .info-panel{width:260px;}
  .sidebar{width:240px;}
  .admin-nav{width:200px;}
  /* Nav labels slightly smaller */
  .nav-tab{padding:8px 12px;font-size:12px;}
  .admin-nav-btn{padding:8px 13px;font-size:12px;}
}
/* Responsive: Tablet small */
@media(max-width:900px){
  .info-panel{width:220px;font-size:12px;}
  .sidebar{width:200px;}
  .admin-nav{width:180px;}
  .admin-nav-item{padding:8px 12px;font-size:12px;gap:8px;}
  .admin-nav h4{padding:10px 12px 4px;font-size:9px;}
  .ip-field label{font-size:10px;}
  .ip-field input,.ip-field select,.ip-field textarea{font-size:12px;padding:6px 8px;}
  /* Profile chip: only avatar+gear */
  .profile-chip .ha-name{max-width:80px;font-size:12px;}
  /* Nav: labels now use hover-expand (rule covered by section-level CSS below) */
  .panel-body{padding:14px;}
  .panel-hdr{padding:12px 14px;}
  /* Admin forms: stack 2-col grids */
  .admin-section div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  .admin-section div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
}
/* Responsive: Mobile */
@media(max-width:768px){
  .app-header{padding:8px 12px;}
  .header-nav{gap:2px;}
  .nav-tab{padding:7px 10px;font-size:12px;gap:4px;}
  .nav-tab i{font-size:15px;}
  /* Admin button: compact (label hides on hover-less, shows on hover via section below) */
  .admin-nav-btn{padding:8px 11px;}
  .admin-nav-btn i{font-size:15px;}
  /* Profile chip: hide name on mobile, keep avatar+gear */
  .profile-chip .ha-name{display:none;}
  .profile-chip{padding:4px 8px 4px 4px;}
  /* Prefs button */
  .prefs-btn{width:36px;height:36px;font-size:14px;}
  /* Dropdowns: stay right-anchored; only full-width on touch devices */
  .dd-menu{right:8px;left:auto;min-width:240px;max-width:calc(100vw - 16px);}
  /* Status pill: hide text, keep just dot */
  .status-toggle{padding:6px 8px;}
  .status-toggle span{display:none;}
  .app-body{flex-direction:column;height:calc(100vh - 52px);}
  .sidebar{width:100%;max-height:140px;border-right:none;border-bottom:1px solid var(--border);flex-shrink:0;}

  .sidebar .si-name{font-size:12px;}
  .sidebar .si-meta{font-size:10px;}
  .chat-area{min-height:0;flex:1;}
  .info-panel{display:none!important;}
  .resize-handle{display:none!important;}
  .input-area{padding:8px 10px;gap:6px;position:sticky;bottom:0;z-index:10;}
  .input-area textarea{font-size:14px;padding:8px 10px;min-height:40px;max-height:120px;}
  .file-btn{font-size:20px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
  .send-btn{width:44px;height:44px;min-width:44px;}
  .ch-actions button{min-height:36px;min-width:36px;}
  .sc-bar{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sc-bar::-webkit-scrollbar{display:none;}
  .sc-btn{white-space:nowrap;flex-shrink:0;min-height:36px;}
  /* Admin nav: horizontal scrollable on mobile */
  .admin-layout{flex-direction:column;}
  .admin-nav{width:100%;border-right:none;border-bottom:1px solid var(--border);flex-direction:row;overflow-x:auto;padding:4px 4px 0;scrollbar-width:none;flex-wrap:wrap;gap:0;}
  .admin-nav::-webkit-scrollbar{display:none;}
  .admin-nav h4{display:none;}
  .admin-nav-item{padding:6px 10px;font-size:11px;white-space:nowrap;border-left:none;border-bottom:2px solid transparent;}
  .admin-nav-item.sel{border-left:none;border-bottom-color:var(--blue);}
  .admin-center{padding:12px;overflow-y:auto;}
  .admin-section{padding:12px;}
  .new-user-grid{grid-template-columns:1fr;}
  .panel-body{padding:12px;}
  .panel-hdr{padding:10px 12px;flex-wrap:wrap;gap:8px;}
  /* All inline grids to single column */
  .admin-section div[style*="grid-template-columns:1fr 1fr 1fr"],
  .admin-section div[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  .admin-section div[style*="grid-template-columns:1fr 1fr"],
  .admin-section div[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
  .admin-section div[style*="grid-template-columns:2fr 1fr"],
  .admin-section div[style*="grid-template-columns: 2fr 1fr"]{grid-template-columns:1fr!important;}
  #adm-sec-stats div[style*="grid-template-columns: 1fr 1fr 1fr"],
  #adm-sec-stats div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  #adm-sec-stats div[style*="grid-template-columns: 1fr 1fr"],
  #adm-sec-stats div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  /* History table scroll */
  .hist-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .hist-table{min-width:700px;}
  /* Folder sidebar */
  .folder-sidebar{max-height:120px;overflow-y:auto;width:100%!important;flex-direction:row!important;overflow-x:auto;flex-wrap:wrap;gap:4px;}
  .folder-sidebar h4{display:none;}
  .folder-sidebar hr{display:none;}
  .folder-item{white-space:nowrap;font-size:11px;padding:4px 8px;}
  /* Allhist layout */
  .admin-sec-full>div[style*="display:flex"]{flex-direction:column!important;}
  /* Mobile info-panel overlay */
  .mobile-ci-btn{display:inline-flex!important;}
  .info-panel.mobile-show{display:flex!important;position:fixed;inset:0;z-index:9999;max-height:none;width:100%;border:none;border-radius:0;flex-direction:column;}
  .info-panel.mobile-show .ip-hdr{position:sticky;top:0;z-index:1;background:var(--white);border-bottom:1px solid var(--border);}
  .info-panel.mobile-show .mobile-ci-close{display:block;}
  /* LDAP/Gambio flex-wrap panels */
  .admin-section div[style*="flex-wrap:wrap"]{gap:12px!important;}
  .admin-section div[style*="flex-wrap:wrap"]>.panel{min-width:100%!important;flex-basis:100%!important;}
  /* Toggle rows */
  .toggle-row{gap:8px;}
  .toggle-row label{font-size:12px;}
  /* Proactive / Agent messages */
  .pmsg-row{flex-wrap:wrap;}
  .pmsg-row input{min-width:0;}
}
/* Responsive: Small phone */
@media(max-width:400px){
  .app-header{padding:6px 8px;gap:4px;}
  .nav-tab{padding:8px 10px;font-size:15px;gap:0;}
  .sidebar{max-height:110px;}
  .admin-center{padding:6px;}
  .admin-section{padding:8px;}
  /* Hide logo on very small screens */
  .app-logo{display:none;}
  /* Mute indicator smaller */
  #mute-indicator{width:40px;height:40px;font-size:16px;bottom:12px;left:12px;}
  .panel{border-radius:8px;margin-bottom:12px;}
  .panel-body{padding:10px;}
  .panel-hdr{padding:8px 10px;}
  .panel-hdr h3{font-size:11px;}
  .form-row input,.form-row select,.form-row textarea{font-size:13px;padding:8px 10px;}
  .btn{font-size:11px;padding:6px 10px;}
  /* Chat header compact */
  .chat-hdr{padding:8px 10px;}
  .ch-actions{gap:4px!important;}
  .ch-actions .btn{font-size:10px;padding:4px 6px;}
  .ch-actions .btn span{display:none;}
  .ch-info h3{font-size:12px;}
  .ch-info p{font-size:10px;}
  /* Messages */
  .msgs{padding:8px!important;}
  .msg{max-width:90%;}
}

/* Stats styling */
#adm-sec-stats .panel-body{font-size:13px;}
.user-row{border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease);}
.user-row:last-child{border-bottom:none;}
.user-row:hover{background:var(--hover);}
.ua{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--border);}

/* Toast notification */
.sd-toast{position:fixed;top:20px;right:20px;z-index:20000;padding:12px 20px;border-radius:var(--r-md);font-size:13px;font-weight:600;font-family:inherit;color:#fff;box-shadow:var(--sh-lg);transform:translateX(120%);transition:transform var(--dur-lg) var(--ease-bounce);display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.sd-toast.show{transform:translateX(0);}
.sd-toast.success{background:linear-gradient(135deg,#2e7d32,#43a047);}
.sd-toast.error{background:linear-gradient(135deg,#c62828,#e53935);}
.sd-toast.info{background:linear-gradient(135deg,#1565c0,#1e88e5);}
.sd-toast i{font-size:15px;}

/* Unsaved changes modal */
.unsaved-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:20000;display:flex;align-items:center;justify-content:center;animation:fadeIn var(--dur-md) var(--ease);}
.unsaved-modal{background:var(--white);border-radius:var(--r-xl);width:360px;max-width:90vw;box-shadow:var(--sh-lg);overflow:hidden;color:var(--text);animation:modalIn var(--dur-lg) var(--ease-bounce);}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.unsaved-modal .um-hdr{padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;}
.unsaved-modal .um-body{padding:20px;font-size:13px;line-height:1.6;color:var(--muted);}
.unsaved-modal .um-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Resize handle for split panes */
.resize-handle{width:8px;cursor:col-resize;background:var(--border);flex-shrink:0;position:relative;z-index:100;transition:background var(--dur) var(--ease);}
.resize-handle:hover,.resize-handle.active{background:var(--blue);}
.resize-handle::after{content:'⋮';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--muted);line-height:1;pointer-events:none;}
.resize-handle:hover::after,.resize-handle.active::after{color:#fff;}

/* History detail panel */
.history-detail{flex-shrink:0;overflow-y:auto;background:var(--white);min-width:240px;max-width:60%;}

/* Range slider custom styling */
input[type=range]{height:6px;border-radius:3px;-webkit-appearance:none;appearance:none;background:var(--border);outline:none;cursor:pointer;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.2);}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--blue);cursor:pointer;border:2px solid var(--white);box-shadow:0 1px 4px rgba(0,0,0,.2);}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15);}

/* Send button hover */
.send-btn:hover{filter:brightness(1.12);transform:scale(1.05);box-shadow:0 4px 14px rgba(27,117,153,.3);}
.send-btn:active{transform:scale(.98);}

/* Folder item active/drag */
.folder-item{transition:all var(--dur) var(--ease);}

/* Table row hover more visible */
.hist-table tr:hover td{background:rgba(27,117,153,.04);}
.hist-table tr.selected td{background:var(--sel);}

/* Scrollbar styling */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.msgs::-webkit-scrollbar,.history-detail::-webkit-scrollbar,.info-panel::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.folder-sidebar::-webkit-scrollbar,.admin-center::-webkit-scrollbar{width:5px;}
.msgs::-webkit-scrollbar-track,.history-detail::-webkit-scrollbar-track,.info-panel::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.folder-sidebar::-webkit-scrollbar-track,.admin-center::-webkit-scrollbar-track{background:transparent;}
.msgs::-webkit-scrollbar-thumb,.history-detail::-webkit-scrollbar-thumb,.info-panel::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.folder-sidebar::-webkit-scrollbar-thumb,.admin-center::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full);}
.msgs::-webkit-scrollbar-thumb:hover,.history-detail::-webkit-scrollbar-thumb:hover,.info-panel::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover,.folder-sidebar::-webkit-scrollbar-thumb:hover,.admin-center::-webkit-scrollbar-thumb:hover{background:#a0b0c0;}

/* Focus-visible for keyboard accessibility */
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:var(--sh-focus);}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:-1px;box-shadow:var(--sh-focus);}
.admin-nav-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;box-shadow:var(--sh-focus);}
.nav-tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.sitem:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}

/* Read receipts (WhatsApp style) */
.msg-sent{color:var(--muted);font-size:12px;margin-left:4px;letter-spacing:-2px;}
.msg-read{color:#53bdeb;font-size:12px;margin-left:4px;letter-spacing:-2px;font-weight:700;}

/* Shortcut key indicator */
.sc-key{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;background:rgba(27,117,153,.12);color:var(--blue);font-size:9px;font-weight:700;margin-right:3px;flex-shrink:0;}
.sc-btn:hover .sc-key{background:rgba(255,255,255,.3);color:#fff;}

/* File upload button */
.file-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;padding:4px;transition:color var(--dur) var(--ease);flex-shrink:0;align-self:flex-end;margin-bottom:6px;}
.file-btn:hover{color:var(--blue);}

/* File in message bubble */
.msg-file{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;background:rgba(255,255,255,.15);border-radius:8px;border:1px solid rgba(255,255,255,.2);}
.msg.agent .msg-file{background:rgba(255,255,255,.12);}
.msg.customer .msg-file{background:var(--bg);border-color:var(--border);}
.msg-file i:first-child{font-size:20px;color:rgba(255,255,255,.7);flex-shrink:0;}
.msg.customer .msg-file i:first-child{color:var(--blue);}
.msg-file-info{display:flex;flex-direction:column;min-width:0;}
.msg-file-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-file-meta{font-size:10px;opacity:.7;display:flex;align-items:center;gap:4px;}

/* Mobile info-panel toggle */
.mobile-ci-btn{display:none!important;}
.mobile-ci-close{display:none;}

/* Session unread indicator */
.sitem.has-unread .si-name{font-weight:800;}
.sitem.has-unread .si-prev{font-weight:600;color:var(--text);}
.si-unread{background:var(--blue);color:#fff;font-size:9px;font-weight:700;border-radius:10px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;margin-left:auto;}

/* Message grouping */
.msg.grouped{margin-top:-4px;}
.msg.grouped .msg-av,.msg.grouped .msg-av-ph,.msg.grouped .msg-who{display:none;}
.msg.grouped .bubble{border-radius:14px;}
.msg.customer.grouped .bubble{border-radius:4px 14px 14px 4px;}
.msg.agent.grouped .bubble{border-radius:14px 4px 4px 14px;}

/* Collapsible info sections */
.ip-section h4{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px;}
.ip-section h4::after{content:'▾';font-size:10px;color:var(--muted);margin-left:auto;transition:transform .2s;}
.ip-section.collapsed h4::after{transform:rotate(-90deg);}
.ip-section.collapsed .ip-field{display:none;}

/* Unsaved CI indicator */
.ci-unsaved .btn.btn-primary{position:relative;}
.ci-unsaved .btn.btn-primary::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;background:#d32f2f;border-radius:50%;border:2px solid var(--white);}

/* History quick actions — now in main hist-table block above */

/* Online dot pulse (widget) — already in chatbot.js CSS */

/* Chat search highlights */
.search-hit{background:rgba(232,139,0,.15)!important;border-color:rgba(232,139,0,.3)!important;}
.search-active{background:rgba(232,139,0,.35)!important;outline:2px solid var(--orange);outline-offset:1px;}

/* Collapsible CI sections */
.ip-section.ip-collapsed>.ip-field,.ip-section.ip-collapsed>.ip-row{display:none;}
.ci-suggest{position:absolute;top:100%;left:0;right:0;background:var(--white);border:1.5px solid var(--border);border-radius:0 0 8px 8px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:100;max-height:200px;overflow-y:auto;}
.ci-suggest-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background var(--dur) var(--ease);}
.ci-suggest-item:last-child{border-bottom:none;}
.ci-suggest-item:hover{background:var(--hover);}
/* Product cards in suggest bar */
.prod-card{flex-shrink:0;padding:6px 10px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s;max-width:220px;white-space:normal;}
.prod-card:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(27,117,153,.15);transform:translateY(-1px);}

.feat-toggle{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background var(--dur) var(--ease);}
.feat-toggle:hover{background:var(--hover);}
.feat-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);cursor:pointer;}
.feat-toggle span{font-weight:600;}
.feat-toggle small{color:var(--muted);font-weight:400;}
.ip-section.ip-collapsed>h4 .fa-chevron-down{transform:rotate(-90deg);}

/* Rich Text Editor */
.fmt-bar{display:flex;align-items:center;gap:2px;padding:4px 12px;border-top:1px solid var(--border);background:var(--hover);}
.fmt-bar button{background:none;border:1px solid transparent;border-radius:4px;padding:4px 6px;cursor:pointer;color:var(--text);font-size:12px;transition:all var(--dur) var(--ease);}
.fmt-bar button:hover{background:var(--white);border-color:var(--border);}
.fmt-sep{width:1px;height:18px;background:var(--border);margin:0 4px;}
.agent-editor{flex:1;min-height:20px;max-height:120px;overflow-y:auto;padding:10px 12px;font-size:13px;font-family:inherit;line-height:1.5;outline:none;color:var(--text);word-break:break-word;}
.agent-editor:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;}
.agent-editor ul,.agent-editor ol{margin:4px 0 4px 18px;padding:0;}
.agent-editor li{margin-bottom:2px;}

/* Bubble formatted text */
.bubble b,.bubble strong{font-weight:700;}
.bubble i,.bubble em{font-style:italic;}
.bubble u{text-decoration:underline;}
.bubble ul,.bubble ol{margin:4px 0 4px 18px;padding:0;}
.bubble li{margin:2px 0;}
.bubble a{color:inherit;text-decoration:underline;opacity:.85;}
.bubble a:hover{opacity:1;}
.msg.agent .bubble a,.msg.ai-msg .bubble a{color:#fff;}
.msg.customer .bubble a{color:var(--blue);}

/* Shortcuts expand */
.sc-expand-btn{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--white);cursor:pointer;color:var(--muted);font-size:10px;transition:all var(--dur) var(--ease);flex-shrink:0;}
.sc-expand-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue);}

/* Shortcut editor lang tabs */
.sc-lang-tab{padding:4px 10px!important;font-size:11px!important;border:1px solid var(--border)!important;background:var(--white)!important;color:var(--muted)!important;cursor:pointer!important;border-radius:6px!important;}
.sc-lang-tab.active{background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important;}
.sc-ed-area{font-family:inherit;}
.sc-ed-area:focus{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(27,117,153,.1);}

/* ── Content Manager ── */
.cm-cat-item{padding:10px 12px;border-radius:8px;cursor:pointer;margin-bottom:4px;transition:background var(--dur) var(--ease);}
.cm-cat-item:hover{background:var(--hover);}
.cm-cat-item.cm-cat-sel{background:var(--blue);color:#fff;}
.cm-cat-item.cm-cat-sel .badge{background:rgba(255,255,255,.25);color:#fff;}
.cm-cat-item.cm-cat-sel small{color:rgba(255,255,255,.7);}
.cm-slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.cm-slot-card{background:var(--panel);border:1.5px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .2s,transform .15s;cursor:grab;}
.cm-slot-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px);}
.cm-slot-card.dragging{opacity:.5;}
.cm-slot-card img{display:block;}

/* ── Missing utility classes ── */
.btn-blue{background:linear-gradient(135deg,var(--blue),var(--dark));color:#fff;}
.btn-blue:hover{opacity:1;filter:brightness(1.1);box-shadow:0 2px 8px rgba(27,117,153,.3);}
.badge-muted{background:var(--hover);color:var(--muted);}

/* Toggle switch (compact) */
.switch{position:relative;display:inline-block;width:38px;height:20px;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:#cdd5de;border-radius:20px;transition:.25s;}
.switch .slider::before{content:'';position:absolute;width:16px;height:16px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:.25s;}
.switch input:checked+.slider{background:var(--green);}
.switch input:checked+.slider::before{transform:translateX(18px);}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease;}
.modal{background:var(--white);border-radius:14px;width:100%;box-shadow:0 16px 64px rgba(0,0,0,.25);overflow:hidden;color:var(--text);max-height:90vh;display:flex;flex-direction:column;}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.modal-header h3{font-size:15px;font-weight:700;margin:0;}
.modal-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:4px;transition:color var(--dur) var(--ease);}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px;overflow-y:auto;flex:1;}
.modal-body .form-row{margin-bottom:14px;}
.modal-body .form-row label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.modal-body .form-row input,.modal-body .form-row select,.modal-body .form-row textarea{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:9px 13px;font-size:13px;outline:none;background:var(--bg);font-family:inherit;box-sizing:border-box;}
.modal-body .form-row input:focus,.modal-body .form-row select:focus{border-color:var(--blue);}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0;}

/* ── Responsive Content Manager ── */
@media(max-width:768px){
  .cm-layout{flex-direction:column!important;}
  .cm-sidebar{width:100%!important;border-right:none!important;border-bottom:1.5px solid var(--border);padding-right:0!important;padding-bottom:12px;margin-bottom:12px;}
  #cm-cat-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
  #cm-cat-list::-webkit-scrollbar{display:none;}
  .cm-cat-item{white-space:nowrap;flex-shrink:0;}
  .cm-slot-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
  .modal{max-width:95vw;margin:0 8px;}
}

/* ── Dark Theme: Content Manager + Modal + Misc ── */
[data-theme="dark"] .cm-slot-card{background:var(--white);border-color:var(--border);}
[data-theme="dark"] .cm-slot-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.3);}
[data-theme="dark"] .cm-cat-item.cm-cat-sel{background:var(--blue);}
[data-theme="dark"] .modal{background:var(--white);box-shadow:0 16px 64px rgba(0,0,0,.5);}
[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.7);}
[data-theme="dark"] .modal-body .form-row input,
[data-theme="dark"] .modal-body .form-row select,
[data-theme="dark"] .modal-body .form-row textarea{background:var(--bg);color:var(--text);border-color:var(--border);}
[data-theme="dark"] .internal-note-area{background:#2a2a1a;border-color:#554d20;}
[data-theme="dark"] .internal-note-area input{background:var(--bg);color:var(--text);border-color:#554d20;}
[data-theme="dark"] .hd-msg.internal .bubble{background:#2a2a1a;border-color:#554d20;color:#d4c070;}
[data-theme="dark"] .bulk-bar{background:#2a2a1a;border-color:#554d20;color:#d4c070;}
[data-theme="dark"] .ci-suggest{background:var(--white);border-color:var(--border);box-shadow:0 4px 16px rgba(0,0,0,.4);}
[data-theme="dark"] .ci-suggest-item:hover{background:var(--hover);}
[data-theme="dark"] .unsaved-modal{background:var(--white);color:var(--text);}

/* ── Pink Theme: Content Manager ── */
[data-theme="pink"] .cm-cat-item.cm-cat-sel{background:var(--blue);}
[data-theme="pink"] .btn-blue{background:linear-gradient(135deg,#b04080,#d45090);}

/* ── Gray Theme: Content Manager ── */
[data-theme="gray"] .cm-cat-item.cm-cat-sel{background:var(--blue);}
[data-theme="gray"] .btn-blue{background:linear-gradient(135deg,#4a5568,#5a6672);}

/* ── Performance: reduce paint on scroll ── */
.msgs,.session-list,.admin-center,.info-panel{-webkit-overflow-scrolling:touch;}

/* ── Better focus states for accessibility ── */
.cm-slot-card:focus-within{outline:2px solid var(--blue);outline-offset:2px;}
.cm-cat-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}

/* ── Empty state styling ── */
.cm-empty{text-align:center;padding:40px;color:var(--muted);border:2px dashed var(--border);border-radius:12px;}
.cm-empty i{font-size:32px;margin-bottom:8px;display:block;opacity:.3;}

/* Product catalog */
.pc-group{border-bottom:1px solid var(--border);}
.pc-group-hdr{display:flex;align-items:center;gap:8px;padding:10px 16px;cursor:pointer;user-select:none;background:var(--bg2);transition:background var(--dur) var(--ease);}
.pc-group-hdr:hover{background:rgba(27,117,153,.06);}
.pc-group-icon{font-size:12px;color:#c67600;width:16px;text-align:center;}
.pc-group-name{font-size:13px;font-weight:700;flex:1;}
.pc-group-cnt{font-size:10px;font-weight:600;background:rgba(27,117,153,.1);color:var(--blue);padding:1px 7px;border-radius:10px;min-width:18px;text-align:center;}
.pc-group-chev{font-size:9px;color:var(--muted);transition:transform .2s;}
.pc-collapsed .pc-group-chev{transform:rotate(-90deg);}
.pc-collapsed .pc-group-body{display:none;}
.pc-row{display:flex;align-items:flex-start;gap:10px;padding:9px 16px 9px 40px;border-top:1px solid rgba(0,0,0,.04);cursor:pointer;transition:background .1s;}
.pc-row:hover{background:rgba(27,117,153,.03);}
.pc-disabled{opacity:.4;}
.pc-main{flex:1;min-width:0;}
.pc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
.pc-artnr{font-size:11px;font-weight:700;color:var(--blue);background:rgba(27,117,153,.06);padding:1px 6px;border-radius:4px;font-family:'SF Mono','Fira Code',monospace;white-space:nowrap;}
.pc-name{font-size:12px;font-weight:600;}
.pc-off{font-size:9px;color:var(--muted);}
.pc-price{font-size:11px;font-weight:700;color:#2e7d32;margin-left:auto;white-space:nowrap;}
.pc-avail{font-size:9px;padding:1px 5px;border-radius:3px;background:rgba(232,139,0,.1);color:#c67600;white-space:nowrap;}
.pc-cat{font-size:10px;color:var(--muted);display:inline-block;margin-bottom:3px;}
.pc-specs{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px;}
.pc-spec{font-size:10px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.04);color:#555;white-space:nowrap;}
.pc-spec b{color:#333;margin-right:2px;}
.pc-del{flex-shrink:0;background:none;border:1px solid transparent;border-radius:6px;padding:4px 6px;cursor:pointer;color:var(--muted);transition:all var(--dur) var(--ease);}
.pc-del:hover{color:var(--red);border-color:var(--red);background:rgba(220,53,69,.05);}
/* Product editor */
.ped-lbl{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:4px;}

/* Product table */
.prod-tbl{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;}
.prod-tbl th{text-align:left;font-size:9px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);}
.prod-tbl td{padding:6px 8px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;}
.prod-tbl tr:hover{background:var(--surface);}

/* Manufacturer group */
.prod-mfr-group{border-bottom:2px solid var(--border);}
.prod-mfr-hdr{padding:8px 14px;background:linear-gradient(135deg,rgba(27,117,153,.04),rgba(27,117,153,.08));cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;user-select:none;border-bottom:1px solid var(--border);}
.prod-mfr-hdr:hover{background:linear-gradient(135deg,rgba(27,117,153,.08),rgba(27,117,153,.12));}
.prod-mfr-arrow{font-size:9px;color:var(--muted);transition:transform .2s;}
.prod-mfr-group.collapsed .prod-mfr-arrow{transform:rotate(-90deg);}
.prod-mfr-group.collapsed table{display:none;}

/* Badges */
.prod-badge-new{display:inline-block;background:#E88B00;color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;vertical-align:middle;letter-spacing:.3px;animation:badge-pulse 2s ease-in-out infinite;}
.prod-badge-inc{display:inline-block;background:var(--danger);color:#fff;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;vertical-align:middle;}
@keyframes badge-pulse{0%,100%{opacity:1;}50%{opacity:.6;}}

/* Language tabs */
.ped-lang-tabs{display:flex;gap:0;margin-bottom:0;}
.ped-tab{padding:4px 12px;font-size:11px;font-weight:600;border:1.5px solid var(--border);border-bottom:none;background:var(--surface);color:var(--muted);cursor:pointer;border-radius:6px 6px 0 0;transition:all var(--dur) var(--ease);}
.ped-tab.active{background:var(--bg);color:var(--text);border-bottom-color:var(--bg);}
.ped-tab-empty{opacity:.5;font-style:italic;}
.ped-tab-empty::after{content:' •';color:var(--danger);font-size:8px;}
.ped-lang-ta{width:100%;border:1.5px solid var(--border);border-radius:0 8px 8px 8px;padding:8px 12px;font-size:12px;resize:vertical;font-family:inherit;}
.ped-input{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:10px 14px;font-size:13px;box-sizing:border-box;transition:border-color .15s;}
.ped-input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(27,117,153,.08);}
textarea.ped-input{resize:vertical;}
select.ped-input{appearance:auto;}
/* ── Content Manager: Teaser-Row Layout Editor ── */
.cm-tr-preview{display:flex;gap:14px;background:var(--bg2);border:2px solid var(--border);border-radius:12px;padding:14px;min-height:260px;}
.cm-tr-zone{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;overflow:hidden;}
.cm-tr-slideshow{flex:2;}
.cm-tr-teaser{flex:1;display:flex;flex-direction:column;}
.cm-tr-zone-hdr{padding:10px 14px;font-size:12px;font-weight:700;color:var(--blue);border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:6px;background:rgba(27,117,153,.04);}
.cm-tr-zone-hdr i{font-size:14px;}
.cm-tr-cnt{font-size:10px;font-weight:600;background:rgba(27,117,153,.1);padding:1px 7px;border-radius:10px;margin-left:auto;}
.cm-tr-slides{display:flex;gap:8px;padding:12px;flex-wrap:wrap;}
.cm-tr-slide{width:130px;height:90px;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;border:2px solid var(--border);transition:all var(--dur) var(--ease);background:var(--surface);}
.cm-tr-slide:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(27,117,153,.15);}
.cm-tr-slide img{width:100%;height:100%;object-fit:cover;}
.cm-tr-slide-info{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));padding:4px 8px;display:flex;align-items:center;gap:4px;}
.cm-tr-slide-num{font-size:10px;font-weight:700;color:#fff;background:var(--blue);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cm-tr-slide-title{font-size:10px;color:#fff;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-tr-del{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:11px;padding:2px;flex-shrink:0;transition:color var(--dur) var(--ease);}
.cm-tr-del:hover{color:#ff4444;}
.cm-tr-add{border:2px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);transition:all var(--dur) var(--ease);}
.cm-tr-add:hover{border-color:var(--blue);color:var(--blue);background:rgba(27,117,153,.03);}
.cm-tr-add span{font-size:10px;font-weight:600;}
.cm-tr-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:24px;background:var(--surface);}
.cm-tr-teaser-slot{flex:1;min-height:90px;margin:8px;border-radius:8px;overflow:hidden;position:relative;cursor:pointer;border:2px solid var(--border);transition:all var(--dur) var(--ease);background:var(--surface);}
.cm-tr-teaser-slot:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(27,117,153,.15);}
.cm-tr-teaser-slot img{width:100%;height:100%;object-fit:cover;}
.cm-tr-teaser-slot.cm-tr-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-style:dashed;}
@media(max-width:700px){.cm-tr-preview{flex-direction:column;}.cm-tr-slides{flex-wrap:wrap;}.cm-tr-slide{width:calc(50% - 4px);}}
/* ── Gambio Integration ── */
.gambio-order{border:1.5px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden;}
.gambio-order-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);font-size:11px;flex-wrap:wrap;}
.gambio-order-id{font-weight:700;color:var(--blue);font-family:monospace;}
.gambio-order-date{color:var(--muted);}
.gambio-order-total{font-weight:700;margin-left:auto;}
.gambio-order-status{font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.05);font-weight:600;}
.gambio-order-items{padding:6px 12px;font-size:11px;}
.gambio-order-item{display:flex;align-items:center;gap:6px;padding:2px 0;border-bottom:1px solid rgba(0,0,0,.04);}
.gambio-order-item:last-child{border:none;}
.gambio-item-qty{font-weight:700;color:var(--blue);min-width:24px;}
.gambio-item-model{font-size:10px;color:var(--blue);background:rgba(27,117,153,.06);padding:0 4px;border-radius:3px;}
.gambio-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gambio-item-price{font-weight:600;white-space:nowrap;}

/* ════════════════════════════════════════════════════
   MOBILE OVERHAUL — State of the Art
   ════════════════════════════════════════════════════ */

/* ── Bottom Nav Bar (replaces top nav on mobile) ── */
@media(max-width:768px){
  .app-header{
    position:fixed;bottom:0;left:0;right:0;top:auto;z-index:9000;
    flex-direction:row;padding:0;
    background:var(--white);border-top:1px solid var(--border);border-bottom:none;
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .app-logo{display:none;}
  .header-nav{flex:1;justify-content:space-around;gap:0;padding:0;}
  .header-right{display:none;}
  .nav-tab{
    flex-direction:column;gap:2px;padding:8px 4px 6px;font-size:10px;
    border-bottom:none;flex:1;justify-content:center;align-items:center;
    min-height:52px;border-radius:0;
  }
  .nav-tab i{font-size:18px;}
  .nav-tab .nav-label{font-size:9px;display:block!important;letter-spacing:.2px;}
  .nav-tab.active{background:transparent;border-bottom:none;color:var(--blue);}
  .nav-tab.active::after{content:'';position:absolute;top:0;left:20%;right:20%;height:3px;background:var(--blue);border-radius:0 0 3px 3px;}
  .nav-tab{position:relative;}
  /* Chat badge on bottom nav */
  .nav-tab .unread-badge{position:absolute;top:4px;right:calc(50% - 18px);font-size:8px;min-width:16px;height:16px;line-height:16px;text-align:center;}
  #chat-nav-badge{position:absolute;top:2px;right:calc(50% - 20px);}
  /* Body offset for bottom nav */
  .app-body{height:calc(100vh - 58px - env(safe-area-inset-bottom,0));margin-bottom:58px;}
  body{padding-bottom:env(safe-area-inset-bottom,0);}
}

/* ── Chat View Mobile ── */
@media(max-width:768px){
  .app-body.chat-view{height:calc(100vh - 58px - env(safe-area-inset-bottom,0));}
  .sidebar{
    width:100%;max-height:none;border-right:none;border-bottom:none;
    position:relative;flex-shrink:0;
  }
  /* Collapsed sidebar: show only session list header */
  .sidebar.mobile-collapsed{max-height:48px;overflow:hidden;}
  .sidebar.mobile-collapsed .sitem{display:none;}
  .sidebar.mobile-collapsed .sitem.sel{display:flex;}
  /* Session items: bigger touch targets */
  .sitem{min-height:56px;padding:10px 12px;gap:10px;}
  .si-avatar{width:40px;height:40px;font-size:14px;}
  .si-name{font-size:13px;}
  .si-meta{font-size:11px;}
  /* Chat header: compact */
  .chat-hdr{padding:10px 12px;min-height:48px;}
  .ch-info h3{font-size:13px;}
  .ch-actions{gap:4px;}
  .ch-actions .btn{min-width:40px;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center;}
  .ch-actions .btn span{display:none;}
  /* Messages: full width */
  .msgs{padding:10px 8px!important;}
  .msg{max-width:88%;}
  .msg .bubble{font-size:13px;padding:10px 14px;}
  /* Input area: sticky at bottom above nav */
  .input-area{
    padding:8px 10px;gap:6px;
    position:sticky;bottom:0;z-index:10;
    background:var(--white);border-top:1px solid var(--border);
  }
  .input-area [contenteditable]{font-size:16px!important;padding:10px 12px;min-height:44px;-webkit-appearance:none;}
  .send-btn{width:44px;height:44px;min-width:44px;border-radius:50%;}
  .file-btn{min-width:44px;min-height:44px;}
  /* Shortcut bar: horizontal scroll */
  .sc-bar{
    padding:6px 8px;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:4px;
  }
  .sc-bar::-webkit-scrollbar{display:none;}
  .sc-btn{white-space:nowrap;flex-shrink:0;min-height:36px;font-size:11px;padding:6px 12px;}
  /* Info panel: full-screen overlay */
  .info-panel{display:none!important;}
  .info-panel.mobile-show{
    display:flex!important;position:fixed;inset:0;z-index:9500;
    width:100%;max-height:none;border:none;border-radius:0;
    flex-direction:column;background:var(--white);
    animation:slideUp .25s ease;
  }
  .info-panel.mobile-show .ip-hdr{
    position:sticky;top:0;z-index:1;background:var(--white);
    border-bottom:1px solid var(--border);min-height:48px;
    display:flex;align-items:center;
  }
  @keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

/* ── Admin View Mobile ── */
@media(max-width:768px){
  .admin-layout{flex-direction:column;}
  .admin-nav{
    width:100%;border-right:none;border-bottom:1px solid var(--border);
    flex-direction:row;overflow-x:auto;padding:0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    gap:0;flex-wrap:nowrap;background:var(--white);
    position:sticky;top:0;z-index:100;
    min-height:48px;
  }
  .admin-nav::-webkit-scrollbar{display:none;}
  .admin-nav h4{display:none;}
  .admin-nav-group-label{display:none;}
  .admin-nav-item{
    padding:10px 14px;font-size:12px;white-space:nowrap;flex-shrink:0;
    border-left:none;border-bottom:3px solid transparent;
    min-height:44px;display:flex;align-items:center;gap:6px;
    color:var(--text);
  }
  .admin-nav-item span{display:inline!important;}
  .admin-nav-item .nav-icon{font-size:14px;}
  .admin-nav-item.sel{border-left:none;border-bottom-color:var(--blue);background:rgba(27,117,153,.04);}
  .admin-center{padding:10px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .admin-section{padding:0;}
  /* Panels */
  .panel{border-radius:10px;margin-bottom:10px;}
  .panel-hdr{padding:12px 14px;flex-wrap:wrap;gap:6px;}
  .panel-hdr h3{font-size:12px;}
  .panel-hdr .btn{min-height:36px;}
  .panel-body{padding:12px 14px;}
}

/* ── History / Alle Chatverläufe Mobile ── */
@media(max-width:768px){
  /* Folder sidebar: horizontal pills */
  .folder-sidebar{
    width:100%!important;max-height:none;overflow-x:auto;overflow-y:hidden;
    flex-direction:row!important;flex-wrap:nowrap;gap:0;padding:0;
    border-right:none!important;border-bottom:1px solid var(--border);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:var(--white);position:sticky;top:0;z-index:10;
  }
  .folder-sidebar::-webkit-scrollbar{display:none;}
  .folder-sidebar h4,.folder-sidebar hr{display:none;}
  .folder-item{
    white-space:nowrap;flex-shrink:0;padding:10px 14px;font-size:11px;
    border-bottom:3px solid transparent;min-height:40px;
  }
  .folder-item.sel{background:transparent;border-bottom-color:var(--blue);color:var(--blue);}
  /* History table: card layout */
  .hist-table{min-width:0!important;}
  .hist-table thead{display:none;}
  .hist-table tbody tr{
    display:flex;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border);
    gap:4px 8px;align-items:center;cursor:pointer;
  }
  .hist-table tbody tr:active{background:var(--hover);}
  .hist-table tbody td{padding:0;border:none;font-size:12px;}
  .hist-table tbody td:nth-child(1){display:none;}/* checkbox */
  .hist-table tbody td:nth-child(2){order:1;font-size:10px;color:var(--muted);min-width:60px;}/* date */
  .hist-table tbody td:nth-child(3){order:0;font-weight:700;font-size:13px;flex:1;min-width:120px;}/* name */
  .hist-table tbody td:nth-child(4){order:2;}/* type badge */
  .hist-table tbody td:nth-child(5){order:3;font-size:10px;color:var(--muted);}/* lang */
  .hist-table tbody td:nth-child(6){order:10;display:none;}/* status select */
  .hist-table tbody td:nth-child(7){order:11;display:none;}/* prio */
  .hist-table tbody td:nth-child(8){order:4;flex-basis:100%;color:#8b5cf6;font-size:11px;font-style:italic;}/* notes */
  .hist-table tbody td:nth-child(9){order:5;flex-basis:100%;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/* preview */
  .hist-table tbody td:nth-child(10){order:12;display:none;}/* actions */
  /* History detail: full screen overlay — hidden by default, shown via .mobile-open */
  .history-detail{
    display:none!important;position:fixed!important;inset:0;z-index:9500;
    width:100%!important;border:none!important;border-radius:0;
    flex-direction:column;background:var(--white);
    animation:slideUp .25s ease;overflow-y:auto;
  }
  .history-detail.mobile-open{display:flex!important;}
  /* Full-width sections */
  .admin-sec-full>div[style*="display:flex"]{flex-direction:column!important;}
  .admin-sec-full .resize-handle{display:none!important;}
  .hist-toolbar{flex-wrap:wrap;gap:6px;padding:8px 10px;}
  .hist-toolbar input{font-size:14px;min-height:40px;}
}

/* ── Kontakt Katalog Mobile ── */
@media(max-width:768px){
  #contacts-detail{
    position:fixed!important;inset:0;z-index:9500;
    width:100%!important;border:none!important;
    animation:slideUp .25s ease;overflow-y:auto;
  }
  #contacts-list-body .hist-table thead{display:none;}
  #contacts-list-body .hist-table tbody tr{
    display:flex;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--border);
    gap:4px 8px;align-items:center;
  }
  #contacts-list-body .hist-table tbody tr:active{background:var(--hover);}
  #contacts-list-body .hist-table tbody td{padding:0;border:none;}
  #contacts-list-body .hist-table tbody td:nth-child(1){font-weight:700;font-size:13px;flex:1;min-width:100px;}/* firma */
  #contacts-list-body .hist-table tbody td:nth-child(2){font-size:12px;flex:1;min-width:80px;}/* name */
  #contacts-list-body .hist-table tbody td:nth-child(3){font-size:11px;color:var(--blue);flex-basis:100%;}/* email */
  #contacts-list-body .hist-table tbody td:nth-child(4){font-size:11px;color:var(--muted);}/* phone */
  #contacts-list-body .hist-table tbody td:nth-child(5){display:none;}/* city */
  #contacts-list-body .hist-table tbody td:nth-child(6){display:none;}/* chats */
  #contacts-list-body .hist-table tbody td:nth-child(7){order:10;}/* source */
  #contacts-list-body .hist-table tbody td:nth-child(8){display:none;}/* updated */
  #contacts-list-body .hist-table tbody td:nth-child(9){display:none;}/* action */
}

/* ── Modals Mobile ── */
@media(max-width:768px){
  .modal-backdrop,.unsaved-overlay{align-items:flex-end!important;padding:0;}
  .modal,.unsaved-modal{
    width:100%!important;max-width:100%!important;max-height:90vh;
    border-radius:16px 16px 0 0!important;
    animation:slideUp .25s ease;
  }
  .modal-backdrop .modal{max-height:85vh;overflow-y:auto;}
  /* Close modal */
  #close-modal-overlay{align-items:flex-end!important;}
  #close-modal-overlay>div{width:100%!important;border-radius:16px 16px 0 0!important;}
  /* Confirm modals */
  .um-footer{flex-direction:column-reverse;gap:6px!important;}
  .um-footer .btn{width:100%;min-height:44px;justify-content:center;}
}

/* ── Forms & Inputs Mobile ── */
@media(max-width:768px){
  input,select,textarea{font-size:16px!important;-webkit-appearance:none;border-radius:8px!important;}
  input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="url"],textarea,select{
    min-height:40px;padding:10px 12px!important;
  }
  .form-row{margin-bottom:10px;}
  .form-row label{font-size:12px;margin-bottom:4px;}
  .btn{min-height:40px;font-size:12px;padding:8px 14px;border-radius:8px;}
  .btn-sm{min-height:36px;}
  /* Toggle switches */
  .tog{transform:scale(1.15);margin:4px;}
  /* Text editor: bigger cells */
  .tr-cell{min-height:40px!important;font-size:13px!important;}
  /* IP fields */
  .ip-field input,.ip-field select,.ip-field textarea{font-size:14px!important;min-height:38px;}
}

/* ── Touch Targets ── */
@media(max-width:768px){
  button,a,.folder-item,.sitem,.admin-nav-item,[onclick]{
    -webkit-tap-highlight-color:rgba(27,117,153,.1);
  }
  /* Ensure minimum 44px touch targets */
  .hist-actions .btn,.ch-actions .btn{min-width:40px;min-height:40px;}
  .badge{padding:3px 8px;}
  /* Scroll momentum */
  [style*="overflow"]{-webkit-overflow-scrolling:touch;}
}

/* ── Toast on mobile ── */
@media(max-width:768px){
  .sd-toast{
    left:10px;right:10px;top:auto;bottom:70px;
    border-radius:12px;font-size:14px;padding:14px 18px;
    transform:translateY(120%);
  }
  .sd-toast.show{transform:translateY(0);}
}

/* ── Profile View Mobile ── */
@media(max-width:768px){
  #view-profile .panel{margin-bottom:10px;}
  #view-profile .form-row{margin-bottom:10px;}
  /* Shortcut editor */
  .sc-edit-item{flex-wrap:wrap;gap:6px;}
  .sc-edit-item input{min-width:0;flex:1;}
  /* Avatar crop */
  .crop-container{max-width:100%;overflow:hidden;}
}

/* ── Print: hide mobile nav ── */
@media print{
  .app-header{display:none!important;}
}

/* ── Landscape phone ── */
@media(max-width:768px) and (orientation:landscape){
  .app-header{padding-bottom:0;}
  .nav-tab{padding:4px;min-height:40px;}
  .nav-tab i{font-size:16px;}
  .nav-tab .nav-label{font-size:8px;}
  .app-body{height:calc(100vh - 44px);margin-bottom:44px;}
}

/* ── PWA standalone mode ── */
@media(display-mode:standalone){
  .app-header{padding-bottom:env(safe-area-inset-bottom,0);}
}

/* ════════════════════════════════════════════════════
   ALL ADMIN SECTIONS — Enhanced Mobile
   ════════════════════════════════════════════════════ */

@media(max-width:768px){
  /* ── Content (Carousel) ── */
  #adm-sec-content .panel[style*="min-width"]{min-width:0!important;flex-basis:100%!important;}
  #adm-sec-content div[style*="gap:18px"]{flex-direction:column!important;gap:10px!important;}
  #adm-sec-content div[style*="gap:20px"]{flex-direction:column!important;gap:10px!important;}
  #adm-sec-content .panel-body[style*="gap:20px"]{flex-direction:column!important;gap:10px!important;}
  #adm-sec-content div[style*="min-width:160px"]{min-width:0!important;}
  #adm-sec-content div[style*="min-width:120px"]{min-width:0!important;}
  /* Slide items */
  #adm-sec-content div[style*="min-height:120px"]{flex-direction:column!important;min-height:auto!important;}
  #adm-sec-content div[style*="min-height:120px"] img{width:100%!important;height:auto!important;max-height:140px!important;border-radius:8px!important;}

  /* ── Sidebanner ── */
  #adm-sec-sidebanner div[style*="gap:14px"]{flex-direction:column!important;gap:10px!important;}
  #adm-sec-sidebanner .panel[style*="min-width"]{min-width:0!important;flex-basis:100%!important;}
  /* Banner items: stack vertically */
  #adm-sec-sidebanner div[style*="border-radius:10px"][style*="overflow:hidden"]{flex-direction:column!important;}
  #adm-sec-sidebanner div[style*="border-radius:10px"][style*="overflow:hidden"] img{width:100%!important;height:auto!important;max-height:160px!important;}
  /* Sidebanner editor modal */
  #sb-ed-modal .modal,#sb-ed-modal>div:not([onclick]){
    width:100%!important;max-width:100%!important;max-height:90vh;
    border-radius:16px 16px 0 0!important;
  }
  #sb-ed-modal{align-items:flex-end!important;padding:0!important;}
  #sb-ov-modal{align-items:flex-end!important;padding:0!important;}
  #sb-ov-modal>div{width:100%!important;border-radius:16px 16px 0 0!important;max-height:85vh;overflow-y:auto;}

  /* ── FAQ ── */
  /* FAQ edit modal grids */
  .um-body div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  .um-body div[style*="grid-template-columns: 1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  /* FAQ items: bigger touch targets */
  #faq-list>div{padding:12px!important;}
  #faq-list button{min-width:36px!important;min-height:36px!important;}

  /* ── Products ── */
  /* Product list items */
  #adm-sec-products div[style*="padding:10px 14px"]{padding:10px!important;}
  /* Product detail grids → single column */
  #adm-sec-products div[style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  #adm-sec-products div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
  /* Product modal */
  #adm-sec-products .modal-backdrop{align-items:flex-end!important;padding:0!important;}
  #adm-sec-products .modal-backdrop>div{width:100%!important;max-width:100%!important;border-radius:16px 16px 0 0!important;max-height:90vh;overflow-y:auto;}
  /* Product search */
  #adm-sec-products input[style*="flex:1"]{min-width:0!important;width:100%!important;}
  /* Product list: wrap action buttons */
  #adm-sec-products div[style*="gap:3px"]{flex-wrap:wrap!important;}

  /* ── Translations ── */
  #adm-sec-translations .panel-body[style*="overflow-x"]{-webkit-overflow-scrolling:touch;}
  #adm-sec-translations table{font-size:11px!important;min-width:500px;}
  #adm-sec-translations .tr-cell{font-size:12px!important;min-height:38px!important;}
  /* Filter bar */
  #adm-sec-translations div[style*="gap:10px"][style*="flex-wrap"]{flex-direction:column!important;gap:8px!important;}
  #adm-sec-translations div[style*="min-width:200px"]{min-width:0!important;width:100%!important;}
  #adm-sec-translations input[style*="flex:1"]{width:100%!important;}

  /* ── Stats ── */
  #adm-sec-stats .panel{margin-bottom:10px;}
  #adm-sec-stats .panel-body[style*="gap:14px"]{flex-direction:column!important;gap:10px!important;}
  #adm-sec-stats canvas{max-height:200px!important;}

  /* ── Users ── */
  #adm-sec-users .user-row{flex-wrap:wrap!important;gap:8px!important;padding:12px!important;}
  .new-user-grid{grid-template-columns:1fr!important;}

  /* ── Settings ── */
  /* Proactive & Agent msg rows */
  .pmsg-row{flex-direction:column!important;gap:4px!important;}
  .pmsg-row input{width:100%!important;}
  /* Settings panels with flex */
  #adm-sec-settings div[style*="gap:12px"][style*="flex-wrap"]{gap:8px!important;}
  #adm-sec-settings div[style*="min-width:110px"]{min-width:0!important;}
  /* LDAP field mapping */
  #adm-sec-settings code[style*="min-width:110px"]{min-width:70px!important;font-size:10px!important;}
  /* Privacy URL fields */
  #adm-sec-settings div[style*="privacy-url"]{flex-direction:column!important;}

  /* ── Gambio ── */
  #adm-sec-gambio div[style*="flex-wrap:wrap"]>.panel{min-width:0!important;flex-basis:100%!important;}
  #adm-sec-gambio .panel-body[style*="display:flex"]{flex-direction:column!important;gap:8px!important;}

  /* ── Chat view overlays (AI summary, close modal, etc.) ── */
  div[style*="position:fixed"][style*="z-index:20000"],
  div[style*="position:fixed"][style*="z-index:10000"]{
    align-items:flex-end!important;padding:0!important;
  }
  div[style*="position:fixed"][style*="z-index:20000"]>.unsaved-modal,
  div[style*="position:fixed"][style*="z-index:10000"]>div[style*="border-radius"]{
    width:100%!important;max-width:100%!important;
    border-radius:16px 16px 0 0!important;
    max-height:85vh;overflow-y:auto;
  }

  /* ── Global: all inline grids stacking ── */
  .admin-section div[style*="grid-template-columns:repeat"]{grid-template-columns:1fr!important;}
  .admin-section div[style*="grid-template-columns: repeat"]{grid-template-columns:1fr!important;}
  /* Flex items with min-width in admin */
  .admin-section .form-row[style*="min-width"]{min-width:0!important;flex-basis:100%!important;}
  .admin-section div[style*="min-width:280px"]{min-width:0!important;}
  .admin-section div[style*="min-width:340px"]{min-width:0!important;}
  .admin-section div[style*="min-width:300px"]{min-width:0!important;}
  .admin-section div[style*="min-width:260px"]{min-width:0!important;}
}

/* ── Tablet adjustments ── */
@media(min-width:769px) and (max-width:1024px){
  /* Content carousel: stack if narrow */
  #adm-sec-content div[style*="min-width:340px"]{min-width:260px!important;}
  #adm-sec-content div[style*="min-width:280px"]{min-width:220px!important;}
  /* Modals: narrower */
  .modal-backdrop>div,.unsaved-modal{max-width:90vw!important;}
  #sb-ed-modal>div:not([onclick]){max-width:90vw!important;}
  /* Translations table */
  #adm-sec-translations table{font-size:12px!important;}
}

/* ════════════════════════════════════════════════════
   ADMIN NAV — Enhanced Mobile Navigation
   ════════════════════════════════════════════════════ */

@media(max-width:768px){
  /* Smooth horizontal scroll with snap */
  .admin-nav{
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    /* Gradient fade hint for scrollable content */
    mask-image:linear-gradient(to right,transparent,black 8px,black calc(100% - 8px),transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,black 8px,black calc(100% - 8px),transparent);
  }
  .admin-nav-item{
    scroll-snap-align:start;
    transition:background .12s,color .12s,border-color .12s;
  }
  .admin-nav-item:active{
    background:rgba(27,117,153,.08)!important;
    transform:scale(.97);
  }
  /* Selected state: bolder */
  .admin-nav-item.sel{
    font-weight:700;
  }
}

/* ════════════════════════════════════════════════════
   BOTTOM NAV — Enhanced
   ════════════════════════════════════════════════════ */

@media(max-width:768px){
  .app-header{
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:rgba(255,255,255,.92)!important;
  }
  [data-theme="dark"] .app-header{
    background:rgba(10,20,30,.92)!important;
  }
  .nav-tab{
    transition:color .15s,transform .1s;
  }
  .nav-tab:active{
    transform:scale(.92);
  }
  .nav-tab.active i{
    transform:scale(1.1);
  }
  .nav-tab.active .nav-label{
    font-weight:700;
  }
}

/* ════════════════════════════════════════════════════
   TRAINING ADMIN — Responsive
   ════════════════════════════════════════════════════ */

/* Repair + Training shared tab bar scrolling */
#adm-sec-repair .panel>div[style*="border-bottom"],
#adm-sec-training .panel>div[style*="border-bottom"]{
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#adm-sec-training .panel>div[style*="border-bottom"]::-webkit-scrollbar,
#adm-sec-repair .panel>div[style*="border-bottom"]::-webkit-scrollbar{display:none;}

@media(max-width:768px){
  /* ── Training + Repair: main tabs ── */
  #adm-sec-training .panel>div[style*="border-bottom"],
  #adm-sec-repair .panel>div[style*="border-bottom"]{
    overflow-x:auto!important;flex-wrap:nowrap!important;gap:0!important;
    margin:0 -14px;padding:0 14px;
  }
  #adm-sec-training .panel>div[style*="border-bottom"] button,
  #adm-sec-repair .panel>div[style*="border-bottom"] button{
    flex-shrink:0!important;padding:10px 12px!important;font-size:11px!important;
    white-space:nowrap!important;min-height:42px;
  }
  /* ── Training + Repair: panel body ── */
  #adm-sec-training .panel-body,
  #adm-sec-repair .panel-body{padding:12px!important;}

  /* ── Training: category pills ── */
  #adm-sec-training .panel-body>div:first-child{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;flex-wrap:nowrap!important;padding-bottom:4px;
  }
  #adm-sec-training .panel-body>div:first-child::-webkit-scrollbar{display:none;}
  #adm-sec-training .panel-body>div:first-child .btn{flex-shrink:0!important;min-height:38px!important;}

  /* ── Training: category config box ── */
  #adm-sec-training .panel-body>div:nth-child(2){
    padding:10px!important;
  }
  #adm-sec-training .panel-body>div:nth-child(2)>div:first-child{
    flex-direction:column!important;gap:8px!important;
  }
  #adm-sec-training .panel-body>div:nth-child(2) .form-row{min-width:0!important;flex-basis:100%!important;}

  /* ── Training: module cards ── */
  #adm-sec-training div[onclick*="trEditModule"]{
    padding:10px 12px!important;
  }
  #adm-sec-training div[onclick*="trEditModule"]>div:first-child{
    flex-wrap:wrap!important;gap:6px!important;
  }
  #adm-sec-training div[onclick*="trEditModule"] span[style*="font-size:13px"]{
    flex-basis:100%!important;order:-1;
  }

  /* ── Training: module editor modal → full-screen sheet ── */
  #tr-mod-modal{align-items:flex-end!important;padding:0!important;}
  #tr-mod-modal>div{
    width:100%!important;max-width:100%!important;max-height:92vh!important;
    border-radius:16px 16px 0 0!important;
    animation:slideUp .25s ease;
  }
  #tr-mod-modal>div>div[style*="padding:20px"]{padding:14px!important;}
  /* Type pills */
  #trm-type-pills{flex-wrap:wrap!important;}
  #trm-type-pills button{flex:1!important;min-width:80px!important;text-align:center!important;min-height:40px!important;}
  /* Duration row */
  #tr-mod-modal div[style*="gap:12px"][style*="flex-wrap"]{
    flex-direction:column!important;gap:10px!important;
  }
  /* Language tabs */
  #tr-mod-modal .trm-lang-tab{min-height:40px!important;font-size:13px!important;}
  /* Objective items */
  .trm-obj-list .trm-obj-item{font-size:14px!important;min-height:40px!important;}
  .trm-obj-list>div{gap:6px!important;}
  .trm-obj-list button{min-width:36px!important;min-height:36px!important;font-size:14px!important;}
  /* Footer */
  #tr-mod-modal>div>div:last-child{
    flex-direction:column-reverse!important;gap:6px!important;padding:12px 14px!important;
  }
  #tr-mod-modal>div>div:last-child .btn{width:100%!important;min-height:44px!important;justify-content:center!important;font-size:14px!important;}

  /* ── Training: audience items ── */
  #adm-sec-training div[style*="trUpdateAudName"],
  #adm-sec-training div[style*="trUploadAudSvg"]{
    padding:10px!important;
  }
  #adm-sec-training div[style*="trUpdateAudName"]>div:first-child{
    flex-direction:column!important;gap:8px!important;
  }

  /* ── Training: hero/advantages/cta textareas ── */
  #adm-sec-training textarea{min-height:60px!important;}

  /* ── Training: embed code textarea ── */
  #adm-sec-training textarea[readonly]{font-size:12px!important;min-height:80px!important;}

  /* ── Training: CSS editor ── */
  #tr-css{font-size:12px!important;min-height:200px!important;}

  /* ═══════════════════════════════════════════════════
     REPAIR ADMIN — Mobile (768px)
     ═══════════════════════════════════════════════════ */

  /* ── Repair: Service cards ── */
  #adm-sec-repair div[style*="border-radius:8px"][style*="margin-bottom:8px"]{
    padding:10px 12px!important;
  }
  /* Service top row: icon + inputs + buttons wrap */
  #adm-sec-repair div[style*="border-radius:8px"][style*="margin-bottom:8px"]>div:first-child{
    flex-wrap:wrap!important;gap:6px!important;
  }
  #adm-sec-repair div[style*="border-radius:8px"][style*="margin-bottom:8px"] input[style*="width:110px"]{
    width:80px!important;
  }
  /* Service language rows: name + desc stack */
  #adm-sec-repair div[style*="margin-bottom:4px"] input[style*="flex:1"]{
    min-width:0!important;
  }
  #adm-sec-repair div[style*="margin-bottom:4px"] input[style*="flex:1.5"]{
    flex-basis:100%!important;margin-left:28px;
  }

  /* ── Repair: Hero brand chips ── */
  #adm-sec-repair div[style*="flex-wrap:wrap"][style*="margin-bottom:14px"]{
    gap:4px!important;
  }
  #adm-sec-repair div[style*="flex-wrap:wrap"][style*="margin-bottom:14px"] input[style*="border:none"]{
    font-size:12px!important;
  }
  /* Hero stats rows */
  #adm-sec-repair div[style*="border-radius:6px"][style*="gap:6px"]{
    flex-direction:column!important;gap:4px!important;padding:8px!important;
  }
  #adm-sec-repair div[style*="border-radius:6px"][style*="gap:6px"] input[style*="width:110px"],
  #adm-sec-repair div[style*="border-radius:6px"][style*="gap:6px"] input[style*="width:130px"]{
    width:100%!important;flex:1!important;
  }

  /* ── Repair: Process steps ── */
  #adm-sec-repair div[style*="border-radius:8px"][style*="gap:10px"][style*="flex-start"]{
    flex-direction:column!important;gap:8px!important;
  }
  #adm-sec-repair div[style*="border-radius:8px"][style*="gap:10px"][style*="flex-start"] input[style*="width:35%"]{
    width:100%!important;
  }

  /* ── Repair: Manufacturer list ── */
  #adm-sec-repair input[style*="flex:1"][style*="font-size:12px"]{
    min-width:0!important;
  }
  /* Option rows (guarantee, return, KV, priorities) */
  #adm-sec-repair div[style*="margin-bottom:3px"][style*="flex-wrap"]{
    flex-direction:column!important;gap:4px!important;
  }
  #adm-sec-repair div[style*="margin-bottom:3px"][style*="flex-wrap"] input[style*="min-width:60px"]{
    min-width:0!important;width:100%!important;
  }
  /* Priority color pickers inline with name */
  #adm-sec-repair input[type="color"][style*="width:24px"]{
    width:32px!important;height:32px!important;
  }

  /* ── Repair: Form labels ── */
  #adm-sec-repair div[style*="border-radius:6px"][style*="padding:6px 8px"] div[style*="flex-wrap"]{
    flex-direction:column!important;gap:4px!important;
  }
  #adm-sec-repair div[style*="border-radius:6px"][style*="padding:6px 8px"] code{
    margin-bottom:2px;
  }
  #adm-sec-repair div[style*="border-radius:6px"][style*="padding:6px 8px"] input[style*="min-width:80px"],
  #adm-sec-repair div[style*="border-radius:6px"][style*="padding:6px 8px"] textarea[style*="min-width:120px"]{
    min-width:0!important;width:100%!important;
  }

  /* ── Repair: Email templates ── */
  #adm-sec-repair textarea[style*="font-family:monospace"]{
    font-size:12px!important;min-height:120px!important;
  }

  /* ── Repair: Tickets ── */
  #adm-sec-repair div[style*="border-radius:8px"][style*="padding:10px 14px"][style*="margin-bottom:6px"] div[style*="flex-wrap"]{
    gap:6px!important;
  }
  #adm-sec-repair div[style*="border-radius:8px"][style*="padding:10px 14px"][style*="margin-bottom:6px"] span[style*="flex:1"]{
    flex-basis:100%!important;order:-1;
  }
  #adm-sec-repair div[style*="border-radius:8px"][style*="padding:10px 14px"][style*="margin-bottom:6px"] select{
    min-height:36px!important;font-size:12px!important;
  }

  /* ── Repair: Settings 3-column → stack ── */
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]{
    flex-direction:column!important;gap:12px!important;
  }
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]>div[style*="min-width:250px"],
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]>div[style*="min-width:260px"],
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]>div[style*="min-width:220px"]{
    min-width:0!important;width:100%!important;
  }
  /* SMTP test button full width */
  #adm-sec-repair button[onclick*="repTestSmtp"]{
    width:100%;justify-content:center;min-height:40px!important;
  }

  /* ── Repair: CSS editor ── */
  #rep-css{font-size:12px!important;min-height:200px!important;}

  /* ── Repair: Embed code ── */
  #adm-sec-repair textarea[readonly]{font-size:11px!important;min-height:80px!important;}

  /* ── Repair: all textareas ── */
  #adm-sec-repair textarea{min-height:60px!important;}

  /* ── Repair: Touch targets ── */
  #adm-sec-repair button.btn{min-height:36px!important;}
  #adm-sec-repair select{min-height:36px!important;}
}

/* ── Tablet tweaks ── */
@media(min-width:769px) and (max-width:1024px){
  #tr-mod-modal>div{width:90%!important;max-width:680px!important;}
  #adm-sec-training .panel-body{padding:14px!important;}
  /* Repair: Settings 2-column on tablet */
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]{
    flex-wrap:wrap!important;
  }
  #adm-sec-repair div[style*="gap:14px"][style*="flex-wrap"]>div[style*="min-width"]{
    min-width:45%!important;flex:1 1 45%!important;
  }
}

/* ── Small phone ── */
@media(max-width:400px){
  /* Admin nav: labels MUST stay visible - users need to read what they click.
     Previously icon-only on tiny screens which made the navbar unusable. */
  .admin-nav-item{padding:8px 10px!important;font-size:11px;white-space:nowrap;}
  .admin-nav-item .nav-icon{font-size:14px;margin-right:6px;}

  #adm-sec-training .panel>div[style*="border-bottom"] button,
  #adm-sec-repair .panel>div[style*="border-bottom"] button{
    padding:8px 8px!important;font-size:10px!important;
  }
  #tr-mod-modal .trm-lang-tab{font-size:12px!important;}
  #trm-type-pills button{font-size:11px!important;padding:5px 10px!important;}

  /* Repair: compact everything */
  #adm-sec-repair .panel-body{padding:8px!important;}
  #adm-sec-repair div[style*="border-radius:8px"]{padding:8px 10px!important;}
  #adm-sec-repair .form-row label{font-size:11px!important;}
  /* Repair: Service card icons smaller */
  #adm-sec-repair div[style*="width:36px"][style*="height:36px"]{
    width:28px!important;height:28px!important;font-size:12px!important;
  }
  /* Repair: Process step numbers smaller */
  #adm-sec-repair div[style*="width:28px"][style*="border-radius:50%"]{
    width:24px!important;height:24px!important;font-size:11px!important;
  }
  /* Repair: Ticket ref code */
  #adm-sec-repair code[style*="font-size:11px"]{font-size:10px!important;}
}


/* ═══════════════════════════════════════════════════
   2026 Design Enhancements
   ═══════════════════════════════════════════════════ */

/* Smooth global transitions */
a,button,input,select,textarea,.sitem,.folder-item,.admin-nav-item,.sc-btn{
  transition-timing-function:var(--ease);
}

/* Modern input hover */
.form-row input:hover,.form-row select:hover,.form-row textarea:hover,
.ip-field input:hover,.ip-field select:hover,.ip-field textarea:hover{
  border-color:color-mix(in srgb,var(--blue) 40%,var(--border));
}

/* Admin section entrance */
.admin-section>*{animation:sectionIn var(--dur-md) var(--ease-out);}
@keyframes sectionIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Panel header icon */
.panel-hdr h3 i{color:var(--blue);margin-right:6px;}

/* Modern code styling */
code{font-family:'JetBrains Mono','Fira Code',Consolas,monospace;font-size:.9em;background:rgba(27,117,153,.06);padding:1px 5px;border-radius:4px;color:var(--blue);}

/* Better disabled state */
button:disabled,input:disabled,select:disabled,textarea:disabled{
  opacity:.5;cursor:not-allowed;filter:grayscale(.3);
}

/* Table hover accent */
.hist-table tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--blue);}

/* Nav ripple */
.admin-nav-item{position:relative;overflow:hidden;}
.admin-nav-item::after{content:'';position:absolute;inset:0;background:var(--blue);opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none;}
.admin-nav-item:active::after{opacity:.05;}

/* Smooth scrolling */
.admin-center,.msgs,.info-panel,.sidebar,.history-detail{scroll-behavior:smooth;}

/* Mobile glass nav */
@media(max-width:768px){
  .admin-nav{
    background:color-mix(in srgb,var(--white) 92%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION — iOS/Android-Style Tab Bar
   Only visible < 768px. Above on desktop/tablet.
   ═══════════════════════════════════════════════════════════════ */
.mobile-nav{display:none;}
.mobile-more-drawer{display:none;}

@media(max-width:768px){
  /* Hide top primary nav on mobile; use bottom instead */
  .header-nav{display:none!important;}

  /* Show bottom nav — Sprint 2026-05-03d Apple-Style: stronger blur, smoother
     transitions, slight gradient für depth */
  .mobile-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:1000;
    border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 24px rgba(0,0,0,.10),0 -1px 0 rgba(255,255,255,.5);
    backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
    background:color-mix(in srgb,var(--white) 80%,transparent);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  .mnav-item{
    flex:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;
    padding:6px 4px;
    background:transparent;border:none;
    color:var(--muted);
    font-size:10px;font-weight:600;font-family:inherit;
    cursor:pointer;
    border-radius:10px;
    transition:color .2s;
    min-height:52px;
    position:relative;
    --app-color:var(--blue);
  }
  /* Icon container — ultra-modern flat app-tile.
     Same look for ALL states (active/inactive/hover). No glow, no lift, no opacity change.
     The visual consistency is the point — you recognize apps by their color, not by state. */
  .mnav-tile{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    border-radius:9px;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--app-color) 100%,white 15%) 0%,
      var(--app-color) 55%,
      color-mix(in srgb,var(--app-color) 100%,black 12%) 100%);
    color:#fff;
    font-size:17px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.4),
      inset 0 -1px 0 rgba(0,0,0,.12);
    position:relative;
    overflow:hidden;
  }
  /* Glossy top-half highlight — matches homescreen glass effect */
  .mnav-tile::before{
    content:'';
    position:absolute;left:0;right:0;top:0;height:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 100%);
    pointer-events:none;
    border-radius:9px 9px 0 0;
  }
  .mnav-tile i{
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));
    position:relative;z-index:1;
  }
  .mnav-item i{font-size:17px;}
  /* Active state only affects the label (bold + colored) — the tile stays identical */
  .mnav-item.active{color:var(--app-color);}
  .mnav-item.active .mnav-label{color:var(--app-color);font-weight:700;}
  /* Remove the old blue bar indicator */
  .mnav-item.active::before{display:none;}
  .mnav-label{white-space:nowrap;letter-spacing:.1px;transition:color .2s;}
  .mnav-badge{
    position:absolute;top:4px;right:calc(50% - 18px);
    min-width:16px;height:16px;padding:0 4px;
    background:#ef4444;color:#fff;
    font-size:9px;font-weight:700;
    border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 2px var(--white);
    z-index:3;
  }

  /* Center FAB (Floating Action Button) */
  /* ══════════════════════════════════════════════════════════════════
     Mobile-nav FAB — the "+" button that opens the more-drawer.
     Design goals: modern, round, tactile. No flashy glow. Subtle top-
     highlight reflection to give the surface material quality (like a
     glossy button you could press). Size bumped for easier thumb-target.
     ══════════════════════════════════════════════════════════════════ */
  .mnav-fab{
    /* Slightly bigger — 58px is in the sweet spot for iOS 44pt touch guidelines
       while still fitting the mobile-nav bar height. */
    width:58px;height:58px;
    flex-shrink:0;
    /* Two-stop gradient, lighter at top, darker at bottom. This creates
       the illusion of a light source from above without any glow. */
    background:
      /* Top highlight: curved light reflection, white semi-transparent */
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 46%),
      /* Base body: top-to-bottom gradient for rounded-volume feel */
      linear-gradient(180deg, #2691bf 0%, #1B7599 52%, #0d547a 100%);
    color:#fff;
    border:none;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    margin:-22px 4px 0;  /* slightly more negative-margin so the bigger button sits above the nav */
    /* Depth without glow:
       - inner top-highlight (fake bevel)
       - inner bottom-shadow (catch from rim)
       - outer hard shadow (casts on bar below)
       - outer ring (clean separator from nav bar) */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -2px 3px rgba(0,0,0,.12),
      0 4px 10px rgba(13,84,122,.28),
      0 2px 4px rgba(0,0,0,.08),
      0 0 0 3px var(--white);
    transition:transform .18s var(--ease-bounce), box-shadow .2s ease;
    display:flex;align-items:center;justify-content:center;
    position:relative;z-index:1;
    /* Tiny letter-spacing fix for the icon-font render in centered flex */
    line-height:1;
    /* Prevent any tap highlight flashing on iOS */
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-fab:active{
    transform:scale(0.93);
    /* On press: highlight diminishes slightly, shadow softens to simulate depression */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 -1px 2px rgba(0,0,0,.18),
      0 2px 4px rgba(13,84,122,.25),
      0 1px 2px rgba(0,0,0,.08),
      0 0 0 3px var(--white);
  }
  .mnav-fab i{transition:transform .3s var(--ease-bounce);}
  .mnav-fab.open i{transform:rotate(135deg);}

  /* Theme variants — keep the structure, just swap base-gradient colors */
  [data-theme="pink"] .mnav-fab{
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #d85a9a 0%, #b04080 52%, #7d2a5a 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      inset 0 -2px 3px rgba(0,0,0,.12),
      0 4px 10px rgba(125,42,90,.3),
      0 2px 4px rgba(0,0,0,.08),
      0 0 0 3px var(--white);
  }
  [data-theme="dark"] .mnav-fab{
    background:
      radial-gradient(circle at 50% 18%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #5fb8e8 0%, #4DA8DA 52%, #2877a0 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.3),
      inset 0 -2px 3px rgba(0,0,0,.18),
      0 4px 10px rgba(40,119,160,.4),
      0 2px 4px rgba(0,0,0,.15),
      0 0 0 3px var(--white);
  }

  /* Make room at bottom for nav (52px + safe-area) */
  .app-body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))!important;}
  #mute-indicator{bottom:calc(78px + env(safe-area-inset-bottom,0px));}

  /* Mobile More Drawer (Bottom Sheet) — Sprint 2026-05-03d Apple/Android-Style:
     stronger backdrop blur, larger radius, smoother spring animation, native
     touch-action für Swipe-Down-Close */
  .mobile-more-drawer{display:none;position:fixed;inset:0;z-index:1500;}
  .mobile-more-drawer.open{display:block;}
  .mmd-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);
    backdrop-filter:blur(8px) saturate(140%);-webkit-backdrop-filter:blur(8px) saturate(140%);
    animation:mmdFade .25s ease;}
  @keyframes mmdFade{from{opacity:0;}to{opacity:1;}}
  .mmd-sheet{
    position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(180deg,var(--white,#fff) 0%,color-mix(in srgb,var(--white,#fff) 96%,transparent) 100%);
    border-radius:24px 24px 0 0;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:85vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
    animation:mmdSlide .35s cubic-bezier(.32,.72,.32,1.04);
    box-shadow:0 -16px 48px rgba(0,0,0,.18),0 -1px 0 rgba(255,255,255,.5);
    will-change:transform;
  }
  @keyframes mmdSlide{from{transform:translateY(100%);}to{transform:translateY(0);}}
  /* Grabber-Pill — größer, kontrastreicher, mit Press-Hint (User-Discovery für Swipe-Close) */
  .mmd-grabber{width:48px;height:5px;background:rgba(15,23,42,.18);border-radius:3px;margin:8px auto 14px;
    transition:background .15s ease;cursor:grab;}
  .mmd-grabber:active{cursor:grabbing;background:rgba(15,23,42,.32);}
  .mmd-hdr{display:flex;align-items:center;gap:12px;padding:6px 4px 14px;border-bottom:1px solid var(--border);margin-bottom:12px;}
  .mmd-name{font-size:15px;font-weight:700;color:var(--text);}
  .mmd-role{font-size:11px;color:var(--muted);margin-top:2px;}
  /* Tools grid: standard 2-column layout for navigation shortcuts */
  .mmd-grid{display:block;}
  .mmd-tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .mmd-item{
    display:flex;align-items:center;gap:10px;
    padding:14px 12px;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:12px;
    color:var(--text);
    font-size:13px;font-weight:600;font-family:inherit;
    cursor:pointer;
    transition:all var(--dur);
    text-align:left;
  }
  .mmd-item:active{transform:scale(0.97);background:var(--hover);}
  .mmd-item i{width:22px;text-align:center;font-size:15px;color:var(--blue);}
  .mmd-item.mmd-admin{
    background:linear-gradient(135deg,rgba(232,139,0,.15),rgba(232,139,0,.05));
    border-color:rgba(232,139,0,.4);
  }
  .mmd-item.mmd-admin i{color:#E88B00;}
  .mmd-item.mmd-danger{color:#d32f2f;border-color:rgba(211,47,47,.3);}
  .mmd-item.mmd-danger i{color:#d32f2f;}

  /* ═══════════════════════════════════════════════════════════════
     APP-LAUNCHER GRID (iOS/iPadOS-style home screen tiles)
     ═══════════════════════════════════════════════════════════════
     Renders tools as square tiles with a color-saturated icon box on top and
     the app name below — just like native app icons on a phone home screen.

     Design tokens per tile:
     - Rounded-square icon container (20% border-radius = "superellipse" approximation)
     - Per-app accent color via --app-color (set inline per tile)
     - Subtle gradient inside the icon square (brighter on top, darker on bottom)
     - Soft outer shadow for lift-off
     - Glossy highlight across the top edge (1px inner rgba-white gradient)
     - Label in small text below the tile
     - Press animation: scale down briefly, icon darkens
     - Hover animation: tile lifts slightly, shadow deepens
  */
  .mmd-apps-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px 6px;
    padding:8px 4px 14px;
  }
  .mmd-app{
    display:flex;flex-direction:column;align-items:center;gap:7px;
    padding:0;
    background:transparent;border:none;
    cursor:pointer;
    font-family:inherit;
    outline:none;
    -webkit-tap-highlight-color:transparent;
    transition:transform .18s cubic-bezier(.4,0,.2,1);
  }
  .mmd-app:active{transform:scale(0.92);}
  .mmd-app:active .mmd-app-tile{
    filter:brightness(.85);
    box-shadow:
      0 1px 2px rgba(0,0,0,.12),
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.22);
  }
  .mmd-app-tile{
    position:relative;
    width:58px;height:58px;
    display:flex;align-items:center;justify-content:center;
    border-radius:14px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--app-color) 100%, white 15%) 0%,
        var(--app-color) 55%,
        color-mix(in srgb, var(--app-color) 100%, black 12%) 100%);
    color:#fff;
    font-size:26px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(0,0,0,.12);
    overflow:hidden;
  }
  /* Glossy top-half highlight */
  .mmd-app-tile::before{
    content:'';
    position:absolute;left:0;right:0;top:0;height:50%;
    background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 100%);
    pointer-events:none;
    border-radius:14px 14px 0 0;
  }
  .mmd-app-tile i{
    position:relative;
    z-index:1;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
  }
  .mmd-app-label{
    display:inline-flex;align-items:center;gap:4px;justify-content:center;
    font-size:11px;font-weight:600;
    color:var(--text);
    text-align:center;
    line-height:1.2;
    max-width:100%;
    overflow:hidden;
    word-break:break-word;
    hyphens:auto;
  }
  .mmd-app-label .mmd-shortcut-badge{
    display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
    margin:0;
    pointer-events:none;
  }
  .mmd-app-label .mmd-shortcut-badge i{
    font-size:9px;
    color:#E88B00;
  }
  body.dark-theme .mmd-app-label .mmd-shortcut-badge i,
  body.theme-dark .mmd-app-label .mmd-shortcut-badge i{
    color:#FFC871;
  }

  /* Tiny screens: 3 columns instead of 4 for better readability */
  @media(max-width:360px){
    .mmd-apps-grid{grid-template-columns:repeat(3,1fr);gap:16px 4px;}
  }
  /* Slightly larger phones: 4 cols with breathing room */
  @media(min-width:420px){
    .mmd-apps-grid{gap:16px 10px;}
    .mmd-app-tile{width:62px;height:62px;font-size:28px;}
  }


  .mmd-section{
    margin-top:18px;
    background:linear-gradient(180deg,var(--surface) 0%,var(--hover) 100%);
    border:1px solid var(--border);
    border-radius:16px;
    padding:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.5);
  }
  body.dark-theme .mmd-section,
  body.theme-dark .mmd-section{
    background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.06) 100%);
    box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);
  }
  .mmd-section-hdr{
    display:flex;align-items:center;gap:10px;
    padding:6px 8px 12px;
    opacity:.9;
  }
  .mmd-section-line{
    flex:1;height:1px;
    background:linear-gradient(90deg,transparent 0%,var(--border) 50%,transparent 100%);
  }
  .mmd-section-label{
    font-size:10px;font-weight:700;
    letter-spacing:1.2px;text-transform:uppercase;
    color:var(--muted);
    display:inline-flex;align-items:center;gap:6px;
    white-space:nowrap;
  }
  .mmd-section-label i{font-size:11px;opacity:.7;}
  .mmd-section-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
  }
  /* Danger (Abmelden) spans full width as the final visual break */
  .mmd-section-grid .mmd-sitem.mmd-sitem-danger{grid-column:1/-1;}
  .mmd-sitem{
    display:flex;align-items:center;gap:10px;
    width:100%;
    padding:11px 12px;
    background:transparent;
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text);
    font-size:13px;font-weight:600;font-family:inherit;
    cursor:pointer;
    text-align:left;
    transition:background .18s var(--ease),border-color .18s,transform .1s;
    position:relative;
    min-width:0; /* allow text-overflow inside flex */
  }
  .mmd-sitem:hover{
    background:var(--hover);
    border-color:rgba(27,117,153,.25);
  }
  .mmd-sitem:active{transform:scale(0.98);}
  .mmd-sitem-icon{
    width:32px;height:32px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px;
    background:rgba(27,117,153,.08);
    color:var(--blue);
    font-size:14px;
    transition:background .15s,color .15s;
  }
  .mmd-sitem-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* Chevron shown for special items (verwaltung, admin, danger) to signal depth */
  .mmd-sitem-arrow{display:none;}
  .mmd-sitem.mmd-verwaltung .mmd-sitem-arrow,
  .mmd-sitem.mmd-admin .mmd-sitem-arrow,
  .mmd-sitem.mmd-sitem-danger .mmd-sitem-arrow{
    display:inline-flex;
    font-size:11px;
    opacity:.85;
  }

  /* ══════════════════════════════════════════════════════════════
     VERWALTUNG — solid blue, premium primary-action feel
     ══════════════════════════════════════════════════════════════ */
  .mmd-sitem.mmd-verwaltung{
    background:linear-gradient(135deg,#1B7599 0%,#0d5a7a 100%);
    border-color:#0d5a7a;
    color:#fff;
    box-shadow:0 2px 0 rgba(13,90,122,.25),0 4px 12px rgba(27,117,153,.22);
    padding:13px 14px;
  }
  .mmd-sitem.mmd-verwaltung .mmd-sitem-icon{
    background:rgba(255,255,255,.18);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  }
  .mmd-sitem.mmd-verwaltung .mmd-sitem-label{color:#fff;font-weight:700;}
  .mmd-sitem.mmd-verwaltung .mmd-sitem-arrow{color:rgba(255,255,255,.8);}
  .mmd-sitem.mmd-verwaltung:hover,
  .mmd-sitem.mmd-verwaltung:active{
    background:linear-gradient(135deg,#1e83ab 0%,#0e668a 100%);
    border-color:#0e668a;
    box-shadow:0 2px 0 rgba(13,90,122,.3),0 6px 16px rgba(27,117,153,.32);
  }

  /* ══════════════════════════════════════════════════════════════
     ADMIN — solid orange, high-authority action
     ══════════════════════════════════════════════════════════════ */
  .mmd-sitem.mmd-admin{
    background:linear-gradient(135deg,#E88B00 0%,#c46f00 100%);
    border-color:#c46f00;
    color:#fff;
    box-shadow:0 2px 0 rgba(196,111,0,.25),0 4px 12px rgba(232,139,0,.22);
    padding:13px 14px;
  }
  .mmd-sitem.mmd-admin .mmd-sitem-icon{
    background:rgba(255,255,255,.2);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  }
  .mmd-sitem.mmd-admin .mmd-sitem-label{color:#fff;font-weight:700;}
  .mmd-sitem.mmd-admin .mmd-sitem-arrow{color:rgba(255,255,255,.85);}
  .mmd-sitem.mmd-admin:hover,
  .mmd-sitem.mmd-admin:active{
    background:linear-gradient(135deg,#f59410 0%,#d37800 100%);
    border-color:#d37800;
    box-shadow:0 2px 0 rgba(196,111,0,.3),0 6px 16px rgba(232,139,0,.32);
  }

  /* Dark-theme tweaks so the solid buttons still pop */
  body.dark-theme .mmd-sitem.mmd-verwaltung,
  body.theme-dark .mmd-sitem.mmd-verwaltung{
    box-shadow:0 2px 0 rgba(0,0,0,.4),0 4px 14px rgba(27,117,153,.4);
  }
  body.dark-theme .mmd-sitem.mmd-admin,
  body.theme-dark .mmd-sitem.mmd-admin{
    box-shadow:0 2px 0 rgba(0,0,0,.4),0 4px 14px rgba(232,139,0,.4);
  }

  /* ── Danger/Logout — bordered row like other items, just red-tinted ── */
  .mmd-sitem.mmd-sitem-danger{
    margin-top:8px;
    border-color:rgba(211,47,47,.3);
    background:rgba(211,47,47,.04);
  }
  .mmd-sitem.mmd-sitem-danger .mmd-sitem-icon{
    background:rgba(211,47,47,.1);
    color:#d32f2f;
  }
  .mmd-sitem.mmd-sitem-danger .mmd-sitem-label{color:#d32f2f;}
  .mmd-sitem.mmd-sitem-danger .mmd-sitem-arrow{color:#d32f2f;opacity:.6;}
  .mmd-sitem.mmd-sitem-danger:hover{
    background:rgba(211,47,47,.08);
    border-color:rgba(211,47,47,.5);
  }
  .mmd-sitem.mmd-sitem-danger:hover .mmd-sitem-icon{
    background:#d32f2f;color:#fff;
  }

  body.dark-theme .mmd-sitem-icon,
  body.theme-dark .mmd-sitem-icon{
    background:rgba(107,195,240,.1);
    color:#6BC3F0;
  }
  body.dark-theme .mmd-sitem.mmd-admin .mmd-sitem-icon,
  body.theme-dark .mmd-sitem.mmd-admin .mmd-sitem-icon{color:#FFB432;}

  /* On mobile, hide primary-nav, admin-nav-btn in header (moved to drawer) */
  #nt-admin{display:none!important;}
  /* Hide status-toggle text on smallest screens */
  .status-toggle span{display:none;}
}

@media(max-width:400px){
  .mnav-label{display:none;}
  .mnav-item{padding:10px 4px;}
  .mnav-item i{font-size:20px;}
}

/* ═══════════════════════════════════════════════════════════════
   COMMAND PALETTE (Cmd+K / Ctrl+K)
   ═══════════════════════════════════════════════════════════════ */
.cmdk-overlay{
  display:none;
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:12vh 16px 16px;
  animation:cmdkFade .15s ease-out;
}
.cmdk-overlay.open{display:block;}
@keyframes cmdkFade{from{opacity:0;}to{opacity:1;}}
.cmdk-modal{
  max-width:640px;margin:0 auto;
  background:var(--white);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 24px 48px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.05);
  animation:cmdkPop .2s var(--ease-bounce);
  border:1px solid var(--border);
}
@keyframes cmdkPop{from{transform:translateY(-20px) scale(.97);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.cmdk-search{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.cmdk-search>i{color:var(--muted);font-size:15px;}
.cmdk-search input{
  flex:1;
  border:none;outline:none;background:transparent;
  font-size:15px;font-family:inherit;color:var(--text);
}
.cmdk-search input::placeholder{color:var(--muted);}
.cmdk-esc{
  background:var(--surface);border:1px solid var(--border);
  padding:2px 7px;border-radius:4px;
  font-size:10px;font-weight:600;color:var(--muted);font-family:inherit;
}
.cmdk-results{
  max-height:400px;overflow-y:auto;
  padding:6px;
}
.cmdk-results:empty::after{
  content:attr(data-empty);
  display:block;padding:30px;text-align:center;
  color:var(--muted);font-size:13px;
}
.cmdk-group-title{
  padding:8px 12px 4px;
  font-size:10px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.6px;
}
.cmdk-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:8px;
  cursor:pointer;
  transition:background var(--dur);
}
.cmdk-item:hover,.cmdk-item.selected{background:var(--hover);}
.cmdk-item.selected{
  background:linear-gradient(90deg,rgba(27,117,153,.08),rgba(27,117,153,.03));
  border-left:3px solid var(--blue);
  padding-left:9px;
}
[data-theme="pink"] .cmdk-item.selected{background:linear-gradient(90deg,rgba(176,64,128,.08),rgba(176,64,128,.03));border-left-color:#b04080;}
.cmdk-icon{
  width:30px;height:30px;flex-shrink:0;
  background:var(--surface);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);font-size:13px;
}
[data-theme="pink"] .cmdk-icon{color:#b04080;}
.cmdk-text{flex:1;min-width:0;}
.cmdk-title{font-size:13px;font-weight:600;color:var(--text);}
.cmdk-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.cmdk-shortcut{font-size:10px;color:var(--muted);background:var(--surface);padding:2px 6px;border-radius:4px;font-family:monospace;}
.cmdk-footer{
  display:flex;gap:14px;
  padding:8px 18px;
  background:var(--surface);
  border-top:1px solid var(--border);
  font-size:10px;color:var(--muted);
}
.cmdk-footer kbd{
  background:var(--white);
  border:1px solid var(--border);
  padding:1px 5px;border-radius:3px;
  font-size:10px;font-family:inherit;
  margin-right:3px;
}

/* ═══════════════════════════════════════════════════════════════
   KEYBOARD SHORTCUTS MODAL — triggered from profile menu
   ═══════════════════════════════════════════════════════════════ */
.kbd-shortcuts-overlay{
  position:fixed;inset:0;z-index:10500;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:8vh 16px 16px;
  display:flex;justify-content:center;align-items:flex-start;
  opacity:0;transition:opacity .2s ease;
}
.kbd-shortcuts-overlay.open{opacity:1;}
.kbd-modal{
  width:100%;max-width:560px;
  background:var(--white);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.04);
  border:1px solid var(--border);
  transform:scale(.95);transition:transform .25s var(--ease-bounce);
  max-height:calc(100vh - 100px);display:flex;flex-direction:column;
}
.kbd-shortcuts-overlay.open .kbd-modal{transform:scale(1);}
.kbd-hdr{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;
  background:linear-gradient(135deg,rgba(27,117,153,.08),rgba(27,117,153,.02));
  border-bottom:1px solid var(--border);
}
[data-theme="pink"] .kbd-hdr{background:linear-gradient(135deg,rgba(176,64,128,.1),rgba(176,64,128,.02));}
.kbd-hdr>i{font-size:22px;color:var(--blue);}
[data-theme="pink"] .kbd-hdr>i{color:#b04080;}
.kbd-title{font-size:17px;font-weight:700;color:var(--text);}
.kbd-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.kbd-close{
  width:32px;height:32px;
  border:none;background:transparent;
  color:var(--muted);font-size:22px;line-height:1;
  cursor:pointer;border-radius:8px;
  transition:all var(--dur);
  display:flex;align-items:center;justify-content:center;
}
.kbd-close:hover{background:var(--hover);color:var(--text);}
.kbd-body{
  padding:10px 16px 4px;
  overflow-y:auto;
  flex:1;
}
.kbd-group{margin-bottom:16px;}
.kbd-group-title{
  font-size:10px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px;
  padding:8px 8px 6px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.kbd-rows{display:flex;flex-direction:column;gap:2px;}
.kbd-row{
  display:flex;align-items:center;gap:14px;
  padding:9px 10px;
  border-radius:8px;
  transition:background var(--dur);
}
.kbd-row:hover{background:var(--hover);}
.kbd-desc{flex:1;font-size:13px;color:var(--text);}
.kbd-combo{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.kbd-key{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:26px;
  padding:0 8px;
  background:linear-gradient(180deg,var(--white),var(--surface));
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:5px;
  font-family:'SF Mono','Monaco','Consolas',monospace;
  font-size:11px;font-weight:600;
  color:var(--text);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
}
[data-theme="dark"] .kbd-key{background:linear-gradient(180deg,#2a3545,#1f2a38);}
.kbd-plus{font-size:10px;color:var(--muted);font-weight:600;}
.kbd-footer{
  padding:12px 20px;
  background:var(--surface);
  border-top:1px solid var(--border);
  font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.kbd-footer>i{color:var(--blue);}
[data-theme="pink"] .kbd-footer>i{color:#b04080;}
.kbd-footer .kbd-key{min-width:22px;height:22px;padding:0 5px;font-size:10px;}

/* Responsive */
@media(max-width:480px){
  .kbd-shortcuts-overlay{padding:4vh 8px 8px;}
  .kbd-hdr{padding:14px 16px;}
  .kbd-body{padding:8px 10px;}
  .kbd-row{padding:10px 6px;gap:8px;}
  .kbd-desc{font-size:12px;}
}
/* Zoom-safe */
body[data-zoom="1.75"] .kbd-modal,body.fs-175 .kbd-modal,
body[data-zoom="2"] .kbd-modal,body.fs-200 .kbd-modal{max-width:calc(100vw - 32px);max-height:calc(100vh - 40px);}

/* ═══════════════════════════════════════════════════════════════
   PAGE TRANSITIONS — Subtle fade + stagger for view switches
   ═══════════════════════════════════════════════════════════════ */
.app-body{animation:viewFadeIn .25s var(--ease-out);}
@keyframes viewFadeIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
/* Staggered reveal for list items */
.stagger-item{animation:staggerUp .35s var(--ease-out) both;}
@keyframes staggerUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}
.stagger-item:nth-child(1){animation-delay:.03s;}
.stagger-item:nth-child(2){animation-delay:.06s;}
.stagger-item:nth-child(3){animation-delay:.09s;}
.stagger-item:nth-child(4){animation-delay:.12s;}
.stagger-item:nth-child(5){animation-delay:.15s;}
.stagger-item:nth-child(6){animation-delay:.18s;}
.stagger-item:nth-child(7){animation-delay:.21s;}
.stagger-item:nth-child(8){animation-delay:.24s;}
.stagger-item:nth-child(n+9){animation-delay:.27s;}

/* ═══════════════════════════════════════════════════════════════
   SAFE-AREA SUPPORT for notched devices (iPhone X+, Android gesture nav)
   ═══════════════════════════════════════════════════════════════ */
@supports(padding:max(0px)){
  .app-header{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  @media(max-width:768px){
    .app-header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
  }
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED-MOTION support (accessibility)
   ═══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .app-header::after{animation:none;}
  #mute-indicator{animation:none;opacity:1;}
}

/* ═══════════════════════════════════════════════════════════════
   TOUCH-OPTIMIZED TAP TARGETS (WCAG 2.1)
   ═══════════════════════════════════════════════════════════════ */
@media(pointer:coarse){
  .btn-sm,button{min-height:36px;}
  .nav-tab,.admin-nav-btn,.mnav-item,.prefs-btn{min-height:44px;}
}

/* ═══════════════════════════════════════════════════════════════
   ZOOM ADAPTATION LAYER — progressive layout changes for font scaling
   Prinzip: höherer Zoom = weniger Pixel effektiv verfügbar,
   → Layouts werden kompakter / stapeln sich / werden responsiv
   Alle Feature-Seiten bleiben 100% funktional und sichtbar.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 125%: Leichte Kompression ─── */
body[data-zoom="1.25"],body.fs-125{}
body[data-zoom="1.25"] .sidebar,body.fs-125 .sidebar{width:240px;}
body[data-zoom="1.25"] .info-panel,body.fs-125 .info-panel{width:270px;}
body[data-zoom="1.25"] .admin-nav,body.fs-125 .admin-nav{width:200px;}
body[data-zoom="1.25"] .folder-sidebar,body.fs-125 .folder-sidebar{width:160px;}

/* ─── 150%: Tablet-Mode — Sidebars schmaler, Info-Panel wird toggle-bar ─── */
body[data-zoom="1.5"] .sidebar,body.fs-150 .sidebar{width:210px;}
body[data-zoom="1.5"] .info-panel,body.fs-150 .info-panel{width:240px;min-width:180px;}
body[data-zoom="1.5"] .admin-nav,body.fs-150 .admin-nav{width:180px;}
body[data-zoom="1.5"] .folder-sidebar,body.fs-150 .folder-sidebar{width:140px;}
/* Compact sidebar header padding */
body[data-zoom="1.5"] .sidebar-hdr,body.fs-150 .sidebar-hdr,
body[data-zoom="1.75"] .sidebar-hdr,body.fs-175 .sidebar-hdr,
body[data-zoom="2"] .sidebar-hdr,body.fs-200 .sidebar-hdr{padding:8px 10px;}
body[data-zoom="1.5"] .admin-nav-item,body.fs-150 .admin-nav-item,
body[data-zoom="1.75"] .admin-nav-item,body.fs-175 .admin-nav-item,
body[data-zoom="2"] .admin-nav-item,body.fs-200 .admin-nav-item{padding:8px 10px;gap:6px;}

/* ─── 175%: Mobile-like — Info-Panel versteckt, Grid single-column ─── */
body[data-zoom="1.75"] .sidebar,body.fs-175 .sidebar{width:180px;}
body[data-zoom="1.75"] .info-panel,body.fs-175 .info-panel{display:none!important;}
body[data-zoom="1.75"] .admin-nav,body.fs-175 .admin-nav{width:150px;}
body[data-zoom="1.75"] .folder-sidebar,body.fs-175 .folder-sidebar{width:120px;font-size:11px;}
body[data-zoom="1.75"] .resize-handle,body.fs-175 .resize-handle{display:none!important;}
/* Dashboard panels stack */
body[data-zoom="1.75"] .perf-grid,body.fs-175 .perf-grid{grid-template-columns:1fr!important;}
body[data-zoom="1.75"] .perf-cards,body.fs-175 .perf-cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))!important;}
body[data-zoom="1.75"] .info-grid,body.fs-175 .info-grid{grid-template-columns:1fr!important;}
/* Shorter chat input area */
body[data-zoom="1.75"] .shortcuts-bar,body.fs-175 .shortcuts-bar{max-height:80px;overflow-y:auto;}

/* ─── 200%: Vollmobile-Simulation — Sidebar zu Icon-Leiste ─── */
body[data-zoom="2"] .sidebar,body.fs-200 .sidebar{
  width:64px;
  transition:width .25s var(--ease);
}
body[data-zoom="2"] .sidebar:hover,body.fs-200 .sidebar:hover{width:240px;}
body[data-zoom="2"] .sidebar .si-name,body.fs-200 .sidebar .si-name,
body[data-zoom="2"] .sidebar .si-meta,body.fs-200 .sidebar .si-meta{opacity:0;transition:opacity .2s;white-space:nowrap;overflow:hidden;}
body[data-zoom="2"] .sidebar:hover .si-name,body.fs-200 .sidebar:hover .si-name,
body[data-zoom="2"] .sidebar:hover .si-meta,body.fs-200 .sidebar:hover .si-meta{opacity:1;}
body[data-zoom="2"] .sidebar-hdr h3,body.fs-200 .sidebar-hdr h3{display:none;}
body[data-zoom="2"] .sidebar:hover .sidebar-hdr h3,body.fs-200 .sidebar:hover .sidebar-hdr h3{display:block;}
body[data-zoom="2"] .info-panel,body.fs-200 .info-panel{display:none!important;}
body[data-zoom="2"] .admin-nav,body.fs-200 .admin-nav{
  width:56px;
  transition:width .25s var(--ease);
}
body[data-zoom="2"] .admin-nav:hover,body.fs-200 .admin-nav:hover{width:220px;z-index:50;position:relative;box-shadow:4px 0 16px rgba(0,0,0,.15);}
body[data-zoom="2"] .admin-nav h4,body.fs-200 .admin-nav h4{opacity:0;white-space:nowrap;}
body[data-zoom="2"] .admin-nav:hover h4,body.fs-200 .admin-nav:hover h4{opacity:1;}
body[data-zoom="2"] .admin-nav-item span,body.fs-200 .admin-nav-item span{opacity:0;white-space:nowrap;transition:opacity .2s;}
body[data-zoom="2"] .admin-nav:hover .admin-nav-item span,body.fs-200 .admin-nav:hover .admin-nav-item span{opacity:1;}
body[data-zoom="2"] .folder-sidebar,body.fs-200 .folder-sidebar{display:none!important;}
body[data-zoom="2"] .resize-handle,body.fs-200 .resize-handle{display:none!important;}
/* Grids single-column at 200% */
body[data-zoom="2"] .perf-grid,body.fs-200 .perf-grid,
body[data-zoom="2"] .perf-cards,body.fs-200 .perf-cards,
body[data-zoom="2"] .info-grid,body.fs-200 .info-grid,
body[data-zoom="2"] .notes-grid,body.fs-200 .notes-grid{grid-template-columns:1fr!important;}
body[data-zoom="2"] .sr-cards,body.fs-200 .sr-cards{grid-template-columns:1fr!important;}
/* Modals stay within viewport */
body[data-zoom="2"] .modal,body.fs-200 .modal,
body[data-zoom="1.75"] .modal,body.fs-175 .modal{max-width:calc(100vw - 40px)!important;max-height:calc(100vh - 40px)!important;}
body[data-zoom="2"] .unsaved-modal,body.fs-200 .unsaved-modal,
body[data-zoom="1.75"] .unsaved-modal,body.fs-175 .unsaved-modal{max-width:calc(100vw - 40px)!important;max-height:calc(100vh - 40px)!important;overflow-y:auto;}
/* Dropdowns always fit viewport */
body[data-zoom="1.75"] .dd-menu,body.fs-175 .dd-menu,
body[data-zoom="2"] .dd-menu,body.fs-200 .dd-menu{
  /* At 200% zoom: keep menu anchored to RIGHT edge (where the button is), just shrink width to fit */
  right:8px;
  left:auto; /* Explicitly release left pinning */
  min-width:240px;
  max-width:calc(100vw - 16px);
}

/* Modal-backdrop position corrections (fixed elements + zoom = viewport-relative) */
body[data-zoom="1.5"] .modal-backdrop,body.fs-150 .modal-backdrop,
body[data-zoom="1.75"] .modal-backdrop,body.fs-175 .modal-backdrop,
body[data-zoom="2"] .modal-backdrop,body.fs-200 .modal-backdrop{padding:16px;align-items:flex-start;padding-top:5vh;}

/* Horizontal scroll safety net for tables + code blocks */
body[data-zoom="1.5"] .info-table,body.fs-150 .info-table,
body[data-zoom="1.75"] .info-table,body.fs-175 .info-table,
body[data-zoom="2"] .info-table,body.fs-200 .info-table{font-size:inherit;}
body[data-zoom="1.5"] table,body.fs-150 table,
body[data-zoom="1.75"] table,body.fs-175 table,
body[data-zoom="2"] table,body.fs-200 table{max-width:100%;}

/* Ensure chat area flexes properly when sidebars shrink */
body[data-zoom="1.5"] .chat-area,body.fs-150 .chat-area,
body[data-zoom="1.75"] .chat-area,body.fs-175 .chat-area,
body[data-zoom="2"] .chat-area,body.fs-200 .chat-area{min-width:0;}

/* Products/FAQ tables: horizontal scroll wrapper at higher zooms */
body[data-zoom="1.5"] .admin-section,body.fs-150 .admin-section,
body[data-zoom="1.75"] .admin-section,body.fs-175 .admin-section,
body[data-zoom="2"] .admin-section,body.fs-200 .admin-section{max-width:100%;overflow-x:auto;}

/* Panel-body: allow horizontal scroll for wide content */
body[data-zoom="1.75"] .panel-body,body.fs-175 .panel-body,
body[data-zoom="2"] .panel-body,body.fs-200 .panel-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* Forms: input grids go single-column at higher zoom */
body[data-zoom="1.75"] .form-grid,body.fs-175 .form-grid,
body[data-zoom="2"] .form-grid,body.fs-200 .form-grid{grid-template-columns:1fr!important;}

/* Stats charts: reduce to single column at 175%+ */
body[data-zoom="1.75"] .stats-grid,body.fs-175 .stats-grid,
body[data-zoom="2"] .stats-grid,body.fs-200 .stats-grid{grid-template-columns:1fr!important;}

/* Shortcuts/Products/FAQ editor modals: ensure they fit */
body[data-zoom="1.5"] .um-body,body.fs-150 .um-body,
body[data-zoom="1.75"] .um-body,body.fs-175 .um-body,
body[data-zoom="2"] .um-body,body.fs-200 .um-body{max-height:55vh;overflow-y:auto;}

/* Mute-indicator + toast: scale reasonably */
body[data-zoom="1.75"] #mute-indicator,body.fs-175 #mute-indicator,
body[data-zoom="2"] #mute-indicator,body.fs-200 #mute-indicator{width:40px;height:40px;font-size:16px;}
body[data-zoom="1.75"] .sd-toast,body.fs-175 .sd-toast,
body[data-zoom="2"] .sd-toast,body.fs-200 .sd-toast{max-width:calc(100vw - 40px);}

/* Prevent horizontal page scroll on the outer shell — zoom compensation */
html{overflow-x:auto;}
/* min-width:fit-content nur wenn Zoom aktiv ist — sonst pumpt jedes wide
   Sub-Element (z.B. Calendar-Grid 560px) den Body auf und schiebt Mobile-
   Header (Reload-Button etc.) aus dem 414px-Viewport. */
body[data-zoom="1.25"],body.fs-125,
body[data-zoom="1.5"],body.fs-150,
body[data-zoom="1.75"],body.fs-175,
body[data-zoom="2"],body.fs-200{min-width:fit-content;}

/* Assure all views can scroll their content when overflow happens */
body[data-zoom="1.5"] .app-body,body.fs-150 .app-body,
body[data-zoom="1.75"] .app-body,body.fs-175 .app-body,
body[data-zoom="2"] .app-body,body.fs-200 .app-body{overflow:auto;}

/* At 175%+ zoom: JS observer will detect overflow and auto-wrap — no hard rules here */
body[data-zoom="1.75"] .app-header,body.fs-175 .app-header,
body[data-zoom="2"] .app-header,body.fs-200 .app-header{padding:6px 12px;}


/* ─── Zoom 175%+: Info-Panel wird zu Toggle-Overlay (wie Mobile) ─── */
body[data-zoom="1.75"] .mobile-ci-btn,body.fs-175 .mobile-ci-btn,
body[data-zoom="2"] .mobile-ci-btn,body.fs-200 .mobile-ci-btn{display:inline-flex!important;}
body[data-zoom="1.75"] .info-panel.mobile-show,body.fs-175 .info-panel.mobile-show,
body[data-zoom="2"] .info-panel.mobile-show,body.fs-200 .info-panel.mobile-show{
  display:flex!important;
  position:fixed;top:52px;right:0;bottom:0;
  width:400px;max-width:85vw;
  z-index:9999;
  border-left:1px solid var(--border);
  box-shadow:-8px 0 24px rgba(0,0,0,.15);
  animation:infoSlide .25s var(--ease-out);
}
@keyframes infoSlide{from{transform:translateX(100%);}to{transform:translateX(0);}}
body[data-zoom="1.75"] .info-panel.mobile-show .mobile-ci-close,body.fs-175 .info-panel.mobile-show .mobile-ci-close,
body[data-zoom="2"] .info-panel.mobile-show .mobile-ci-close,body.fs-200 .info-panel.mobile-show .mobile-ci-close{display:block;}

/* ─── Zoom 200%: Admin-Nav volle Mobile-Simulation ─── */
body[data-zoom="2"] .admin-nav-item .nav-icon,body.fs-200 .admin-nav-item .nav-icon{margin:0 auto;}

/* ─── Status Pill: bei Zoom 175%+ nur Icon ─── */
body[data-zoom="1.75"] .status-toggle span,body.fs-175 .status-toggle span,
body[data-zoom="2"] .status-toggle span,body.fs-200 .status-toggle span{display:none;}

/* ─── Chat-Area Grids: adaptiv ─── */
body[data-zoom="1.75"] .msg,body.fs-175 .msg,
body[data-zoom="2"] .msg,body.fs-200 .msg{max-width:90%;}

/* ─── Performance Header bei hohem Zoom: Elemente stacken ─── */
body[data-zoom="1.5"] .perf-hdr,body.fs-150 .perf-hdr,
body[data-zoom="1.75"] .perf-hdr,body.fs-175 .perf-hdr,
body[data-zoom="2"] .perf-hdr,body.fs-200 .perf-hdr{flex-direction:column;align-items:flex-start;gap:12px;}
body[data-zoom="1.5"] .perf-hdr-actions,body.fs-150 .perf-hdr-actions,
body[data-zoom="1.75"] .perf-hdr-actions,body.fs-175 .perf-hdr-actions,
body[data-zoom="2"] .perf-hdr-actions,body.fs-200 .perf-hdr-actions{margin-left:0;}


/* ─── Cmd+K Palette: bei Zoom höher kein top-padding, sondern centered ─── */
body[data-zoom="1.75"] .cmdk-overlay,body.fs-175 .cmdk-overlay,
body[data-zoom="2"] .cmdk-overlay,body.fs-200 .cmdk-overlay{padding:20px 12px 12px;}
body[data-zoom="1.75"] .cmdk-modal,body.fs-175 .cmdk-modal,
body[data-zoom="2"] .cmdk-modal,body.fs-200 .cmdk-modal{max-width:calc(100vw - 24px);}
body[data-zoom="1.75"] .cmdk-results,body.fs-175 .cmdk-results,
body[data-zoom="2"] .cmdk-results,body.fs-200 .cmdk-results{max-height:60vh;}

/* ─── Mobile More Drawer: bei hohem Zoom sicher fit ─── */
body[data-zoom="1.75"] .mmd-grid,body.fs-175 .mmd-grid,
body[data-zoom="2"] .mmd-grid,body.fs-200 .mmd-grid{grid-template-columns:1fr;}

/* ─── Safety: alle generischen overflows nicht clippen ─── */
body[data-zoom="1.75"] #view-chat,body.fs-175 #view-chat,
body[data-zoom="2"] #view-chat,body.fs-200 #view-chat{min-width:0;}

/* ─── Container-width sanity für Task/Performance/Contact-Views ─── */
body[data-zoom="1.75"] #view-tasks>div,body.fs-175 #view-tasks>div,
body[data-zoom="2"] #view-tasks>div,body.fs-200 #view-tasks>div,
body[data-zoom="1.75"] #view-performance>div,body.fs-175 #view-performance>div,
body[data-zoom="2"] #view-performance>div,body.fs-200 #view-performance>div{max-width:100%!important;}


/* ─── View-Container Padding bei hohem Zoom reduzieren ─── */
body[data-zoom="1.75"] #view-logbook,body.fs-175 #view-logbook,
body[data-zoom="2"] #view-logbook,body.fs-200 #view-logbook,
body[data-zoom="1.75"] #view-timetrack,body.fs-175 #view-timetrack,
body[data-zoom="2"] #view-timetrack,body.fs-200 #view-timetrack,
body[data-zoom="1.75"] #view-calendar,body.fs-175 #view-calendar,
body[data-zoom="2"] #view-calendar,body.fs-200 #view-calendar,
body[data-zoom="1.75"] #view-reports,body.fs-175 #view-reports,
body[data-zoom="2"] #view-reports,body.fs-200 #view-reports,
body[data-zoom="1.75"] #view-repairbuddy,body.fs-175 #view-repairbuddy,
body[data-zoom="2"] #view-repairbuddy,body.fs-200 #view-repairbuddy,
body[data-zoom="1.75"] #view-profile,body.fs-175 #view-profile,
body[data-zoom="2"] #view-profile,body.fs-200 #view-profile{padding:12px!important;}

body[data-zoom="1.5"] #view-tasks,body.fs-150 #view-tasks,
body[data-zoom="1.75"] #view-tasks,body.fs-175 #view-tasks,
body[data-zoom="2"] #view-tasks,body.fs-200 #view-tasks,
body[data-zoom="1.5"] #view-performance,body.fs-150 #view-performance,
body[data-zoom="1.75"] #view-performance,body.fs-175 #view-performance,
body[data-zoom="2"] #view-performance,body.fs-200 #view-performance{padding:10px 12px!important;}

/* ─── Profile-View Tabellen/Grids bei hohem Zoom single column ─── */
body[data-zoom="1.75"] #view-profile .profile-grid,body.fs-175 #view-profile .profile-grid,
body[data-zoom="2"] #view-profile .profile-grid,body.fs-200 #view-profile .profile-grid{grid-template-columns:1fr!important;}

/* ─── History-View sidebar schmaler ─── */
body[data-zoom="1.75"] .history-view .sidebar,body.fs-175 .history-view .sidebar,
body[data-zoom="2"] .history-view .sidebar,body.fs-200 .history-view .sidebar{width:180px;}

/* ─── Shortcuts-bar: hover/collapse bei hohem Zoom ─── */
body[data-zoom="1.75"] .shortcuts-bar,body.fs-175 .shortcuts-bar,
body[data-zoom="2"] .shortcuts-bar,body.fs-200 .shortcuts-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
body[data-zoom="1.75"] .shortcuts-bar::-webkit-scrollbar,body.fs-175 .shortcuts-bar::-webkit-scrollbar,
body[data-zoom="2"] .shortcuts-bar::-webkit-scrollbar,body.fs-200 .shortcuts-bar::-webkit-scrollbar{display:none;}
body[data-zoom="1.75"] .sc-btn,body.fs-175 .sc-btn,
body[data-zoom="2"] .sc-btn,body.fs-200 .sc-btn{flex-shrink:0;white-space:nowrap;}


/* ═══════════════════════════════════════════════════════════════
   BULK OPERATIONS — Task selection + action bar
   ═══════════════════════════════════════════════════════════════ */
.task-card-selected{
  outline:2px solid var(--blue);outline-offset:2px;
  background:color-mix(in srgb,var(--blue) 6%,var(--white));
}
[data-theme="pink"] .task-card-selected{outline-color:#b04080;background:color-mix(in srgb,#b04080 6%,var(--white));}
.task-bulk-check{
  width:16px;height:16px;accent-color:var(--blue);flex-shrink:0;
}
[data-theme="pink"] .task-bulk-check{accent-color:#b04080;}
.task-bulk-bar select option{background:var(--white);color:var(--text);}
.task-bulk-bar button:hover{background:rgba(255,255,255,.3)!important;}

/* ═══════════════════════════════════════════════════════════════
   HEADER-ROBUSTNESS — verhindert Überlauf bei Zoom/langen Inhalten
   Jede Header-Leiste wird flex-wrap-fähig, Inner-Text schrumpft
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar-Header (Chat-Liste, mit Refresh+Popout-Buttons) */
.sidebar-hdr{flex-wrap:wrap;gap:6px;min-height:42px;}
.sidebar-hdr>h3{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-hdr>div{flex-shrink:0;display:flex;gap:4px;flex-wrap:wrap;}
.sidebar-hdr .btn{flex-shrink:0;}

/* Chat-Header (Kunde-Name + Actions-Buttons rechts) */
.chat-hdr{flex-wrap:wrap;min-height:48px;row-gap:6px;}
.ch-info{flex:1 1 auto;min-width:0;}
.ch-info h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ch-actions{flex-wrap:wrap;flex-shrink:0;}
.ch-actions>button,.ch-actions>.btn{flex-shrink:0;}

/* Info-Panel-Header (Kundeninfo, rechts) */
.ip-hdr{flex-wrap:wrap;gap:6px;min-height:38px;}
.ip-hdr>*:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;}

/* Admin Panel-Header (mit Speichern-Button) */
.panel-hdr{flex-wrap:wrap;row-gap:8px;}
.panel-hdr>h3{flex:1 1 auto;min-width:0;}
.panel-hdr>.btn,.panel-hdr>button{flex-shrink:0;}
.panel-hdr>span{flex-shrink:0;}

/* Alle Buttons shrink-fest (verhindert dass Text wegradiert wird) */
.btn-sm{flex-shrink:0;white-space:nowrap;}

/* History-View Header */
.history-detail h3{overflow:hidden;text-overflow:ellipsis;}

/* Performance & Stats Headers */
.perf-hdr,.stats-hdr{flex-wrap:wrap;row-gap:8px;}
.perf-hdr h2,.stats-hdr h2{flex:1 1 auto;min-width:0;}

/* ═══════════════════════════════════════════════════════════════
   ZOOM-ADAPTIVE BUTTON SIZES
   Bei hohem Zoom: Buttons werden kompakter damit sie noch passen
   ═══════════════════════════════════════════════════════════════ */
body[data-zoom="1.5"] .sidebar-hdr .btn-sm,body.fs-150 .sidebar-hdr .btn-sm,
body[data-zoom="1.75"] .sidebar-hdr .btn-sm,body.fs-175 .sidebar-hdr .btn-sm,
body[data-zoom="2"] .sidebar-hdr .btn-sm,body.fs-200 .sidebar-hdr .btn-sm,
body[data-zoom="1.5"] .ch-actions .btn-sm,body.fs-150 .ch-actions .btn-sm,
body[data-zoom="1.75"] .ch-actions .btn-sm,body.fs-175 .ch-actions .btn-sm,
body[data-zoom="2"] .ch-actions .btn-sm,body.fs-200 .ch-actions .btn-sm,
body[data-zoom="1.5"] .ip-hdr .btn-sm,body.fs-150 .ip-hdr .btn-sm,
body[data-zoom="1.75"] .ip-hdr .btn-sm,body.fs-175 .ip-hdr .btn-sm,
body[data-zoom="2"] .ip-hdr .btn-sm,body.fs-200 .ip-hdr .btn-sm{
  padding:4px 6px!important;
  font-size:11px!important;
}

/* ─── Bei Zoom 175%+: Button-Gruppen komplett stacken wenn Platz fehlt ─── */
body[data-zoom="1.75"] .sidebar-hdr,body.fs-175 .sidebar-hdr,
body[data-zoom="2"] .sidebar-hdr,body.fs-200 .sidebar-hdr{flex-direction:column;align-items:stretch;gap:6px;}
body[data-zoom="1.75"] .sidebar-hdr>div,body.fs-175 .sidebar-hdr>div,
body[data-zoom="2"] .sidebar-hdr>div,body.fs-200 .sidebar-hdr>div{justify-content:flex-end;}

/* ─── Chat-Hdr: Info oben, Actions unten bei hohem Zoom ─── */
body[data-zoom="1.75"] .chat-hdr,body.fs-175 .chat-hdr,
body[data-zoom="2"] .chat-hdr,body.fs-200 .chat-hdr{flex-direction:column;align-items:stretch;}
body[data-zoom="1.75"] .ch-actions,body.fs-175 .ch-actions,
body[data-zoom="2"] .ch-actions,body.fs-200 .ch-actions{margin-left:0;justify-content:flex-end;}

/* ─── Panel-Hdr Actions stacken bei Zoom ─── */
body[data-zoom="1.75"] .panel-hdr,body.fs-175 .panel-hdr,
body[data-zoom="2"] .panel-hdr,body.fs-200 .panel-hdr{flex-direction:column;align-items:stretch;}
body[data-zoom="1.75"] .panel-hdr>h3,body.fs-175 .panel-hdr>h3,
body[data-zoom="2"] .panel-hdr>h3,body.fs-200 .panel-hdr>h3{margin-bottom:4px;}
body[data-zoom="1.75"] .panel-hdr>button,body.fs-175 .panel-hdr>button,
body[data-zoom="1.75"] .panel-hdr>.btn,body.fs-175 .panel-hdr>.btn,
body[data-zoom="2"] .panel-hdr>button,body.fs-200 .panel-hdr>button,
body[data-zoom="2"] .panel-hdr>.btn,body.fs-200 .panel-hdr>.btn{align-self:flex-end;}

/* ═══════════════════════════════════════════════════════════════
   ADMIN-NAV-ITEM Robustheit
   ═══════════════════════════════════════════════════════════════ */
.admin-nav-item{overflow:hidden;}
.admin-nav-item span:not(.nav-icon){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

/* ═══════════════════════════════════════════════════════════════
   FORM-ELEMENTE Robustheit
   ═══════════════════════════════════════════════════════════════ */
/* Verhindert Input-Überlauf in Panels */
.ip-field input,.ip-field select,.ip-field textarea{max-width:100%;min-width:0;}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="search"],input[type="tel"],input[type="url"],input[type="date"],input[type="time"],input[type="datetime-local"],select,textarea{max-width:100%;box-sizing:border-box;}

/* ═══════════════════════════════════════════════════════════════
   GENERIC OVERFLOW PROTECTION — letzte Verteidigungslinie
   ═══════════════════════════════════════════════════════════════ */
/* Lange Strings (URLs, E-Mails) brechen falls nötig */
.ip-field .ip-row,
.panel-body,
.admin-section{word-wrap:break-word;overflow-wrap:break-word;}

/* Tabellen scrollen horizontal statt zu überlaufen */
table{max-width:100%;}
.panel-body table{display:block;overflow-x:auto;white-space:nowrap;}
.panel-body table thead,.panel-body table tbody{display:table;width:100%;}

/* Bilder nie über Parent hinaus */
img:not(.ha-avatar):not(.ua){max-width:100%;height:auto;}

/* ═══════════════════════════════════════════════════════════════
   DESIGN-POLISH — finaler Schliff
   ═══════════════════════════════════════════════════════════════ */

/* Smooth Scrollbars überall */
.sidebar,.info-panel,.admin-nav,.admin-center,.panel-body,.msgs,
.history-detail,.task-list,.notes-grid{
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.sidebar::-webkit-scrollbar,.info-panel::-webkit-scrollbar,
.admin-nav::-webkit-scrollbar,.admin-center::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,.msgs::-webkit-scrollbar,
.history-detail::-webkit-scrollbar{width:6px;height:6px;}
.sidebar::-webkit-scrollbar-track,.info-panel::-webkit-scrollbar-track,
.admin-nav::-webkit-scrollbar-track,.admin-center::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,.msgs::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb,.info-panel::-webkit-scrollbar-thumb,
.admin-nav::-webkit-scrollbar-thumb,.admin-center::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,.msgs::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:3px;
}
.sidebar::-webkit-scrollbar-thumb:hover,.info-panel::-webkit-scrollbar-thumb:hover,
.msgs::-webkit-scrollbar-thumb:hover{background:var(--muted);}

/* Panels haben subtile Depth */
.panel{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
  transition:box-shadow var(--dur) var(--ease);
}
.panel:hover{box-shadow:0 4px 12px rgba(0,0,0,.05);}

/* Form-Inputs haben einheitliche Focus-States */
input:focus,select:focus,textarea:focus{outline:none;}

/* Admin-Section Abstände sauber */
.admin-section{margin-bottom:18px;}
.admin-section:last-child{margin-bottom:0;}

/* Info-Field smoother */
.ip-field input,.ip-field select,.ip-field textarea{
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

/* Buttons: bessere Focus-States für Keyboard-Nav */
button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
[data-theme="pink"] button:focus-visible,[data-theme="pink"] .btn:focus-visible{outline-color:#b04080;}

/* Admin-Nav Item: bessere Hover-States */
.admin-nav-item{transition:background var(--dur),color var(--dur),padding var(--dur);}
.admin-nav-item:hover{background:var(--hover);}
.admin-nav-item.sel{font-weight:700;}

/* Consistent pill-like small buttons in headers */
.sidebar-hdr button.btn-sm,.ch-actions button.btn-sm,.ip-hdr button.btn-sm,
.sidebar-hdr .btn-sm,.ch-actions .btn-sm,.ip-hdr .btn-sm{
  border-radius:8px;
  transition:all var(--dur) var(--ease);
}
.sidebar-hdr button.btn-sm:hover,.ch-actions button.btn-sm:hover,.ip-hdr button.btn-sm:hover,
.sidebar-hdr .btn-sm:hover,.ch-actions .btn-sm:hover,.ip-hdr .btn-sm:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}


/* Format-Bar: wrap wenn Platz zu knapp */
.fmt-bar{flex-wrap:wrap;row-gap:4px;}
.fmt-bar button{flex-shrink:0;min-width:28px;min-height:28px;}
.fmt-bar>.smart-reply-trigger{margin-left:auto!important;flex-shrink:0;}
body[data-zoom="1.5"] .fmt-bar,body.fs-150 .fmt-bar,
body[data-zoom="1.75"] .fmt-bar,body.fs-175 .fmt-bar,
body[data-zoom="2"] .fmt-bar,body.fs-200 .fmt-bar{padding:6px 10px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
body[data-zoom="1.5"] .fmt-bar::-webkit-scrollbar,body.fs-150 .fmt-bar::-webkit-scrollbar,
body[data-zoom="1.75"] .fmt-bar::-webkit-scrollbar,body.fs-175 .fmt-bar::-webkit-scrollbar,
body[data-zoom="2"] .fmt-bar::-webkit-scrollbar,body.fs-200 .fmt-bar::-webkit-scrollbar{display:none;}
/* Smart-Reply Button bleibt rechts auch bei scroll */
body[data-zoom="1.5"] .fmt-bar .smart-reply-trigger,body.fs-150 .fmt-bar .smart-reply-trigger,
body[data-zoom="1.75"] .fmt-bar .smart-reply-trigger,body.fs-175 .fmt-bar .smart-reply-trigger,
body[data-zoom="2"] .fmt-bar .smart-reply-trigger,body.fs-200 .fmt-bar .smart-reply-trigger{position:sticky;right:0;margin-left:auto;}

/* ═══════════════════════════════════════════════════════════════
   FILTER-BAR Robustheit (Audit-Log, History, Products, etc.)
   ═══════════════════════════════════════════════════════════════ */
.audit-filters,.task-filter,.history-filters{flex-wrap:wrap;}
body[data-zoom="1.75"] .audit-filters,body.fs-175 .audit-filters,
body[data-zoom="2"] .audit-filters,body.fs-200 .audit-filters{grid-template-columns:1fr!important;}
body[data-zoom="1.5"] .audit-filters,body.fs-150 .audit-filters{grid-template-columns:1fr 1fr!important;}

/* Task-Filter Bar */
.task-filter{gap:6px;flex-wrap:wrap;}
.task-filter button{flex-shrink:0;white-space:nowrap;}

/* Task Bulk-Bar auf Mobile/Zoom */
body[data-zoom="1.75"] .task-bulk-bar,body.fs-175 .task-bulk-bar,
body[data-zoom="2"] .task-bulk-bar,body.fs-200 .task-bulk-bar{flex-wrap:wrap;row-gap:6px;}
body[data-zoom="1.75"] .task-bulk-bar>*,body.fs-175 .task-bulk-bar>*,
body[data-zoom="2"] .task-bulk-bar>*,body.fs-200 .task-bulk-bar>*{flex-shrink:0;}

/* ═══════════════════════════════════════════════════════════════
   TOAST & OVERLAY Robustheit
   ═══════════════════════════════════════════════════════════════ */
.sd-toast{max-width:calc(100vw - 40px);word-break:break-word;}

/* Dropdown-Menüs nie über Viewport hinaus */
.dd-menu{max-height:calc(100vh - 80px);overflow-y:auto;}

/* Command-Palette-Results Robustheit */
.cmdk-item{min-width:0;}
.cmdk-text{overflow:hidden;}
.cmdk-title,.cmdk-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════
   EMPTY-STATES DESIGN (elegant statt öde)
   ═══════════════════════════════════════════════════════════════ */
.no-sess,.empty-state{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.empty-state i,.no-sess i{
  font-size:40px;
  opacity:.2;
  display:block;
  margin-bottom:14px;
  color:var(--blue);
}
[data-theme="pink"] .empty-state i,[data-theme="pink"] .no-sess i{color:#b04080;}
.empty-state-title{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — subtile UX-Verbesserungen
   ═══════════════════════════════════════════════════════════════ */
/* Buttons haben subtle press-Animation */
button:active:not(:disabled),.btn:active:not(:disabled){
  transform:translateY(1px);
}
button:disabled,.btn:disabled{
  opacity:.5;cursor:not-allowed!important;
}

/* Loader-Spinner sanfter */
.fa-spin{animation:fa-spin 1s linear infinite;}
.fa-spinner{color:var(--blue);}
[data-theme="pink"] .fa-spinner{color:#b04080;}

/* Table-Rows haben Hover-Feedback */
.panel-body table tbody tr{transition:background var(--dur);}
.panel-body table tbody tr:hover{background:var(--hover);}

/* Links in Admin-Body haben konsistente Farbe */
.panel-body a{color:var(--blue);text-decoration:none;}
.panel-body a:hover{text-decoration:underline;}
[data-theme="pink"] .panel-body a{color:#b04080;}


/* ═══════════════════════════════════════════════════════════════
   SEMPERCONNECT SPLASH SYSTEM — Pixar-level CONNECT animation
   Multi-gradient background · Anticipation · Click impact · Rings · Shimmer
   ═══════════════════════════════════════════════════════════════ */
.sc-splash{
  display:none;
  position:fixed;inset:0;z-index:99999;
  align-items:center;justify-content:center;
  overflow:hidden;
  /* Clean, deep gradient — no ambient orbs, focus on the logo */
  background:linear-gradient(145deg,
    #0a2838 0%,
    #071f2c 40%,
    #041520 75%,
    #020a12 100%);
  animation:scSplashIn .4s ease;
}
.sc-splash.active{display:flex;}
@keyframes scSplashIn{from{opacity:0;}to{opacity:1;}}
.sc-splash.splash-fade-out{animation:scSplashOut .5s var(--ease) forwards;pointer-events:none;}
@keyframes scSplashOut{to{opacity:0;transform:scale(1.03);}}

.splash-container{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;padding:20px;text-align:center;z-index:1;
}

/* Background mesh — hidden, kept in HTML for compat */
.splash-mesh{display:none;}

/* ─── SVG wrapper with click-impact scale ─── */
.splash-svg{
  width:260px;height:auto;
  filter:drop-shadow(0 10px 40px rgba(68,153,212,.4)) drop-shadow(0 0 30px rgba(107,195,240,.3));
  overflow:visible;
  animation:svgClickPulse .5s cubic-bezier(.34,1.3,.64,1) 1s both;
}
/* The satisfying "click" — compression then settle */
@keyframes svgClickPulse{
  0%{transform:scale(1);}
  25%{transform:scale(1.04);filter:drop-shadow(0 10px 40px rgba(107,195,240,.7)) drop-shadow(0 0 60px rgba(184,232,255,.5));}
  55%{transform:scale(.99);}
  100%{transform:scale(1);filter:drop-shadow(0 10px 40px rgba(68,153,212,.4)) drop-shadow(0 0 30px rgba(107,195,240,.3));}
}

/* ─── Anticipation glow removed — cleaner start ─── */
.splash-anticipation{display:none;}

/* ─── Piece animations: clean glide, no overlap ─── */
/* ─── Splash-Puzzle-Animation ───
   Timing-Choreografie: Die zwei Logo-Hälften fliegen erst NACHDEM die Verify-Checklist
   durchgelaufen ist (4.0s Start) zusammen. So entsteht der "Zusammenbau"-Effekt am Ende.
   Dauer 1.6s → Pieces sind bei 5.6s komplett. show() fade-out frühestens bei 6.2s. */
.splash-piece-blue{
  transform-origin:center;
  /* 4s delay: nach Verify-Abschluss; 1.6s Animation */
  animation:pieceFromLeft 1.6s cubic-bezier(.16,.84,.28,1) 4s both;
}
@keyframes pieceFromLeft{
  0%{transform:translateX(-200px) rotate(-6deg) scale(.92);opacity:0;}
  20%{opacity:1;}
  100%{transform:translateX(0) rotate(0) scale(1);opacity:1;}
}

.splash-piece-dark{
  transform-origin:center;
  animation:pieceFromRight 1.6s cubic-bezier(.16,.84,.28,1) 4s both;
}
@keyframes pieceFromRight{
  0%{transform:translateX(200px) rotate(6deg) scale(.92);opacity:0;}
  20%{opacity:1;}
  100%{transform:translateX(0) rotate(0) scale(1);opacity:1;}
}

/* ─── Click spark — bright flash at impact ─── */
.splash-spark{
  transform-origin:center;
  animation:sparkFlash 1.8s ease-out 1s infinite;
  opacity:0;
}
@keyframes sparkFlash{
  0%{r:0;opacity:0;}
  5%{r:8;opacity:1;}
  15%{r:22;opacity:.8;}
  35%{r:50;opacity:.2;}
  55%{r:75;opacity:0;}
  100%{r:0;opacity:0;}
}

/* ─── Expanding rings — 3 staggered rings on click ─── */
.splash-ring{
  transform-origin:63px 56px;
  opacity:0;
}
.splash-ring-1{
  animation:ringExpand1 2s cubic-bezier(.22,.61,.36,1) 1s infinite;
}
.splash-ring-2{
  animation:ringExpand2 2s cubic-bezier(.22,.61,.36,1) 1.2s infinite;
}
.splash-ring-3{
  animation:ringExpand3 2s cubic-bezier(.22,.61,.36,1) 1.4s infinite;
}
@keyframes ringExpand1{
  0%{r:5;opacity:0;stroke-width:2;}
  10%{opacity:1;}
  100%{r:60;opacity:0;stroke-width:.2;}
}
@keyframes ringExpand2{
  0%{r:5;opacity:0;stroke-width:1.8;}
  10%{opacity:.7;}
  100%{r:75;opacity:0;stroke-width:.2;}
}
@keyframes ringExpand3{
  0%{r:5;opacity:0;stroke-width:1.5;}
  10%{opacity:.5;}
  100%{r:90;opacity:0;stroke-width:.2;}
}

/* ─── Welcome section: Brand + Verify-Checklist ─── */
.splash-welcome{
  font-family:'Inter',-apple-system,sans-serif;
  opacity:0;
  animation:welcomeFade .7s cubic-bezier(.22,.9,.28,1) 1.3s both;
  max-width:460px;
  width:100%;
}
.splash-brand{
  text-align:center;
  margin-bottom:28px;
  letter-spacing:-.01em;
  line-height:1;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.sb-semper{
  font-weight:800;
  font-size:34px;
  color:#ffffff;
  letter-spacing:.02em;
}
.sb-connect{
  font-weight:300;
  font-size:22px;
  color:#6BC3F0;
  letter-spacing:.01em;
  margin-left:3px;
  /* Subtle shine on the connect part */
  background:linear-gradient(110deg,#6BC3F0 0%,#B8E8FF 40%,#6BC3F0 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:textShimmer 4s linear 1.8s infinite;
}
/* ─── System verification checklist ─── */
.splash-verify{
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
}
.sv-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(110,195,240,.12);
  border-radius:10px;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.55);
  opacity:0;
  transform:translateY(6px);
  transition:color .4s ease, background .4s ease, border-color .4s ease;
}
.sv-item[data-step="dom"]{animation:svSlideIn .5s cubic-bezier(.22,.9,.28,1) 1.4s forwards;}
.sv-item[data-step="auth"]{animation:svSlideIn .5s cubic-bezier(.22,.9,.28,1) 1.6s forwards;}
.sv-item[data-step="network"]{animation:svSlideIn .5s cubic-bezier(.22,.9,.28,1) 1.8s forwards;}
.sv-item[data-step="security"]{animation:svSlideIn .5s cubic-bezier(.22,.9,.28,1) 2.0s forwards;}
.sv-item.sv-active{
  color:rgba(255,255,255,.95);
  background:rgba(110,195,240,.1);
  border-color:rgba(110,195,240,.35);
}
.sv-item.sv-done{
  color:rgba(255,255,255,.75);
  background:rgba(110,195,240,.06);
  border-color:rgba(110,195,240,.18);
}
.sv-spinner{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(110,195,240,.2);
  border-top-color:#6BC3F0;
  opacity:0;
  animation:none;
  transition:opacity .3s;
}
.sv-item.sv-active .sv-spinner{opacity:1;animation:svSpin .7s linear infinite;}
.sv-item.sv-done .sv-spinner{display:none;}
.sv-label{flex:1;text-align:left;}
.sv-check{
  color:#6BC3F0;font-weight:700;font-size:13px;flex-shrink:0;
  opacity:0;transform:scale(.5);
  transition:opacity .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.sv-item.sv-done .sv-check{opacity:1;transform:scale(1);}

@keyframes welcomeFade{
  from{opacity:0;transform:translateY(12px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes svSlideIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes svSpin{
  to{transform:rotate(360deg);}
}
@keyframes textShimmer{
  0%{background-position:200% 0%;}
  100%{background-position:-200% 0%;}
}

/* Responsive */
@media(max-width:480px){
  .splash-svg{width:190px;}
  .splash-welcome{font-size:15px;}
  .splash-container{gap:24px;}
  .splash-mesh{inset:-30px;}
}

/* Reduced-motion accessibility. The SEMPERconnect logo animation is a brand moment
   and users consistently want to see it, so we keep its full duration even with
   reduce-motion enabled. Only the excessive particle/spark layers are disabled. */
@media(prefers-reduced-motion:reduce){
  .splash-spark,.splash-mesh,.splash-ring,.splash-sparkle,
  .splash-anticipation,.splash-mesh::before,.splash-mesh::after{animation:none;}
  /* Logo pieces + welcome text stay animated (brand experience > micro-motion pref) */
}


/* ═══════════════════════════════════════════════════════════════════
   SECURITY CENTER — Tables + Tabs
   ═══════════════════════════════════════════════════════════════════ */
.tbl{border-collapse:collapse;width:100%;}
.tbl thead tr{background:var(--hover);}
.tbl th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1px solid var(--border);}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tbody tr:hover{background:rgba(0,0,0,.02);}
.tbl tbody tr:last-child td{border-bottom:none;}

.sec-stat-card{transition:transform .15s ease, box-shadow .15s ease;}
.sec-stat-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06);}

.sec-tab-btn{transition:color .15s ease, border-color .15s ease;}
.sec-tab-btn:hover:not(.sec-tab-active){color:var(--text)!important;}

/* Dark theme support */
body.dark-theme .tbl thead tr,
body.theme-dark .tbl thead tr{background:rgba(255,255,255,.04);}
body.dark-theme .tbl tbody tr:hover,
body.theme-dark .tbl tbody tr:hover{background:rgba(255,255,255,.02);}

/* ═══════════════════════════════════════════════════════════════════
   LOGIN SECURITY VERIFY OVERLAY
   ═══════════════════════════════════════════════════════════════════ */
.auth-box{position:relative;overflow:hidden;}
.login-verify-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,
    rgba(14,35,55,.98) 0%,
    rgba(8,25,42,.98) 50%,
    rgba(4,17,30,.98) 100%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,.9,.28,1);
  z-index:5;
  border-radius:inherit;
}
.login-verify-overlay.lv-active{opacity:1;pointer-events:auto;}
.lv-content{
  padding:32px 28px;max-width:340px;width:100%;
  color:#fff;text-align:center;
  transform:translateY(8px);opacity:0;
  transition:transform .4s cubic-bezier(.22,.9,.28,1) .1s, opacity .4s ease .1s;
}
.lv-active .lv-content{transform:translateY(0);opacity:1;}
.lv-header{margin-bottom:22px;}
.lv-icon{
  width:56px;height:56px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(110,195,240,.18),rgba(33,150,243,.22));
  border:1.5px solid rgba(110,195,240,.35);
  border-radius:50%;
  color:#6BC3F0;font-size:22px;
  box-shadow:0 0 30px rgba(110,195,240,.3),inset 0 0 20px rgba(110,195,240,.1);
  animation:lvIconPulse 2s ease-in-out infinite;
}
@keyframes lvIconPulse{
  0%,100%{box-shadow:0 0 30px rgba(110,195,240,.3),inset 0 0 20px rgba(110,195,240,.1);}
  50%{box-shadow:0 0 40px rgba(110,195,240,.5),inset 0 0 25px rgba(110,195,240,.15);}
}
.lv-title{
  font-size:17px;font-weight:700;letter-spacing:.01em;
  color:#fff;margin-bottom:5px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.lv-sub{
  font-size:12px;color:rgba(255,255,255,.6);font-weight:400;
}
/* ─── Login Verify: Single-step mode — nur aktueller Check sichtbar ─── */
.lv-steps{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-bottom:18px;
  min-height:44px;  /* stable vertical space for the single visible step */
  position:relative;
}
.lv-step{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(110,195,240,.12);
  border-radius:9px;
  font-size:12px;font-weight:500;
  color:rgba(255,255,255,.85);
  text-align:left;
  position:absolute;
  left:0;right:0;top:50%;
  transform:translateY(calc(-50% + 10px));
  opacity:0;
  pointer-events:none;
  transition:opacity .35s cubic-bezier(.22,.9,.28,1), transform .35s cubic-bezier(.22,.9,.28,1);
}
.lv-step.lv-active{
  color:#fff;
  background:rgba(110,195,240,.1);
  border-color:rgba(110,195,240,.35);
  opacity:1;
  transform:translateY(-50%);
  pointer-events:auto;
}
.lv-step.lv-done{
  /* Brief checkmark flash before next step arrives */
  color:rgba(255,255,255,.9);
  background:rgba(110,195,240,.08);
  border-color:rgba(110,195,240,.28);
  opacity:1;
  transform:translateY(-50%);
  pointer-events:auto;
}
.lv-step.lv-fail{
  color:#ff8a80;
  background:rgba(211,47,47,.15);
  border-color:rgba(211,47,47,.5);
  opacity:1;
  transform:translateY(-50%);
  pointer-events:auto;
}
.lv-step.lv-exiting{
  opacity:0;
  transform:translateY(calc(-50% - 10px));
  pointer-events:none;
}
.lv-spinner{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(110,195,240,.2);
  border-top-color:#6BC3F0;
  opacity:0;transition:opacity .25s;
}
.lv-step.lv-active .lv-spinner{opacity:1;animation:lvSpin .65s linear infinite;}
.lv-step.lv-done .lv-spinner,.lv-step.lv-fail .lv-spinner{display:none;}
.lv-label{flex:1;}
.lv-check{
  color:#6BC3F0;font-weight:700;font-size:12px;flex-shrink:0;
  opacity:0;transform:scale(.5);
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.lv-step.lv-done .lv-check{opacity:1;transform:scale(1);}
.lv-step.lv-fail .lv-check{content:'✗';opacity:1;color:#ff8a80;transform:scale(1);}
.lv-step.lv-fail .lv-check::before{content:'✗';}
.lv-step.lv-fail .lv-check{display:none;}
@keyframes lvSpin{to{transform:rotate(360deg);}}
/* Progress-Bar */
.lv-progress{
  height:3px;background:rgba(110,195,240,.12);border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}
.lv-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,#6BC3F0,#B8E8FF,#6BC3F0);
  background-size:200% 100%;
  animation:lvProgressShimmer 2s linear infinite;
  transition:width .3s cubic-bezier(.22,.9,.28,1);
  border-radius:2px;
  box-shadow:0 0 12px rgba(110,195,240,.5);
}
@keyframes lvProgressShimmer{0%{background-position:200% 0%;}100%{background-position:-200% 0%;}}

/* Button loading state */
.btn-verifying{pointer-events:none;opacity:.7;}
.btn-verifying .lv-btn-spinner{display:inline-block;margin-right:6px;animation:lvSpin .65s linear infinite;width:12px;height:12px;border:1.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;vertical-align:-2px;}

/* ═══════════════════════════════════════════════════════════════════════
   AUFGABEN & NOTIZEN — State-of-the-Art Design
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Shell ─── */
.tn-shell{
  display:flex;flex-direction:column;gap:18px;
  max-width:1200px;margin:0 auto;
}

/* ─── Top bar: Tabs + search + new button ─── */
.tn-topbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:4px 0;
}
.tn-tabs{
  display:flex;gap:2px;
  background:var(--hover,rgba(0,0,0,.04));
  padding:4px;border-radius:10px;
  border:1px solid var(--border,#e5e7eb);
}
.tn-tab{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border:none;background:transparent;
  font-size:13px;font-weight:600;color:var(--muted,#6b7280);
  border-radius:7px;cursor:pointer;
  transition:all .18s cubic-bezier(.22,.9,.28,1);
  position:relative;
}
.tn-tab:hover{color:var(--text,#111827);}
.tn-tab.active{
  background:var(--white,#fff);color:var(--blue,#1976D2);
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
}
.tn-tab i{font-size:14px;}
.tn-tab-count{
  display:none;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--blue,#1976D2);color:#fff;
  font-size:10.5px;font-weight:700;
  border-radius:10px;
  line-height:1;
}
.tn-tab.active .tn-tab-count{background:#1976D2;}
.tn-searchbox{
  flex:1;min-width:220px;max-width:420px;position:relative;
}
.tn-searchbox i{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:13px;pointer-events:none;
}
.tn-searchbox input{
  width:100%;box-sizing:border-box;
  padding:10px 12px 10px 36px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;font-size:13px;color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.tn-searchbox input:focus{
  outline:none;border-color:var(--blue,#1976D2);
  box-shadow:0 0 0 3px rgba(25,118,210,.1);
}
.tn-btn-primary{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;
  background:linear-gradient(135deg,#1976D2,#1565C0);color:#fff;
  border:none;border-radius:10px;font-size:13px;font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(25,118,210,.25);
  transition:all .18s cubic-bezier(.22,.9,.28,1);
}
.tn-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(25,118,210,.35);
}
.tn-btn-primary:active{transform:translateY(0);}
.tn-btn-outline{
  padding:9px 16px;background:transparent;
  border:1.5px solid var(--border);border-radius:10px;
  color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.tn-btn-outline:hover{background:var(--hover);}
.tn-btn-danger{
  padding:9px 16px;background:transparent;
  border:1.5px solid #fecaca;color:#dc2626;
  border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.tn-btn-danger:hover{background:#fef2f2;border-color:#dc2626;}
.tn-icon-btn{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:13px;cursor:pointer;
  transition:all .15s;
}
.tn-icon-btn:hover{background:var(--hover);border-color:var(--blue);color:var(--blue);}

/* ─── Filter chips ─── */
.tn-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;
}
.tn-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:20px;
  font-size:12.5px;font-weight:500;color:var(--text);
  cursor:pointer;transition:all .15s;
}
.tn-chip:hover{border-color:var(--blue);color:var(--blue);}
.tn-chip.active{
  background:var(--blue,#1976D2);color:#fff;border-color:var(--blue);
  box-shadow:0 2px 6px rgba(25,118,210,.25);
}
.tn-chip i{font-size:11px;}
.tn-chip-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:rgba(0,0,0,.08);
  font-size:10px;font-weight:700;
  border-radius:10px;line-height:1;
}
.tn-chip.active .tn-chip-badge{background:rgba(255,255,255,.25);color:#fff;}
.tn-chip-badge.danger{background:#dc2626;color:#fff;}
.tn-chip.active .tn-chip-badge.danger{background:#fff;color:#dc2626;}

/* ─── Task list ─── */
.tn-list{display:flex;flex-direction:column;gap:22px;}
.tn-group{display:flex;flex-direction:column;gap:10px;}
.tn-group-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);
  padding-bottom:4px;
}
.tn-group-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;padding:1px 7px;
  background:var(--hover);color:var(--muted);
  font-size:10px;font-weight:600;border-radius:10px;
  text-transform:none;letter-spacing:0;
}
.tn-group-items{display:flex;flex-direction:column;gap:8px;}

/* ─── Task card ─── */
.tn-task-card{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  background:var(--white);border:1px solid var(--border);
  border-radius:12px;cursor:pointer;
  transition:all .15s cubic-bezier(.22,.9,.28,1);
  position:relative;
}
.tn-task-card:hover{
  border-color:var(--blue,#1976D2);
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  transform:translateY(-1px);
}
.tn-task-card.done{opacity:.65;}
.tn-task-card.done .tn-task-title{text-decoration:line-through;color:var(--muted);}
.tn-task-card.overdue{border-left:3px solid #dc2626;}
.tn-task-check{
  background:transparent;border:none;padding:0;cursor:pointer;
  font-size:22px;color:var(--muted);
  transition:transform .15s, color .15s;
  flex-shrink:0;line-height:1;margin-top:1px;
}
.tn-task-check:hover{transform:scale(1.15);color:var(--blue);}
.tn-task-body{flex:1;min-width:0;}
.tn-task-title{
  font-size:14px;font-weight:600;color:var(--text);
  line-height:1.4;margin-bottom:3px;
  word-wrap:break-word;
}
.tn-task-desc{
  font-size:12.5px;color:var(--muted);
  line-height:1.5;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tn-task-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:11.5px;
}
.tn-task-right{flex-shrink:0;margin-left:auto;display:flex;align-items:center;}

/* Priority dot */
.tn-prio-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.5);
}
/* Status chip */
.tn-status-chip{
  padding:2px 8px;border:1px solid;border-radius:10px;
  font-size:10.5px;font-weight:600;
  background:transparent;
}
/* Due */
.tn-due{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--muted);font-weight:500;
}
.tn-due i{font-size:10px;}
/* Checklist info */
.tn-checklist-info{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--muted);font-weight:500;
}
.tn-checklist-info i{font-size:10px;}
/* Linked icons */
.tn-linked{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  background:rgba(25,118,210,.1);color:var(--blue);
  border-radius:4px;font-size:9px;
}
/* Tag */
.tn-tag{
  display:inline-flex;align-items:center;
  padding:1px 7px;
  background:rgba(25,118,210,.08);color:var(--blue,#1976D2);
  border-radius:8px;
  font-size:10.5px;font-weight:500;
}

/* ─── Avatars ─── */
.tn-avatar{
  width:30px;height:30px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--white);
  box-shadow:0 0 0 1px var(--border);
}
.tn-avatar-img{width:100%;height:100%;object-fit:cover;}
.tn-avatar-ini{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;
  font-size:12px;font-weight:700;
}
.tn-avatar-img-sm,.tn-avatar-ini-sm{
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.tn-avatar-img-sm{object-fit:cover;}
.tn-avatar-ini-sm{
  background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;
  font-size:10px;font-weight:700;
}

/* ─── Empty state ─── */
.tn-empty{
  text-align:center;padding:80px 20px;
  color:var(--muted);
}
.tn-empty-icon{
  width:72px;height:72px;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hover);border-radius:50%;
  font-size:30px;color:var(--muted);
  opacity:.6;
}
.tn-empty-title{
  font-size:16px;font-weight:700;color:var(--text);
  margin-bottom:6px;
}
.tn-empty-sub{font-size:13px;color:var(--muted);}

/* ══════════════════════════════════════════════════════════════════
   MODALS — Task Editor + Detail + Note Editor
   ══════════════════════════════════════════════════════════════════ */
.tn-modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:20px;box-sizing:border-box;
  animation:tnFadeIn .2s ease-out;
}
@keyframes tnFadeIn{from{opacity:0;}to{opacity:1;}}
.tn-modal{
  background:var(--white);
  border-radius:16px;
  width:100%;max-width:640px;
  max-height:calc(100vh - 40px);
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.25),0 8px 20px rgba(0,0,0,.1);
  overflow:hidden;
  animation:tnSlideUp .3s cubic-bezier(.22,.9,.28,1);
}
@keyframes tnSlideUp{
  from{opacity:0;transform:translateY(20px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.tn-detail-modal{max-width:720px;}
.tn-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.tn-modal-title{
  font-size:16px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:10px;
}
.tn-modal-title i{font-size:16px;}
.tn-modal-close{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:8px;
  color:var(--muted);font-size:16px;cursor:pointer;
  transition:all .15s;
}
.tn-modal-close:hover{background:var(--hover);color:var(--text);}
.tn-modal-body{
  padding:22px;
  overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:14px;
}
.tn-modal-ftr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px;
  border-top:1px solid var(--border);
  background:var(--hover);
  flex-shrink:0;
}

/* Form elements */
.tn-input-large{
  width:100%;box-sizing:border-box;
  padding:14px 16px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;
  font-size:17px;font-weight:600;color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.tn-input-large:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(25,118,210,.1);
}
.tn-textarea{
  width:100%;box-sizing:border-box;
  padding:12px 14px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;
  font-size:13px;color:var(--text);
  font-family:inherit;resize:vertical;
  transition:border-color .15s,box-shadow .15s;
  line-height:1.55;
}
.tn-textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(25,118,210,.1);
}
.tn-select{
  width:100%;box-sizing:border-box;
  padding:10px 12px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:9px;
  font-size:13px;color:var(--text);font-family:inherit;
  transition:border-color .15s;
}
.tn-select:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(25,118,210,.1);
}
.tn-field{display:flex;flex-direction:column;gap:6px;}
.tn-field>label{
  font-size:11.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:5px;
}
.tn-field>label i{font-size:11px;color:var(--blue);}
.tn-row-grid{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;
}
@media (max-width:600px){.tn-row-grid{grid-template-columns:1fr;}}

/* Priority picker */
.tn-pri-picker{display:flex;gap:6px;}
.tn-pri-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 10px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:8px;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.tn-pri-btn:hover{border-color:var(--pc);}
.tn-pri-btn.active{
  background:color-mix(in srgb,var(--pc) 10%,transparent);
  border-color:var(--pc);color:var(--pc);
}

/* Contact/Link picker */
.tn-link-picker{position:relative;}
.tn-link-results{
  margin-top:6px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  max-height:240px;overflow-y:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.tn-link-results:empty{display:none;margin:0;border:none;}
.tn-link-result{
  padding:10px 14px;font-size:12.5px;color:var(--text);cursor:pointer;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
  transition:background .1s;
}
.tn-link-result:last-child{border-bottom:none;}
.tn-link-result:hover{background:var(--hover);}
.tn-link-result i{color:var(--blue);font-size:11px;}
.tn-link-noresult{
  padding:14px;text-align:center;
  font-size:12px;color:var(--muted);font-style:italic;
}

/* Checklist editor */
.tn-checklist-editor{
  display:flex;flex-direction:column;gap:6px;
}
.tn-check-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
  background:var(--hover);border-radius:8px;
  transition:background .15s;
}
.tn-check-row:hover{background:color-mix(in srgb,var(--hover) 50%,transparent);}
.tn-check-row input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--blue);cursor:pointer;
}
.tn-check-text{
  flex:1;background:transparent;border:none;
  font-size:13px;color:var(--text);padding:4px 0;
  outline:none;font-family:inherit;
}
.tn-check-remove{
  width:24px;height:24px;
  background:transparent;border:none;border-radius:6px;
  color:var(--muted);font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.tn-check-remove:hover{background:#fee2e2;color:#dc2626;}
.tn-add-check-btn{
  padding:8px 12px;
  background:transparent;border:1.5px dashed var(--border);border-radius:8px;
  color:var(--muted);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .15s;
  margin-top:4px;
}
.tn-add-check-btn:hover{
  border-color:var(--blue);color:var(--blue);background:rgba(25,118,210,.04);
}

/* ══════════════════════════════════════════════════════════════════
   TASK DETAIL MODAL — Comments, Meta-Grid, Activity
   ══════════════════════════════════════════════════════════════════ */
.tn-detail-hdr{
  padding:20px 22px 16px;border-bottom:1px solid var(--border);
  display:flex;gap:14px;align-items:flex-start;
}
.tn-detail-title{
  font-size:19px;font-weight:700;color:var(--text);
  line-height:1.3;margin-bottom:10px;word-wrap:break-word;
}
.tn-detail-sub{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.tn-prio-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:transparent;border:1px solid;border-radius:12px;
  font-size:11px;font-weight:600;
}
.tn-status-chip-lg{
  padding:3px 10px;border:1px solid;border-radius:12px;
  font-size:11px;font-weight:700;
}
.tn-due-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  background:var(--hover);color:var(--muted);
  border-radius:12px;
  font-size:11px;font-weight:500;
}
.tn-due-chip.overdue{
  background:rgba(220,38,38,.1);color:#dc2626;
}
.tn-due-chip i{font-size:10px;}
.tn-detail-body{
  padding:0 22px 22px;overflow-y:auto;flex:1;
  display:flex;flex-direction:column;gap:18px;
}
.tn-detail-desc{
  margin-top:18px;
  font-size:13.5px;line-height:1.65;color:var(--text);
  background:var(--hover);padding:14px 16px;border-radius:10px;
  border-left:3px solid var(--blue);
  white-space:pre-wrap;word-wrap:break-word;
}

/* Meta grid */
.tn-detail-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:4px 0;
}
@media (max-width:600px){.tn-detail-meta{grid-template-columns:1fr;}}
.tn-meta-item{
  background:var(--hover);padding:10px 12px;border-radius:8px;
  border:1px solid var(--border);
}
.tn-meta-link{
  cursor:pointer;transition:all .15s;
}
.tn-meta-link:hover{
  border-color:var(--blue);background:rgba(25,118,210,.06);
}
.tn-meta-label{
  font-size:10.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:5px;
  margin-bottom:6px;
}
.tn-meta-label i{font-size:10px;color:var(--blue);}
.tn-meta-val{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:var(--text);
}
.tn-meta-val i{font-size:11px;color:var(--muted);}
.tn-meta-empty{color:var(--muted);font-style:italic;}

/* Detail tags row */
.tn-detail-tags{
  display:flex;flex-wrap:wrap;gap:6px;
}

/* Detail section */
.tn-detail-section{
  border-top:1px solid var(--border);padding-top:18px;
}
.tn-section-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px;
}
.tn-section-hdr h4{
  margin:0;font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.tn-section-hdr h4 i{color:var(--blue);font-size:13px;}

/* Checklist (detail view) */
.tn-cl-progress{
  display:flex;align-items:center;gap:8px;
  min-width:120px;
}
.tn-cl-progress-bar{
  flex:1;height:6px;
  background:var(--hover);border-radius:3px;overflow:hidden;
  position:relative;
}
.tn-cl-progress-bar::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#10b981,#059669);
  border-radius:3px;
  width:var(--pct,0%);
  transition:width .3s cubic-bezier(.22,.9,.28,1);
}
.tn-cl-progress{position:relative;}
.tn-cl-progress{
  --progress:0%;
}
.tn-cl-progress > .tn-cl-progress-bar{
  position:relative;overflow:hidden;
}
.tn-cl-count{
  font-size:11px;font-weight:700;color:var(--muted);
  white-space:nowrap;
}
.tn-cl-list{display:flex;flex-direction:column;gap:4px;}
.tn-cl-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  font-size:13px;color:var(--text);
  cursor:pointer;transition:all .15s;
}
.tn-cl-item:hover{background:var(--hover);border-color:var(--border);}
.tn-cl-item i{font-size:16px;color:var(--muted);transition:color .15s;}
.tn-cl-item:hover i{color:var(--blue);}
.tn-cl-item.done{color:var(--muted);}
.tn-cl-item.done span{text-decoration:line-through;}
.tn-cl-item.done i{color:#10b981;}

/* Comments section — GitHub-style */
.tn-comments{
  display:flex;flex-direction:column;gap:12px;
}
.tn-comments-empty{
  text-align:center;padding:30px 20px;
  color:var(--muted);font-style:italic;font-size:13px;
}
.tn-cmt{
  display:flex;gap:10px;align-items:flex-start;
}
.tn-cmt-avatar,.tn-cmt-avatar-ini{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.tn-cmt-avatar{object-fit:cover;}
.tn-cmt-avatar-ini{
  background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;
  font-size:12px;font-weight:700;
}
.tn-cmt-body{
  flex:1;min-width:0;
  background:var(--hover);border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.tn-cmt-hdr{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:color-mix(in srgb,var(--hover) 50%,transparent);
  border-bottom:1px solid var(--border);
}
.tn-cmt-name{font-size:12.5px;font-weight:700;color:var(--text);}
.tn-cmt-time{font-size:11px;color:var(--muted);}
.tn-cmt-del{
  margin-left:auto;
  width:22px;height:22px;
  background:transparent;border:none;border-radius:5px;
  color:var(--muted);font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;opacity:0;
}
.tn-cmt:hover .tn-cmt-del{opacity:.7;}
.tn-cmt-del:hover{background:#fee2e2;color:#dc2626;opacity:1;}
.tn-cmt-text{
  padding:10px 12px;font-size:13px;line-height:1.55;color:var(--text);
  word-wrap:break-word;white-space:pre-wrap;
}

/* System comments (status changes etc) */
.tn-cmt-system{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;
  background:transparent;border-left:2px solid var(--muted);
  margin-left:14px;
  font-size:12px;color:var(--muted);
}
.tn-cmt-system i{font-size:11px;color:var(--blue);}
.tn-cmt-system strong{color:var(--text);font-weight:700;}
.tn-cmt-system .tn-cmt-time{margin-left:auto;}

/* Add comment form */
.tn-comment-add{
  display:flex;gap:8px;align-items:flex-end;margin-top:4px;
}
.tn-comment-add textarea{
  flex:1;box-sizing:border-box;
  padding:10px 14px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;
  font-size:13px;color:var(--text);
  font-family:inherit;resize:vertical;min-height:44px;
  line-height:1.5;
  transition:border-color .15s,box-shadow .15s;
}
.tn-comment-add textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(25,118,210,.1);
}
.tn-comment-send{flex-shrink:0;}

/* ══════════════════════════════════════════════════════════════════
   NOTES — Sticky-note design
   ══════════════════════════════════════════════════════════════════ */
.tn-notes-group{margin-bottom:24px;}
.tn-notes-group-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);
  margin-bottom:12px;
}
.tn-notes-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;
}
.tn-note{
  padding:14px 16px;
  border-radius:12px;
  cursor:pointer;
  display:flex;flex-direction:column;gap:8px;
  min-height:140px;
  border:1px solid;
  transition:all .18s cubic-bezier(.22,.9,.28,1);
  position:relative;
  overflow:hidden;
}
.tn-note:hover{
  transform:translateY(-2px) rotate(-.3deg);
  box-shadow:0 8px 20px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
}
/* Color variants — sticky-note feel */
.tn-note-yellow{background:#fef9c3;border-color:#fde68a;color:#713f12;}
.tn-note-blue{background:#dbeafe;border-color:#bfdbfe;color:#1e3a8a;}
.tn-note-green{background:#d1fae5;border-color:#a7f3d0;color:#065f46;}
.tn-note-red{background:#fee2e2;border-color:#fecaca;color:#7f1d1d;}
.tn-note-purple{background:#ede9fe;border-color:#ddd6fe;color:#4c1d95;}
.tn-note-default{background:var(--white);border-color:var(--border);color:var(--text);}

.tn-note-hdr{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
}
.tn-note-title{
  font-size:14.5px;font-weight:700;line-height:1.35;
  flex:1;word-wrap:break-word;
}
.tn-note-pin{
  width:26px;height:26px;
  background:transparent;border:none;border-radius:6px;
  font-size:11px;cursor:pointer;
  color:currentColor;opacity:.35;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  transform:rotate(45deg);
}
.tn-note-pin:hover{opacity:.8;background:rgba(0,0,0,.06);}
.tn-note-pin.active{opacity:1;transform:rotate(0);color:#E88B00;}
.tn-note-body{
  flex:1;
  font-size:12.5px;line-height:1.55;
  white-space:pre-wrap;word-wrap:break-word;
  opacity:.9;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
}
.tn-note-ftr{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-top:6px;border-top:1px solid rgba(0,0,0,.08);
}
.tn-note-tags{display:flex;flex-wrap:wrap;gap:4px;}
.tn-note-tag{
  font-size:10px;font-weight:600;
  padding:1px 6px;
  background:rgba(0,0,0,.08);border-radius:6px;
}
.tn-note-time{font-size:10.5px;opacity:.65;white-space:nowrap;}

/* Note editor modal — takes on note color */
.tn-note-modal{transition:background .2s;}
.tn-note-modal.tn-note-yellow{background:#fefce8;}
.tn-note-modal.tn-note-blue{background:#eff6ff;}
.tn-note-modal.tn-note-green{background:#ecfdf5;}
.tn-note-modal.tn-note-red{background:#fef2f2;}
.tn-note-modal.tn-note-purple{background:#f5f3ff;}
.tn-note-modal.tn-note-default{background:var(--white);}
.tn-note-modal .tn-modal-hdr,
.tn-note-modal .tn-modal-ftr{background:rgba(0,0,0,.03);}
.tn-note-title-input,.tn-note-content-input{
  background:transparent;border-color:rgba(0,0,0,.1);
}
.tn-note-pin-btn.active{
  background:#fef3c7;border-color:#E88B00;color:#E88B00;
}

/* Color picker */
.tn-color-picker{display:flex;gap:8px;flex-wrap:wrap;}
.tn-color-swatch{
  width:36px;height:36px;border-radius:50%;
  border:2.5px solid transparent;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:transparent;
  transition:all .15s;
  position:relative;
}
.tn-color-swatch:hover{transform:scale(1.1);}
.tn-color-swatch.active{border-color:currentColor;color:rgba(0,0,0,.55);}
.tn-color-swatch.tn-color-yellow{background:#fef08a;color:#713f12;}
.tn-color-swatch.tn-color-blue{background:#bfdbfe;color:#1e3a8a;}
.tn-color-swatch.tn-color-green{background:#86efac;color:#065f46;}
.tn-color-swatch.tn-color-red{background:#fca5a5;color:#7f1d1d;}
.tn-color-swatch.tn-color-purple{background:#c4b5fd;color:#4c1d95;}
.tn-color-swatch.tn-color-default{background:linear-gradient(135deg,#fff 50%,#e5e7eb 50%);border-color:#d1d5db;color:#374151;}

/* ══════════════════════════════════════════════════════════════════
   DARK THEME support
   ══════════════════════════════════════════════════════════════════ */
body.dark-theme .tn-task-card,
body.theme-dark .tn-task-card,
body.dark-theme .tn-modal,
body.theme-dark .tn-modal,
body.dark-theme .tn-chip,
body.theme-dark .tn-chip,
body.dark-theme .tn-searchbox input,
body.theme-dark .tn-searchbox input,
body.dark-theme .tn-input-large,
body.theme-dark .tn-input-large,
body.dark-theme .tn-textarea,
body.theme-dark .tn-textarea,
body.dark-theme .tn-select,
body.theme-dark .tn-select{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.12);
}
body.dark-theme .tn-tabs,
body.theme-dark .tn-tabs,
body.dark-theme .tn-meta-item,
body.theme-dark .tn-meta-item,
body.dark-theme .tn-detail-desc,
body.theme-dark .tn-detail-desc,
body.dark-theme .tn-check-row,
body.theme-dark .tn-check-row,
body.dark-theme .tn-cmt-body,
body.theme-dark .tn-cmt-body,
body.dark-theme .tn-modal-ftr,
body.theme-dark .tn-modal-ftr{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
}
body.dark-theme .tn-tab.active,
body.theme-dark .tn-tab.active{
  background:rgba(25,118,210,.2);color:#6BC3F0;
}

/* ──────────────────────────────
   Mobile adjustments
   ────────────────────────────── */
@media (max-width:640px){
  .tn-topbar{flex-direction:column;align-items:stretch;gap:10px;}
  .tn-searchbox{max-width:100%;}
  /* Override des globalen Mobile input-padding-Override aus dem ersten
     Media-Block (line ~14k), damit das Such-Icon nicht das Placeholder
     "Suchen..." überlappt. */
  .tn-searchbox input[type="text"]{padding:10px 12px 10px 36px !important;}
  .tn-btn-primary span{display:none;}
  .tn-btn-primary{padding:10px 14px;justify-content:center;}
  .tn-notes-grid{grid-template-columns:1fr;}
  .tn-detail-meta{grid-template-columns:1fr;}
}

/* ─── Task badges: urgent-state with pulse on overdue ─── */
.nav-badge-urgent{
  background:#dc2626 !important;
  box-shadow:0 0 0 0 rgba(220,38,38,.55);
  animation:tnBadgePulse 1.8s cubic-bezier(.22,.9,.28,1) infinite;
}
@keyframes tnBadgePulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.6);}
  70%{box-shadow:0 0 0 6px rgba(220,38,38,0);}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}
}

/* ─── Quick-date buttons in task editor ─── */
.tn-date-quick{
  display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;
}
.tn-date-quick button{
  padding:4px 10px;
  background:var(--hover);border:1px solid var(--border);border-radius:14px;
  font-size:11px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:all .15s;
}
.tn-date-quick button:hover{
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.tn-date-quick button:last-child:hover{
  background:#dc2626;border-color:#dc2626;
}

/* ─── Task completion animation ─── */
.tn-task-card.just-completed{
  animation:tnCompleteFlash .6s cubic-bezier(.22,.9,.28,1);
}
@keyframes tnCompleteFlash{
  0%{background:var(--white);}
  30%{background:rgba(16,185,129,.18);transform:scale(1.01);}
  100%{background:var(--white);transform:scale(1);}
}

/* ─── Keyboard shortcut hint on "Neu" button ─── */
.tn-btn-primary kbd{
  display:inline-block;
  padding:1px 5px;
  background:rgba(255,255,255,.2);
  border-radius:3px;
  font-size:10px;font-weight:500;font-family:inherit;
  margin-left:6px;
  opacity:.8;
}

/* ═══════════════════════════════════════════════════════════════════
   SYSTEM HEALTH DASHBOARD
   ═══════════════════════════════════════════════════════════════════ */
.sh-warnings{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.sh-warning{
  padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.sh-warning i{font-size:14px;}

.sh-grid{display:grid;gap:12px;margin-bottom:20px;}
.sh-grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.sh-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}

.sh-card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:16px;transition:transform .15s,box-shadow .15s;
}
.sh-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06);}
.sh-card-hdr{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:6px;
}
.sh-card-big{
  font-size:28px;font-weight:800;line-height:1;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.sh-card-body{font-size:11.5px;}
.sh-kv{
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  padding:3px 0;color:var(--muted);
}
.sh-kv b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}

.sh-progress{
  height:8px;background:var(--hover);border-radius:4px;overflow:hidden;
  margin-bottom:10px;
}
.sh-progress-bar{
  height:100%;border-radius:4px;
  transition:width .4s cubic-bezier(.22,.9,.28,1);
}

.sh-section{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;margin-bottom:16px;
}
.sh-section h4{
  margin:0 0 12px;font-size:13px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.sh-section h4 i{color:var(--blue);font-size:13px;}
.sh-section-inline{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;
}
.sh-section-inline h4{
  margin:0 0 10px;font-size:12px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;
}

/* Agent list */
.sh-agent-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;
}
.sh-agent{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--hover);border-radius:8px;
  font-size:12px;
}
.sh-agent-name{flex:1;font-weight:600;color:var(--text);}
.sh-agent-role{
  font-size:10px;text-transform:uppercase;color:var(--muted);
  background:rgba(0,0,0,.05);padding:1px 6px;border-radius:8px;
}
.sh-agent-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* Counts grid */
.sh-counts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;
}
.sh-count-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--hover);border:1px solid var(--border);border-radius:10px;
}
.sh-count-card i{font-size:22px;flex-shrink:0;}
.sh-count-val{
  font-size:20px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:3px;
}
.sh-count-label{font-size:11px;color:var(--muted);}

/* Errors */
.sh-errors{
  max-height:400px;overflow-y:auto;
  background:#0f172a;border-radius:8px;padding:10px;
}
.sh-error-row{
  font-family:'SFMono-Regular',Consolas,monospace;font-size:11px;
  color:#fbbf24;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.05);
  word-break:break-all;white-space:pre-wrap;line-height:1.4;
}
.sh-error-row:last-child{border-bottom:none;}
.sh-error-row.fatal{color:#f87171;background:rgba(239,68,68,.1);}

/* Server info grid */
.sh-server-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:600px){.sh-server-grid{grid-template-columns:1fr;}}

/* Dark theme */
body.dark-theme .sh-card,body.theme-dark .sh-card,
body.dark-theme .sh-section,body.theme-dark .sh-section,
body.dark-theme .sh-section-inline,body.theme-dark .sh-section-inline,
body.dark-theme .sh-count-card,body.theme-dark .sh-count-card,
body.dark-theme .sh-agent,body.theme-dark .sh-agent{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   BACKUP & RESTORE
   ═══════════════════════════════════════════════════════════════════ */
.bk-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  transition:all .15s;
}
.bk-item:hover{border-color:var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.04);}
.bk-item-icon{
  width:38px;height:38px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--hover);font-size:16px;
  flex-shrink:0;
}
.bk-item-info{flex:1;min-width:0;}
.bk-item-name{
  font-size:13px;font-weight:600;color:var(--text);
  font-family:'SFMono-Regular',Consolas,monospace;
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-item-meta{
  font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.bk-item-meta i{font-size:10px;}
.bk-item-actions{
  display:flex;gap:4px;flex-shrink:0;
}
.bk-item-actions button{padding:6px 9px;}

body.dark-theme .bk-item,body.theme-dark .bk-item{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   SUPERVISOR MONITOR
   ═══════════════════════════════════════════════════════════════════ */
.sv-stat-card{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  transition:transform .15s;
}
.sv-stat-card:hover{transform:translateY(-1px);}
.sv-stat-icon{font-size:20px;flex-shrink:0;}
.sv-stat-val{font-size:24px;font-weight:800;line-height:1;margin-bottom:2px;font-variant-numeric:tabular-nums;}
.sv-stat-label{font-size:11px;color:var(--muted);font-weight:500;}

/* Session cards */
.sv-sess{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  transition:all .15s;
}
.sv-sess:hover{border-color:var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.04);}
.sv-sess-ok{border-left:3px solid #10b981;}
.sv-sess-warning{border-left:3px solid #E88B00;background:linear-gradient(90deg,rgba(232,139,0,.04),var(--white) 20%);}
.sv-sess-critical{
  border-left:3px solid #dc2626;background:linear-gradient(90deg,rgba(220,38,38,.06),var(--white) 20%);
  animation:svPulse 2.5s ease-in-out infinite;
}
@keyframes svPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}
  50%{box-shadow:0 0 0 3px rgba(220,38,38,.08);}
}
.sv-sess-main{flex:1;min-width:0;}
.sv-sess-hdr{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.sv-sess-name{
  font-size:13.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.sv-sess-name i{color:var(--muted);font-size:14px;}
.sv-status-chip{
  padding:2px 8px;border-radius:10px;
  font-size:10.5px;font-weight:600;
  flex-shrink:0;
}
.sv-status-waiting{background:#fff8e1;color:#7a5a00;}
.sv-status-active{background:#d1fae5;color:#065f46;}
.sv-status-closed{background:#e5e7eb;color:#6b7280;}
.sv-sess-preview{
  font-size:12px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;margin-bottom:6px;line-height:1.4;
}
.sv-sess-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:11px;
}
.sv-agent-tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;background:rgba(25,118,210,.08);color:var(--blue);
  border-radius:10px;font-weight:600;
}
.sv-agent-tag.sv-unassigned{background:#fff8e1;color:#7a5a00;}
.sv-agent-tag i{font-size:9px;}
.sv-meta-item{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--muted);font-weight:500;
}
.sv-wait-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;background:rgba(220,38,38,.12);color:#dc2626;
  border-radius:10px;font-weight:700;
}
.sv-sess-actions{
  display:flex;flex-direction:column;gap:5px;flex-shrink:0;
}
.sv-sess-actions button{padding:5px 8px;min-width:32px;}

/* Agent workload panel */
.sv-agent-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
}
.sv-avatar,.sv-avatar-ini{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
}
.sv-avatar{object-fit:cover;}
.sv-avatar-ini{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;
  font-size:12px;font-weight:700;
}
.sv-agent-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px var(--white);
}
.sv-agent-info{flex:1;min-width:0;}
.sv-agent-name{font-size:13px;font-weight:600;color:var(--text);}
.sv-agent-sub{font-size:10.5px;color:var(--muted);}
.sv-agent-chats{
  font-size:11px;font-weight:700;color:var(--text);
  white-space:nowrap;
}
.sv-agent-load{
  width:60px;height:4px;background:var(--hover);
  border-radius:2px;overflow:hidden;
}
.sv-agent-load-bar{height:100%;border-radius:2px;transition:width .3s;}

/* Empty state */
.sv-empty{
  text-align:center;padding:60px 20px;color:var(--muted);
}

/* Chat peek messages */
.sv-msg{
  padding:10px 12px;
  border-radius:10px;margin-bottom:8px;
  max-width:88%;
}
.sv-msg-agent{background:rgba(25,118,210,.08);margin-left:auto;border-bottom-right-radius:4px;}
.sv-msg-customer{background:var(--hover);margin-right:auto;border-bottom-left-radius:4px;}
.sv-msg-system{background:rgba(0,0,0,.03);text-align:center;font-size:11px;color:var(--muted);font-style:italic;margin:4px auto;max-width:100%;}
.sv-msg-hdr{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-bottom:4px;font-size:11px;
}
.sv-msg-hdr strong{font-weight:700;color:var(--text);}
.sv-msg-text{
  font-size:13px;line-height:1.5;color:var(--text);
  word-wrap:break-word;white-space:pre-wrap;
}

/* Responsive: stack grid on narrow */
@media (max-width:900px){
  #sv-grid{grid-template-columns:1fr !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   WHISPER TOAST (für Agent — Tipp vom Supervisor)
   ═══════════════════════════════════════════════════════════════════ */
.whisper-toast{
  background:linear-gradient(135deg,#ede9fe 0%,#f5f3ff 100%);
  border:1.5px solid #7c3aed;
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 12px 28px rgba(124,58,237,.25),0 4px 10px rgba(0,0,0,.08);
  color:#4c1d95;
  min-width:300px;max-width:380px;
  animation:wtSlideIn .4s cubic-bezier(.22,.9,.28,1);
  position:relative;
}
.whisper-toast::before{
  content:'';position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;height:3px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa,#7c3aed);
  background-size:200% 100%;
  border-radius:14px 14px 0 0;
  animation:wtGlow 3s linear infinite;
}
@keyframes wtGlow{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes wtSlideIn{
  from{opacity:0;transform:translateX(20px) scale(.95);}
  to{opacity:1;transform:translateX(0) scale(1);}
}
.whisper-toast.wt-exit{
  animation:wtSlideOut .3s ease-out forwards;
}
@keyframes wtSlideOut{
  to{opacity:0;transform:translateX(20px);}
}
.wt-hdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;}
.wt-icon{
  width:32px;height:32px;border-radius:8px;
  background:#7c3aed;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  flex-shrink:0;
}
.wt-meta{flex:1;min-width:0;}
.wt-from{font-size:13px;font-weight:700;color:#4c1d95;}
.wt-time{font-size:10.5px;color:#7c3aed;opacity:.8;text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.wt-close{
  width:22px;height:22px;padding:0;flex-shrink:0;
  background:transparent;border:none;border-radius:5px;
  color:#7c3aed;font-size:10px;cursor:pointer;opacity:.7;
  display:flex;align-items:center;justify-content:center;
}
.wt-close:hover{opacity:1;background:rgba(124,58,237,.1);}
.wt-msg{
  font-size:13px;line-height:1.55;color:#4c1d95;
  white-space:pre-wrap;word-wrap:break-word;
  background:rgba(255,255,255,.5);padding:10px 12px;border-radius:8px;
  border-left:3px solid #7c3aed;
}
.wt-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;}
.wt-actions .btn-sm{padding:5px 10px;font-size:11px;}

body.dark-theme .sv-stat-card,body.theme-dark .sv-stat-card,
body.dark-theme .sv-sess,body.theme-dark .sv-sess,
body.dark-theme .sv-agent-row,body.theme-dark .sv-agent-row{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}
body.dark-theme .whisper-toast,body.theme-dark .whisper-toast{
  background:linear-gradient(135deg,rgba(124,58,237,.15) 0%,rgba(124,58,237,.08) 100%);
  color:#c4b5fd;
}
body.dark-theme .wt-from,body.theme-dark .wt-from,
body.dark-theme .wt-msg,body.theme-dark .wt-msg{color:#e9d5ff;}
body.dark-theme .wt-msg,body.theme-dark .wt-msg{background:rgba(0,0,0,.2);}

/* ═══════════════════════════════════════════════════════════════════
   BROADCAST BANNER (Agent-side)
   ═══════════════════════════════════════════════════════════════════ */
#broadcast-banners{
  position:relative;width:100%;
  z-index:20;
}
.broadcast-banner{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 20px;
  border-bottom:3px solid;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  animation:bcbSlideDown .4s cubic-bezier(.22,.9,.28,1);
  font-size:13.5px;
  line-height:1.5;
}
@keyframes bcbSlideDown{
  from{opacity:0;transform:translateY(-12px);}
  to{opacity:1;transform:translateY(0);}
}
.broadcast-banner.bcb-exit{
  animation:bcbSlideUp .3s ease-out forwards;
}
@keyframes bcbSlideUp{
  to{opacity:0;transform:translateY(-16px);max-height:0;padding-top:0;padding-bottom:0;}
}
.bcb-icon{
  font-size:22px;flex-shrink:0;line-height:1;
  margin-top:1px;
}
.bcb-content{flex:1;min-width:0;}
.bcb-title{
  font-size:14px;font-weight:700;margin-bottom:3px;
  letter-spacing:.01em;
}
.bcb-msg{
  white-space:pre-wrap;word-wrap:break-word;
}
.bcb-from{
  font-size:11px;opacity:.75;margin-top:5px;font-style:italic;
}
.bcb-ack{
  padding:7px 14px;
  background:rgba(255,255,255,.85);
  border:1px solid currentColor;
  border-radius:8px;
  color:inherit;
  font-size:12px;font-weight:700;cursor:pointer;
  flex-shrink:0;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;
  white-space:nowrap;
}
.bcb-ack:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
@media (max-width:600px){
  .broadcast-banner{flex-wrap:wrap;padding:12px 14px;}
  .bcb-ack{width:100%;justify-content:center;margin-top:6px;}
}

/* ═══════════════════════════════════════════════════════════════════
   BROADCAST ADMIN LIST + CREATE MODAL
   ═══════════════════════════════════════════════════════════════════ */
.bc-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
  transition:box-shadow .15s;
}
.bc-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.05);}
.bc-hdr{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:10px;
}
.bc-icon{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;flex-shrink:0;
}
.bc-title-wrap{flex:1;min-width:0;}
.bc-title{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:3px;line-height:1.3;
}
.bc-meta{
  font-size:11.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
}
.bc-status{
  display:inline-flex;align-items:center;gap:4px;
  font-weight:600;
}
.bc-actions{display:flex;gap:4px;flex-shrink:0;}
.bc-actions button{padding:5px 9px;}
.bc-msg{
  padding:10px 14px;margin:0 0 10px;
  background:var(--hover);border-radius:8px;
  font-size:13px;color:var(--text);
  white-space:pre-wrap;word-wrap:break-word;line-height:1.5;
}
.bc-footer{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:11px;color:var(--muted);
}
.bc-footer span{display:inline-flex;align-items:center;gap:4px;}
.bc-footer i{font-size:10px;}

/* Level picker in create modal */
.bc-level-picker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.bc-level-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 8px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:8px;font-size:12px;font-weight:600;
  color:var(--text);cursor:pointer;transition:all .15s;
}
.bc-level-btn:hover{border-color:var(--lc);color:var(--lc);}
.bc-level-btn.active{
  background:color-mix(in srgb,var(--lc) 10%,transparent);
  border-color:var(--lc);color:var(--lc);
}
.bc-level-btn i{font-size:12px;}
@media (max-width:500px){.bc-level-picker{grid-template-columns:repeat(2,1fr);}}

body.dark-theme .bc-card,body.theme-dark .bc-card{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}
body.dark-theme .bcb-ack,body.theme-dark .bcb-ack{background:rgba(0,0,0,.3);}

/* ═══════════════════════════════════════════════════════════════════
   SHARED SHORTCUTS POOL
   ═══════════════════════════════════════════════════════════════════ */
.ss-cat-chip-wrap{display:inline-flex;align-items:center;position:relative;}
.ss-cat-chip{
  padding:6px 12px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:16px;
  font-size:12px;font-weight:500;color:var(--text);
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.ss-cat-chip:hover{border-color:var(--blue);color:var(--blue);}
.ss-cat-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.ss-cat-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:rgba(0,0,0,.08);font-size:10px;font-weight:700;
  border-radius:9px;line-height:1;
}
.ss-cat-chip.active .ss-cat-count{background:rgba(255,255,255,.25);color:#fff;}
.ss-cat-del{
  width:18px;height:18px;padding:0;margin-left:-6px;
  background:var(--hover);border:none;border-radius:50%;
  color:var(--muted);font-size:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.ss-cat-chip-wrap:hover .ss-cat-del{opacity:1;}
.ss-cat-del:hover{background:#fee2e2;color:#dc2626;}

.ss-list{display:flex;flex-direction:column;gap:8px;}
.ss-row{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;
  transition:border-color .15s;
}
.ss-row:hover{border-color:var(--blue);}
.ss-row-hdr{
  display:grid;grid-template-columns:2fr 1fr 80px auto;gap:8px;
  margin-bottom:8px;
}
.ss-label-input,.ss-cat-select,.ss-key-input{
  padding:7px 10px;
  background:var(--white);border:1.5px solid var(--border);border-radius:7px;
  font-size:13px;color:var(--text);
  transition:border-color .15s;
}
.ss-label-input{font-weight:600;}
.ss-key-input{font-family:'SFMono-Regular',Consolas,monospace;text-align:center;}
.ss-label-input:focus,.ss-cat-select:focus,.ss-key-input:focus{
  outline:none;border-color:var(--blue);
}
.ss-del-btn{
  width:34px;height:34px;padding:0;
  background:transparent;border:1px solid var(--border);border-radius:7px;
  color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.ss-del-btn:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626;}
.ss-content-area{
  width:100%;box-sizing:border-box;
  padding:9px 12px;
  background:var(--hover);border:1.5px solid var(--border);border-radius:7px;
  font-size:12.5px;color:var(--text);font-family:inherit;
  line-height:1.55;resize:vertical;min-height:50px;
  transition:border-color .15s;
}
.ss-content-area:focus{
  outline:none;border-color:var(--blue);background:var(--white);
}

@media (max-width:600px){
  .ss-row-hdr{grid-template-columns:1fr 1fr;gap:6px;}
  .ss-row-hdr .ss-key-input{grid-column:1;}
  .ss-row-hdr .ss-del-btn{grid-column:2;justify-self:end;}
}

body.dark-theme .ss-row,body.theme-dark .ss-row,
body.dark-theme .ss-cat-chip,body.theme-dark .ss-cat-chip{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* Shared shortcut buttons (team pool) — visually distinct from personal */
.sc-btn.sc-btn-shared{
  background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(124,58,237,.02));
  border-color:rgba(124,58,237,.25);
  color:#4c1d95;
}
.sc-btn.sc-btn-shared:hover{
  background:rgba(124,58,237,.1);
  border-color:rgba(124,58,237,.4);
}
body.dark-theme .sc-btn.sc-btn-shared,body.theme-dark .sc-btn.sc-btn-shared{
  color:#c4b5fd;
  background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(124,58,237,.05));
}

/* ═══════════════════════════════════════════════════════════════════
   EMAIL TEMPLATE EDITOR
   ═══════════════════════════════════════════════════════════════════ */
.et-layout{
  display:grid;grid-template-columns:260px 1fr;gap:16px;
  align-items:flex-start;
}
.et-sidebar{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:14px;
  max-height:70vh;overflow-y:auto;
  position:sticky;top:8px;
}
.et-sidebar h4{
  margin:0 0 10px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.et-list-item{
  padding:10px 12px;margin-bottom:4px;
  background:transparent;border:1px solid transparent;border-radius:8px;
  cursor:pointer;transition:all .12s;
}
.et-list-item:hover{background:var(--hover);border-color:var(--border);}
.et-list-item.active{
  background:rgba(25,118,210,.08);border-color:var(--blue);
}
.et-list-label{
  font-size:13px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:6px;margin-bottom:3px;
}
.et-list-desc{
  font-size:11px;color:var(--muted);line-height:1.4;
}
.et-customized-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;background:var(--blue);color:#fff;
  border-radius:50%;font-size:8px;
}
.et-editor{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:18px;
}
.et-editor-hdr{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);
}
.et-vars-hint{
  background:var(--hover);padding:10px 12px;border-radius:8px;margin-bottom:14px;
  font-size:12px;color:var(--text);line-height:1.7;
}
.et-var-chip{
  display:inline-block;padding:2px 7px;margin:2px;
  background:rgba(25,118,210,.1);color:var(--blue);
  border-radius:5px;font-size:11px;font-family:monospace;
  cursor:pointer;transition:all .12s;
  border:1px solid transparent;
}
.et-var-chip:hover{
  background:rgba(25,118,210,.18);border-color:var(--blue);
  transform:translateY(-1px);
}
.et-preview-section{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
}
.et-preview-box{
  background:var(--hover);border:1px solid var(--border);border-radius:8px;
  padding:14px 16px;min-height:80px;
  font-size:13px;color:var(--text);line-height:1.55;
}
.et-prev-subj{
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border);
  font-size:13px;
}
.et-prev-body{
  white-space:pre-wrap;word-wrap:break-word;
  font-family:'SFMono-Regular',Consolas,monospace;
  font-size:12.5px;
}
.et-save-bar{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  text-align:right;
}

@media (max-width:900px){
  .et-layout{grid-template-columns:1fr;}
  .et-sidebar{position:relative;max-height:300px;}
}

body.dark-theme .et-sidebar,body.theme-dark .et-sidebar,
body.dark-theme .et-editor,body.theme-dark .et-editor,
body.dark-theme .et-vars-hint,body.theme-dark .et-vars-hint,
body.dark-theme .et-preview-box,body.theme-dark .et-preview-box{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   AUTO-RESPONSE RULES
   ═══════════════════════════════════════════════════════════════════ */
.ar-list{display:flex;flex-direction:column;gap:10px;}
.ar-card{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;transition:all .15s;
}
.ar-card:hover{border-color:var(--blue);box-shadow:0 2px 6px rgba(0,0,0,.04);}
.ar-card.ar-disabled{opacity:.55;}
.ar-hdr{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.ar-title-wrap{flex:1;min-width:0;}
.ar-title{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:3px;
}
.ar-meta{
  display:flex;flex-wrap:wrap;gap:12px;
  font-size:11.5px;color:var(--muted);
}
.ar-meta span{display:inline-flex;align-items:center;gap:4px;}
.ar-meta i{font-size:10px;}
.ar-actions{display:flex;gap:4px;flex-shrink:0;}
.ar-actions button{padding:5px 9px;}
.ar-triggers{
  background:var(--hover);padding:8px 12px;border-radius:7px;
  font-size:12px;color:var(--text);margin-bottom:6px;
  font-family:'SFMono-Regular',Consolas,monospace;
}
.ar-triggers i{color:var(--muted);margin-right:4px;}
.ar-response{
  background:rgba(25,118,210,.06);padding:8px 12px;border-radius:7px;
  font-size:12px;color:var(--text);line-height:1.5;
  border-left:3px solid var(--blue);
  white-space:pre-wrap;word-wrap:break-word;
}

/* Toggle switch */
.ar-toggle{
  position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;
}
.ar-toggle input{opacity:0;width:0;height:0;}
.ar-toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:var(--border);border-radius:22px;transition:.2s;
}
.ar-toggle-slider:before{
  content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.ar-toggle input:checked+.ar-toggle-slider{background:var(--blue);}
.ar-toggle input:checked+.ar-toggle-slider:before{transform:translateX(18px);}

body.dark-theme .ar-card,body.theme-dark .ar-card{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   WEBHOOK TESTER + INTEGRATIONS
   ═══════════════════════════════════════════════════════════════════ */
.wh-tab-btn:hover{background:var(--hover);}
.wh-tab-btn.wh-tab-active{color:var(--blue);}

.wh-history-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  transition:all .12s;
}
.wh-history-row:hover{border-color:var(--blue);}
.wh-status-badge{
  padding:3px 8px;border:1px solid;border-radius:6px;
  font-size:11px;font-weight:700;font-family:monospace;
  flex-shrink:0;min-width:42px;text-align:center;
}
.wh-history-meta{flex:1;min-width:0;overflow:hidden;}

.wh-presets-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;
}
.wh-preset-card{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;transition:all .15s;
}
.wh-preset-card:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(0,0,0,.05);}
.wh-preset-hdr{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.wh-preset-icon{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,#1976D2,#0D47A1);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.wh-preset-name{font-size:15px;font-weight:700;color:var(--text);}
.wh-preset-desc{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.3;}
.wh-preset-steps{
  font-size:12px;color:var(--text);line-height:1.55;margin-bottom:10px;
}
.wh-preset-steps ol{margin:6px 0 0 0;padding-left:22px;}
.wh-preset-steps li{margin-bottom:2px;}
.wh-preset-url{
  display:block;padding:6px 10px;
  background:var(--hover);border-radius:6px;
  font-family:monospace;font-size:11px;color:var(--muted);
  overflow-x:auto;white-space:nowrap;
}

body.dark-theme .wh-history-row,body.theme-dark .wh-history-row,
body.dark-theme .wh-preset-card,body.theme-dark .wh-preset-card{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   TAG MANAGER
   ═══════════════════════════════════════════════════════════════════ */
.tm-stat-card{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:14px;text-align:center;
}
.tm-stat-val{
  font-size:26px;font-weight:800;color:var(--blue);
  margin-bottom:3px;font-variant-numeric:tabular-nums;line-height:1;
}
.tm-stat-label{
  font-size:11px;color:var(--muted);font-weight:500;
  text-transform:uppercase;letter-spacing:.03em;
}

.tm-list{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;
}
.tm-hdr,.tm-row{
  display:grid;
  grid-template-columns:32px 1.5fr 56px 56px 60px 64px 90px 90px;
  gap:8px;align-items:center;
  padding:10px 14px;
}
.tm-hdr{
  background:var(--hover);border-bottom:1px solid var(--border);
  font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
.tm-row{
  font-size:12.5px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.tm-row:last-child{border-bottom:none;}
.tm-row:hover{background:var(--hover);}
.tm-row-selected{background:rgba(25,118,210,.05);}

.tm-tag-chip{
  display:inline-block;padding:3px 8px;
  background:rgba(25,118,210,.08);color:var(--blue);
  border:1px solid rgba(25,118,210,.3);border-radius:6px;
  font-size:12px;font-weight:600;font-family:'SFMono-Regular',Consolas,monospace;
}

@media (max-width:900px){
  .tm-hdr{display:none;}
  .tm-row{grid-template-columns:32px 1fr auto;gap:8px;}
  .tm-row > div:nth-child(n+3):not(:last-child){display:none;}
  .tm-row > div:nth-child(2)::after{content:' · '; opacity:.4;}
}

body.dark-theme .tm-stat-card,body.theme-dark .tm-stat-card,
body.dark-theme .tm-list,body.theme-dark .tm-list{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* ═══════════════════════════════════════════════════════════════════
   WIDGET PREVIEW / TESTER
   ═══════════════════════════════════════════════════════════════════ */
.wp-controls{
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:10px;
}
.wp-control-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.wp-device-switcher{
  display:inline-flex;background:var(--hover);padding:3px;border-radius:8px;gap:2px;
}
.wp-device-btn{
  padding:7px 14px;background:transparent;border:none;border-radius:6px;
  font-size:12px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
}
.wp-device-btn:hover{background:rgba(0,0,0,.04);}
.wp-device-btn.wp-device-active{
  background:var(--white);color:var(--blue);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

.wp-frame-wrap{
  background:#2d3748;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.1);
  margin:0 auto;
  transition:max-width .3s cubic-bezier(.22,.9,.28,1);
  display:flex;flex-direction:column;
}
.wp-frame-wrap.wp-device-desktop{max-width:1280px;}
.wp-frame-wrap.wp-device-tablet{max-width:768px;}
.wp-frame-wrap.wp-device-mobile{max-width:375px;}

.wp-frame-top{
  background:linear-gradient(180deg,#4a5568,#2d3748);
  padding:8px 12px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid rgba(0,0,0,.3);
}
.wp-traffic-lights{display:flex;gap:6px;}
.wp-traffic-lights span{
  width:11px;height:11px;border-radius:50%;
  display:inline-block;
}
.wp-traffic-lights span:nth-child(1){background:#ff5f57;}
.wp-traffic-lights span:nth-child(2){background:#febc2e;}
.wp-traffic-lights span:nth-child(3){background:#28c840;}
.wp-addr-bar{
  flex:1;background:rgba(255,255,255,.1);
  padding:4px 10px;border-radius:5px;
  font-family:'SFMono-Regular',Consolas,monospace;font-size:11px;color:#e2e8f0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}

#wp-iframe{
  height:calc(100vh - 340px);min-height:500px;
  background:#fff;
}
.wp-device-mobile #wp-iframe{height:calc(100vh - 280px);min-height:600px;}

@media (max-width:700px){
  .wp-device-btn span{display:none;}
  .wp-frame-wrap.wp-device-desktop,
  .wp-frame-wrap.wp-device-tablet,
  .wp-frame-wrap.wp-device-mobile{max-width:100%;}
}

body.dark-theme .wp-controls,body.theme-dark .wp-controls{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}
body.dark-theme .wp-device-btn.wp-device-active,body.theme-dark .wp-device-btn.wp-device-active{
  background:rgba(255,255,255,.08);color:#90caf9;
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN NAV — Collapsible Groups + Search
   ═══════════════════════════════════════════════════════════════════ */
.admin-nav-search{
  position:sticky;top:0;z-index:2;
  padding:12px 14px;
  background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
}
.admin-nav-search i{color:var(--muted);font-size:12px;}
.admin-nav-search input{
  flex:1;min-width:0;
  padding:6px 10px;
  background:var(--hover);
  border:1px solid transparent;border-radius:7px;
  font-size:12.5px;color:var(--text);
  transition:all .15s;
}
.admin-nav-search input:focus{
  outline:none;background:var(--white);border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,117,153,.1);
}

.admin-nav-group{border-bottom:1px solid var(--border);}
.admin-nav-group:last-child{border-bottom:none;}
.admin-nav-group-hdr{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  cursor:pointer;
  user-select:none;
  font-size:12px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
  transition:all .12s;
  background:transparent;
}
.admin-nav-group-hdr:hover{
  background:var(--hover);
  color:var(--text);
}
.admin-nav-chevron{
  font-size:10px;color:var(--muted);
  transition:transform .2s ease-out;
  width:12px;text-align:center;flex-shrink:0;
}
.admin-nav-group-icon{
  font-size:13px;
  color:var(--blue);
  width:16px;text-align:center;flex-shrink:0;
}
.admin-nav-group-collapsed .admin-nav-chevron{
  transform:rotate(-90deg);
}
.admin-nav-group-body{
  max-height:500px;
  overflow:hidden;
  transition:max-height .25s ease-out,opacity .15s ease-out;
}
.admin-nav-group-collapsed .admin-nav-group-body{
  max-height:0;
  opacity:0;
  pointer-events:none;
}
/* Subtle indent for items in groups */
.admin-nav-group-body .admin-nav-item{
  padding-left:26px;
  font-size:12.5px;
}
.admin-nav-group-body .admin-nav-item .nav-icon{
  width:18px;font-size:12px;
}
.admin-nav-group-body .admin-nav-item.sel{
  border-left-width:3px;
  font-weight:700;
}

/* Search mode: highlight */
.admin-nav-group-searching .admin-nav-group-hdr{
  color:var(--blue);
}
.admin-nav-group-searching .admin-nav-chevron{
  opacity:.3;
}

/* Show group header even when empty but visible (via search) */
.admin-nav-group-searching .admin-nav-group-body{
  max-height:500px;
  opacity:1;
}

/* Hide old h4 (legacy selectors) in case CSS conflicts */
.admin-nav > h4{display:none !important;}

/* Mobile: collapse on small screens */
@media (max-width:860px){
  .admin-nav-group-hdr{padding:9px 12px;font-size:11px;}
  .admin-nav-group-body .admin-nav-item{padding-left:20px;font-size:12px;}
  .admin-nav-search{padding:10px 12px;}
}

/* Dark theme */
body.dark-theme .admin-nav-search input,
body.theme-dark .admin-nav-search input{
  background:rgba(255,255,255,.05);
  color:#d4dce6;
}
body.dark-theme .admin-nav-search input:focus,
body.theme-dark .admin-nav-search input:focus{
  background:rgba(255,255,255,.08);
}
body.dark-theme .admin-nav-group-hdr:hover,
body.theme-dark .admin-nav-group-hdr:hover{
  background:rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════════════
   AUTO-RULE EXAMPLES MODAL
   ═══════════════════════════════════════════════════════════════════ */
.ar-ex-list{display:flex;flex-direction:column;gap:8px;}
.ar-ex-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  background:var(--white);border:1px solid var(--border);border-radius:9px;
  cursor:pointer;transition:all .12s;
}
.ar-ex-item:hover{border-color:var(--blue);}
.ar-ex-item input[type="checkbox"]{margin-top:3px;flex-shrink:0;cursor:pointer;}
.ar-ex-item.ar-ex-exists{opacity:.55;cursor:not-allowed;}
.ar-ex-body{flex:1;min-width:0;}
.ar-ex-hdr{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:13px;
}
.ar-ex-badge{
  font-size:10px;font-weight:600;padding:2px 7px;
  background:#fef3c7;color:#92400e;border-radius:9px;
}
.ar-ex-triggers{
  font-size:11px;margin-bottom:5px;
  display:flex;flex-wrap:wrap;gap:4px;
}
.ar-ex-triggers code{
  padding:1px 6px;background:var(--hover);
  border-radius:4px;font-family:monospace;color:var(--blue);
}
.ar-ex-preview{
  font-size:11.5px;color:var(--muted);
  line-height:1.5;padding:6px 10px;
  background:rgba(25,118,210,.04);border-radius:6px;
  border-left:2px solid var(--blue);
}

body.dark-theme .ar-ex-item,body.theme-dark .ar-ex-item{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

/* Email Template Sidebar: Group Headers */
.et-group{margin-bottom:4px;}
.et-group-hdr{
  padding:8px 10px 5px;
  font-size:10px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;
  border-top:1px solid var(--border);
  margin-top:4px;
  display:flex;align-items:center;gap:6px;
}
.et-group:first-child .et-group-hdr{border-top:none;margin-top:0;}
.et-group-hdr i{font-size:11px;color:var(--blue);}

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN OVERHAUL — Mobile/Tablet/Desktop + 200% Zoom Support
   Last sweep: enforce safe defaults, prevent overflow on any viewport
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. UNIVERSAL SAFETY NETS ── */
*,*::before,*::after{
  min-width:0; /* Prevents flex children from overflowing */
}
html{
  overflow-x:hidden; /* No horizontal scroll on root */
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-wrap:break-word;
  -webkit-overflow-scrolling:touch;
}
img,svg,video{
  max-width:100%;
  height:auto;
}
input,textarea,select,button{
  max-width:100%; /* Prevents form elements from causing overflow */
}
textarea{
  resize:vertical; /* Only vertical by default — prevents horizontal stretch */
}
/* Long URLs/emails/codes wrap gracefully */
code,pre,.mono,[class*="url"],[class*="email"]{
  overflow-wrap:break-word;
  word-break:break-word;
}
pre{
  white-space:pre-wrap;
  max-width:100%;
  overflow-x:auto;
}

/* ── 2. CONTAINER SAFETY ── */
.screen,.app-wrap,.app-header,.admin-wrap,.panel,.panel-body,.panel-hdr{
  max-width:100%;
  box-sizing:border-box;
}
.panel-body{overflow-x:auto;} /* Allow internal scroll if table/code is wider */

/* ── 3. TABLES (long, dense data) ── */
table{
  max-width:100%;
}
/* Wrap tables in scroll containers where possible */
.table-wrap,.table-responsive,
.adm-table-wrap,.adm-table-container{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ── 4. MODAL RESPONSIVE ── */
.tn-modal-overlay{
  padding:10px !important; /* Ensure modal doesn't touch screen edge */
}
.tn-modal{
  max-width:calc(100vw - 20px) !important;
  max-height:calc(100vh - 20px);
  display:flex;
  flex-direction:column;
}
.tn-modal-body{
  overflow-y:auto;
  overflow-x:hidden;
  flex:1 1 auto;
  min-height:0;
}
.tn-modal-hdr,.tn-modal-ftr{flex-shrink:0;}
.tn-modal-ftr{flex-wrap:wrap;gap:8px;}

@media (max-width:600px){
  .tn-modal{
    max-width:100vw !important;
    max-height:100vh;
    border-radius:0 !important;
    width:100%;
  }
  .tn-modal-overlay{padding:0 !important;}
  .tn-modal-hdr,.tn-modal-body,.tn-modal-ftr{padding-left:14px;padding-right:14px;}
  .tn-modal-ftr{flex-direction:column-reverse;align-items:stretch;}
  .tn-modal-ftr > div{display:flex !important;flex-wrap:wrap;gap:6px;}
  .tn-modal-ftr button{flex:1 1 auto;min-width:0;}
}

/* ── 5. APP HEADER / TOP-NAV ── */
.app-header{
  /* flex-wrap controlled by breakpoint media queries at end of file */
  gap:8px;
}
@media (max-width:900px){
  .app-header{padding:8px 12px;}
  .app-logo img{height:26px !important;}
}
@media (max-width:600px){
  .app-header{
    flex-wrap:wrap;
    padding:6px 10px;
    gap:6px;
  }
  .app-logo{order:1;}
  .status-toggle{order:2;margin-left:auto;font-size:11px;padding:4px 8px;}
  /* Primary nav wraps below on narrow screens */
  .primary-nav,.nav-tabs,[id*="primary"]{
    order:3;flex-basis:100%;
    justify-content:space-around;
  }
}

/* ── 6. ADMIN NAV — Mobile toggle ── */
@media (max-width:860px){
  .admin-wrap{flex-direction:column;}
  .admin-nav{
    width:100% !important;
    max-height:50vh;
    overflow-y:auto;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .admin-nav-search{padding:8px 12px;}
  /* On mobile, auto-collapse all groups by default — user taps to expand */
  .admin-nav-group-body{transition:max-height .2s ease-out;}
  .admin-center{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
}
@media (max-width:600px){
  .admin-nav{max-height:40vh;}
  .admin-nav-group-hdr{padding:10px 12px;font-size:11px;}
  .admin-nav-group-body .admin-nav-item{padding:8px 12px 8px 20px;}
}

/* ── 7. FORMS & INPUTS ── */
.tn-row-grid{
  gap:10px;
}
@media (max-width:600px){
  .tn-row-grid{
    grid-template-columns:1fr !important;
  }
}
.tn-field > label{
  display:block;
  word-break:break-word;
}
.tn-select,.tn-textarea,.tn-input,
input[type="text"],input[type="email"],input[type="url"],input[type="number"],input[type="password"],
select,textarea{
  max-width:100%;
  box-sizing:border-box;
}

/* ── 8. BUTTONS — wrap when needed ── */
.btn-group,.button-row,[class*="actions"]{
  flex-wrap:wrap;
  gap:6px;
}
.btn,.btn-sm,button{
  max-width:100%;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
}

/* ── 9. CARDS & GRID LAYOUTS ── */
.stats-grid,.sh-grid,.tm-list,.bk-item,.bc-card,.ar-card,.sv-sess,.wh-preset-card,.ar-ex-item,
.sh-card,.sh-count-card,.sh-agent,.sv-stat-card,.sv-agent-row,.bk-item{
  max-width:100%;
  min-width:0;
}

/* ── 10. HEALTH / STATS / SUPERVISOR TABLES ── */
.sh-grid-4,.sh-grid-2{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
@media (max-width:600px){
  .sh-card-big{font-size:22px;}
  .sh-card{padding:12px;}
  .sh-agent-list{grid-template-columns:1fr;}
  .sh-counts{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
}

/* ── 11. SUPERVISOR GRID ── */
@media (max-width:860px){
  #sv-grid{grid-template-columns:1fr !important;}
  .sv-sess{flex-wrap:wrap;}
  .sv-sess-actions{flex-direction:row;width:100%;justify-content:flex-end;}
  .sv-sess-actions button{flex:0 0 auto;}
}

/* ── 12. TAG MANAGER TABLE ── */
@media (max-width:900px){
  .tm-hdr{display:none !important;}
  .tm-row{
    grid-template-columns:28px 1fr auto auto !important;
    gap:8px;row-gap:6px;
    padding:12px;
    border-bottom:1px solid var(--border);
  }
  .tm-row > div:nth-child(3),
  .tm-row > div:nth-child(4),
  .tm-row > div:nth-child(5),
  .tm-row > div:nth-child(6){
    grid-column:1 / -1;
    font-size:11px;color:var(--muted);
    display:flex;justify-content:space-between;align-items:center;
    padding:2px 0;
  }
  .tm-row > div:nth-child(3)::before{content:'Total: ';font-weight:600;}
  .tm-row > div:nth-child(4)::before{content:'Tasks: ';font-weight:600;}
  .tm-row > div:nth-child(5)::before{content:'Notizen: ';font-weight:600;}
  .tm-row > div:nth-child(6)::before{content:'Kontakte: ';font-weight:600;}
}

/* ── 13. WEBHOOK TABS ── */
@media (max-width:600px){
  .wh-tab-btn{padding:8px 10px;font-size:11px;}
  .wh-tab-btn span{display:inline;} /* Override earlier hide-on-mobile */
  .wh-presets-grid{grid-template-columns:1fr;}
  .wh-preset-url{font-size:10px;}
}

/* ── 14. EMAIL TEMPLATE EDITOR ── */
@media (max-width:900px){
  .et-layout{grid-template-columns:1fr !important;}
  .et-sidebar{max-height:35vh;position:relative;top:auto;}
  .et-editor-hdr{flex-wrap:wrap;gap:8px;}
}

/* ── 15. BACKUP LIST ── */
@media (max-width:600px){
  .bk-item{flex-wrap:wrap;}
  .bk-item-info{flex:1 1 calc(100% - 54px);min-width:0;}
  .bk-item-actions{flex:1 1 100%;justify-content:flex-end;margin-top:4px;}
  .bk-item-name{font-size:12px;}
}

/* ── 16. BROADCAST BANNER ── */
@media (max-width:600px){
  .broadcast-banner{flex-wrap:wrap;padding:12px 14px;gap:10px;}
  .bcb-content{flex-basis:100%;}
  .bcb-ack{width:100%;justify-content:center;}
}

/* ── 17. CHAT VIEW (Agent Panel) ── */
@media (max-width:860px){
  .chat-layout,.sess-panel,.chat-panel{
    flex-direction:column;
  }
  .sess-list-panel{
    max-height:40vh;
    width:100% !important;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .chat-messages{
    padding:8px 10px;
  }
  #agent-inp{
    min-height:44px;
  }
}

/* ── 18. WIDGET-PREVIEW IFRAME ── */
@media (max-width:860px){
  .wp-frame-wrap{
    max-width:100% !important;
    width:100%;
  }
  #wp-iframe{
    min-height:400px !important;
  }
}

/* ── 19. AUTO-RULES EXAMPLES MODAL ── */
@media (max-width:600px){
  .ar-ex-item{flex-wrap:wrap;padding:10px 12px;}
  .ar-ex-body{flex-basis:calc(100% - 28px);}
  .ar-ex-triggers{font-size:10px;}
  .ar-ex-triggers code{font-size:10px;}
}

/* ── 20. FONT SIZE AT 200% ZOOM ── */
/* When user zooms to 200%, effective width is halved. Use clamp() for fluid font sizes */
.sh-card-big,.sv-stat-val,.tm-stat-val,
h1,h2,h3,h4{
  overflow-wrap:break-word;
  word-break:normal;
}
h1{font-size:clamp(18px,2vw,24px);}
h2{font-size:clamp(16px,1.8vw,20px);}
h3{font-size:clamp(14px,1.5vw,17px);}

/* ── 21. DASHBOARD / TASKS / NOTES ── */
.tasks-grid,.notes-grid,.dashboard-grid,.stats-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:10px;
}
@media (max-width:600px){
  .task-card,.note-card{padding:12px;}
}

/* ── 22. PANEL HEADER — flex-wrap for too-many buttons ── */
.panel-hdr{
  flex-wrap:wrap;
  gap:10px;
  row-gap:8px;
}
.panel-hdr > h3{
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:break-word;
}
.panel-hdr > div{
  flex-wrap:wrap;
  gap:6px;
}

/* ── 23. USER-TABLE / PRODUCT-TABLE / FAQ-TABLE ── */
@media (max-width:900px){
  .user-row,.product-row,.faq-row{
    flex-wrap:wrap;
    gap:6px;
  }
}

/* ── 24. SHORTCUTS BAR (Agent) ── */
.shortcuts-bar,#sc-bar{
  flex-wrap:wrap;
  gap:4px;
}

/* ── 25. SAFETY for very narrow viewports (<320px) ── */
@media (max-width:319px){
  body{font-size:13px;}
  .btn-sm{padding:5px 8px;font-size:10.5px;}
  .panel-body{padding:12px;}
}

/* ── 26. TABLET PORTRAIT (~768px) ── */
@media (min-width:601px) and (max-width:860px){
  /* Ensure 2-column grids collapse nicely */
  .sh-grid-4{grid-template-columns:repeat(2,1fr);}
  .sh-counts{grid-template-columns:repeat(2,1fr);}
  .wh-presets-grid{grid-template-columns:1fr;}
}

/* ── 27. PREVENT HORIZONTAL SCROLL IN CENTER PANEL ── */
.admin-center,.panel,.panel-body{
  min-width:0;
}
.admin-center{
  flex:1 1 auto;
  min-width:0; /* Critical for flexbox children */
  overflow-x:hidden;
}

/* ── 28. SEARCH INPUTS & AUTOCOMPLETES ── */
.search-input,[type="search"]{
  max-width:100%;
  box-sizing:border-box;
}

/* ── 29. FILE UPLOAD / DRAG-DROP ZONES ── */
.upload-zone,.drop-zone{
  max-width:100%;
}

/* ── 30. DARK THEME SAFETY for new responsive rules ── */
body.dark-theme .sh-errors,
body.theme-dark .sh-errors{
  background:#1a1a2e;
}

/* ═══════════════════════════════════════════════════════════════════
   LOCATIONS / NIEDERLASSUNGEN
   ═══════════════════════════════════════════════════════════════════ */
.loc-list{display:flex;flex-direction:column;gap:8px;}
.loc-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
  transition:all .15s;
}
.loc-card:hover{box-shadow:0 2px 6px rgba(0,0,0,.05);}
.loc-card-child{
  margin-left:28px;
  position:relative;
}
.loc-card-child::before{
  content:'';position:absolute;left:-18px;top:28px;
  width:14px;height:14px;
  border-left:2px solid var(--border);border-bottom:2px solid var(--border);
  border-radius:0 0 0 6px;
}
.loc-card-inactive{opacity:.55;}
.loc-card-hdr{
  display:flex;align-items:flex-start;gap:12px;
}
.loc-card-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.loc-card-info{flex:1;min-width:0;}
.loc-card-title{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:3px;line-height:1.3;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.loc-code{
  font-size:10px;font-weight:700;padding:1px 6px;
  background:var(--hover);color:var(--muted);
  border-radius:5px;font-family:monospace;letter-spacing:.04em;
}
.loc-default{
  font-size:10px;font-weight:700;padding:2px 7px;
  background:#d1fae5;color:#065f46;border-radius:10px;
}
.loc-inactive{
  font-size:10px;font-weight:700;padding:2px 7px;
  background:#fee2e2;color:#991b1b;border-radius:10px;
}
.loc-card-desc{
  font-size:12px;color:var(--muted);margin-bottom:4px;line-height:1.4;
}
.loc-card-meta{
  font-size:11px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:12px;
}
.loc-card-meta span{display:inline-flex;align-items:center;gap:4px;}
.loc-card-meta i{font-size:10px;}
.loc-card-actions{display:flex;gap:4px;flex-shrink:0;}
.loc-card-actions button{padding:5px 9px;}

/* Icon picker in modal */
.loc-icon-picker{
  display:flex;gap:4px;flex-wrap:wrap;
  padding:6px;background:var(--hover);border-radius:8px;
}
.loc-icon-pick{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  background:var(--white);border:1.5px solid transparent;
  border-radius:7px;cursor:pointer;
  color:var(--muted);transition:all .12s;
  position:relative;
}
.loc-icon-pick input{position:absolute;opacity:0;pointer-events:none;}
.loc-icon-pick:hover{border-color:var(--blue);color:var(--blue);}
.loc-icon-pick:has(input:checked){
  background:var(--blue);border-color:var(--blue);color:#fff;
}
.loc-icon-pick i{font-size:14px;}

/* Location badge (used throughout for "pills") */
.loc-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:10px;
  font-size:10.5px;font-weight:700;
  background:rgba(25,118,210,.1);color:var(--blue);
  border:1px solid rgba(25,118,210,.25);
  white-space:nowrap;
}
.loc-badge i{font-size:9px;}

/* Location switcher in header (for cross-location users) */
.loc-switcher{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  color:#fff;font-size:11.5px;font-weight:600;
  cursor:pointer;transition:all .12s;
  position:relative;
}
.loc-switcher:hover{background:rgba(255,255,255,.15);}
.loc-switcher-dropdown{
  position:fixed;z-index:99999;
  min-width:220px;
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  overflow:hidden;
  display:none;
}
.loc-switcher-dropdown.open{display:block;}
.loc-switcher-item{
  padding:9px 12px;font-size:13px;color:var(--text);
  display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:background .1s;
}
.loc-switcher-item:hover{background:var(--hover);}
.loc-switcher-item.active{background:rgba(25,118,210,.1);color:var(--blue);font-weight:700;}
.loc-switcher-item i{font-size:12px;flex-shrink:0;}

body.dark-theme .loc-card,body.theme-dark .loc-card,
body.dark-theme .loc-icon-pick,body.theme-dark .loc-icon-pick{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}

@media (max-width:600px){
  .loc-card-child{margin-left:14px;}
  .loc-card-child::before{left:-12px;width:10px;height:10px;top:22px;}
  .loc-card-hdr{flex-wrap:wrap;}
  .loc-card-actions{flex-basis:100%;justify-content:flex-end;margin-top:4px;}
  .loc-icon-picker{justify-content:center;}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FINAL DESKTOP-RESIZE SWEEP — Critical intermediate viewport widths
   Fokus: 600-900px (tricky), 1024-1280px (tablet-desktop bridge), large displays
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Critical: admin-center shrinks between 600-900px ── */
@media (min-width:600px) and (max-width:900px){
  /* Admin-Nav appears ABOVE content instead of left sidebar */
  .admin-wrap{flex-direction:column !important;}
  .admin-nav{
    width:100% !important;
    max-height:260px;
    position:sticky;top:0;z-index:10;
  }
  .admin-center{
    width:100% !important;
    max-width:100vw;
    padding:12px;
  }
  /* Panels reflow */
  .panel{margin:0 0 14px 0;}
  .panel-hdr h3{font-size:15px;}
  /* Multi-column grids collapse to 2-col */
  .sh-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sh-counts{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* Stats-card row wraps nicely */
  .stats-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));}
  /* Button rows wrap */
  .panel-hdr > div{flex-wrap:wrap;gap:6px;}
}

/* ── Narrow desktop: 900-1100px ── */
@media (min-width:901px) and (max-width:1099px){
  .admin-nav{width:200px;flex-shrink:0;}
  .admin-nav-group-hdr{padding:10px 12px;font-size:11px;}
  .admin-nav-group-body .admin-nav-item{padding:7px 12px 7px 22px;font-size:12px;}
  .admin-nav-search{padding:10px 12px;}
  .panel{padding:14px;}
  .sh-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
}

/* ── Standard desktop: 1100-1400px ── */
@media (min-width:1100px) and (max-width:1399px){
  .admin-nav{width:215px;}
  .sh-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ── Large desktop: >1400px ── */
@media (min-width:1400px){
  .admin-nav{width:240px;}
  .admin-center{max-width:1600px;margin:0 auto;}
  .panel-body{max-width:100%;}
}

/* ── Critical: nav-tabs in primary header wrap gracefully ── */
@media (max-width:1100px){
  .header-nav,#primary-nav{flex-wrap:wrap;row-gap:4px;}
  .nav-tab{padding:6px 10px;font-size:12px;}
  .nav-tab .nav-label{font-size:11.5px;}
}
@media (max-width:760px){
  .nav-tab{padding:8px 10px;}
}

/* ── Chat layout: sessionlist + main panel at all widths ── */
@media (min-width:861px) and (max-width:1100px){
  .sess-list-panel{width:240px !important;flex-shrink:0;}
  .chat-panel{min-width:0;}
}
@media (min-width:1101px){
  .sess-list-panel{width:300px;flex-shrink:0;}
}

/* ── Tasks/Notes/Calendar grids at narrow widths ── */
@media (min-width:600px) and (max-width:900px){
  .tasks-columns,.notes-columns{grid-template-columns:1fr;}
  .note-card,.task-card{margin-bottom:10px;}
}

/* ── Users-table wraps at medium widths ── */
@media (max-width:900px){
  .users-table th,.users-table td{padding:8px 6px;font-size:11.5px;}
  .users-table th:nth-child(n+4),.users-table td:nth-child(n+4){
    display:none; /* Hide secondary columns on narrow */
  }
  .users-table th:last-child,.users-table td:last-child{
    display:table-cell !important; /* Keep actions column */
  }
}

/* ── Modal at unusual sizes ── */
@media (min-width:600px) and (max-width:900px){
  .tn-modal{max-width:calc(100vw - 40px) !important;}
}

/* ── Content-Editor: sidebar + preview at narrow widths ── */
@media (max-width:900px){
  .editor-with-preview{grid-template-columns:1fr !important;}
  .editor-preview-panel{max-height:40vh;overflow:auto;}
}

/* ── Statistics charts ── */
@media (max-width:900px){
  .chart-container,.stats-chart{max-width:100%;overflow-x:auto;}
  canvas{max-width:100% !important;height:auto !important;}
}

/* ── When user zooms to 150% or 200% ── */
@media (max-width:760px){
  /* 200% zoom at 1520px = ~760px effective */
  .admin-nav-group-body .admin-nav-item{font-size:13px;}
  .btn,.btn-sm{font-size:12px;padding:6px 10px;}
  .panel-hdr h3{font-size:14px;}
}

/* ── Super-small viewports (320px, 360px) ── */
@media (max-width:400px){
  .app-header{padding:5px 8px;gap:4px;}
  .app-logo img{height:22px !important;}
  .status-toggle{padding:3px 7px;font-size:10px;}
  .admin-nav-btn{padding:4px 8px;font-size:11px;}
  .admin-nav-btn-label{display:none;}
  .panel{padding:10px;border-radius:8px;}
  .panel-hdr h3{font-size:13px;}
  /* Location switcher becomes icon-only */
  .loc-switcher span{display:none;}
  .loc-switcher{padding:4px 7px;}
}

/* ── Final safety: no element ever overflows ── */
.screen,.app-wrap,.admin-wrap,.admin-center,.admin-nav,
.panel,.panel-body,.chat-layout,
.tn-modal-body,.tn-row-grid,
.form-row,.et-layout{
  min-width:0;
  max-width:100%;
}

/* ── Fix for containers that use display:flex with children that should shrink ── */
.panel-body > *,.admin-center > *{min-width:0;}

/* ── Scroll containers for unusually-wide content (long tables, code blocks) ── */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}

/* ═══════════════════════════════════════════════════════════════════
   DROPDOWN: Full-width ONLY on real touch devices (phones) — 
   not on zoomed desktop where viewport is still "phone-like" but input is mouse
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:500px) and (pointer:coarse){
  .dd-menu{left:8px !important;right:8px !important;min-width:auto !important;max-width:none !important;}
  /* Prefs-Menu braucht eigene Zentrierung (wird per JS als Modal positioniert) */
  #prefs-menu{
    left:50% !important;
    right:auto !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:calc(100vw - 32px) !important;
    max-width:360px !important;
    max-height:80vh !important;
    overflow-y:auto !important;
    border-radius:16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER-NAV RESPONSIVE REDESIGN — Icons with Hover-Tooltips on narrow screens
   Strategy:
   - ≥1280px full-width : Icons + Labels (default)
   - 760-1279px (medium): Icons only, expand on hover to reveal label
   - <760px (small)     : Icons only, compact, native title tooltip
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Medium viewport: icon-only, label as TOOLTIP (no layout shift) ── */
@media (max-width:1279px){
  .nav-tab{
    padding:10px 12px;
    gap:0;
    min-width:42px;
    justify-content:center;
    position:relative;
  }
  .nav-tab i{font-size:15px;opacity:1;}
  /* Label hidden — shown as floating tooltip via ::after */
  .nav-tab .nav-label{display:none;}
  /* Active tab shows label inline (so user sees current location) */
  .nav-tab.active{padding:10px 14px;gap:7px;}
  .nav-tab.active .nav-label{display:inline-block;max-width:160px;opacity:1;margin-left:4px;}
  /* Tooltip on hover — positioned below tab, absolute → no layout impact */
  .nav-tab:not(.active)::after{
    content:attr(title);
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%) translateY(-4px) scale(.9);
    transform-origin:top center;
    opacity:0;
    pointer-events:none;
    background:rgba(10,20,30,.94);
    color:#fff;
    font-size:11.5px;
    font-weight:600;
    padding:5px 10px;
    border-radius:6px;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transition:opacity .14s,transform .14s;
    z-index:500;
  }
  .nav-tab:not(.active):hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
    transition-delay:.2s; /* Slight delay so it's not triggered by stray hovers */
  }
  /* Unread badge: anchored to corner when label is hidden */
  .nav-tab .unread-badge{
    position:absolute;
    top:2px;right:2px;
    margin:0;
    padding:0 5px;
    min-width:15px;height:15px;
    border-radius:8px;
    font-size:9.5px;
    line-height:15px;
    box-shadow:0 0 0 2px var(--dark,#0d3d52);
  }
}

/* ── Very narrow viewport — compact with native tooltip only ── */
@media (max-width:760px){
  .nav-tab{
    padding:8px 10px !important;
    min-width:36px;
    min-height:34px;
    border-radius:10px;
  }
  .nav-tab i{font-size:14px !important;}
  /* At this size, hover-label is awkward — hide completely, rely on title attr */
  .nav-tab .nav-label{display:none !important;}
  .nav-tab.active .nav-label{display:none !important;}
  .header-nav{margin:0 6px;gap:4px;}
}

/* ── Extra-small (<400px) ── */
@media (max-width:399px){
  .nav-tab{padding:6px 8px !important;min-width:32px;}
  .nav-tab i{font-size:13px !important;}
  .header-nav{gap:3px;margin:0 4px;}
}

/* ── Prevent wrapping — nav scrolls horizontally if really needed ── */
.header-nav{
  flex-wrap:nowrap !important;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  min-width:0;
  /* Safety: in single-row mode with limited space, nav still shrinks/scrolls but never vanishes */
  flex:1 1 auto;
}
.header-nav::-webkit-scrollbar{display:none;}

/* ── Below 640px (single-row ultra-compact): make SURE nav stays visible ── */
@media (max-width:639px){
  .header-nav{
    flex:1 1 0% !important; /* Take remaining space, allow shrink */
    min-width:40px !important; /* At least one icon visible */
    margin:0 4px !important;
    padding:0;
    order:initial;
    flex-basis:auto !important;
    border-top:none;
    background:transparent;
  }
  /* On single row, compact but always visible icons */
  .header-nav .nav-tab{
    padding:6px 9px !important;
    min-width:34px;
    flex-shrink:0;
  }
  .header-nav .nav-tab .nav-label{display:none !important;}
  /* Keep Profile/Prefs/Admin visible but compact */
  .header-right{gap:3px !important;flex-shrink:0;}
  .app-header{padding:6px 10px !important;gap:4px;}
}

/* ── Header baseline (two-row fallback controlled via breakpoints below) ── */
.app-header{
  align-items:center;
  gap:6px;
  padding:8px 14px;
  min-height:56px;
}
.app-logo{flex-shrink:0;}
.status-toggle{flex-shrink:0;}
.loc-switcher-wrap{flex-shrink:0;position:relative;z-index:9999;}
.header-right{
  flex-shrink:0;
  margin-left:auto;
  display:flex;align-items:center;gap:8px;
}

/* ── Admin button: icon-only on medium, label on wide ── */
@media (max-width:1279px){
  .admin-nav-btn .admin-nav-btn-label{display:none;}
  .admin-nav-btn{min-width:38px;justify-content:center;position:relative;}
  /* Tooltip below button */
  .admin-nav-btn::after{
    content:attr(title);
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%) translateY(-4px) scale(.9);
    transform-origin:top center;
    opacity:0;pointer-events:none;
    background:rgba(10,20,30,.94);color:#fff;
    font-size:11.5px;font-weight:600;
    padding:5px 10px;border-radius:6px;
    white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    transition:opacity .14s,transform .14s;
    z-index:500;
  }
  .admin-nav-btn:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0) scale(1);
    transition-delay:.2s;
  }
}
@media (max-width:760px){
  .admin-nav-btn{padding:6px 10px;}
  .admin-nav-btn .admin-nav-btn-label{display:none !important;}
}

/* ── Ensure prefs-btn and profile chip don't push out ── */
@media (max-width:1100px){
  .profile-chip .ha-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:760px){
  .profile-chip .ha-name{display:none;}
  .profile-chip{padding:4px;}
}

/* ── Status toggle: compact on narrow ── */
@media (max-width:900px){
  .status-toggle{padding:4px 10px;font-size:11px;}
}
@media (max-width:500px){
  .status-toggle span{display:none;}
  .status-toggle{padding:6px 8px;}
}

/* ── Logo shrinks gradually ── */
@media (max-width:1100px){
  .app-logo img{height:28px !important;}
}
@media (max-width:760px){
  .app-logo img{height:24px !important;}
}
@media (max-width:400px){
  .app-logo img{height:22px !important;}
  .app-header{padding:6px 8px;}
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FINAL HEADER POLISH — Progressive compaction + Two-Row Fallback
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── ha-name (Profile name) hides earlier — 1024px instead of 760px ── */
@media (max-width:1024px){
  .profile-chip .ha-name{display:none !important;}
  .profile-chip{padding:3px 4px 3px 4px;gap:4px;}
  .profile-chip .profile-chip-gear{margin-left:2px;font-size:11px;}
}

/* ── Intermediate: even earlier for narrow laptops ── */
@media (max-width:1150px){
  .profile-chip .ha-name{max-width:90px;font-size:12px;}
}

/* ── Header: BASE STATE = Single-Row, Natural Order ──
   Logo → Status → Location → Primary-Nav → Admin/Prefs/Profile
   flex-wrap:nowrap enforces single row. If nav content doesn't fit,
   JS detects overflow and toggles .header-wrapped class which activates
   the 2-row layout (nav ABSOLUTELY POSITIONED below → first row stays 52px).
   Top-row items have flex-shrink so they adapt to available space without wrapping. */
.app-header{
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  min-height:52px;
  height:auto;
  overflow:hidden;
  position:relative; /* Required for absolute nav in wrapped state */
}
/* Natural visual order: logo first, header-right last */
.app-logo         {order:1;flex-shrink:0;flex-basis:auto;}
.status-toggle    {order:2;flex-shrink:1;min-width:0;flex-basis:auto;}
.loc-switcher-wrap{order:3;flex-shrink:1;min-width:0;flex-basis:auto;}
.header-nav       {order:4;flex:1 1 auto;min-width:0;}
.header-right     {order:5;flex-shrink:0;margin-left:auto;white-space:nowrap;display:flex;align-items:center;}

/* ── WRAPPED STATE — Nav is ABSOLUTELY POSITIONED below the first row
   This keeps first row EXACTLY 52px (same as unwrapped).
   Nav sits as sub-bar from Y=52, full width (left:0 right:0). ── */
.app-header.header-wrapped{
  overflow:visible;        /* Let sub-bar be visible */
  padding-bottom:54px;     /* Reserve space for absolutely-positioned nav (50px nav + 4px breathing room) */
  /* NO padding-top change — first row stays identical to unwrapped */
}
.app-header.header-wrapped .header-nav{
  position:absolute !important;
  top:52px !important;           /* Right after first-row (min-height) */
  left:0 !important;
  right:0 !important;
  width:auto !important;
  height:50px !important;        /* 50px — roomy sub-bar */
  margin:0 !important;
  padding:8px 20px 10px 20px !important; /* 8px top, 10px bottom — tabs visually centered with extra breathing room below */
  flex:0 0 auto !important;      /* Absolute removes from flex flow */
  order:0 !important;
  background:rgba(0,0,0,.15);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:4px;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:visible;
  box-shadow:inset 0 3px 6px -3px rgba(0,0,0,.2);
  box-sizing:border-box;
  min-width:0;
}
/* Tab styling stays identical regardless of wrap state —
   this ensures JS measurements are consistent */
.app-header.header-wrapped .header-nav .nav-tab{
  padding:0 12px !important;
  gap:5px !important;
  font-size:12px !important;
  height:32px !important;
  min-height:32px !important;
}
.app-header.header-wrapped .header-nav .nav-tab .nav-label{
  max-width:160px;opacity:1;margin-left:4px;display:inline-block;font-size:11.5px;
}
.app-header.header-wrapped .header-nav .nav-tab i{font-size:13px;}
/* In wrapped state, disable tooltip on nav-tabs (labels are visible) */
.app-header.header-wrapped .header-nav .nav-tab::after{display:none !important;}

/* ── Very compact single-row for really narrow (<640px) ── */
@media (max-width:639px){
  .app-header{
    flex-wrap:nowrap !important;
    padding:6px 10px;
    gap:4px;
    min-height:48px;
  }
}

/* ── Prefs button stays visible throughout ── */
.prefs-btn{flex-shrink:0;}
@media (max-width:900px){
  .prefs-btn{padding:6px 9px;font-size:13px;}
}

/* ── Header-right: tighter gaps on narrow ── */
@media (max-width:1100px){
  .header-right{gap:5px !important;}
}
@media (max-width:760px){
  .header-right{gap:3px !important;}
}

/* ── Second-row scroll hint: subtle gradient if overflow ── */
@media (min-width:640px) and (max-width:960px){
  .header-nav{
    position:relative;
    scrollbar-width:thin;
  }
  .header-nav::-webkit-scrollbar{height:2px;}
  .header-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px;}
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER SAFETY: Nav always visible, header bg always covers content
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ultra-narrow fallback: <400px, everything tiny but reachable ── */
@media (max-width:399px){
  .app-header{
    padding:5px 8px !important;
    gap:3px !important;
    min-height:44px;
  }
  .header-nav{
    gap:2px !important;
    margin:0 2px !important;
    flex:1 1 0% !important;
    min-width:30px !important;
  }
  .header-nav .nav-tab{
    padding:5px 7px !important;
    min-width:30px;
    min-height:30px;
    border-radius:8px;
  }
  .header-nav .nav-tab i{font-size:13px !important;}
  .status-toggle{padding:4px 6px;font-size:10px;}
  .status-toggle span{display:none;}
  .admin-nav-btn{padding:5px 7px;min-width:30px;}
  .prefs-btn{width:30px !important;height:30px !important;font-size:12px;}
  .profile-chip{padding:2px 3px;gap:3px;}
  .profile-chip #hdr-av{width:24px !important;height:24px !important;font-size:10px !important;}
  .profile-chip-gear{font-size:10px !important;}
  .loc-switcher{padding:3px 6px;font-size:10px;}
  .loc-switcher span{display:none;}
}

/* ── Ensure header-nav never has 0 height/width causing it to disappear ── */
.header-nav{
  min-height:34px;
}

/* ── Extra safety: if somehow content exceeds, scroll rather than hide ── */
@media (max-width:540px){
  .header-nav{
    /* Scroll with subtle shadow indicator */
    -webkit-mask-image:linear-gradient(90deg,black 0%,black 90%,transparent 100%);
    mask-image:linear-gradient(90deg,black 0%,black 90%,transparent 100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE: App-header COMPLETELY HIDDEN — mobile-nav (bottom) + drawer handle everything
   Rationale: On mobile, the app-header adds no value that can't be in the drawer.
   Status toggle, location switcher, profile — all accessible via "Mehr" button.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Hide the entire app-header on mobile — it blocks too much and duplicates drawer */
  .app-header{display:none !important;}
  .header-nav{display:none !important;}

  /* Body uses FULL height minus only the bottom mobile-nav */
  .app-body,.app-body.chat-view{
    height:calc(100vh - 60px - env(safe-area-inset-bottom,0)) !important;
    height:calc(100dvh - 60px - env(safe-area-inset-bottom,0)) !important;
    margin-bottom:calc(60px + env(safe-area-inset-bottom,0));
    margin-top:0;
  }
  .screen{padding-bottom:0;}

  /* Ensure app-wrap has no top-padding since no header */
  .app-wrap{padding-top:0;}
}

/* ── Landscape phone: slimmer bottom nav ── */
@media (max-width:768px) and (orientation:landscape){
  .mobile-nav{padding:3px 4px calc(3px + env(safe-area-inset-bottom,0px)) !important;}
  .mnav-item{min-height:44px !important;padding:5px 4px !important;}
  .mnav-item i{font-size:16px !important;}
  .mnav-label{font-size:9px !important;}
  .app-body,.app-body.chat-view{
    height:calc(100vh - 50px - env(safe-area-inset-bottom,0)) !important;
    height:calc(100dvh - 50px - env(safe-area-inset-bottom,0)) !important;
    margin-bottom:calc(50px + env(safe-area-inset-bottom,0));
  }
}

/* ── Ensure mobile-nav stays ABOVE any content overlap ── */
.mobile-nav{
  z-index:1050 !important;
}

/* ── Ensure mobile-more-drawer sheet gets Profile/Admin/Prefs items ── */
.mmd-sheet .mmd-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:transparent;border:none;
  color:var(--text);
  font-size:14px;font-weight:500;font-family:inherit;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s;
  text-align:left;
  width:100%;
}
.mmd-sheet .mmd-item:hover,
.mmd-sheet .mmd-item:active{background:var(--hover);}
.mmd-sheet .mmd-item i{
  font-size:16px;width:22px;text-align:center;color:var(--muted);
}

/* Hide Tablet-two-row mode on mobile (redundant fix) */
@media (max-width:768px){
  .app-header{flex-wrap:nowrap !important;}
  .header-nav{margin:0 !important;background:transparent !important;border-top:none !important;box-shadow:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   SHORTCUT-MENÜ KONFIGURATION
   ═══════════════════════════════════════════════════════════════════ */
.nav-sc-list{
  display:flex;flex-direction:column;gap:6px;
}
.nav-sc-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--white);border:1.5px solid var(--border);border-radius:10px;
  cursor:pointer;transition:all .15s;
  font-size:13.5px;font-weight:500;
  color:var(--text);
  position:relative;
}
.nav-sc-item:hover{border-color:var(--blue);background:var(--hover);}
.nav-sc-item input[type="checkbox"]{
  width:17px;height:17px;cursor:pointer;flex-shrink:0;accent-color:var(--blue);
}
.nav-sc-item i{
  font-size:15px;color:var(--muted);width:20px;text-align:center;transition:color .15s;
}
.nav-sc-item.nav-sc-checked{
  background:rgba(25,118,210,.06);
  border-color:var(--blue);
  color:var(--text);
}
.nav-sc-item.nav-sc-checked i{color:var(--blue);}
.nav-sc-item span:not(.nav-sc-order){flex:1;}
.nav-sc-order{
  font-size:11px;font-weight:800;
  color:#fff;background:var(--blue);
  padding:2px 7px;border-radius:10px;
  font-family:monospace;letter-spacing:.03em;
}
body.dark-theme .nav-sc-item,body.theme-dark .nav-sc-item{background:rgba(255,255,255,.03);}

/* ─── MMD Drawer: Status pill + location switcher row ─── */
.mmd-hdr{gap:10px;}

/* ═══════════════════════════════════════════════════════════════════
   STATUS PILL IN DRAWER — HIGH CONTRAST, IMPOSSIBLE TO MISS
   Online  = GREEN filled pill + pulsing dot + "Online" in white bold
   Offline = RED filled pill   + static dot  + "Offline" in white bold
   ═══════════════════════════════════════════════════════════════════ */
.mmd-hdr .status-toggle{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px !important;
  border-radius:24px;
  border:2px solid transparent !important;
  font-size:12.5px !important;
  font-weight:800 !important;
  font-family:inherit;
  cursor:pointer;
  transition:all .25s var(--ease);
  letter-spacing:.02em;
  text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  position:relative;
  overflow:hidden;
}

/* ── ONLINE: Vivid green ── */
.mmd-hdr .status-toggle.on{
  background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.25) !important;
  box-shadow:0 2px 12px rgba(34,197,94,.4),0 0 0 3px rgba(34,197,94,.12);
}
.mmd-hdr .status-toggle.on::before{
  /* Subtle shine animation */
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:statusShine 3s infinite;
  pointer-events:none;
}
@keyframes statusShine{
  0%,100%{transform:translateX(-100%);}
  50%{transform:translateX(100%);}
}
.mmd-hdr .status-toggle.on .sdot{
  width:10px !important;height:10px !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.35);
  animation:statusPulse 1.5s infinite;
  flex-shrink:0;
}
@keyframes statusPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.35),0 0 10px rgba(255,255,255,.6);}
  50%{box-shadow:0 0 0 6px rgba(255,255,255,.15),0 0 14px rgba(255,255,255,.9);}
}

/* ── OFFLINE: Clear red/gray ── */
.mmd-hdr .status-toggle.off{
  background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.2) !important;
  box-shadow:0 2px 10px rgba(239,68,68,.35),0 0 0 3px rgba(239,68,68,.1);
}
.mmd-hdr .status-toggle.off .sdot{
  width:10px !important;height:10px !important;
  background:rgba(255,255,255,.85) !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.25);
  animation:none !important;
  flex-shrink:0;
}
/* Offline pill also has an X overlay feeling via slight inset */
.mmd-hdr .status-toggle.off::after{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(0,0,0,.04) 6px 7px);
  pointer-events:none;
  border-radius:inherit;
}

/* Hover feedback */
.mmd-hdr .status-toggle:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.08);
}
.mmd-hdr .status-toggle:active{
  transform:translateY(0) scale(.98);
}

/* Ensure text is selectable but clearly visible */
.mmd-hdr .status-toggle span{
  position:relative;z-index:1;
  color:#fff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.2);
}

/* Dark theme keeps the same vivid colors (high contrast is point) */
body.dark-theme .mmd-hdr .status-toggle,body.theme-dark .mmd-hdr .status-toggle{
  /* Inherit vivid styling — no subtle transparent override here */
  color:#fff !important;
}

/* Small-screen: still readable, just slightly smaller */
@media (max-width:380px){
  .mmd-hdr .status-toggle{
    padding:6px 11px !important;
    font-size:11px !important;
  }
  .mmd-hdr .status-toggle .sdot{
    width:8px !important;height:8px !important;
  }
}

.mmd-loc-switcher{
  padding:10px 16px 12px;
  border-bottom:1px solid var(--border);
  background:var(--hover);
}
.mmd-loc-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:8px;
  background:var(--white);border:1.5px solid var(--border);
  color:var(--text);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .12s;
  font-family:inherit;
}
.mmd-loc-btn:hover{border-color:var(--blue);background:var(--sel);}
.mmd-loc-btn.active{
  background:var(--blue);color:#fff;border-color:var(--blue);
}
.mmd-loc-btn.active i{color:#fff !important;}
.mmd-loc-btn i{font-size:11px;}

body.dark-theme .mmd-loc-switcher,body.theme-dark .mmd-loc-switcher{
  background:rgba(255,255,255,.03);
}
body.dark-theme .mmd-loc-btn,body.theme-dark .mmd-loc-btn{
  background:rgba(255,255,255,.04);
}

/* ═══════════════════════════════════════════════════════════════════
   LOCATION ASSIGN MODAL — Radio-list picker
   ═══════════════════════════════════════════════════════════════════ */
.loc-pick-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:400px;overflow-y:auto;
}
.loc-pick-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:var(--white);border:1.5px solid var(--border);
  border-radius:10px;cursor:pointer;
  transition:all .15s;
}
.loc-pick-item:hover{border-color:var(--blue);background:var(--hover);}
.loc-pick-item.loc-pick-active{
  background:rgba(25,118,210,.06);
  border-color:var(--blue);
}
.loc-pick-item input[type="radio"]{
  width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:var(--blue);
}
.loc-pick-item i{font-size:17px;width:22px;text-align:center;flex-shrink:0;}
.loc-pick-item > div{flex:1;min-width:0;font-size:13px;}
.loc-pick-item strong{font-weight:600;color:var(--text);}
.loc-pick-item .loc-code{flex-shrink:0;}

body.dark-theme .loc-pick-item,body.theme-dark .loc-pick-item{
  background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);
}
body.dark-theme .loc-pick-item.loc-pick-active,body.theme-dark .loc-pick-item.loc-pick-active{
  background:rgba(77,168,218,.12);border-color:#4da8da;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV: FAB ALWAYS CENTERED
   Left/right sides are equal-width flex containers.
   Items within each side are spaced evenly.
   This ensures FAB stays perfectly centered regardless of 1/2/3/4 shortcuts.
   ═══════════════════════════════════════════════════════════════════ */
.mobile-nav{
  /* Override any previous justify-content settings — now uses side-containers */
  justify-content:stretch !important;
  align-items:stretch;
}
.mnav-side{
  flex:1 1 0 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:space-around !important;
  gap:0;
  min-width:0;
}
.mnav-side .mnav-item{
  flex:1 1 0;
  min-width:0;
}
/* Explicit rule: FAB stays centered between sides, doesn't grow */
.mnav-fab{
  flex:0 0 auto !important;
  align-self:center;
}

/* Special cases: when a side has only 1 item, it centers between edge and FAB */
.mnav-side.mnav-left:has(> .mnav-item:only-child) .mnav-item,
.mnav-side.mnav-right:has(> .mnav-item:only-child) .mnav-item{
  flex:0 1 auto;
  min-width:60px;
}
/* Empty side still takes space (keeps FAB centered) */
.mnav-side:empty{
  flex:1 1 0 !important;
}

/* Browsers without :has() — use fallback: if only 1 item, justify-content:center still works */
@supports not selector(:has(*)){
  .mnav-side{justify-content:center !important;gap:8px;}
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN-NAV MOBILE — Off-canvas drawer with FAB toggle
   Desktop (>768px): sidebar stays visible as before
   Mobile (<=768px): hidden by default, slides in from left
   ═══════════════════════════════════════════════════════════════════ */

/* Desktop: hide mobile-only elements */
.admin-mobile-backdrop,
.admin-nav-mobile-hdr{
  display:none;
}

@media (max-width:768px){
  /* Admin layout: stack (body takes full height, nav is slide-out) */
  .admin-layout{
    flex-direction:column;
    position:relative;
  }

  /* Admin-nav: hidden by default, slides in from left as drawer */
  /* FULL DEVICE HEIGHT — covers status bar to bottom, overrides mobile-nav */
  .admin-layout .admin-nav{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:0 !important;
    width:85vw !important;
    max-width:340px !important;
    min-width:260px !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    border-right:1px solid var(--border) !important;
    border-bottom:none !important;
    transform:translateX(-100%) !important;
    transition:transform .3s cubic-bezier(.4,0,.2,1) !important;
    z-index:2100 !important; /* Above mobile-nav (1050) and backdrop (2099) */
    overflow-y:auto !important;
    overflow-x:hidden !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    padding:0 !important;
    padding-bottom:env(safe-area-inset-bottom,0) !important;
    background:var(--white) !important;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
    scrollbar-width:thin;
    display:flex !important;
    /* Override any previous display:none rules */
    visibility:visible !important;
    opacity:1 !important;
  }
  .admin-layout .admin-nav.admin-nav-mobile-open{
    transform:translateX(0) !important;
  }

  /* Mobile drawer header with close button */
  .admin-nav-mobile-hdr{
    display:flex !important;
    align-items:center;justify-content:space-between;
    padding:14px 16px;
    background:linear-gradient(135deg,#0a2838 0%,var(--dark) 50%,var(--blue) 100%);
    color:#fff;
    position:sticky;top:0;z-index:5;
    flex-shrink:0;
  }
  .admin-nav-mobile-title{
    display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:14px;
    color:#fff;
  }
  .admin-nav-mobile-title i{
    color:#ffc871;
    filter:drop-shadow(0 0 6px rgba(255,200,113,.6));
  }
  .admin-nav-mobile-close{
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    color:#fff;border-radius:50%;
    cursor:pointer;font-size:15px;
    transition:all .18s;
  }
  .admin-nav-mobile-close:hover,
  .admin-nav-mobile-close:active{
    background:rgba(255,255,255,.22);transform:scale(1.08);
  }

  /* Search: adjust to be comfortable on mobile */
  .admin-layout .admin-nav-search{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    background:var(--bg);
    flex-shrink:0;
  }
  .admin-layout .admin-nav-search input{
    font-size:14px;
    padding:9px 10px 9px 32px;
  }

  /* Groups: back to vertical layout (default desktop style) for drawer */
  .admin-layout .admin-nav-group{
    border-bottom:1px solid var(--border);
    flex-shrink:0;
    display:block;
  }
  .admin-layout .admin-nav-group-hdr{
    display:flex;
    padding:13px 14px;
    font-size:11px;
    min-height:44px;
  }
  .admin-layout .admin-nav-group-label{display:inline !important;}
  .admin-layout .admin-nav-group h4{display:block;}
  .admin-layout .admin-nav-group-body{display:block;}
  .admin-layout .admin-nav-group-collapsed .admin-nav-group-body{display:none;}

  /* Nav items: full-width comfortable tap targets */
  .admin-layout .admin-nav-item{
    padding:11px 14px 11px 38px !important;
    font-size:13px !important;
    min-height:44px;
    border-left:3px solid transparent;
    border-bottom:none !important;
    white-space:normal;
    display:flex;align-items:center;gap:8px;
    justify-content:flex-start !important;
    text-align:left;
    /* CRITICAL: Force readable text color — the mobile drawer has white background so
       any inherited white/light color would render invisible. Previously invisible because
       .admin-nav-item elsewhere only declared color:var(--text) and something upstream was
       overriding it in the admin drawer context. */
    color:var(--text) !important;
  }
  .admin-layout .admin-nav-item span{color:inherit !important;}
  .admin-layout .admin-nav-item .nav-icon{
    font-size:13px;flex-shrink:0;
    color:var(--muted) !important;
  }
  .admin-layout .admin-nav-item.sel .nav-icon{color:var(--blue) !important;}
  /* Group-headers also need readable text */
  .admin-layout .admin-nav-group-hdr,
  .admin-layout .admin-nav-group-label,
  .admin-layout .admin-nav-group h4{
    color:var(--text) !important;
  }
  .admin-layout .admin-nav-item.sel{
    border-left-color:var(--blue) !important;
    border-bottom-color:transparent !important;
    background:rgba(27,117,153,.08) !important;
    color:var(--blue) !important;
  }
  .admin-layout .admin-nav-item span:not(.nav-icon){
    overflow:visible;
    white-space:normal;
    color:inherit !important;
  }

  /* Floating toggle button — appears in admin view only.
     Specificity: scope with parent #view-admin so we don't leak into other views.
     When #view-admin has display:none (set inline by showView), the toggle + backdrop
     hidden by the browser because they're inside that hidden subtree — BUT many browsers
     still render position:fixed descendants of display:none parents as invisible but
     "floating" ghosts in certain circumstances. Adding the explicit parent selector
     makes the intent bullet-proof. */
  /* The mobile-toggle FAB was removed in favor of an edge-swipe gesture —
     users now swipe from the left screen edge to open the admin nav.
     Kept the backdrop for the overlay effect when the nav is open. */

  /* Backdrop — above mobile-nav so it fully covers */
  .admin-mobile-backdrop{
    display:block !important;
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    z-index:2099;
    opacity:0;pointer-events:none;
    transition:opacity .3s ease;
  }
  .admin-mobile-backdrop.admin-mobile-backdrop-open{
    opacity:1;pointer-events:auto;
  }

  /* Edge-swipe hint — a thin vertical strip at the left edge that signals
     "there's something you can swipe here". Deliberately subtle — just a
     fading gradient, not a full-height bar. Hidden once the nav opens. */
  #view-admin[style*="display:flex"]::before,
  #view-admin[style*="display: flex"]::before{
    content:'';
    position:fixed;
    top:56px;        /* below the top header so it doesn't fight with existing UI */
    bottom:60px;     /* above the bottom mobile-nav */
    left:0;
    width:4px;
    background:linear-gradient(90deg,rgba(27,117,153,.4),rgba(27,117,153,0));
    pointer-events:none; /* the real handler is in JS — this is pure visual hint */
    z-index:2097;
    opacity:.7;
    transition:opacity .2s ease;
  }

  /* Admin center (main content): full-width on mobile */
  .admin-layout .admin-center{
    width:100%;
    padding:10px !important;
  }
  .admin-layout .admin-section{padding:0 !important;}
}

/* Nav-open state: hide the swipe hint so it doesn't overlap the drawer.
   Using a class on body (set by the JS swipe handler) because :has() has
   spotty support and this keeps the cascade simple. */
body.admin-nav-mobile-is-open #view-admin::before{
  opacity:0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PROGRESSIVE COMPACTION — Top-row items get smaller as viewport narrows
   But they NEVER wrap. Only header-nav wraps (via natural flex-wrap).
   These rules reduce size so top-row always fits regardless of viewport.
   ═══════════════════════════════════════════════════════════════════ */

/* Below 1150px: profile name shrinks */
@media (max-width:1150px){
  .profile-chip .ha-name{max-width:90px;font-size:12px;}
}
/* Below 1024px: profile name hidden entirely */
@media (max-width:1024px){
  .profile-chip .ha-name{display:none;}
  .profile-chip{padding:3px 4px 3px 4px;gap:4px;}
  .profile-chip .profile-chip-gear{margin-left:2px;font-size:11px;}
}
/* Below 960px: admin button becomes icon-only with hover-expand */
@media (max-width:960px){
  .admin-nav-btn .admin-nav-btn-label{
    max-width:0;opacity:0;overflow:hidden;margin-left:0;display:inline-block;white-space:nowrap;
    transition:max-width .25s,opacity .18s,margin-left .22s;
  }
  .admin-nav-btn:hover .admin-nav-btn-label{max-width:60px;opacity:1;margin-left:5px;}
  .admin-nav-btn{padding:6px 10px;min-width:36px;}
}
/* Below 900px: status-toggle icon-only */
@media (max-width:900px){
  .status-toggle span{display:none;}
  .status-toggle{padding:6px 8px;min-width:30px;}
  .loc-switcher{padding:5px 8px;font-size:11px;}
}
/* Below 860px: logo shrinks */
@media (max-width:860px){
  .app-logo img{height:26px !important;}
  .prefs-btn{width:32px;height:32px;font-size:12px;}
}
/* Below 800px: location-switcher name hidden */
@media (max-width:800px){
  .loc-switcher-name{display:none;}
  .loc-switcher{padding:5px 7px;min-width:30px;}
  .app-logo img{height:24px !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DRAWER ITEMS — Admin button special styling + shortcut badges + custom colors
   ═══════════════════════════════════════════════════════════════════ */

/* Admin button in mobile drawer: gold shield like desktop */
.mmd-grid .mmd-item.mmd-admin{
  background:linear-gradient(135deg,rgba(232,139,0,.08) 0%,rgba(232,139,0,.15) 100%);
  border:1.5px solid rgba(232,139,0,.4);
  color:#B06B00;
  font-weight:700;
  position:relative;
  overflow:hidden;
}
.mmd-grid .mmd-item.mmd-admin i{
  color:#E88B00;
  filter:drop-shadow(0 0 4px rgba(232,139,0,.5));
}
.mmd-grid .mmd-item.mmd-admin::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(232,139,0,.18) 50%,transparent 70%);
  transform:translateX(-100%);
  animation:adminShine 4s infinite ease-in-out;
  pointer-events:none;
}
@keyframes adminShine{
  0%,90%,100%{transform:translateX(-100%);}
  50%{transform:translateX(100%);}
}
.mmd-grid .mmd-item.mmd-admin:hover,
.mmd-grid .mmd-item.mmd-admin:active{
  background:linear-gradient(135deg,rgba(232,139,0,.18) 0%,rgba(232,139,0,.28) 100%);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(232,139,0,.25);
}

body.dark-theme .mmd-grid .mmd-item.mmd-admin,
body.theme-dark .mmd-grid .mmd-item.mmd-admin{
  background:linear-gradient(135deg,rgba(232,139,0,.15) 0%,rgba(232,139,0,.22) 100%);
  color:#ffc871;
  border-color:rgba(232,139,0,.5);
}

/* ═══ Shortcut-Badge: Clean Lightning-Marker ═══════════════════════════════════
   Small lightning bolt indicating an item is in the user's shortcut menu.
   No glow, no hover animation — just a clean gold marker aligned with the label. */
.mmd-shortcut-badge{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  border:none;
  background:transparent;
  flex-shrink:0;
  pointer-events:none;
}
.mmd-shortcut-badge i{
  font-size:10px;
  color:#E88B00;
}
body.dark-theme .mmd-shortcut-badge i,
body.theme-dark .mmd-shortcut-badge i{
  color:#FFC871;
}

/* Custom-colored drawer items — user-picked accent color */
.mmd-grid .mmd-item.mmd-item-colored{
  border-left:4px solid var(--mmd-item-color,var(--blue));
  padding-left:14px;
}
.mmd-grid .mmd-item.mmd-item-colored i:first-child{
  color:var(--mmd-item-color,var(--blue));
}

/* Divider item (soft gap before settings/logout) */
.mmd-grid .mmd-item.mmd-item-divider{
  margin-top:8px;
  border-top:1px solid var(--border);
  padding-top:14px;
}

/* Active drawer item: highlight the view the user is currently on.
   Applied dynamically in showMobileMore() based on window.currentView. */
.mmd-grid .mmd-item.mmd-item-active{
  background:linear-gradient(135deg,rgba(59,130,246,.08) 0%,rgba(59,130,246,.15) 100%);
  border-color:rgba(59,130,246,.45);
  color:var(--blue);
  font-weight:700;
}
.mmd-grid .mmd-item.mmd-item-active i{color:var(--blue);}
body.dark-theme .mmd-grid .mmd-item.mmd-item-active,
body.theme-dark .mmd-grid .mmd-item.mmd-item-active{
  background:linear-gradient(135deg,rgba(59,130,246,.15) 0%,rgba(59,130,246,.22) 100%);
  color:#7eb3ff;
  border-color:rgba(59,130,246,.55);
}
/* Active + admin combo: keep gold but overlay a blue ring */
.mmd-grid .mmd-item.mmd-admin.mmd-item-active{
  box-shadow:0 0 0 2px rgba(59,130,246,.45),0 4px 12px rgba(232,139,0,.25);
}
/* Shortcut badge sits inline with the label — same vertical center line as the text.
   Previously was absolute-positioned in the top corner which misaligned it relative
   to "Chats"/etc labels. Using margin-left:auto pushes it to the right edge of the
   flex-item while remaining on the same baseline as the label. */
.mmd-grid .mmd-item .mmd-shortcut-badge{
  margin:0 0 0 auto;
  position:static;
}

/* Mobile nav: colored shortcuts — active color accent */
.mobile-nav .mnav-item i[style*="color"]{/* color applied inline via render */}

/* ═══════════════════════════════════════════════════════════════════
   MENU CONFIG MODAL — Drag-drop + colors + shortcut checkboxes
   ═══════════════════════════════════════════════════════════════════ */
.menu-cfg-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:55vh;overflow-y:auto;
  padding:2px;
}
.menu-cfg-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:grab;
  transition:all .15s;
  user-select:none;
  position:relative;
}
.menu-cfg-row:hover{border-color:var(--blue);background:var(--hover);}
.menu-cfg-row.menu-cfg-dragging{
  opacity:.5;
  cursor:grabbing;
  transform:scale(.98);
}
.menu-cfg-row.menu-cfg-drop-above{border-top:3px solid var(--blue);}
.menu-cfg-row.menu-cfg-drop-below{border-bottom:3px solid var(--blue);}
.menu-cfg-drag{
  color:var(--muted);
  cursor:grab;
  font-size:14px;
  padding:0 4px;
  touch-action:none;
}
.menu-cfg-row:hover .menu-cfg-drag{color:var(--text);}
.menu-cfg-icon{
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  color:var(--text);
  flex-shrink:0;
  transition:color .15s;
}
.menu-cfg-label{
  flex:1;
  font-size:13.5px;font-weight:500;
  color:var(--text);
  min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-cfg-color-btn{
  width:32px;height:32px;
  padding:0;
  border:1.5px solid var(--border);
  border-radius:50%;
  cursor:pointer;
  flex-shrink:0;
  background:var(--bg);
  color:var(--muted);
  font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;
  font-family:inherit;
  position:relative;
}
.menu-cfg-color-btn:hover{
  border-color:var(--blue);
  transform:scale(1.1);
}
.menu-cfg-color-btn.menu-cfg-color-btn-set{
  border-color:rgba(0,0,0,.25);
  box-shadow:0 1px 3px rgba(0,0,0,.15),inset 0 0 0 2px rgba(255,255,255,.3);
}
.menu-cfg-color-btn.menu-cfg-color-btn-set::after{
  content:'';
  position:absolute;inset:3px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.4);
  pointer-events:none;
}
body.dark-theme .menu-cfg-color-btn,body.theme-dark .menu-cfg-color-btn{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR PALETTE POPOVER — 6x6 grid of 36 curated colors + clear button
   ═══════════════════════════════════════════════════════════════════ */
.color-palette-popover{
  position:fixed;
  z-index:10000;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05);
  padding:12px;
  animation:cppFadeIn .14s ease;
}
@keyframes cppFadeIn{
  from{opacity:0;transform:translateY(-4px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.cpp-hdr{
  font-size:11px;font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px;
  padding:0 2px;
}
.cpp-grid{
  display:grid;
  grid-template-columns:repeat(6,28px);
  gap:6px;
}
.cpp-swatch{
  width:28px;height:28px;
  border:none;padding:0;margin:0;
  border-radius:8px;
  cursor:pointer;
  transition:all .14s cubic-bezier(.4,0,.2,1);
  font-family:inherit;
  box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 0 0 1px rgba(255,255,255,.2);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.cpp-swatch:hover{
  transform:scale(1.15);
  box-shadow:0 3px 8px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.3);
  z-index:1;
}
.cpp-swatch-selected{
  transform:scale(1.08);
  box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--blue),0 3px 8px rgba(0,0,0,.2);
}
.cpp-swatch-selected:hover{
  transform:scale(1.15);
}
.cpp-swatch-none{
  background:linear-gradient(135deg,#f3f4f6 0%,#e5e7eb 100%);
  color:#9ca3af;
  border:1.5px dashed #d1d5db;
  box-shadow:none;
}
.cpp-swatch-none:hover{
  background:linear-gradient(135deg,#e5e7eb 0%,#d1d5db 100%);
  color:#6b7280;
}
.cpp-swatch-none.cpp-swatch-selected{
  border-color:var(--blue);
  color:var(--blue);
}

body.dark-theme .color-palette-popover,body.theme-dark .color-palette-popover{
  background:#1f2937;border-color:rgba(255,255,255,.12);
}
body.dark-theme .cpp-swatch-none,body.theme-dark .cpp-swatch-none{
  background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.1) 100%);
  border-color:rgba(255,255,255,.2);
}
body.dark-theme .cpp-swatch-selected,body.theme-dark .cpp-swatch-selected{
  box-shadow:0 0 0 2px #1f2937,0 0 0 4px var(--blue),0 3px 8px rgba(0,0,0,.4);
}

.menu-cfg-shortcut{
  position:relative;cursor:pointer;flex-shrink:0;
}
.menu-cfg-shortcut input[type="checkbox"]{
  position:absolute;opacity:0;pointer-events:none;
}
.menu-cfg-shortcut-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:26px;padding:0 6px;
  background:var(--bg);border:1.5px solid var(--border);
  color:var(--muted);
  border-radius:14px;
  font-size:10px;font-weight:800;
  transition:all .15s;
  font-family:monospace;
}
.menu-cfg-shortcut-badge.active{
  background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);
  border-color:#1d4ed8;
  color:#fff;
  box-shadow:0 2px 6px rgba(59,130,246,.3);
}
.menu-cfg-shortcut:hover .menu-cfg-shortcut-badge{border-color:var(--blue);color:var(--blue);}
.menu-cfg-shortcut:hover .menu-cfg-shortcut-badge.active{color:#fff;}

body.dark-theme .menu-cfg-row,body.theme-dark .menu-cfg-row{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);
}
body.dark-theme .menu-cfg-shortcut-badge,body.theme-dark .menu-cfg-shortcut-badge{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE-NAV: Custom colors on items
   ═══════════════════════════════════════════════════════════════════ */
.mobile-nav .mnav-item.mnav-item-colored i{
  color:var(--mnav-item-color,var(--blue));
}
.mobile-nav .mnav-item.mnav-item-colored.active::before{
  background:var(--mnav-item-color,var(--blue));
}
.mobile-nav .mnav-item.mnav-item-colored.active{
  color:var(--mnav-item-color,var(--blue));
}
.mobile-nav .mnav-item.mnav-item-colored.active i{
  color:var(--mnav-item-color,var(--blue));
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--mnav-item-color,var(--blue)) 40%,transparent));
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP NAV-TABS — Custom user colors via --nav-tab-color CSS var
   ═══════════════════════════════════════════════════════════════════ */
.nav-tab.nav-tab-colored{
  border-color:color-mix(in srgb,var(--nav-tab-color,#4dade0) 55%,transparent);
}
.nav-tab.nav-tab-colored i{
  color:var(--nav-tab-color,inherit);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nav-tab-color,#4dade0) 35%,transparent));
}
.nav-tab.nav-tab-colored:hover{
  background:color-mix(in srgb,var(--nav-tab-color,#4dade0) 18%,transparent);
  border-color:var(--nav-tab-color,inherit);
}
.nav-tab.nav-tab-colored.active{
  background:color-mix(in srgb,var(--nav-tab-color,#4dade0) 25%,transparent);
  border-color:var(--nav-tab-color);
  color:color-mix(in srgb,var(--nav-tab-color,#fff) 70%,#fff);
}
.nav-tab.nav-tab-colored.active i{
  color:var(--nav-tab-color);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--nav-tab-color,#4dade0) 50%,transparent));
}
/* Color-accent stripe at bottom when active */
.nav-tab.nav-tab-colored.active::before{
  background:var(--nav-tab-color) !important;
}

/* Fallback for browsers without color-mix() (older) */
@supports not (color: color-mix(in srgb, red, blue)){
  .nav-tab.nav-tab-colored{border-color:var(--nav-tab-color,rgba(255,255,255,.3));}
  .nav-tab.nav-tab-colored:hover,
  .nav-tab.nav-tab-colored.active{
    background:rgba(255,255,255,.15);
    border-color:var(--nav-tab-color);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIFIED HEADER-ITEM HEIGHTS — All top-row items same visual height
   This creates a consistent, professional header appearance.
   Target height: 36px for all interactive elements.
   ═══════════════════════════════════════════════════════════════════ */
.app-header .app-logo{
  display:flex;
  align-items:center;
  height:36px;
  line-height:1;
}
.app-header .app-logo img{
  height:28px !important;  /* Image slightly smaller than container for breathing room */
  width:auto;
  display:block;
}
.app-header .status-toggle{
  height:36px;
  padding:0 14px !important;
  display:inline-flex;
  align-items:center;
  gap:7px !important;
  box-sizing:border-box;
  border-radius:18px;
  margin-left:0 !important;  /* Remove arbitrary margin */
  border:1.5px solid rgba(255,255,255,.2);
}
.app-header .status-toggle.on{
  background:linear-gradient(135deg,rgba(34,197,94,.22) 0%,rgba(22,163,74,.18) 100%);
  color:#86efac;
  border-color:rgba(74,222,128,.4);
  box-shadow:0 0 0 1px rgba(74,222,128,.12),inset 0 0 8px rgba(74,222,128,.15);
}
.app-header .status-toggle.on .sdot{
  background:#4ade80;
  box-shadow:0 0 6px rgba(74,222,128,.6);
  animation:pulse 2s infinite;
}
.app-header .status-toggle.off{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.6);
  border-color:rgba(255,255,255,.15);
}
.app-header .status-toggle.off .sdot{
  background:rgba(255,255,255,.35);
}
.app-header .loc-switcher{
  height:36px;
  padding:0 12px !important;
  display:inline-flex;
  align-items:center;
  gap:6px !important;
  box-sizing:border-box;
  border-radius:18px !important;
  font-size:12px !important;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.2) !important;
}
.app-header .loc-switcher:hover{
  background:rgba(255,255,255,.15);
  border-color:rgba(255,255,255,.3) !important;
}
.app-header .nav-tab{
  min-height:36px !important;
  height:36px;
  padding:0 14px !important;
  display:inline-flex !important;
  align-items:center;
  box-sizing:border-box;
}
.app-header .admin-nav-btn{
  height:36px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  box-sizing:border-box;
  border-radius:18px;
}
.app-header .prefs-btn{
  width:36px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  box-sizing:border-box;
}
.app-header .profile-chip{
  height:36px;
  padding:0 8px 0 4px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:20px;
  box-sizing:border-box;
}
.app-header .profile-chip .ha-avatar-ph,
.app-header .profile-chip #hdr-av{
  width:28px !important;
  height:28px !important;
  font-size:11px !important;
  border-radius:50% !important;
  flex-shrink:0;
}
.app-header .profile-chip .ha-name{
  font-size:12.5px;
  line-height:1;
}
.app-header .profile-chip .profile-chip-gear{
  font-size:11px;
  opacity:.7;
}

/* Status dot: standardized */
.app-header .status-toggle .sdot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

/* Admin button icon + label alignment */
.app-header .admin-nav-btn i{font-size:14px;line-height:1;}
.app-header .admin-nav-btn .admin-nav-btn-label{font-size:12px;line-height:1;margin-left:6px;}

/* Prefs button icon */
.app-header .prefs-btn i{font-size:14px;}

/* Header gap: consistent */
.app-header{
  gap:8px;
  min-height:52px;
}

/* (Tab height in wrapped is defined in the main wrapped-state rule above — no override needed) */

/* ═══════════════════════════════════════════════════════════════════
   SUB-NAV COMPACT MODE — When wrapped nav overflows, tabs become
   icon-only. HOVER EXPANDS the button to reveal the label inline
   (smooth animation, no tooltip). Active tab always shows its label.
   ═══════════════════════════════════════════════════════════════════ */

/* Base: compact tabs are icon-only, label collapsed but present */
.app-header.header-wrapped .header-nav.nav-compact .nav-tab{
  padding:0 10px !important;
  min-width:38px !important;
  justify-content:center !important;
  gap:0 !important;
  transition:padding .22s var(--ease),gap .22s var(--ease),min-width .22s var(--ease),background-color .25s,border-color .2s,color .2s !important;
}

/* Label collapsed via max-width + opacity (not display:none so we can animate) */
.app-header.header-wrapped .header-nav.nav-compact .nav-tab .nav-label{
  max-width:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  margin-left:0 !important;
  padding:0 !important;
  transition:max-width .25s var(--ease-out),opacity .18s ease,margin-left .22s var(--ease) !important;
  display:inline-block !important;
  pointer-events:none;
}

/* HOVER: Button expands, label reveals */
.app-header.header-wrapped .header-nav.nav-compact .nav-tab:hover{
  padding:0 14px !important;
  gap:5px !important;
  min-width:auto !important;
}
.app-header.header-wrapped .header-nav.nav-compact .nav-tab:hover .nav-label{
  max-width:160px !important;
  opacity:1 !important;
  margin-left:4px !important;
}

/* Active tab: ALWAYS shows label (so user knows where they are) */
.app-header.header-wrapped .header-nav.nav-compact .nav-tab.active{
  padding:0 14px !important;
  gap:5px !important;
  min-width:auto !important;
}
.app-header.header-wrapped .header-nav.nav-compact .nav-tab.active .nav-label{
  max-width:160px !important;
  opacity:1 !important;
  margin-left:4px !important;
}

/* Disable tooltip in compact mode (label is inline now) */
.app-header.header-wrapped .header-nav.nav-compact .nav-tab::after{
  display:none !important;
}

/* Subtle scroll-hint at edges if content still overflows after compacting */
.app-header.header-wrapped .header-nav.nav-compact{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 10px),transparent);
}

/* ══════════════════════════════════════════════════════════════════════════════
   FLEET MANAGEMENT MODULE
   ══════════════════════════════════════════════════════════════════════════════ */
.fleet-card{
  background:var(--white);
  border:none;
  border-radius:12px;
  padding:0;
  margin:0 16px 12px;
  transition:all .15s;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px var(--border);
}
.fleet-card:hover{
  box-shadow:0 3px 12px rgba(0,0,0,.08),0 0 0 1px rgba(27,117,153,.25);
}
.fleet-card-inactive{opacity:.55;background:var(--hover);}

/* ── Top Row: Icon + Identity ── */
.fleet-card-top{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px 12px;
}
.fleet-card-icon{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,#1B7599,#145a75);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(27,117,153,.2);
}
.fleet-card-inactive .fleet-card-icon{background:linear-gradient(135deg,#94a3b8,#64748b);}
.fleet-card-identity{flex:1;min-width:0;}
.fleet-card-title{
  font-size:16px;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:6px;
}
.fleet-card-sub{
  margin-top:3px;
  font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.fleet-card-tags{
  display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;
}

/* ── Separator between sections ── */
.fleet-card-sep{
  height:1px;background:var(--border);margin:0 18px;
}

/* ── Info Grid ── */
.fleet-card-info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:var(--border);
  margin:0 18px;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.fleet-info-cell{
  background:var(--white);padding:10px 14px;
}
.fleet-info-label{
  font-size:10px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:3px;
}
.fleet-info-label i{color:#1B7599;margin-right:3px;font-size:10px;}
.fleet-info-value{
  font-size:13px;font-weight:500;color:var(--text);
}

/* ── Note ── */
.fleet-card-note{
  margin:0 18px;
  background:rgba(255,193,7,.06);
  border-left:3px solid rgba(255,193,7,.45);
  padding:8px 12px;
  border-radius:0 6px 6px 0;
  font-size:12px;color:var(--text);
}
.fleet-card-note i{color:#f59e0b;margin-right:4px;}

/* ── Actions Bar ── */
.fleet-card-actions{
  display:flex;gap:6px;flex-wrap:wrap;
  padding:10px 18px 14px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.fleet-action-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:8px;
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
  font-size:11px;
  font-weight:600;
  padding:6px 12px;
  white-space:nowrap;
}
.fleet-action-btn i{font-size:12px;color:#1B7599;}
.fleet-action-btn:hover{
  background:rgba(27,117,153,.1);
  border-color:#1B7599;
  color:#1B7599;
}
.fleet-action-btn-primary{
  background:rgba(27,117,153,.08);
  border-color:rgba(27,117,153,.35);
  color:#1B7599;
}
.fleet-action-btn-primary:hover{
  background:#1B7599;
  color:#fff;
}
.fleet-action-btn-primary:hover i{color:#fff;}
.fleet-action-btn-danger{color:var(--muted);}
.fleet-action-btn-danger i{color:var(--muted);}
.fleet-action-btn-danger:hover{
  background:rgba(211,47,47,.08);
  border-color:rgba(211,47,47,.5);
  color:#d32f2f;
}
.fleet-action-btn-danger:hover i{color:#d32f2f;}
.fleet-cards-grid{padding:0 0 16px;}
.fleet-icon-btn{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  transition:all .15s;
  font-size:13px;
}
.fleet-icon-btn:hover{
  background:rgba(27,117,153,.08);
  border-color:rgba(27,117,153,.4);
  color:#1B7599;
}
.fleet-icon-btn-danger:hover{
  background:rgba(211,47,47,.08);
  border-color:rgba(211,47,47,.4);
  color:#d32f2f;
}
/* Status Badges */
.fleet-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;
  font-size:10px;font-weight:700;
  border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}
.fleet-badge-active{background:rgba(34,197,94,.15);color:#15803d;}
.fleet-badge-inactive{background:rgba(100,116,139,.15);color:#475569;}

/* Status text */
.fleet-status-warn{color:#d97706;font-weight:600;}
.fleet-status-critical{color:#d32f2f;font-weight:700;}

/* License plate */
.fleet-plate{
  display:inline-block;
  font-family:var(--font-mono,ui-monospace,monospace);
  background:#f5f5f0;
  color:#1a1a1a;
  padding:1px 8px;
  border-radius:4px;
  letter-spacing:1px;
  font-weight:700;
  border:1px solid #d4d4d4;
}
body.dark-theme .fleet-plate,
body.theme-dark .fleet-plate{
  background:#2a2a25;color:#e5e5e5;border-color:#444;
}
.fleet-input-plate{
  text-transform:uppercase;
  font-family:var(--font-mono,ui-monospace,monospace) !important;
  letter-spacing:1px !important;
  font-weight:700 !important;
}

/* ── MODAL ────────────────────────────────────────────────────────────── */
.fleet-modal-overlay{
  position:fixed;inset:0;z-index:20000;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fleetModalFade .2s ease-out;
}
@keyframes fleetModalFade{from{opacity:0;}to{opacity:1;}}
.fleet-modal{
  background:var(--white);
  border-radius:16px;
  max-width:640px;width:100%;max-height:90vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:fleetModalSlide .25s cubic-bezier(.22,.9,.28,1);
  overflow:hidden;
}
@keyframes fleetModalSlide{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.fleet-modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(27,117,153,.06) 0%,transparent 100%);
}
.fleet-modal-hdr h2{
  margin:0;font-size:17px;font-weight:700;color:var(--text);
  display:flex;align-items:center;
}
.fleet-modal-close{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:8px;
  color:var(--muted);cursor:pointer;font-size:16px;
  transition:all .15s;
}
.fleet-modal-close:hover{background:var(--hover);color:var(--text);}
.fleet-modal-body{
  padding:20px;
  overflow-y:auto;
  flex:1;
  display:flex;flex-direction:column;gap:18px;
}
.fleet-modal-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--hover);
}

/* Form sections */
.fleet-form-section{
  display:flex;flex-direction:column;gap:10px;
}
.fleet-form-section h3{
  margin:0 0 4px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
}
.fleet-form-section label{
  display:flex;flex-direction:column;gap:4px;
  font-size:13px;font-weight:600;
  color:var(--text);
}
.fleet-form-section label small{
  font-weight:400;color:var(--muted);
  font-size:10px;display:inline;margin-left:3px;
}
.fleet-form-section input[type="text"],
.fleet-form-section input[type="number"],
.fleet-form-section input[type="date"],
.fleet-form-section select,
.fleet-form-section textarea{
  padding:8px 10px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:13px;
  color:var(--text);
  font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;
  height:38px;
  line-height:1.3;
  width:100%;
}
.fleet-form-section textarea{height:auto;min-height:70px;resize:vertical;}
.fleet-form-section input:focus,
.fleet-form-section select:focus,
.fleet-form-section textarea:focus{
  outline:none;
  border-color:#1B7599;
  box-shadow:0 0 0 3px rgba(27,117,153,.15);
}
.fleet-form-row{display:flex;gap:10px;align-items:flex-end;}
.fleet-form-row-2{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
.fleet-form-row-2>label{min-width:0;}
.fleet-checkbox{
  flex-direction:row !important;
  align-items:center;gap:10px !important;
  padding:10px 12px;
  background:var(--hover);
  border-radius:8px;
  cursor:pointer;
}
.fleet-checkbox input{margin:0;width:18px;height:18px;cursor:pointer;accent-color:#1B7599;}

/* QR-Etikette Vorschau — matches PDF export layout 1:1 */
.fleet-qr-preview{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:0;
  overflow:hidden;
  max-width:340px;
  margin:0 auto;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* Header band — turquoise, like in PDF */
.fleet-qr-preview-hdr{
  background:linear-gradient(135deg,#1B7599 0%,#165a78 100%);
  color:#fff;
  padding:14px 16px 16px;
  text-align:center;
}
.fleet-qr-preview-brand{
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:2px;
  opacity:.85;
  margin-bottom:10px;
}
.fleet-qr-preview-title{
  font-size:22px;font-weight:700;
  color:#fff;
  line-height:1.1;
  margin-bottom:4px;
}
.fleet-qr-preview-plate{
  display:inline-block;
  font-family:'Courier New','Courier',monospace;
  font-weight:700;
  font-size:12px;
  letter-spacing:2px;
  padding:3px 10px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  border-radius:4px;
  color:#fff;
  margin-top:6px;
}

/* QR code area — pure white background, large and centered */
.fleet-qr-preview-canvas{
  background:#fff;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px;
}
.fleet-qr-preview-canvas img{
  display:block;
  margin:0 auto;
  image-rendering:pixelated;
}

/* Instructions box — matches PDF turquoise-bordered box */
.fleet-qr-preview-footer{
  margin:0 16px 16px;
  padding:12px 14px;
  background:#f6fafc;
  border:1px solid #1B7599;
  border-radius:6px;
  text-align:center;
}
.fleet-qr-preview-footer-title{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  color:#1B7599;
  margin-bottom:6px;
}
.fleet-qr-preview-footer-title i{margin-right:4px;}
.fleet-qr-preview-footer-text{
  font-size:11px;
  color:#3c3c3c;
  line-height:1.5;
}

/* Mobile */
@media(max-width:640px){
  .fleet-modal{max-height:95vh;border-radius:12px 12px 0 0;margin-bottom:0;align-self:flex-end;}
  .fleet-modal-overlay{padding:0;align-items:flex-end;}
  .fleet-form-row{flex-direction:column;}
  .fleet-card-top{flex-direction:column;gap:8px;}
  .fleet-card-actions{width:100%;justify-content:flex-end;}
  .fleet-card-title{font-size:14px;}
}

/* Dark mode */
body.dark-theme .fleet-card,
body.theme-dark .fleet-card{background:var(--surface);}
body.dark-theme .fleet-modal,
body.theme-dark .fleet-modal{background:var(--surface);}
body.dark-theme .fleet-modal-footer,
body.theme-dark .fleet-modal-footer{background:rgba(255,255,255,.02);}
body.dark-theme .fleet-form-section input,
body.dark-theme .fleet-form-section select{
  box-sizing:border-box;
}
.fleet-form-section select,
body.dark-theme .fleet-form-section textarea,
body.theme-dark .fleet-form-section input,
body.theme-dark .fleet-form-section select{
  box-sizing:border-box;
}
.fleet-form-section select,
body.theme-dark .fleet-form-section textarea{
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-color:var(--border);
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGBOOK — Weekend Markers
   ══════════════════════════════════════════════════════════════════════════════
   Weekends (Sa/So) get a visually distinct treatment regardless of entry status.
   - Red corner badge showing "Sa" or "So"
   - Top-right diagonal stripe via the badge as anchor
   - Filled weekend days still show their green/purple entry colors but with the
     red badge so the user immediately sees "this was a weekend". */
.lb-weekend-badge{
  position:absolute;
  top:4px;right:4px;
  font-size:8px;font-weight:700;
  letter-spacing:.5px;
  color:#c62828;
  background:rgba(198,40,40,.12);
  padding:1px 5px;
  border-radius:3px;
  border:1px solid rgba(198,40,40,.35);
  z-index:2;
  pointer-events:none;
  line-height:1;
  text-transform:uppercase;
}
/* Weekend cells with an entry — subtle accent left border so the green/purple main
   color stays dominant but weekend nature is still clear */
.lb-day-cell.lb-day-weekend{
  border-left:3px solid rgba(198,40,40,.4) !important;
}
body.dark-theme .lb-weekend-badge,
body.theme-dark .lb-weekend-badge{
  color:#ff8a80;
  background:rgba(255,138,128,.15);
  border-color:rgba(255,138,128,.4);
}

/* ══════════════════════════════════════════════════════════════════════════════
   INSPECTION WIZARD — Monatliche Sichtprüfung
   ══════════════════════════════════════════════════════════════════════════════ */
.insp-overlay{
  position:fixed;inset:0;z-index:20000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:inspFade .25s ease-out;
}
@keyframes inspFade{from{opacity:0;}to{opacity:1;}}
.insp-wizard{
  background:var(--white);
  border-radius:16px;
  width:100%;max-width:560px;max-height:94vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:inspSlide .3s cubic-bezier(.22,.9,.28,1);
  overflow:hidden;
}
@keyframes inspSlide{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.insp-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(27,117,153,.05) 0%,transparent 100%);
}
.insp-hdr h2{margin:0;font-size:17px;font-weight:700;color:var(--text);}
.insp-subtitle{margin-top:2px;font-size:12px;color:var(--muted);}
.insp-close{
  width:32px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-radius:8px;
  color:var(--muted);cursor:pointer;font-size:15px;
  transition:all .15s;
}
.insp-close:hover{background:var(--hover);color:var(--text);}

.insp-progress-bar{
  height:3px;background:var(--border);
  overflow:hidden;
}
.insp-progress-fill{
  height:100%;
  background:linear-gradient(90deg,#1B7599 0%,#6BC3F0 100%);
  transition:width .3s cubic-bezier(.22,.9,.28,1);
}
.insp-stepcount{
  padding:8px 20px;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
  background:var(--bg);
  border-bottom:1px solid var(--border);
}

.insp-body{
  flex:1;overflow-y:auto;
  padding:20px;
  -webkit-overflow-scrolling:touch;
}

.insp-checkpoint{text-align:center;}
.insp-checkpoint-icon{
  width:72px;height:72px;
  margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(27,117,153,.12) 0%,rgba(107,195,240,.18) 100%);
  color:#1B7599;
  font-size:32px;
  box-shadow:0 4px 16px rgba(27,117,153,.15);
}
.insp-checkpoint h3{
  margin:0 0 6px;font-size:18px;font-weight:700;color:var(--text);
}
.insp-desc{
  margin:0 0 20px;font-size:13px;color:var(--muted);line-height:1.4;
  max-width:420px;margin-left:auto;margin-right:auto;
}

.insp-status-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  margin-bottom:16px;
}
.insp-status-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:12px 6px;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  font-size:11px;font-weight:700;font-family:inherit;
  cursor:pointer;
  transition:all .15s;
}
.insp-status-btn i{font-size:18px;}
.insp-status-btn:hover{
  border-color:var(--s-color);
  color:var(--s-color);
  background:var(--s-bg);
}
.insp-status-btn.active{
  border-color:var(--s-color);
  color:var(--s-color);
  background:var(--s-bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--s-color) 15%,transparent);
}

.insp-note-wrap{
  text-align:left;
  margin-top:8px;
  padding:14px;
  background:var(--bg);
  border-radius:10px;
  border:1px solid var(--border);
}
.insp-note-wrap label{
  display:block;
  font-size:12px;font-weight:700;color:var(--text);
  margin-bottom:6px;
}
.insp-note-wrap label small{
  font-weight:400;color:var(--muted);margin-left:4px;
}
.insp-note-wrap textarea{
  width:100%;
  padding:8px 10px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:13px;
  color:var(--text);
  font-family:inherit;
  resize:vertical;
  box-sizing:border-box;
  transition:border-color .15s;
}
.insp-note-wrap textarea:focus{outline:none;border-color:#1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.12);}

/* Summary view */
.insp-summary h3{
  margin:0 0 16px;font-size:17px;font-weight:700;color:var(--text);
}
.insp-summary h4{margin:0 0 6px;}
.insp-km-box,.insp-notes-box,.insp-signature-box{
  margin-bottom:14px;
  padding:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
}
.insp-km-box label,.insp-notes-box label,.insp-signature-box label{
  display:block;
  font-size:12px;font-weight:700;color:var(--text);
  margin-bottom:6px;
}
.insp-km-box input,.insp-notes-box textarea,.insp-signature-box input{
  width:100%;padding:9px 12px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;font-size:14px;
  color:var(--text);font-family:inherit;
  box-sizing:border-box;
  transition:border-color .15s;
}
.insp-km-box input:focus,.insp-notes-box textarea:focus,.insp-signature-box input:focus{
  outline:none;border-color:#1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.12);
}
.insp-signature-box small{
  display:block;margin-top:6px;font-size:11px;color:var(--muted);
}
.insp-notes-box textarea{resize:vertical;}

.insp-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px;
}
.insp-stat{
  padding:10px 6px;text-align:center;
  border-radius:10px;
  border:1px solid var(--border);
}
.insp-stat strong{display:block;font-size:22px;font-weight:700;line-height:1;margin-bottom:2px;}
.insp-stat span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.insp-stat-ok{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.3);}
.insp-stat-ok strong{color:#15803d;}
.insp-stat-warn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.3);}
.insp-stat-warn strong{color:#d97706;}
.insp-stat-fail{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.3);}
.insp-stat-fail strong{color:#b91c1c;}
.insp-stat-na{background:rgba(148,163,184,.06);border-color:rgba(148,163,184,.3);}
.insp-stat-na strong{color:#475569;}

.insp-finding{
  padding:10px 12px;margin-bottom:6px;
  background:var(--bg);border-radius:6px;
}

.insp-photo-section{margin:16px 0;}
.insp-photo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;
}
.insp-photo-tile{
  position:relative;aspect-ratio:1;
  border-radius:8px;overflow:hidden;
  background:var(--bg);border:1px solid var(--border);
}
.insp-photo-tile img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.insp-photo-remove{
  position:absolute;top:4px;right:4px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.7);
  color:#fff;border:none;cursor:pointer;
  font-size:10px;
  transition:background .15s;
}
.insp-photo-remove:hover{background:#d32f2f;}

.insp-footer{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--hover);
}

/* Dark mode */
body.dark-theme .insp-wizard,
body.theme-dark .insp-wizard{background:var(--surface);}
body.dark-theme .insp-status-btn,
body.theme-dark .insp-status-btn{background:rgba(255,255,255,.02);}
body.dark-theme .insp-km-box input,
body.dark-theme .insp-notes-box textarea,
body.dark-theme .insp-signature-box input,
body.dark-theme .insp-note-wrap textarea,
body.theme-dark .insp-km-box input,
body.theme-dark .insp-notes-box textarea,
body.theme-dark .insp-signature-box input,
body.theme-dark .insp-note-wrap textarea{
  background:rgba(255,255,255,.03);color:var(--text);
}

/* Mobile: full height + sticky footer */
@media(max-width:640px){
  .insp-overlay{padding:0;align-items:flex-end;}
  .insp-wizard{max-height:100vh;border-radius:16px 16px 0 0;}
  .insp-checkpoint-icon{width:56px;height:56px;font-size:24px;border-radius:14px;}
  .insp-checkpoint h3{font-size:16px;}
  .insp-status-btn{padding:10px 4px;font-size:10px;}
  .insp-status-btn i{font-size:16px;}
  .insp-stats{grid-template-columns:repeat(2,1fr);}
}

/* ═══ Export Format Chooser ═══ */
.export-format-btn{
  display:flex;align-items:center;gap:14px;
  padding:14px;
  width:100%;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.export-format-btn:hover{
  background:var(--hover);
  border-color:#1B7599;
  transform:translateX(2px);
}
.export-fmt-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  font-size:20px;
  flex-shrink:0;
}
body.dark-theme .export-format-btn,
body.theme-dark .export-format-btn{background:rgba(255,255,255,.02);}

/* ══════════════════════════════════════════════════════════════════════════════
   LOGBOOK ADMIN OVERVIEW (Fahrtenbuch-Verwaltung)
   ══════════════════════════════════════════════════════════════════════════════ */
.lba-view{
  display:flex;flex-direction:column;
  height:100%;
  padding:20px 24px;
  gap:14px;
  overflow-y:auto;
}
.lba-hdr{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
}
.lba-month-nav{
  display:flex;align-items:center;gap:4px;
  background:var(--white);
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:10px;
}
.lba-month-label{
  font-size:14px;font-weight:700;
  min-width:140px;text-align:center;
  color:var(--text);
  padding:0 8px;
}

.lba-toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.lba-search{
  flex:1;min-width:240px;
  position:relative;
  display:flex;align-items:center;
}
.lba-search i{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:12px;pointer-events:none;
}
.lba-search input{
  width:100%;
  padding:9px 12px 9px 34px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:13px;
  color:var(--text);
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
.lba-search input:focus{
  outline:none;border-color:#1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.12);
}
.lba-select{
  padding:9px 12px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:13px;color:var(--text);font-family:inherit;
  cursor:pointer;
}

/* Summary strip (aggregate stats) */
.lba-summary-strip{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;
}
.lba-stat{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.lba-stat i{
  font-size:20px;
  width:28px;text-align:center;flex-shrink:0;
}
.lba-stat strong{
  display:block;
  font-size:17px;font-weight:700;
  color:var(--text);line-height:1.1;
}
.lba-stat span{
  display:block;
  font-size:11px;color:var(--muted);
  margin-top:2px;
}
.lba-stat-warn{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.04);}
.lba-stat-critical{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.04);}

/* List */
.lba-list{
  display:flex;flex-direction:column;gap:8px;
}
.lba-row{
  display:grid;
  grid-template-columns:minmax(220px,2fr) minmax(260px,2fr) auto;
  gap:14px;align-items:center;
  padding:12px 16px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  transition:all .15s;
}
.lba-row:hover{
  border-color:rgba(27,117,153,.4);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.lba-row-inactive{opacity:.6;background:var(--hover);}
.lba-row-main{min-width:0;}
.lba-row-title{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:4px;
}
.lba-row-sub{
  font-size:12px;color:var(--muted);
  margin-bottom:6px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.lba-row-badges{
  display:flex;flex-wrap:wrap;gap:4px;
}
.lba-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;
  font-size:10px;font-weight:700;
  border-radius:10px;
  text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;
}
.lba-badge i{font-size:9px;}
.lba-badge-ok{background:rgba(34,197,94,.15);color:#15803d;}
.lba-badge-warn{background:rgba(245,158,11,.15);color:#b45309;}
.lba-badge-fail{background:rgba(239,68,68,.15);color:#b91c1c;}
.lba-badge-neutral{background:rgba(100,116,139,.12);color:#475569;}

/* Stats column (km, count, progress) */
.lba-row-stats{
  display:grid;
  grid-template-columns:1fr 1fr 1.6fr;
  gap:10px;
  align-items:center;
}
.lba-metric{
  display:flex;flex-direction:column;
}
.lba-metric strong{
  font-size:16px;font-weight:700;color:var(--text);line-height:1;
}
.lba-metric span{
  font-size:10px;color:var(--muted);
  margin-top:2px;
}

/* Progress bar */
.lba-progress-cell{display:flex;flex-direction:column;gap:4px;}
.lba-progress-bar{
  height:7px;
  background:var(--border);
  border-radius:4px;
  overflow:hidden;
  width:100%;
}
.lba-progress-fill{
  height:100%;
  transition:width .3s ease;
}
.lba-progress-full{background:linear-gradient(90deg,#22c55e 0%,#16a34a 100%);}
.lba-progress-mid{background:linear-gradient(90deg,#f59e0b 0%,#d97706 100%);}
.lba-progress-low{background:linear-gradient(90deg,#ef4444 0%,#dc2626 100%);}

/* Actions column */
.lba-row-actions{
  display:flex;gap:6px;flex-shrink:0;
}

.lba-loader{
  padding:40px;text-align:center;color:var(--muted);font-size:13px;
}
.lba-loader i{font-size:24px;margin-right:10px;}
.lba-empty{
  padding:48px 24px;text-align:center;color:var(--muted);
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:10px;
}
.lba-empty i{font-size:36px;margin-bottom:10px;display:block;}
.lba-empty p{margin:0;font-size:14px;}

/* Dark mode */
body.dark-theme .lba-stat,
body.dark-theme .lba-row,
body.theme-dark .lba-stat,
body.theme-dark .lba-row{background:var(--surface);}
body.dark-theme .lba-search input,
body.dark-theme .lba-select,
body.dark-theme .lba-month-nav,
body.theme-dark .lba-search input,
body.theme-dark .lba-select,
body.theme-dark .lba-month-nav{
  background:rgba(255,255,255,.03);color:var(--text);
}

/* Mobile: stack rows vertically */
@media(max-width:900px){
  .lba-row{grid-template-columns:1fr;gap:10px;}
  .lba-row-stats{grid-template-columns:1fr 1fr;}
  .lba-progress-cell{grid-column:1/-1;}
  .lba-row-actions{justify-content:flex-start;flex-wrap:wrap;}
}
@media(max-width:640px){
  .lba-view{padding:12px;}
  .lba-hdr{flex-direction:column;align-items:stretch;}
  .lba-month-nav{width:100%;justify-content:center;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   INVENTORY MODULE
   ══════════════════════════════════════════════════════════════════════════════ */
.inv-wizard{width:100%;}
.inv-toolbar{
  display:flex;gap:10px;align-items:center;
  padding:10px 20px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}

.inv-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:12px 0;margin-bottom:16px;
}
.inv-stat{
  padding:10px 6px;text-align:center;
  border-radius:10px;
  border:1px solid var(--border);
}
.inv-stat strong{display:block;font-size:18px;font-weight:700;line-height:1;}
.inv-stat span{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-top:2px;}
.inv-stat-ok{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.3);}
.inv-stat-ok strong{color:#15803d;}
.inv-stat-warn{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.3);}
.inv-stat-warn strong{color:#d97706;}
.inv-stat-fail{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.3);}
.inv-stat-fail strong{color:#b91c1c;}
.inv-stat-damaged{background:rgba(168,85,247,.06);border-color:rgba(168,85,247,.3);}
.inv-stat-damaged strong{color:#7e22ce;}

.inv-category{
  margin-bottom:16px;
}
.inv-cat-hdr{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid #1B7599;
  border-radius:8px;
  margin-bottom:6px;
  font-weight:700;font-size:13px;
}
.inv-cat-hdr i{font-size:14px;}
.inv-cat-count{
  margin-left:auto;
  background:var(--white);
  padding:2px 10px;
  border-radius:10px;
  font-size:11px;font-weight:700;color:var(--muted);
  border:1px solid var(--border);
}
.inv-items{
  display:flex;flex-direction:column;gap:6px;
}
.inv-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  background:var(--white);
  border:1px solid var(--border);
  border-left:3px solid #22c55e;
  border-radius:8px;
  transition:all .15s;
}
.inv-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.05);}
.inv-item-main{flex:1;min-width:0;}
.inv-item-title{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:4px;
  font-size:13px;color:var(--text);
}
.inv-item-title strong{font-size:14px;font-weight:700;}
.inv-item-sn{
  font-family:var(--font-mono,monospace);
  background:var(--bg);
  padding:1px 6px;
  border-radius:4px;
  font-size:10px;color:var(--muted);
}
.inv-item-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;
}
.inv-item-qty{
  display:inline-flex;align-items:baseline;gap:3px;
  background:var(--bg);padding:2px 8px;border-radius:6px;
  font-size:12px;
}
.inv-item-qty strong{font-size:14px;font-weight:700;color:var(--text);}
.inv-item-qty-sep{opacity:.4;margin:0 1px;}
.inv-item-qty span{color:var(--muted);}
.inv-item-status{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;
  font-weight:700;
  border-radius:10px;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
}
.inv-item-status i{font-size:9px;}
.inv-item-checked{
  color:var(--muted);font-size:10px;
  font-style:italic;
}
.inv-item-note{
  margin-top:6px;
  padding:6px 8px;
  background:rgba(255,193,7,.06);
  border-left:2px solid rgba(255,193,7,.5);
  font-size:11px;color:var(--text);
  border-radius:4px;
}
.inv-item-note i{margin-right:4px;opacity:.7;}
.inv-item-actions{
  display:flex;gap:4px;flex-shrink:0;
}

/* One-click status buttons on item card */
.inv-item-check-btns{
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;
  padding:0 2px;
}
.inv-check-btn{
  width:36px;height:36px;border-radius:10px;
  border:2px solid var(--border);background:var(--white);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--muted);
  transition:all .15s;
}
.inv-check-btn:hover{transform:scale(1.1);}
.inv-check-ok:hover,.inv-check-ok.inv-check-active{
  border-color:#22c55e;background:rgba(34,197,94,.12);color:#22c55e;
}
.inv-check-missing:hover,.inv-check-missing.inv-check-active{
  border-color:#ef4444;background:rgba(239,68,68,.12);color:#ef4444;
}
.inv-check-damaged:hover,.inv-check-damaged.inv-check-active{
  border-color:#a855f7;background:rgba(168,85,247,.12);color:#a855f7;
}

/* Quick-check status chips */
.inv-status-chips{
  display:flex;flex-wrap:wrap;gap:6px;
}
.inv-status-chip{
  padding:6px 10px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:16px;
  font-size:11px;font-weight:600;
  color:var(--text);cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.inv-status-chip:hover{
  border-color:var(--s-color,#1B7599);
  color:var(--s-color,#1B7599);
}
.inv-status-chip.active{
  background:var(--s-color,#1B7599);
  border-color:var(--s-color,#1B7599);
  color:#fff;
}

/* Mobile */
@media(max-width:640px){
  .inv-summary{grid-template-columns:repeat(2,1fr);}
  .inv-item{flex-direction:column;align-items:stretch;}
  .inv-item-actions{justify-content:flex-end;}
  .inv-item-meta{flex-direction:column;align-items:flex-start;gap:4px;}
}

/* Dark mode */
body.dark-theme .inv-cat-hdr,
body.dark-theme .inv-item,
body.dark-theme .inv-status-chip,
body.theme-dark .inv-cat-hdr,
body.theme-dark .inv-item,
body.theme-dark .inv-status-chip{background:var(--surface);}
body.dark-theme .inv-item-qty,
body.dark-theme .inv-item-sn,
body.theme-dark .inv-item-qty,
body.theme-dark .inv-item-sn{background:rgba(255,255,255,.04);}

/* ══════════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS CENTER
   ══════════════════════════════════════════════════════════════════════════════ */
.notif-overlay{
  position:fixed;inset:0;z-index:20000;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  animation:notifFade .25s ease-out;
}
@keyframes notifFade{from{opacity:0;}to{opacity:1;}}
.notif-panel{
  background:var(--white);
  border-radius:16px;
  width:100%;max-width:560px;max-height:92vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:notifSlide .3s cubic-bezier(.22,.9,.28,1);
  overflow:hidden;
}
@keyframes notifSlide{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.notif-hdr{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(27,117,153,.05) 0%,transparent 100%);
}
.notif-hdr h2{margin:0;font-size:16px;font-weight:700;color:var(--text);}
.notif-subtitle{margin-top:2px;font-size:11px;color:var(--muted);}

.notif-tabs{
  display:flex;gap:4px;overflow-x:auto;
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  scrollbar-width:thin;
}
.notif-tabs::-webkit-scrollbar{height:0;}
.notif-tab{
  padding:6px 12px;
  background:transparent;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--muted);
  font-size:12px;font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  font-family:inherit;
  transition:all .15s;
}
.notif-tab:hover{background:var(--hover);color:var(--text);}
.notif-tab.active{
  background:#1B7599;
  color:#fff;
  border-color:#1B7599;
}
.notif-tab i{margin-right:4px;font-size:10px;}

.notif-body{
  flex:1;overflow-y:auto;
  padding:8px 12px 16px;
  -webkit-overflow-scrolling:touch;
}
.notif-group-hdr{
  padding:12px 8px 6px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
}

.notif-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px;
  margin-bottom:4px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  position:relative;
}
.notif-item:hover{
  background:var(--hover);
  border-color:rgba(27,117,153,.35);
}
.notif-item.notif-unread{
  background:rgba(27,117,153,.04);
  border-left:3px solid #1B7599;
}
.notif-item.notif-unread::before{
  content:'';
  position:absolute;top:14px;right:12px;
  width:8px;height:8px;
  background:#1B7599;
  border-radius:50%;
}

.notif-icon-wrap{
  width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  font-size:15px;
}
.notif-content{flex:1;min-width:0;}
.notif-title-row{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:3px;
}
.notif-title{
  font-size:13px;font-weight:700;
  color:var(--text);
  line-height:1.3;
  flex:1;min-width:0;
}
.notif-type-tag{
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);
  background:var(--bg);
  padding:2px 6px;
  border-radius:4px;
  flex-shrink:0;
}
.notif-body-text{
  font-size:12px;color:var(--text);
  opacity:.85;line-height:1.4;
  margin-bottom:4px;
  /* Truncate at 3 lines */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.notif-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;color:var(--muted);
}
.notif-meta-row i{margin-right:3px;opacity:.7;}
.notif-link-hint{
  color:#1B7599;font-weight:600;
}

.notif-actions{
  display:flex;flex-direction:column;gap:4px;flex-shrink:0;
  opacity:.5;transition:opacity .15s;
}
.notif-item:hover .notif-actions{opacity:1;}
.notif-action-btn{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);
  border-radius:6px;color:var(--muted);
  cursor:pointer;font-size:11px;
  transition:all .15s;
}
.notif-action-btn:hover{
  background:rgba(27,117,153,.08);
  color:#1B7599;
  border-color:rgba(27,117,153,.4);
}
.notif-action-danger:hover{
  background:rgba(239,68,68,.1);
  color:#dc2626;
  border-color:rgba(239,68,68,.4);
}

.notif-empty{
  padding:48px 24px;text-align:center;color:var(--muted);
}
.notif-empty i{font-size:42px;opacity:.3;margin-bottom:12px;display:block;}
.notif-empty p{margin:0;font-size:13px;}

/* ═══ Header Bell Button (Desktop) ═══ */
.notif-bell-btn{
  position:relative;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:12px;
  color:rgba(255,255,255,.85);
  cursor:pointer;
  transition:background-color .25s var(--ease),color .2s,border-color .2s,box-shadow .25s;
  font-size:15px;
  flex-shrink:0;
}
.notif-bell-btn:hover{
  background:rgba(255,255,255,.15);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.notif-bell-btn.notif-bell-has-unread{
  color:#6BC3F0;
  border-color:rgba(107,195,240,.5);
  background:rgba(107,195,240,.15);
}
.notif-bell-btn.notif-bell-has-unread i{
  animation:notifBellRing 2.5s ease-in-out infinite;
  transform-origin:50% 0;
}
@keyframes notifBellRing{
  0%,80%,100%{transform:rotate(0);}
  85%{transform:rotate(-12deg);}
  90%{transform:rotate(10deg);}
  95%{transform:rotate(-6deg);}
}

.notif-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:18px;height:18px;
  display:none;align-items:center;justify-content:center;
  padding:0 4px;
  background:#dc2626;
  color:#fff;
  font-size:10px;font-weight:700;
  border-radius:10px;
  border:2px solid var(--white);
  box-sizing:content-box;
  line-height:1;
}
body.dark-theme .notif-badge,
body.theme-dark .notif-badge{border-color:var(--surface);}

/* Mobile drawer badge */
.notif-mobile-badge{
  display:none;align-items:center;justify-content:center;
  min-width:18px;height:18px;
  padding:0 5px;margin-left:auto;
  background:#dc2626;color:#fff;
  font-size:10px;font-weight:700;
  border-radius:10px;
  line-height:1;
}

/* Mobile: full bottom sheet */
@media(max-width:640px){
  .notif-overlay{padding:0;align-items:flex-end;}
  .notif-panel{max-height:95vh;border-radius:16px 16px 0 0;}
  .notif-tabs{padding:6px 10px;}
  .notif-tab{padding:5px 10px;font-size:11px;}
}

/* Dark mode */
body.dark-theme .notif-panel,
body.theme-dark .notif-panel{background:var(--surface);}
body.dark-theme .notif-item,
body.theme-dark .notif-item{background:rgba(255,255,255,.02);}
body.dark-theme .notif-item.notif-unread,
body.theme-dark .notif-item.notif-unread{background:rgba(107,195,240,.08);border-left-color:#6BC3F0;}
body.dark-theme .notif-tab.active,
body.theme-dark .notif-tab.active{background:#6BC3F0;border-color:#6BC3F0;color:#0a2838;}

/* ══════════════════════════════════════════════════════════════════════════════
   INSPECTION HISTORY + BULK-RANGE PRESETS
   ══════════════════════════════════════════════════════════════════════════════ */
.lbih-month-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:6px;
  margin-bottom:14px;
}
.lbih-month-cell{
  padding:10px 6px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:8px;
  text-align:center;
  transition:all .15s;
}
.lbih-month-cell:not(.lbih-month-missing):hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.lbih-month-missing{background:var(--bg);opacity:.5;}
.lbih-month-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.lbih-month-status{font-size:16px;}

.lbih-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:6px;
  background:var(--white);
  border:1px solid var(--border);
  border-left:4px solid #22c55e;
  border-radius:10px;
  transition:all .15s;
}
.lbih-item:hover{box-shadow:0 2px 10px rgba(0,0,0,.06);}
.lbih-item-hdr{
  display:flex;align-items:center;gap:10px;
  margin-bottom:4px;
  font-size:14px;color:var(--text);
}
.lbih-status-badge{
  padding:2px 8px;border-radius:10px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
}
.lbih-item-meta{
  font-size:11px;color:var(--muted);
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.lbih-item-meta i{font-size:10px;margin-right:2px;opacity:.7;}
.lbih-item-actions{display:flex;gap:4px;flex-shrink:0;}

/* Bulk-range preset chips */
.lbbr-preset{
  padding:4px 10px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:14px;
  font-size:11px;font-weight:600;
  color:var(--text);cursor:pointer;
  font-family:inherit;
  transition:all .15s;
}
.lbbr-preset:hover{
  background:#1B7599;color:#fff;border-color:#1B7599;
}

@media(max-width:640px){
  .lbih-month-grid{grid-template-columns:repeat(4,1fr);}
  .lbih-item{flex-direction:column;align-items:stretch;}
  .lbih-item-actions{justify-content:flex-end;}
}

body.dark-theme .lbih-item,
body.dark-theme .lbih-month-cell,
body.dark-theme .lbbr-preset,
body.theme-dark .lbih-item,
body.theme-dark .lbih-month-cell,
body.theme-dark .lbbr-preset{background:var(--surface);}

/* ══════════════════════════════════════════════════════════════════════════════
   INSPECTION BANNER (im Fahrtenbuch)
   ══════════════════════════════════════════════════════════════════════════════ */
.lb-insp-banner{
  display:flex;align-items:center;gap:14px;
  margin:12px 20px 0;
  padding:14px 18px;
  border-radius:10px;
  border-left:4px solid #14b8a6;
  background:rgba(20,184,166,.08);
  animation:lbInspBannerSlide .3s cubic-bezier(.22,.9,.28,1);
}
@keyframes lbInspBannerSlide{
  from{transform:translateY(-8px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}
.lb-insp-banner-icon{
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  color:#14b8a6;
}
.lb-insp-banner-content{flex:1;min-width:0;}
.lb-insp-banner-title{
  font-size:14px;font-weight:700;color:var(--text);line-height:1.3;
  margin-bottom:3px;
}
.lb-insp-banner-sub{
  font-size:12px;color:var(--muted);line-height:1.4;
}
.lb-insp-banner-actions{
  display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;
}

/* Urgency levels */
.lb-insp-banner-info{
  background:rgba(20,184,166,.08);
  border-left-color:#14b8a6;
}
.lb-insp-banner-info .lb-insp-banner-icon{color:#14b8a6;}

.lb-insp-banner-warn{
  background:rgba(245,158,11,.1);
  border-left-color:#f59e0b;
}
.lb-insp-banner-warn .lb-insp-banner-icon{color:#d97706;}
.lb-insp-banner-warn .lb-insp-banner-title{color:#b45309;}

.lb-insp-banner-critical{
  background:rgba(239,68,68,.1);
  border-left-color:#dc2626;
  border:1px solid rgba(239,68,68,.25);
  border-left-width:4px;
  animation:lbInspBannerPulse 2.5s ease-in-out infinite,lbInspBannerSlide .3s cubic-bezier(.22,.9,.28,1);
}
@keyframes lbInspBannerPulse{
  0%,100%{box-shadow:0 0 0 rgba(239,68,68,0);}
  50%{box-shadow:0 0 18px rgba(239,68,68,.18);}
}
.lb-insp-banner-critical .lb-insp-banner-icon{color:#dc2626;animation:lbInspIconShake 1.5s ease-in-out infinite;}
@keyframes lbInspIconShake{
  0%,100%{transform:rotate(0);}
  25%{transform:rotate(-6deg);}
  75%{transform:rotate(6deg);}
}
.lb-insp-banner-critical .lb-insp-banner-title{color:#b91c1c;}

.lb-insp-banner-ok{
  background:rgba(34,197,94,.06);
  border-left-color:#22c55e;
}

.lb-insp-btn-critical{
  background:#dc2626 !important;border-color:#dc2626 !important;color:#fff !important;
}
.lb-insp-btn-critical:hover{background:#b91c1c !important;border-color:#b91c1c !important;}
.lb-insp-btn-warn{
  background:#f59e0b !important;border-color:#f59e0b !important;color:#fff !important;
}
.lb-insp-btn-warn:hover{background:#d97706 !important;border-color:#d97706 !important;}

@media(max-width:640px){
  .lb-insp-banner{flex-direction:column;align-items:stretch;gap:10px;}
  .lb-insp-banner-actions{justify-content:stretch;}
  .lb-insp-banner-actions .btn{flex:1;}
}

body.dark-theme .lb-insp-banner-info,
body.theme-dark .lb-insp-banner-info{background:rgba(107,195,240,.1);}

/* ═══ SP-Warning Banner in der Verwaltung ═══ */
.lba-sp-warning{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  border-radius:10px;
  grid-column:1/-1;
  margin-bottom:2px;
  animation:lbInspBannerSlide .3s cubic-bezier(.22,.9,.28,1);
}
.lba-sp-warning-icon{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.lba-sp-warning-title{
  font-size:14px;font-weight:700;line-height:1.3;margin-bottom:3px;
}
.lba-sp-warning-sub{
  font-size:11px;color:var(--muted);line-height:1.4;
}
.lba-sp-warning-critical{
  animation:lbInspBannerPulse 2.5s ease-in-out infinite,lbInspBannerSlide .3s cubic-bezier(.22,.9,.28,1);
}
.lba-sp-warning-critical .lba-sp-warning-icon i{
  animation:lbInspIconShake 1.5s ease-in-out infinite;
}
@media(max-width:640px){
  .lba-sp-warning{flex-direction:column;align-items:stretch;text-align:center;}
  .lba-sp-warning-icon{margin:0 auto;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   LAYOUT-FIX: Fahrtenbuch + Verwaltung volle Höhe ohne leere Bereiche
   ══════════════════════════════════════════════════════════════════════════════
   Problem war: #view-logbook hatte Klasse "admin-view" (ohne flex-height), Content
   rutschte nach unten. Auch Verwaltungs-Content konnte bei kleinem Inhalt eine
   leere Zone am Ende haben. Dieses CSS zwingt beide Views auf full-height-flex. */

.logbook-layout{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Make sure any content inside logbook/verwaltung uses the available height */
#view-logbook{flex:1;display:none;flex-direction:column;overflow:hidden;}
#view-logbook[style*="display:flex"],
#view-logbook[style*="display: flex"]{display:flex !important;}

/* Logbook-view has no sidebar (unlike verwaltung) — all content is top-down */
#view-logbook > *{flex-shrink:0;}
#view-logbook #lb-month-grid{flex:1;min-height:0;overflow-y:auto;}

/* Verwaltung: ensure the content-area really fills */
#view-verwaltung{flex:1;min-height:0;}
.verwaltung-content{min-height:0;}
.verwaltung-section{min-height:0;}

/* Mobile: Both views must honor the mobile viewport calc */
@media (max-width:768px){
  #view-logbook,
  #view-verwaltung{
    height:calc(100vh - 60px - env(safe-area-inset-bottom,0)) !important;
    height:calc(100dvh - 60px - env(safe-area-inset-bottom,0)) !important;
    max-height:calc(100vh - 60px - env(safe-area-inset-bottom,0)) !important;
    max-height:calc(100dvh - 60px - env(safe-area-inset-bottom,0)) !important;
    margin-bottom:calc(60px + env(safe-area-inset-bottom,0));
    margin-top:0;
  }
  /* Inner scrolling areas properly scope the overflow */
  #view-logbook #lb-month-grid,
  .verwaltung-content,
  .verwaltung-section{
    -webkit-overflow-scrolling:touch;
  }
  /* Landscape: slimmer bar */
}
@media (max-width:768px) and (orientation:landscape){
  #view-logbook,
  #view-verwaltung{
    height:calc(100vh - 50px - env(safe-area-inset-bottom,0)) !important;
    height:calc(100dvh - 50px - env(safe-area-inset-bottom,0)) !important;
    margin-bottom:calc(50px + env(safe-area-inset-bottom,0));
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   SCR-APP LAYOUT HARDENING — fixes "empty space at top" bug
   ══════════════════════════════════════════════════════════════════════════════
   Problem: Auf Mobile-Viewports war ein leerer Bereich über dem Content und
   die aktive View wurde nach unten geschoben. Ursache war mehrschichtig:

   1. #scr-app ist `display:flex; flex-direction:column`. Seine DIREKTEN Kinder
      umfassen u.a. broadcast-banners (leer, aber Block), app-header (auf Mobile
      display:none), diverse hidden dropdowns (profile-menu etc.).
   2. Manche dieser "versteckten" Kinder hatten style="display:none" INLINE aber
      zu einem späteren Zeitpunkt wurde das bei Fokus/Hover-Interaktion verändert.
   3. Der view-* Container (z.B. #view-logbook) bekam von showView() display:flex,
      ohne das flex:1 explizit zu setzen — so wurde er nicht expanded.

   Fix: harte Guards auf #scr-app + seine Kinder. */

#scr-app{
  flex:1;
  min-height:0;
}

/* Every direct hidden child must take zero space. */
#scr-app > [style*="display:none"],
#scr-app > [style*="display: none"]{
  flex:0 0 0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
}

/* broadcast-banners: 0-height when empty */
#broadcast-banners:empty{
  display:none !important;
}

/* The active view must fill remaining space */
#scr-app > #view-chat:not([style*="display:none"]),
#scr-app > #view-logbook:not([style*="display:none"]),
#scr-app > #view-verwaltung:not([style*="display:none"]),
#scr-app > #view-admin:not([style*="display:none"]),
#scr-app > #view-tasks:not([style*="display:none"]),
#scr-app > #view-history:not([style*="display:none"]),
#scr-app > #view-performance:not([style*="display:none"]),
#scr-app > #view-profile:not([style*="display:none"]){
  flex:1 1 auto !important;
  min-height:0;
}

/* Mobile: app-header really HIDDEN, not just visually — zero layout impact */
@media (max-width:768px){
  .app-header{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }
  .app-header::after,
  .app-header::before{display:none !important;}

  /* header-nav also fully neutralized */
  .header-nav{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   VERWALTUNG INNER LAYOUT HARDENING
   ══════════════════════════════════════════════════════════════════════════════
   Problem: .verwaltung-content enthält mehrere Geschwister:
     - .verwaltung-welcome (flex:1)
     - 4x .verwaltung-section (flex:1)
   Auch wenn 3 der 4 Sections display:none haben, kann in manchen Browsern
   das flex:1 der nicht-aktiven Elemente Ghost-Space reservieren. Wir zwingen
   alle hidden Kinder auf 0, und die aktive Section füllt den verbleibenden Platz. */

/* 1) Hidden Elemente absolut auf 0 — egal ob direkter Kind von #scr-app oder nicht */
.verwaltung-content > [style*="display:none"],
.verwaltung-content > [style*="display: none"]{
  flex:0 0 0 !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  border:0 !important;
  opacity:0 !important;
}

/* 2) Sichtbare Section / Welcome füllt immer verfügbare Höhe */
.verwaltung-content > .verwaltung-section:not([style*="display:none"]),
.verwaltung-content > .verwaltung-welcome:not([style*="display:none"]){
  flex:1 1 0% !important;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* 3) Welcome keeps its centered styling when visible */
.verwaltung-content > .verwaltung-welcome:not([style*="display:none"]){
  align-items:center;
  justify-content:center;
}

/* 4) Sections inner content should fill available height */
.verwaltung-section > *{
  width:100%;
}
.verwaltung-section > *:only-child,
.verwaltung-section > #lba-container,
.verwaltung-section > .panel:only-child{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

/* 5) Mobile verwaltung-content needs explicit flex behavior */
@media (max-width:768px){
  #view-verwaltung{
    display:none;  /* default hidden */
  }
  #view-verwaltung[style*="display:flex"],
  #view-verwaltung[style*="display: flex"]{
    display:flex !important;
    flex-direction:column !important;
  }
  .verwaltung-content{
    flex:1 1 0%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
}

/* Mobile drawer bell button: sits on light background (not header), use different palette */
.notif-bell-btn-mobile{
  background:var(--hover) !important;
  border:1.5px solid var(--border) !important;
  color:var(--text) !important;
  width:36px !important;height:36px !important;
  border-radius:10px !important;
}
.notif-bell-btn-mobile:hover{
  background:rgba(27,117,153,.1) !important;
  color:#1B7599 !important;
  border-color:rgba(27,117,153,.4) !important;
}
.notif-bell-btn-mobile.notif-bell-has-unread{
  color:#1B7599 !important;
  border-color:rgba(27,117,153,.4) !important;
  background:rgba(27,117,153,.08) !important;
}
body.dark-theme .notif-bell-btn-mobile,
body.theme-dark .notif-bell-btn-mobile{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.15) !important;
}

/* Remove the old mmd-sitem entry for notifications since we have it in the header now */
#mmd-grid .mmd-sitem[onclick*="notifShow"]{display:none;}

/* Inspection month picker — shown when multiple months need SP */
.lb-insp-picker-list{
  display:flex;flex-direction:column;gap:6px;
}
.lb-insp-picker-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  text-align:left;
  width:100%;
}
.lb-insp-picker-item:hover{
  background:rgba(27,117,153,.05);
  border-color:rgba(27,117,153,.4);
  transform:translateX(2px);
}
body.dark-theme .lb-insp-picker-item,
body.theme-dark .lb-insp-picker-item{background:var(--surface);}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE + ZOOM-200% HARDENING
   ══════════════════════════════════════════════════════════════════════════════
   Anforderung: Fahrtenbuch (User), Fahrtenbuch-Verwaltung, Flotte,
   Zeiterfassung-Verwaltung, Kalender-Verwaltung müssen auch bei 200% Zoom
   und auf kleinen Phones benutzbar sein. Insbesondere wird Fahrtenbuch
   (User) hauptsächlich mobil verwendet. */

/* ═══ 1) FLOTTE — Content nicht bis zum Rand ═══ */
#verwaltung-section-flotte > .panel,
#verwaltung-section-fahrtenbuch > .panel,
#verwaltung-section-zeiterfassung > .panel,
#verwaltung-section-kalender > .panel{
  margin:16px 20px !important;
}
#verwaltung-section-flotte .panel-body,
#verwaltung-section-fahrtenbuch .panel-body,
#verwaltung-section-zeiterfassung .panel-body,
#verwaltung-section-kalender .panel-body{
  padding:18px 20px;
}

/* Fleet vehicle cards — edge-to-edge, padding handled by children */

/* ═══ 2) MOBILE (≤768px) — general ═══ */
@media (max-width:768px){
  /* Compact margins on all verwaltung sections */
  #verwaltung-section-flotte > .panel,
  #verwaltung-section-fahrtenbuch > .panel,
  #verwaltung-section-zeiterfassung > .panel,
  #verwaltung-section-kalender > .panel{
    margin:10px !important;
  }
  #verwaltung-section-flotte .panel-body,
  #verwaltung-section-fahrtenbuch .panel-body,
  #verwaltung-section-zeiterfassung .panel-body,
  #verwaltung-section-kalender .panel-body{
    padding:12px;
  }

  /* Fleet cards: stacked action buttons, bigger touch targets */
  .fleet-card{padding:12px 14px;}
  .fleet-card-top{flex-direction:column;align-items:flex-start;gap:6px;}
  .fleet-card-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(44px,1fr));
    gap:4px;
  }
  .fleet-icon-btn{
    width:auto !important;
    min-height:44px;  /* touch target */
    padding:10px 8px;
  }
  .fleet-row{flex-wrap:wrap;gap:8px;}

  /* Panel headers need to wrap better */
  .panel-hdr{
    padding:12px 14px;
    flex-wrap:wrap;
    gap:10px;
  }
  .panel-hdr h3{font-size:13px;min-width:0;flex:1;}
  .panel-hdr .btn{flex-shrink:0;}

  /* ── Fahrtenbuch (User-View) — essential mobile polish ── */
  /* The shell has a toolbar with 4 buttons that need to wrap nicely */
  #view-logbook > div:first-child{
    padding:12px !important;
  }
  /* Vehicle-bar: larger tap targets */
  #lb-vehicle-bar{
    padding:10px 12px !important;
    gap:8px !important;
  }
  /* Month grid: more compact padding on phones */
  #lb-month-grid{padding:8px 10px !important;}
  /* Day rows: ensure the whole row is tappable */
  .lb-day-row{
    min-height:56px;
    padding:10px 12px;
  }
  /* Inspection banner: tighter margins on mobile */
  .lb-insp-banner{margin:10px 12px 0;padding:12px;gap:10px;}
  .lb-insp-banner-icon{width:36px;height:36px;font-size:18px;}
  .lb-insp-banner-title{font-size:13px;}
  .lb-insp-banner-sub{font-size:11px;}
  .lb-insp-banner-actions .btn{padding:10px 12px;}
}

/* ═══ 3) VERY SMALL PHONES (≤480px) ═══ */
@media (max-width:480px){
  /* Tighter still */
  .panel-hdr{padding:10px 12px;}
  .panel-hdr h3{font-size:12px;}
  .panel-body{padding:10px !important;}
  #verwaltung-section-flotte > .panel,
  #verwaltung-section-fahrtenbuch > .panel,
  #verwaltung-section-zeiterfassung > .panel,
  #verwaltung-section-kalender > .panel{
    margin:8px !important;
  }
  /* Logbook toolbar button labels can hide, icons only */
  #view-logbook > div:first-child .btn span:not(.nav-label){
    /* keep labels on small buttons but shrink font */
    font-size:11px;
  }
  .fleet-card-actions{
    grid-template-columns:repeat(3,1fr);
  }
  .fleet-icon-btn{font-size:13px;}
}

/* ═══ 4) ZOOM 200% HARDENING ═══
   When a user sets font-size to 200%, all UI still needs to work.
   We target body[data-zoom="2"] / body.fs-200 which your app sets. */
body[data-zoom="2"] #view-logbook .btn,
body.fs-200 #view-logbook .btn,
body[data-zoom="1.75"] #view-logbook .btn,
body.fs-175 #view-logbook .btn{
  padding:6px 10px;
  font-size:12px;
  flex-shrink:0;
}
body[data-zoom="2"] #view-logbook > div:first-child,
body.fs-200 #view-logbook > div:first-child{
  padding:10px !important;
}
body[data-zoom="2"] .panel-hdr,
body.fs-200 .panel-hdr{
  padding:10px;
  flex-wrap:wrap;
}
body[data-zoom="2"] .panel-hdr h3,
body.fs-200 .panel-hdr h3{
  font-size:13px;  /* clamp down from 2× */
}
body[data-zoom="2"] .fleet-card-actions,
body.fs-200 .fleet-card-actions{
  grid-template-columns:repeat(3,1fr);
}
body[data-zoom="2"] .lb-insp-banner,
body.fs-200 .lb-insp-banner{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:10px;
}
body[data-zoom="2"] .lb-insp-banner-title,
body.fs-200 .lb-insp-banner-title{font-size:14px;}

/* ═══ 5) TABLET LANDSCAPE (e.g. iPad in Fahrtenbuch-Van) ═══ */
@media (min-width:769px) and (max-width:1024px){
  #view-logbook > div:first-child{padding:14px 18px !important;}
  .fleet-card-actions{gap:4px;}
}

/* ═══ 6) LARGE TAP TARGETS for Fahrtenbuch day-rows (van-use case) ═══ */
.lb-day-row{
  transition:background .12s;
}
.lb-day-row:active{
  background:rgba(27,117,153,.1);
}

/* ═══ 7) Make sure verwaltung dropdown menu doesn't overlap anything ═══ */
.verwaltung-wrap{z-index:9999;}

/* ══════════════════════════════════════════════════════════════════════════════
   FAHRTENBUCH — compact mobile-first toolbar + collapsible inspection banner
   ══════════════════════════════════════════════════════════════════════════════
   Philosophie: Fahrtenbuch wird hauptsächlich mobil im Transporter bedient.
   Alles muss Minimal-Platz brauchen, aber große Touch-Targets haben. */

/* ── Kompakte Tool-Buttons mit Icon + Label ── */
.lb-tool-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;
  height:40px;
  padding:0 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:all .15s;
  flex:1 1 0;   /* equal-width distribution */
  min-width:0;
  font-family:inherit;
}
.lb-tool-btn i{font-size:14px;color:var(--blue);flex-shrink:0;}
.lb-tool-btn-label{
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.lb-tool-btn:hover{
  background:rgba(27,117,153,.08);
  border-color:#6BC3F0;
  color:#1B7599;
}
.lb-tool-btn:active{transform:scale(.97);}

body.dark-theme .lb-tool-btn,
body.theme-dark .lb-tool-btn{
  background:var(--surface);color:var(--text);border-color:var(--border);
}
body.dark-theme .lb-tool-btn i,
body.theme-dark .lb-tool-btn i{color:#6BC3F0;}

/* ── Collapsible "Done"-Banner ── */
/* Collapsed state: single ~36px tall row with icon + status + chevron */
.lb-insp-banner-done{
  cursor:pointer;
  display:grid;
  grid-template-columns:32px 1fr 28px;
  grid-template-rows:auto;
  gap:10px;
  align-items:center;
  padding:8px 12px !important;
  transition:padding .2s, background .2s;
  position:relative;
}
.lb-insp-banner-icon-compact{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;
  grid-column:1;grid-row:1;
}
.lb-insp-banner-title-compact{
  grid-column:2;grid-row:1;
  font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-insp-banner-chevron{
  grid-column:3;grid-row:1;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--muted);
  transition:transform .2s;
}
.lb-insp-banner-done:not(.lb-insp-banner-collapsed) .lb-insp-banner-chevron{
  transform:rotate(180deg);
}
.lb-insp-banner-expanded{
  grid-column:1 / -1;grid-row:2;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:4px;
  animation:lbInspExpand .2s ease-out;
}
.lb-insp-banner-collapsed .lb-insp-banner-expanded{display:none;}

@keyframes lbInspExpand{
  from{opacity:0;max-height:0;}
  to{opacity:1;max-height:200px;}
}

/* Mobile: even more compact tool bar */
@media (max-width:768px){
  .lb-tools-bar{
    gap:8px !important;
  }
  .lb-tool-btn{
    width:44px;height:44px;  /* touch target */
    font-size:16px;
  }
  /* Fahrtenbuch header even tighter on mobile */
  #view-logbook > div:first-child{
    padding:10px 12px !important;
  }
  #view-logbook > div:first-child h2{
    font-size:16px !important;
  }
  /* Vehicle-bar compact on mobile — single row scrollable */
  #lb-vehicle-bar{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    scrollbar-width:none;  /* Firefox */
    -webkit-overflow-scrolling:touch;
  }
  #lb-vehicle-bar::-webkit-scrollbar{display:none;}
  /* Compact banner on phone: smaller icon, tighter */
  .lb-insp-banner-done{
    grid-template-columns:28px 1fr 24px;
    padding:6px 10px !important;
    gap:8px;
  }
  .lb-insp-banner-icon-compact{
    width:28px;height:28px;font-size:13px;
  }
  .lb-insp-banner-title-compact{font-size:12px;}
  /* Month navigation row — more breathing room for tap */
  #view-logbook > div:nth-child(2){
    padding:10px 12px !important;
    gap:8px !important;
  }
  #view-logbook > div:nth-child(2) .btn{
    min-height:44px;
    padding:8px 12px;
  }
  #lb-month-label{font-size:15px !important;min-width:140px !important;}
}

/* Very small phones: ultra-compact */
@media (max-width:380px){
  .lb-tool-btn{width:42px;height:42px;}
  #view-logbook > div:first-child{padding:8px 10px !important;}
  #view-logbook > div:first-child h2{font-size:15px !important;}
}

/* 200% Zoom hardening for Fahrtenbuch */
body.fs-200 .lb-tool-btn,
body[data-zoom="2"] .lb-tool-btn{
  width:36px;height:36px;font-size:13px;
}
body.fs-200 #view-logbook > div:first-child h2,
body[data-zoom="2"] #view-logbook > div:first-child h2{
  font-size:14px !important;
}
body.fs-200 .lb-insp-banner-done,
body[data-zoom="2"] .lb-insp-banner-done{
  grid-template-columns:24px 1fr 20px;
  padding:4px 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FAHRTENBUCH — Week/Month View Toggle + Week List
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── View-mode toggle (segmented control) ── */
.lb-view-toggle{
  display:inline-flex;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:2px;
  gap:2px;
  flex-shrink:0;
}
.lb-view-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 12px;
  border:none;background:transparent;
  color:var(--muted);
  font-size:12px;font-weight:600;
  font-family:inherit;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
}
.lb-view-toggle-btn:hover{color:var(--text);}
.lb-view-toggle-btn.lb-view-active{
  background:#1B7599;
  color:#fff;
}
.lb-view-toggle-btn.lb-view-active i{color:#fff;}
.lb-view-toggle-btn i{font-size:11px;}

/* ── Week-list (day-rows for mobile) ── */
.lb-week-list{
  display:flex;flex-direction:column;
  gap:6px;
}
.lb-wd-row{
  display:grid;
  grid-template-columns:56px 32px 1fr 16px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .12s;
  min-height:64px;
}
.lb-wd-row:hover{border-color:#6BC3F0;}
.lb-wd-row:active{transform:scale(.995);background:rgba(27,117,153,.05);}

.lb-wd-date-col{
  display:flex;flex-direction:column;
  align-items:center;
  line-height:1;
}
.lb-wd-wday{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);
}
.lb-wd-daynum{
  font-size:22px;font-weight:800;
  color:var(--text);
  margin-top:1px;
}
.lb-wd-mon{
  font-size:9px;font-weight:600;
  color:var(--muted);
  margin-top:1px;
}

.lb-wd-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.04);
  font-size:14px;
}

.lb-wd-main{
  min-width:0;flex:1;
}
.lb-wd-primary{
  font-size:15px;font-weight:700;
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lb-wd-secondary{
  font-size:11px;color:var(--muted);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.lb-wd-chevron{
  color:var(--muted);
  font-size:11px;
  opacity:.5;
}

/* Status-specific row styling */
.lb-wd-filled{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.25);}
.lb-wd-filled:hover{border-color:rgba(34,197,94,.6);}
.lb-wd-filled .lb-wd-icon{background:rgba(34,197,94,.12);}

.lb-wd-no-trip{background:rgba(147,51,234,.04);border-color:rgba(147,51,234,.2);}
.lb-wd-no-trip .lb-wd-icon{background:rgba(147,51,234,.1);}

.lb-wd-weekend{opacity:.75;}
.lb-wd-weekend .lb-wd-icon{background:rgba(198,40,40,.08);}
.lb-wd-weekend .lb-wd-wday,.lb-wd-weekend .lb-wd-daynum{color:#c62828;}

.lb-wd-missing{background:rgba(232,139,0,.06);border-color:rgba(232,139,0,.3);}
.lb-wd-missing:hover{border-color:rgba(232,139,0,.6);}
.lb-wd-missing .lb-wd-icon{background:rgba(232,139,0,.15);}
.lb-wd-missing .lb-wd-primary{animation:lbPulseOrange 2s ease-in-out infinite;}

.lb-wd-future{opacity:.5;cursor:default;}
.lb-wd-future:hover{border-color:var(--border);}
.lb-wd-future:active{transform:none;}

.lb-wd-today{border:2px solid #1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.15);}
.lb-wd-today-num{color:#1B7599 !important;}

/* Admin-Override Markierung */
.lb-wd-admin-override{border-left:4px solid #f59e0b !important;background:rgba(245,158,11,.04) !important;}
.lb-wd-admin-override:hover{background:rgba(245,158,11,.08) !important;}
.lb-wd-override{
  display:inline-flex;align-items:center;gap:3px;
  font-size:9px;font-weight:700;color:#b45309;
  background:rgba(245,158,11,.15);padding:2px 6px;border-radius:6px;
  margin-left:8px;vertical-align:middle;cursor:help;
}
.lb-wd-override i{font-size:8px;}
.lb-wd-reset-btn{
  background:#d97706;color:#fff;border:none;border-radius:6px;
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:11px;flex-shrink:0;
  opacity:0;transition:opacity .15s,transform .1s;
}
.lb-wd-admin-override:hover .lb-wd-reset-btn{opacity:1;}
.lb-wd-reset-btn:hover{background:#b45309;transform:scale(1.1);}

@keyframes lbPulseOrange{
  0%,100%{opacity:1;}
  50%{opacity:.6;}
}

body.dark-theme .lb-wd-row,
body.theme-dark .lb-wd-row{background:var(--surface);border-color:var(--border);}

/* ── Mobile optimizations ── */
@media (max-width:768px){
  .lb-nav-row{
    padding:8px 10px !important;
    gap:6px !important;
  }
  .lb-view-toggle{
    width:100%;flex:1 1 100%;
    order:-1;  /* Toggle on top */
    margin-bottom:4px;
  }
  .lb-view-toggle-btn{
    flex:1;padding:9px 0;font-size:13px;
  }
  .lb-nav-btn{
    min-width:44px;min-height:44px;
    padding:8px 10px !important;
  }
  .lb-nav-today{
    min-height:44px;padding:8px 14px !important;
    font-size:12px !important;
  }
  #lb-month-label{
    font-size:14px !important;
    min-width:0 !important;
    flex:1;
  }
  /* Tool-buttons full width with labels */
  .lb-tool-btn{
    min-height:48px;  /* large touch */
    font-size:13px;
  }
  /* Week-list: larger rows */
  .lb-wd-row{
    min-height:72px;
    grid-template-columns:52px 36px 1fr 16px;
    gap:12px;
    padding:12px 14px;
  }
  .lb-wd-daynum{font-size:24px;}
  .lb-wd-primary{font-size:16px;}
  .lb-wd-secondary{font-size:12px;}
  .lb-wd-icon{width:36px;height:36px;font-size:16px;}

  /* Stats strip on mobile: below label, smaller */
  #lb-month-stats{
    width:100%;order:99;
    margin-left:0 !important;
    justify-content:flex-start;
  }
}

/* Very small phones */
@media (max-width:380px){
  .lb-tool-btn{padding:0 8px;font-size:12px;}
  .lb-tool-btn-label{font-size:12px;}
  .lb-wd-row{grid-template-columns:48px 32px 1fr 14px;gap:10px;padding:10px 12px;}
  .lb-wd-daynum{font-size:20px;}
  .lb-wd-primary{font-size:14px;}
}

/* 200% Zoom */
body.fs-200 .lb-tool-btn,
body[data-zoom="2"] .lb-tool-btn{
  height:36px;font-size:11px;padding:0 8px;
}
body.fs-200 .lb-tool-btn i,
body[data-zoom="2"] .lb-tool-btn i{font-size:12px;}
body.fs-200 .lb-view-toggle-btn,
body[data-zoom="2"] .lb-view-toggle-btn{padding:5px 9px;font-size:11px;}
body.fs-200 .lb-wd-daynum,
body[data-zoom="2"] .lb-wd-daynum{font-size:18px;}
body.fs-200 .lb-wd-primary,
body[data-zoom="2"] .lb-wd-primary{font-size:13px;}

/* ══════════════════════════════════════════════════════════════════════════════
   FAHRTENBUCH — Swipe feedback + floating "Heute" button
   ══════════════════════════════════════════════════════════════════════════════ */

/* Brief visual feedback after a successful swipe */
#lb-month-grid.lb-swipe-flash{
  animation:lbSwipeFlash .18s ease-out;
}
@keyframes lbSwipeFlash{
  0%{background:rgba(27,117,153,.08);}
  100%{background:transparent;}
}

/* Floating "Heute" button (only visible when navigated away from current period) */
.lb-today-fab{
  position:fixed;
  bottom:max(18px,env(safe-area-inset-bottom));
  right:18px;
  z-index:100;
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;
  background:#1B7599;
  color:#fff;
  border:none;
  border-radius:24px;
  font-size:14px;font-weight:700;
  font-family:inherit;
  box-shadow:0 6px 20px rgba(27,117,153,.35),0 2px 6px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  animation:lbFabAppear .22s ease-out;
}
.lb-today-fab:hover{
  background:#165a75;
  box-shadow:0 8px 24px rgba(27,117,153,.4),0 3px 8px rgba(0,0,0,.22);
  transform:translateY(-1px);
}
.lb-today-fab:active{transform:scale(.96);}
.lb-today-fab i{font-size:13px;}

@keyframes lbFabAppear{
  from{opacity:0;transform:translateY(12px) scale(.9);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

/* Mobile: slightly smaller FAB */
@media (max-width:768px){
  .lb-today-fab{
    bottom:max(16px,env(safe-area-inset-bottom));
    right:14px;
    padding:10px 16px;
    font-size:13px;
  }
}

/* Indicate swipeability with subtle hint on first viewed week */
.lb-week-list{touch-action:pan-y;}

/* ══════════════════════════════════════════════════════════════════════════════
   FAHRTENBUCH — Day Editor Footer (save/cancel/delete button layout)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Desktop layout: Löschen links, Abbrechen + Speichern rechts */
.lbe-footer{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.lbe-footer .lbe-del{
  margin-right:auto;  /* push delete to far left */
}

/* Mobile layout: stack vertically, Speichern auf top (Daumen-Zone), Löschen ganz unten */
@media (max-width:768px){
  .lbe-footer{
    flex-direction:column-reverse !important;
    gap:8px !important;
    padding:12px 14px !important;
  }
  .lbe-footer .btn{
    width:100%;
    min-height:48px;
    font-size:14px;
    justify-content:center;
    margin:0 !important;
  }
  /* Speichern = column-reverse puts last-in-DOM to top → reorder with order */
  .lbe-footer .lbe-save-btn{order:1;}      /* top: Speichern */
  .lbe-footer .lbe-cancel-btn{order:2;}    /* middle: Abbrechen */
  .lbe-footer .lbe-del{order:3;}            /* bottom: Löschen (destructive) */
  /* Make delete stand out less — thinner style */
  .lbe-footer .lbe-del{
    font-size:12px !important;
    min-height:40px !important;
    opacity:.8;
  }
}

/* 200% zoom — keep mobile stack */
body.fs-200 .lbe-footer,
body[data-zoom="2"] .lbe-footer{
  flex-direction:column-reverse;
  gap:6px;
}
body.fs-200 .lbe-footer .btn,
body[data-zoom="2"] .lbe-footer .btn{
  width:100%;
  min-height:40px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Time Tracking User Interface
   ══════════════════════════════════════════════════════════════════════════════
   Mobile-first wie das Fahrtenbuch. Viele Klassen spiegeln .lb-*-Klassen, damit
   das Look&Feel konsistent ist. */

/* Flex-Kette parent→view→scroll-container: .tt-page ist Flex-Container,
   #tt-day-list scrollt intern (overflow-y:auto, siehe Block ab Zeile ~20833).
   WICHTIG: Hier NICHT flex:0 0 auto auf #tt-day-list setzen — das würde
   verhindern dass es den freien Platz einnimmt und damit KANN nichts scrollen.
   Der Inhalt wäre dann länger als das Element selbst → clipped statt scroll.
   Die beiden Konflikt-Regeln (hier vs. Z.20833) haben den Monatsansicht-
   Scroll-Bug erzeugt. Wir lösen das final indem hier nur View-Container-
   Setup steht, kein tt-day-list-Style. */
#view-timetrack{
  flex:1;display:none;flex-direction:column;overflow:hidden;
  height:100%;min-height:0;
}
#view-timetrack[style*="display:flex"],
#view-timetrack[style*="display: flex"]{display:flex !important;}
/* .tt-page MUSS schrumpfen können damit ihr Child #tt-day-list seinen internen
   overflow:auto aktivieren kann. min-height:0 ist KRITISCH im Flex-Kontext —
   ohne das ist der intrinsische min-height des Children = content-height und
   der Container kann sich nicht kleiner machen als sein Inhalt → kein Scroll. */
#view-timetrack > .tt-page{flex:1 1 auto;min-height:0;}
/* Alle ANDEREN direkten Kinder (Header etc.) dürfen nicht schrumpfen */
#view-timetrack > *:not(.tt-page){flex-shrink:0;}

/* Auf Mobile: zusätzlicher Bottom-Padding damit der letzte Tag nicht
   unmittelbar an der Mobile-Nav klebt oder visuell davon verdeckt wirkt. */
@media (max-width: 768px){
  #view-timetrack #tt-day-list{
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── View-toggle (segmented control) — reuses .lb-view-toggle look ── */
.tt-view-toggle{
  display:inline-flex;background:var(--surface);border:1.5px solid var(--border);
  border-radius:10px;padding:2px;gap:2px;flex-shrink:0;
}
.tt-view-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:6px 12px;border:none;background:transparent;
  color:var(--muted);font-size:12px;font-weight:600;font-family:inherit;
  border-radius:8px;cursor:pointer;transition:all .15s;
}
.tt-view-toggle-btn:hover{color:var(--text);}
.tt-view-toggle-btn.tt-view-active{background:#1B7599;color:#fff;}
.tt-view-toggle-btn.tt-view-active i{color:#fff;}
.tt-view-toggle-btn i{font-size:11px;}

/* ── Stats row (monthly KPI cards) ── */
.tt-stats-row{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--border);
  background:var(--bg);overflow-x:auto;
  scrollbar-width:none;
}
.tt-stats-row::-webkit-scrollbar{display:none;}

/* ── Week/Day list (reuses .lb-wd-* pattern) ── */
.tt-week-list{display:flex;flex-direction:column;gap:6px;}
.tt-wd-row{
  display:grid;
  grid-template-columns:56px 32px 1fr 16px;
  gap:10px;align-items:center;
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:all .12s;
  min-height:64px;
}
.tt-wd-row:not([onclick]){cursor:default;}
.tt-wd-row[onclick]:hover{border-color:#6BC3F0;}
.tt-wd-row[onclick]:active{transform:scale(.995);background:rgba(27,117,153,.05);}

.tt-wd-date-col{display:flex;flex-direction:column;align-items:center;line-height:1;}
.tt-wd-wday{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.tt-wd-daynum{font-size:22px;font-weight:800;color:var(--text);margin-top:1px;}
.tt-wd-mon{font-size:9px;font-weight:600;color:var(--muted);margin-top:1px;}

.tt-wd-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(0,0,0,.04);
  font-size:14px;
}

.tt-wd-main{min-width:0;flex:1;}
.tt-wd-primary{
  font-size:15px;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tt-wd-secondary{
  font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tt-wd-chevron{color:var(--muted);font-size:11px;opacity:.5;}

/* Status-specific row styling */
.tt-wd-work{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.25);}
.tt-wd-work .tt-wd-icon{background:rgba(34,197,94,.12);}
.tt-wd-vacation{background:rgba(59,130,246,.04);border-color:rgba(59,130,246,.25);}
.tt-wd-vacation .tt-wd-icon{background:rgba(59,130,246,.12);}
.tt-wd-sick{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.25);}
.tt-wd-sick .tt-wd-icon{background:rgba(239,68,68,.12);}
.tt-wd-holiday{background:rgba(168,85,247,.05);border-color:rgba(168,85,247,.3);}
.tt-wd-holiday .tt-wd-icon{background:rgba(168,85,247,.12);}
.tt-wd-comp{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.3);}
.tt-wd-comp .tt-wd-icon{background:rgba(245,158,11,.12);}
.tt-wd-absence{background:rgba(100,116,139,.05);}
.tt-wd-absence .tt-wd-icon{background:rgba(100,116,139,.12);}
.tt-wd-missing{background:rgba(232,139,0,.06);border-color:rgba(232,139,0,.3);}
.tt-wd-missing .tt-wd-icon{background:rgba(232,139,0,.15);}
.tt-wd-missing .tt-wd-primary{animation:lbPulseOrange 2s ease-in-out infinite;}
.tt-wd-weekend{opacity:.75;}
.tt-wd-weekend .tt-wd-icon{background:rgba(198,40,40,.08);}
.tt-wd-weekend .tt-wd-wday,.tt-wd-weekend .tt-wd-daynum{color:#c62828;}
.tt-wd-rest{opacity:.55;}
.tt-wd-future{opacity:.5;cursor:default;}
.tt-wd-today{border:2px solid #1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.15);}
.tt-wd-today-num{color:#1B7599 !important;}

body.dark-theme .tt-wd-row,
body.theme-dark .tt-wd-row{background:var(--surface);border-color:var(--border);}

/* ── Day editor ── */
.tt-editor{max-width:520px;}
.tt-editor-body{padding:14px 16px;max-height:70vh;overflow-y:auto;}
.tt-edit-field{margin-bottom:14px;}
.tt-edit-label{
  display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:5px;
}
/* Icons innerhalb von tt-edit-label bekommen einen kleinen Abstand zum Text
   damit Play-/Stop-/Info-Icons nicht direkt am Buchstaben kleben. */
.tt-edit-label i{
  margin-right:6px;
  vertical-align:baseline;
}
.tt-edit-field input[type="time"],
.tt-edit-field input[type="text"],
.tt-edit-field input[type="number"],
.tt-edit-field textarea{
  width:100%;padding:10px 12px;
  border:1.5px solid var(--border);border-radius:8px;
  font-size:14px;font-family:inherit;background:var(--surface);color:var(--text);
  box-sizing:border-box;
}
.tt-edit-field input:focus,.tt-edit-field textarea:focus{outline:none;border-color:#1B7599;}
.tt-edit-field textarea{resize:vertical;min-height:60px;}
.tt-edit-row{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start;}
.tt-break-quick{
  background:var(--bg);border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:12px;font-weight:600;color:var(--text);
  cursor:pointer;transition:all .15s;min-width:36px;text-align:center;
}
.tt-break-quick:hover{background:#f59e0b;color:#fff;border-color:#f59e0b;}
.tt-break-quick:disabled{opacity:.4;cursor:default;}
#tt-break-minutes-wrap input[type="number"]{width:70px;padding:6px 8px;}

/* Labels in einer tt-edit-row mit mehreren Spalten bekommen eine einheitliche
   Mindesthöhe (2 Zeilen). So stehen die Eingabe-Felder immer auf gleicher
   visueller Höhe — auch wenn ein Label einzeilig ("Beginn") und das andere
   zweizeilig ("Wann hast du begonnen zu arbeiten?") ist. Das Label selbst
   wird mit align-items:flex-end an der Unterkante ausgerichtet, sodass es
   direkt über dem Input klebt. gap trennt Icon vom Text sauber. */
.tt-edit-row > .tt-edit-field > .tt-edit-label{
  display:flex;
  align-items:flex-end;
  gap:6px;
  min-height:34px;
  line-height:1.2;
}
/* Bei Flex-Labels das margin-right vom Icon rausnehmen (gap regelt das) und
   icon leicht anheben damit's optisch mit dem Text-Baseline bündig ist. */
.tt-edit-row > .tt-edit-field > .tt-edit-label i{
  margin-right:0;
  flex-shrink:0;
  margin-bottom:1px;
}

/* Hints unter den Inputs bekommen auch eine Mindesthöhe damit bei
   Hint-losen vs Hint-behafteten Feldern kein Versatz entsteht. */
.tt-edit-row > .tt-edit-field > .tt-edit-hint{
  min-height:15px;
}

/* Type grid — 2 rows × 3 cols on mobile */
.tt-type-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.tt-type-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 4px;
  border:1.5px solid var(--border);background:var(--surface);
  border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;
  color:var(--muted);transition:all .12s;
  min-height:58px;
}
.tt-type-btn i{font-size:16px;color:var(--muted);}
.tt-type-btn:hover{border-color:#6BC3F0;color:var(--text);}
.tt-type-btn.tt-type-active{
  border-color:var(--tt-accent,#1B7599);
  background:color-mix(in srgb, var(--tt-accent,#1B7599) 10%, transparent);
  color:var(--tt-accent,#1B7599);
}
.tt-type-btn.tt-type-active i{color:var(--tt-accent,#1B7599);}

/* Disabled-Zustand: Buttons allgemein ausgrauen — ABER den aktiven Button
   deutlich sichtbar lassen (Border, Farbfüllung, Ring). Im Read-Only-Modus
   muss der Admin auf einen Blick erkennen welcher Typ/Duration gewählt war. */
.tt-type-btn:disabled{
  cursor:not-allowed;
  opacity:0.55;
}
.tt-type-btn.tt-type-active:disabled{
  opacity:1;               /* AKTIVER Button bleibt voll sichtbar */
  border-width:2px;
  border-color:var(--tt-accent,#1B7599);
  background:color-mix(in srgb, var(--tt-accent,#1B7599) 18%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--tt-accent,#1B7599) 20%, transparent);
  font-weight:700;
  color:var(--tt-accent,#1B7599);
}
.tt-type-btn.tt-type-active:disabled i{color:var(--tt-accent,#1B7599);}

/* Inputs im Disabled-Zustand: heller Hintergrund + Text nicht zu transparent
   damit man die Werte gut ablesen kann */
.tt-edit-field input:disabled,
.tt-edit-field textarea:disabled{
  background:color-mix(in srgb, var(--text) 3%, var(--surface));
  color:var(--text);
  opacity:0.9;
  cursor:not-allowed;
}
.tt-edit-field input[type="time"]:disabled{
  font-weight:700;
  color:#1B7599;
}

/* Pause-Toggle + Night-Toggle: aktive Checkbox auch bei disabled klar sichtbar */
.tt-toggle-row input[type="checkbox"]:checked:disabled{
  accent-color:#1B7599;
  opacity:1;
}
.tt-toggle-row input[type="checkbox"]:checked:disabled + div .tt-toggle-title{
  color:#1B7599;
  font-weight:700;
}

/* ──────────────────────────────────────────────────────────────────────────
   COPY-TOOLS für die Monats-Tabelle — Excel-Transfer
   ────────────────────────────────────────────────────────────────────── */
.tta-bu-copy-tools{
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}
.tta-bu-copy-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.tta-bu-copy-btn:hover{
  border-color: #1B7599;
  color: #1B7599;
  background: rgba(27,117,153,0.06);
}
.tta-bu-copy-btn small{
  font-size: 10px;
  opacity: 0.65;
  font-weight: 500;
  margin-left: 2px;
}
.tta-bu-copy-btn-success{
  background: rgba(22,163,74,0.12) !important;
  border-color: #16a34a !important;
  color: #15803D !important;
}
.tta-bu-entry-copy{
  text-align: center;
  padding: 0 4px !important;
}
.tta-bu-row-copy-btn{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
  opacity: 0.45;
}
.tta-bu-entry-row:hover .tta-bu-row-copy-btn{
  opacity: 1;
  border-color: var(--border);
}
.tta-bu-row-copy-btn:hover{
  color: #1B7599 !important;
  border-color: #1B7599 !important;
  background: rgba(27,117,153,0.08);
  opacity: 1 !important;
}
.tta-bu-row-copy-btn-success{
  color: #16a34a !important;
  border-color: #16a34a !important;
  background: rgba(22,163,74,0.12);
  opacity: 1 !important;
}
.tta-bu-row-copy-btn i{ font-size: 11px; }

/* ──────────────────────────────────────────────────────────────────────────
   ADMIN-OVERRIDE-TRANSPARENZ-BANNER
   Zeigt im Day-Editor deutlich wenn der Eintrag vom Admin geändert wurde.
   Oben das Original (was der Techniker eingegeben hat), darunter der aktuelle
   Admin-Wert. So sieht jeder Admin auf einen Blick ob der Eintrag modifiziert
   wurde und welche Werte das Original waren — kein Tabellen-Editor-Mismatch.
   ────────────────────────────────────────────────────────────────────── */
.tt-admin-override-banner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  margin-bottom:14px;
  background:linear-gradient(135deg, rgba(232,139,0,0.12), rgba(232,139,0,0.05));
  border:1.5px solid rgba(232,139,0,0.4);
  border-left:4px solid #E88B00;
  border-radius:10px;
}
.tt-aob-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:#E88B00;color:#fff;
  border-radius:8px;
  flex-shrink:0;
}
.tt-aob-icon i{font-size:14px;}
.tt-aob-content{flex:1;min-width:0;}
.tt-aob-title{
  font-size:13px;font-weight:800;
  color:#B85F00;
  margin-bottom:6px;
  letter-spacing:0.2px;
}
.tt-aob-row{
  font-size:12.5px;
  line-height:1.5;
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
}
.tt-aob-row strong{font-weight:700;}
.tt-aob-lbl{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.3px;
  min-width:140px;
}
.tt-aob-orig strong{
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-color:rgba(100,116,139,0.5);
}
.tt-aob-cur strong{
  color:#B85F00;
  font-weight:800;
}
.tt-aob-reason{
  margin-top:6px;
  font-size:11.5px;
  color:#78350F;
  font-style:italic;
  padding:6px 8px;
  background:rgba(232,139,0,0.08);
  border-radius:6px;
}
.tt-aob-reason i{margin-right:4px;opacity:0.7;}

/* Duration-Picker: Ganztag / Halbtag-Wahl bei halfOk-Types. Stil wie Type-Picker
   aber 2-spaltig und mit breiteren Buttons (mehr Luft für Label + Sub-Text). */
.tt-duration-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.tt-duration-btn{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border:1.5px solid var(--border);background:var(--surface);
  border-radius:10px;cursor:pointer;
  font-family:inherit;text-align:left;
  color:var(--muted);transition:all .12s;
  min-height:52px;
}
.tt-duration-btn i{font-size:18px;color:var(--muted);flex-shrink:0;}
.tt-duration-btn span{display:flex;flex-direction:column;line-height:1.2;}
.tt-duration-btn span strong{font-size:13px;font-weight:600;color:var(--text);}
.tt-duration-btn span small{font-size:11px;color:var(--muted);margin-top:2px;}
.tt-duration-btn:hover:not(:disabled){border-color:#6BC3F0;}
.tt-duration-btn:disabled{opacity:.6;cursor:not-allowed;}
.tt-duration-btn.tt-duration-active{
  border-color:var(--tt-accent,#1B7599);
  background:color-mix(in srgb, var(--tt-accent,#1B7599) 10%, transparent);
  color:var(--tt-accent,#1B7599);
}
.tt-duration-btn.tt-duration-active i,
.tt-duration-btn.tt-duration-active span strong{color:var(--tt-accent,#1B7599);}

/* Work-fields immer sichtbar halten — die alte display:none-Regel für
   sick/compensation/vacation/holiday/absence ist obsolet seit Halbtag-Support.
   Die Sichtbarkeit der Eingabefelder wird im JavaScript via timesEditable
   und timesDisAttr geregelt. Bei halfOk-Types (sick/compensation/doctor/
   other) sollen die Felder IMMER sichtbar sein damit der User Zeiten für
   die Halbtag-Arbeit eintragen kann. */

/* Break chips */
.tt-break-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.tt-break-chip{
  padding:8px 14px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:600;font-family:inherit;
  cursor:pointer;color:var(--text);transition:all .12s;
}
.tt-break-chip:hover{border-color:#6BC3F0;}
.tt-break-chip.tt-break-active{background:#1B7599;color:#fff;border-color:#1B7599;}

/* Flag chips (checkboxes) */
.tt-flag-chips{display:flex;gap:8px;flex-wrap:wrap;}
.tt-flag-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:500;cursor:pointer;
}
.tt-flag-chip input{margin:0;}
.tt-flag-chip:has(input:checked){
  background:rgba(27,117,153,.08);border-color:#1B7599;color:#1B7599;font-weight:700;
}

/* Live calculation line */
.tt-edit-calc{
  padding:10px 12px;background:rgba(27,117,153,.08);
  border-left:3px solid #1B7599;border-radius:6px;
  font-size:12px;font-weight:500;line-height:1.6;
  margin-bottom:14px;
}

/* Editor footer — same layout pattern as .lbe-footer */
.tt-edit-footer{
  display:flex;gap:8px;align-items:center;justify-content:flex-end;
}
.tt-edit-footer .tt-del{margin-right:auto;}

/* Mobile: stacked buttons, Speichern on top */
@media (max-width:768px){
  .tt-edit-footer{
    flex-direction:column-reverse !important;
    gap:8px !important;padding:12px 14px !important;
  }
  .tt-edit-footer .btn{
    width:100%;min-height:48px;font-size:14px;
    justify-content:center;margin:0 !important;
  }
  .tt-edit-footer .tt-save-btn{order:1;}
  .tt-edit-footer .tt-cancel-btn{order:2;}
  .tt-edit-footer .tt-del{order:3;font-size:12px !important;min-height:40px !important;opacity:.8;}

  /* Nav row stacks on mobile */
  .tt-view-toggle{width:100%;flex:1 1 100%;order:-1;margin-bottom:4px;}
  .tt-view-toggle-btn{flex:1;padding:9px 0;font-size:13px;}
  .tt-nav-btn{min-width:44px;min-height:44px;padding:8px 10px !important;}
  .tt-nav-today{min-height:44px;padding:8px 14px !important;font-size:12px !important;}
  #tt-period-label{font-size:14px !important;min-width:0 !important;flex:1;}

  /* Bigger day rows on mobile */
  .tt-wd-row{
    min-height:72px;
    grid-template-columns:52px 36px 1fr 16px;
    gap:12px;padding:12px 14px;
  }
  .tt-wd-daynum{font-size:24px;}
  .tt-wd-primary{font-size:16px;}
  .tt-wd-secondary{font-size:12px;}
  .tt-wd-icon{width:36px;height:36px;font-size:16px;}

  /* Stats: compact on small screens */
  .tt-stats-row{padding:8px 10px;gap:6px;}

  /* Type grid: 3×2 on mobile too */
  .tt-type-grid{grid-template-columns:repeat(3,1fr);gap:5px;}
  .tt-type-btn{min-height:62px;}
  .tt-type-btn i{font-size:18px;}
}

/* Very small phones */
@media (max-width:380px){
  .tt-type-btn{font-size:10px;min-height:56px;padding:8px 2px;}
  .tt-type-btn i{font-size:16px;}
  .tt-wd-row{grid-template-columns:48px 32px 1fr 14px;gap:10px;padding:10px 12px;}
  .tt-wd-daynum{font-size:20px;}
  .tt-wd-primary{font-size:14px;}
}

/* 200% zoom */
body.fs-200 .tt-view-toggle-btn,
body[data-zoom="2"] .tt-view-toggle-btn{padding:5px 9px;font-size:11px;}
body.fs-200 .tt-wd-daynum,
body[data-zoom="2"] .tt-wd-daynum{font-size:18px;}
body.fs-200 .tt-wd-primary,
body[data-zoom="2"] .tt-wd-primary{font-size:13px;}
body.fs-200 .tt-type-btn,
body[data-zoom="2"] .tt-type-btn{font-size:10px;min-height:52px;}

/* Swipe flash */
#tt-day-list.tt-swipe-flash{animation:lbSwipeFlash .18s ease-out;}

body.dark-theme .tt-type-btn,
body.theme-dark .tt-type-btn{background:var(--surface);}
body.dark-theme .tt-break-chip,
body.theme-dark .tt-break-chip{background:var(--surface);}
body.dark-theme .tt-flag-chip,
body.theme-dark .tt-flag-chip{background:var(--surface);}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Admin (Verwaltung)
   ══════════════════════════════════════════════════════════════════════════════ */

.tta-shell{padding:16px 20px;}
.tta-hdr{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-bottom:16px;
}
.tta-toolbar{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;
}
@media (max-width:768px){
  .tta-shell{padding:12px;}
  .tta-hdr{flex-direction:column;align-items:stretch;}
  .tta-toolbar{justify-content:flex-start;}
}

/* Admin-context banner shown in user view */
.tt-admin-context{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(245,158,11,.1);
  border:1.5px solid rgba(245,158,11,.4);border-radius:8px;
  font-size:13px;width:100%;
}
.tt-admin-context i{color:#f59e0b;}
.tt-admin-context > span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Team grid */
.tta-team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;
}
.tta-user-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.tta-user-hdr{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;
}
.tta-user-name{font-size:14px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tta-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:12px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;
}
.tta-badge-progress{background:rgba(148,163,184,.15);color:#475569;}
.tta-badge-submitted{background:rgba(245,158,11,.15);color:#b8600c;}
.tta-badge-approved{background:rgba(34,197,94,.15);color:#15803d;}
.tta-badge-rejected{background:rgba(239,68,68,.15);color:#c62828;}

.tta-user-stats{
  display:flex;flex-wrap:wrap;gap:4px;
}
.tta-stat{
  padding:4px 8px;background:rgba(0,0,0,.03);
  border-radius:6px;min-width:54px;
}
.tta-stat-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:600;}
.tta-stat-val{font-size:12px;font-weight:700;line-height:1.2;}
.tta-diff-positive{background:rgba(34,197,94,.1);}
.tta-diff-positive .tta-stat-val{color:#15803d;}
.tta-diff-negative{background:rgba(239,68,68,.1);}
.tta-diff-negative .tta-stat-val{color:#c62828;}
.tta-stat-ot50{background:rgba(245,158,11,.1);}
.tta-stat-ot50 .tta-stat-val{color:#b8600c;}
.tta-stat-ot100{background:rgba(220,53,69,.12);}
.tta-stat-ot100 .tta-stat-val{color:#c62828;}
.tta-stat-vac{background:rgba(59,130,246,.1);}
.tta-stat-vac .tta-stat-val{color:#2563eb;}
.tta-stat-sick{background:rgba(168,85,247,.1);}
.tta-stat-sick .tta-stat-val{color:#7e22ce;}

.tta-user-actions{
  display:flex;gap:6px;flex-wrap:wrap;
  border-top:1px solid var(--border);
  padding-top:10px;
}
.tta-user-actions .btn{flex:1;min-width:90px;}

body.dark-theme .tta-user-card,
body.theme-dark .tta-user-card{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-stat,
body.theme-dark .tta-stat{background:rgba(255,255,255,.04);}

/* Schedule table in profile editor */
.tta-sched-tbl{
  width:100%;border-collapse:collapse;font-size:13px;
  margin-bottom:8px;
}
.tta-sched-tbl th{
  text-align:left;padding:8px 6px;
  background:rgba(27,117,153,.08);color:#1B7599;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  border-bottom:2px solid rgba(27,117,153,.2);
}
.tta-sched-tbl td{
  padding:6px;border-bottom:1px solid var(--border);
}
.tta-sched-tbl td:first-child{font-weight:600;}
.tta-sched-tbl input[type="time"],
.tta-sched-tbl input[type="number"]{
  padding:4px 8px;font-size:12px;
  border:1px solid var(--border);border-radius:6px;
  background:var(--surface);color:var(--text);
  font-family:inherit;
}
.tta-toggle input{transform:scale(1.3);cursor:pointer;}

/* Holiday country list */
.tta-country-list{
  display:flex;flex-direction:column;gap:8px;
}
.tta-country-row{
  display:grid;
  grid-template-columns:24px 32px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.tta-country-row:hover{border-color:#6BC3F0;}
.tta-country-row.tta-country-active{
  background:rgba(27,117,153,.08);
  border-color:#1B7599;
}
.tta-country-row input[type="checkbox"]{margin:0;transform:scale(1.2);}
.tta-country-flag{font-size:22px;text-align:center;}
.tta-country-info{min-width:0;}
.tta-country-name{font-size:14px;font-weight:700;}
.tta-country-preview{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

body.dark-theme .tta-country-row,
body.theme-dark .tta-country-row{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-country-row.tta-country-active,
body.theme-dark .tta-country-row.tta-country-active{background:rgba(107,195,240,.08);border-color:#6BC3F0;}

/* Mobile optimizations */
@media (max-width:768px){
  .tta-team-grid{grid-template-columns:1fr;}
  .tta-sched-tbl{font-size:11px;}
  .tta-sched-tbl th{padding:6px 4px;font-size:10px;}
  .tta-sched-tbl td{padding:4px;}
  .tta-sched-tbl input[type="time"]{width:82px !important;font-size:11px;}
  .tta-sched-tbl input[type="number"]{width:54px !important;font-size:11px;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Jahres-Urlaubskalender (Admin)
   ══════════════════════════════════════════════════════════════════════════════
   Layout: Pro User eine horizontal scrollbare Zeile mit 12 Monats-Gruppen.
   Jede Monats-Gruppe enthält 28-31 Tages-Zellen die bei Urlaub/Krank/ZA farbig sind.
   Darunter eine Detail-Liste mit den Urlaubs-Blöcken. */

.tta-year-wrap{
  display:flex;flex-direction:column;gap:10px;
}

/* Horizontal scroll container */
.tta-year-scroll{
  overflow-x:auto;
  overflow-y:visible;
  padding-bottom:6px;
  scrollbar-width:thin;
}
.tta-year-scroll::-webkit-scrollbar{height:8px;}
.tta-year-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* The main grid — rows stack vertically; each row has sticky-left user cell + months */
.tta-year-grid{
  display:flex;flex-direction:column;gap:2px;
  min-width:max-content;
}

/* Header row: user column + 12 month groups */
.tta-year-hdr-row,
.tta-year-user-row{
  display:flex;gap:3px;
  align-items:stretch;
}

/* Sticky-left user cell */
.tta-year-user-cell{
  position:sticky;left:0;z-index:5;
  width:160px;flex-shrink:0;
  padding:6px 10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:2px 0 6px -2px rgba(0,0,0,.06);
}
.tta-year-hdr-user{
  background:#1B7599;color:#fff;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.3px;
  text-align:center;padding:8px 10px;
}
.tta-year-user-name{
  font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tta-year-user-totals{
  display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;
}
.tta-y-badge{
  font-size:10px;font-weight:600;
  padding:1px 5px;border-radius:6px;
  background:rgba(0,0,0,.04);
}
.tta-y-badge-vac{background:rgba(59,130,246,.12);color:#2563eb;}
.tta-y-badge-sick{background:rgba(239,68,68,.12);color:#c62828;}

/* Month group */
.tta-year-month-group{
  display:flex;flex-direction:column;
  flex-shrink:0;
}
.tta-year-month-lbl{
  font-size:10px;font-weight:700;
  color:#1B7599;text-align:center;
  background:rgba(27,117,153,.08);
  padding:4px 0;border-radius:4px 4px 0 0;
  border:1px solid var(--border);border-bottom:none;
}
.tta-year-day-row{
  display:grid;
  grid-template-columns:repeat(var(--tta-year-days,31),8px);
  gap:1px;
  padding:3px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:0 0 4px 4px;
}
.tta-year-hdr-row .tta-year-day-row{border-radius:0 0 4px 4px;}
.tta-year-day-num{
  text-align:center;font-size:8px;font-weight:600;
  color:var(--muted);line-height:1.4;
}
.tta-year-day-num.tta-year-we{color:#c62828;font-weight:700;}

/* Cells for user rows */
.tta-year-cell{
  height:16px;border-radius:2px;
  background:rgba(0,0,0,.02);
  transition:transform .1s;
}
.tta-year-cell-we{background:rgba(198,40,40,.12);}
.tta-year-cell-holiday{background:rgba(168,85,247,.4);}
.tta-year-cell-abs{
  cursor:help;
}
.tta-year-cell-abs:hover{transform:scale(1.2);z-index:2;}

/* Detail blocks below the grid per user */
.tta-year-details{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 10px 12px 170px;  /* offset left by width of user-cell */
  border-bottom:1px dashed var(--border);
  margin-bottom:4px;
}
.tta-year-block{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid;
  border-radius:6px;
  font-size:11px;
}
.tta-year-block-icon{font-size:13px;}
.tta-year-block-range{font-weight:700;font-family:monospace;}
.tta-year-block-type{color:var(--muted);}
.tta-year-block-days{margin-left:auto;font-weight:700;color:#1B7599;font-size:10px;padding:2px 6px;background:rgba(27,117,153,.08);border-radius:10px;}

/* Legend */
.tta-year-legend{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:11px;
}
.tta-year-legend-item{
  display:inline-flex;align-items:center;gap:5px;
}
.tta-year-legend-swatch{
  display:inline-block;width:12px;height:12px;
  border-radius:2px;border:1px solid rgba(0,0,0,.08);
}

/* Mobile: smaller cells, narrower user column */
@media (max-width:768px){
  .tta-year-user-cell{width:110px;padding:4px 8px;}
  .tta-year-user-name{font-size:11px;}
  .tta-y-badge{font-size:9px;}
  .tta-year-day-row{grid-template-columns:repeat(var(--tta-year-days,31),6px);gap:1px;padding:2px;}
  .tta-year-day-num{font-size:7px;}
  .tta-year-cell{height:12px;}
  .tta-year-month-lbl{font-size:9px;padding:3px 0;}
  .tta-year-details{padding:6px 8px 10px 120px;}
  .tta-year-block{font-size:10px;padding:4px 8px;}
}

/* Dark mode */
body.dark-theme .tta-year-user-cell,
body.theme-dark .tta-year-user-cell{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-year-cell,
body.theme-dark .tta-year-cell{background:rgba(255,255,255,.03);}
body.dark-theme .tta-year-block,
body.theme-dark .tta-year-block{background:var(--surface);}

/* In-app notification badges for submitted months carry orange accent */
.notif-card[data-type="tt_submitted"] i.fa-clock{color:#f59e0b !important;}
.notif-card[data-type="tt_approved"] i{color:#22c55e !important;}
.notif-card[data-type="tt_rejected"] i{color:#ef4444 !important;}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Export-Menü (PDF vs Excel Chooser)
   ══════════════════════════════════════════════════════════════════════════════ */

.tt-export-option{
  display:flex;align-items:center;gap:14px;
  width:100%;
  padding:14px 16px;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:12px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  transition:all .15s;
}
.tt-export-option:hover{
  border-color:#1B7599;
  background:rgba(27,117,153,.05);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.tt-export-option:active{transform:scale(.98);}
.tt-export-option-text{flex:1;display:flex;flex-direction:column;gap:2px;}
.tt-export-option-text strong{font-size:15px;color:var(--text);}
.tt-export-option-text small{font-size:11px;color:var(--muted);line-height:1.4;}

@media (max-width:768px){
  .tt-export-option{padding:12px 14px;}
  .tt-export-option i{font-size:24px !important;}
  .tt-export-option-text strong{font-size:14px;}
  .tt-export-option-text small{font-size:10px;}
}

body.dark-theme .tt-export-option,
body.theme-dark .tt-export-option{background:var(--surface);border-color:var(--border);}
body.dark-theme .tt-export-option:hover,
body.theme-dark .tt-export-option:hover{background:rgba(107,195,240,.08);border-color:#6BC3F0;}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Success-Modal nach Monats-Abgabe
   ══════════════════════════════════════════════════════════════════════════════ */

.tt-success-overlay{
  /* Slightly darker overlay for celebration moment */
  background:rgba(0,0,0,.5) !important;
}
.tt-success-modal{
  padding:28px 24px 22px;
  animation:ttSuccessPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ttSuccessPop{
  0%{opacity:0;transform:scale(.85);}
  100%{opacity:1;transform:scale(1);}
}

.tt-success-icon{
  display:flex;justify-content:center;
  margin-bottom:4px;
}
.tt-success-circle{
  stroke-dasharray:166;
  stroke-dashoffset:166;
  animation:ttSuccessCircle .5s ease-out forwards;
}
.tt-success-check{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation:ttSuccessCheck .35s .4s ease-out forwards;
}
@keyframes ttSuccessCircle{
  to{stroke-dashoffset:0;}
}
@keyframes ttSuccessCheck{
  to{stroke-dashoffset:0;}
}

.tt-success-checklist{
  display:flex;flex-direction:column;gap:8px;
  margin-top:14px;
  text-align:left;
}
.tt-success-item{
  display:grid;
  grid-template-columns:22px 22px 1fr;
  gap:10px;align-items:center;
  padding:8px 12px;
  background:rgba(34,197,94,.08);
  border-left:3px solid #22c55e;
  border-radius:8px;
  font-size:13px;font-weight:500;
  opacity:0;
  animation:ttSuccessItemIn .3s ease-out forwards;
}
@keyframes ttSuccessItemIn{
  from{opacity:0;transform:translateX(-10px);}
  to{opacity:1;transform:translateX(0);}
}
.tt-success-item i.fa-check-circle{font-size:15px;}
.tt-success-item i:not(.fa-check-circle){font-size:13px;opacity:.7;}

/* Mobile tune */
@media (max-width:768px){
  .tt-success-modal{padding:24px 20px 20px;}
  .tt-success-modal h2{font-size:20px;}
  .tt-success-item{font-size:12px;padding:7px 10px;}
}

body.dark-theme .tt-success-item,
body.theme-dark .tt-success-item{background:rgba(34,197,94,.12);}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL — Dialog / Modal Buttons großzügiger padden
   (Betrifft ALLE Dialoge — insp-footer, um-footer etc.)
   ══════════════════════════════════════════════════════════════════════════════ */

.insp-footer,
.um-footer{
  padding:14px 18px !important;
  gap:10px !important;
}
.insp-footer .btn,
.um-footer .btn{
  padding:10px 18px !important;
  min-height:44px;
  font-size:14px;
  min-width:100px;
  justify-content:center;
}
.insp-footer .btn i,
.um-footer .btn i{font-size:13px;}

@media (max-width:768px){
  .insp-footer,
  .um-footer{
    padding:14px 16px !important;
  }
  .insp-footer .btn,
  .um-footer .btn{
    min-height:48px !important;
    padding:12px 16px !important;
    font-size:15px;
  }
}

/* Header: make close-button reachable + spacious */
.insp-hdr{
  padding:14px 18px !important;
}
.insp-close{
  width:36px;height:36px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.insp-close:hover{background:rgba(0,0,0,.06);}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Tag-Editor (überarbeitet)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Toggle-rows for Mittagspause + Nachtarbeit — large touch targets like the
   logbook's switches. Layout: [checkbox] [label+sub] [optional-icon] */
.tt-toggle-row{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
}
.tt-toggle-row:hover{border-color:#6BC3F0;}
.tt-toggle-row:has(input:checked){
  background:rgba(27,117,153,.08);
  border-color:#1B7599;
}
.tt-toggle-row input[type="checkbox"]{
  width:22px;height:22px;
  accent-color:#1B7599;
  cursor:pointer;
  flex-shrink:0;
  margin:0;
}
.tt-toggle-title{
  font-size:14px;font-weight:700;
  line-height:1.2;
}
.tt-toggle-sub{
  font-size:11px;color:var(--muted);
  margin-top:2px;
}

/* Night-measurement separate time fields (shown when checkbox is active) */
.tt-night-times{
  display:flex;gap:10px;
  margin-top:10px;
  padding:12px;
  background:rgba(59,130,246,.05);
  border:1px dashed rgba(59,130,246,.3);
  border-radius:8px;
}

/* Non-work banner (admin set vacation/sick/etc.) */
.tt-nonwork-banner{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  border-radius:10px;
  margin-bottom:16px;
}
.tt-nonwork-title{font-size:16px;font-weight:700;}
.tt-nonwork-sub{font-size:12px;color:var(--muted);margin-top:2px;}

/* Compact flag chips (weekend / on-call) — less prominent than main toggles */
.tt-flag-compact{
  display:flex !important;flex-wrap:wrap;gap:6px;
}
.tt-flag-compact .tt-flag-chip{
  flex:1;min-width:140px;
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);border-radius:8px;
  font-size:12px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.tt-flag-compact .tt-flag-chip input{margin:0;accent-color:#1B7599;}
.tt-flag-compact .tt-flag-chip:has(input:checked){
  background:rgba(27,117,153,.08);border-color:#1B7599;color:#1B7599;font-weight:700;
}

/* PLZ row with GPS-button (Fahrtenbuch-Style) */
.tt-zip-row{display:flex;gap:6px;}
.tt-zip-row input{flex:1;}
.tt-gps-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 14px;
  background:var(--surface);
  border:1.5px solid var(--border);border-radius:8px;
  color:#1B7599;font-weight:600;font-size:13px;
  cursor:pointer;font-family:inherit;
  flex-shrink:0;white-space:nowrap;
}
.tt-gps-btn:hover{background:rgba(27,117,153,.08);border-color:#1B7599;}
.tt-gps-btn:disabled{opacity:.5;cursor:not-allowed;}
.tt-gps-btn i{font-size:13px;}

.tt-zip-chips{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;
}
.tt-zip-chip{
  background:rgba(27,117,153,.08);color:#1B7599;
  border:1px solid rgba(27,117,153,.25);
  padding:2px 10px;border-radius:14px;
  font-size:11px;font-family:monospace;font-weight:600;
}

/* Live-calc area — richer than before */
.tt-edit-calc{
  padding:12px 14px;
  background:rgba(27,117,153,.08);
  border-left:3px solid #1B7599;
  border-radius:6px;
  font-size:12px;
  line-height:1.6;
  margin-bottom:14px;
}
.tt-calc-line{margin:0;}
.tt-calc-line:not(:first-child){margin-top:3px;padding-top:3px;border-top:1px dashed rgba(27,117,153,.2);}
.tt-calc-night{color:#1e3a8a;}

/* Mobile: toggle rows stay nicely sized */
@media (max-width:768px){
  .tt-toggle-row{padding:14px;gap:12px;}
  .tt-toggle-title{font-size:15px;}
  .tt-toggle-sub{font-size:12px;}
  .tt-night-times{flex-direction:column;gap:8px;}
  .tt-zip-row{flex-direction:column;gap:8px;}
  .tt-gps-btn{width:100%;justify-content:center;min-height:44px;padding:12px;}
  .tt-flag-compact{flex-direction:column;}
  .tt-flag-compact .tt-flag-chip{min-height:44px;padding:12px 14px;}
  .tt-nonwork-banner{padding:12px 14px;}
  .tt-nonwork-title{font-size:15px;}
}

body.dark-theme .tt-toggle-row,
body.theme-dark .tt-toggle-row{background:var(--surface);border-color:var(--border);}
body.dark-theme .tt-toggle-row:has(input:checked),
body.theme-dark .tt-toggle-row:has(input:checked){background:rgba(107,195,240,.08);border-color:#6BC3F0;}
body.dark-theme .tt-night-times,
body.theme-dark .tt-night-times{background:rgba(107,195,240,.05);border-color:rgba(107,195,240,.3);}
body.dark-theme .tt-gps-btn,
body.theme-dark .tt-gps-btn{background:var(--surface);border-color:var(--border);color:#6BC3F0;}

/* ═══ Target-hours input removed — schedule value is authoritative ═══ */

/* ══════════════════════════════════════════════════════════════════════════════
   DIALOG-FOOTER — Button-Layout sauber (flex mit Gap)
   Fix: gap wirkt nur bei display:flex, das fehlte bisher
   ══════════════════════════════════════════════════════════════════════════════ */

.insp-footer,
.um-footer{
  display:flex !important;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
/* Delete-button links separated — magic: auto margin pushes everything else right */
.insp-footer .tt-del,
.um-footer .tt-del{margin-right:auto;}

/* Mobile: stack + full-width with explicit order for safer finger hit */
@media (max-width:768px){
  .insp-footer,
  .um-footer{
    flex-direction:column-reverse !important;
    align-items:stretch;
    gap:8px !important;
  }
  .insp-footer .btn,
  .um-footer .btn{
    width:100%;min-width:0;
    margin:0 !important;
  }
  /* Order: primary at top (most prominent), cancel next, delete at bottom (least accidental) */
  .insp-footer .btn-primary,
  .um-footer .btn-primary{order:1;}
  .insp-footer .btn-outline:not(.tt-del),
  .um-footer .btn-outline:not(.tt-del){order:2;}
  .insp-footer .tt-del,
  .um-footer .tt-del{order:3;margin:0;border-top:1px dashed var(--border) !important;padding-top:14px !important;}
}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEIT-PROFIL-EDITOR — modernisiert, Fahrtenbuch-Niveau
   ══════════════════════════════════════════════════════════════════════════════ */

.tta-profile-modal .insp-hdr{
  background:linear-gradient(135deg,#1B7599,#155A77);
  color:#fff;
}
.tta-profile-modal .insp-hdr h2,
.tta-profile-modal .insp-hdr .insp-subtitle{color:#fff !important;}
.tta-profile-modal .insp-hdr .insp-close{color:#fff;}
.tta-profile-modal .insp-hdr .insp-close:hover{background:rgba(255,255,255,.15);}

/* Section panels inside the profile editor */
.tta-prof-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:14px;
  position:relative;
}
.tta-prof-section-hdr{
  display:flex;align-items:center;gap:10px;
  margin:-4px 0 14px;
  padding-bottom:12px;
  border-bottom:1px dashed var(--border);
}
.tta-prof-section-hdr i{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(27,117,153,.1);
  color:#1B7599;
  border-radius:8px;
  font-size:14px;
}
.tta-prof-section-hdr h3{
  margin:0;font-size:15px;font-weight:700;
  color:var(--text);
}
.tta-prof-section-hdr .tta-prof-section-sub{
  font-size:11px;color:var(--muted);font-weight:400;
  margin-left:auto;
}

/* Weekday schedule table — cleaner */
.tta-sched-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
.tta-sched-table th,
.tta-sched-table td{
  padding:8px 6px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.tta-sched-table th{
  background:rgba(27,117,153,.06);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.3px;
  color:#1B7599;
}
.tta-sched-table td:first-child{
  text-align:left;font-weight:700;padding-left:10px;
}
.tta-sched-table input[type="time"],
.tta-sched-table input[type="number"]{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:12px;
  background:var(--bg);
}
.tta-sched-table input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:#1B7599;
  cursor:pointer;
}
.tta-sched-table tr:has(input[type="checkbox"]:not(:checked)){
  opacity:.45;
}

/* Grid fields in profile sections */
.tta-prof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 14px;
}
.tta-prof-grid .tt-edit-label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:4px;
  display:flex;align-items:center;gap:4px;
}
.tta-prof-grid .tt-edit-label i{color:#1B7599;font-size:11px;}
.tta-prof-grid input{
  width:100%;
  padding:9px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:var(--bg);
  transition:border-color .15s;
}
.tta-prof-grid input:focus{
  outline:none;
  border-color:#1B7599;
  box-shadow:0 0 0 3px rgba(27,117,153,.12);
}

/* Mobile: profile editor */
@media (max-width:768px){
  .tta-prof-section{padding:14px;margin-bottom:12px;}
  .tta-prof-grid{grid-template-columns:1fr;gap:10px;}
  .tta-sched-table{font-size:12px;}
  .tta-sched-table th,
  .tta-sched-table td{padding:6px 4px;}
}

body.dark-theme .tta-prof-section,
body.theme-dark .tta-prof-section{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-sched-table th,
body.theme-dark .tta-sched-table th{background:rgba(107,195,240,.08);color:#6BC3F0;}
body.dark-theme .tta-sched-table input,
body.theme-dark .tta-sched-table input,
body.dark-theme .tta-prof-grid input,
body.theme-dark .tta-prof-grid input{background:var(--bg);border-color:var(--border);color:var(--text);}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEIT-EINSTELLUNGEN Modal — globale Defaults + Feiertage (Tabs)
   ══════════════════════════════════════════════════════════════════════════════ */

.tta-settings-tabs{
  display:flex;
  gap:4px;
  padding:0 18px;
  border-bottom:2px solid var(--border);
  margin-bottom:16px;
}
.tta-settings-tab{
  padding:12px 18px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  border:none;
  background:none;
  cursor:pointer;
  position:relative;
  border-radius:6px 6px 0 0;
  margin-bottom:-2px;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;
}
.tta-settings-tab i{font-size:13px;}
.tta-settings-tab:hover{color:#1B7599;background:rgba(27,117,153,.05);}
.tta-settings-tab.tta-tab-active{
  color:#1B7599;
  border-bottom:2px solid #1B7599;
  background:rgba(27,117,153,.06);
}

.tta-settings-panel{
  display:none;
  padding:0 2px;
}
.tta-settings-panel.tta-panel-active{display:block;}

/* Holiday countries list — richer */
.tta-country-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:400px;
  overflow-y:auto;
  padding-right:6px;
}
.tta-country-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.tta-country-row:hover{border-color:#6BC3F0;}
.tta-country-row:has(input:checked){
  background:rgba(27,117,153,.06);
  border-color:#1B7599;
}
.tta-country-row input{width:20px;height:20px;accent-color:#1B7599;cursor:pointer;flex-shrink:0;margin:0;}
.tta-country-flag{font-size:24px;flex-shrink:0;line-height:1;}
.tta-country-info{flex:1;min-width:0;}
.tta-country-name{font-size:14px;font-weight:700;}
.tta-country-preview{font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

@media (max-width:768px){
  .tta-settings-tabs{overflow-x:auto;padding:0 14px;white-space:nowrap;flex-wrap:nowrap;}
  .tta-settings-tab{padding:10px 14px;font-size:13px;flex-shrink:0;}
  .tta-country-row{padding:12px;}
  .tta-country-name{font-size:13px;}
}

body.dark-theme .tta-country-row,
body.theme-dark .tta-country-row{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-country-row:has(input:checked),
body.theme-dark .tta-country-row:has(input:checked){background:rgba(107,195,240,.08);border-color:#6BC3F0;}

/* Paid-break hint card */
.tta-hint-card{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  background:rgba(168,85,247,.06);
  border:1px solid rgba(168,85,247,.25);
  border-left:3px solid #a855f7;
  border-radius:8px;
  font-size:12px;
  line-height:1.5;
  margin-top:8px;
}
.tta-hint-card i{color:#a855f7;font-size:14px;margin-top:1px;}

/* ══════════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER (Verwaltung → Urlaubskalender)
   Gruppiert nach Abteilung. Sichtbare Überlappungs-Warnungen je Schweregrad.
   ══════════════════════════════════════════════════════════════════════════════ */

.vac-shell{
  display:flex;flex-direction:column;
  height:100%;overflow:hidden;
  background:var(--bg);
}
.vac-hdr{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.vac-toolbar{
  display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;
}
.vac-content{
  /* Flache Struktur — kein Padding, volle Höhe. Die Views setzen ihr
     eigenes internes Padding. Spätere Definitionen finalisieren. */
  flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
  min-height:0;
}

/* Empty state */
.vac-empty{
  text-align:center;
  padding:60px 24px;
  max-width:460px;
  margin:40px auto;
  background:var(--surface);
  border:1px dashed var(--border);
  border-radius:12px;
}
.vac-empty h3{
  margin:14px 0 8px;
  font-size:18px;
}
.vac-empty p{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin:0;
}

/* KPI strip at top */
.vac-kpi-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-bottom:4px;
}
.vac-kpi{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  transition:transform .1s;
}
.vac-kpi:hover{transform:translateY(-1px);}
.vac-kpi i{
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(27,117,153,.1);color:#1B7599;
  border-radius:8px;font-size:15px;
  flex-shrink:0;
}
.vac-kpi-num{
  font-size:22px;font-weight:800;
  line-height:1;
  color:var(--text);
}
.vac-kpi-lbl{
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);
  display:block;margin-top:3px;
}
.vac-kpi-warn i{background:rgba(245,158,11,.1);color:#f59e0b;}
.vac-kpi-warn .vac-kpi-num{color:#d97706;}
.vac-kpi-critical i{background:rgba(220,38,38,.1);color:#dc2626;}
.vac-kpi-critical .vac-kpi-num{color:#dc2626;}

/* Department card */
.vac-dept-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.vac-dept-hdr{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;
  background:rgba(27,117,153,.04);
  border-bottom:1px solid var(--border);
}
.vac-dept-title{
  font-size:15px;font-weight:700;
  display:inline-flex;align-items:center;gap:8px;
  flex:1;min-width:0;
}
.vac-dept-meta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;color:var(--muted);
}
.vac-risk-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:12px;
  font-size:11px;font-weight:700;
  background:rgba(148,163,184,.15);color:#64748b;
}
.vac-risk-badge.vac-risk-critical{
  background:rgba(220,38,38,.1);color:#dc2626;
  border:1px solid rgba(220,38,38,.25);
}

/* Grid layout — horizontal scroll, sticky first column */
.vac-grid-scroll{
  overflow-x:auto;
  padding:0;
}
.vac-grid-scroll::-webkit-scrollbar{height:8px;}
.vac-grid-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

.vac-grid{
  display:flex;flex-direction:column;
  min-width:max-content;
}
.vac-row{
  display:flex;gap:3px;
  padding:2px 8px;
  align-items:stretch;
}
.vac-row:nth-child(even):not(.vac-row-hdr){
  background:rgba(0,0,0,.015);
}
.vac-row-hdr{
  position:sticky;top:0;z-index:4;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding-top:6px;padding-bottom:4px;
}

/* Sticky left user cell */
.vac-user-cell{
  position:sticky;left:0;z-index:5;
  width:170px;flex-shrink:0;
  padding:6px 10px;
  background:var(--surface);
  border-right:2px solid var(--border);
  display:flex;flex-direction:column;justify-content:center;
  margin-left:-8px;margin-right:4px;
  box-shadow:2px 0 4px -2px rgba(0,0,0,.05);
}
.vac-row-hdr .vac-user-cell{
  background:rgba(27,117,153,.06);
  z-index:6;
}
.vac-hdr-user{
  font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px;
  color:#1B7599;
  justify-content:center;
  align-items:center;
}
.vac-user-name{
  font-size:13px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.vac-user-stats{
  display:flex;gap:6px;margin-top:3px;align-items:center;
}
.vac-stat{
  font-size:10px;font-weight:600;
  color:var(--muted);
}
.vac-stat-remaining{
  background:rgba(27,117,153,.1);color:#1B7599;
  padding:1px 6px;border-radius:8px;
  font-weight:700;
}

/* Month groups */
.vac-month-group{
  display:flex;flex-direction:column;
  flex-shrink:0;
  align-self:stretch;
}
.vac-row-hdr .vac-month-group{
  gap:0;
}
.vac-month-lbl{
  font-size:10px;font-weight:700;
  color:#1B7599;
  text-align:center;
  padding:2px 0;
}
.vac-day-row{
  display:grid;
  grid-template-columns:repeat(var(--vac-days,31),10px);
  gap:1px;
}
.vac-day-num{
  text-align:center;font-size:8px;font-weight:600;
  color:var(--muted);line-height:1.3;
  height:14px;
}
.vac-day-num.vac-we{color:#c62828;font-weight:700;}

/* Day cells in user rows */
.vac-day-cells{
  padding:2px 0;
}
.vac-cell{
  height:18px;border-radius:2px;
  background:rgba(0,0,0,.035);
  transition:transform .08s, box-shadow .08s;
  cursor:default;
}
.vac-cell-we{background:rgba(198,40,40,.1);}
.vac-cell-holiday{background:rgba(168,85,247,.35);}
.vac-cell-vacation{
  background:rgba(59,130,246,.85);
  cursor:pointer;
}
.vac-cell-vacation:hover{transform:scale(1.25);z-index:3;box-shadow:0 2px 6px rgba(0,0,0,.25);}

/* Overlap states — STACK on top of vacation */
.vac-cell-warn{
  background:linear-gradient(135deg,rgba(245,158,11,.95) 0%,rgba(245,158,11,.95) 50%,rgba(59,130,246,.85) 50%,rgba(59,130,246,.85) 100%);
  background-size:8px 8px;
  box-shadow:inset 0 0 0 1px #f59e0b;
}
.vac-cell-critical{
  background:repeating-linear-gradient(45deg,rgba(220,38,38,.9) 0,rgba(220,38,38,.9) 3px,rgba(180,20,20,.95) 3px,rgba(180,20,20,.95) 6px);
  box-shadow:inset 0 0 0 1.5px #dc2626;
  animation:vacCritPulse 2s ease-in-out infinite;
}
@keyframes vacCritPulse{
  0%,100%{box-shadow:inset 0 0 0 1.5px #dc2626,0 0 0 0 rgba(220,38,38,0);}
  50%{box-shadow:inset 0 0 0 1.5px #dc2626,0 0 0 3px rgba(220,38,38,.25);}
}
.vac-cell-override::after{
  content:'';display:block;width:6px;height:6px;
  background:#a855f7;border-radius:50%;
  margin:6px auto 0;
}

/* Legend */
.vac-legend{
  display:flex;flex-wrap:wrap;gap:12px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:11px;
  margin-top:4px;
}
.vac-legend-item{
  display:inline-flex;align-items:center;gap:6px;
}
.vac-swatch{
  display:inline-block;width:14px;height:14px;
  border-radius:3px;border:1px solid rgba(0,0,0,.1);
}
.vac-swatch-vacation{background:rgba(59,130,246,.85);}
.vac-swatch-warn{background:linear-gradient(135deg,#f59e0b 50%,#3b82f6 50%);background-size:8px 8px;}
.vac-swatch-critical{background:repeating-linear-gradient(45deg,#dc2626 0,#dc2626 2px,#b91c1c 2px,#b91c1c 4px);}
.vac-swatch-override{background:rgba(59,130,246,.85);position:relative;}
.vac-swatch-override::after{content:'';position:absolute;bottom:1px;left:50%;transform:translateX(-50%);width:5px;height:5px;background:#a855f7;border-radius:50%;}
.vac-swatch-holiday{background:rgba(168,85,247,.35);}
.vac-swatch-weekend{background:rgba(198,40,40,.1);}

/* Mobile: condensed */
@media (max-width:768px){
  .vac-hdr{padding:12px 14px;gap:8px;}
  .vac-hdr h2{font-size:17px !important;}
  .vac-toolbar{width:100%;justify-content:space-between;}
  .vac-content{padding:12px 14px 20px;gap:12px;}
  .vac-kpi{padding:10px 12px;gap:10px;}
  .vac-kpi i{width:32px;height:32px;font-size:13px;}
  .vac-kpi-num{font-size:18px;}
  .vac-user-cell{width:120px;padding:5px 8px;margin-left:-6px;}
  .vac-user-name{font-size:12px;}
  .vac-stat{font-size:9px;}
  .vac-day-row{grid-template-columns:repeat(var(--vac-days,31),8px);}
  .vac-day-num{font-size:7px;height:12px;}
  .vac-cell{height:14px;}
  .vac-dept-hdr{padding:10px 12px;}
  .vac-dept-title{font-size:14px;}
}

/* Dark theme */
body.dark-theme .vac-shell,
body.theme-dark .vac-shell{background:var(--bg);}
body.dark-theme .vac-hdr,
body.theme-dark .vac-hdr,
body.dark-theme .vac-dept-card,
body.theme-dark .vac-dept-card,
body.dark-theme .vac-user-cell,
body.theme-dark .vac-user-cell,
body.dark-theme .vac-kpi,
body.theme-dark .vac-kpi,
body.dark-theme .vac-legend,
body.theme-dark .vac-legend{background:var(--surface);border-color:var(--border);}
body.dark-theme .vac-dept-hdr,
body.theme-dark .vac-dept-hdr{background:rgba(107,195,240,.05);}
body.dark-theme .vac-row:nth-child(even):not(.vac-row-hdr),
body.theme-dark .vac-row:nth-child(even):not(.vac-row-hdr){background:rgba(255,255,255,.02);}
body.dark-theme .vac-cell,
body.theme-dark .vac-cell{background:rgba(255,255,255,.04);}

/* ══════════════════════════════════════════════════════════════════════════════
   OVERLAP-CONFIRM-DIALOG
   Shown from the bulk-absence flow when the backend rejects with conflict.
   ══════════════════════════════════════════════════════════════════════════════ */

.vac-conflict-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:220px;overflow-y:auto;
  margin-top:10px;
}
.vac-conflict-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid #f59e0b;
  border-radius:8px;
  font-size:12px;
}
.vac-conflict-item.vac-conflict-critical{
  border-left-color:#dc2626;
  background:rgba(220,38,38,.04);
}
.vac-conflict-date{
  font-family:monospace;font-weight:700;
  color:var(--text);
  min-width:85px;
}
.vac-conflict-user{
  color:var(--muted);font-weight:500;
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.vac-conflict-sev{
  font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.3px;
  background:rgba(245,158,11,.15);color:#b8600c;
  flex-shrink:0;
}
.vac-conflict-item.vac-conflict-critical .vac-conflict-sev{
  background:rgba(220,38,38,.15);color:#dc2626;
}

.vac-override-check{
  margin-top:16px;
  padding:12px 14px;
  background:rgba(220,38,38,.04);
  border:1.5px solid rgba(220,38,38,.3);
  border-radius:10px;
  cursor:pointer;
  display:flex;align-items:flex-start;gap:10px;
  transition:background .15s;
}
.vac-override-check:hover{background:rgba(220,38,38,.08);}
.vac-override-check input{
  width:20px;height:20px;
  accent-color:#dc2626;
  margin-top:1px;flex-shrink:0;
}
.vac-override-label{
  font-size:13px;font-weight:700;
  color:#dc2626;
  line-height:1.4;
}
.vac-override-sub{
  font-size:11px;font-weight:500;
  color:var(--muted);
  margin-top:3px;line-height:1.4;
}

/* ══════════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER — Filter-Bar
   ══════════════════════════════════════════════════════════════════════════════ */

.vac-filter-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:4px;
}
.vac-filter-label{
  font-size:12px;font-weight:700;
  color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
}
.vac-filter-label i{color:#1B7599;}
.vac-filter-select{
  padding:8px 10px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:13px;font-family:inherit;font-weight:500;
  background:var(--bg);color:var(--text);
  cursor:pointer;
  min-width:200px;
}
.vac-filter-select:focus{
  outline:none;border-color:#1B7599;
  box-shadow:0 0 0 3px rgba(27,117,153,.12);
}
.vac-filter-hint{
  font-size:11px;color:var(--muted);
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;
  background:rgba(27,117,153,.06);
  border-radius:12px;
}

@media (max-width:768px){
  .vac-filter-bar{padding:10px 12px;gap:8px;}
  .vac-filter-select{min-width:0;flex:1;}
  .vac-filter-hint{width:100%;margin:0;justify-content:center;font-size:10px;}
}

body.dark-theme .vac-filter-bar,
body.theme-dark .vac-filter-bar{background:var(--surface);border-color:var(--border);}
body.dark-theme .vac-filter-select,
body.theme-dark .vac-filter-select{background:var(--bg);border-color:var(--border);color:var(--text);}

/* ══════════════════════════════════════════════════════════════════════════════
   FIXES: Urlaubskalender padding + btn-outline Sichtbarkeit
   ══════════════════════════════════════════════════════════════════════════════ */

/* Right-padding wurde vom horizontal-scroll geschluckt — fixer Scroll-Container */
.vac-shell{padding:0;}
.vac-hdr{padding:14px 20px;}
/* .vac-content — padding wird in der späteren flachen Definition gesetzt (kein padding) */

/* Make btn-outline actually visible against the admin background.
   The previous 1.5px border with var(--border) was near-invisible in the tta-hdr. */
.tta-toolbar .btn,
.vac-toolbar .btn,
.vac-filter-bar .btn{
  border-width:1.5px;
}
.tta-toolbar .btn.btn-outline,
.vac-toolbar .btn.btn-outline,
.vac-filter-bar .btn.btn-outline{
  background:var(--surface) !important;
  border-color:#1B7599 !important;
  color:#1B7599 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.tta-toolbar .btn.btn-outline:hover,
.vac-toolbar .btn.btn-outline:hover,
.vac-filter-bar .btn.btn-outline:hover{
  background:rgba(27,117,153,.08) !important;
  border-color:#155A77 !important;
  color:#155A77 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.tta-toolbar .btn.btn-outline:active,
.vac-toolbar .btn.btn-outline:active,
.vac-filter-bar .btn.btn-outline:active{
  transform:translateY(1px);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

body.dark-theme .tta-toolbar .btn.btn-outline,
body.theme-dark .tta-toolbar .btn.btn-outline,
body.dark-theme .vac-toolbar .btn.btn-outline,
body.theme-dark .vac-toolbar .btn.btn-outline,
body.dark-theme .vac-filter-bar .btn.btn-outline,
body.theme-dark .vac-filter-bar .btn.btn-outline{
  background:rgba(107,195,240,.08) !important;
  border-color:#6BC3F0 !important;
  color:#6BC3F0 !important;
}

/* Tighten the month/year toggle next to nav buttons */
.tt-view-toggle{
  display:inline-flex;padding:2px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:8px;
  gap:0;
}
.tt-view-toggle-btn{
  padding:6px 12px;font-size:12px;font-weight:600;
  border:none;background:transparent;color:var(--muted);
  border-radius:6px;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;
  transition:all .12s;
}
.tt-view-toggle-btn:hover{color:#1B7599;}
.tt-view-toggle-btn.tt-view-active{
  background:#1B7599;color:#fff;
  box-shadow:0 1px 3px rgba(27,117,153,.35);
}

/* ══════════════════════════════════════════════════════════════════════════════
   ZEIT-EINSTELLUNGEN → Abteilungs-Tab (CRUD)
   ══════════════════════════════════════════════════════════════════════════════ */

.tta-dept-list{
  display:flex;flex-direction:column;gap:8px;
}
.tta-dept-row{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .15s;
}
.tta-dept-row:focus-within{border-color:#1B7599;box-shadow:0 0 0 3px rgba(27,117,153,.1);}
.tta-dept-main{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
}
.tta-dept-field{
  display:flex;flex-direction:column;gap:4px;
  flex:1;min-width:140px;
}
.tta-dept-field-lbl{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);
}
.tta-dept-name,
.tta-dept-size{
  padding:9px 12px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:14px;font-family:inherit;font-weight:500;
  background:var(--bg);color:var(--text);
  transition:border-color .12s;
}
.tta-dept-name:focus,
.tta-dept-size:focus{
  outline:none;border-color:#1B7599;
  box-shadow:0 0 0 3px rgba(27,117,153,.12);
}
.tta-dept-stats{
  display:flex;flex-direction:column;gap:4px;
  align-items:flex-end;
  padding-bottom:4px;
}
.tta-dept-badge{
  font-size:11px;font-weight:700;
  padding:4px 10px;
  background:rgba(27,117,153,.08);
  color:#1B7599;
  border-radius:10px;
  white-space:nowrap;
}
.tta-dept-badge-crit{
  font-size:10px;font-weight:700;
  padding:3px 9px;
  background:rgba(220,38,38,.12);
  color:#dc2626;
  border-radius:10px;
  white-space:nowrap;
}
.tta-dept-del{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:8px;
  color:#dc2626;cursor:pointer;
  transition:all .12s;
  flex-shrink:0;
}
.tta-dept-del:hover{
  background:rgba(220,38,38,.08);
  border-color:#dc2626;
}

/* Below-row warning / rename info strips */
.tta-dept-warn{
  margin-top:8px;padding:6px 10px;
  background:rgba(245,158,11,.08);
  border-left:3px solid #f59e0b;
  border-radius:6px;
  font-size:11px;font-weight:600;color:#b8600c;
}
.tta-dept-info{
  margin-top:8px;padding:6px 10px;
  background:rgba(27,117,153,.06);
  border-left:3px solid #1B7599;
  border-radius:6px;
  font-size:11px;color:#1B7599;
}
.tta-dept-info strong{color:#0d4961;}

.tta-dept-add{
  margin-top:10px;width:100%;
  padding:14px 16px;
  background:rgba(27,117,153,.04);
  border:2px dashed rgba(27,117,153,.35);
  border-radius:10px;
  color:#1B7599;
  font-size:14px;font-weight:700;font-family:inherit;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .15s;
}
.tta-dept-add:hover{
  background:rgba(27,117,153,.08);
  border-color:#1B7599;
  border-style:solid;
}

@media (max-width:768px){
  .tta-dept-main{flex-direction:column;align-items:stretch;}
  .tta-dept-field{width:100%;min-width:0;}
  .tta-dept-field[style*="flex:0 0"]{flex:1 1 auto !important;}
  .tta-dept-stats{flex-direction:row;justify-content:space-between;align-items:center;padding:4px 0;}
  .tta-dept-del{width:100%;height:44px;margin-top:4px;}
}

body.dark-theme .tta-dept-row,
body.theme-dark .tta-dept-row{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-dept-name,
body.theme-dark .tta-dept-name,
body.dark-theme .tta-dept-size,
body.theme-dark .tta-dept-size{background:var(--bg);border-color:var(--border);color:var(--text);}
body.dark-theme .tta-dept-add,
body.theme-dark .tta-dept-add{background:rgba(107,195,240,.06);border-color:rgba(107,195,240,.4);color:#6BC3F0;}

/* ══════════════════════════════════════════════════════════════════════════════
   SMART-INTEGRATION Styles
   - Anomalie-Dialog vor Monats-Abgabe
   - Logbook-ZIP-Chips (Fahrtenbuch-Source-Markierung)
   - Fleet-Vacation-Badge
   ══════════════════════════════════════════════════════════════════════════════ */

/* Anomaly list — shown in submit-confirm flow */
.tt-anom-list{
  display:flex;flex-direction:column;gap:6px;
  max-height:280px;overflow-y:auto;
  margin-top:4px;
}
.tt-anom-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-left-width:3px;
  border-radius:8px;
  background:var(--surface);
  font-size:12px;line-height:1.4;
}
.tt-anom-item > i{
  font-size:15px;flex-shrink:0;margin-top:1px;
  width:16px;text-align:center;
}
.tt-anom-item-body{flex:1;min-width:0;}
.tt-anom-item-date{
  font-family:monospace;font-weight:700;font-size:11px;
  color:var(--muted);margin-bottom:2px;
}
.tt-anom-item-msg{color:var(--text);font-weight:500;}

.tt-anom-error{border-left-color:#dc2626;background:rgba(220,38,38,.04);}
.tt-anom-error > i{color:#dc2626;}
.tt-anom-warn{border-left-color:#f59e0b;background:rgba(245,158,11,.04);}
.tt-anom-warn > i{color:#f59e0b;}
.tt-anom-info{border-left-color:#1B7599;background:rgba(27,117,153,.04);}
.tt-anom-info > i{color:#1B7599;}

.tt-anom-info-sep{
  margin:10px 0 4px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);
  padding-left:4px;
}

body.dark-theme .tt-anom-item,
body.theme-dark .tt-anom-item{background:var(--surface);}

/* Logbook-sourced ZIP chips — differentiated with 🚗 icon and gradient */
.tt-zip-chip-lb{
  background:linear-gradient(135deg,rgba(27,117,153,.18),rgba(27,117,153,.08)) !important;
  border-color:rgba(27,117,153,.45) !important;
  color:#0d4961 !important;
  position:relative;
}
.tt-zip-chip-lb i.fa-car{
  font-size:9px;opacity:.75;
  margin-right:3px;
}
body.dark-theme .tt-zip-chip-lb,
body.theme-dark .tt-zip-chip-lb{
  background:linear-gradient(135deg,rgba(107,195,240,.22),rgba(107,195,240,.1)) !important;
  border-color:rgba(107,195,240,.5) !important;
  color:#a7d9f3 !important;
}

/* Fleet vacation badges — shown when assigned driver is currently / soon on vacation */
.fleet-badge-vac{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  font-size:11px;font-weight:700;
  background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.08));
  color:#1d4ed8;
  border:1px solid rgba(59,130,246,.4);
  border-radius:12px;
  white-space:nowrap;
  margin-left:6px;
}
.fleet-badge-vac-soon{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  font-size:11px;font-weight:600;
  background:rgba(148,163,184,.12);
  color:#475569;
  border:1px solid rgba(148,163,184,.35);
  border-radius:12px;
  white-space:nowrap;
  margin-left:6px;
}
.fleet-card-driver-vac{
  position:relative;
}
.fleet-card-driver-vac::before{
  content:'';
  position:absolute;top:0;left:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
  border-radius:12px 0 0 12px;
}
body.dark-theme .fleet-badge-vac,
body.theme-dark .fleet-badge-vac{
  background:linear-gradient(135deg,rgba(96,165,250,.2),rgba(96,165,250,.1));
  color:#93c5fd;
  border-color:rgba(96,165,250,.5);
}

/* ══════════════════════════════════════════════════════════════════════════════
   MULTI-DEPARTMENT Checkbox-Liste im Profil-Editor
   ══════════════════════════════════════════════════════════════════════════════ */

.tta-dep-checkbox-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:8px;
}
.tta-dep-checkbox{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  cursor:pointer;
  transition:all .15s;
}
.tta-dep-checkbox:hover{
  border-color:rgba(27,117,153,.5);
  background:rgba(27,117,153,.04);
}
.tta-dep-checkbox input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:#1B7599;
  cursor:pointer;
  flex-shrink:0;
}
.tta-dep-checkbox.tta-dep-checked{
  border-color:#1B7599;
  background:rgba(27,117,153,.06);
  box-shadow:inset 0 0 0 1px rgba(27,117,153,.2);
}
.tta-dep-checkbox-name{
  flex:1;min-width:0;
  font-size:13px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tta-dep-checkbox.tta-dep-checked .tta-dep-checkbox-name{color:#1B7599;}
.tta-dep-checkbox-size{
  font-size:11px;font-weight:700;
  padding:2px 8px;
  background:rgba(27,117,153,.12);
  color:#1B7599;
  border-radius:10px;
  min-width:24px;text-align:center;
  flex-shrink:0;
}
.tta-dep-orphan{
  border-style:dashed;
  border-color:rgba(245,158,11,.5);
  background:rgba(245,158,11,.05);
}
.tta-dep-orphan .tta-dep-checkbox-name{color:#b8600c;}
.tta-dep-orphan .tta-dep-checkbox-size{
  background:rgba(245,158,11,.15);
  color:#b8600c;
}

body.dark-theme .tta-dep-checkbox,
body.theme-dark .tta-dep-checkbox{background:var(--surface);border-color:var(--border);}
body.dark-theme .tta-dep-checkbox.tta-dep-checked,
body.theme-dark .tta-dep-checkbox.tta-dep-checked{
  background:rgba(107,195,240,.08);
  border-color:#6BC3F0;
}

/* Fleet: vehicles without location_id get a warning badge */
.fleet-badge-locmissing{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;
  font-size:11px;font-weight:700;
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.1));
  color:#b45309;
  border:1px solid rgba(245,158,11,.5);
  border-radius:12px;
  white-space:nowrap;
  margin-left:6px;
  animation:fleetLocMissingPulse 2.5s ease-in-out infinite;
}
@keyframes fleetLocMissingPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0);}
  50%{box-shadow:0 0 0 4px rgba(245,158,11,.15);}
}
body.dark-theme .fleet-badge-locmissing,
body.theme-dark .fleet-badge-locmissing{
  background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.1));
  color:#fcd34d;
  border-color:rgba(251,191,36,.45);
}

/* Multi-Department badge in vacation-calendar user row */
.vac-stat-multi{
  background:rgba(168,85,247,.14);
  color:#7e22ce;
  padding:1px 7px;
  border-radius:8px;
  font-weight:800;
  font-size:10px;
}
body.dark-theme .vac-stat-multi,
body.theme-dark .vac-stat-multi{
  background:rgba(192,132,252,.2);
  color:#c084fc;
}

/* Fleet: legacy-banner (top of list when vehicles lack location_id) */
.fleet-legacy-banner{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.04));
  border:1.5px solid rgba(245,158,11,.4);
  border-left-width:4px;
  border-radius:10px;
  margin-bottom:16px;
}
.fleet-legacy-banner-icon{
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(245,158,11,.2);
  color:#b45309;
  border-radius:10px;
  font-size:18px;
  flex-shrink:0;
}
.fleet-legacy-banner-text{
  flex:1;min-width:0;
  font-size:13px;line-height:1.4;
}
.fleet-legacy-banner-text strong{color:#b45309;font-size:14px;}
.fleet-legacy-banner-text > div{color:var(--muted);font-size:12px;margin-top:2px;}
body.dark-theme .fleet-legacy-banner,
body.theme-dark .fleet-legacy-banner{
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(251,191,36,.05));
  border-color:rgba(251,191,36,.4);
}
body.dark-theme .fleet-legacy-banner-text strong,
body.theme-dark .fleet-legacy-banner-text strong,
body.dark-theme .fleet-legacy-banner-icon,
body.theme-dark .fleet-legacy-banner-icon{color:#fcd34d;}

/* Role editor: implication hint + badges */
.role-imply-hint{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(168,85,247,.03));
  border:1px solid rgba(168,85,247,.3);
  border-left-width:3px;
  border-radius:8px;
  margin-bottom:14px;
  font-size:12px;line-height:1.5;
}
.role-imply-hint i{
  color:#a855f7;font-size:16px;flex-shrink:0;margin-top:2px;
}
.role-imply-hint code{
  background:rgba(168,85,247,.12);
  padding:1px 5px;
  border-radius:4px;
  font-family:ui-monospace,monospace;
  font-size:11px;
  color:#7e22ce;
}
.role-perm-imply{
  display:inline-block;
  font-size:9.5px;font-weight:700;
  background:rgba(168,85,247,.14);
  color:#7e22ce;
  padding:1px 6px;
  border-radius:8px;
  margin-left:4px;
  letter-spacing:.3px;
  font-family:ui-monospace,monospace;
}
.role-perm-auto-implied{
  background:rgba(168,85,247,.05) !important;
  border-color:rgba(168,85,247,.3) !important;
  position:relative;
}
.role-perm-auto-implied::after{
  content:'auto';
  position:absolute;top:4px;right:6px;
  font-size:9px;font-weight:700;
  color:#a855f7;
  letter-spacing:.5px;
  text-transform:uppercase;
}
body.dark-theme .role-imply-hint,
body.theme-dark .role-imply-hint{
  background:linear-gradient(135deg,rgba(192,132,252,.12),rgba(192,132,252,.04));
  border-color:rgba(192,132,252,.3);
}
body.dark-theme .role-imply-hint code,
body.theme-dark .role-imply-hint code{
  background:rgba(192,132,252,.2);color:#d8b4fe;
}
body.dark-theme .role-imply-hint i,
body.theme-dark .role-imply-hint i,
body.dark-theme .role-perm-auto-implied::after,
body.theme-dark .role-perm-auto-implied::after{color:#c084fc;}
body.dark-theme .role-perm-imply,
body.theme-dark .role-perm-imply{
  background:rgba(192,132,252,.2);color:#d8b4fe;
}

/* Inspection escalation badges in admin overview — escalates visually from soft to critical */
.lba-badge-escalation-soft{
  background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.08));
  color:#92400e;
  border:1px solid rgba(245,158,11,.45);
}
.lba-badge-escalation{
  background:linear-gradient(135deg,rgba(239,68,68,.22),rgba(239,68,68,.08));
  color:#991b1b;
  border:1px solid rgba(239,68,68,.5);
  font-weight:700;
}
.lba-badge-escalation-crit{
  background:linear-gradient(135deg,rgba(220,38,38,.28),rgba(220,38,38,.1));
  color:#7f1d1d;
  border:1.5px solid rgba(220,38,38,.65);
  font-weight:800;
  animation:lbaSirenPulse 1.8s ease-in-out infinite;
}
@keyframes lbaSirenPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,0);transform:scale(1);}
  50%{box-shadow:0 0 0 5px rgba(220,38,38,.15);transform:scale(1.02);}
}
body.dark-theme .lba-badge-escalation-soft,
body.theme-dark .lba-badge-escalation-soft{
  background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.08));
  color:#fcd34d;border-color:rgba(251,191,36,.45);
}
body.dark-theme .lba-badge-escalation,
body.theme-dark .lba-badge-escalation{
  background:linear-gradient(135deg,rgba(248,113,113,.24),rgba(248,113,113,.1));
  color:#fca5a5;border-color:rgba(248,113,113,.55);
}
body.dark-theme .lba-badge-escalation-crit,
body.theme-dark .lba-badge-escalation-crit{
  background:linear-gradient(135deg,rgba(220,38,38,.3),rgba(220,38,38,.12));
  color:#fecaca;border-color:rgba(248,113,113,.7);
}

/* Summary banner variants */
.lba-sp-warning-urgent{/* shares layout with -warn but colored via inline style */}
.lba-sp-warning-soft{/* same */}

/* Inventory: accessories rendered nested under their parent */
.inv-item-accessory{
  margin-left:28px;
  background:rgba(0,0,0,.015);
  position:relative;
}
.inv-item-accessory::before{
  content:'';
  position:absolute;
  left:-14px;top:50%;
  width:12px;height:1px;
  background:rgba(0,0,0,.15);
}
.inv-accessory-arrow{
  color:var(--muted);
  font-size:10px;
  margin-right:6px;
  opacity:.65;
}
.inv-item-mf{
  display:inline-flex;align-items:center;gap:4px;
  margin-left:8px;
  font-size:11px;font-style:italic;
  color:var(--muted);
  font-weight:500;
}
.inv-item-mf i{
  font-size:9px;opacity:.7;
}
body.dark-theme .inv-item-accessory,
body.theme-dark .inv-item-accessory{
  background:rgba(255,255,255,.02);
}
body.dark-theme .inv-item-accessory::before,
body.theme-dark .inv-item-accessory::before{
  background:rgba(255,255,255,.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Dashboard widget — personal KPI tiles
 * ═══════════════════════════════════════════════════════════════════════════ */
.dash-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin:16px 0;
}
.dash-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:16px 0;
  align-items:stretch;
}
.dash-col .dash-grid{margin:0;grid-template-columns:1fr;height:100%;align-content:stretch;}
.dash-col .dash-grid .dash-tile{flex:1;}
@media(max-width:768px){
  .dash-cols{grid-template-columns:1fr;gap:12px;}
}
.dash-tile{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex;flex-direction:column;gap:10px;
}
.dash-tile:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border-color:rgba(27,117,153,.4);
}
.dash-tile-hdr{
  display:flex;align-items:center;gap:10px;
}
.dash-tile-icon{
  width:36px;height:36px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.dash-tile-title{
  font-weight:700;
  font-size:13px;
  color:var(--text);
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dash-tile-title small{
  font-weight:400;
  font-size:10px;
  color:var(--muted);
  margin-left:4px;
}
.dash-tile-kpi{
  display:flex;align-items:baseline;gap:8px;
  padding:2px 0;
}
.dash-tile-kpi strong{
  font-size:28px;font-weight:800;
  color:var(--text);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.dash-tile-sub{
  font-size:11px;
  color:var(--muted);
  font-weight:500;
}
.dash-tile-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;
}
.dash-tile-row-wrap{flex-wrap:wrap;}
.dash-tile-muted{color:var(--muted);font-weight:500;}
.dash-bal{
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  background:rgba(148,163,184,.12);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.dash-bal-pos{background:rgba(34,197,94,.14);color:#166534;}
.dash-bal-neg{background:rgba(239,68,68,.14);color:#991b1b;}
.dash-status{font-weight:600;font-size:11px;}
.dash-status i{font-size:10px;margin-right:3px;}
.dash-progress{
  height:6px;
  background:rgba(148,163,184,.15);
  border-radius:3px;
  overflow:hidden;
}
.dash-progress-bar{
  height:100%;
  border-radius:3px;
  transition:width .3s ease;
}
.dash-badge-crit,.dash-badge-warn,.dash-badge-info{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;
  border-radius:6px;
  font-size:10px;font-weight:700;
}
.dash-badge-crit{background:rgba(220,38,38,.14);color:#991b1b;}
.dash-badge-warn{background:rgba(245,158,11,.15);color:#92400e;}
.dash-badge-info{background:rgba(27,117,153,.12);color:#1B7599;}

/* Skeleton placeholder during initial load */
.dash-tile-skeleton{pointer-events:none;}
.dash-tile-skeleton .dash-tile-icon{background:rgba(148,163,184,.12);}
.dash-skeleton-line{
  height:12px;background:rgba(148,163,184,.15);border-radius:4px;
  animation:dashSkel 1.4s ease-in-out infinite;
  margin:4px 0;
}
.dash-skeleton-line.dash-skeleton-sm{width:60%;height:10px;}
@keyframes dashSkel{
  0%,100%{opacity:.5;}
  50%{opacity:.9;}
}

body.dark-theme .dash-tile,
body.theme-dark .dash-tile{background:var(--surface);}
body.dark-theme .dash-bal-pos,
body.theme-dark .dash-bal-pos{background:rgba(34,197,94,.2);color:#86efac;}
body.dark-theme .dash-bal-neg,
body.theme-dark .dash-bal-neg{background:rgba(248,113,113,.2);color:#fca5a5;}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOBILE: bottom-padding so content never hides behind the fixed mobile-nav
 * The mobile nav-bar is ~62px tall plus the iOS safe-area inset. Without
 * explicit padding the last section of any view gets visually cut off and
 * sticky action buttons become unreachable.
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Blanket fix: all top-level views get safe bottom padding.
     Using attribute selectors so we hit every #view-* at once without naming them. */
  [id^="view-"]{
    padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* Ensure scrollable panels inside views flush their content above the nav-bar too */
  .admin-center,
  .panel-body{
    padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
  }
  /* Save-button rows that sit at the bottom of scrollable panels —
     float above content but keep them tappable above the nav-bar. */
  .panel-hdr .btn-primary,
  .panel-hdr .btn-sm{
    position:sticky;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * RESPONSIVE ADMIN / VERWALTUNGS-SECTIONS
 *
 * Strategy: all admin sub-views follow a few repeating HTML patterns (form-rows,
 * data tables, multi-column panels, action-bar headers). Instead of touching
 * every .admin-section-* individually, this block overrides those patterns
 * once at the generic level.
 *
 * Breakpoints:
 *   - <=768px : phone + small tablet portrait
 *   - <=1024px: tablet — softer adjustments (panels 2-col, nav still fixed)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤1024px): tighten but keep sidebars ─────────────────────────── */
@media (max-width:1024px) and (min-width:769px){
  /* Slim the admin nav so more content space remains */
  .admin-nav{width:190px;}
  /* Panels with 3-column layouts fall back to 2 columns */
  .admin-center [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  .admin-center [style*="grid-template-columns:repeat(4,1fr)"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
  /* Panel padding tighter to reclaim horizontal space */
  .admin-center .panel-body{padding:14px 16px;}
}

/* ── Phone (≤768px): full stack, drawer-style nav ───────────────────────── */
@media (max-width:768px){

  /* ── Form rows: collapse 2+ columns into single stack ──────────────────
     Default behavior on wide: side-by-side. On mobile: stacked full-width.
     Uses !important because many forms set display:grid inline. */
  .admin-center .form-row,
  .admin-center .fleet-form-row,
  .admin-center .fleet-form-row-2,
  .admin-center .fleet-form-row-3{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }
  .admin-center .form-row > *,
  .admin-center .fleet-form-row > *,
  .admin-center .fleet-form-row-2 > *,
  .admin-center .fleet-form-row-3 > *{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* ── Generic grid fallback: inline grid-template-columns collapse to 1-col
     Uses attribute-contains selectors to match the common inline patterns.
     This is a safety net for panels where the markup is generated inline. */
  .admin-center [style*="grid-template-columns:1fr 1fr"],
  .admin-center [style*="grid-template-columns: 1fr 1fr"],
  .admin-center [style*="grid-template-columns:1fr 1fr 1fr"],
  .admin-center [style*="grid-template-columns: 1fr 1fr 1fr"],
  .admin-center [style*="grid-template-columns:1fr 1fr 1fr 1fr 1fr"],
  .admin-center [style*="grid-template-columns:repeat(4,1fr)"],
  .admin-center [style*="grid-template-columns: repeat(4"],
  .admin-center [style*="grid-template-columns:2fr 1fr"],
  .admin-center [style*="grid-template-columns:200px 1fr auto"],
  .admin-center [style*="grid-template-columns:auto 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* ── Panel header: title stacks above action button ───────────────────── */
  .admin-center .panel-hdr{
    flex-wrap:wrap;
    gap:10px;
    align-items:stretch;
  }
  .admin-center .panel-hdr h3{
    width:100%;
    font-size:14px;
  }
  .admin-center .panel-hdr .btn,
  .admin-center .panel-hdr .btn-primary,
  .admin-center .panel-hdr .btn-sm{
    width:100%;         /* full-width action buttons are easier to thumb-target */
    justify-content:center;
  }

  /* ── Panel body padding: tighter to save horizontal pixels ─────────────── */
  .admin-center .panel{margin-bottom:10px;}
  .admin-center .panel-body{padding:12px 12px 16px;}

  /* ── Tables: wrap in a horizontal scroller instead of wrapping rows ────── */
  .admin-center table,
  .admin-center .hist-table,
  .admin-center .data-table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    font-size:12px;
  }
  .admin-center table tbody,
  .admin-center table thead{display:table;width:100%;}
  .admin-center table th,
  .admin-center table td{padding:8px 10px;}
  .admin-center .hist-table-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* ── Touch targets: all clickable admin elements ≥44px minimum ─────────── */
  .admin-center .btn,
  .admin-center button:not(.fleet-icon-btn):not(.insp-close):not(.mmd-close){
    min-height:40px;
  }
  .admin-center .admin-nav-item,
  .admin-nav .admin-nav-item{
    padding:12px 14px !important;
    min-height:44px;
  }

  /* ── Multi-column side-panels (common: list+detail pattern) ────────────── */
  .admin-center > div[style*="display:flex"]:not(.panel-hdr):not(.panel-body){
    flex-direction:column !important;
    gap:10px !important;
  }

  /* ── Status-badge grids (e.g. stats overview) ──────────────────────────── */
  .admin-center .inv-summary,
  .admin-center .lba-summary,
  .admin-center .tta-summary{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }

  /* ── Wide inputs: prevent overflow on smaller viewports ────────────────── */
  .admin-center input[type="text"],
  .admin-center input[type="email"],
  .admin-center input[type="url"],
  .admin-center input[type="number"],
  .admin-center input[type="search"],
  .admin-center input[type="password"],
  .admin-center input[type="date"],
  .admin-center input[type="time"],
  .admin-center select,
  .admin-center textarea{
    max-width:100%;
    box-sizing:border-box;
    font-size:15px; /* ≥16px avoids iOS input-zoom but we're at 15 for design — compromise */
  }
  /* Date/time inputs specifically — iOS rendering is cleaner at native size */
  .admin-center input[type="date"],
  .admin-center input[type="time"]{
    min-height:38px;
  }

  /* ── Modal overlays: full-bleed on phone ──────────────────────────────── */
  .insp-overlay .insp-wizard,
  .fleet-modal-overlay .fleet-modal,
  .inv-editor-overlay .insp-wizard,
  .um-overlay .um-modal,
  .vac-overlay .vac-modal,
  .confirm-overlay .confirm-box{
    max-width:100% !important;
    width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 40px) !important;
    max-height:calc(100dvh - 40px) !important;
    margin:10px auto !important;
  }

  /* ── Dashboard tiles: single column, full-width ────────────────────────── */
  .dash-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .dash-tile{min-height:auto;}

  /* ── Admin-section tabs / filter-bars: horizontal scrollable ──────────── */
  .admin-section-tabs,
  .tta-filter-bar,
  .lba-filter-bar,
  .vac-filter-bar,
  .fleet-filter-bar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    padding-bottom:6px;
    gap:6px;
  }
  .admin-section-tabs > *,
  .tta-filter-bar > *,
  .lba-filter-bar > *,
  .fleet-filter-bar > *{
    flex-shrink:0;
  }

  /* ── Panel's internal "max-width:800px" wrappers shouldn't overflow ──── */
  #view-profile > div[style*="max-width"],
  #view-admin > div[style*="max-width"]{
    max-width:100% !important;
    width:100% !important;
  }
}

/* ── Very small phones (≤400px): extra tight ─────────────────────────────── */
@media (max-width:400px){
  .admin-center .panel-body{padding:10px 10px 14px;}
  .admin-center .panel-hdr{padding:10px 12px;}
  .admin-center .panel-hdr h3{font-size:13px;}
  .admin-center .btn{font-size:12px;}
  .dash-tile{padding:12px;}
  .dash-tile-kpi strong{font-size:24px;}
}

/* ── Quick-Reply (Schnellantworten) — ensure input rows stack cleanly ──── */
@media (max-width:768px){
  .sc-list{gap:10px;}
  .sc-row{
    flex-wrap:wrap;
    gap:6px;
  }
  .sc-row input,
  .sc-row textarea{
    flex:1 1 100%;
    min-width:0;
    font-size:14px;
  }
  .sc-row .am-remove,
  .sc-row button{flex-shrink:0;}
  /* Add-button stays full-width at the bottom of the list */
  .sc-list + button,
  .sc-list + .btn{width:100%;justify-content:center;margin-top:6px;}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-UX — Tasks & Logbook Swipe-Feedback
   Optionale Shortcuts, nie Ersatz für sichtbare Buttons.
   ══════════════════════════════════════════════════════════════════════════ */

/* Swipe-Right auf Task-Card → kurzes Grün-Blitzen bevor Toggle ausgelöst wird */
.tn-task-card.tn-swipe-done-flash{
  animation: tnSwipeDoneFlash 0.2s ease-out;
  background: rgba(46, 125, 50, 0.12) !important;
  transform: translateX(20px);
  transition: transform 0.18s ease-out;
}
@keyframes tnSwipeDoneFlash{
  0%   { background: transparent; transform: translateX(0); }
  100% { background: rgba(46, 125, 50, 0.12); transform: translateX(20px); }
}

/* Logbook: Flash beim erfolgreichen Swipe (bestehend, hier dokumentiert) */
.lb-swipe-flash{
  animation: lbSwipeFlash 0.18s ease-out;
}
@keyframes lbSwipeFlash{
  0%   { opacity: 1; }
  50%  { opacity: 0.75; }
  100% { opacity: 1; }
}

/* Touch-Optimierung für Task-Cards auf Mobile */
@media (max-width: 768px){
  .tn-task-card{
    min-height: 64px;
    padding: 12px 14px;
    touch-action: pan-y; /* horizontales Wischen zulassen, vertikales Scrollen erhalten */
  }
  .tn-task-check{
    min-width: 44px;
    min-height: 44px;
  }
  .tn-tab{
    min-height: 44px;
    padding: 8px 14px;
  }
  .tn-btn-primary{
    min-height: 44px;
  }

  /* Logbook: Tap-Row min-height für bessere Touch-UX */
  .lb-wd-row{
    min-height: 68px;
    padding: 12px 14px;
  }
  .lb-tool-btn,
  .lb-view-toggle-btn{
    min-height: 40px;
  }
  .lb-nav-btn,
  .lb-nav-today{
    min-height: 40px;
    min-width: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   INVENTORY FOTOS + MOBILE-OPTIMIERUNG FLEET/INVENTORY
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Foto-Galerie im Editor ──────────────────────────────────────────────── */
.inv-photos-section{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.inv-photos-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.inv-photos-hdr label{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.inv-photos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.inv-photos-empty{
  grid-column: 1 / -1;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.inv-photo-thumb{
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
}
.inv-photo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inv-photo-remove{
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.inv-photo-remove:hover{
  background: rgba(211, 47, 47, 0.9);
}

/* ── Item-Card: Photo-Strip + Storage-Location ───────────────────────────── */
.inv-item-location{
  font-size: 11px;
  color: #1565C0;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.inv-item-location i{ color: #1565C0; opacity: 0.8; }

.inv-item-photos{
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.inv-item-photo-thumb{
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.inv-item-photo-thumb:hover{
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.inv-item-photo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inv-item-photo-more{
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inv-item-photo-more:hover{
  background: rgba(27, 117, 153, 0.08);
  color: #1B7599;
}

/* ── Photo-Viewer (Vollbild-Overlay) ─────────────────────────────────────── */
.inv-photo-viewer{
  background: rgba(0, 0, 0, 0.92);
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 50000;
}
.inv-photo-viewer-inner{
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-photo-viewer-img{
  max-width: 95vw;
  max-height: 80vh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
.inv-photo-viewer-close{
  position: absolute;
  top: -44px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.inv-photo-viewer-close:hover{ background: rgba(255, 255, 255, 0.25); }
.inv-photo-viewer-counter{
  position: absolute;
  top: -36px;
  left: 0;
  color: #fff;
  font-size: 13px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
}
.inv-photo-viewer-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.inv-photo-viewer-nav:hover{ background: rgba(255, 255, 255, 0.3); }
.inv-photo-viewer-prev{ left: -60px; }
.inv-photo-viewer-next{ right: -60px; }
.inv-photo-viewer-caption{
  position: absolute;
  bottom: -44px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 13px;
  opacity: 0.85;
}

/* ── Mobile-Optimierung Fleet + Inventory ────────────────────────────────── */
@media (max-width: 768px){
  /* Inventory */
  .inv-item{
    padding: 14px 14px;
  }
  .inv-item-title{
    font-size: 15px;
  }
  .inv-item-actions button,
  .fleet-icon-btn{
    min-width: 44px;
    min-height: 44px;
  }
  .inv-item-qty{ font-size: 14px; }
  .inv-photos-grid{
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
  .inv-item-photo-thumb,
  .inv-item-photo-more{
    width: 60px;
    height: 60px;
  }

  /* Photo-Viewer: Nav-Buttons inside frame statt outside (kein Platz) */
  .inv-photo-viewer-prev{ left: 8px; background: rgba(0,0,0,0.5); }
  .inv-photo-viewer-next{ right: 8px; background: rgba(0,0,0,0.5); }
  .inv-photo-viewer-close{ top: 8px; right: 8px; background: rgba(0,0,0,0.5); }
  .inv-photo-viewer-counter{ top: 8px; left: 8px; background: rgba(0,0,0,0.5); }
  .inv-photo-viewer-caption{ bottom: 12px; padding: 0 16px; }

  /* Fleet: Vehicle-Liste auf Mobile kompakter */
  .fleet-vehicle-row,
  .fleet-vehicle-card{
    min-height: 64px;
    padding: 12px 14px;
  }
  .fleet-vehicle-card .fleet-icon-btn{
    min-width: 44px;
    min-height: 44px;
  }

  /* Kategorien-Tab-Zeile horizontal scrollbar */
  .inv-cat-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  .inv-cat-tabs::-webkit-scrollbar{ display: none; }
  .inv-cat-tab{
    min-height: 40px;
    flex-shrink: 0;
  }

  /* Editor: Als Bottom-Sheet */
  .inv-editor-overlay .insp-wizard{
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 92vh;
  }
  .inv-editor-overlay{
    align-items: flex-end;
  }
}

/* ── Globale Touch-Targets (alle Module) ─────────────────────────────────── */
/* Damit neue Module automatisch Touch-freundlich sind ohne Einzelfix */
@media (max-width: 768px){
  .btn-sm{
    min-height: 40px;
    padding: 0 14px;
  }
  .btn:not(.btn-sm):not(.btn-xs){
    min-height: 44px;
    padding: 0 16px;
  }
  /* Alle Icon-Buttons die wie Icons aussehen: min 40x40 */
  button[class*="icon-btn"],
  button.icon-btn{
    min-width: 40px;
    min-height: 40px;
  }
  /* Form-Inputs: groß genug für Finger */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea{
    min-height: 44px;
    font-size: 16px; /* iOS zoomt nur wenn <16px */
  }
  textarea{ min-height: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APP-ICONS & PWA-MANIFEST-VERWALTUNG
   ══════════════════════════════════════════════════════════════════════════ */

.app-icons-root{ padding: 18px 22px; }

/* ── Icons-Grid ──────────────────────────────────────────────────────────── */
.app-icons-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.app-icon-card{
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.app-icon-card:hover{
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: var(--primary);
}
.app-icon-preview{
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
}
.app-icon-preview img{
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  display: block;
}
.app-icon-info{
  flex: 1;
  min-width: 0;
}
.app-icon-label{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text);
}
.app-icon-recommend{
  font-size: 11px;
  color: #0891b2;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.app-icon-desc{
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 6px;
}
.app-icon-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.app-icon-badge-custom{
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}
.app-icon-badge-default{
  background: var(--hover);
  color: var(--muted);
}
.app-icon-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.app-icon-upload-btn{
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.app-icon-upload-btn.loading{
  opacity: 0.6;
  pointer-events: none;
}
.app-icon-upload-btn.loading::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: app-icon-shimmer 1s infinite;
}
@keyframes app-icon-shimmer{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Manifest-Editor ─────────────────────────────────────────────────────── */
.app-icons-manifest{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.app-icons-manifest-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.app-icons-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.app-icons-field label{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.app-icons-field input[type="text"],
.app-icons-field select{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg);
}
.app-icons-field input[type="text"]:focus,
.app-icons-field select:focus{
  outline: none;
  border-color: #1B7599;
  background: var(--white);
}
.app-icons-field-hint{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* ── Install-Help ────────────────────────────────────────────────────────── */
.app-icons-help{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.app-icons-help-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.app-icons-help-hdr{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1B7599;
}
.app-icons-help-hdr i{ font-size: 18px; }
.app-icons-help-card ol{
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
}
.app-icons-help-card ol li{ margin-bottom: 2px; }
.app-icons-help-tip{
  grid-column: 1 / -1;
  background: rgba(232, 139, 0, 0.08);
  border: 1px solid rgba(232, 139, 0, 0.3);
  color: #925a00;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.app-icons-help-tip i{ font-size: 16px; }
.app-icons-help-tip code{
  background: rgba(0,0,0,0.08);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  word-break: break-all;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px){
  .app-icons-root{ padding: 14px 12px; }
  .app-icons-grid{
    grid-template-columns: 1fr;
  }
  .app-icon-card{
    flex-wrap: wrap;
  }
  .app-icon-preview{
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .app-icon-preview img{
    max-width: 44px;
    max-height: 44px;
  }
  .app-icon-actions{
    flex-direction: row;
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    justify-content: flex-end;
  }
  .app-icons-manifest-grid{
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   APP-ICONS & PWA-MANIFEST — Additional Rules
   ══════════════════════════════════════════════════════════════════════════ */

.app-icons-root{ padding: 0; }
.app-icon-recommend i{ margin-right: 3px; opacity: 0.7; }
.app-icon-badge-custom i{ margin-right: 3px; }
.app-icon-upload-btn{
  cursor: pointer;
  margin: 0;
}
.app-icon-upload-btn.loading{
  opacity: 0.6;
  pointer-events: none;
}

/* ── Manifest-Editor ──────────────────────────────────────────────────────── */
.app-icons-manifest{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}

.app-icons-manifest-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px 20px;
}

.app-icons-field{
  display: flex;
  flex-direction: column;
}
.app-icons-field label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 5px;
}
.app-icons-field input[type="text"],
.app-icons-field input[type="color"],
.app-icons-field select{
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--white);
}
.app-icons-field-hint{
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Install-Help ─────────────────────────────────────────────────────────── */
.app-icons-help{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px){
  .app-icons-help{ grid-template-columns: 1fr; }
}
.app-icons-help-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.app-icons-help-hdr{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.app-icons-help-hdr i{
  margin-right: 6px;
  color: #1B7599;
}
.app-icons-help-card ol{
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.7;
}
.app-icons-help-tip{
  grid-column: 1 / -1;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  margin-top: 4px;
}
.app-icons-help-tip i{ margin-right: 4px; }
.app-icons-help-tip code{
  background: rgba(255, 255, 255, 0.6);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  user-select: all;
  word-break: break-all;
}


/* ══════════════════════════════════════════════════════════════════════════
   INVENTORY-KATEGORIEN-VERWALTUNG (Admin)
   ══════════════════════════════════════════════════════════════════════════ */

.inv-cat-admin-items{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-cat-admin-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.12s;
}
.inv-cat-admin-row:hover{ border-color: #1B7599; }

.inv-cat-admin-icon{
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.inv-cat-admin-info{ flex: 1; min-width: 0; }
.inv-cat-admin-name{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.inv-cat-admin-meta{
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.inv-cat-admin-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.inv-cat-admin-meta i{ opacity: 0.7; }
.inv-cat-admin-hex{
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
}

.inv-cat-admin-pill{
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(232, 139, 0, 0.12);
  color: #E88B00;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.inv-cat-admin-actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Kategorie-Editor (Neu/Bearbeiten) ───────────────────────────────────── */

.inv-cat-icon-grid{
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (max-width: 520px){
  .inv-cat-icon-grid{ grid-template-columns: repeat(6, 1fr); }
}
.inv-cat-icon-chip{
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.12s;
  padding: 0;
}
.inv-cat-icon-chip:hover{
  border-color: #1B7599;
  background: rgba(27, 117, 153, 0.06);
}
.inv-cat-icon-chip.active{
  border-color: #1B7599;
  background: #1B7599;
  color: #fff;
  box-shadow: 0 2px 4px rgba(27, 117, 153, 0.3);
}

.inv-cat-color-row{
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.inv-cat-color-chip{
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.12s, border-color 0.12s;
}
.inv-cat-color-chip:hover{ transform: scale(1.1); }
.inv-cat-color-chip.active{
  border-color: var(--text);
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--text);
  transform: scale(1.1);
}

@media (max-width: 520px){
  .inv-cat-admin-row{
    flex-wrap: wrap;
  }
  .inv-cat-admin-actions{
    width: 100%;
    margin-top: 6px;
    justify-content: flex-end;
  }
  .inv-cat-icon-chip{ min-height: 40px; }
  .inv-cat-color-chip{ width: 36px; height: 36px; min-width: 36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VERWALTUNGS-BEREICH — Max-Width-Begrenzung für große Monitore
   ══════════════════════════════════════════════════════════════════════════ */
/* Alle Verwaltungs-Module bekommen dieselbe max-width damit der Inhalt auf
   breiten Monitoren konsistent wirkt.

   WICHTIG: Die CSS-Regel `.verwaltung-section > * { width:100% }` weiter oben
   verhindert normale max-width-Wirkung. Deshalb hier mit !important +
   spezifische Selektoren für jedes Modul. */

.verwaltung-content{
  padding: 20px 0;
}

/* Wrapper: jede direkte Sektion in verwaltung-content bekommt max-width.
   Der Urlaubskalender (.vac-page) ist bewusst NICHT in dieser Liste — er
   füllt die volle Breite ohne seitliche Margin, siehe Urlaubskalender-
   Block weiter unten. */
.verwaltung-section > .panel,
.verwaltung-section > .vac-shell,
.verwaltung-section > .tta-shell,
.verwaltung-section > #lba-container,
.verwaltung-section > #verwaltung-calendar-host,
.verwaltung-content > .panel,
.verwaltung-content > .vac-shell,
.verwaltung-content > .tta-shell,
.verwaltung-content > #lba-container,
.verwaltung-content > #verwaltung-calendar-host{
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: calc(100% - 40px) !important;
  box-sizing: border-box;
}

/* Urlaubskalender: die Jahresansicht darf intern breiter werden (scroll) */
.verwaltung-section > .vac-shell,
.verwaltung-content > .vac-shell{
  max-width: 1400px !important;
}

/* Kalender-Verwaltungs-Host: volle verfügbare Höhe */
.verwaltung-content #verwaltung-calendar-host,
.verwaltung-section #verwaltung-calendar-host{
  min-height: calc(100vh - 200px);
}

/* Mobile: keine Breitenbegrenzung */
@media (max-width: 768px){
  .verwaltung-content{ padding: 0 !important; }
  .verwaltung-section > .panel,
  .verwaltung-section > .vac-shell,
  .verwaltung-section > .tta-shell,
  .verwaltung-section > #lba-container,
  .verwaltung-section > #verwaltung-calendar-host,
  .verwaltung-content > .panel,
  .verwaltung-content > .vac-shell,
  .verwaltung-content > .tta-shell,
  .verwaltung-content > #lba-container,
  .verwaltung-content > #verwaltung-calendar-host{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FLOTTE / FAHRZEUG-VERWALTUNG — Zentrierung mit höchster Spezifität
   ══════════════════════════════════════════════════════════════════════════ */
/* Höchste Spezifität mit `body`-Prefix + mehrfachen Selektoren.
   Das überschreibt `.verwaltung-section > * { width:100% }` weiter oben. */
body .verwaltung-section > .panel,
body .verwaltung-content .panel:not(.panel .panel){
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: calc(100% - 40px) !important;
  box-sizing: border-box !important;
  display: block !important;
  float: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER 3.0 — komplett neue Struktur mit 3 Tabs
   ══════════════════════════════════════════════════════════════════════════ */

.vac-shell{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.vac-hdr{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vac-hdr h2{ margin:0; font-size:18px; color:var(--text); font-weight:700; }
.vac-toolbar{ display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; }

.vac-content{
  flex: 1;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.vac-loading, .vac-error, .vac-empty, .vac-ov-empty{
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.vac-empty i, .vac-ov-empty i{
  font-size: 40px; opacity:.4; display:block; margin-bottom:12px;
}
.vac-empty h3, .vac-ov-empty h3{
  margin: 0 0 8px; color: var(--text); font-size: 16px;
}
.vac-empty p, .vac-ov-empty p{
  margin: 0 auto; max-width: 420px; font-size: 13px; line-height: 1.5;
}

/* ── TAB-BAR ─────────────────────────────────────────────────────────────── */
.vac-tabs-bar{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.vac-tabs{
  display: inline-flex;
  background: var(--white);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
}
.vac-tab-btn{
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .12s;
  white-space: nowrap;
}
.vac-tab-btn:hover{ background: rgba(27,117,153,.08); color: var(--text); }
.vac-tab-btn.active{
  background: #1B7599;
  color: #fff;
  box-shadow: 0 1px 3px rgba(27,117,153,.25);
}
.vac-tab-count{
  display: inline-block;
  background: rgba(255,255,255,.25);
  color: inherit;
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.vac-tab-btn:not(.active) .vac-tab-count{
  background: rgba(0,0,0,.06);
}

.vac-kpis{
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}
.vac-kpi{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
}
.vac-kpi i{ color: #1B7599; opacity: .7; }
.vac-kpi-warn{ color: #d97706; }
.vac-kpi-warn i{ color: #d97706 !important; opacity: 1; }

/* ── FILTER-BAR ─────────────────────────────────────────────────────────── */
.vac-filter-bar{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vac-filter-group{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.vac-filter-group label{
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-weight: 700;
}
.vac-filter-group select{
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}
.vac-filter-reset{
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW 1: ÜBERSICHT — alle Urlaubs-Blöcke chronologisch
   ══════════════════════════════════════════════════════════════════════════ */
.vac-overview{
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.vac-ov-section{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.vac-ov-section-hdr{
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.vac-ov-section-active .vac-ov-section-hdr{
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}
.vac-ov-section-upcoming .vac-ov-section-hdr{
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}
.vac-ov-section-past .vac-ov-section-hdr{
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.vac-ov-section-past .vac-ov-section-hdr:hover{
  background: rgba(0,0,0,0.03);
}
.vac-ov-chev{
  font-size: 10px;
  transition: transform .15s;
}
.vac-ov-section:not(.vac-ov-section-collapsed) .vac-ov-chev{
  transform: rotate(90deg);
}
.vac-ov-section-collapsed .vac-ov-list{
  display: none;
}
.vac-ov-count{
  margin-left: auto;
  background: rgba(0,0,0,.08);
  color: inherit;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.vac-ov-list{
  display: flex;
  flex-direction: column;
}
.vac-ov-block{
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(100px, 120px) minmax(200px, 1.5fr) minmax(90px, 110px);
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all .12s;
  border-left: 4px solid var(--blk-color, #3b82f6);
}
.vac-ov-block:last-child{ border-bottom: none; }
.vac-ov-block:hover{
  background: rgba(27,117,153,.04);
}
.vac-ov-user{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vac-ov-avatar{
  width: 36px; height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vac-ov-user-info{ min-width: 0; }
.vac-ov-user-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vac-ov-user-dept{
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.vac-ov-type{
  font-size: 12px;
  color: var(--blk-color, #3b82f6);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.vac-ov-dates{
  font-size: 12px;
  color: var(--text);
}
.vac-ov-days{
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.vac-ov-days strong{
  color: var(--text);
  font-size: 14px;
}

@media (max-width: 768px){
  .vac-ov-block{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px;
  }
  .vac-ov-days{ text-align: left; }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW 2: NACH MITARBEITER — Liste links, Detail rechts
   ══════════════════════════════════════════════════════════════════════════ */
.vac-by-user{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  min-height: 500px;
  height: calc(100vh - 280px);
}

/* Links: Mitarbeiter-Liste */
.vac-bu-list{
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vac-bu-search{
  position: relative;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.vac-bu-search i{
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
}
.vac-bu-search input{
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--white);
  box-sizing: border-box;
}
.vac-bu-list-items{
  flex: 1;
  overflow-y: auto;
}
.vac-bu-dept-sep{
  padding: 8px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.vac-bu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: all .1s;
}
.vac-bu-item:hover{ background: rgba(27,117,153,0.05); }
.vac-bu-item.active{
  background: rgba(27,117,153,0.1);
  border-left: 3px solid #1B7599;
  padding-left: 11px;
}
.vac-bu-avatar{
  width: 34px; height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vac-bu-info{ flex: 1; min-width: 0; }
.vac-bu-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vac-bu-meta{
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.vac-bu-rem{
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.vac-bu-rem-warn{
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}

/* Rechts: Detail */
.vac-bu-detail{
  background: var(--bg);
  overflow-y: auto;
  padding: 24px;
}
.vac-bu-no-sel{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 14px;
}
.vac-bu-no-sel i{
  font-size: 40px;
  opacity: .3;
  margin-bottom: 10px;
}
.vac-bu-detail-inner{
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.vac-bu-detail-hdr{
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.vac-bu-detail-avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vac-bu-detail-info{ flex: 1; min-width: 0; }
.vac-bu-detail-info h2{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.vac-bu-detail-sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.vac-bu-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.vac-bu-stat{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}
.vac-bu-stat-primary{
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-color: #1d4ed8;
}
.vac-bu-stat-primary .vac-bu-stat-num,
.vac-bu-stat-primary .vac-bu-stat-lbl{ color: #fff; }
.vac-bu-stat-warn{
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
}
.vac-bu-stat-warn .vac-bu-stat-num{ color: #dc2626; }
.vac-bu-stat-sick{
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.3);
}
.vac-bu-stat-sick .vac-bu-stat-num{ color: #9333ea; }
.vac-bu-stat-info{
  background: rgba(100,116,139,.08);
  border-color: rgba(100,116,139,.2);
}
.vac-bu-stat-info .vac-bu-stat-num{ color: #64748b; }
.vac-bu-stat-num{
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.vac-bu-stat-lbl{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  font-weight: 600;
}

.vac-bu-section{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
}
.vac-bu-section h3{
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vac-bu-section h3 i{ color: var(--muted); font-size: 12px; }

.vac-bu-blocks-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vac-bu-blk{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--blk-color, #3b82f6);
  border-radius: 8px;
  transition: all .12s;
}
.vac-bu-blk:hover{
  border-color: var(--blk-color, #3b82f6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateX(2px);
}
.vac-bu-blk-icon{
  width: 36px; height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--blk-color, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.vac-bu-blk-info{ flex: 1; min-width: 0; }
.vac-bu-blk-title{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vac-bu-blk-date{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.vac-bu-blk-status{
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.vac-bu-blk-status-active{ background: #dcfce7; color: #16a34a; }
.vac-bu-blk-status-future{ background: #dbeafe; color: #1d4ed8; }
.vac-bu-blk-status-past{ background: var(--surface); color: var(--muted); }
.vac-bu-blk-del{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s;
  flex-shrink: 0;
}
.vac-bu-blk-del:hover{
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #dc2626;
}

.vac-bu-blocks-empty{
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
}
.vac-bu-blocks-empty i{
  font-size: 32px;
  opacity: .4;
  margin-bottom: 8px;
  display: block;
  color: #22c55e;
}
.vac-bu-blocks-empty p{ margin: 0; font-size: 13px; }

/* Monats-Balken */
.vac-mo-bars{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vac-mo-bar{
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
}
.vac-mo-bar-lbl{
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.vac-mo-bar-track{
  height: 20px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.vac-mo-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 4px;
  transition: width .3s ease;
}
.vac-mo-bar-num{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}

@media (max-width: 900px){
  .vac-by-user{
    grid-template-columns: 1fr;
    height: auto;
  }
  .vac-bu-list{
    max-height: 300px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIEW 3: TIMELINE (Monats-Matrix)
   ══════════════════════════════════════════════════════════════════════════ */
.vac-tl-ctrl{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.vac-tl-scale{
  display: inline-flex;
  background: var(--surface);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.vac-tl-scale-btn{
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vac-tl-scale-btn:hover{ background: rgba(27,117,153,.08); color: var(--text); }
.vac-tl-scale-btn.active{
  background: #1B7599;
  color: #fff;
}
.vac-tl-mnav{
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-tl-mlbl{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 150px;
  text-align: center;
}

/* Monats-Timeline-Tabelle */
.vac-tl-wrap{
  flex: 1;
  overflow: auto;
  padding: 0 20px 20px;
}
.vac-tl-table{
  border-collapse: collapse;
  background: var(--white);
  width: 100%;
  min-width: 100%;
}
.vac-tl-uhdr{
  position: sticky;
  left: 0;
  top: 0;
  z-index: 4;
  background: var(--surface);
  min-width: 180px;
  max-width: 220px;
  padding: 10px 14px;
  border-right: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.vac-tl-dhdr{
  width: 34px;
  min-width: 34px;
  padding: 6px 2px;
  text-align: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.vac-tl-dhdr.vac-we{ background:#f1f5f9; color:#94a3b8; }
.vac-tl-dhdr.vac-hol{ background:#fef3c7; color:#b45309; }
.vac-tl-dhdr.vac-today{ background:#dbeafe !important; color:#1d4ed8; box-shadow: inset 0 -2px 0 #3b82f6; }
.vac-tl-dnum{ font-size:13px; font-weight:700; color:var(--text); }
.vac-tl-ddow{ font-size:10px; color:var(--muted); margin-top:1px; }

.vac-tl-dept td{
  background: linear-gradient(180deg, rgba(27,117,153,.08), rgba(27,117,153,.02));
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #1B7599;
  position: sticky;
  left: 0;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.vac-tl-ucell{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--white);
  min-width: 180px;
  max-width: 220px;
  padding: 10px 14px;
  border-right: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .1s;
}
.vac-tl-ucell:hover{ background: rgba(27,117,153,.06); color: #1B7599; }

.vac-tl-cell{
  width: 34px;
  min-width: 34px;
  height: 36px;
  padding: 0;
  text-align: center;
  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  font-size: 14px;
  background: var(--white);
  transition: all .1s;
}
.vac-tl-cell:hover{
  background: #e0f2fe !important;
  transform: scale(1.05);
  z-index: 1;
  position: relative;
}
.vac-tl-cell.vac-we{ background: #f8fafc; color:#cbd5e1; }
.vac-tl-cell.vac-hol{ background: #fef3c7; }
.vac-tl-cell.vac-tl-c-vacation{
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}
.vac-tl-cell.vac-tl-c-sick{
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: #fff;
}

/* Jahres-Ansicht: 12 Monats-Tabellen untereinander */
.vac-tl-year{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vac-tl-year-month{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
.vac-tl-year-month h4{
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-tl-year-count{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 10px;
}
.vac-tl-year-empty{
  padding: 12px 16px;
}
.vac-tl-year-no-data{
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

.vac-tl-year-tbl-wrap{
  overflow-x: auto;
  margin: 0 -16px -16px;
  padding: 0 16px 16px;
}
.vac-tl-year-tbl{
  border-collapse: collapse;
  width: auto;
  min-width: 100%;
  table-layout: auto;
}
.vac-tl-year-dhdr{
  width: 22px;
  min-width: 22px;
  padding: 4px 0;
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.vac-tl-year-dhdr.vac-we{ background: #f1f5f9; }
.vac-tl-year-user{
  min-width: 150px;
  max-width: 180px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border-right: 2px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .1s;
}
.vac-tl-year-user:hover{ color: #1B7599; }
.vac-tl-year-cell{
  width: 22px;
  min-width: 22px;
  height: 24px;
  padding: 0;
  border-right: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
  background: var(--white);
}
.vac-tl-year-cell.vac-we{ background: #f8fafc; }
.vac-tl-year-cell.vac-tl-c-vacation{ background: #3b82f6; }
.vac-tl-year-cell.vac-tl-c-sick{ background: #a855f7; }

/* Mobile */
@media (max-width: 768px){
  .vac-tabs-bar{
    gap: 10px;
    padding: 10px 12px;
  }
  .vac-filter-bar{
    padding: 10px 12px;
    gap: 8px;
  }
  .vac-filter-group{ min-width: 120px; flex: 1; }
  .vac-kpis{ width: 100%; order: 99; }
  .vac-overview{ padding: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ABTEILUNGS-CHIPS — farbig, konsistent, klickbar
   ══════════════════════════════════════════════════════════════════════════ */

.vac-dept-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--dc-bg, #3b82f6);
  color: var(--dc-fg, #fff);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.3;
  border: 1px solid transparent;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.vac-dept-chip i{
  font-size: 10px;
  opacity: 0.9;
}
.vac-dept-chip-name{
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vac-dept-chip-sm{
  padding: 2px 8px;
  font-size: 10px;
  gap: 4px;
}
.vac-dept-chip-sm i{ font-size: 9px; }
.vac-dept-chip-sm .vac-dept-chip-name{ max-width: 170px; }
.vac-dept-chip-clickable{
  cursor: pointer;
  transition: all .12s;
}
.vac-dept-chip-clickable:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  filter: brightness(1.08);
}
.vac-dept-chip-active{
  outline: 2px solid rgba(0,0,0,0.4);
  outline-offset: 2px;
}
.vac-dept-chip-count{
  background: rgba(255,255,255,0.25);
  padding: 0 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 2px;
}
.vac-dept-chip-none{
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px dashed var(--border) !important;
  box-shadow: none !important;
}
.vac-dept-chip-neutral{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  cursor: pointer;
}
.vac-dept-chip-neutral:hover{ background: var(--hover) !important; }
.vac-dept-chip-neutral.vac-dept-chip-active{
  background: #1B7599 !important;
  color: #fff !important;
  border-color: #1B7599 !important;
  outline: none !important;
}

/* Quick-Filter-Chips-Leiste */
.vac-quick-chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.vac-quick-chips-lbl{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-right: 6px;
}

/* Multi-Chip Line Height fix in Tabellen */
.vac-set-depts{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Jahr-Badge im Nach-Mitarbeiter-Detail */
.vac-bu-detail-year{
  font-size: 11px;
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  margin-left: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MONATS-BALKEN MIT DATUMS-DETAILS
   ══════════════════════════════════════════════════════════════════════════ */

.vac-mo-bars-detailed{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vac-mo-bar-row{
  display: grid;
  grid-template-columns: 56px 120px 34px 1fr;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.vac-mo-bar-row.vac-mo-bar-empty{ opacity: 0.45; }
.vac-mo-bar-row .vac-mo-bar-lbl{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.vac-mo-bar-row .vac-mo-bar-track{
  height: 16px;
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
}
.vac-mo-bar-row .vac-mo-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 4px;
  transition: width .3s ease;
}
.vac-mo-bar-row .vac-mo-bar-num{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.vac-mo-bar-dates{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.vac-mo-date-chip{
  display: inline-block;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.vac-mo-date-chip-sick{
  background: rgba(168, 85, 247, 0.12);
  color: #9333ea;
  border-color: rgba(168, 85, 247, 0.2);
}
.vac-mo-no-dates{
  color: var(--muted);
  font-size: 11px;
  opacity: 0.5;
}

@media (max-width: 720px){
  .vac-mo-bar-row{
    grid-template-columns: 50px 1fr 30px;
    grid-template-areas: "lbl track num" "dates dates dates";
  }
  .vac-mo-bar-row .vac-mo-bar-lbl{ grid-area: lbl; }
  .vac-mo-bar-row .vac-mo-bar-track{ grid-area: track; }
  .vac-mo-bar-row .vac-mo-bar-num{ grid-area: num; }
  .vac-mo-bar-dates{
    grid-area: dates;
    margin-top: 4px;
    padding-left: 60px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   EINSTELLUNGS-TAB
   ══════════════════════════════════════════════════════════════════════════ */

.vac-settings{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vac-set-section{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.vac-set-hdr{
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27,117,153,0.04), transparent);
}
.vac-set-hdr h3{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-set-hdr h3 i{ color: #1B7599; font-size: 14px; }
.vac-set-hdr p{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* Users-Tabelle */
.vac-set-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vac-set-table thead th{
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
}
.vac-set-table tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.vac-set-table tbody tr:last-child td{ border-bottom: none; }
.vac-set-table tbody tr:hover{ background: rgba(27,117,153,0.03); }
.vac-set-td-right{ text-align: right; }
.vac-set-mono{ font-variant-numeric: tabular-nums; font-weight: 600; }
.vac-set-warn{ color: #dc2626; }

.vac-set-user{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
}

.vac-set-days-input{
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  background: var(--white);
  transition: all .12s;
  font-variant-numeric: tabular-nums;
}
.vac-set-days-input:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}
.vac-set-days-input.vac-set-days-custom{
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
  color: #1d4ed8;
}
.vac-set-days-input.vac-set-saving{
  opacity: 0.6;
  pointer-events: none;
}
.vac-set-days-input.vac-set-saved{
  border-color: #16a34a !important;
  background: rgba(34, 197, 94, 0.08) !important;
  color: #16a34a !important;
}

/* Abteilungs-Karten */
.vac-set-depts-wrap{
  padding: 16px 20px;
}
.vac-set-depts-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.vac-set-dept-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--dc-bg, #3b82f6);
  border-radius: 10px;
  transition: all .12s;
}
.vac-set-dept-card:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.vac-set-dept-icon{
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--dc-bg, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.vac-set-dept-body{
  flex: 1;
  min-width: 0;
}
.vac-set-dept-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.vac-set-dept-meta{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.vac-set-dept-actions{
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.vac-set-dept-btn{
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all .12s;
}
.vac-set-dept-btn:hover{
  background: var(--surface);
  color: var(--text);
  border-color: var(--muted);
}
.vac-set-dept-btn-del:hover{
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border-color: rgba(239,68,68,0.3);
}

.vac-set-dept-add-card{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: transparent;
  border: 2px dashed var(--border);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.vac-set-dept-add-card:hover{
  border-color: #1B7599;
  color: #1B7599;
  background: rgba(27,117,153,0.04);
}

/* Defaults */
.vac-set-defaults{
  padding: 16px 20px;
}
.vac-set-def-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.vac-set-def-row:last-child{ border-bottom: none; }
.vac-set-def-row label{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vac-set-def-lbl{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vac-set-def-hint{
  font-size: 11px;
  color: var(--muted);
}
.vac-set-def-input{
  width: 80px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
.vac-set-def-input:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}

@media (max-width: 768px){
  .vac-settings{ padding: 12px; }
  .vac-set-depts-grid{
    grid-template-columns: 1fr;
  }
  .vac-set-table{
    font-size: 12px;
  }
  .vac-set-table thead th,
  .vac-set-table tbody td{
    padding: 8px 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER 3.1 — POLISH: Hero-Banner, FAB, Transitions, Mobile
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero-Status-Banner ─────────────────────────────────────────────────── */
.vac-hero{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--surface) 0%, transparent 100%);
  border-bottom: 1px solid var(--border);
}

.vac-hero-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  transition: all .18s cubic-bezier(.22,.9,.28,1);
  position: relative;
  overflow: hidden;
}
.vac-hero-card::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, currentColor 0%, transparent 50%);
  opacity: 0.03;
  pointer-events: none;
}
.vac-hero-card[onclick]{ cursor: pointer; }
.vac-hero-card[onclick]:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
}

.vac-hero-ic{
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  background: rgba(27, 117, 153, 0.1);
  color: #1B7599;
}
.vac-hero-today .vac-hero-ic{ background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.vac-hero-upcoming .vac-hero-ic{ background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.vac-hero-warn .vac-hero-ic{ background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.vac-hero-body{
  flex: 1;
  min-width: 0;
}
.vac-hero-lbl{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.vac-hero-num{
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.vac-hero-num-tot{
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
}
.vac-hero-sub{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.vac-hero-avatars{
  display: flex;
  margin-top: 6px;
  gap: 2px;
}
.vac-hero-av{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  margin-left: -6px;
  border: 2px solid var(--white);
  cursor: pointer;
  transition: transform .1s;
  background: #3b82f6;
}
.vac-hero-av:first-child{ margin-left: 0; }
.vac-hero-av:hover{
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
}
.vac-hero-av-more{
  background: var(--surface);
  color: var(--muted);
  border-color: var(--white);
  font-size: 9px;
  cursor: default;
}
.vac-hero-empty-msg{
  font-size: 11px;
  color: #16a34a;
  margin-top: 4px;
  font-weight: 600;
}

/* Gauge-Ring (Team-Verfügbarkeit) */
.vac-hero-gauge-ring{
  width: 84px;
  height: 84px;
  min-width: 84px;
  position: relative;
  flex-shrink: 0;
}
.vac-hero-gauge-svg{
  width: 100%;
  height: 100%;
  transform: rotate(-90deg) scaleX(-1);
}
.vac-hero-gauge-bg{
  fill: none;
  stroke: var(--surface);
  stroke-width: 3.5;
}
.vac-hero-gauge-fg{
  fill: none;
  stroke: var(--gauge-color, #16a34a);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dasharray .6s cubic-bezier(.22,.9,.28,1);
}
.vac-hero-gauge-text{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.vac-hero-gauge-num{
  font-size: 18px;
  font-weight: 800;
  color: var(--gauge-color, #16a34a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.vac-hero-gauge-lbl{
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  line-height: 1;
}

/* ── Tab-Transitions ────────────────────────────────────────────────────── */
.vac-view-container{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease-out, transform .22s ease-out;
}
.vac-view-container.vac-view-in{
  opacity: 1;
  transform: translateY(0);
}

/* ── Floating Action Button (FAB) ───────────────────────────────────────── */
.vac-fab{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35), 0 2px 6px rgba(0,0,0,0.12);
  transition: all .18s cubic-bezier(.22,.9,.28,1);
}
.vac-fab i{ font-size: 16px; }
.vac-fab:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.45), 0 4px 8px rgba(0,0,0,0.15);
}
.vac-fab:active{
  transform: translateY(-1px) scale(0.97);
}

/* ── Skeleton-Loading ────────────────────────────────────────────────────── */
.vac-skeleton{
  padding: 0;
}
.vac-skeleton-hero{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.vac-sk-card{
  height: 76px;
  background: var(--surface);
  border-radius: 14px;
  animation: vac-sk-pulse 1.6s ease-in-out infinite;
}
.vac-skeleton-tabs{
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}
.vac-sk-tab{
  width: 120px;
  height: 34px;
  background: var(--surface);
  border-radius: 8px;
  animation: vac-sk-pulse 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
}
.vac-skeleton-list{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vac-sk-section{
  height: 30px;
  background: var(--surface);
  border-radius: 6px;
  width: 40%;
  animation: vac-sk-pulse 1.6s ease-in-out infinite;
}
.vac-sk-row{
  height: 60px;
  background: var(--surface);
  border-radius: 10px;
  animation: vac-sk-pulse 1.6s ease-in-out infinite;
}
.vac-sk-row:nth-child(3){ animation-delay: 0.1s; }
.vac-sk-row:nth-child(4){ animation-delay: 0.2s; }
.vac-sk-row:nth-child(5){ animation-delay: 0.3s; }

@keyframes vac-sk-pulse{
  0%, 100%{ opacity: 0.6; }
  50%    { opacity: 1; }
}

/* ── Keyboard-Shortcut-Help Modal ───────────────────────────────────────── */
.vac-shortcut-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22000;
  padding: 20px;
  animation: fadeIn .15s ease-out;
}
.vac-shortcut-modal{
  background: var(--white);
  border-radius: 14px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: slideUp .2s cubic-bezier(.22,.9,.28,1);
}
.vac-shortcut-hdr{
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.vac-shortcut-hdr h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-shortcut-hdr h3 i{ color: #1B7599; }
.vac-shortcut-hdr button{
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.vac-shortcut-hdr button:hover{ background: var(--hover); color: var(--text); }
.vac-shortcut-body{
  padding: 16px 20px;
}
.vac-sc-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px dashed var(--border);
}
.vac-sc-row:last-child{ border-bottom: none; }
.vac-sc-row kbd{
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
  min-width: 28px;
  text-align: center;
}
.vac-sc-row span{ flex: 1; color: var(--muted); }

/* ── Mobile-Detail Bottom-Sheet-Style ───────────────────────────────────── */
@media (max-width: 900px){
  .vac-by-user{
    position: relative;
    grid-template-columns: 1fr;
    height: calc(100vh - 320px);
    min-height: 500px;
  }

  /* Detail-Panel startet off-screen rechts, slide-in bei Auswahl */
  .vac-by-user .vac-bu-detail{
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.22,.9,.28,1);
    z-index: 2;
    background: var(--bg);
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
  }
  .vac-by-user.vac-by-user-show-detail .vac-bu-detail{
    transform: translateX(0);
  }

  .vac-by-user .vac-bu-list{
    border-right: none;
    max-height: none;
    height: 100%;
    border-bottom: none;
  }

  /* Back-Button nur auf Mobile sichtbar */
  .vac-bu-back-mobile{
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .vac-bu-back-mobile:hover{ background: var(--surface); }
  .vac-bu-back-mobile:active{ transform: scale(0.97); }

  /* Size-up interactive elements für Touch */
  .vac-bu-item{
    min-height: 56px;
    padding: 12px 14px;
  }
  .vac-tab-btn{ min-height: 44px; }
  .vac-filter-group select{ min-height: 40px; }
  .vac-cell{ min-height: 40px; }

  /* FAB etwas kleiner + angepasste Position */
  .vac-fab{
    right: 16px;
    bottom: 16px;
    padding: 12px 18px;
    font-size: 13px;
  }
}

/* Mobile/Tablet: Back-Button auf Desktop versteckt */
@media (min-width: 901px){
  .vac-bu-back-mobile{ display: none !important; }
}

/* ── Touch-Optimierung ──────────────────────────────────────────────────── */
@media (pointer: coarse){
  /* Alle Buttons + klickbaren Elemente mindestens 44px (Apple-Guideline) */
  .vac-tab-btn,
  .vac-view-btn,
  .vac-tl-scale-btn,
  .vac-bu-item,
  .vac-dept-chip-clickable,
  .vac-set-dept-btn{
    min-height: 44px;
  }
  .vac-set-dept-btn{
    min-width: 44px;
  }
  /* Active-State für Touch-Feedback */
  .vac-tab-btn:active,
  .vac-view-btn:active,
  .vac-ov-block:active,
  .vac-bu-item:active,
  .vac-dept-chip-clickable:active{
    transform: scale(0.97);
    transition: transform .08s;
  }
  /* Remove hover underlines auf Touch — sind verwirrend */
  .vac-ov-block:hover,
  .vac-bu-item:hover{
    transform: none;
  }
  /* Explizit Scroll-Momentum auf Mobile */
  .vac-tl-wrap,
  .vac-bu-list-items,
  .vac-content{
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* ── Reduziere Motion wenn User es will ───────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .vac-hero-card,
  .vac-view-container,
  .vac-fab,
  .vac-sk-card,
  .vac-hero-gauge-fg{
    transition: none !important;
    animation: none !important;
  }
}

/* ── Dark-Mode support ─────────────────────────────────────────────────── */
body.dark-theme .vac-hero,
body.theme-dark .vac-hero{
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
body.dark-theme .vac-hero-card,
body.theme-dark .vac-hero-card{
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Accessibility: Focus-Styles für Keyboard-Navigation ──────────────── */
.vac-tab-btn:focus-visible,
.vac-view-btn:focus-visible,
.vac-bu-item:focus-visible,
.vac-ov-block:focus-visible,
.vac-dept-chip-clickable:focus-visible,
.vac-filter-group select:focus-visible,
.vac-set-days-input:focus-visible,
.vac-set-dept-btn:focus-visible,
.vac-bu-search input:focus-visible,
.vac-fab:focus-visible{
  outline: 2px solid #1B7599;
  outline-offset: 2px;
}

/* ── Print-Styles (für Export-Vorbereitung) ────────────────────────────── */
@media print{
  .vac-tabs-bar, .vac-filter-bar, .vac-quick-chips, .vac-fab, .vac-hero{
    display: none !important;
  }
  .vac-shell{
    border: none;
    box-shadow: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HEUTE-PANEL (Übersicht)
   ══════════════════════════════════════════════════════════════════════════ */

.vac-today-panel{
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0 20px 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.vac-today-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27,117,153,0.04), transparent);
}
.vac-today-title{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.vac-today-title i{ color: #1B7599; font-size: 16px; }
.vac-today-kpi{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.vac-today-kpi-num{
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vac-today-kpi-total{
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.vac-today-kpi-lbl{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
  margin-left: 4px;
}

.vac-today-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  padding: 0;
}
.vac-today-col{
  padding: 16px 20px;
  border-right: 1px solid var(--border);
}
.vac-today-col:last-child{ border-right: none; }
.vac-today-col-hdr{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 12px;
}
.vac-today-col-absent .vac-today-col-hdr i{ color: #ef4444; }
.vac-today-col-returning .vac-today-col-hdr i{ color: #10b981; }
.vac-today-col-starting .vac-today-col-hdr i{ color: #f59e0b; }
.vac-today-col-hdr-ok{ color: #16a34a; }
.vac-today-col-hdr-ok i{ color: #16a34a !important; }
.vac-today-col-count{
  background: rgba(0,0,0,0.06);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: inherit;
  margin-left: auto;
}

.vac-today-avatars{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vac-today-avatar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 30px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.vac-today-avatar:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-color: var(--ta-color, #3b82f6);
}
.vac-today-avatar-img{
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ta-color, #3b82f6), color-mix(in srgb, var(--ta-color, #3b82f6) 70%, black));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.vac-today-avatar-badge{
  position: absolute;
  top: -3px;
  right: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ta-color, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  border: 2px solid var(--white);
}
.vac-today-avatar-info{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.vac-today-avatar-name{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.vac-today-avatar-ret{
  font-size: 10px;
  color: var(--muted);
  font-weight: 500;
}
.vac-today-avatar-more{
  padding: 8px 14px;
  background: var(--surface);
  border: 1px dashed var(--border);
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
}
.vac-today-avatar-more:hover{
  border-style: solid;
  border-color: #1B7599;
  color: #1B7599;
  background: rgba(27,117,153,0.04);
}

.vac-today-all-here{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 10px;
  color: #16a34a;
}
.vac-today-all-here i{ font-size: 28px; opacity: 0.6; }
.vac-today-all-here span{ font-size: 13px; font-weight: 600; }

.vac-today-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vac-today-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ti-color, #3b82f6);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s;
  width: 100%;
  text-align: left;
}
.vac-today-item:hover{
  background: var(--hover);
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.vac-today-item-info{ flex: 1; min-width: 0; }
.vac-today-item-name{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.vac-today-item-when{
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
}

@media (max-width: 680px){
  .vac-today-panel{ margin: 0 12px 12px; }
  .vac-today-col{
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
  }
  .vac-today-col:last-child{ border-bottom: none; }
  .vac-today-hdr{ flex-wrap: wrap; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TAB-BAR-ICONS: Search, Keyboard-Help
   ══════════════════════════════════════════════════════════════════════════ */

.vac-tab-actions{
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.vac-icon-btn{
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all .12s;
}
.vac-icon-btn:hover{
  background: var(--surface);
  color: #1B7599;
  border-color: #1B7599;
}
.vac-icon-btn-sm{ width: 32px; height: 32px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL SEARCH OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */

.vac-search-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 25000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
  animation: vacFadeIn .12s ease-out;
}
@keyframes vacFadeIn{ from{opacity:0;} to{opacity:1;} }

.vac-search-modal{
  width: 100%;
  max-width: 600px;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: vacSlideDown .18s cubic-bezier(.22,.9,.28,1);
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
@keyframes vacSlideDown{
  from{ transform: translateY(-20px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

.vac-search-input-wrap{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.vac-search-input-wrap i{
  color: var(--muted);
  font-size: 16px;
}
.vac-search-input-wrap input{
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--text);
  outline: none;
}
.vac-search-input-wrap input::placeholder{ color: var(--muted); }
.vac-search-input-wrap kbd{
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
}

.vac-search-results{
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.vac-search-section-lbl{
  padding: 10px 18px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.vac-search-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .08s;
}
.vac-search-item.vac-search-item-sel,
.vac-search-item:hover{
  background: rgba(27,117,153,0.08);
}
.vac-search-item i:not(.vac-search-dept-icon i){
  color: var(--muted);
  width: 28px;
  font-size: 12px;
  text-align: center;
}
.vac-search-item-info{ flex: 1; min-width: 0; }
.vac-search-item-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.vac-search-item-title mark{
  background: rgba(27,117,153,0.15);
  color: #1B7599;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 700;
}
.vac-search-item-sub{
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.vac-search-item kbd{
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
  margin-left: auto;
}
.vac-search-dept-icon{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.vac-search-empty{
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
}
.vac-search-empty i{
  font-size: 32px;
  opacity: 0.3;
  display: block;
  margin-bottom: 8px;
}
.vac-search-empty p{ margin: 0; font-size: 13px; }

.vac-search-footer{
  padding: 8px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}
.vac-search-footer kbd{
  padding: 1px 5px;
  background: var(--white);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  margin-right: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHORTCUTS-HILFE-OVERLAY
   ══════════════════════════════════════════════════════════════════════════ */

.vac-help-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vacFadeIn .12s ease-out;
}
.vac-help-modal{
  width: 100%;
  max-width: 560px;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.vac-help-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.vac-help-hdr h2{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vac-help-hdr h2 i{ color: #1B7599; }
.vac-help-hdr button{
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
}
.vac-help-hdr button:hover{ background: var(--surface); color: var(--text); }

.vac-help-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 22px;
}
.vac-help-grp h4{
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.vac-help-row{
  padding: 6px 0;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-help-row kbd{
  padding: 2px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-family: inherit;
  min-width: 24px;
  text-align: center;
}

@media (max-width: 560px){
  .vac-help-body{ grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE HEATMAP (GitHub-Style)
   ══════════════════════════════════════════════════════════════════════════ */

.vac-heatmap-wrap{
  padding: 20px;
}
.vac-heatmap-legend{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 11px;
  color: var(--muted);
}
.vac-hm-legend-lbl{ font-weight: 600; }
.vac-hm-legend-scale{
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.vac-hm-legend-scale .vac-hm-cell{
  width: 14px; height: 14px;
  border-radius: 3px;
}
.vac-hm-legend-hint{ font-size: 10px; opacity: 0.7; }

.vac-heatmap-grid-wrap{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  overflow-x: auto;
}

.vac-heatmap-months{
  display: grid;
  grid-template-columns: 32px repeat(53, 1fr);
  gap: 3px;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  min-width: 780px;
}
.vac-heatmap-month-lbl{
  grid-row: 1;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vac-heatmap-dayspacer{ grid-column: 1; }

.vac-heatmap-grid{
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0;
  min-width: 780px;
}
.vac-heatmap-daylabels{
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
  padding-right: 6px;
  font-weight: 600;
}
.vac-heatmap-daylabel{
  line-height: 14px;
  height: 14px;
  text-align: right;
}

.vac-heatmap-row{
  display: grid;
  grid-template-columns: repeat(53, 1fr);
  gap: 3px;
  grid-column: 2;
}
.vac-heatmap-row:not(:last-child){ margin-bottom: 3px; }

.vac-hm-cell{
  width: 100%;
  aspect-ratio: 1;
  max-height: 14px;
  min-height: 10px;
  border-radius: 3px;
  transition: all .12s;
}
.vac-hm-c0{ background: #ebedf0; }
.vac-hm-c1{ background: #9ae6b4; }
.vac-hm-c2{ background: #48bb78; }
.vac-hm-c3{ background: #2b8a4a; }
.vac-hm-c4{ background: #1c5d33; }

body.dark-theme .vac-hm-c0,
body.theme-dark .vac-hm-c0{ background: #22272e; }

.vac-hm-we{ background: #f5f5f5; }
.vac-hm-hol{
  background: #fef3c7;
  box-shadow: inset 0 0 0 1px #f59e0b;
}
.vac-hm-today{
  box-shadow: 0 0 0 2px #3b82f6;
  z-index: 1;
  position: relative;
}
.vac-hm-outside{
  background: transparent;
  pointer-events: none;
}
.vac-hm-cell:not(.vac-hm-outside):hover{
  transform: scale(1.4);
  z-index: 2;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.vac-hm-cell[data-count]:not([data-count="0"]){
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOVER-TOOLTIP (für Timeline-Zellen)
   ══════════════════════════════════════════════════════════════════════════ */

.vac-tooltip{
  position: fixed;
  background: rgba(17, 24, 39, 0.96);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
  z-index: 30000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  max-width: 280px;
  animation: vacFadeIn 0.1s ease-out;
}
.vac-tooltip-hdr{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vac-tooltip-hdr i{ font-size: 11px; }
.vac-tooltip-body{
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OPTIMIERUNGEN für alle Geräte
   ══════════════════════════════════════════════════════════════════════════ */

/* Tab-Bar bei schmalen Bildschirmen: nur Icons anzeigen */
@media (max-width: 820px){
  .vac-tabs-bar{
    padding: 8px 12px;
    gap: 8px;
  }
  .vac-tabs{ padding: 2px; }
  .vac-tab-btn{
    padding: 8px 10px;
    gap: 6px;
  }
  .vac-tab-lbl{ display: none; }
  .vac-tab-count{
    padding: 1px 6px;
    font-size: 10px;
  }
  .vac-kpis{ display: none; }
}

/* Noch schmaler: auch die Icon-Buttons ausblenden bzw. nur Search zeigen */
@media (max-width: 480px){
  .vac-icon-btn-sm{ display: none; }
  .vac-tab-actions{ margin-left: auto; }
}

/* Touch-Targets für Mobile: minimum 44px (Apple HIG) */
@media (pointer: coarse){
  .vac-tab-btn,
  .vac-bu-item,
  .vac-ov-block,
  .vac-bu-blk,
  .vac-set-dept-btn,
  .vac-today-avatar,
  .vac-today-item,
  .vac-dept-chip-clickable{
    min-height: 44px;
  }
  .vac-tl-cell{
    min-width: 36px;
    min-height: 40px;
  }
  .vac-dept-chip-clickable{
    padding: 8px 14px;
  }
  .vac-dept-chip-sm.vac-dept-chip-clickable{
    padding: 6px 10px;
  }
}

/* Nach-Mitarbeiter auf Mobile: Bottom-Sheet-Style */
@media (max-width: 900px){
  .vac-by-user{
    grid-template-columns: 1fr;
    height: auto;
  }
  .vac-bu-list{
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .vac-bu-list-items{
    max-height: 300px;
  }
  .vac-bu-detail{
    padding: 16px;
  }
}

@media (max-width: 600px){
  /* Search/Help Overlays passen sich an */
  .vac-search-overlay{
    padding-top: 40px;
  }
  .vac-search-modal{
    max-height: 85vh;
  }
  .vac-search-input-wrap input{ font-size: 14px; }
  .vac-search-footer{ flex-wrap: wrap; gap: 8px; font-size: 10px; }

  /* Settings-Tabelle wird zu Cards */
  .vac-set-table thead{ display: none; }
  .vac-set-table,
  .vac-set-table tbody,
  .vac-set-table tr{
    display: block;
    width: 100%;
  }
  .vac-set-table tr{
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 12px;
  }
  .vac-set-table td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
  }
  .vac-set-table td:last-child{ border-bottom: none; }
  .vac-set-table td:before{
    content: attr(data-label);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }
  .vac-set-td-right{ text-align: left; }

  /* Today-Panel Avatar-Info kompakter */
  .vac-today-avatar-info{ display: none; }
  .vac-today-avatar{ padding: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT-STYLESHEET
   ══════════════════════════════════════════════════════════════════════════ */

@media print{
  /* Verstecke alle Navigations-Elemente */
  .vac-tabs-bar,
  .vac-filter-bar,
  .vac-quick-chips,
  .vac-bu-blk-del,
  .vac-set-dept-actions,
  .vac-set-dept-add-card,
  .vac-tab-actions,
  .vac-search-overlay,
  .vac-help-overlay,
  .vac-tooltip,
  .vac-today-col-absent .vac-today-avatar-more,
  .btn, .vac-btn{
    display: none !important;
  }

  /* Container auf volle Breite */
  .vac-shell,
  .vac-content,
  .vac-overview{
    box-shadow: none !important;
    border: none !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Heute-Panel wird kompakter im Print */
  .vac-today-panel{
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Übersichts-Blöcke ohne Hover-Effekte */
  .vac-ov-block{
    break-inside: avoid;
    page-break-inside: avoid;
    cursor: default !important;
  }
  .vac-ov-block:hover{
    background: none !important;
  }

  /* Section-Header dunkel für Druck */
  .vac-ov-section-hdr{
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Alle Farben erhalten (Chips, Avatare) */
  *{
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Collapsed past-Sektion im Print ausklappen */
  .vac-ov-section-collapsed .vac-ov-list{
    display: flex !important;
  }

  /* Page-Setup */
  @page{
    margin: 15mm;
    size: A4;
  }

  body{
    background: white !important;
    color: black !important;
  }

  /* Konsistent Schwarz/dunkelgrau für Text */
  .vac-ov-user-name,
  .vac-ov-dates,
  .vac-ov-days strong{
    color: #000 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ABTEILUNGS-ZUWEISUNGS-MODAL
   ══════════════════════════════════════════════════════════════════════════ */

.vac-set-depts-wrap-cell{
  display: flex;
  align-items: center;
  gap: 8px;
}
.vac-set-depts-wrap-cell .vac-set-depts{
  flex: 1;
}
.vac-set-dept-edit-btn{
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all .12s;
  flex-shrink: 0;
}
.vac-set-dept-edit-btn:hover{
  background: var(--surface);
  color: #1B7599;
  border-color: #1B7599;
}

.vac-dept-edit-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vacFadeIn .15s ease-out;
}

.vac-dept-edit-modal{
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  animation: vacSlideDown .2s cubic-bezier(.22,.9,.28,1);
}

.vac-dept-edit-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(27,117,153,0.04), transparent);
}
.vac-dept-edit-user{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.vac-dept-edit-user h3{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.vac-dept-edit-user span{
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.vac-dept-edit-close{
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  font-size: 14px;
}
.vac-dept-edit-close:hover{ background: var(--surface); color: var(--text); }

.vac-dept-edit-hint{
  padding: 12px 22px;
  background: rgba(27,117,153,0.04);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.vac-dept-edit-hint i{ color: #1B7599; font-size: 13px; margin-top: 1px; }

.vac-dept-edit-chips{
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.vac-dept-edit-empty{
  padding: 40px 22px;
  text-align: center;
  color: var(--muted);
}
.vac-dept-edit-empty i{
  font-size: 32px;
  opacity: 0.4;
  display: block;
  margin-bottom: 10px;
}
.vac-dept-edit-empty p{ margin: 0; font-size: 13px; }

.vac-dept-check-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.vac-dept-check-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vac-dept-check-icon{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--dc-bg, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  transition: all .12s;
}
.vac-dept-check-name{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.vac-dept-check-mark{
  font-size: 11px;
  opacity: 0;
  color: var(--dc-bg, #3b82f6);
  transition: opacity .12s;
}
.vac-dept-check-chip:hover{
  border-color: var(--dc-bg, #3b82f6);
  background: rgba(27,117,153,0.02);
}
.vac-dept-check-chip.checked{
  border-color: var(--dc-bg, #3b82f6);
  background: color-mix(in srgb, var(--dc-bg, #3b82f6) 8%, var(--white));
}
.vac-dept-check-chip.checked .vac-dept-check-mark{ opacity: 1; }
.vac-dept-check-chip.checked .vac-dept-check-icon{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc-bg, #3b82f6) 30%, transparent);
}

.vac-dept-edit-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ══════════════════════════════════════════════════════════════════════════
   NACH MONAT — Mini-Kalender-Grid
   ══════════════════════════════════════════════════════════════════════════ */

.vac-mo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.vac-mo-card{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
  transition: all .15s;
}
.vac-mo-card-has{
  border-color: rgba(27,117,153,0.25);
  box-shadow: 0 1px 4px rgba(27,117,153,0.06);
}
.vac-mo-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.vac-mo-card-hdr{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vac-mo-card-name{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.vac-mo-card-count{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  padding: 1px 8px;
  border-radius: 10px;
}
.vac-mo-card-has .vac-mo-card-count{
  background: #1B7599;
  color: #fff;
}

.vac-mo-mini{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.vac-mo-mini-dh{
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 2px 0;
  text-transform: uppercase;
}
.vac-mo-mini-cell{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 4px;
  transition: all .08s;
  min-height: 22px;
  cursor: default;
}
.vac-mo-mini-empty{
  background: transparent;
  pointer-events: none;
}
.vac-mo-mini-we{
  color: #cbd5e1;
}
.vac-mo-mini-hol{
  background: #fef3c7;
  color: #b45309;
  font-weight: 700;
}
.vac-mo-mini-today{
  box-shadow: inset 0 0 0 2.5px #dc2626;
  color: #dc2626 !important;
  font-weight: 700;
  position: relative;
  z-index: 3;
}
/* Vergangene Abwesenheiten: Schraffur-Overlay */
.vac-mo-mini-past{
  position: relative;
}
.vac-mo-mini-past::before{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.2) 2px,
    rgba(255,255,255,0.2) 4px
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.vac-mo-mini-vacation{
  background: #1B7599;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-sick{
  background: #ef4444;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-compensation{
  background: #f59e0b;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-doctor{
  background: #a855f7;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-timeoff{
  background: #94a3b8;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-other{
  background: #64748b;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-parental{
  background: #f472b6;
  color: #fff !important;
  font-weight: 700;
}
.vac-mo-mini-unpaid{
  background: #94a3b8;
  color: #fff !important;
  font-weight: 700;
  opacity: 0.7;
}
/* Halbtag: diagonale Teilung 45° — obere linke Hälfte Farbe, untere rechte ausgeblendet */
.vac-mo-mini-halfday{
  position: relative;
  overflow: hidden;
}
.vac-mo-mini-halfday::after{
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, transparent 25%, var(--surface, #fff) 25%);
  opacity: 0.55;
  pointer-events: none;
}

.vac-mo-mini-cell:not(.vac-mo-mini-empty):hover{
  transform: scale(1.15);
  z-index: 1;
  position: relative;
}
.vac-mo-mini-cell.vac-mo-highlight{
  animation: vacHighlightPulse 0.6s ease 3;
  box-shadow: 0 0 0 2px #1B7599;
  border-radius: 4px;
  z-index: 2;
  position: relative;
}
@keyframes vacHighlightPulse{
  0%{box-shadow:0 0 0 2px #1B7599;transform:scale(1);}
  50%{box-shadow:0 0 0 4px rgba(27,117,153,0.4);transform:scale(1.2);}
  100%{box-shadow:0 0 0 2px #1B7599;transform:scale(1);}
}
/* Block klickbar machen */
.vac-bu-blk{cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;}
.vac-bu-blk:hover{transform:translateX(3px);box-shadow:0 2px 8px rgba(0,0,0,0.08);}

/* Summary unten */
.vac-mo-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: 8px;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.vac-mo-summary-item{
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vac-mo-summary-item i{ color: #1B7599; }
.vac-mo-summary-legend{
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
}
.vac-mo-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vac-mo-legend-dot{
  width: 10px; height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.vac-mo-legend-vac{ background: #1B7599; }
.vac-mo-legend-sick{ background: #ef4444; }
.vac-mo-legend-hol{ background: #fef3c7; border: 1px solid #f59e0b; }

@media (max-width: 520px){
  .vac-mo-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .vac-mo-card{ padding: 8px 10px 10px; }
  .vac-mo-summary{ flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN-ANPASSUNG AN SEMPERCONNECT — Primary-Farbe #1B7599
   ══════════════════════════════════════════════════════════════════════════ */
/* Die bisherigen Komponenten nutzten teilweise #3b82f6 (generisches Blau).
   SEMPERconnect-Primary ist #1B7599 (ein dunkleres Teal-Blau). Überschreiben
   zur einheitlichen Farbsprache. */

/* Übersicht: primary-Akzent statt generisches Blau */
.vac-bu-stat-primary{
  background: linear-gradient(135deg, #1B7599, #145a75) !important;
  border-color: #104a5f !important;
}
.vac-bu-detail-avatar,
.vac-ov-avatar,
.vac-bu-avatar,
.vac-today-avatar-img{
  background: linear-gradient(135deg, #1B7599, #145a75) !important;
}

/* Chips: wenn die Farbe dynamisch ist, nicht anfassen. Nur die Standard-
   "Urlaub"-Farbe auf SEMPERconnect-Primary ändern */
.vac-tl-cell.vac-tl-c-vacation{
  background: linear-gradient(135deg, #1B7599, #145a75) !important;
}
.vac-tl-year-cell.vac-tl-c-vacation{
  background: #1B7599 !important;
}

/* Monats-Balken-Fill (Fallback wenn nicht Mini-Kalender) */
.vac-mo-bar-fill{
  background: linear-gradient(90deg, #1B7599, #145a75) !important;
}
.vac-mo-date-chip{
  background: rgba(27,117,153,0.12) !important;
  color: #1B7599 !important;
  border-color: rgba(27,117,153,0.25) !important;
}

/* Block-Übersicht: --blk-color wird via JS gesetzt, aber für vacation auf 1B7599 */
.vac-ov-block[style*="--blk-color:#3b82f6"]{
  --blk-color: #1B7599 !important;
}
.vac-bu-blk[style*="--blk-color:#3b82f6"]{
  --blk-color: #1B7599 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER — KOMPLETT FLACH (keine Rahmen, kein Padding, volle Breite)
   ══════════════════════════════════════════════════════════════════════════ */

/* Volle Breite der verwaltung-section — KEINE max-width, KEIN zentrierter
   Margin, KEIN Card-Look. Der Inhalt füllt die komplette Fläche. */

.vac-page{
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}

/* Page-Header: nur eine Trennlinie unten, kein Rahmen drumherum, keine
   abgerundeten Ecken. Seitliches Padding für die Content-Ausrichtung. */
.vac-pagehdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white);
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  flex-wrap: nowrap;
  min-height: 0;
}

.vac-pagehdr-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}
.vac-pagehdr-title h2{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.vac-pagehdr-title h2 i{
  color: #1B7599;
  font-size: 16px;
}
.vac-pagehdr-sub{
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.vac-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.vac-year-nav{
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.vac-year-btn{
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  white-space: nowrap;
  transition: all .1s;
}
.vac-year-btn:hover{
  background: var(--white);
  color: #1B7599;
}
.vac-year-btn-today{
  color: #1B7599;
  font-weight: 700;
}

/* Content-Bereich: KEIN Rahmen, KEINE abgerundeten Ecken, kein Padding — der
   Inhalt füllt alles. Internes Padding wird von den einzelnen Views
   (Tabs, Filter, Listen, Settings) gesetzt. */
.vac-content{
  flex: 1;
  overflow: auto;
  background: var(--white);
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.vac-content .vac-tabs-bar{
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--white);
  border-top: none;
  border-radius: 0;
}

.vac-content .vac-filter-bar{
  border-radius: 0;
}

/* Mobile-Anpassungen — alles bleibt flach, nur kleinere Padding-Werte */
@media (max-width: 760px){
  .vac-pagehdr{
    padding: 12px 14px;
    gap: 8px;
  }
  .vac-pagehdr-title h2 span[data-tt]{ display: none; }
  .vac-pagehdr-title h2{ font-size: 16px; }
  .vac-pagehdr-sub{ font-size: 12px; }
  .vac-year-btn-today{ display: none; }
  .vac-toolbar .btn-primary span,
  .vac-toolbar .btn-outline span{ display: none; }
  .vac-toolbar .btn{ padding: 7px 10px; min-width: 0; }
}

@media (max-width: 480px){
  .vac-pagehdr-sub{ display: none; }
  .vac-year-btn{ padding: 6px 8px; min-width: 28px; }
  .vac-pagehdr{ padding: 10px 12px; }
}

/* Verwaltungs-Section darf beim Urlaubskalender KEIN Padding haben —
   wir nutzen die volle Fläche bis an die Kante */
.verwaltung-content:has(.vac-page),
.verwaltung-section:has(.vac-page){
  padding: 0 !important;
}
.verwaltung-section:has(.vac-page) > .vac-page,
.verwaltung-content:has(.vac-page) > .vac-page{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Alte vac-shell Regeln neutralisieren falls sie noch greifen */
.vac-shell{
  display: contents !important;
}
.vac-hdr{
  display: none !important;
}

/* verwaltung-section padding damit .vac-page volle Höhe kriegt */
.verwaltung-section:has(.vac-page){
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEUES ABSENCE-MODAL — Drag-Kalender, Live-Info, SEMPERconnect-Design
   ══════════════════════════════════════════════════════════════════════════ */

.vac-abs-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vacFadeIn .15s ease-out;
}

.vac-abs-modal{
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 880px;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: vacSlideDown .22s cubic-bezier(.22,.9,.28,1);
  overflow: hidden;
}

.vac-abs-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(27,117,153,0.05) 0%, transparent 100%);
}
.vac-abs-hdr-title{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.vac-abs-hdr-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1B7599, #145a75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.vac-abs-hdr h2{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.vac-abs-hdr p{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.vac-abs-close{
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all .12s;
}
.vac-abs-close:hover{
  background: var(--surface);
  color: var(--text);
}

.vac-abs-body{
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.1fr);
  gap: 0;
  flex: 1;
  overflow: hidden;
}

/* ── LINKE SPALTE: FORM ─────────────────────────────────────────────────── */
.vac-abs-form{
  padding: 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border);
}

.vac-abs-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vac-abs-field label{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vac-abs-optional{
  text-transform: none;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.7;
}

/* Custom Select Style (SEMPERconnect) */
.vac-abs-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  background-size: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.vac-abs-select:hover{
  border-color: #1B7599;
}
.vac-abs-select:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}

/* Custom Toggle (Halbtag) */
.vac-abs-toggle{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.vac-abs-toggle:hover{
  border-color: #1B7599;
  background: rgba(27,117,153,0.03);
}
.vac-abs-toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.vac-abs-toggle-box{
  width: 36px; height: 20px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  transition: all .15s;
  flex-shrink: 0;
}
.vac-abs-toggle-box::after{
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: all .18s cubic-bezier(.22,.9,.28,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.vac-abs-toggle input:checked + .vac-abs-toggle-box{
  background: #1B7599;
}
.vac-abs-toggle input:checked + .vac-abs-toggle-box::after{
  transform: translateX(16px);
}
.vac-abs-toggle-lbl{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Textarea */
#vac-abs-note{
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  resize: vertical;
  min-height: 50px;
  transition: all .15s;
}
#vac-abs-note:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}

/* Live-Info Preview */
.vac-abs-preview{
  background: linear-gradient(135deg, rgba(27,117,153,0.04) 0%, transparent 100%);
  border: 1px solid rgba(27,117,153,0.15);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.vac-abs-preview-empty{
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  justify-content: center;
  padding: 8px 0;
}
.vac-abs-preview-empty i{ opacity: 0.6; }

.vac-abs-preview-range{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(27,117,153,0.12);
}
.vac-abs-preview-range i{ color: #1B7599; }
.vac-abs-preview-range strong{
  font-weight: 700;
  color: var(--text);
}

.vac-abs-preview-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vac-abs-preview-stat{
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.vac-abs-preview-stat-primary{
  background: var(--s-color, #1B7599);
  border-color: var(--s-color, #1B7599);
  color: #fff;
}
.vac-abs-preview-num{
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vac-abs-preview-lbl{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  opacity: 0.85;
}
.vac-abs-preview-stat:not(.vac-abs-preview-stat-primary) .vac-abs-preview-num{
  color: var(--text);
}
.vac-abs-preview-stat:not(.vac-abs-preview-stat-primary) .vac-abs-preview-lbl{
  color: var(--muted);
}

.vac-abs-preview-breakdown{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(59, 130, 246, 0.15);
}
.vac-abs-preview-breakdown i{ color: #3b82f6; font-size: 12px; margin-top: 2px; }
.vac-abs-preview-breakdown strong{ color: var(--text); }

.vac-abs-preview-warn{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #b45309;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.12);
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.vac-abs-preview-warn i{ color: #d97706; font-size: 13px; margin-top: 2px; }
.vac-abs-preview-warn strong{ color: #78350f; }

/* Footer */
.vac-abs-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.vac-abs-footer .btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── RECHTE SPALTE: KALENDER ─────────────────────────────────────────────── */
.vac-abs-cal-wrap{
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(27,117,153,0.02) 0%, transparent 100%);
}

.vac-abs-cal-ctrl{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.vac-abs-cal-nav{
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all .12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vac-abs-cal-nav:hover{
  background: #1B7599;
  color: #fff;
  border-color: #1B7599;
}
.vac-abs-cal-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  flex: 1;
}

.vac-abs-cal{
  flex: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.vac-abs-cal-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.vac-abs-cal-dh{
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.vac-abs-cal-empty{
  aspect-ratio: 1;
}
.vac-abs-cal-day{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border-radius: 8px;
  cursor: pointer;
  transition: all .08s;
  border: 2px solid transparent;
  min-height: 34px;
  position: relative;
}
.vac-abs-cal-day:hover:not(.vac-abs-cal-sel){
  background: rgba(27,117,153,0.08);
  transform: scale(1.05);
}
.vac-abs-cal-day.vac-abs-cal-we{
  color: #94a3b8;
  background: #f8fafc;
}
.vac-abs-cal-day.vac-abs-cal-hol{
  background: #fef3c7;
  color: #b45309;
  font-weight: 700;
}
.vac-abs-cal-day.vac-abs-cal-today{
  border-color: #3b82f6;
}

/* Range-Highlighting */
.vac-abs-cal-day.vac-abs-cal-sel{
  background: rgba(27,117,153,0.15);
  color: #1B7599;
  border-radius: 0;
}
.vac-abs-cal-day.vac-abs-cal-sel-start{
  background: #1B7599 !important;
  color: #fff !important;
  border-radius: 8px 0 0 8px !important;
}
.vac-abs-cal-day.vac-abs-cal-sel-end{
  background: #1B7599 !important;
  color: #fff !important;
  border-radius: 0 8px 8px 0 !important;
}
.vac-abs-cal-day.vac-abs-cal-sel-single{
  background: #1B7599 !important;
  color: #fff !important;
  border-radius: 8px !important;
}
.vac-abs-cal-day.vac-abs-cal-sel-start.vac-abs-cal-sel-end{
  border-radius: 8px !important;
}

/* Legende */
.vac-abs-cal-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.vac-abs-cal-legend span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.vac-abs-legend-box{
  width: 12px; height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.vac-abs-legend-sel{ background: #1B7599; }
.vac-abs-legend-we{ background: #f8fafc; border: 1px solid var(--border); }
.vac-abs-legend-hol{ background: #fef3c7; border: 1px solid #f59e0b; }

/* Mobile: Form über Kalender statt Side-by-Side */
@media (max-width: 720px){
  .vac-abs-body{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow-y: auto;
  }
  .vac-abs-form{
    border-right: none;
    border-bottom: 1px solid var(--border);
    order: 2;   /* Form UNTER dem Kalender auf Mobile */
  }
  .vac-abs-cal-wrap{
    order: 1;
    padding: 16px;
  }
  .vac-abs-modal{ max-height: 98vh; }
}

@media (max-width: 480px){
  .vac-abs-overlay{ padding: 0; }
  .vac-abs-modal{
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
    height: 100%;
  }
  .vac-abs-form, .vac-abs-cal-wrap{ padding: 16px; }
  .vac-abs-hdr{ padding: 14px 16px; }
  .vac-abs-hdr h2{ font-size: 15px; }
  .vac-abs-hdr p{ font-size: 11px; }
  .vac-abs-hdr-icon{ width: 38px; height: 38px; font-size: 15px; }
}

/* Touch-Geräte: größere Cal-Tage */
@media (pointer: coarse){
  .vac-abs-cal-day{ min-height: 40px; font-size: 14px; }
  .vac-abs-cal-nav{ width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADD-DEPT-MODAL — Neue Abteilung anlegen (statt nativem prompt)
   ══════════════════════════════════════════════════════════════════════════ */

.vac-adddept-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vacFadeIn .15s ease-out;
}

.vac-adddept-modal{
  background: var(--white);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: vacSlideDown .2s cubic-bezier(.22,.9,.28,1);
  display: flex;
  flex-direction: column;
}

.vac-adddept-hdr{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(27,117,153,0.05), transparent);
}
.vac-adddept-hdr-ic{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1B7599, #145a75);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.vac-adddept-hdr h2{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.vac-adddept-hdr p{
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.vac-adddept-close{
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  margin-left: auto;
  flex-shrink: 0;
}
.vac-adddept-close:hover{ background: var(--surface); color: var(--text); }

.vac-adddept-body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vac-adddept-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vac-adddept-field label{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.vac-adddept-input{
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  transition: all .15s;
  font-family: inherit;
}
.vac-adddept-input::placeholder{ color: var(--muted); opacity: 0.7; }
.vac-adddept-input:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}

.vac-adddept-hint{
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 16px;
}
.vac-adddept-hint-ok{ color: #16a34a; }
.vac-adddept-hint-ok i{ color: #16a34a; }
.vac-adddept-hint-err{ color: #dc2626; }
.vac-adddept-hint-err i{ color: #dc2626; }

.vac-adddept-preview{
  background: var(--surface);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.vac-adddept-preview-lbl{
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#vac-adddept-chip-wrap .vac-dept-chip{
  padding: 6px 14px;
  font-size: 13px;
}
#vac-adddept-chip-wrap .vac-dept-chip i{
  font-size: 12px;
}

.vac-adddept-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.vac-adddept-footer .btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 520px){
  .vac-adddept-modal{ max-width: 100%; }
  .vac-adddept-hdr{ padding: 14px 16px; gap: 10px; }
  .vac-adddept-hdr-ic{ width: 36px; height: 36px; font-size: 14px; }
  .vac-adddept-body{ padding: 16px; }
  .vac-adddept-footer{ padding: 12px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER — RESPONSIVE POLISH
   Vereinheitlicht Paddings, macht alles touch-freundlich, verbessert
   die Navigation auf allen Geräten. Überschreibt bewusst vorige Regeln.
   ══════════════════════════════════════════════════════════════════════════ */

/* CSS-Custom-Properties für einheitliche Abstände, skalieren mit Viewport */
.vac-page{
  --vac-pad: 20px;
  --vac-pad-y: 16px;
}
@media (max-width: 900px){
  .vac-page{
    --vac-pad: 16px;
    --vac-pad-y: 12px;
  }
}
@media (max-width: 480px){
  .vac-page{
    --vac-pad: 12px;
    --vac-pad-y: 10px;
  }
}

/* ── Tabs-Bar: horizontal scrollbar auf engen Bildschirmen ────────────── */
.vac-tabs-bar{
  gap: 10px;
  padding: var(--vac-pad-y) var(--vac-pad);
  flex-wrap: nowrap;
  overflow: hidden;
}
.vac-tabs{
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.vac-tabs::-webkit-scrollbar{ display: none; }
.vac-tab-btn{
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* KPIs elegant: nicht mehr neben Tabs sondern ganz rechts */
.vac-kpis{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 820px){
  .vac-kpis{ display: none; }
}

/* Tab-Actions (Search + Keyboard-Help): touch-freundlich */
.vac-tab-actions{
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.vac-icon-btn{
  min-width: 36px;
  min-height: 36px;
}

/* ── Filter-Bar: Horizontal Scroll auf Mobile ─────────────────────────── */
.vac-filter-bar{
  padding: var(--vac-pad-y) var(--vac-pad);
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.vac-filter-bar::-webkit-scrollbar{ height: 4px; }
.vac-filter-bar::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 2px; }

.vac-filter-group{
  flex-shrink: 0;
  min-width: 140px;
}
.vac-filter-reset{
  flex-shrink: 0;
}

/* ── Quick-Chips: horizontaler Snap-Scroll ─────────────────────────────── */
.vac-quick-chips{
  padding: 10px var(--vac-pad);
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.vac-quick-chips::-webkit-scrollbar{ display: none; }
.vac-quick-chips > *{
  flex-shrink: 0;
  scroll-snap-align: start;
}
.vac-quick-chips-lbl{
  position: sticky;
  left: 0;
  background: var(--white);
  padding-right: 8px;
  z-index: 1;
}

/* ── Today-Panel: keinen Margin, volle Breite, als Banner gestalten ──── */
.vac-today-panel{
  margin: 0 !important;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(27,117,153,0.04) 0%, transparent 60%);
  padding: 0;
}
.vac-today-hdr{
  padding: 12px var(--vac-pad);
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.vac-today-grid{
  padding: 0;
  gap: 0;
}
.vac-today-col{
  padding: 14px var(--vac-pad);
  border-right: 1px solid var(--border);
}
.vac-today-col:last-child{ border-right: none; }

@media (max-width: 900px){
  .vac-today-grid{ grid-template-columns: 1fr; }
  .vac-today-col{
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px var(--vac-pad);
  }
  .vac-today-col:last-child{ border-bottom: none; }
}

/* ── Hero-Karten im Overview: Grid skaliert ────────────────────────────── */
.vac-hero{
  padding: var(--vac-pad-y) var(--vac-pad);
  gap: 12px;
}
@media (max-width: 720px){
  .vac-hero{ grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .vac-hero-card{ padding: 12px !important; }
  .vac-hero-gauge-ring{ width: 68px !important; height: 68px !important; min-width: 68px !important; }
  .vac-hero-gauge-num{ font-size: 15px !important; }
  .vac-hero-gauge-lbl{ font-size: 8px !important; }
}
@media (max-width: 480px){
  .vac-hero{ grid-template-columns: 1fr !important; }
}

/* ── Overview: Sections mit Gap und internem Padding ──────────────────── */
.vac-overview{
  padding: var(--vac-pad);
  gap: 14px;
}

.vac-ov-block{
  padding: 12px 14px;
}
@media (pointer: coarse){
  .vac-ov-block{
    padding: 14px;
    min-height: 64px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   NACH MITARBEITER — Mobile-Avatar-Strip
   Auf Mobile wird die Sidebar zu einer horizontalen, scrollbaren Avatar-
   Leiste oben. Der ausgewählte User ist highlighted. Details füllen den
   Rest des Bildschirms.
   ══════════════════════════════════════════════════════════════════════════ */
.vac-by-user{
  padding: 0;
  gap: 0;
  grid-template-columns: 320px 1fr;
  height: auto;
  min-height: 600px;
}
.vac-bu-list{
  border-right: 1px solid var(--border);
  max-height: none;
}
.vac-bu-detail{
  padding: var(--vac-pad);
}

@media (max-width: 900px){
  .vac-by-user{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
  }
  .vac-bu-list{
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  /* Search als sticky-Header */
  .vac-bu-list-search{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
  }
  /* User-Liste wird horizontale Avatar-Strip */
  .vac-bu-list-items{
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px var(--vac-pad);
    gap: 6px;
    max-height: none;
  }
  .vac-bu-list-items::-webkit-scrollbar{ display: none; }
  .vac-bu-item{
    flex-direction: column !important;
    align-items: center !important;
    min-width: 72px;
    max-width: 72px;
    padding: 8px !important;
    scroll-snap-align: center;
    text-align: center;
    gap: 4px !important;
    border-left: none !important;
    border-radius: 10px !important;
    background: transparent;
    border: 1.5px solid transparent !important;
    position: relative;
  }
  .vac-bu-item.active{
    background: rgba(27,117,153,0.08) !important;
    border-color: #1B7599 !important;
  }
  .vac-bu-item .vac-bu-item-info{
    width: 100%;
    min-width: 0;
  }
  .vac-bu-item-name{
    font-size: 11px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vac-bu-item-meta,
  .vac-bu-item-dept{ display: none !important; }
  .vac-bu-avatar{ width: 36px !important; height: 36px !important; font-size: 13px !important; }
}

/* Detail-Bereich auf Mobile */
@media (max-width: 900px){
  .vac-bu-detail{
    padding: var(--vac-pad);
  }
  .vac-bu-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .vac-bu-stat{ padding: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE — User-Column sticky auf Mobile, größere Zellen für Touch
   ══════════════════════════════════════════════════════════════════════════ */
.vac-timeline{ padding: var(--vac-pad); }

.vac-tl-tbl-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  border: 1px solid var(--border);
}

@media (max-width: 900px){
  .vac-tl-tbl-wrap{
    border: none;
    border-radius: 0;
    margin: 0 calc(-1 * var(--vac-pad));
  }
}

/* User-Column sticky — auf ALLEN Viewports sinnvoll */
.vac-tl-tbl{
  border-collapse: separate;
  border-spacing: 0;
}
.vac-tl-ucell{
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--white);
  box-shadow: 1px 0 0 var(--border);
  min-width: 140px;
  max-width: 180px;
}
.vac-tl-tbl thead .vac-tl-ucell{
  background: var(--surface);
  z-index: 3;
}

@media (pointer: coarse){
  .vac-tl-cell{
    min-width: 32px;
    min-height: 38px;
  }
}

/* Timeline-Control-Bar: schön gestaffelt auf Mobile */
.vac-tl-ctrl{
  padding-bottom: 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.vac-tl-scale{
  flex-shrink: 0;
}
.vac-tl-scale-btn{
  padding: 8px 12px;
  font-size: 12px;
}
@media (max-width: 520px){
  .vac-tl-scale-btn span,
  .vac-tl-scale-btn{ font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SETTINGS — Touch-optimiert
   ══════════════════════════════════════════════════════════════════════════ */
.vac-settings{
  padding: var(--vac-pad);
  gap: 16px;
}
.vac-set-section{
  border-radius: 12px;
}
.vac-set-hdr{
  padding: 14px var(--vac-pad);
}
.vac-set-depts-wrap{
  padding: 14px var(--vac-pad);
}
.vac-set-defaults{
  padding: 14px var(--vac-pad);
}

.vac-set-table thead th,
.vac-set-table tbody td{
  padding: 10px 14px;
}

@media (max-width: 600px){
  .vac-set-table thead{ display: none; }
  .vac-set-table tr{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "user days"
      "depts depts"
      "taken remaining";
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--white);
  }
  .vac-set-table td{
    padding: 0;
    display: flex;
    align-items: center;
  }
  .vac-set-table td:nth-child(1){ grid-area: user; }
  .vac-set-table td:nth-child(2){ grid-area: depts; }
  .vac-set-table td:nth-child(3){
    grid-area: days;
    justify-content: flex-end;
  }
  .vac-set-table td:nth-child(4){
    grid-area: taken;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    font-size: 12px;
    color: var(--muted);
  }
  .vac-set-table td:nth-child(4)::before{
    content: attr(data-label)":";
    margin-right: 6px;
    font-weight: 600;
  }
  .vac-set-table td:nth-child(5){
    grid-area: remaining;
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    font-size: 12px;
    justify-content: flex-end;
  }
  .vac-set-table td:nth-child(5)::before{
    content: attr(data-label)":";
    margin-right: 6px;
    font-weight: 600;
    color: var(--muted);
  }
  .vac-set-table tr:hover{ background: var(--white); }
}

/* Depts-Grid passt sich smart an */
.vac-set-depts-grid{
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
@media (max-width: 600px){
  .vac-set-depts-grid{ grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH: min 44px Targets überall
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse){
  .vac-tab-btn{ padding: 10px 14px; min-height: 44px; }
  .vac-year-btn{ min-width: 40px; min-height: 40px; }
  .vac-icon-btn{ min-width: 44px; min-height: 44px; }
  .vac-dept-chip-clickable{
    padding: 8px 14px;
    min-height: 36px;
  }
  .vac-dept-chip-sm.vac-dept-chip-clickable{
    padding: 6px 12px;
    min-height: 32px;
  }
  .vac-set-dept-btn{ min-width: 36px; min-height: 36px; }
  .vac-ov-block{ min-height: 64px; }
  .vac-bu-blk{ min-height: 54px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYBOARD-NAVIGATION: Focus-Visible überall
   ══════════════════════════════════════════════════════════════════════════ */
.vac-tab-btn:focus-visible,
.vac-year-btn:focus-visible,
.vac-icon-btn:focus-visible,
.vac-tab-btn:focus-visible,
.vac-dept-chip-clickable:focus-visible,
.vac-bu-item:focus-visible,
.vac-ov-block:focus-visible,
.vac-today-item:focus-visible,
.vac-today-avatar:focus-visible{
  outline: 2px solid #1B7599;
  outline-offset: 2px;
}

.vac-abs-select:focus-visible,
#vac-abs-note:focus-visible{
  outline: none;   /* hat eigenen Shadow-Ring */
}

/* ══════════════════════════════════════════════════════════════════════════
   SMOOTH-SCROLL + TRANSITIONS
   ══════════════════════════════════════════════════════════════════════════ */
.vac-content{ scroll-behavior: smooth; }
.vac-bu-list-items,
.vac-quick-chips,
.vac-filter-bar,
.vac-tl-tbl-wrap{ scroll-behavior: smooth; }

/* Tab-Switch: sanfte Animation wenn Views wechseln */
.vac-view-container{
  animation: vacViewFade .2s ease-out;
}
@keyframes vacViewFade{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE: FAB-Button unten rechts für schnellen Zugriff
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px){
  .vac-fab{
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 100 !important;
    width: 56px;
    height: 56px;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: 0 8px 24px rgba(27,117,153,0.4) !important;
  }
  .vac-fab-label{ display: none !important; }
  .vac-fab i{ font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY-STATES: Zentriert, sauber
   ══════════════════════════════════════════════════════════════════════════ */
.vac-ov-empty,
.vac-loading,
.vac-error{
  padding: 60px var(--vac-pad);
  text-align: center;
}
.vac-ov-empty i,
.vac-loading i,
.vac-error i{
  font-size: 36px;
  opacity: 0.3;
  display: block;
  margin-bottom: 12px;
}
.vac-ov-empty h3{
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text);
}
.vac-ov-empty p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAFIE-FEINSCHLIFF — klarere Hierarchie
   ══════════════════════════════════════════════════════════════════════════ */
.vac-bu-detail h2{
  font-size: 20px;
  letter-spacing: -0.3px;
}
.vac-today-title span,
.vac-set-hdr h3{
  letter-spacing: -0.2px;
}
.vac-abs-preview-num{
  letter-spacing: -0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET-SPEZIFISCH (760-1023px) — Zwischenoptimierung
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 761px) and (max-width: 1023px){
  /* Tabs bleiben mit Text aber kleiner */
  .vac-tab-btn{
    padding: 8px 12px;
    font-size: 12px;
  }
  /* Hero 3-Spaltig */
  .vac-hero{ grid-template-columns: repeat(3, 1fr); }
  /* Nach-Mitarbeiter Liste schmaler */
  .vac-by-user{ grid-template-columns: 260px 1fr; }
  /* Filter-Selects kompakter */
  .vac-filter-group{ min-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT-OPTIMIERUNG auf den flachen Stil angepasst
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  .vac-pagehdr{
    border: none !important;
    padding: 10px 0 !important;
  }
  .vac-page{
    padding: 15mm !important;
  }
  .vac-fab{ display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   URLAUBSKALENDER — FINAL OVERRIDE (kommt ganz zum Schluss, höchste Prio)
   FLACH, KEIN BORDER, KEIN PADDING, VOLLE HÖHE
   Scroll-Container ist .vac-page — damit pagehdr + tabs-bar gleichzeitig
   sticky oben kleben und die Hero beim Scrollen schrumpfen kann.
   ══════════════════════════════════════════════════════════════════════════ */

/* Parent-Chain muss flex+min-height=0 haben damit vac-page stretched */
.verwaltung-section:has(.vac-page),
.verwaltung-content:has(.vac-page){
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 100%;
  max-width: none !important;
  overflow: hidden !important;   /* Scroll passiert in vac-page */
}

.vac-page{
  flex: 1 1 auto !important;
  display: block !important;        /* nicht mehr flex — damit sticky greift */
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;      /* ← Scroll-Container */
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  position: relative;
}

/* Page-Header sticky ganz oben */
.vac-pagehdr{
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  background: var(--white) !important;
  flex: none !important;
}

/* Content ist KEIN scroll-container mehr */
.vac-content{
  flex: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
}

/* Tab-Bar im Content: sticky direkt UNTER der pagehdr */
.vac-content .vac-tabs-bar,
.vac-tabs-bar{
  position: sticky !important;
  top: 57px !important;             /* pagehdr-höhe */
  z-index: 29 !important;
  background: var(--surface) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
@media (max-width: 760px){
  .vac-content .vac-tabs-bar,
  .vac-tabs-bar{
    top: 49px !important;
  }
}
@media (max-width: 480px){
  .vac-content .vac-tabs-bar,
  .vac-tabs-bar{
    top: 45px !important;
  }
}

/* Filter-Bar nach der Tab-Bar — auch sticky? Nein, die darf mitscrollen */
.vac-content .vac-filter-bar{
  position: relative;
  z-index: 5;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO-SHRINK — beim Scrollen kompakter werden
   Die .vac-hero bleibt oben im Scroll-Flow (nicht sticky), schrumpft aber
   smooth zu einer kompakten Leiste wenn .vac-page nach unten gescrollt
   wird. Die Klasse .vac-hero-compact wird via JS getoggled.
   ══════════════════════════════════════════════════════════════════════════ */

.vac-hero{
  transition:
    padding .25s cubic-bezier(.22,.9,.28,1),
    gap .25s cubic-bezier(.22,.9,.28,1),
    grid-template-columns .25s cubic-bezier(.22,.9,.28,1);
}

.vac-hero-card{
  transition:
    padding .22s cubic-bezier(.22,.9,.28,1),
    background .22s,
    border-color .22s;
  overflow: hidden;
}

.vac-hero-ic,
.vac-hero-gauge-ring,
.vac-hero-gauge-svg,
.vac-hero-num,
.vac-hero-sub,
.vac-hero-lbl,
.vac-hero-avatars,
.vac-hero-empty-msg,
.vac-hero-gauge-num,
.vac-hero-gauge-lbl,
.vac-hero-num-tot,
.vac-hero-av{
  transition: all .22s cubic-bezier(.22,.9,.28,1);
}

/* COMPACT-MODUS: drastische Höhenreduktion */
.vac-hero.vac-hero-compact{
  padding: 6px var(--vac-pad) !important;
  gap: 6px !important;
}
.vac-hero-compact .vac-hero-card{
  padding: 6px 10px !important;
  min-height: 36px;
}
.vac-hero-compact .vac-hero-ic{
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}
.vac-hero-compact .vac-hero-gauge-ring{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
}
.vac-hero-compact .vac-hero-gauge-num{
  font-size: 10px !important;
  font-weight: 700;
}
.vac-hero-compact .vac-hero-gauge-lbl{
  display: none !important;
}
.vac-hero-compact .vac-hero-num{
  font-size: 15px !important;
  line-height: 1 !important;
}
.vac-hero-compact .vac-hero-num-tot{
  font-size: 11px !important;
}
.vac-hero-compact .vac-hero-lbl{
  font-size: 10px !important;
  margin-bottom: 1px !important;
}
/* Alles "zusätzliche" verstecken im Compact-Modus */
.vac-hero-compact .vac-hero-sub,
.vac-hero-compact .vac-hero-avatars,
.vac-hero-compact .vac-hero-empty-msg{
  display: none !important;
}
/* Body enger layouten */
.vac-hero-compact .vac-hero-body{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.vac-hero-compact .vac-hero-body .vac-hero-lbl{
  order: 2;
  flex: 1;
  margin: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vac-hero-compact .vac-hero-body .vac-hero-num{
  order: 1;
  flex-shrink: 0;
}

/* Pointer auf compact-Hero damit klar wird: Klick scrollt nach oben */
.vac-hero-compact{ cursor: pointer; }
.vac-hero-compact .vac-hero-card:hover{
  background: var(--hover, rgba(27,117,153,0.04)) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FINAL-FINAL OVERRIDE — stellt sicher dass keine alte Version durchschlägt
   ══════════════════════════════════════════════════════════════════════════ */

/* FAB komplett weg — war redundant zum "Urlaub anlegen"-Button in der Toolbar */
.vac-fab,
.vac-fab-label,
button.vac-fab{
  display: none !important;
  visibility: hidden !important;
}

/* .vac-content GARANTIERT flach — alle möglichen Eigenschaften überschrieben */
html body .vac-page .vac-content,
.vac-page > .vac-content,
#vac-content,
div.vac-content,
.vac-content{
  background: var(--white) !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  display: block !important;
  min-height: 0 !important;
  gap: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NACH-MITARBEITER DETAIL — nutzt volle verfügbare Breite
   ══════════════════════════════════════════════════════════════════════════ */

.vac-bu-detail{
  padding: 20px !important;
}
.vac-bu-detail-inner{
  max-width: none !important;   /* war 900px — jetzt volle Breite */
  width: 100%;
}

/* Mehr Spalten im Monats-Grid auf breiten Screens — bessere Nutzung der Fläche.
   minmax kleiner machen damit bei 1800px Breite 7-8 Kalender reinpassen. */
.vac-bu-detail-inner .vac-mo-grid,
.vac-bu-section .vac-mo-grid{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

/* Stats-Grid ebenfalls voll nutzen — 4 Karten nebeneinander auf Desktop */
.vac-bu-detail-inner .vac-bu-stats{
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px){
  .vac-bu-detail{
    padding: 16px !important;
  }
  .vac-bu-detail-inner .vac-bu-stats{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px){
  .vac-bu-detail{
    padding: 12px !important;
  }
  .vac-bu-detail-inner .vac-mo-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY-OFFSETS — per CSS-Variablen (werden in JS mit echten Höhen gefüllt)
   ══════════════════════════════════════════════════════════════════════════ */

.vac-page{
  --vac-hdr-h: 57px;      /* wird in JS via offsetHeight überschrieben */
  --vac-tabs-h: 52px;
}

/* Tabs-Bar nutzt die echte pagehdr-Höhe */
.vac-content .vac-tabs-bar,
.vac-tabs-bar{
  top: var(--vac-hdr-h, 57px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MITARBEITER-LISTE STICKY + intern scrollbar
   ══════════════════════════════════════════════════════════════════════════ */

/* Grid muss align-items: start haben damit sticky greift (Default ist stretch
   was das sticky-Verhalten bricht). */
.vac-by-user{
  align-items: start !important;
}

/* Die Liste stickt unter pagehdr + tabs-bar.
   WICHTIG: die Liste selbst scrollt NICHT — sie hat max-height + flex-col.
   Stattdessen scrollen die .vac-bu-list-items intern. Das Such-Feld bleibt
   dadurch automatisch oben (erstes flex-item mit flex:none). */
.vac-bu-list{
  position: sticky !important;
  top: calc(var(--vac-hdr-h, 57px) + var(--vac-tabs-h, 52px)) !important;
  align-self: start !important;
  max-height: calc(100vh - var(--vac-hdr-h, 57px) - var(--vac-tabs-h, 52px)) !important;
  overflow: hidden !important;     /* NICHT auf der Liste scrollen */
  display: flex !important;
  flex-direction: column !important;
  z-index: 10;
  background: var(--white);
  min-height: 0;
}

/* Such-Feld bleibt oben fix (flex:none = nimmt nur Inhalts-Höhe) */
.vac-bu-list > .vac-bu-search{
  flex: 0 0 auto;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

/* Items scrollen INTERN — volles flex:1 mit overflow-y: auto */
.vac-bu-list > .vac-bu-list-items{
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  min-height: 0 !important;
}

/* Mobile: Liste ist horizontale Avatar-Strip — andere Regeln */
@media (max-width: 900px){
  .vac-bu-list{
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    border-bottom: 1px solid var(--border);
  }
  .vac-bu-list > .vac-bu-list-items{
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TAB-BAR COMPACT — dünner sobald gescrollt wird
   ══════════════════════════════════════════════════════════════════════════ */

.vac-tabs-bar{
  transition:
    padding .2s cubic-bezier(.22,.9,.28,1),
    gap .2s cubic-bezier(.22,.9,.28,1);
}

.vac-tab-btn,
.vac-tab-count,
.vac-kpis,
.vac-kpi,
.vac-icon-btn,
.vac-tabs{
  transition: all .2s cubic-bezier(.22,.9,.28,1);
}

/* COMPACT-MODUS: Tab-Bar wird dünner */
.vac-tabs-bar.vac-tabs-bar-compact{
  padding: 4px var(--vac-pad) !important;
  gap: 8px !important;
}
.vac-tabs-bar-compact .vac-tab-btn{
  padding: 5px 10px !important;
  font-size: 12px !important;
  min-height: 30px !important;
  gap: 6px !important;
}
.vac-tabs-bar-compact .vac-tab-btn i{
  font-size: 11px;
}
.vac-tabs-bar-compact .vac-tab-count{
  padding: 1px 5px !important;
  font-size: 10px !important;
  min-width: 16px !important;
}
.vac-tabs-bar-compact .vac-tabs{
  padding: 2px !important;
}
.vac-tabs-bar-compact .vac-kpis{
  gap: 8px !important;
  font-size: 11px !important;
}
.vac-tabs-bar-compact .vac-kpi{
  gap: 4px !important;
}
.vac-tabs-bar-compact .vac-kpi i{
  font-size: 10px;
}
.vac-tabs-bar-compact .vac-icon-btn{
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
}
.vac-tabs-bar-compact .vac-icon-btn-sm{
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  min-height: 26px !important;
}

/* Touch-Geräte: nicht so extrem schrumpfen */
@media (pointer: coarse){
  .vac-tabs-bar-compact .vac-tab-btn{
    min-height: 36px !important;
    padding: 7px 10px !important;
  }
  .vac-tabs-bar-compact .vac-icon-btn{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STICKY-FIX — .vac-bu-detail darf NICHT intern scrollen.
   Scroll muss auf .vac-page passieren, sonst bricht sticky für die Liste.
   ══════════════════════════════════════════════════════════════════════════ */

.vac-by-user,
.vac-content .vac-by-user{
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.vac-bu-detail,
.vac-by-user .vac-bu-detail{
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* .vac-bu-detail-inner darf volle Breite nutzen — alle möglichen Max-Width
   Constraints überschreiben, egal wo sie definiert sind. */
.vac-bu-detail > .vac-bu-detail-inner,
.vac-by-user .vac-bu-detail .vac-bu-detail-inner,
.vac-bu-detail-inner{
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Falls die Children darin noch max-width haben */
.vac-bu-detail-inner > *{
  max-width: 100% !important;
}
.vac-bu-detail-inner .vac-bu-stats,
.vac-bu-detail-inner .vac-mo-grid,
.vac-bu-detail-inner .vac-bu-blocks{
  width: 100% !important;
  max-width: none !important;
}

/* Mobile: altes Slide-in-Pattern deaktivieren.
   Layout ist stattdessen: horizontale Avatar-Strip oben, Detail darunter.
   Beide scrollen in .vac-page, damit sticky funktioniert. */
@media (max-width: 900px){
  .vac-by-user,
  .vac-content .vac-by-user{
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .vac-by-user .vac-bu-detail,
  .vac-by-user.vac-by-user-show-detail .vac-bu-detail{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .vac-by-user .vac-bu-list{
    height: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CRITICAL FIX: .vac-view-container darf KEIN transform haben
   Transform auf Vorfahren bricht position:sticky für die Kinder.
   Darum wird die .vac-bu-list nicht sticky. Wir nutzen nur opacity
   für die Tab-Switch-Animation, kein translateY mehr.
   ══════════════════════════════════════════════════════════════════════════ */

.vac-view-container,
.vac-view-container.vac-view-in,
#vac-content .vac-view-container{
  transform: none !important;
  animation: none !important;
  transition: opacity .22s ease-out !important;
  /* Flex muss auch weg — sonst hat die .vac-by-user nicht ihre eigene Höhe
     und sticky funktioniert nicht zuverlässig */
  display: block !important;
  flex: none !important;
  min-height: 0 !important;
  opacity: 1 !important;
}

/* Opacity-only Fade für Tab-Wechsel — kein Transform */
@keyframes vacViewFadeOpacity{
  from { opacity: 0; }
  to   { opacity: 1; }
}
.vac-view-container{
  animation: vacViewFadeOpacity .2s ease-out !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   .vac-bu-detail-inner GARANTIERT volle Breite
   Mit extremer Spezifität + allen möglichen Blockern überschrieben
   ══════════════════════════════════════════════════════════════════════════ */

html body .vac-page .vac-content .vac-view-container .vac-by-user .vac-bu-detail,
.vac-by-user > .vac-bu-detail,
.vac-bu-detail{
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box !important;
  display: block !important;
}

html body .vac-page .vac-content .vac-view-container .vac-by-user .vac-bu-detail .vac-bu-detail-inner,
.vac-by-user .vac-bu-detail-inner,
.vac-bu-detail > .vac-bu-detail-inner,
.vac-bu-detail-inner{
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FAB-BUTTON absolut weg — auch wenn noch im DOM
   ══════════════════════════════════════════════════════════════════════════ */
html body .vac-fab,
button.vac-fab,
.vac-page .vac-fab,
.vac-fab{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   STUNDEN-UMLAGERN: Excel-Stil Tabelle
   ══════════════════════════════════════════════════════════════════════════ */

.tta-shift-xlsx-wrap{
  max-height: 42vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--white);
}

.tta-shift-xlsx{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.tta-shift-xlsx thead{
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}

.tta-shift-xlsx th{
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tta-shift-xlsx tbody td{
  padding: 7px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}

.tta-shift-row:hover{
  background: rgba(27,117,153,0.04);
}

.tta-shift-row-we td:not(:first-child){
  background: rgba(198,40,40,0.03);
  color: #c62828;
}

.tta-shift-row-hol td{
  background: rgba(245,158,11,0.05);
}

.tta-shift-row-future td{
  opacity: 0.5;
}

.tta-shift-row-src{
  background: rgba(27,117,153,0.12) !important;
  box-shadow: inset 3px 0 0 #1B7599;
}

.tta-shift-row-dst{
  background: rgba(22,163,74,0.12) !important;
  box-shadow: inset 3px 0 0 #16a34a;
}

.tta-shift-row-src.tta-shift-row-dst{
  background: linear-gradient(90deg, rgba(27,117,153,0.15) 0%, rgba(22,163,74,0.15) 100%) !important;
}

.tta-shift-day{
  font-weight: 700;
  color: var(--text);
}

.tta-shift-mono{
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 11.5px;
}

.tta-shift-diff-pos{ color: #16a34a; font-weight: 600; }
.tta-shift-diff-neg{ color: #dc2626; font-weight: 600; }
.tta-shift-diff-zero{ color: var(--muted); }

.tta-shift-pick-col{
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

.tta-shift-pick{
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all .1s;
  padding: 0;
}

.tta-shift-pick-src{ color: #1B7599; }
.tta-shift-pick-src:hover{
  background: #1B7599;
  color: #fff;
  border-color: #1B7599;
}

.tta-shift-pick-dst{ color: #16a34a; }
.tta-shift-pick-dst:hover{
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.tta-shift-controls{
  border-top: 2px solid var(--border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile: Tabelle scrollt horizontal wenn nötig */
@media (max-width: 720px){
  .tta-shift-xlsx th:nth-child(3),
  .tta-shift-xlsx th:nth-child(4),
  .tta-shift-xlsx td:nth-child(3),
  .tta-shift-xlsx td:nth-child(4){
    display: none;   /* Start/Ende auf Mobile ausblenden */
  }
  .tta-shift-xlsx-wrap{
    max-height: 35vh;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNGS-VERWALTUNG — Flache Struktur (wie Urlaubskalender)
   Pagehdr + Tabs-Bar sticky, Content scrollt in .tta-page.
   ══════════════════════════════════════════════════════════════════════════ */

/* Parent muss Scroll zulassen */
.verwaltung-section:has(.tta-page),
.verwaltung-content:has(.tta-page){
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 100%;
  max-width: none !important;
  overflow: hidden !important;
}

.tta-page{
  --tta-hdr-h: 57px;
  --tta-tabs-h: 52px;
  flex: 1 1 auto !important;
  display: block !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  position: relative;
}

/* Page-Header sticky top:0 */
.tta-pagehdr{
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tta-pagehdr-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}
.tta-pagehdr-title h2{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.tta-pagehdr-title h2 i{
  color: #1B7599;
  font-size: 16px;
}
.tta-pagehdr-sub{
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.tta-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tta-period-nav{
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.tta-period-btn{
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  min-width: 32px;
  white-space: nowrap;
}
.tta-period-btn:hover{ background: var(--white); color: #1B7599; }
.tta-period-btn-today{ color: #1B7599; font-weight: 700; }

/* Content-Area — kein Border, kein Padding, füllt alles */
.tta-content{
  background: var(--white);
  padding: 0;
  margin: 0;
  display: block;
  min-height: 0;
}

/* Tabs-Bar sticky direkt unter pagehdr */
.tta-tabs-bar{
  position: sticky !important;
  top: var(--tta-hdr-h, 57px) !important;
  z-index: 29 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow-x: auto;
  scrollbar-width: none;
}
.tta-tabs-bar::-webkit-scrollbar{ display: none; }

.tta-tabs{
  display: inline-flex;
  background: var(--white);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  flex: 0 1 auto;
}
.tta-tab-btn{
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .12s;
  white-space: nowrap;
}
.tta-tab-btn:hover{ background: rgba(27,117,153,.08); color: var(--text); }
.tta-tab-btn.active{
  background: #1B7599;
  color: #fff;
  box-shadow: 0 1px 3px rgba(27,117,153,.25);
}

.tta-view-container{
  opacity: 1;
  animation: ttaViewFade .2s ease-out;
}
@keyframes ttaViewFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   NACH MITARBEITER — 2-Spalten Layout mit sticky Liste
   ═══════════════════════════════════════════════════════════════════ */
.tta-by-user{
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 0 !important;
  align-items: start !important;
  min-height: 400px;
}

.tta-bu-list{
  position: sticky !important;
  top: calc(var(--tta-hdr-h, 57px) + var(--tta-tabs-h, 52px)) !important;
  align-self: start !important;
  max-height: calc(100vh - var(--tta-hdr-h, 57px) - var(--tta-tabs-h, 52px)) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--white);
  border-right: 1px solid var(--border);
  z-index: 10;
}

.tta-bu-search{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  flex: 0 0 auto;
}
.tta-bu-search i{ color: var(--muted); font-size: 12px; }
.tta-bu-search input{
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  width: 0;
}

.tta-bu-list-items{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.tta-bu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all .1s;
}
.tta-bu-item:hover{ background: rgba(27,117,153,0.04); }
.tta-bu-item.active{
  background: rgba(27,117,153,0.08);
  border-left-color: #1B7599;
}

.tta-bu-avatar{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B7599, #145a75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tta-bu-info{ flex: 1; min-width: 0; }
.tta-bu-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tta-bu-meta{
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

/* Detail rechts */
.tta-bu-detail{
  padding: 20px;
  overflow: visible;
  min-height: 400px;
}
.tta-bu-detail-inner{
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tta-bu-detail-hdr{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tta-bu-detail-avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1B7599, #145a75);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tta-bu-detail-info{ flex: 1; min-width: 200px; }
.tta-bu-detail-info h2{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.3px;
}
.tta-bu-detail-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.tta-bu-detail-actions{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Stats-Cards */
.tta-bu-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.tta-bu-stat{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.tta-bu-stat-num{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}
.tta-bu-stat-lbl{
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  margin-top: 5px;
}
.tta-bu-stat-primary{ background: rgba(27,117,153,0.08); border-color: rgba(27,117,153,0.25); }
.tta-bu-stat-primary .tta-bu-stat-num{ color: #1B7599; }
.tta-bu-stat.tta-diff-positive .tta-bu-stat-num{ color: #16a34a; }
.tta-bu-stat.tta-diff-negative .tta-bu-stat-num{ color: #dc2626; }

/* Team-List (Tab 1: Übersicht) — Padding für den Grid */
.tta-team-list{
  padding: 20px;
}

/* Mobile */
@media (max-width: 900px){
  .tta-by-user{
    grid-template-columns: 1fr !important;
  }
  .tta-bu-list{
    position: static !important;
    max-height: none !important;
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tta-bu-list-items{
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    padding: 8px;
    gap: 6px;
  }
  .tta-bu-item{
    flex-direction: column !important;
    min-width: 80px;
    max-width: 80px;
    padding: 8px !important;
    text-align: center;
    border-left: none !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
  }
  .tta-bu-item.active{ border-color: #1B7599 !important; }
  .tta-bu-meta{ display: none; }
  .tta-bu-search{ position: sticky; left: 0; flex: 0 0 200px; }
}

@media (max-width: 760px){
  .tta-pagehdr{ padding: 12px 14px; gap: 8px; }
  .tta-pagehdr-title h2 span[data-tt]{ display: none; }
  .tta-pagehdr-title h2{ font-size: 16px; }
  .tta-pagehdr-sub{ display: none; }
  .tta-period-btn-today{ display: none; }
  .tta-toolbar .btn span{ display: none; }
  .tta-tabs-bar{ padding: 8px 14px; }
  .tta-tab-btn .tta-tab-lbl{ display: none; }
  .tta-team-list{ padding: 14px; }
  .tta-bu-detail{ padding: 14px; }
}

/* Country-Preset-Select im Settings-Modal — zeigt Flag-Emojis klarer */
.tta-set-country-select{
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.tta-set-country-select:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}

/* Overview-Tab Padding Desktop */
@media (min-width: 901px){
  .tta-bu-detail-hdr{
    flex-wrap: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIXES 2025-04 — Empty-State zentriert, Pagehdr + KPIs shrink
   ══════════════════════════════════════════════════════════════════════════ */

/* 2. Empty-State „Filter anpassen oder Urlaub anlegen" mittig */
.vac-ov-empty{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 60px 24px !important;
  min-height: 280px;
}
.vac-ov-empty i{
  font-size: 44px !important;
  opacity: 0.25 !important;
  margin-bottom: 14px;
  display: block;
}
.vac-ov-empty h3{
  margin: 0 0 6px !important;
  font-size: 17px !important;
  color: var(--text);
  font-weight: 700;
}
.vac-ov-empty p{
  margin: 0 auto !important;
  font-size: 13px;
  color: var(--muted);
  max-width: 340px;
  line-height: 1.5;
}

/* 3. vac-kpis kompakter wenn sticky — der umgebende Container muss auch shrinken */
.vac-tabs-bar{
  transition:
    padding .2s cubic-bezier(.22,.9,.28,1),
    gap .2s cubic-bezier(.22,.9,.28,1),
    min-height .2s cubic-bezier(.22,.9,.28,1);
}
.vac-kpis,
.vac-kpi,
.vac-tab-actions,
.vac-icon-btn,
.vac-kpi i{
  transition: all .2s cubic-bezier(.22,.9,.28,1);
}

.vac-tabs-bar.vac-tabs-bar-compact .vac-kpis{
  gap: 6px !important;
  font-size: 10.5px !important;
}
.vac-tabs-bar.vac-tabs-bar-compact .vac-kpi{
  padding: 3px 9px !important;
  gap: 4px !important;
  line-height: 1 !important;
  font-size: 10.5px !important;
  font-weight: 600;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  white-space: nowrap;
}
.vac-tabs-bar.vac-tabs-bar-compact .vac-kpi i{
  font-size: 9px !important;
  opacity: 0.7;
}

/* 4. Pagehdr schrumpft beim Scrollen — weniger Padding, kleinere Typografie */
.vac-pagehdr{
  transition:
    padding .2s cubic-bezier(.22,.9,.28,1);
}
.vac-pagehdr-title h2,
.vac-pagehdr-title h2 i,
.vac-pagehdr-sub,
.vac-year-btn,
.vac-year-nav{
  transition: all .2s cubic-bezier(.22,.9,.28,1);
}

/* .vac-pagehdr-compact wird per JS getoggled wenn scrollTop > 10 */
.vac-pagehdr.vac-pagehdr-compact{
  padding: 7px 20px !important;
}
.vac-pagehdr-compact .vac-pagehdr-title h2{
  font-size: 15px !important;
}
.vac-pagehdr-compact .vac-pagehdr-title h2 i{
  font-size: 13px !important;
}
.vac-pagehdr-compact .vac-pagehdr-sub{
  font-size: 11px !important;
}
.vac-pagehdr-compact .vac-year-btn{
  padding: 4px 8px !important;
  font-size: 11px !important;
  min-width: 26px !important;
}
.vac-pagehdr-compact .vac-year-nav{
  padding: 1px !important;
}
.vac-pagehdr-compact .vac-toolbar .btn{
  padding: 5px 10px !important;
  font-size: 12px !important;
}
.vac-pagehdr-compact .vac-toolbar .btn i{
  font-size: 11px !important;
}

/* Mobile: Pagehdr wird schon recht kompakt — compact noch enger */
@media (max-width: 760px){
  .vac-pagehdr.vac-pagehdr-compact{
    padding: 6px 14px !important;
  }
  .vac-pagehdr-compact .vac-pagehdr-title h2{
    font-size: 13px !important;
  }
}

/* Kalender im Absence-Modal: Hinweis dass monatsübergreifend möglich */
.vac-abs-cal-legend{
  padding-top: 4px;
}

/* Hinweis im Absence-Modal — monatsübergreifend-Möglichkeit */
.vac-abs-cal-tip{
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(27,117,153,0.06);
  border-left: 3px solid #1B7599;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.vac-abs-cal-tip i{
  color: #f59e0b;
  margin-top: 1px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — Team-Liste zentriert + Period-Header
   Die Übersicht nutzt volle Breite bis max 1400px und zentriert sich darüber.
   ══════════════════════════════════════════════════════════════════════════ */

.tta-team-list{
  padding: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.tta-team-period-hdr{
  padding: 10px 14px;
  background: rgba(27,117,153,0.06);
  border-left: 3px solid #1B7599;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tta-team-period-hdr i{ color: #1B7599; }

.tta-team-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  width: 100%;
}

/* Period-Badge pro User-Card (Monat/Zeitraum) */
.tta-user-period{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  margin-bottom: 2px;
  padding: 3px 8px;
  background: var(--surface);
  border-radius: 4px;
  align-self: flex-start;
}
.tta-user-period i{ font-size: 10px; opacity: 0.7; }

/* Abteilungs-Chips in User-Card */
.tta-user-depts{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  margin-bottom: 8px;
}
.tta-user-depts .vac-dept-chip{ font-size: 10.5px; }

.tta-dept-chip-inline{
  display: inline-flex;
  padding: 2px 8px;
  background: rgba(27,117,153,0.08);
  color: #1B7599;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
}

/* Nachtstunden-Badge (Stat in User-Card) */
.tta-stat-night{
  background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08)) !important;
}
.tta-stat-night .tta-stat-lbl::before{
  content: "🌙 ";
  margin-right: 2px;
}

/* Empty-State Übersicht */
.tta-team-empty{
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto;
}
.tta-team-empty i{
  font-size: 44px;
  opacity: 0.25;
  display: block;
  margin-bottom: 14px;
}
.tta-team-empty h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.tta-team-empty p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════
   NACHTSTUNDEN-PILL — im Excel-Shift + in Stundenzettel-Liste
   ══════════════════════════════════════════════════════════════════════════ */

.tta-shift-night-col{
  min-width: 140px;
}

.tta-shift-night-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.10));
  border: 1px solid rgba(99,102,241,0.3);
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #4338ca;
  white-space: nowrap;
  line-height: 1.2;
}
.tta-shift-night-pill i{
  color: #6366f1;
  font-size: 10px;
}
.tta-shift-night-pill .tta-night-h{
  font-variant-numeric: tabular-nums;
}
.tta-shift-night-pill .tta-night-bonus{
  padding: 1px 5px;
  background: rgba(99,102,241,0.15);
  border-radius: 3px;
  font-size: 9.5px;
  color: #4338ca;
  font-weight: 700;
}

.tta-shift-row-night{
  position: relative;
}
.tta-shift-row-night::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

/* ══════════════════════════════════════════════════════════════════════════
   STUNDENZETTEL-LISTE bei "Nach Mitarbeiter"
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-section{
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.tta-bu-section-hdr{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tta-bu-section-hdr h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tta-bu-section-hdr h3 i{ color: #1B7599; font-size: 13px; }
.tta-bu-section-sub{
  font-size: 12px;
  color: var(--muted);
}

.tta-bu-entries-summary{
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  flex-wrap: wrap;
  align-items: center;
}
.tta-bu-entries-summary i{
  color: #1B7599;
  margin-right: 3px;
  font-size: 11px;
}

.tta-bu-entries-wrap{
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}

.tta-bu-entries-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tta-bu-entries-table thead{
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tta-bu-entries-table th{
  padding: 8px 10px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tta-bu-entries-table tbody td{
  padding: 7px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  white-space: nowrap;
}
.tta-bu-entries-table tbody tr:hover{
  background: rgba(27,117,153,0.03);
}

.tta-bu-entry-day{
  font-weight: 700;
  color: var(--text);
}

.tta-bu-entry-we td:not(:first-child){
  background: rgba(198,40,40,0.03);
}
.tta-bu-entry-hol td:not(:first-child){
  background: rgba(245,158,11,0.05);
}
.tta-bu-entry-missing{
  background: rgba(220,38,38,0.04);
}
.tta-bu-entry-missing td{
  color: #dc2626;
}

.tta-bu-entry-note{
  color: var(--muted);
  font-size: 11px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Abteilungs-Chips im Detail-Header */
.tta-bu-detail-depts{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Mobile: Stundenzettel-Tabelle horizontal scrollbar */
@media (max-width: 760px){
  .tta-bu-entries-wrap{ overflow-x: auto; }
  .tta-bu-entries-table th:nth-child(5),
  .tta-bu-entries-table td:nth-child(5),
  .tta-bu-entries-table th:nth-child(10),
  .tta-bu-entries-table td:nth-child(10){ display: none; }

  .tta-team-grid{
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STUNDENZETTEL-TABELLE: Klickbare Zeilen + Summen-Footer
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-entry-clickable{
  cursor: pointer;
  transition: background .1s;
}
.tta-bu-entry-clickable:hover{
  background: rgba(27,117,153,0.06) !important;
}
.tta-bu-entry-clickable:hover td:first-child{
  box-shadow: inset 3px 0 0 #1B7599;
}

.tta-bu-entries-foot{
  background: var(--surface);
  border-top: 2px solid var(--border);
}
.tta-bu-entries-foot td{
  padding: 10px !important;
  font-size: 12.5px !important;
  border-bottom: none !important;
}
.tta-bu-entries-foot .tta-shift-mono strong{
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG (USER) — Scroll-Fix + Monats-Kachel-Ansicht
   Der Container braucht display:flex damit flex:1 im tt-day-list greift und
   die Monatsansicht scrollbar wird.
   ══════════════════════════════════════════════════════════════════════════ */

#view-timetrack{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Scroll-Architektur (wie im Fahrtenbuch):
   .tt-page (flex column, KEIN overflow, min-height:0)
     ├─ .tt-pagehdr   (flex:0 0 auto — fix oben)
     ├─ .tt-tabs-bar  (flex:0 0 auto — fix darunter)
     └─ #tt-day-list  (flex:1 1 auto, overflow-y:auto — scrollt intern)

   Früher: .tt-page war selbst der Scroll-Container. Das funktioniert in den
   meisten Browsern, aber bei bestimmten Flex-Kombinationen + sticky-Headern
   klemmt der Scroll (besonders auf Android/iOS). Die Fahrtenbuch-Variante
   mit Scroll auf dem Inhalt-Child ist robuster.
   ═══════════════════════════════════════════════════════════════════════════ */
/* tt-day-list = EINZIGER Scroll-Container im Timetrack-View.
   - flex:1 1 auto + min-height:0 → nimmt den freien Platz ein und schrumpft
   - overflow-y:auto → vertikales Scrollen drinnen
   - min-height:0 auf Flex-Children ist Pflicht, ohne das wäre das implicit
     min-height = content-height und der Container könnte nicht kleiner
     werden als der Inhalt → kein Scroll.
   Spezifität bewusst erhöht (#view-timetrack #tt-day-list) damit diese
   Regel jede andere tt-day-list-Regel in der CSS-Datei gewinnt. */
#view-timetrack #tt-day-list,
#tt-day-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px;
}

/* Monats-Grid (Kacheln wie Fahrtenbuch) */
.tt-month-grid-wrap{
  max-width: 1100px;
  margin: 0 auto;
}

.tt-month-grid-head{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.tt-mg-dh{
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  padding: 6px 0;
}
.tt-mg-dh-we{ color: #c62828; }

.tt-month-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.tt-mg-empty{
  aspect-ratio: 1 / 1;
}

.tt-mg-cell{
  aspect-ratio: 1 / 1;
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 6px;
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all .12s;
}

.tt-mg-clickable{ cursor: pointer; }
.tt-mg-clickable:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  border-color: #1B7599;
}

.tt-mg-daynum{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.tt-mg-lbl{
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tt-mg-lbl i{ font-size: 10px; }

.tt-mg-sub{
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
  line-height: 1.2;
}

.tt-mg-time{
  font-size: 10.5px;
  font-family: 'SF Mono', Monaco, monospace;
  font-weight: 600;
  color: #16a34a;
  line-height: 1.3;
  margin-top: 2px;
}

.tt-mg-hours{
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tt-mg-hours-target{
  color: #E88B00;
  font-weight: 600;
  font-size: 10px;
}

/* Typ-Varianten */
.tt-mg-work{
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03));
  border-color: rgba(34,197,94,0.35);
}

.tt-mg-vacation{
  background: linear-gradient(135deg, rgba(27,117,153,0.08), rgba(27,117,153,0.03));
  border-color: rgba(27,117,153,0.35);
  color: #1B7599;
}
.tt-mg-vacation .tt-mg-daynum,
.tt-mg-vacation .tt-mg-lbl{ color: #1B7599; }

.tt-mg-sick{
  background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(168,85,247,0.03));
  border-color: rgba(168,85,247,0.35);
}
.tt-mg-sick .tt-mg-daynum,
.tt-mg-sick .tt-mg-lbl{ color: #a855f7; }

.tt-mg-holiday{
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.03));
  border-color: rgba(245,158,11,0.4);
}
.tt-mg-holiday .tt-mg-daynum,
.tt-mg-holiday .tt-mg-lbl{ color: #E88B00; }

.tt-mg-timeoff{
  background: linear-gradient(135deg, rgba(148,163,184,0.08), rgba(148,163,184,0.03));
  border-color: rgba(148,163,184,0.35);
}
.tt-mg-timeoff .tt-mg-lbl{ color: #64748b; }

.tt-mg-missing{
  background: repeating-linear-gradient(135deg,
    rgba(232,139,0,0.08) 0,
    rgba(232,139,0,0.08) 6px,
    rgba(232,139,0,0.04) 6px,
    rgba(232,139,0,0.04) 12px);
  border-color: rgba(232,139,0,0.5);
}
.tt-mg-missing .tt-mg-lbl{ color: #E88B00; }

.tt-mg-weekend{
  background: repeating-linear-gradient(135deg,
    rgba(198,40,40,0.04) 0,
    rgba(198,40,40,0.04) 6px,
    rgba(198,40,40,0.02) 6px,
    rgba(198,40,40,0.02) 12px);
  border-color: rgba(198,40,40,0.25);
}
.tt-mg-weekend .tt-mg-daynum,
.tt-mg-weekend .tt-mg-lbl{ color: #c62828; }

.tt-mg-future{
  background: transparent;
  border-color: #e5e7eb;
  opacity: 0.5;
}
.tt-mg-future .tt-mg-daynum{ color: #94a3b8; }

.tt-mg-today{
  box-shadow: 0 0 0 2px var(--blue), 0 2px 6px rgba(27,117,153,0.15);
  border-color: var(--blue);
}

.tt-mg-is-weekend .tt-mg-daynum::after{
  content: '';
}

/* Nacht-Badge oben rechts */
.tt-mg-night{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(99,102,241,0.4);
}

/* Mobile: kleinere Kacheln, kompaktere Labels */
@media (max-width: 760px){
  .tt-month-grid{ gap: 3px; }
  .tt-month-grid-head{ gap: 3px; }
  .tt-mg-cell{
    min-height: 62px;
    padding: 4px 3px;
    border-radius: 6px;
  }
  .tt-mg-daynum{
    font-size: 11px;
    margin-bottom: 2px;
  }
  .tt-mg-lbl{
    font-size: 9px;
    gap: 2px;
  }
  .tt-mg-lbl i{ display: none; }
  .tt-mg-time{
    font-size: 9px;
    line-height: 1.2;
  }
  .tt-mg-hours{
    font-size: 10.5px;
  }
  .tt-mg-hours-target{
    font-size: 8.5px;
  }
  .tt-mg-sub{ display: none; }
  .tt-mg-night{
    width: 14px;
    height: 14px;
    top: 2px;
    right: 2px;
    font-size: 7px;
  }
  .tt-mg-dh{
    font-size: 9px;
    padding: 3px 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STUNDEN-UMLAGERN: Excel-Look (1:1 wie exportTimetrackXLSX Sheet)
   Zweizeiliger Header mit gruppierten Spalten, Zebra-Striping, gerahmte Zellen
   ══════════════════════════════════════════════════════════════════════════ */

.tta-shift-xlsx-v2{
  font-family: 'Segoe UI', 'Arial', sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #C8D4DC;
}

.tta-shift-xlsx-v2 thead th{
  background: #1B7599;
  color: #fff !important;
  padding: 6px 4px !important;
  text-align: center !important;
  font-weight: 700;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
  border: 1px solid #145a75;
  border-bottom: 2px solid #145a75;
  white-space: nowrap;
  vertical-align: middle;
}

.tta-shift-xlsx-v2 .tta-xlsx-hdr-group{
  background: #145a75;
  font-size: 10.5px;
  border-bottom: 1px solid #C8D4DC;
}

.tta-shift-xlsx-v2 .tta-xlsx-sub{
  font-size: 9px;
  font-weight: 400;
  opacity: 0.85;
}

.tta-shift-xlsx-v2 .tta-xlsx-hdr-day{
  background: #1B7599;
  min-width: 50px;
}
.tta-shift-xlsx-v2 .tta-xlsx-hdr-status{
  min-width: 65px;
}
.tta-shift-xlsx-v2 .tta-xlsx-hdr-night{
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  min-width: 95px;
  border-color: #4f46e5 !important;
}
.tta-shift-xlsx-v2 .tta-xlsx-hdr-night i{
  margin-right: 3px;
}
.tta-shift-xlsx-v2 .tta-xlsx-hdr-action{
  min-width: 75px;
  background: #374151 !important;
  border-color: #1f2937 !important;
}

.tta-shift-xlsx-v2 tbody td{
  padding: 5px 6px !important;
  text-align: center !important;
  border: 1px solid #e0e7eb !important;
  background: var(--white);
}
.tta-shift-xlsx-v2 .tta-xlsx-day{
  font-weight: 700 !important;
  text-align: left !important;
  padding-left: 8px !important;
  background: #F0F7FA !important;
  position: sticky;
  left: 0;
  z-index: 1;
}
.tta-shift-xlsx-v2 .tta-xlsx-mono{
  font-family: 'SF Mono', 'Courier New', monospace;
}
.tta-shift-xlsx-v2 .tta-xlsx-target{
  color: #64748b;
}
.tta-shift-xlsx-v2 .tta-xlsx-muted{
  color: #94a3b8;
}
.tta-shift-xlsx-v2 .tta-xlsx-ot50{
  color: #E88B00;
  font-weight: 600;
}
.tta-shift-xlsx-v2 .tta-xlsx-ot100{
  color: #dc2626;
  font-weight: 600;
}
.tta-shift-xlsx-v2 .tta-xlsx-status{
  font-weight: 600;
  font-size: 10px;
}

/* Zebra-Striping (jede 2. Zeile) */
.tta-shift-xlsx-v2 .tta-shift-row-zebra td{
  background: #F7FAFC !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-zebra .tta-xlsx-day{
  background: #E6F0F5 !important;
}

/* Farb-Highlighting für besondere Tage (wie im XLSX Export) */
.tta-shift-xlsx-v2 .tta-shift-row-we td{
  background: #FFF5F5 !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-we .tta-xlsx-day{
  background: #FFE3E3 !important;
  color: #c62828;
}
.tta-shift-xlsx-v2 .tta-shift-row-hol td{
  background: #F3E8FF !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-hol .tta-xlsx-day{
  background: #E9D5FF !important;
  color: #7e22ce;
}

/* Quelle / Ziel markiert — VIEL stärker sichtbar als vorher */
.tta-shift-xlsx-v2 .tta-shift-row-src td,
.tta-shift-xlsx-v2 .tta-shift-row-src .tta-xlsx-day{
  background: rgba(27,117,153,0.18) !important;
  box-shadow: inset 0 0 0 2px #1B7599;
  position: relative;
}
.tta-shift-xlsx-v2 .tta-shift-row-src .tta-xlsx-day::after{
  content: '↗ QUELLE';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #1B7599;
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #1B7599;
}

.tta-shift-xlsx-v2 .tta-shift-row-dst td,
.tta-shift-xlsx-v2 .tta-shift-row-dst .tta-xlsx-day{
  background: rgba(22,163,74,0.18) !important;
  box-shadow: inset 0 0 0 2px #16a34a;
  position: relative;
}
.tta-shift-xlsx-v2 .tta-shift-row-dst .tta-xlsx-day::after{
  content: '↙ ZIEL';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #16a34a;
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #16a34a;
}

.tta-shift-xlsx-v2 .tta-shift-row-src.tta-shift-row-dst td{
  background: linear-gradient(90deg, rgba(27,117,153,0.15) 0%, rgba(22,163,74,0.15) 100%) !important;
  box-shadow: inset 0 0 0 2px #8b5cf6;
}

/* Pick-Buttons: deutlich größer + farbig wenn ausgewählt */
.tta-shift-xlsx-v2 .tta-shift-pick-col{
  display: flex !important;
  gap: 3px;
  justify-content: center;
  padding: 4px !important;
}
.tta-shift-xlsx-v2 .tta-shift-pick{
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  transition: all .1s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tta-shift-xlsx-v2 .tta-shift-pick-src{
  color: #1B7599;
  border-color: #1B7599;
}
.tta-shift-xlsx-v2 .tta-shift-pick-src:hover{
  background: #1B7599;
  color: #fff;
}
.tta-shift-xlsx-v2 .tta-shift-pick-dst{
  color: #16a34a;
  border-color: #16a34a;
}
.tta-shift-xlsx-v2 .tta-shift-pick-dst:hover{
  background: #16a34a;
  color: #fff;
}

/* Wenn Zeile aktiv als Quelle/Ziel: Button ist deutlich gefüllt */
.tta-shift-row-src .tta-shift-pick-src{
  background: #1B7599 !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(27,117,153,0.4);
  animation: ttaPickPulse 1.5s ease-in-out infinite;
}
.tta-shift-row-dst .tta-shift-pick-dst{
  background: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 2px 4px rgba(22,163,74,0.4);
  animation: ttaPickPulse 1.5s ease-in-out infinite;
}

@keyframes ttaPickPulse{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.tta-shift-xlsx-wrap{
  overflow-x: auto;
  overflow-y: auto;
  max-height: 55vh;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
}

/* Mobile: Tabelle scrollt horizontal */
@media (max-width: 1000px){
  .tta-shift-xlsx-wrap{
    max-height: 45vh;
  }
  .tta-shift-xlsx-v2{
    min-width: 950px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG (USER) — Pagehdr-Design analog Urlaubskalender / Verwaltung
   Flache Struktur: Pagehdr sticky top, Tabs-Bar sticky darunter, Content scrollt.
   ══════════════════════════════════════════════════════════════════════════ */

/* View-Container selbst zum Flex-Column damit .tt-page sich aufspannt */
#view-timetrack{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  height: 100%;
  padding: 0 !important;
}

.tt-page{
  --tt-hdr-h: 60px;
  --tt-tabs-h: 52px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  background: var(--white);
  /* KEIN overflow hier — der interne Scroll läuft über #tt-day-list
     (wie im Fahrtenbuch). Ohne das bekäme man nested scroll-areas und
     der Scroll würde je nach Browser-State nicht zuverlässig greifen. */
  overflow: hidden;
  scroll-behavior: smooth;
  position: relative;
}

/* Pagehdr — sticky oben */
.tt-pagehdr{
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: padding .2s cubic-bezier(.22,.9,.28,1);
  flex-wrap: wrap;
}

.tt-pagehdr-title{
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.tt-pagehdr-title h2{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: font-size .2s cubic-bezier(.22,.9,.28,1);
}
.tt-pagehdr-title h2 i{
  color: #1B7599;
  font-size: 16px;
  transition: font-size .2s cubic-bezier(.22,.9,.28,1);
}
.tt-pagehdr-sub{
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
  transition: font-size .2s cubic-bezier(.22,.9,.28,1);
}

.tt-user-bar{
  flex: 1 1 auto;
  min-width: 0;
}
.tt-user-bar:empty{ display: none; }

.tt-toolbar{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Week/Month-Toggle — segmentiertes Pill-Design */
.tt-view-toggle{
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.tt-view-toggle-btn{
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: all .12s;
}
.tt-view-toggle-btn:hover{ color: var(--text); }
.tt-view-toggle-btn.tt-view-active{
  background: #1B7599;
  color: #fff;
  box-shadow: 0 1px 3px rgba(27,117,153,0.25);
}

/* Period-Nav — gleiches Pill-Design wie Urlaubskalender */
.tt-period-nav{
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}
.tt-period-btn{
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  min-width: 32px;
  white-space: nowrap;
}
.tt-period-btn:hover{ background: var(--white); color: #1B7599; }
.tt-period-btn-today{ color: #1B7599; font-weight: 700; }

/* Compact-Modus: Pagehdr schrumpft beim Scrollen */
.tt-pagehdr.tt-pagehdr-compact{
  padding: 7px 20px;
}
.tt-pagehdr-compact .tt-pagehdr-title h2{ font-size: 15px; }
.tt-pagehdr-compact .tt-pagehdr-title h2 i{ font-size: 13px; }
.tt-pagehdr-compact .tt-pagehdr-sub{ font-size: 11px; }
.tt-pagehdr-compact .tt-view-toggle-btn,
.tt-pagehdr-compact .tt-period-btn{
  padding: 4px 9px;
  font-size: 11px;
}

/* Tabs-Bar mit KPIs (sticky unter Pagehdr) */
.tt-tabs-bar{
  position: sticky;
  top: var(--tt-hdr-h, 60px);
  z-index: 29;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  flex-wrap: wrap;
  transition: padding .2s cubic-bezier(.22,.9,.28,1), gap .2s cubic-bezier(.22,.9,.28,1);
}

.tt-kpis{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  transition: gap .2s cubic-bezier(.22,.9,.28,1);
}

.tt-kpi{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  transition: all .2s cubic-bezier(.22,.9,.28,1);
}
.tt-kpi i{
  font-size: 10px;
  color: var(--muted);
}
.tt-kpi strong{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tt-kpi-positive{ border-color: rgba(22,163,74,0.35); background: rgba(22,163,74,0.05); }
.tt-kpi-positive strong{ color: #16a34a; }
.tt-kpi-positive i{ color: #16a34a; }
.tt-kpi-negative{ border-color: rgba(220,38,38,0.35); background: rgba(220,38,38,0.05); }
.tt-kpi-negative strong{ color: #dc2626; }
.tt-kpi-negative i{ color: #dc2626; }
.tt-kpi-neutral{ background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.3); }
.tt-kpi-neutral strong{ color: #E88B00; }
.tt-kpi-neutral i{ color: #E88B00; }
.tt-kpi-ot50{ background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #E88B00; }
.tt-kpi-ot100{ background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.3); color: #dc2626; }
.tt-kpi-vac{ color: #1B7599; border-color: rgba(27,117,153,0.3); }
.tt-kpi-sick{ color: #a855f7; border-color: rgba(168,85,247,0.3); }
.tt-kpi-missing{
  background: rgba(232,139,0,0.08);
  border-color: rgba(232,139,0,0.35);
  color: #E88B00;
}
.tt-kpi-missing i{ color: #E88B00; }

/* Compact-Mode für KPIs */
.tt-tabs-bar-compact{
  padding: 6px 20px;
}
.tt-tabs-bar-compact .tt-kpis{ gap: 5px; }
.tt-tabs-bar-compact .tt-kpi{
  padding: 3px 8px;
  font-size: 10.5px;
  gap: 4px;
}
.tt-tabs-bar-compact .tt-kpi i{ font-size: 9px; opacity: 0.7; }

/* Submit-Banner-Slot rechts in der Tabs-Bar */
.tt-submit-banner-slot{
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.tt-submit-banner-slot:empty{ display: none; }

/* Content-Bereich — kein festes Padding mehr */
/* Sprint 2026-05-03b — Mobile-Scroll-Fix:
   .tt-content (= #tt-day-list) ist der Scroll-Container. Vorher fehlte
   overflow-y:auto -> Container hatte default overflow:visible -> kein Scroll
   möglich. User-Wunsch: "Zeiterfassung. ist auch schon gut aber man kann am
   handy nicht runterskrollen". */
.tt-content{
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
  overflow-y: auto;                 /* KRITISCH — sonst kein Scroll */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOS Momentum (auch in _tokens.css aber doppelt-safe) */
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Mobile */
@media (max-width: 760px){
  .tt-pagehdr{ padding: 12px 14px; gap: 8px; }
  .tt-pagehdr-title h2{ font-size: 16px; }
  .tt-pagehdr-title span[data-tt]{ display: none; }
  .tt-view-toggle-label{ display: none; }
  .tt-period-btn-today{ display: none; }
  .tt-tabs-bar{ padding: 8px 14px; }
  .tt-kpi{ padding: 4px 8px; font-size: 11px; }
  .tt-content{ padding: 10px 12px; }
  .tt-pagehdr-compact{ padding: 6px 14px; }
  .tt-pagehdr-compact .tt-pagehdr-title h2{ font-size: 14px; }
  .tt-pagehdr-compact .tt-pagehdr-sub{ display: none; }
}

/* Old stats-row overrides (falls alte Klassen irgendwo noch greifen) */
.tt-stats-row.tt-kpis{
  display: flex !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  grid-template-columns: none !important;
}

/* Submit-Status-Kapseln in der Tabs-Bar */
.tt-submit-btn{
  flex-shrink: 0;
  white-space: nowrap;
}

.tt-submit-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
}
.tt-submit-status i{ font-size: 11px; }

.tt-submit-status-approved{
  background: rgba(22,163,74,0.1);
  color: #16a34a;
  border: 1px solid rgba(22,163,74,0.3);
}
.tt-submit-status-rejected{
  background: rgba(220,38,38,0.1);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,0.3);
}
.tt-submit-status-submitted{
  background: rgba(27,117,153,0.1);
  color: #1B7599;
  border: 1px solid rgba(27,117,153,0.3);
}
.tt-submit-status-pending{
  background: rgba(232,139,0,0.1);
  color: #E88B00;
  border: 1px solid rgba(232,139,0,0.3);
}

.tt-tabs-bar-compact .tt-submit-btn{
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.tt-tabs-bar-compact .tt-submit-status{
  padding: 3px 9px;
  font-size: 10.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   STUNDEN-UMLAGERN & NACHT-BONUS DIALOG — State of the Art Design
   (analog Urlaubskalender .vac-abs-*)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Form-Controls (wiederverwendbar in beiden Dialogen) ──────────────── */

.ttfc-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ttfc-label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ttfc-label i{
  font-size: 10px;
}
.ttfc-label-max{
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 10.5px;
  color: var(--muted);
  opacity: 0.8;
}

/* Select — große custom-styled Dropdowns */
.ttfc-select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 11px 38px 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white)
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  background-size: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  width: 100%;
}
.ttfc-select:hover{
  border-color: #1B7599;
  background-color: rgba(27,117,153,0.02);
}
.ttfc-select:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.12);
}

/* Input — große custom Inputs */
.ttfc-input{
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  transition: all .15s;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  width: 100%;
  text-align: center;
}
.ttfc-input:hover{
  border-color: #1B7599;
}
.ttfc-input:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.12);
}
.ttfc-input::-webkit-outer-spin-button,
.ttfc-input::-webkit-inner-spin-button{
  appearance: none;
  margin: 0;
}

/* Hours-Wrap: Input + Quick-Chips */
.ttfc-hours-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ttfc-quick-chips{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.ttfc-qchip{
  appearance: none;
  border: 1.5px solid var(--border);
  background: var(--white);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all .1s;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  flex: 1;
  min-width: 0;
}
.ttfc-qchip:hover{
  background: #1B7599;
  color: #fff;
  border-color: #1B7599;
  transform: translateY(-1px);
}
.ttfc-qchip:active{
  transform: translateY(0);
}

/* ── STUNDEN-UMLAGERN: Controls-Section (im Haupt-Dialog) ─────────────── */

.tta-shift-controls{
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(27,117,153,0.04) 0%, rgba(22,163,74,0.04) 100%);
  border: 1.5px solid var(--border);
  border-radius: 12px;
}
.tta-shift-controls-hdr{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.tta-shift-controls-hdr i{
  color: #1B7599;
  font-size: 14px;
}
.tta-shift-controls-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.ttfc-field-hours{
  /* Menge-Feld kann schmaler sein */
}

@media (max-width: 860px){
  .tta-shift-controls-grid{
    grid-template-columns: 1fr;
  }
}

/* ── NACHT-BONUS DIALOG ─────────────────────────────────────────────── */

.ttnb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  z-index: 100000;  /* Über Shift-Dialog (insp-overlay ist ~10000), damit es nicht dahinter liegt */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ttnbFadeIn .18s;
}

@keyframes ttnbFadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}

.ttnb-modal{
  background: var(--white);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  animation: ttnbSlideDown .22s cubic-bezier(.22,.9,.28,1);
  overflow: hidden;
}

@keyframes ttnbSlideDown{
  from{ transform: translateY(-20px); opacity:0; }
  to  { transform: translateY(0);     opacity:1; }
}

/* Header — Gradient mit Mond-Icon */
.ttnb-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.04) 60%, transparent 100%);
}
.ttnb-hdr-title{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.ttnb-hdr-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.ttnb-hdr h2{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.ttnb-hdr p{
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.ttnb-close{
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all .12s;
}
.ttnb-close:hover{
  background: var(--surface);
  color: var(--text);
}

/* Body */
.ttnb-body{
  padding: 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Formel-Info oben */
.ttnb-info{
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(99,102,241,0.06);
  border-left: 3px solid #6366f1;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.5;
}
.ttnb-info i{
  color: #6366f1;
  margin-top: 3px;
  flex-shrink: 0;
  font-size: 13px;
}
.ttnb-formula-mini{
  font-variant-numeric: tabular-nums;
}

/* Step-Section */
.ttnb-step{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ttnb-step-hdr{
  display: flex;
  align-items: center;
  gap: 12px;
}
.ttnb-step-num{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
.ttnb-step-title{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.ttnb-step-sub{
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Chip-Row: horizontale Scroll-Leiste mit Day-Chips */
.ttnb-chip-row{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.ttnb-chip-row::-webkit-scrollbar{ height: 6px; }
.ttnb-chip-row::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 3px; }

/* Einzelner Day-Chip */
.ttnb-chip{
  appearance: none;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 10px;
  padding: 8px 10px;
  min-width: 72px;
  cursor: pointer;
  transition: all .12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  font-family: inherit;
  flex-shrink: 0;
}
.ttnb-chip-wd{
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.4px;
}
.ttnb-chip-day{
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ttnb-chip-val{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}
.ttnb-chip-val i{
  font-size: 10px;
}

/* Hover */
.ttnb-chip:hover{
  transform: translateY(-2px);
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}

/* Quell-Chip active */
.ttnb-chip-src.ttnb-chip-active{
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99,102,241,0.35);
  transform: translateY(-2px);
}
.ttnb-chip-src.ttnb-chip-active .ttnb-chip-wd,
.ttnb-chip-src.ttnb-chip-active .ttnb-chip-day,
.ttnb-chip-src.ttnb-chip-active .ttnb-chip-val{
  color: #fff;
}

/* Ziel-Chip active (grün) */
.ttnb-chip-dst.ttnb-chip-active{
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-color: #16a34a;
  box-shadow: 0 4px 12px rgba(22,163,74,0.35);
  transform: translateY(-2px);
}
.ttnb-chip-dst.ttnb-chip-active .ttnb-chip-wd,
.ttnb-chip-dst.ttnb-chip-active .ttnb-chip-day,
.ttnb-chip-dst.ttnb-chip-active .ttnb-chip-val{
  color: #fff;
}

/* Ziel-Chip bei Kollision mit Quelle → Warn-Style */
.ttnb-chip-warn{
  opacity: 0.35;
  border-style: dashed;
  border-color: #dc2626 !important;
  cursor: not-allowed;
}
.ttnb-chip-warn:hover{
  transform: none;
  box-shadow: none;
}

/* Muted Ziel-Chips (Urlaub, Krank, etc.) */
.ttnb-chip-muted{
  opacity: 0.55;
}
.ttnb-chip-muted .ttnb-chip-day{
  color: var(--muted);
}

/* Leere Tage: plus-Icon angedeutet */
.ttnb-chip-empty{
  background: repeating-linear-gradient(135deg,
    transparent 0, transparent 6px,
    rgba(148,163,184,0.05) 6px, rgba(148,163,184,0.05) 12px);
  border-style: dashed;
}

/* Slider für Menge */
.ttnb-slider-wrap{
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ttnb-slider{
  --ttnb-fill-pct: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    #6366f1 0%,
    #6366f1 var(--ttnb-fill-pct),
    var(--border) var(--ttnb-fill-pct),
    var(--border) 100%
  );
  outline: none;
  cursor: pointer;
  transition: background .1s;
}
.ttnb-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.45), 0 0 0 1px rgba(99,102,241,0.2);
  cursor: grab;
  transition: transform .1s;
}
.ttnb-slider::-webkit-slider-thumb:hover{
  transform: scale(1.15);
}
.ttnb-slider::-webkit-slider-thumb:active{
  cursor: grabbing;
  transform: scale(1.1);
}
.ttnb-slider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.45);
  cursor: grab;
}

.ttnb-slider-quick{
  display: flex;
  gap: 6px;
}
.ttnb-qbtn{
  flex: 1;
  appearance: none;
  border: 1.5px solid var(--border);
  background: var(--white);
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all .1s;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.ttnb-qbtn:hover{
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
  transform: translateY(-1px);
}
.ttnb-qbtn-max{
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.35);
  color: #B8600C;
}
.ttnb-qbtn-max:hover{
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}
.ttnb-qbtn-max i{ font-size: 11px; margin-right: 2px; }

/* Preview-Box — groß und schön */
.ttnb-preview{
  margin-top: 4px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(245,158,11,0.05) 100%);
  border: 1.5px solid rgba(99,102,241,0.2);
  border-radius: 14px;
}
.ttnb-preview-hdr{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  margin-bottom: 12px;
}
.ttnb-preview-hdr i{
  color: #8b5cf6;
}

.ttnb-preview-flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.ttnb-preview-card{
  padding: 14px;
  background: var(--white);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1.5px solid transparent;
}
.ttnb-preview-src{
  border-color: rgba(99,102,241,0.3);
  background: linear-gradient(180deg, #fff 0%, rgba(99,102,241,0.03) 100%);
}
.ttnb-preview-dst{
  border-color: rgba(22,163,74,0.3);
  background: linear-gradient(180deg, #fff 0%, rgba(22,163,74,0.03) 100%);
}
.ttnb-preview-card-lbl{
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.ttnb-preview-card-val{
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ttnb-preview-card-val i{
  font-size: 16px;
}
.ttnb-preview-src .ttnb-preview-card-val i{ color: #6366f1; }
.ttnb-preview-dst .ttnb-preview-card-val i{ color: #E88B00; }
.ttnb-preview-card-val strong{
  font-size: 20px;
  letter-spacing: -0.3px;
}
.ttnb-preview-card-delta{
  font-size: 11px;
  color: #dc2626;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.ttnb-preview-card-delta-pos{
  color: #16a34a;
}

/* Arrow + Factor zwischen den Karten */
.ttnb-preview-arrow{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
}
.ttnb-preview-factor{
  padding: 4px 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.ttnb-preview-arrow > i{
  color: #94a3b8;
  font-size: 16px;
}

.ttnb-preview-warn{
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(220,38,38,0.08);
  border-left: 3px solid #dc2626;
  border-radius: 6px;
  font-size: 12px;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* Footer */
.ttnb-footer{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 22px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.ttnb-btn{
  appearance: none;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all .12s;
  font-family: inherit;
}
.ttnb-btn:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.ttnb-btn-ghost{
  background: transparent;
  color: var(--muted);
}
.ttnb-btn-ghost:hover{
  background: var(--surface);
  color: var(--text);
}
.ttnb-btn-primary{
  background: linear-gradient(135deg, #1B7599, #145a75);
  border-color: #1B7599;
  color: #fff;
  box-shadow: 0 3px 8px rgba(27,117,153,0.25);
}
.ttnb-btn-primary:hover:not(:disabled){
  box-shadow: 0 5px 14px rgba(27,117,153,0.35);
  transform: translateY(-1px);
}
.ttnb-btn-primary:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile */
@media (max-width: 620px){
  .ttnb-modal{ max-height: 96vh; }
  .ttnb-body{ padding: 16px; gap: 14px; }
  .ttnb-hdr{ padding: 14px 16px; }
  .ttnb-hdr h2{ font-size: 15px; }
  .ttnb-hdr p{ font-size: 11px; }
  .ttnb-hdr-icon{ width: 38px; height: 38px; font-size: 15px; }
  .ttnb-preview-flow{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ttnb-preview-arrow{
    flex-direction: row;
    justify-content: center;
    padding: 6px 0;
  }
  .ttnb-preview-arrow > i{
    transform: rotate(90deg);
  }
  .ttnb-chip{
    min-width: 62px;
    padding: 6px 8px;
  }
  .ttnb-chip-day{ font-size: 14px; }
  .ttnb-slider-quick{
    flex-wrap: wrap;
  }
  .ttnb-qbtn{ min-width: 48px; }
  .ttnb-footer{ padding: 12px 16px; }
  .ttnb-btn{ padding: 9px 14px; font-size: 12.5px; }
}


/* Override-Badge (kleines Pen-Icon in der Day-Col) */
.tta-override-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  margin-right: 2px;
  cursor: help;
  box-shadow: 0 1px 2px rgba(234,88,12,0.35);
}

/* Zeilen mit Admin-Override: sehr subtile orange Tönung */
.tta-shift-xlsx-v2 .tta-shift-row-override td{
  background: rgba(251,146,60,0.06) !important;
  border-left-color: rgba(251,146,60,0.3) !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-override.tta-shift-row-zebra td{
  background: rgba(251,146,60,0.1) !important;
}

/* Reset-Button (dritter Button neben Quelle/Ziel) */
.tta-shift-pick-reset{
  color: #ea580c;
  border-color: #ea580c;
}
.tta-shift-pick-reset:hover{
  background: #ea580c;
  color: #fff;
}

/* Dialog-Toolbar oben über Excel-Tabelle */
.tta-shift-dialog-toolbar{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tta-shift-night-btn,
.tta-shift-reset-all-btn{
  font-size: 11.5px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tta-shift-night-btn{
  border-color: #6366f1;
  color: #6366f1;
}
.tta-shift-night-btn:hover{
  background: #6366f1;
  color: #fff;
}
.tta-shift-reset-all-btn{
  border-color: #ea580c;
  color: #ea580c;
  margin-left: auto;
}
.tta-shift-reset-all-btn:hover{
  background: #ea580c;
  color: #fff;
}

/* Nacht-Bonus Mini-Dialog */
.tta-nightbonus-info{
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(99,102,241,0.08);
  border-left: 3px solid #6366f1;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.4;
}
.tta-nightbonus-info i{
  color: #6366f1;
  margin-top: 1px;
  flex-shrink: 0;
}

.tta-nightbonus-preview{
  margin-top: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(245,158,11,0.06));
  border: 1px dashed rgba(99,102,241,0.3);
  border-radius: 8px;
  min-height: 40px;
}
.tta-nightbonus-preview:empty{
  display: none;
}

.tta-nb-formula{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
}
.tta-nb-src-box{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(99,102,241,0.15);
  color: #6366f1;
  border-radius: 6px;
  border: 1px solid rgba(99,102,241,0.3);
}
.tta-nb-src-box::before{
  content: '\f186';  /* fa-moon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 3px;
}
.tta-nb-dst-box{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(245,158,11,0.15);
  color: #E88B00;
  border-radius: 6px;
  border: 1px solid rgba(245,158,11,0.3);
}
.tta-nb-op{
  font-size: 18px;
  color: var(--muted);
  font-weight: 400;
}
.tta-nb-factor{
  display: inline-flex;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN-OVERRIDE: Non-destructive-System UI
   ══════════════════════════════════════════════════════════════════════════ */

/* Override-Badge (kleines Pen-Icon in der Day-Col) */
.tta-override-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #fff;
  border-radius: 50%;
  font-size: 8px;
  margin-right: 2px;
  cursor: help;
  box-shadow: 0 1px 2px rgba(234,88,12,0.35);
}

.tta-shift-xlsx-v2 .tta-shift-row-override td{
  background: rgba(251,146,60,0.06) !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-override.tta-shift-row-zebra td{
  background: rgba(251,146,60,0.1) !important;
}

.tta-shift-pick-reset{
  color: #ea580c;
  border-color: #ea580c;
}
.tta-shift-pick-reset:hover{
  background: #ea580c;
  color: #fff;
}

/* Dialog-Toolbar oben über Excel-Tabelle */
.tta-shift-dialog-toolbar{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tta-shift-night-btn,
.tta-shift-reset-all-btn{
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  border: 1.5px solid;
  background: var(--white);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.tta-shift-night-btn{
  border-color: #6366f1;
  color: #6366f1;
}
.tta-shift-night-btn:hover{
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.tta-shift-reset-all-btn{
  border-color: #ea580c;
  color: #ea580c;
  margin-left: auto;
}
.tta-shift-reset-all-btn:hover{
  background: #ea580c;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234,88,12,0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG (USER) — Type-Picker erweitert + Halbtag + Times-Gray
   ══════════════════════════════════════════════════════════════════════════ */

/* Type-Picker Grid: mehr Typen → 2-spaltig oder 4er-Grid */
.tt-type-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 560px){
  .tt-type-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Halbtag-Toggle (wie break-toggle) */
.tt-halfday-field{
  transition: max-height .25s, opacity .2s;
}
.tt-halfday-field[style*="display:none"],
.tt-halfday-field[style*="display: none"]{
  display: none !important;
}

/* Zeiten ausgegraut wenn Type = Ganztag-Abwesenheit ohne Halbtag */
.tt-times-grayed{
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.3);
  transition: opacity .18s, filter .18s;
}
.tt-times-grayed input,
.tt-times-grayed select,
.tt-times-grayed textarea{
  background: var(--surface) !important;
  cursor: not-allowed !important;
}

/* Submit-Dialog State of the Art */
.tt-submit-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.tt-submit-stat{
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.tt-submit-stat-lbl{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  font-weight: 700;
}
.tt-submit-stat strong{
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tt-submit-stat-diff strong{
  color: #1B7599;
}

.tt-submit-option{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  margin-bottom: 12px;
}
.tt-submit-option:hover{
  border-color: #1B7599;
  background: rgba(27,117,153,0.03);
}
.tt-submit-option input{
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #1B7599;
}
.tt-submit-option-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tt-submit-option-title i{
  color: #1B7599;
  font-size: 12px;
}
.tt-submit-option-sub{
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* Confirm-Box wenn unvollständig */
.tt-submit-confirm{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(232,139,0,0.08);
  border: 1.5px solid rgba(232,139,0,0.4);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: all .12s;
}
.tt-submit-confirm:hover{
  background: rgba(232,139,0,0.12);
}
.tt-submit-confirm input{
  margin-top: 2px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #E88B00;
}
.tt-submit-confirm-title{
  font-size: 13px;
  font-weight: 700;
  color: #B8600C;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tt-submit-confirm-sub{
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}

/* Info-Notice unten */
.tt-submit-notice{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(27,117,153,0.06);
  border-left: 3px solid #1B7599;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.45;
}
.tt-submit-notice i{
  color: #1B7599;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPLIANCE-WARNINGS: Badges, Row-States, Summary
   ══════════════════════════════════════════════════════════════════════════ */

/* Warn-Badges in User-Cards (Team-Übersicht) */
.tta-warn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  margin-bottom: 4px;
}
.tta-warn-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.tta-warn-badge i{ font-size: 9px; }
.tta-warn-error{
  background: rgba(220,38,38,0.1);
  color: #dc2626;
  border-color: rgba(220,38,38,0.35);
}
.tta-warn-warning{
  background: rgba(232,139,0,0.1);
  color: #E88B00;
  border-color: rgba(232,139,0,0.35);
}
.tta-warn-override{
  background: rgba(251,146,60,0.08);
  color: #ea580c;
  border-color: rgba(251,146,60,0.35);
}

/* Warn-Dot in Shift-Tabelle Day-Cell */
.tta-warn-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: help;
  margin-right: 2px;
}

/* Zeilen-Highlighting für Warnings (subtile orange/rote Tönung) */
.tta-shift-xlsx-v2 .tta-shift-row-has-warning td{
  border-left: 3px solid rgba(232,139,0,0.5) !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-has-error td{
  border-left: 3px solid rgba(220,38,38,0.7) !important;
}
.tta-shift-xlsx-v2 .tta-shift-row-has-error .tta-xlsx-day{
  box-shadow: inset 0 0 0 1px rgba(220,38,38,0.3);
}

/* Summary-Panel oberhalb der Tabelle */
.tta-warnsum{
  margin-bottom: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(232,139,0,0.06) 0%, rgba(220,38,38,0.04) 100%);
  border: 1.5px solid rgba(232,139,0,0.3);
  border-radius: 10px;
}
.tta-warnsum-hdr{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 8px;
}
.tta-warnsum-hdr i{
  color: #E88B00;
  font-size: 14px;
}
.tta-warnsum-hdr strong{
  color: #B8600C;
}
.tta-warnsum-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tta-warnsum-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--white);
  border: 1px solid;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tta-warnsum-chip i{ font-size: 10px; }
.tta-warnsum-chip strong{ font-weight: 800; }
.tta-warnsum-chip-error{
  color: #dc2626;
  border-color: rgba(220,38,38,0.4);
  background: rgba(220,38,38,0.04);
}
.tta-warnsum-chip-warning{
  color: #E88B00;
  border-color: rgba(232,139,0,0.4);
  background: rgba(232,139,0,0.04);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE-WARNINGS im User-Editor (erscheinen unter dem Calc-Block)
   ══════════════════════════════════════════════════════════════════════════ */

.tt-live-warnings{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.tt-lw{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid;
  border-left-width: 3px;
}
.tt-lw i{
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}

.tt-lw-error{
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.25);
  border-left-color: #dc2626;
  color: #991b1b;
}
.tt-lw-error i{ color: #dc2626; }

.tt-lw-warning{
  background: rgba(232,139,0,0.06);
  border-color: rgba(232,139,0,0.25);
  border-left-color: #E88B00;
  color: #9a3412;
}
.tt-lw-warning i{ color: #E88B00; }

.tt-lw-info{
  background: rgba(59,130,246,0.05);
  border-color: rgba(59,130,246,0.2);
  border-left-color: #3b82f6;
  color: #1e40af;
}
.tt-lw-info i{ color: #3b82f6; }

/* Neue Kachel-Typen: Arzt, Sonstiges, Halbtag-Badge */
.tt-mg-doctor{
  background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(168,85,247,0.03));
  border-color: rgba(168,85,247,0.35);
}
.tt-mg-doctor .tt-mg-daynum,
.tt-mg-doctor .tt-mg-lbl{ color: #a855f7; }

.tt-mg-other{
  background: linear-gradient(135deg, rgba(107,114,128,0.08), rgba(107,114,128,0.03));
  border-color: rgba(107,114,128,0.35);
}
.tt-mg-other .tt-mg-daynum,
.tt-mg-other .tt-mg-lbl{ color: #6b7280; }

/* Halbtag-Badge (hourglass oben rechts — Geschwister von tt-mg-night) */
.tt-mg-half{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  box-shadow: 0 1px 3px rgba(245,158,11,0.4);
}
/* Wenn beide Badges auftreten: Halbtag unten, Night oben */
.tt-mg-cell:has(.tt-mg-night) .tt-mg-half{ top: 26px; }

@media (max-width: 760px){
  .tt-mg-half{
    width: 14px;
    height: 14px;
    top: 2px;
    right: 2px;
    font-size: 7px;
  }
  .tt-mg-cell:has(.tt-mg-night) .tt-mg-half{ top: 18px; }
}

/* Week-Row: Halbtag-Types */
.tt-wd-doctor .tt-wd-icon{ color: #a855f7; }
.tt-wd-other .tt-wd-icon{ color: #6b7280; }
.tt-wd-timeoff .tt-wd-icon{ color: #94a3b8; }

/* Neue Stat-Kapseln in Admin-Team-Cards für die neuen Types */
.tta-stat-comp .tta-stat-val,
.tta-bu-stat .tta-bu-stat-num{ color: var(--text); }

.tta-stat-comp{ background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); }
.tta-stat-comp .tta-stat-val{ color: #d97706; }

.tta-stat-timeoff{ background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.3); }
.tta-stat-timeoff .tta-stat-val{ color: #64748b; }

.tta-stat-doctor{ background: rgba(168,85,247,0.08); border-color: rgba(168,85,247,0.3); }
.tta-stat-doctor .tta-stat-val{ color: #a855f7; }

.tta-stat-other{ background: rgba(107,114,128,0.08); border-color: rgba(107,114,128,0.3); }
.tta-stat-other .tta-stat-val{ color: #6b7280; }

/* ══════════════════════════════════════════════════════════════════════════
   VERWALTUNG — Prominenter Status-Banner oberhalb der Team-Liste
   ══════════════════════════════════════════════════════════════════════════ */

.tta-alert-banner{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.tta-alert-submitted{
  background: linear-gradient(135deg, rgba(232,139,0,0.12) 0%, rgba(245,158,11,0.06) 100%);
  border-color: rgba(232,139,0,0.45);
  animation: ttaAlertPulse 2.5s ease-in-out infinite;
}
@keyframes ttaAlertPulse{
  0%, 100% { box-shadow: 0 2px 6px rgba(232,139,0,0.12); }
  50%      { box-shadow: 0 4px 14px rgba(232,139,0,0.32); }
}
.tta-alert-warnings{
  background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(232,139,0,0.04) 100%);
  border-color: rgba(220,38,38,0.3);
}
.tta-alert-icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tta-alert-submitted .tta-alert-icon{
  background: linear-gradient(135deg, #E88B00, #D97706);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232,139,0,0.3);
}
.tta-alert-warnings .tta-alert-icon{
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
}
.tta-alert-body{
  flex: 1;
  min-width: 0;
}
.tta-alert-title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.tta-alert-title strong{
  font-size: 18px;
  font-weight: 800;
  color: #E88B00;
}
.tta-alert-warnings .tta-alert-title strong{ color: #dc2626; }
.tta-alert-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.tta-alert-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.tta-alert-chip i{ font-size: 10px; }
.tta-alert-chip-err  { color: #dc2626; border-color: rgba(220,38,38,0.35); }
.tta-alert-chip-warn { color: #E88B00; border-color: rgba(232,139,0,0.35); }

/* Status-Count-Inline-Labels im Period-Header */
.tta-status-count{
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin: 0 2px;
}
.tta-status-count-submitted{ background: rgba(232,139,0,0.12); color: #E88B00; }
.tta-status-count-approved{  background: rgba(22,163,74,0.12); color: #16a34a; }
.tta-status-count-rejected{  background: rgba(220,38,38,0.12); color: #dc2626; }

/* Highlight-Flash wenn zur ersten eingereichten Card gescrollt */
.tta-user-card.tta-card-highlight{
  animation: ttaCardPulse 2s ease-out;
}
@keyframes ttaCardPulse{
  0%   { box-shadow: 0 0 0 0 rgba(232,139,0,0.6); }
  30%  { box-shadow: 0 0 0 12px rgba(232,139,0,0.3); transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 0 rgba(232,139,0,0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK-THEME Support für Shift-Umlagern-Tabelle + alle tta- Komponenten
   ══════════════════════════════════════════════════════════════════════════ */
body.dark-theme .tta-shift-xlsx,
body.theme-dark .tta-shift-xlsx{
  background: #1f2937;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-shift-xlsx td,
body.theme-dark .tta-shift-xlsx td,
body.dark-theme .tta-shift-xlsx th,
body.theme-dark .tta-shift-xlsx th{
  border-color: #374151 !important;
  color: #e5e7eb;
}
body.dark-theme .tta-shift-row-zebra td,
body.theme-dark .tta-shift-row-zebra td{
  background: rgba(255,255,255,0.03);
}
body.dark-theme .tta-shift-row-we td,
body.theme-dark .tta-shift-row-we td{
  background: rgba(248,113,113,0.08) !important;
}
body.dark-theme .tta-shift-row-hol td,
body.theme-dark .tta-shift-row-hol td{
  background: rgba(168,85,247,0.1) !important;
}
body.dark-theme .tta-shift-row-future td,
body.theme-dark .tta-shift-row-future td{
  opacity: 0.45;
}
body.dark-theme .tta-shift-xlsx-v2 thead th,
body.theme-dark .tta-shift-xlsx-v2 thead th{
  background: linear-gradient(180deg, #0e7490, #0891b2) !important;
  color: #fff !important;
}
body.dark-theme .tta-xlsx-day,
body.theme-dark .tta-xlsx-day{
  background: #111827 !important;
  color: #e5e7eb !important;
}
body.dark-theme .tta-shift-xlsx-v2 tfoot td,
body.theme-dark .tta-shift-xlsx-v2 tfoot td{
  background: #0f172a !important;
  color: #f3f4f6 !important;
}

/* Warn-Summary im Dark-Theme */
body.dark-theme .tta-warnsum,
body.theme-dark .tta-warnsum{
  background: linear-gradient(135deg, rgba(232,139,0,0.12) 0%, rgba(220,38,38,0.08) 100%);
  border-color: rgba(232,139,0,0.4);
}
body.dark-theme .tta-warnsum-chip,
body.theme-dark .tta-warnsum-chip{
  background: rgba(31,41,55,0.8);
}

/* Alert-Banner im Dark-Theme */
body.dark-theme .tta-alert-banner,
body.theme-dark .tta-alert-banner{
  background: rgba(31,41,55,0.6);
  border-color: rgba(232,139,0,0.5);
}
body.dark-theme .tta-alert-chip,
body.theme-dark .tta-alert-chip{
  background: rgba(17,24,39,0.8);
  border-color: #374151;
}

/* Umlagern-Buttons (pick-src/pick-dst) im Dark-Theme */
body.dark-theme .tta-shift-pick-src,
body.theme-dark .tta-shift-pick-src,
body.dark-theme .tta-shift-pick-dst,
body.theme-dark .tta-shift-pick-dst{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-shift-pick-reset,
body.theme-dark .tta-shift-pick-reset{
  background: rgba(251,146,60,0.15);
  border-color: rgba(251,146,60,0.4);
  color: #fb923c;
}

/* Form-Controls im Umlagern-Dialog Dark-Theme */
body.dark-theme .ttfc-input,
body.theme-dark .ttfc-input,
body.dark-theme .ttfc-select,
body.theme-dark .ttfc-select{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}

/* Live-Warnings im Dark-Theme */
body.dark-theme .tt-lw-info,
body.theme-dark .tt-lw-info{
  background: rgba(59,130,246,0.12);
  color: #93c5fd;
}
body.dark-theme .tt-lw-warning,
body.theme-dark .tt-lw-warning{
  background: rgba(232,139,0,0.15);
  color: #fdba74;
}
body.dark-theme .tt-lw-error,
body.theme-dark .tt-lw-error{
  background: rgba(220,38,38,0.15);
  color: #fca5a5;
}

/* Submit-Dialog Dark-Theme */
body.dark-theme .tt-submit-stat,
body.theme-dark .tt-submit-stat,
body.dark-theme .tt-submit-option,
body.theme-dark .tt-submit-option{
  background: #1f2937;
  border-color: #374151;
}
body.dark-theme .tt-submit-confirm,
body.theme-dark .tt-submit-confirm{
  background: rgba(232,139,0,0.15);
  border-color: rgba(232,139,0,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   tta-bu-entries-table — Badges + ÜS-Pills konsistent mit Editor
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-entry-type{
  white-space: nowrap;
}
.tta-bu-chip-row{
  display: inline-flex;
  gap: 3px;
  margin-left: 6px;
  flex-wrap: wrap;
  vertical-align: middle;
}
.tta-bu-chip{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  border: 1px solid;
  line-height: 1.4;
}
.tta-bu-chip i{ font-size: 8px; }
.tta-bu-chip-half{
  background: rgba(245,158,11,0.12);
  color: #d97706;
  border-color: rgba(245,158,11,0.4);
}
.tta-bu-chip-override{
  background: rgba(251,146,60,0.12);
  color: #ea580c;
  border-color: rgba(251,146,60,0.45);
}
.tta-bu-chip-undo{
  background: rgba(220,38,38,0.08);
  color: #B91C1C;
  border: 1px solid rgba(220,38,38,0.3);
  cursor: pointer;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  transition: all .12s;
}
.tta-bu-chip-undo:hover{
  background: rgba(220,38,38,0.15);
  border-color: #DC2626;
}
.tta-bu-chip-undo i{ margin-right: 3px; font-size: 9px; }

/* ──────────────────────────────────────────────────────────────────────────
   ADMIN-EDITED-ZEILE — ultra sichtbare Markierung wenn ein Eintrag vom
   Admin geändert wurde. Orange Hintergrund + linker Strich + Original-Werte
   als durchgestrichene Zeile darunter.
   ────────────────────────────────────────────────────────────────────── */
.tta-bu-entry-admin-edited{
  background: rgba(232,139,0,0.08) !important;
}
.tta-bu-entry-admin-edited td:first-child{
  box-shadow: inset 4px 0 0 #E88B00;
}
/* Original-Werte des Mitarbeiters (durchgestrichen, grau) */
.tta-bu-orig-line{
  margin-top: 4px;
  padding: 3px 8px;
  background: rgba(100,116,139,0.08);
  border: 1px dashed rgba(100,116,139,0.3);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(100,116,139,0.5);
  line-height: 1.4;
  white-space: nowrap;
}
.tta-bu-orig-line strong{
  font-weight: 700;
  color: var(--muted);
}
.tta-bu-orig-lbl{
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  display: inline-block;
  margin-right: 4px;
  color: #B85F00;
}

/* Undo-Button: prominent in der Notiz-Spalte */
.tta-bu-undo-btn{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  margin-top: 6px;
  background: rgba(220,38,38,0.08);
  color: #B91C1C;
  border: 1.5px solid rgba(220,38,38,0.35);
  border-radius: 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.tta-bu-undo-btn:hover{
  background: rgba(220,38,38,0.15);
  border-color: #DC2626;
  color: #991B1B;
  box-shadow: 0 2px 6px rgba(220,38,38,0.2);
}
.tta-bu-undo-btn i{ font-size: 11px; }

/* Auto-Änderungs-Notiz (vom System generiert bei Admin-Edit) */
.tta-bu-change-chip{
  display: block;
  padding: 4px 8px;
  margin-bottom: 4px;
  background: linear-gradient(135deg, rgba(232,139,0,0.1), rgba(232,139,0,0.05));
  border: 1px solid rgba(232,139,0,0.3);
  border-left: 3px solid #E88B00;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #92400E;
  line-height: 1.4;
  word-break: break-word;
}
.tta-bu-change-chip i{
  color: #E88B00;
  margin-right: 4px;
  font-size: 10px;
}
.tta-bu-chip-we{
  background: rgba(239,68,68,0.1);
  color: #dc2626;
  border-color: rgba(239,68,68,0.35);
}
.tta-bu-chip-oncall{
  background: rgba(59,130,246,0.1);
  color: #2563eb;
  border-color: rgba(59,130,246,0.35);
}
.tta-bu-chip-hol{
  background: rgba(245,158,11,0.1);
  color: #b45309;
  border-color: rgba(245,158,11,0.35);
}
.tta-bu-chip-break{
  background: rgba(234,88,12,0.1);
  color: #c2410c;
  border-color: rgba(234,88,12,0.3);
}

/* ÜS-Pills für die Tabelle (kompakter als in Shift-Dialog) */
.tta-shift-ot50-pill{
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245,158,11,0.12);
  color: #B8600C;
  border: 1px solid rgba(245,158,11,0.35);
  white-space: nowrap;
}
.tta-shift-ot100-pill{
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(220,38,38,0.1);
  color: #C62828;
  border: 1px solid rgba(220,38,38,0.35);
  white-space: nowrap;
}

body.dark-theme .tta-shift-ot50-pill,
body.theme-dark .tta-shift-ot50-pill{
  background: rgba(251,191,36,0.18);
  color: #fbbf24;
}
body.dark-theme .tta-shift-ot100-pill,
body.theme-dark .tta-shift-ot100-pill{
  background: rgba(248,113,113,0.2);
  color: #f87171;
}

/* ══════════════════════════════════════════════════════════════════════════
   Admin-Lock-Banner im Tag-Editor (wenn nicht approved)
   ══════════════════════════════════════════════════════════════════════════ */
.tt-admin-lock-banner{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(100,116,139,0.05) 0%, rgba(232,139,0,0.06) 100%);
  border: 1.5px solid var(--alb-color, #E88B00);
  border-left: 4px solid var(--alb-color, #E88B00);
  border-radius: 10px;
}
.tt-admin-lock-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--alb-color, #E88B00);
  margin-bottom: 3px;
}
.tt-admin-lock-sub{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

body.dark-theme .tt-admin-lock-banner,
body.theme-dark .tt-admin-lock-banner{
  background: rgba(31,41,55,0.8);
}

/* Dark-Theme: tta-bu-entries-table komplett */
body.dark-theme .tta-bu-entries-table,
body.theme-dark .tta-bu-entries-table{
  background: #1f2937;
  color: #e5e7eb;
}
body.dark-theme .tta-bu-entries-table td,
body.theme-dark .tta-bu-entries-table td,
body.dark-theme .tta-bu-entries-table th,
body.theme-dark .tta-bu-entries-table th{
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-bu-entries-table thead tr,
body.theme-dark .tta-bu-entries-table thead tr{
  background: #0f172a;
}
body.dark-theme .tta-bu-entry-row:hover td,
body.theme-dark .tta-bu-entry-row:hover td{
  background: rgba(255,255,255,0.04);
}
body.dark-theme .tta-bu-entries-foot td,
body.theme-dark .tta-bu-entries-foot td{
  background: #0f172a;
  color: #f3f4f6;
}

/* ══════════════════════════════════════════════════════════════════════════
   TTA PERIOD-PICKER — Prominenter Monat-Navigator in der Content-View
   (ersetzt den Mini-Nav in der Pagehdr, liegt näher am Kontext)
   ══════════════════════════════════════════════════════════════════════════ */

.tta-period-picker{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(27,117,153,0.05) 0%, rgba(27,117,153,0.02) 100%);
  border: 1.5px solid rgba(27,117,153,0.18);
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.tta-period-arrow{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(27,117,153,0.25);
  background: var(--white);
  color: #1B7599;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.tta-period-arrow:hover{
  background: #1B7599;
  color: #fff;
  border-color: #1B7599;
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(27,117,153,0.25);
}
.tta-period-arrow:active{
  transform: scale(0.96);
}

.tta-period-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 320px;
}
.tta-period-month{
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: 1.1;
  text-align: center;
}
.tta-period-today{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 12px;
  border: 1px solid rgba(27,117,153,0.3);
  background: transparent;
  color: #1B7599;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}
.tta-period-today:hover{
  background: rgba(27,117,153,0.08);
}
.tta-period-today i{ font-size: 10px; }

@media (max-width: 520px){
  .tta-period-picker{ padding: 10px 12px; gap: 10px; }
  .tta-period-arrow{ width: 38px; height: 38px; font-size: 13px; }
  .tta-period-month{ font-size: 18px; }
}

/* Dark-Theme */
body.dark-theme .tta-period-picker,
body.theme-dark .tta-period-picker{
  background: linear-gradient(135deg, rgba(31,41,55,0.9) 0%, rgba(17,24,39,0.7) 100%);
  border-color: rgba(27,117,153,0.4);
}
body.dark-theme .tta-period-arrow,
body.theme-dark .tta-period-arrow{
  background: #111827;
  border-color: #374151;
  color: #93c5fd;
}
body.dark-theme .tta-period-arrow:hover,
body.theme-dark .tta-period-arrow:hover{
  background: #1B7599;
  color: #fff;
}
body.dark-theme .tta-period-month,
body.theme-dark .tta-period-month{
  color: #f3f4f6;
}
body.dark-theme .tta-period-today,
body.theme-dark .tta-period-today{
  color: #93c5fd;
  border-color: rgba(147,197,253,0.35);
}

/* By-User-Wrap (neuer Wrapper der den Picker + Grid hält) */
.tta-by-user-wrap{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px;
  height: 100%;
}
.tta-by-user-wrap .tta-by-user{
  flex: 1;
  min-height: 0;
}

/* Pagehdr-Sub ausblenden wenn leer (Month-Label ist jetzt inline in der View) */
.tta-pagehdr-sub[style*="display:none"]{ display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BU-DETAIL ACTIONS — Prominente Status-Buttons + kompakte Tools
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-detail-actions{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Primäre Status-Aktionen: groß, farbig, icon links + zweizeiliger Text */
.tta-bu-action-primary{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 2px solid;
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
  min-width: 170px;
  text-align: left;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}
.tta-bu-action-primary i{
  font-size: 20px;
  flex-shrink: 0;
}
.tta-bu-action-primary span{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.tta-bu-action-primary strong{
  font-size: 14px;
  font-weight: 700;
}
.tta-bu-action-primary small{
  font-size: 10.5px;
  opacity: 0.75;
  font-weight: 500;
}
.tta-bu-action-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tta-bu-action-primary:active{
  transform: translateY(0);
}

/* Annehmen — grün, prominent, leicht pulsierend damit Admin es sieht */
.tta-bu-action-approve{
  border-color: #16a34a;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  animation: ttaApprovePulse 2.5s ease-in-out infinite;
}
@keyframes ttaApprovePulse{
  0%, 100% { box-shadow: 0 2px 8px rgba(22,163,74,0.25); }
  50%      { box-shadow: 0 4px 16px rgba(22,163,74,0.5); }
}
.tta-bu-action-approve i{ color: #fff; }
.tta-bu-action-approve:hover{
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* Zurückweisen — rot-outline (nicht so prominent wie Annehmen) */
.tta-bu-action-reject{
  border-color: #ef4444;
  color: #dc2626;
}
.tta-bu-action-reject i{ color: #dc2626; }
.tta-bu-action-reject:hover{
  background: rgba(239,68,68,0.06);
  border-color: #dc2626;
}

/* Wieder öffnen — orange outline */
.tta-bu-action-reopen{
  border-color: #E88B00;
  color: #E88B00;
}
.tta-bu-action-reopen i{ color: #E88B00; }
.tta-bu-action-reopen:hover{
  background: rgba(232,139,0,0.08);
}

/* Tool-Gruppe: kompaktere Outline-Buttons rechts — vertikal gestapelt
   damit sie weniger horizontalen Platz brauchen und sich in die Höhe der
   Primary-Buttons einfügen (2 Tool-Buttons untereinander = 1 Primary-Höhe). */
.tta-bu-action-tools{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  align-items: stretch;
  flex-shrink: 0;
}
.tta-bu-action-tool{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  justify-content: flex-start;
  min-width: 110px;
}
.tta-bu-action-tool:hover{
  border-color: #1B7599;
  background: rgba(27,117,153,0.05);
  color: #1B7599;
}
.tta-bu-action-tool i{
  font-size: 11px;
  width: 14px;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px){
  .tta-bu-detail-actions{ gap: 8px; }
  .tta-bu-action-primary{ min-width: 140px; padding: 10px 14px; }
  .tta-bu-action-primary strong{ font-size: 13px; }
  .tta-bu-action-tools{
    flex-direction: row;
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .tta-bu-action-tool{
    min-width: 0;
    flex: 1;
    justify-content: center;
  }
}

/* Dark-Theme */
body.dark-theme .tta-bu-action-primary,
body.theme-dark .tta-bu-action-primary{
  background: #1f2937;
}
body.dark-theme .tta-bu-action-approve,
body.theme-dark .tta-bu-action-approve{
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
body.dark-theme .tta-bu-action-reject,
body.theme-dark .tta-bu-action-reject{
  color: #fca5a5;
  border-color: #ef4444;
}
body.dark-theme .tta-bu-action-reject:hover,
body.theme-dark .tta-bu-action-reject:hover{
  background: rgba(239,68,68,0.15);
}
body.dark-theme .tta-bu-action-reopen,
body.theme-dark .tta-bu-action-reopen{
  color: #fdba74;
  border-color: #E88B00;
}
body.dark-theme .tta-bu-action-tool,
body.theme-dark .tta-bu-action-tool{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-bu-action-tool:hover,
body.theme-dark .tta-bu-action-tool:hover{
  background: rgba(27,117,153,0.15);
  color: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHIFT-DIALOG CARD-GRID — Neue übersichtliche Tag-Karten
   (ersetzt die 14-spaltige Excel-Tabelle durch kompakte Cards)
   ══════════════════════════════════════════════════════════════════════════ */

.tta-shift-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tta-shift-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: all .12s;
}
.tta-shift-card:hover{
  border-color: rgba(27,117,153,0.4);
  box-shadow: 0 2px 8px rgba(27,117,153,0.1);
}

/* State-Farben — Border-Left als subtiler Indikator */
.tta-shift-card.tta-sc-weekend{ background: rgba(248,113,113,0.03); border-left: 4px solid rgba(248,113,113,0.5); }
.tta-shift-card.tta-sc-holiday{ background: rgba(168,85,247,0.03); border-left: 4px solid rgba(168,85,247,0.5); }
.tta-shift-card.tta-sc-future { opacity: 0.55; pointer-events: none; }
.tta-shift-card.tta-sc-missing{ background: rgba(220,38,38,0.04); border-left: 4px solid rgba(220,38,38,0.5); }
.tta-shift-card.tta-sc-has-warning{ border-left: 4px solid #E88B00; }
.tta-shift-card.tta-sc-has-error  { border-left: 4px solid #dc2626; }
.tta-shift-card.tta-sc-override   { background: rgba(251,146,60,0.04); border-color: rgba(251,146,60,0.35); }

/* Selected-States (wenn als Quelle/Ziel gewählt) */
.tta-shift-card.tta-sc-selected-src{
  border-color: #1B7599 !important;
  box-shadow: 0 0 0 2px rgba(27,117,153,0.25), 0 4px 12px rgba(27,117,153,0.15);
}
.tta-shift-card.tta-sc-selected-dst{
  border-color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,0.25), 0 4px 12px rgba(22,163,74,0.15);
}

/* Override-Badge oben rechts */
.tta-sc-override-badge{
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  z-index: 2;
}

.tta-sc-hdr{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.tta-sc-date{
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.2px;
}
.tta-sc-type{
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tta-sc-type i{ font-size: 11px; }

.tta-sc-times{
  font-size: 12.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 5px;
  align-items: center;
}
.tta-sc-times i{ color: #1B7599; font-size: 11px; }
.tta-sc-break{ color: var(--muted); font-size: 11px; }

.tta-sc-hours{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.tta-sc-badge{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0;
  line-height: 1.1;
}
.tta-sc-badge-lbl{
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.tta-sc-badge strong{
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tta-sc-badge-target{ opacity: 0.75; }
.tta-sc-diff-pos  { border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.07); }
.tta-sc-diff-pos strong{ color: #16a34a; }
.tta-sc-diff-neg  { border-color: rgba(220,38,38,0.4); background: rgba(220,38,38,0.07); }
.tta-sc-diff-neg strong{ color: #dc2626; }
.tta-sc-diff-zero { opacity: 0.7; }

/* Bonus-Pills (Nacht, ÜS50, ÜS100) */
.tta-sc-bonuses{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.tta-sc-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
}
.tta-sc-pill small{ font-size: 10px; opacity: 0.85; font-weight: 600; margin-left: 2px; }
.tta-sc-pill i{ font-size: 10px; }
.tta-sc-pill-night{ background: rgba(99,102,241,0.1);  color: #6366f1; border-color: rgba(99,102,241,0.35); }
.tta-sc-pill-ot50 { background: rgba(245,158,11,0.12); color: #B8600C; border-color: rgba(245,158,11,0.4); }
.tta-sc-pill-ot100{ background: rgba(220,38,38,0.1);  color: #C62828; border-color: rgba(220,38,38,0.35); }

/* Warnings im Card */
.tta-sc-warns{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}
.tta-sc-warn{
  display: flex;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  border-left: 2.5px solid;
}
.tta-sc-warn i{ font-size: 10px; margin-top: 2px; flex-shrink: 0; }
.tta-sc-warn-err { background: rgba(220,38,38,0.06); border-color: #dc2626; color: #991b1b; }
.tta-sc-warn-err i{ color: #dc2626; }
.tta-sc-warn-warn{ background: rgba(232,139,0,0.06); border-color: #E88B00; color: #9a3412; }
.tta-sc-warn-warn i{ color: #E88B00; }
.tta-sc-warn-info{ background: rgba(59,130,246,0.05); border-color: #3b82f6; color: #1e40af; }
.tta-sc-warn-info i{ color: #3b82f6; }

/* Aktions-Buttons unten */
.tta-sc-actions{
  display: flex;
  gap: 5px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.tta-sc-btn{
  flex: 1;
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1.5px solid;
  border-radius: 8px;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.tta-sc-btn i{ font-size: 10px; }

.tta-sc-btn-src{ border-color: rgba(27,117,153,0.35); color: #1B7599; }
.tta-sc-btn-src:hover{ background: #1B7599; color: #fff; border-color: #1B7599; }

.tta-sc-btn-dst{ border-color: rgba(22,163,74,0.35); color: #16a34a; }
.tta-sc-btn-dst:hover{ background: #16a34a; color: #fff; border-color: #16a34a; }

.tta-sc-btn-reset{ border-color: rgba(251,146,60,0.4); color: #ea580c; background: rgba(251,146,60,0.06); }
.tta-sc-btn-reset:hover{ background: #ea580c; color: #fff; border-color: #ea580c; }

/* Dark-Theme Shift-Cards */
body.dark-theme .tta-shift-card,
body.theme-dark .tta-shift-card{
  background: #1f2937;
  border-color: #374151;
}
body.dark-theme .tta-sc-date,
body.theme-dark .tta-sc-date{ color: #f3f4f6; }
body.dark-theme .tta-sc-times,
body.theme-dark .tta-sc-times{ color: #e5e7eb; }
body.dark-theme .tta-sc-badge,
body.theme-dark .tta-sc-badge{
  background: #111827;
  border-color: #374151;
}
body.dark-theme .tta-sc-badge strong,
body.theme-dark .tta-sc-badge strong{ color: #f3f4f6; }
body.dark-theme .tta-sc-btn,
body.theme-dark .tta-sc-btn{
  background: #111827;
}
body.dark-theme .tta-sc-warn-err,
body.theme-dark .tta-sc-warn-err{ background: rgba(220,38,38,0.15); color: #fca5a5; }
body.dark-theme .tta-sc-warn-warn,
body.theme-dark .tta-sc-warn-warn{ background: rgba(232,139,0,0.15); color: #fdba74; }
body.dark-theme .tta-sc-warn-info,
body.theme-dark .tta-sc-warn-info{ background: rgba(59,130,246,0.15); color: #93c5fd; }

/* ══════════════════════════════════════════════════════════════════════════
   SEMPER-DIALOG — Universal Modal-Dialog (Ersatz für confirm/prompt)
   Klassen: .sd-dlg-overlay, .sd-dlg, .sd-dlg-{info|warn|danger|success}
            .sd-dlg-hdr/icon/title/subtitle/close, .sd-dlg-body/msg, .sd-dlg-footer
            .sd-dlg-input-wrap/lbl/input/textarea/help
   Wird von showSemperDialog() in core/core.js verwendet.
   ══════════════════════════════════════════════════════════════════════════ */

.sd-dlg-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .18s ease;
}
.sd-dlg-overlay.sd-dlg-open{
  opacity: 1;
}

.sd-dlg{
  position: relative;
  background: var(--white);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
  border-top: 4px solid var(--sd-dlg-color, #1B7599);
  transform: translateY(12px) scale(0.96);
  opacity: 0;
  transition: transform .22s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .18s ease;
  overflow: hidden;
}
.sd-dlg-overlay.sd-dlg-open .sd-dlg{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.sd-dlg-hdr{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.sd-dlg-icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sd-dlg-color, #1B7599), color-mix(in srgb, var(--sd-dlg-color, #1B7599) 75%, black));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Fallback für Browser ohne color-mix: severity-spezifisch */
.sd-dlg-info    .sd-dlg-icon{ background: linear-gradient(135deg, #1B7599, #134a61); }
.sd-dlg-warn    .sd-dlg-icon{ background: linear-gradient(135deg, #E88B00, #B8600C); }
.sd-dlg-danger  .sd-dlg-icon{ background: linear-gradient(135deg, #ef4444, #b91c1c); }
.sd-dlg-success .sd-dlg-icon{ background: linear-gradient(135deg, #22c55e, #15803d); }

.sd-dlg-title-block{
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.sd-dlg-title{
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.2px;
}
.sd-dlg-subtitle{
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  font-weight: 500;
}

.sd-dlg-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .12s;
}
.sd-dlg-close:hover{
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* Body */
.sd-dlg-body{
  padding: 18px 22px 20px;
  overflow-y: auto;
  flex: 1;
}
.sd-dlg-msg{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.sd-dlg-msg p{ margin: 0 0 10px; }
.sd-dlg-msg p:last-child{ margin-bottom: 0; }
.sd-dlg-msg strong{ font-weight: 700; color: var(--text); }

/* Input-Bereich */
.sd-dlg-input-wrap{
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sd-dlg-input-lbl{
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
}
.sd-dlg-input,
.sd-dlg-textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .12s, box-shadow .12s;
  box-sizing: border-box;
}
.sd-dlg-textarea{
  resize: vertical;
  min-height: 60px;
  max-height: 260px;
}
.sd-dlg-input:focus,
.sd-dlg-textarea:focus{
  outline: none;
  border-color: var(--sd-dlg-color, #1B7599);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-dlg-color, #1B7599) 18%, transparent);
}
.sd-dlg-info    .sd-dlg-input:focus,    .sd-dlg-info    .sd-dlg-textarea:focus{ box-shadow: 0 0 0 3px rgba(27,117,153,0.2); }
.sd-dlg-warn    .sd-dlg-input:focus,    .sd-dlg-warn    .sd-dlg-textarea:focus{ box-shadow: 0 0 0 3px rgba(232,139,0,0.2); }
.sd-dlg-danger  .sd-dlg-input:focus,    .sd-dlg-danger  .sd-dlg-textarea:focus{ box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.sd-dlg-success .sd-dlg-input:focus,    .sd-dlg-success .sd-dlg-textarea:focus{ box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }

.sd-dlg-input-help{
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Footer */
.sd-dlg-footer{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.015);
}
.sd-dlg-footer .btn{
  padding: 8px 16px;
  font-weight: 600;
}

/* btn-success falls im Projekt nicht sonst definiert */
.sd-dlg-footer .btn-success,
.btn-success{
  background: #22c55e;
  border-color: #22c55e;
  color: #fff;
}
.sd-dlg-footer .btn-success:hover,
.btn-success:hover{
  background: #16a34a;
  border-color: #16a34a;
}

.sd-dlg-footer .btn-warning{
  background: #E88B00;
  border-color: #E88B00;
  color: #fff;
}
.sd-dlg-footer .btn-warning:hover{
  background: #B8600C;
  border-color: #B8600C;
}

/* Mobile */
@media (max-width: 520px){
  .sd-dlg{
    max-width: none;
    border-radius: 12px;
  }
  .sd-dlg-hdr{ padding: 16px 18px 14px; gap: 12px; }
  .sd-dlg-icon{ width: 42px; height: 42px; font-size: 19px; }
  .sd-dlg-title{ font-size: 16px; }
  .sd-dlg-body{ padding: 14px 18px 16px; }
  .sd-dlg-footer{ padding: 12px 18px 16px; flex-wrap: wrap; }
  .sd-dlg-footer .btn{ flex: 1; }
}

/* Dark-Theme */
body.dark-theme .sd-dlg,
body.theme-dark .sd-dlg{
  background: #1f2937;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
body.dark-theme .sd-dlg-hdr,
body.theme-dark .sd-dlg-hdr{ border-bottom-color: rgba(255,255,255,0.08); }
body.dark-theme .sd-dlg-title,
body.theme-dark .sd-dlg-title{ color: #f3f4f6; }
body.dark-theme .sd-dlg-subtitle,
body.theme-dark .sd-dlg-subtitle{ color: #9ca3af; }
body.dark-theme .sd-dlg-close,
body.theme-dark .sd-dlg-close{ color: #9ca3af; }
body.dark-theme .sd-dlg-close:hover,
body.theme-dark .sd-dlg-close:hover{ background: rgba(255,255,255,0.08); color: #f3f4f6; }
body.dark-theme .sd-dlg-msg,
body.theme-dark .sd-dlg-msg{ color: #e5e7eb; }
body.dark-theme .sd-dlg-msg strong,
body.theme-dark .sd-dlg-msg strong{ color: #f3f4f6; }
body.dark-theme .sd-dlg-input-lbl,
body.theme-dark .sd-dlg-input-lbl{ color: #e5e7eb; }
body.dark-theme .sd-dlg-input,
body.theme-dark .sd-dlg-input,
body.dark-theme .sd-dlg-textarea,
body.theme-dark .sd-dlg-textarea{
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
body.dark-theme .sd-dlg-footer,
body.theme-dark .sd-dlg-footer{
  border-top-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

/* ══════════════════════════════════════════════════════════════════════════
   UMLAGERN — Primary Action Button (gleich prominent wie Reopen/Approve)
   ══════════════════════════════════════════════════════════════════════════ */
.tta-bu-action-shift{
  border-color: #1B7599;
  color: #1B7599;
  background: var(--white);
}
.tta-bu-action-shift i{ color: #1B7599; }
.tta-bu-action-shift:hover{
  background: rgba(27,117,153,0.08);
}
body.dark-theme .tta-bu-action-shift,
body.theme-dark .tta-bu-action-shift{
  color: #93c5fd;
  border-color: #3b82f6;
}
body.dark-theme .tta-bu-action-shift i,
body.theme-dark .tta-bu-action-shift i{ color: #93c5fd; }

/* ══════════════════════════════════════════════════════════════════════════
   SHIFT-V3 TABELLE — Übersichtlich + klare Änderungs-Anzeige
   ══════════════════════════════════════════════════════════════════════════ */

.tta-shv3-wrap{ margin-bottom: 12px; }

/* Override-Summary-Banner oben (wenn Admin-Änderungen existieren) */
.tta-shv3-override-banner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(251,146,60,0.12) 0%, rgba(232,139,0,0.05) 100%);
  border: 1.5px solid rgba(251,146,60,0.4);
  border-left: 4px solid #ea580c;
  border-radius: 10px;
  margin-bottom: 10px;
}
.tta-shv3-override-banner > i{
  font-size: 18px;
  color: #ea580c;
  flex-shrink: 0;
}
.tta-shv3-override-banner strong{
  color: #c2410c;
  font-size: 14px;
  font-weight: 700;
}
.tta-shv3-override-banner-sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* Tabelle */
.tta-shv3-table-wrap{
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.tta-shv3-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tta-shv3-table thead th{
  background: linear-gradient(180deg, #0e7490 0%, #1B7599 100%);
  color: #fff;
  font-weight: 700;
  padding: 10px 12px;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
}
.tta-shv3-table thead th small{
  text-transform: none;
  font-weight: 500;
  opacity: 0.8;
  font-size: 10px;
  margin-left: 3px;
}

.tta-shv3-table tbody td{
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* Row-States */
.tta-shv3-row:hover td{ background: rgba(27,117,153,0.04); }
.tta-shv3-row-we td{ background: rgba(248,113,113,0.04); }
.tta-shv3-row-hol td{ background: rgba(168,85,247,0.04); }
.tta-shv3-row-future{ opacity: 0.45; }
.tta-shv3-row-override{
  border-left: 4px solid #ea580c;
}
.tta-shv3-row-override td:first-child{
  border-left: 4px solid #ea580c;
  padding-left: 9px !important;
}
.tta-shv3-row-override td{
  background: rgba(251,146,60,0.06) !important;
}

/* Selection — klare visuelle Markierung */
.tta-shv3-row.tta-shift-row-src td{
  background: rgba(27,117,153,0.12) !important;
  box-shadow: inset 4px 0 0 #1B7599;
}
.tta-shv3-row.tta-shift-row-dst td{
  background: rgba(22,163,74,0.12) !important;
  box-shadow: inset 4px 0 0 #16a34a;
}

/* Spalten-Styling */
.tta-shv3-td-date{ font-weight: 700; white-space: nowrap; }
.tta-shv3-td-type{ white-space: nowrap; }
.tta-shv3-td-time{ color: var(--muted); white-space: nowrap; }
.tta-shv3-td-actual strong{ font-size: 14px; color: var(--text); }
.tta-shv3-td-target{ color: var(--muted); }

.tta-shv3-delta{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid;
}
.tta-shv3-delta-pos{ background: rgba(22,163,74,0.1); color: #16a34a; border-color: rgba(22,163,74,0.3); }
.tta-shv3-delta-neg{ background: rgba(220,38,38,0.1); color: #dc2626; border-color: rgba(220,38,38,0.3); }
.tta-shv3-delta-zero{ background: rgba(100,116,139,0.08); color: var(--muted); border-color: var(--border); }

/* Nacht-Cell */
.tta-shv3-night{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(99,102,241,0.1);
  color: #6366f1;
  border: 1px solid rgba(99,102,241,0.35);
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.tta-shv3-night i{ font-size: 10px; }
.tta-shv3-night small{ font-weight: 600; opacity: 0.85; margin-left: 2px; font-size: 11px; }

/* ──────────────────────────────────────────────────────────────────────────
   ADMIN-SHIFT-TRAIL — super sichtbare Chips die Umlagerungen in der
   User-Monats-Liste (tta-bu-entries-table) anzeigen.
   Der Trail ist KRITISCH für den Audit: auf einen Blick erkennen
   wo Stunden weg- und hingegangen sind. Zwei Richtungen:
     - OUT (→) : Quelle. Rot. "Von hier weggegangen".
     - IN  (←) : Ziel. Grün. "Hier dazugekommen".
   ────────────────────────────────────────────────────────────────────── */
.tta-bu-shift-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.tta-bu-shift-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2px;
  cursor: help;
  border: 1.5px solid transparent;
}
.tta-bu-shift-chip i{ font-size: 9px; }
.tta-bu-shift-chip strong{ font-weight: 800; }
.tta-bu-shift-chip-out{
  background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(220,38,38,0.08));
  color: #B91C1C;
  border-color: rgba(220,38,38,0.4);
}
.tta-bu-shift-chip-in{
  background: linear-gradient(135deg, rgba(22,163,74,0.15), rgba(22,163,74,0.08));
  color: #15803D;
  border-color: rgba(22,163,74,0.4);
}
.tta-bu-shift-chip-other{
  background: rgba(232,139,0,0.12);
  color: #B85F00;
  border-color: rgba(232,139,0,0.35);
}

/* Row-Highlight bei Admin-Shifts — dezenter Side-Stripe.
   Quelle = rot links, Ziel = grün links. Beide = beide. */
.tta-bu-entry-shift-out td:first-child{
  box-shadow: inset 4px 0 0 #DC2626;
}
.tta-bu-entry-shift-in td:first-child{
  box-shadow: inset 4px 0 0 #16A34A;
}
.tta-bu-entry-shift-out.tta-bu-entry-shift-in td:first-child{
  box-shadow: inset 4px 0 0 #E88B00;  /* beide gemischt = orange */
}
.tta-bu-entry-shift-out,
.tta-bu-entry-shift-in{
  background: rgba(232,139,0,0.03);  /* ganz leichter Tint */
}

/* Abbrechen-Button im Shift-Popover — roter Akzent (vs. "Auswahl ändern" neutral) */
.tta-shp-btn-abort{
  background: transparent !important;
  color: #B91C1C !important;
  border: 1.5px solid rgba(220,38,38,0.35) !important;
}
.tta-shp-btn-abort:hover{
  background: rgba(220,38,38,0.08) !important;
  border-color: #DC2626 !important;
}

/* Admin-Bonus-Chip: wird unter den Ist-Stunden angezeigt wenn der Tag
   admin_bonus_ot50 oder admin_bonus_ot100 enthält. Orange und pulsierend
   damit der Admin (und der Prüfer) sofort sieht dass der Tag einen
   Admin-Anteil hat. */
.tta-shv3-bonus-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(232,139,0,0.18), rgba(232,139,0,0.1));
  color: #B85F00;
  border: 1px solid rgba(232,139,0,0.45);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(232,139,0,0.15);
  cursor: help;
}
.tta-shv3-bonus-chip i{ font-size: 9px; }

/* ÜS-Cells */
.tta-shv3-ot50, .tta-shv3-ot100{
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid;
  white-space: nowrap;
  margin-right: 3px;
}
.tta-shv3-ot50{ background: rgba(245,158,11,0.12); color: #B8600C; border-color: rgba(245,158,11,0.4); }
.tta-shv3-ot100{ background: rgba(220,38,38,0.1);  color: #C62828; border-color: rgba(220,38,38,0.35); }

.tta-shv3-muted{ color: var(--muted); opacity: 0.5; }

/* Override-Chip im Typ */
.tta-shv3-override-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Aktion-Buttons in der Tabelle — kompakt aber klar */
.tta-shv3-actions{
  display: flex;
  gap: 4px;
}
.tta-shv3-btn{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid;
  background: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .12s;
  padding: 0;
}
.tta-shv3-btn-src{ border-color: rgba(27,117,153,0.4); color: #1B7599; }
.tta-shv3-btn-src:hover{ background: #1B7599; color: #fff; transform: scale(1.08); }
.tta-shv3-btn-dst{ border-color: rgba(22,163,74,0.4); color: #16a34a; }
.tta-shv3-btn-dst:hover{ background: #16a34a; color: #fff; transform: scale(1.08); }
.tta-shv3-btn-reset{ border-color: rgba(251,146,60,0.45); color: #ea580c; background: rgba(251,146,60,0.08); }
.tta-shv3-btn-reset:hover{ background: #ea580c; color: #fff; transform: scale(1.08); }

/* ═══ CHANGE-ROW — Hauptfeature: macht Änderungen super sichtbar ═══ */
.tta-shv3-row-detail td{
  padding: 0 !important;
  border-top: 0 !important;
}
.tta-shv3-change{
  padding: 8px 14px 10px 22px;
  background: linear-gradient(90deg, rgba(251,146,60,0.12) 0%, rgba(251,146,60,0.02) 100%);
  border-left: 4px solid #ea580c;
  border-bottom: 1px solid rgba(251,146,60,0.2);
}
.tta-shv3-change-hdr{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #c2410c;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.tta-shv3-change-hdr i{ font-size: 10px; }
.tta-shv3-change-at{
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.tta-shv3-change-list{
  font-size: 12px;
  margin-bottom: 4px;
  color: var(--text);
}
.tta-shv3-chg{
  display: inline-block;
  margin-right: 4px;
}
.tta-shv3-chg em{
  font-style: normal;
  color: var(--muted);
  font-weight: 600;
}
.tta-shv3-chg strong{
  color: #c2410c;
  font-weight: 800;
}
.tta-shv3-change-reason{
  font-size: 12px;
  color: #78350f;
  font-style: italic;
  margin-top: 3px;
}
.tta-shv3-change-reason i{ font-size: 10px; margin-right: 4px; opacity: 0.6; }

/* Dark-Theme */
body.dark-theme .tta-shv3-table-wrap,
body.theme-dark .tta-shv3-table-wrap{
  background: #1f2937;
  border-color: #374151;
}
body.dark-theme .tta-shv3-table tbody td,
body.theme-dark .tta-shv3-table tbody td{
  border-top-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-shv3-row:hover td,
body.theme-dark .tta-shv3-row:hover td{
  background: rgba(147,197,253,0.05);
}
body.dark-theme .tta-shv3-row-override td,
body.theme-dark .tta-shv3-row-override td{
  background: rgba(251,146,60,0.12) !important;
}
body.dark-theme .tta-shv3-td-actual strong,
body.theme-dark .tta-shv3-td-actual strong{ color: #f3f4f6; }
body.dark-theme .tta-shv3-td-target,
body.theme-dark .tta-shv3-td-target,
body.dark-theme .tta-shv3-td-time,
body.theme-dark .tta-shv3-td-time{ color: #9ca3af; }
body.dark-theme .tta-shv3-btn,
body.theme-dark .tta-shv3-btn{ background: #111827; }
body.dark-theme .tta-shv3-change,
body.theme-dark .tta-shv3-change{
  background: linear-gradient(90deg, rgba(251,146,60,0.18) 0%, rgba(251,146,60,0.04) 100%);
}
body.dark-theme .tta-shv3-change-reason,
body.theme-dark .tta-shv3-change-reason{ color: #fbbf24; }
body.dark-theme .tta-shv3-chg strong,
body.theme-dark .tta-shv3-chg strong{ color: #fdba74; }
body.dark-theme .tta-shv3-override-banner,
body.theme-dark .tta-shv3-override-banner{
  background: linear-gradient(135deg, rgba(251,146,60,0.2) 0%, rgba(232,139,0,0.08) 100%);
}
body.dark-theme .tta-shv3-override-banner strong,
body.theme-dark .tta-shv3-override-banner strong{ color: #fdba74; }

/* Mobile */
@media (max-width: 900px){
  .tta-shv3-table{ font-size: 12px; }
  .tta-shv3-table thead th{ padding: 8px 8px; font-size: 10.5px; }
  .tta-shv3-table tbody td{ padding: 8px 8px; }
  .tta-shv3-btn{ width: 28px; height: 28px; font-size: 10.5px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NACHT-BONUS DIALOG — Bucket-Auswahl + Preview-Math
   ══════════════════════════════════════════════════════════════════════════ */
.ttnb-bucket-wrap{
  background: rgba(27,117,153,0.04);
  border: 1px solid rgba(27,117,153,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
  margin-bottom: 14px;
}
.ttnb-bucket-lbl{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ttnb-bucket-lbl i{ color: #1B7599; }

.ttnb-bucket-options{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ttnb-bucket-option{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: all .12s;
}
.ttnb-bucket-option:hover{
  border-color: rgba(27,117,153,0.4);
  background: rgba(27,117,153,0.03);
}
.ttnb-bucket-option input[type="radio"]{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: #1B7599;
  cursor: pointer;
}
.ttnb-bucket-option:has(input:checked){
  border-color: #1B7599;
  background: rgba(27,117,153,0.08);
  box-shadow: 0 1px 3px rgba(27,117,153,0.12);
}
.ttnb-bucket-opt-body{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.ttnb-bucket-opt-body strong{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ttnb-bucket-opt-body small{
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}

/* Math-Nachweis in der Preview-Box */
.ttnb-preview-math{
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  border-left: 3px solid #1B7599;
}
.ttnb-preview-math i{ color: #1B7599; font-size: 11px; }
.ttnb-preview-math code{
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px){
  .ttnb-bucket-options{ grid-template-columns: 1fr; }
}

/* Dark-Theme */
body.dark-theme .ttnb-bucket-wrap,
body.theme-dark .ttnb-bucket-wrap{
  background: rgba(27,117,153,0.1);
  border-color: rgba(27,117,153,0.45);
}
body.dark-theme .ttnb-bucket-option,
body.theme-dark .ttnb-bucket-option{
  background: #111827;
  border-color: #374151;
}
body.dark-theme .ttnb-bucket-opt-body strong,
body.theme-dark .ttnb-bucket-opt-body strong{ color: #f3f4f6; }
body.dark-theme .ttnb-preview-math,
body.theme-dark .ttnb-preview-math{
  background: rgba(0,0,0,0.25);
}
body.dark-theme .ttnb-preview-math code,
body.theme-dark .ttnb-preview-math code{ color: #e5e7eb; }

/* Pick-Button Active-Pulse nach Klick — visuelles Feedback */
.tta-shv3-btn.tta-shv3-btn-active{
  animation: ttaShv3Pulse 0.3s ease;
}
@keyframes ttaShv3Pulse{
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(27,117,153,0.2); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHIFT-DIALOG — Status-Bar (zeigt Fortschritt Quelle/Ziel)
   ══════════════════════════════════════════════════════════════════════════ */
.tta-shift-status-bar{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-top: 12px;
  background: linear-gradient(135deg, rgba(27,117,153,0.06) 0%, rgba(22,163,74,0.04) 100%);
  border: 1.5px solid var(--border);
  border-radius: 12px;
}
.tta-ssb-step{
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 8px 12px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  transition: all .2s;
  min-width: 0;
}
.tta-ssb-num{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  transition: all .2s;
}
.tta-ssb-lbl{
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.tta-ssb-val{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tta-ssb-arrow{
  color: var(--muted);
  font-size: 14px;
  flex-shrink: 0;
}
/* Step "done" State */
.tta-ssb-step.tta-ssb-done{
  background: rgba(22,163,74,0.08);
  border-color: #16a34a;
}
.tta-ssb-step.tta-ssb-done .tta-ssb-num{
  background: #16a34a;
  color: #fff;
}
.tta-ssb-step.tta-ssb-done .tta-ssb-lbl{ color: #16a34a; }

/* Src-Step hat Blau-Accent, Dst-Step Grün */
.tta-ssb-step-src.tta-ssb-done{ background: rgba(27,117,153,0.1); border-color: #1B7599; }
.tta-ssb-step-src.tta-ssb-done .tta-ssb-num{ background: #1B7599; }
.tta-ssb-step-src.tta-ssb-done .tta-ssb-lbl{ color: #1B7599; }

/* ══════════════════════════════════════════════════════════════════════════
   SHIFT-DIALOG — Floating Popover (erscheint bei Quelle+Ziel)
   ══════════════════════════════════════════════════════════════════════════ */
.tta-shift-popover{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;  /* Über insp-overlay */
  display: flex;
  flex-direction: column;
  animation: ttaShpSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 620px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
@keyframes ttaShpSlideUp{
  from { opacity: 0; transform: translate(-50%, -40%) scale(0.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.tta-shift-popover-inner{
  background: var(--white);
  border: 2px solid #1B7599;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.tta-shift-popover-hdr{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1B7599 0%, #134a61 100%);
  color: #fff;
}
.tta-shift-popover-hdr i{ font-size: 16px; }
.tta-shift-popover-hdr strong{ flex: 1; font-size: 14px; font-weight: 700; }
.tta-shift-popover-close{
  background: rgba(255,255,255,0.15);
  border: 0;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.tta-shift-popover-close:hover{ background: rgba(255,255,255,0.3); }

/* Flow (Von-Karte → Pfeil → Nach-Karte) */
.tta-shift-popover-flow{
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(27,117,153,0.04), transparent);
}
.tta-shift-popover-card{
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tta-shift-popover-card-src{ border-color: #1B7599; background: rgba(27,117,153,0.05); }
.tta-shift-popover-card-dst{ border-color: #16a34a; background: rgba(22,163,74,0.05); }

.tta-shp-card-lbl{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tta-shift-popover-card-src .tta-shp-card-lbl{ color: #1B7599; }
.tta-shift-popover-card-dst .tta-shp-card-lbl{ color: #16a34a; }

.tta-shp-card-val{
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tta-shp-change{
  margin-top: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  transition: all .12s;
}
.tta-shift-popover-card-src .tta-shp-change{ border-color: rgba(27,117,153,0.4); color: #1B7599; }
.tta-shift-popover-card-src .tta-shp-change:hover{ background: #1B7599; color: #fff; }
.tta-shift-popover-card-dst .tta-shp-change{ border-color: rgba(22,163,74,0.4); color: #16a34a; }
.tta-shift-popover-card-dst .tta-shp-change:hover{ background: #16a34a; color: #fff; }

.tta-shift-popover-arrow{
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 18px;
  flex-shrink: 0;
}

/* Menge-Eingabe */
.tta-shift-popover-amount{
  padding: 10px 16px 14px;
}
.tta-shp-amount-lbl{
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.tta-shp-amount-lbl i{ color: #1B7599; }
.tta-shp-max{
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
}
.tta-shp-amount-row{
  display: flex;
  gap: 8px;
  align-items: center;
}
.tta-shp-hours{
  width: 90px;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
}
.tta-shp-hours:focus{
  outline: none;
  border-color: #1B7599;
  box-shadow: 0 0 0 3px rgba(27,117,153,0.15);
}
.tta-shp-chips{
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.tta-shp-chip{
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.tta-shp-chip:hover{ background: #1B7599; color: #fff; border-color: #1B7599; }

/* Footer-Actions */
.tta-shift-popover-footer{
  display: flex;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.02);
}
.tta-shp-btn{
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px solid;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
}
.tta-shp-btn-cancel{ border-color: var(--border); background: var(--white); color: var(--text); }
.tta-shp-btn-cancel:hover{ background: var(--surface); }
.tta-shp-btn-exec{
  border-color: #1B7599;
  background: linear-gradient(135deg, #1B7599 0%, #134a61 100%);
  color: #fff;
  margin-left: auto;
  flex: 1;
  justify-content: center;
  animation: ttaShpExecPulse 2s ease-in-out infinite;
}
@keyframes ttaShpExecPulse{
  0%, 100% { box-shadow: 0 2px 8px rgba(27,117,153,0.3); }
  50%      { box-shadow: 0 4px 16px rgba(27,117,153,0.55); }
}
.tta-shp-btn-exec:hover{
  background: linear-gradient(135deg, #134a61 0%, #0a2f40 100%);
  transform: translateY(-1px);
}

/* Row-Hint beim "Ändern" — blinkt kurz in der Tabelle */
.tta-shv3-row.tta-shv3-row-hint td{
  animation: ttaRowHint 1.8s ease-out;
}
@keyframes ttaRowHint{
  0%   { background: rgba(232,139,0,0.5) !important; box-shadow: inset 4px 0 0 #E88B00; }
  100% { background: transparent; }
}

/* Mobile */
@media (max-width: 640px){
  .tta-shift-popover{ bottom: 10px; width: calc(100% - 20px); }
  .tta-shift-popover-flow{ flex-direction: column; gap: 6px; padding: 10px; }
  .tta-shift-popover-arrow{ transform: rotate(90deg); align-self: center; }
  .tta-shp-chips{ justify-content: center; }
}

/* Dark-Theme */
body.dark-theme .tta-shift-status-bar,
body.theme-dark .tta-shift-status-bar{
  background: linear-gradient(135deg, rgba(27,117,153,0.1) 0%, rgba(22,163,74,0.06) 100%);
  border-color: #374151;
}
body.dark-theme .tta-ssb-step,
body.theme-dark .tta-ssb-step{
  background: #1f2937;
  border-color: #374151;
}
body.dark-theme .tta-ssb-num,
body.theme-dark .tta-ssb-num{ background: #374151; color: #e5e7eb; }
body.dark-theme .tta-ssb-val,
body.theme-dark .tta-ssb-val{ color: #f3f4f6; }

body.dark-theme .tta-shift-popover-inner,
body.theme-dark .tta-shift-popover-inner{
  background: #1f2937;
  border-color: #3b82f6;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
body.dark-theme .tta-shift-popover-card,
body.theme-dark .tta-shift-popover-card{
  background: #111827;
  border-color: #374151;
}
body.dark-theme .tta-shp-card-val,
body.theme-dark .tta-shp-card-val{ color: #f3f4f6; }
body.dark-theme .tta-shp-hours,
body.theme-dark .tta-shp-hours{
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
body.dark-theme .tta-shp-chip,
body.theme-dark .tta-shp-chip{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-shp-btn-cancel,
body.theme-dark .tta-shp-btn-cancel{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .tta-shift-popover-footer,
body.theme-dark .tta-shift-popover-footer{
  background: rgba(255,255,255,0.02);
  border-top-color: #374151;
}

/* ══════════════════════════════════════════════════════════════════════════
   FINALIZE-TOGGLE — Multi-Purpose-Button, inaktiv (outline) → aktiv (filled).
   Ein UI-Element, zwei Zustände: zeigt immer ob der Monat fertig markiert
   ist und welchen Klick der User macht (setzen vs. aufheben).

   Inaktiv = Monat approved, Klick markiert als fertig (outline grün)
   Aktiv   = Monat finalized, Klick hebt die Markierung auf (filled grün)
   ══════════════════════════════════════════════════════════════════════════ */
.tta-bu-action-finalize-toggle{
  border-color: #16a34a;
  color: #16a34a;
  background: var(--white);
  position: relative;
}
.tta-bu-action-finalize-toggle i{ color: #16a34a; }
.tta-bu-action-finalize-toggle:hover:not(:disabled){
  background: #16a34a;
  color: #fff;
}
.tta-bu-action-finalize-toggle:hover:not(:disabled) i{ color: #fff; }
.tta-bu-action-finalize-toggle:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--muted);
}
.tta-bu-action-finalize-toggle:disabled i{ color: var(--muted); }

/* Aktiv-Zustand (Monat ist finalized) — filled green mit leichter Schulter */
.tta-bu-action-finalize-toggle.tta-bu-action-finalize-active{
  background: linear-gradient(135deg, #16a34a, #107E54);
  color: #fff;
  border-color: #107E54;
  box-shadow: 0 2px 6px rgba(16,126,84,0.25);
}
.tta-bu-action-finalize-toggle.tta-bu-action-finalize-active i{ color: #fff; }
.tta-bu-action-finalize-toggle.tta-bu-action-finalize-active:hover{
  background: linear-gradient(135deg, #15803d, #0d6948);
  transform: translateY(-1px);
  box-shadow: 0 3px 9px rgba(16,126,84,0.35);
}

/* Backward-compat: alte .tta-bu-action-finalize Klasse bleibt funktional
   falls irgendwo noch referenziert */
.tta-bu-action-finalize{
  border-color: #16a34a;
  color: #16a34a;
  background: var(--white);
}
.tta-bu-action-finalize i{ color: #16a34a; }
.tta-bu-action-finalize:hover{
  background: #16a34a;
  color: #fff;
}
.tta-bu-action-finalize:hover i{ color: #fff; }
body.dark-theme .tta-bu-action-finalize,
body.theme-dark .tta-bu-action-finalize{
  color: #4ade80;
  border-color: #16a34a;
}
body.dark-theme .tta-bu-action-finalize i,
body.theme-dark .tta-bu-action-finalize i{ color: #4ade80; }

/* ══════════════════════════════════════════════════════════════════════════
   EXPORT-WARNUNG — Liste der nicht-fertigen User im Dialog
   ══════════════════════════════════════════════════════════════════════════ */
.tta-exp-warn-list{
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 4px;
}
.tta-exp-warn-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.tta-exp-warn-row:last-child{ border-bottom: 0; }
.tta-exp-warn-row:hover{ background: rgba(0,0,0,0.03); }
.tta-exp-warn-row i{
  font-size: 13px;
  width: 16px;
  flex-shrink: 0;
}
.tta-exp-warn-row strong{
  flex: 1;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tta-exp-warn-status{
  font-size: 11.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.tta-exp-warn-more{
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.04);
}
body.dark-theme .tta-exp-warn-list,
body.theme-dark .tta-exp-warn-list{
  background: #111827;
  border-color: #374151;
}
body.dark-theme .tta-exp-warn-row,
body.theme-dark .tta-exp-warn-row{
  border-bottom-color: rgba(255,255,255,0.06);
}
body.dark-theme .tta-exp-warn-row strong,
body.theme-dark .tta-exp-warn-row strong{ color: #f3f4f6; }

/* ══════════════════════════════════════════════════════════════════════════
   V3-BUTTON SELECTED — stark sichtbar wenn gewählt, Hinweis auf Toggle
   ══════════════════════════════════════════════════════════════════════════ */
.tta-shv3-btn.tta-shv3-btn-selected{
  position: relative;
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(255,255,255,1), 0 0 0 5px currentColor;
  font-weight: 700;
}
.tta-shv3-btn-src.tta-shv3-btn-selected{
  background: #1B7599;
  color: #fff;
}
.tta-shv3-btn-src.tta-shv3-btn-selected::after{
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.tta-shv3-btn-dst.tta-shv3-btn-selected{
  background: #16a34a;
  color: #fff;
}
.tta-shv3-btn-dst.tta-shv3-btn-selected::after{
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  background: #1B7599;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Hover-Hint: Noch-mal-klicken = abwählen */
.tta-shv3-btn-selected:hover{
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}
.tta-shv3-btn-selected:hover::before{
  content: 'Abwählen';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: #1f2937;
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.tta-shv3-btn-selected:hover::after{
  background: #dc2626 !important;
}

/* Dark-Theme Chip-Farbe + weitere Kontraste */
body.dark-theme .tta-shp-chip,
body.theme-dark .tta-shp-chip{
  color: #f3f4f6;
  background: #111827;
  border-color: #374151;
}
body.dark-theme .tta-shp-chip:hover,
body.theme-dark .tta-shp-chip:hover{
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

/* Die Chip-Regel die schon im Dark-Theme-Block war explizit überschreiben falls zuerst greift */
body.dark-theme .tta-shift-popover .tta-shp-chip,
body.theme-dark .tta-shift-popover .tta-shp-chip{
  color: #f3f4f6 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FINALIZE — Als fertig markieren (Admin-intern, grüner Outline-Button)
   ══════════════════════════════════════════════════════════════════════════ */
.tta-bu-action-finalize{
  border-color: #16a34a;
  color: #16a34a;
  background: var(--white);
}
.tta-bu-action-finalize i{ color: #16a34a; }
.tta-bu-action-finalize:hover{
  background: rgba(22,163,74,0.08);
}
body.dark-theme .tta-bu-action-finalize,
body.theme-dark .tta-bu-action-finalize{
  color: #86efac;
  border-color: #16a34a;
}
body.dark-theme .tta-bu-action-finalize i,
body.theme-dark .tta-bu-action-finalize i{ color: #86efac; }

/* ══════════════════════════════════════════════════════════════════════════
   STATUS-BADGES in Action-Row (nicht klickbar, nur Info)
   Für "Fertig markiert" (bei approved) + "Zeiterfassung fehlt" (bei in_progress)
   Gleiche Größe/Look wie Primary-Buttons, nur ohne Hover/Klick
   ══════════════════════════════════════════════════════════════════════════ */
.tta-bu-action-badge{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 2px solid;
  border-radius: 12px;
  cursor: default;
  min-width: 170px;
  text-align: left;
  user-select: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}
.tta-bu-action-badge i{
  font-size: 20px;
  flex-shrink: 0;
}
.tta-bu-action-badge span{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.tta-bu-action-badge strong{
  font-size: 14px;
  font-weight: 700;
}
.tta-bu-action-badge small{
  font-size: 10.5px;
  opacity: 0.75;
  font-weight: 500;
}

/* "Fertig markiert" — grün (Status "approved" oder "finalized") */
.tta-bu-action-badge-done{
  border-color: #16a34a;
  background: linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(22,163,74,0.05) 100%);
  color: #15803d;
}
.tta-bu-action-badge-done i{ color: #16a34a; }

/* "Zeiterfassung fehlt" — orange/rot (kein Zettel abgegeben) */
.tta-bu-action-badge-missing{
  border-color: #E88B00;
  background: linear-gradient(135deg, rgba(232,139,0,0.1) 0%, rgba(245,158,11,0.05) 100%);
  color: #B8600C;
  animation: ttaMissingPulse 3s ease-in-out infinite;
}
.tta-bu-action-badge-missing i{ color: #E88B00; }
@keyframes ttaMissingPulse{
  0%, 100% { box-shadow: 0 2px 5px rgba(232,139,0,0.1); }
  50%      { box-shadow: 0 4px 12px rgba(232,139,0,0.3); }
}

/* Dark-Theme */
body.dark-theme .tta-bu-action-badge-done,
body.theme-dark .tta-bu-action-badge-done{
  background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.08) 100%);
  color: #86efac;
}
body.dark-theme .tta-bu-action-badge-done i,
body.theme-dark .tta-bu-action-badge-done i{ color: #86efac; }
body.dark-theme .tta-bu-action-badge-missing,
body.theme-dark .tta-bu-action-badge-missing{
  background: linear-gradient(135deg, rgba(232,139,0,0.2) 0%, rgba(245,158,11,0.1) 100%);
  color: #fdba74;
}
body.dark-theme .tta-bu-action-badge-missing i,
body.theme-dark .tta-bu-action-badge-missing i{ color: #fdba74; }

/* ══════════════════════════════════════════════════════════════════════════
   PRIMARY-BUTTON Disabled-State — klar sichtbar, nicht klickbar
   ══════════════════════════════════════════════════════════════════════════ */
.tta-bu-action-primary:disabled,
.tta-bu-action-primary[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
  animation: none !important;
  box-shadow: none;
}
.tta-bu-action-primary:disabled:hover,
.tta-bu-action-primary[disabled]:hover{
  transform: none;
  box-shadow: none;
}
/* Finalize disabled: grauer Text + crossed-out check-flag Feel */
.tta-bu-action-finalize:disabled,
.tta-bu-action-finalize[disabled]{
  border-color: var(--border) !important;
  color: var(--muted) !important;
  background: var(--surface, #f3f4f6) !important;
}
.tta-bu-action-finalize:disabled i,
.tta-bu-action-finalize[disabled] i{
  color: var(--muted) !important;
}

/* Dark-Theme */
body.dark-theme .tta-bu-action-finalize:disabled,
body.dark-theme .tta-bu-action-finalize[disabled],
body.theme-dark .tta-bu-action-finalize:disabled,
body.theme-dark .tta-bu-action-finalize[disabled]{
  background: #111827 !important;
  border-color: #374151 !important;
  color: #6b7280 !important;
}
body.dark-theme .tta-bu-action-finalize:disabled i,
body.dark-theme .tta-bu-action-finalize[disabled] i,
body.theme-dark .tta-bu-action-finalize:disabled i,
body.theme-dark .tta-bu-action-finalize[disabled] i{
  color: #6b7280 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NACHT-ZUSCHLAG MULTI-TARGET — Ziele-Liste mit Stunden + Bucket pro Ziel
   ══════════════════════════════════════════════════════════════════════════ */
.ttnb-targets-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.ttnb-target-row{
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all .15s;
}
.ttnb-target-row:hover{
  border-color: #16a34a;
  box-shadow: 0 2px 8px rgba(22,163,74,0.1);
}
.ttnb-tr-hdr{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.ttnb-tr-num{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.ttnb-tr-dst{
  flex: 1;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.ttnb-tr-dst:focus{
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.ttnb-tr-remove{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all .12s;
}
.ttnb-tr-remove:hover{
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}
.ttnb-tr-body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-left: 34px;
}
.ttnb-tr-hours{}
.ttnb-tr-h-lbl, .ttnb-tr-b-lbl{
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ttnb-tr-h-max{
  float: right;
  text-transform: none;
  letter-spacing: 0;
  color: #16a34a;
  font-weight: 600;
}
.ttnb-tr-h-row{
  display: flex;
  gap: 6px;
  align-items: center;
}
.ttnb-tr-h-input{
  width: 80px;
  padding: 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
  color: var(--text);
  background: var(--white);
}
.ttnb-tr-h-input:focus{
  outline: none;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.ttnb-tr-h-chips{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ttnb-tr-h-chip{
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .1s;
  font-family: inherit;
}
.ttnb-tr-h-chip:not(:disabled):hover{
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}
.ttnb-tr-h-chip:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

/* Max-Chip: im Ruhezustand outline-only (leer), um klar zu machen dass der
   User noch draufklicken muss um den Max zu ziehen.
   Akzent-Farbe (grün) nur in Border + Icon, Hintergrund bleibt hell. */
.ttnb-tr-h-chip-max{
  background: var(--surface);
  color: #16a34a;
  border-color: #16a34a;
}
.ttnb-tr-h-chip-max:not(:disabled):hover{
  background: rgba(22,163,74,0.1);
  color: #16a34a;
  border-color: #16a34a;
}

/* .ttnb-tr-h-chip-filled: "aktiv" — gilt für ALLE Chip-Typen wenn ihr Wert
   der aktuell gewählte Stundenwert ist. Bei Chip-Max heißt das: User hat
   Max bereits gezogen. Bei normalen Chips: ihr Zahlenwert ist eingestellt. */
.ttnb-tr-h-chip.ttnb-tr-h-chip-filled{
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 1px 3px rgba(22,163,74,0.35);
}
.ttnb-tr-h-chip-max.ttnb-tr-h-chip-filled{
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: #16a34a;
  box-shadow: 0 1px 4px rgba(22,163,74,0.4);
}

.ttnb-tr-b-row{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ttnb-tr-b-opt{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .1s;
  user-select: none;
}
.ttnb-tr-b-opt:hover{ border-color: #16a34a; }
.ttnb-tr-b-opt input{
  margin: 0;
  width: 13px;
  height: 13px;
  accent-color: #16a34a;
}
.ttnb-tr-b-opt:has(input:checked){
  background: rgba(22,163,74,0.1);
  border-color: #16a34a;
  color: #15803d;
  font-weight: 700;
}

/* Footer mit Add-Button + Summe */
.ttnb-targets-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ttnb-add-target-btn{
  padding: 8px 14px;
  background: var(--white);
  border: 1.5px dashed #16a34a;
  color: #16a34a;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
  font-family: inherit;
}
.ttnb-add-target-btn:hover{
  background: #16a34a;
  color: #fff;
  border-style: solid;
}

.ttnb-targets-sum{
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.ttnb-targets-sum strong{ color: var(--text); font-weight: 800; }
.ttnb-targets-sum-ok{ color: #16a34a; }
.ttnb-targets-sum-ok strong{ color: #15803d; }
.ttnb-targets-sum-err{ color: #dc2626; }
.ttnb-targets-sum-err strong{ color: #dc2626; }

/* Preview Multi-Rows */
.ttnb-preview-src-line{
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(127,0,220,0.08), rgba(127,0,220,0.03));
  border-left: 3px solid #7F00DC;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 10px;
}
.ttnb-preview-src-line i{ color: #7F00DC; margin-right: 6px; }
.ttnb-preview-rows{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ttnb-preview-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: 8px;
}
.ttnb-preview-row-idx{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.ttnb-preview-row-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ttnb-preview-row-tgt{ font-size: 13px; }
.ttnb-preview-row-tgt i{ color: #16a34a; margin-right: 4px; }
.ttnb-preview-row-math{
  font-size: 11.5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  color: var(--muted);
}
.ttnb-preview-row-math strong{ color: #16a34a; }

.ttnb-preview-empty{
  padding: 20px;
  text-align: center;
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}
.ttnb-preview-empty i{ margin-right: 6px; color: #1B7599; }

/* Mobile */
@media (max-width: 640px){
  .ttnb-tr-body{ grid-template-columns: 1fr; padding-left: 0; }
  .ttnb-targets-footer{ flex-direction: column; align-items: stretch; }
  .ttnb-targets-sum{ text-align: right; }
}

/* Dark-Theme */
body.dark-theme .ttnb-target-row,
body.theme-dark .ttnb-target-row{
  background: #1f2937;
  border-color: #374151;
}
body.dark-theme .ttnb-tr-dst,
body.theme-dark .ttnb-tr-dst,
body.dark-theme .ttnb-tr-h-input,
body.theme-dark .ttnb-tr-h-input{
  background: #111827;
  border-color: #374151;
  color: #f3f4f6;
}
body.dark-theme .ttnb-tr-h-chip,
body.theme-dark .ttnb-tr-h-chip,
body.dark-theme .ttnb-tr-b-opt,
body.theme-dark .ttnb-tr-b-opt{
  background: #111827;
  border-color: #374151;
  color: #e5e7eb;
}
body.dark-theme .ttnb-tr-b-opt:has(input:checked),
body.theme-dark .ttnb-tr-b-opt:has(input:checked){
  background: rgba(22,163,74,0.2);
  color: #86efac;
}
body.dark-theme .ttnb-add-target-btn,
body.theme-dark .ttnb-add-target-btn{
  background: #1f2937;
  color: #86efac;
}
body.dark-theme .ttnb-preview-empty,
body.theme-dark .ttnb-preview-empty,
body.dark-theme .ttnb-preview-row,
body.theme-dark .ttnb-preview-row{
  background: #111827;
  color: #e5e7eb;
}
body.dark-theme .ttnb-preview-row-math,
body.theme-dark .ttnb-preview-row-math{ color: #9ca3af; }
body.dark-theme .ttnb-preview-row-math strong,
body.theme-dark .ttnb-preview-row-math strong{ color: #86efac; }

/* ══════════════════════════════════════════════════════════════════════════
   ★★★ RESPONSIVE MEGA-PASS — Phase 1 ★★★
   Kritische Mobile-Fixes für: TTA (Verwaltung), TT (User), Urlaubskalender,
   Multi-Target Nacht-Zuschlag, Shift-Dialog, Overlays
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── TABLETS (641px - 1024px): kompaktere Primary-Buttons ─── */
@media (max-width: 1024px){
  .tta-bu-detail-actions{
    gap: 8px;
    flex-wrap: wrap;
  }
  .tta-bu-action-primary,
  .tta-bu-action-badge{
    min-width: 150px;
    padding: 10px 14px;
  }
  .tta-bu-action-primary i,
  .tta-bu-action-badge i{ font-size: 18px; }
  .tta-bu-action-primary strong,
  .tta-bu-action-badge strong{ font-size: 13px; }
  .tta-bu-action-primary small,
  .tta-bu-action-badge small{ font-size: 10px; }
}

/* ─── MOBILE (< 640px): komplettes Stacking der Action-Buttons ─── */
@media (max-width: 640px){

  /* ═══ TTA — Admin-Verwaltung ═══ */

  /* Primary-Actions: vertikal, full-width */
  .tta-bu-detail-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 0 !important;
    margin-top: 12px;
  }
  .tta-bu-action-primary,
  .tta-bu-action-badge{
    width: 100%;
    min-width: 0;
    min-height: 52px;
  }
  .tta-bu-action-tools{
    width: 100%;
    flex-direction: row !important;
    margin-left: 0 !important;
    justify-content: center;
    gap: 8px;
  }
  .tta-bu-action-tool{
    flex: 1;
    min-width: 0;
    justify-content: center;
  }

  /* Detail-Header: Avatar + Namen + Actions untereinander */
  .tta-bu-detail-hdr,
  .vac-bu-detail-hdr{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 12px;
  }
  .tta-bu-detail-avatar,
  .vac-bu-detail-avatar{
    align-self: flex-start;
  }

  /* Stats-Grid: 2 Spalten statt 4-5 */
  .tta-bu-stats,
  .vac-bu-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .tta-bu-stat,
  .vac-bu-stat{ padding: 10px 8px; }
  .tta-bu-stat-num,
  .vac-bu-stat-num{ font-size: 22px; }
  .tta-bu-stat-lbl,
  .vac-bu-stat-lbl{ font-size: 10px; }

  /* Period-Picker: kompakt */
  .tta-period-picker{
    padding: 8px 10px;
    gap: 8px;
  }
  .tta-period-picker-title{
    font-size: 16px;
  }
  .tta-period-picker-btn{
    width: 36px;
    height: 36px;
  }
  .tta-period-picker-today{
    padding: 6px 10px;
    font-size: 11px;
  }

  /* Team-Grid: 1 Spalte */
  .tta-team-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* V3-Shift-Tabelle: horizontal scrollen */
  .tta-shift-v3-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tta-shv3-table{
    min-width: 760px;  /* Bleibt lesbar, scrollt horizontal */
  }

  /* Modal-Overlays: volle Breite */
  .insp-overlay .insp-wizard,
  .ttnb-overlay .ttnb-modal{
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0;
  }

  /* Shift-Dialog: Header kompakt */
  .insp-hdr{
    padding: 10px 12px !important;
    gap: 8px;
  }
  .insp-hdr h2{
    font-size: 15px !important;
    line-height: 1.2;
  }
  .insp-subtitle{
    font-size: 11px !important;
  }

  /* ═══ MULTI-TARGET NACHT-ZUSCHLAG ═══ */

  .ttnb-modal{
    border-radius: 0 !important;
    height: 100vh !important;
  }
  .ttnb-hdr{
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .ttnb-hdr h2{ font-size: 15px; }
  .ttnb-hdr p{ font-size: 11px; }
  .ttnb-hdr-icon{
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .ttnb-body{ padding: 12px; gap: 14px; }

  /* Chip-Row: horizontal scroll */
  .ttnb-chip-row{
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
  }
  .ttnb-chip{
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 72px;
  }

  /* Target-Row Body: einspaltig */
  .ttnb-target-row{
    padding: 10px;
  }
  .ttnb-tr-hdr{
    margin-bottom: 8px;
    gap: 6px;
  }
  .ttnb-tr-body{
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
    gap: 10px;
  }
  .ttnb-tr-h-row{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .ttnb-tr-h-input{
    width: 100%;
    font-size: 16px;  /* iOS-Zoom-Prevention */
  }
  .ttnb-tr-h-chips{
    justify-content: center;
  }
  .ttnb-tr-h-chip{
    flex: 1;
    min-width: 0;
  }
  .ttnb-tr-b-row{
    flex-direction: column;
  }
  .ttnb-tr-b-opt{
    width: 100%;
    justify-content: flex-start;
  }

  /* Footer mit Add-Button */
  .ttnb-targets-footer{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ttnb-add-target-btn{
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .ttnb-targets-sum{
    text-align: center;
    padding: 8px 10px;
    background: var(--surface);
    border-radius: 8px;
  }

  /* Preview: Kompakter */
  .ttnb-preview-src-line{ font-size: 12px; padding: 8px 12px; }
  .ttnb-preview-row{ padding: 6px 10px; }
  .ttnb-preview-row-math{ font-size: 11px; line-height: 1.4; }

  /* Footer mit Execute-Button */
  .ttnb-footer{
    padding: 10px 12px !important;
    flex-direction: column-reverse;
    gap: 8px;
  }
  .ttnb-btn{
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* ═══ SHIFT-POPOVER ═══ */
  .tta-shift-popover{
    top: auto !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
  }
  .tta-shift-popover-inner{ border-radius: 14px; }
  .tta-shift-popover-flow{
    flex-direction: column !important;
    gap: 6px !important;
  }
  .tta-shift-popover-arrow{
    transform: rotate(90deg);
    align-self: center;
    padding: 2px 0;
  }
  .tta-shift-popover-footer{
    flex-direction: column-reverse;
    gap: 6px;
  }
  .tta-shp-btn{
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* ═══ USER-ZEITERFASSUNG (tt-*) ═══ */

  /* Tagesansicht-Form: Stack, volle Breite, bessere Tap-Targets */
  .tt-form-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .tt-form-field input,
  .tt-form-field select,
  .tt-form-field textarea{
    font-size: 16px;  /* iOS-Zoom-Prevention */
    min-height: 44px;
  }

  /* Type-Button-Grid: 3 Spalten */
  .tt-type-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .tt-type-btn{
    min-height: 60px;
    font-size: 10px;
    padding: 6px 2px;
  }
  .tt-type-btn i{ font-size: 18px; margin-bottom: 2px; }

  /* Monats-Header / Summary */
  .tt-summary{
    padding: 12px;
  }
  .tt-summary-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }
  .tt-summary-item{ padding: 8px; }
  .tt-summary-num{ font-size: 20px; }
  .tt-summary-lbl{ font-size: 10px; }

  /* Tagesliste in Monatsansicht */
  .tt-day-card{
    padding: 10px 12px;
  }
  .tt-day-head{
    gap: 8px;
  }
  .tt-day-date{ font-size: 13px; }
  .tt-day-hours{ font-size: 15px; }

  /* ═══ URLAUBSKALENDER ═══ */

  /* Year-View Grid: 1 Spalte auf Mobile */
  .vac-year-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  /* Jahres-Tabelle scrollbar */
  .vac-year-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Filter-Bar kompakter + scrollable */
  .vac-filter-bar{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding: 8px 10px;
  }
  .vac-filter-bar > *{
    flex-shrink: 0;
  }

  /* Tabs scrollbar */
  .vac-tabs-bar{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  /* Back-Button mobile sichtbar */
  .vac-bu-back-mobile{
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    margin-bottom: 8px;
  }
  .vac-bu-back-mobile:hover{ background: var(--hover); }

  /* Absence-Modal: Full-screen */
  .vac-modal{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .vac-modal-body{
    max-height: calc(100vh - 120px) !important;
  }
}

/* ─── TINY MOBILE (< 380px): noch engere Spalten ─── */
@media (max-width: 380px){
  .tta-bu-stats,
  .vac-bu-stats,
  .tt-summary-grid{
    grid-template-columns: 1fr !important;
  }
  .tt-type-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ttnb-tr-h-chips{
    flex-wrap: wrap;
  }
}

/* ─── TOUCH DEVICES (egal welche Größe): größere Tap-Targets ─── */
@media (pointer: coarse){
  .tta-shv3-btn,
  .ttnb-chip,
  .ttfc-qchip,
  .tta-shp-chip,
  .ttnb-tr-h-chip{
    min-height: 36px;
    min-width: 36px;
  }
  button:not(.sd-tab):not(.tta-ssb-step):not(.tta-shv3-btn-reset){
    min-height: 40px;
  }
}

/* ─── LANDSCAPE MOBILE: Modal etwas Platz oben und unten ─── */
@media (max-width: 900px) and (orientation: landscape){
  .insp-overlay .insp-wizard,
  .ttnb-overlay .ttnb-modal,
  .vac-modal{
    height: auto !important;
    max-height: 100vh !important;
  }
  .ttnb-body,
  .insp-body{
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}

/* ─── DESKTOP > 1440px: mehr Content sichtbar ─── */
@media (min-width: 1441px){
  .tta-shell,
  .vac-shell{
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ★★★ RESPONSIVE MEGA-PASS — Phase 2 ★★★
   - Anomalie-Confirm Dialog
   - Settings-View
   - Profil-Editor
   - Export-Confirm-Dialoge
   - Jahres-Urlaubsübersicht (sehr breite Tabelle)
   - ttOpenDayEditor (User-Tagesansicht)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px){

  /* ═══ ANOMALIE-CONFIRM-DIALOG ═══ */
  .tt-anom-list{
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tt-anom-item{
    padding: 10px 12px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .tt-anom-item-date{
    font-size: 12px;
    min-width: 0;
  }
  .tt-anom-item-msg{
    font-size: 12px;
    line-height: 1.4;
  }
  .tt-anom-item i{
    font-size: 16px;
    flex-shrink: 0;
  }
  .vac-override-check{
    padding: 10px;
    font-size: 12px;
  }
  .vac-override-label{
    font-size: 12px;
  }
  .vac-override-sub{
    font-size: 11px;
    line-height: 1.4;
  }

  /* ═══ SETTINGS-VIEW ═══ */
  .tta-settings-tabs{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding: 0 10px;
  }
  .tta-settings-tabs > *{
    flex-shrink: 0;
    font-size: 12px;
    padding: 8px 10px;
  }
  .tta-settings-content{
    padding: 12px;
  }
  .tta-settings-section{
    padding: 12px;
    margin-bottom: 12px;
  }
  .tta-settings-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .tta-settings-row{
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
  }
  .tta-settings-row label{
    font-size: 12px;
  }
  .tta-settings-row input,
  .tta-settings-row select{
    font-size: 16px;  /* iOS-Zoom-Prevention */
    min-height: 44px;
  }

  /* ═══ PROFIL-EDITOR (TTA) ═══ */
  .tta-prof-section{
    padding: 12px !important;
    margin-bottom: 12px;
  }
  .tta-prof-grid{
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .tta-prof-schedule-row{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
  }
  .tta-prof-schedule-row label{
    font-size: 12px;
  }
  .tta-prof-schedule-row input{
    font-size: 16px;
    min-height: 40px;
    width: 100%;
  }

  /* ═══ EXPORT-CONFIRM / TEAM-EXPORT DIALOGE ═══ */
  .export-format-btn{
    padding: 10px !important;
    gap: 10px;
  }
  .export-fmt-icon{
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }
  .tt-export-option{
    padding: 12px 14px;
  }

  /* ═══ JAHRES-URLAUBSÜBERSICHT — horizontal scroll ═══ */
  .vac-year-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -10px;
    padding: 0 10px;
  }
  .vac-year-table{
    min-width: 800px;  /* 12 Monate × ~60px + Name-Spalte */
  }
  .vac-year-user-cell{
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 2;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    width: 100px !important;
    padding: 4px 6px !important;
  }
  body.dark-theme .vac-year-user-cell,
  body.theme-dark .vac-year-user-cell{
    background: #1f2937;
  }
  .vac-year-month-cell{
    min-width: 50px;
    font-size: 11px;
  }

  /* ═══ USER-TAGESANSICHT (ttOpenDayEditor) ═══ */
  .tt-edit-overlay .insp-wizard{
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  .tt-edit-body{
    padding: 12px;
  }
  .tt-edit-footer{
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
  }
  .tt-edit-footer button{
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* ═══ USER-LIST in Admin-Overview ═══ */
  .tta-user-card{
    padding: 12px !important;
  }
  .tta-user-card-hdr{
    flex-wrap: wrap;
    gap: 8px;
  }
  .tta-user-name{
    font-size: 14px !important;
  }
  .tta-user-stats{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px;
    margin-top: 8px;
  }
  .tta-user-stat{ padding: 6px 8px; }
  .tta-user-stat-num{ font-size: 16px; }
  .tta-user-stat-lbl{ font-size: 10px; }

  /* ═══ VACATION-MODAL Zeit-Felder ═══ */
  .vac-modal-body label{
    font-size: 12px;
    margin-bottom: 4px;
  }
  .vac-modal-body input[type="date"],
  .vac-modal-body input[type="number"],
  .vac-modal-body input[type="text"],
  .vac-modal-body select,
  .vac-modal-body textarea{
    font-size: 16px !important;
    min-height: 44px;
  }
  .vac-modal-footer{
    padding: 10px 12px !important;
    flex-direction: column-reverse;
    gap: 6px;
  }
  .vac-modal-footer button{
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  /* ═══ GENERAL FIX — insp-overlay Scrolling ═══ */
  .insp-overlay{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    align-items: stretch !important;
  }
}

/* ─── TABLET (641px - 900px): mittlere Anpassungen ─── */
@media (min-width: 641px) and (max-width: 900px){
  .tta-settings-grid,
  .tta-prof-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .tta-bu-stats,
  .vac-bu-stats{
    grid-template-columns: repeat(3, 1fr);
  }
  .tt-anom-list{ max-height: 50vh; }
}

/* ─── SEHR HOHE Mobile (Landscape-Tablet) ─── */
@media (min-width: 641px) and (max-height: 500px){
  .tta-bu-detail-actions{
    padding: 8px;
    gap: 6px;
  }
  .tta-bu-action-primary,
  .tta-bu-action-badge{
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS-DASHBOARD (5 Kacheln: Überblick über alle Mitarbeiter-Zustände)
   ══════════════════════════════════════════════════════════════════════════ */

.tta-status-dashboard{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
body.theme-dark .tta-status-dashboard,
body.dark-theme .tta-status-dashboard{
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.tta-status-dashboard-hdr{
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #1f2937);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tta-status-dashboard-hdr i{
  color: var(--primary, #1B7599);
  font-size: 15px;
}
.tta-status-dashboard-sub{
  font-weight: 400;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.tta-status-tiles{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.tta-status-tile{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 14px 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  min-height: 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tta-status-tile[disabled]{
  cursor: default;
  opacity: 0.45;
  filter: grayscale(0.6);
}

.tta-status-tile:not([disabled]):hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.tta-status-tile:not([disabled]):focus-visible{
  outline: 2px solid var(--primary, #1B7599);
  outline-offset: 2px;
}

.tta-status-tile-icon{
  font-size: 20px;
  opacity: 0.8;
  margin-bottom: 2px;
}

.tta-status-tile-num{
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.tta-status-tile-lbl{
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.tta-status-tile-sub{
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1.2;
}

/* Status-Varianten — Farb-Palette */

/* MISSING (orange, Aufmerksamkeit) */
.tta-status-tile-missing{ background: rgba(249,115,22,0.06); color: #9a3412; border-color: rgba(249,115,22,0.18); }
.tta-status-tile-missing.tta-status-tile-active{ background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border-color: #FDBA74; }
.tta-status-tile-missing .tta-status-tile-icon{ color: #F97316; }
.tta-status-tile-missing .tta-status-tile-num{ color: #C2410C; }
body.theme-dark .tta-status-tile-missing.tta-status-tile-active{ background: linear-gradient(135deg, rgba(249,115,22,0.18) 0%, rgba(249,115,22,0.10) 100%); color: #FDBA74; }
body.theme-dark .tta-status-tile-missing .tta-status-tile-num{ color: #FB923C; }

/* SUBMITTED (warm-orange, "wartet auf Admin") */
.tta-status-tile-submitted{ background: rgba(234,88,12,0.06); color: #9a3412; border-color: rgba(234,88,12,0.18); }
.tta-status-tile-submitted.tta-status-tile-active{
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  border-color: #FB923C;
  animation: ttaStatusPulse 2.2s ease-in-out infinite;
}
.tta-status-tile-submitted .tta-status-tile-icon{ color: #EA580C; }
.tta-status-tile-submitted .tta-status-tile-num{ color: #C2410C; }
body.theme-dark .tta-status-tile-submitted.tta-status-tile-active{
  background: linear-gradient(135deg, rgba(234,88,12,0.22) 0%, rgba(234,88,12,0.12) 100%);
  color: #FDBA74;
}
body.theme-dark .tta-status-tile-submitted .tta-status-tile-num{ color: #FB923C; }

/* REJECTED (rot) */
.tta-status-tile-rejected{ background: rgba(220,38,38,0.05); color: #991b1b; border-color: rgba(220,38,38,0.18); }
.tta-status-tile-rejected.tta-status-tile-active{ background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); border-color: #F87171; }
.tta-status-tile-rejected .tta-status-tile-icon{ color: #DC2626; }
.tta-status-tile-rejected .tta-status-tile-num{ color: #B91C1C; }
body.theme-dark .tta-status-tile-rejected.tta-status-tile-active{ background: linear-gradient(135deg, rgba(220,38,38,0.22) 0%, rgba(220,38,38,0.10) 100%); color: #FCA5A5; }
body.theme-dark .tta-status-tile-rejected .tta-status-tile-num{ color: #F87171; }

/* APPROVED (grün, leicht) */
.tta-status-tile-approved{ background: rgba(34,197,94,0.05); color: #14532d; border-color: rgba(34,197,94,0.18); }
.tta-status-tile-approved.tta-status-tile-active{ background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%); border-color: #4ADE80; }
.tta-status-tile-approved .tta-status-tile-icon{ color: #16A34A; }
.tta-status-tile-approved .tta-status-tile-num{ color: #15803D; }
body.theme-dark .tta-status-tile-approved.tta-status-tile-active{ background: linear-gradient(135deg, rgba(34,197,94,0.22) 0%, rgba(34,197,94,0.10) 100%); color: #86EFAC; }
body.theme-dark .tta-status-tile-approved .tta-status-tile-num{ color: #4ADE80; }

/* FINALIZED (CFT-grün, kräftig) */
.tta-status-tile-finalized{ background: rgba(16,126,84,0.05); color: #064E3B; border-color: rgba(16,126,84,0.18); }
.tta-status-tile-finalized.tta-status-tile-active{
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
  border-color: #107E54;
}
.tta-status-tile-finalized .tta-status-tile-icon{ color: #107E54; }
.tta-status-tile-finalized .tta-status-tile-num{ color: #047857; }
body.theme-dark .tta-status-tile-finalized.tta-status-tile-active{ background: linear-gradient(135deg, rgba(16,126,84,0.25) 0%, rgba(16,126,84,0.12) 100%); color: #6EE7B7; }
body.theme-dark .tta-status-tile-finalized .tta-status-tile-num{ color: #34D399; }

@keyframes ttaStatusPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(234,88,12,0.25); }
  50%{ box-shadow: 0 0 0 6px rgba(234,88,12,0.00); }
}

/* ── Mobile: 2-spaltig, flexibler ── */
@media (max-width: 900px){
  .tta-status-tiles{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tta-status-tile{ min-height: 96px; padding: 10px 6px; }
  .tta-status-tile-num{ font-size: 22px; }
  .tta-status-tile-lbl{ font-size: 11px; }
  .tta-status-tile-sub{ font-size: 10px; }
}
@media (max-width: 640px){
  .tta-status-dashboard{ padding: 12px; border-radius: 10px; }
  .tta-status-tiles{ grid-template-columns: repeat(2, 1fr); }
  .tta-status-tile{ min-height: 88px; }
  .tta-status-tile-icon{ font-size: 17px; }
  .tta-status-tile-num{ font-size: 20px; }
}
@media (max-width: 380px){
  .tta-status-tiles{ grid-template-columns: 1fr; gap: 6px; }
  .tta-status-tile{
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
    gap: 10px;
  }
  .tta-status-tile-icon{ margin: 0; font-size: 18px; }
  .tta-status-tile-num{ font-size: 22px; min-width: 34px; text-align: center; }
  .tta-status-tile-lbl{ font-size: 12px; }
  .tta-status-tile-sub{ display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   NEUE STATUS-BADGES — finalized + missing
   ══════════════════════════════════════════════════════════════════════════ */

.tta-badge-finalized{
  background: linear-gradient(135deg, #107E54 0%, #0d6a46 100%);
  color: #fff;
  border-color: #107E54;
}
.tta-badge-missing{
  background: rgba(249,115,22,0.10);
  color: #9a3412;
  border-color: rgba(249,115,22,0.35);
}
body.theme-dark .tta-badge-missing{
  background: rgba(249,115,22,0.18);
  color: #FDBA74;
}

/* Verwaltung-Button: "Fertig markiert"-Badge read-only (anders als "fehlt"-badge) */
.tta-bu-action-badge-finalized{
  background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%) !important;
  border: 1px solid #6EE7B7 !important;
  color: #064E3B !important;
  cursor: default !important;
}
.tta-bu-action-badge-finalized i{ color: #107E54 !important; }
.tta-bu-action-badge-finalized strong{ color: #047857 !important; }
body.theme-dark .tta-bu-action-badge-finalized{
  background: linear-gradient(135deg, rgba(16,126,84,0.28) 0%, rgba(16,126,84,0.15) 100%) !important;
  border-color: rgba(16,126,84,0.5) !important;
  color: #6EE7B7 !important;
}
body.theme-dark .tta-bu-action-badge-finalized i,
body.theme-dark .tta-bu-action-badge-finalized strong{ color: #34D399 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BY-USER-LISTE: Mini-Status-Dot neben Namen
   Damit man in der Sidebar auf einen Blick sieht wer in welchem Status ist.
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-name{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tta-bu-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.tta-bu-dot-finalized{ background: #107E54; }
.tta-bu-dot-approved{  background: #16A34A; }
.tta-bu-dot-submitted{ background: #EA580C; animation: ttaStatusPulse 2.2s ease-in-out infinite; }
.tta-bu-dot-rejected{  background: #DC2626; }
.tta-bu-dot-missing{   background: #F97316; }

body.theme-dark .tta-bu-dot,
body.dark-theme .tta-bu-dot{
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Mobile: etwas kleiner */
@media (max-width: 640px){
  .tta-bu-dot{
    width: 16px;
    height: 16px;
    font-size: 8px;
  }
}

/* Link die tta-user-card (overview) mit der "zeiterfassung fehlt" Card-
   Hervorhebung — wenn finalized: subtle grüner Border-Akzent links */
.tta-user-card[data-status="finalized"]{
  border-left: 3px solid #107E54;
}
.tta-user-card[data-status="submitted"]{
  border-left: 3px solid #EA580C;
}
.tta-user-card[data-status="rejected"]{
  border-left: 3px solid #DC2626;
}
.tta-user-card[data-status="in_progress"]{
  border-left: 3px solid rgba(249,115,22,0.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROFIL-ICON-BUTTON im Namen-Header (Detailansicht)
   Kleiner runder Icon-Button rechts neben dem h2-Namen des Mitarbeiters.
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-detail-info h2{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tta-bu-name-profile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--white, #fff);
  color: var(--muted, #6b7280);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
.tta-bu-name-profile:hover{
  background: rgba(27,117,153,0.08);
  border-color: #1B7599;
  color: #1B7599;
  transform: rotate(60deg);
}
.tta-bu-name-profile:focus-visible{
  outline: 2px solid #1B7599;
  outline-offset: 2px;
}
body.dark-theme .tta-bu-name-profile,
body.theme-dark .tta-bu-name-profile{
  background: rgba(255,255,255,0.04);
  border-color: #374151;
  color: #9ca3af;
}
body.dark-theme .tta-bu-name-profile:hover,
body.theme-dark .tta-bu-name-profile:hover{
  background: rgba(59,130,246,0.12);
  border-color: #3b82f6;
  color: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════════════
   EXPORT — Primary Action Button (gleich prominent wie Umlagern)
   ══════════════════════════════════════════════════════════════════════════ */

.tta-bu-action-export{
  border-color: #16a34a;
  color: #15803d;
  background: var(--white, #fff);
}
.tta-bu-action-export i{ color: #16a34a; }
.tta-bu-action-export:hover{
  background: rgba(22,163,74,0.08);
  border-color: #15803d;
}
body.dark-theme .tta-bu-action-export,
body.theme-dark .tta-bu-action-export{
  color: #86efac;
  border-color: #22c55e;
  background: rgba(255,255,255,0.02);
}
body.dark-theme .tta-bu-action-export i,
body.theme-dark .tta-bu-action-export i{ color: #4ade80; }
body.dark-theme .tta-bu-action-export:hover,
body.theme-dark .tta-bu-action-export:hover{
  background: rgba(34,197,94,0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   HALBTAG-SLOT-PICKER (Vormittag / Nachmittag)
   Erscheint wenn Halbtag aktiviert ist — User wählt ob die Abwesenheit
   morgens oder nachmittags war. Bestimmt auch die Default-Arbeitszeiten.
   ══════════════════════════════════════════════════════════════════════════ */

.tt-halfslot-wrap{
  animation: ttHalfslotFadeIn .2s ease-out;
}
@keyframes ttHalfslotFadeIn{
  from{ opacity:0; transform: translateY(-4px); }
  to  { opacity:1; transform: translateY(0); }
}

.tt-halfslot-btns{
  display: flex;
  gap: 8px;
}

.tt-halfslot-btn{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white, #fff);
  border: 2px solid var(--border, #e5e7eb);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
}
.tt-halfslot-btn:hover:not(:disabled){
  background: rgba(107,195,240,0.06);
  border-color: #6BC3F0;
  transform: translateY(-1px);
}
.tt-halfslot-btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.tt-halfslot-btn i{
  font-size: 20px;
  flex-shrink: 0;
}
.tt-halfslot-btn span{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.tt-halfslot-btn strong{
  font-size: 13px;
  color: var(--text, #111);
  font-weight: 600;
}
.tt-halfslot-btn small{
  font-size: 11px;
  color: var(--muted, #6b7280);
  font-weight: normal;
}
.tt-halfslot-btn.tt-halfslot-active{
  border-color: #1B7599;
  background: rgba(27,117,153,0.08);
  box-shadow: 0 0 0 2px rgba(27,117,153,0.12);
}

/* Dark Theme */
body.dark-theme .tt-halfslot-btn,
body.theme-dark .tt-halfslot-btn{
  background: rgba(255,255,255,0.03);
  border-color: #374151;
}
body.dark-theme .tt-halfslot-btn:hover:not(:disabled),
body.theme-dark .tt-halfslot-btn:hover:not(:disabled){
  background: rgba(107,195,240,0.08);
  border-color: #3b82f6;
}
body.dark-theme .tt-halfslot-btn.tt-halfslot-active,
body.theme-dark .tt-halfslot-btn.tt-halfslot-active{
  background: rgba(59,130,246,0.12);
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}
body.dark-theme .tt-halfslot-btn strong,
body.theme-dark .tt-halfslot-btn strong{ color: #e5e7eb; }
body.dark-theme .tt-halfslot-btn small,
body.theme-dark .tt-halfslot-btn small{ color: #9ca3af; }

/* Mobile: Buttons untereinander wenn zu eng */
@media (max-width: 500px){
  .tt-halfslot-btns{ flex-direction: column; }
  .tt-halfslot-btn{ min-height: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZEITERFASSUNG — MOBILE/TABLET RESPONSIVE + TOUCH
   Touch-Targets: min 44px (Apple HIG), Inputs: 16px font (no iOS zoom),
   Tabelle: horizontal scrollbar auf kleinen Screens.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Editor (insp-wizard tt-editor) ─────────────────────────────────── */
@media (max-width: 600px){
  .tt-editor{
    width:100vw !important;
    max-width:100vw !important;
    border-radius:16px 16px 0 0 !important;
    margin:0 !important;
  }
  .tt-editor-overlay{
    align-items:flex-end !important;
  }
  .tt-editor .insp-body{
    padding:12px !important;
    max-height:72vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  /* Type-Grid: 4 Spalten statt 3 auf Handy zu eng → 2 Spalten */
  .tt-type-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:6px !important;
  }
  .tt-type-btn{
    min-height:52px !important;
    padding:8px 4px !important;
    font-size:11px !important;
  }
  /* Zeit-Inputs: groß genug für Touch + kein iOS-Zoom */
  .tt-edit-field input[type="time"],
  .tt-edit-field input[type="number"],
  .tt-edit-field input[type="text"]{
    font-size:16px !important;  /* >= 16px verhindert iOS auto-zoom */
    padding:12px !important;
    min-height:48px !important;
    border-radius:10px !important;
  }
  .tt-edit-field textarea{
    font-size:16px !important;
    padding:12px !important;
  }
  /* Buttons im Footer: volle Breite */
  .tt-edit-footer{
    flex-direction:column !important;
    gap:8px !important;
    padding:12px !important;
  }
  .tt-edit-footer .btn{
    width:100% !important;
    min-height:48px !important;
    font-size:15px !important;
    justify-content:center !important;
  }
  /* Duration-Picker (Ganztag/Halbtag) */
  .tt-duration-grid{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }
  .tt-duration-btn{
    min-height:52px !important;
    padding:10px !important;
  }
  /* Toggle-Rows: Touch-friendly */
  .tt-toggle-row{
    min-height:48px !important;
    padding:10px 0 !important;
  }
  .tt-toggle-row input[type="checkbox"]{
    width:22px !important;
    height:22px !important;
  }
  /* Lock-Banner */
  .tt-admin-lock-banner{
    padding:12px !important;
    gap:10px !important;
    font-size:13px !important;
  }
  .tt-admin-override-banner{
    padding:10px 12px !important;
    font-size:12px !important;
  }
  /* Calc-Zeile */
  .tt-edit-calc{
    font-size:13px !important;
    padding:10px 12px !important;
  }
}

/* ─── Verwaltung: tta-bu-entries-table (Admin-Tabelle) ────────────────── */
@media (max-width: 768px){
  .tta-bu-entries-wrap{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    margin:0 -12px;
    padding:0 12px;
  }
  .tta-bu-entries-table{
    min-width:700px;  /* erzwingt Scroll statt Quetschen */
    font-size:12px !important;
  }
  .tta-bu-entries-table th,
  .tta-bu-entries-table td{
    padding:6px 4px !important;
    white-space:nowrap;
  }
  /* Copy-Tools: vertikal stapeln */
  .tta-bu-entries-summary{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .tta-bu-copy-tools{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    margin-left:0 !important;
  }
  .tta-bu-copy-btn{
    font-size:11px !important;
    padding:6px 8px !important;
  }
  /* User-Action-Buttons */
  .tta-bu-actions{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  .tta-bu-action-primary{
    min-width:auto !important;
    flex:1 1 auto !important;
  }
  /* Stats-Kacheln */
  .tta-bu-stats{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
}

/* ─── Tablet (600-1024) ───────────────────────────────────────────────── */
@media (min-width:601px) and (max-width:1024px){
  .tt-type-grid{
    grid-template-columns:repeat(4,1fr) !important;
  }
  .tt-editor{
    width:90vw !important;
    max-width:560px !important;
  }
}

/* ─── Wochenansicht Touch-Targets ─────────────────────────────────────── */
@media (pointer:coarse){
  /* Alle klickbaren Elemente: min 44px Touch-Target */
  .tt-day-card{
    min-height:64px !important;
    cursor:pointer;
    -webkit-tap-highlight-color:rgba(27,117,153,0.12);
  }
  .tt-type-btn,
  .tt-duration-btn{
    -webkit-tap-highlight-color:rgba(27,117,153,0.12);
  }
  /* Tabelle: Zeilen als Touch-Target */
  .tta-bu-entry-clickable{
    min-height:44px;
    -webkit-tap-highlight-color:rgba(27,117,153,0.08);
  }
  /* Copy-Button vergrößern */
  .tta-bu-row-copy-btn{
    width:36px !important;
    height:36px !important;
  }
  .tta-bu-row-copy-btn i{font-size:14px !important;}
}


/* ═══════════════════════════════════════════════════════════════════════
   GEBURTSTAGSKALENDER
   ═══════════════════════════════════════════════════════════════════════ */
.bd-page{width:100%;padding:0;box-sizing:border-box;}

/* ── HERO ── */
.bd-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:16px 20px;background:var(--white);border-bottom:1px solid var(--border);margin-bottom:0;}
.bd-hero-card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;align-items:center;gap:14px;transition:transform .15s,box-shadow .15s;}
.bd-hero-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06);}
.bd-hero-today{border-color:#fbbf24;background:linear-gradient(135deg,#fffbeb,#fef3c7);animation:bdPulse 2s ease infinite;}
@keyframes bdPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.3);}50%{box-shadow:0 0 0 8px rgba(251,191,36,0);}}
.bd-hero-confetti{font-size:32px;animation:bdBounce 1s ease infinite;}
@keyframes bdBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.bd-hero-ic{font-size:28px;opacity:.7;}
.bd-hero-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.bd-hero-num{font-size:28px;font-weight:800;color:var(--text);line-height:1.1;}
.bd-hero-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.bd-hero-names{margin-top:6px;}
.bd-hero-name{font-size:13px;margin-top:2px;}
.bd-hero-date{font-size:11px;color:var(--muted);margin-top:2px;}
.bd-hero-countdown{text-align:center;min-width:54px;}
.bd-hero-countdown-num{font-size:32px;font-weight:800;color:#1B7599;line-height:1;}
.bd-hero-countdown-lbl{font-size:10px;color:var(--muted);font-weight:600;}
.bd-hero-next{border-left:3px solid #1B7599;}

/* ── SECTIONS ── */
.bd-section{background:var(--white);border:none;border-top:1px solid var(--border);border-radius:0;margin-bottom:0;overflow:hidden;}
.bd-section-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.bd-section-hdr h3{margin:0;font-size:14px;font-weight:700;}

/* ── TIMELINE ── */
.bd-timeline{padding:12px 20px 16px;}
.bd-tl-item{display:flex;align-items:center;gap:12px;padding:8px 0;position:relative;}
.bd-tl-item+.bd-tl-item{border-top:1px solid var(--border);}
.bd-tl-today{background:linear-gradient(90deg,#fffbeb,transparent);border-radius:8px;padding:10px 12px;margin:-2px -6px;}
.bd-tl-soon .bd-tl-date{color:#1B7599;}
.bd-tl-date{text-align:center;min-width:40px;flex-shrink:0;}
.bd-tl-day{font-size:20px;font-weight:800;line-height:1;}
.bd-tl-month{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;}
.bd-tl-line{width:2px;height:36px;background:var(--border);border-radius:1px;flex-shrink:0;}
.bd-tl-today .bd-tl-line{background:#fbbf24;}
.bd-tl-card{display:flex;align-items:center;gap:10px;flex:1;min-width:0;}
.bd-tl-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0;}
.bd-tl-name{font-size:13px;font-weight:600;}
.bd-tl-meta{font-size:11px;color:var(--muted);}
.bd-tl-badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:6px;}
.bd-tl-badge-today{background:#fef3c7;color:#b45309;}
.bd-tl-badge-soon{background:#dbeafe;color:#1e40af;}
.bd-tl-del{background:none;border:none;color:#ccc;cursor:pointer;padding:4px;font-size:12px;opacity:0;transition:opacity .15s;}
.bd-tl-item:hover .bd-tl-del{opacity:1;}
.bd-tl-del:hover{color:#dc2626;}

/* ── MONTH GRID ── */
.bd-months{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:20px;}
.bd-month-card{border:1px solid var(--border);border-radius:8px;padding:10px 12px;transition:border-color .15s;}
.bd-month-current{border-color:#1B7599;box-shadow:0 0 0 1px rgba(27,117,153,.15);}
.bd-month-has{background:rgba(27,117,153,.02);}
.bd-month-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.bd-month-name{font-size:12px;font-weight:700;}
.bd-month-count{background:#1B7599;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;}
.bd-month-list{display:flex;flex-direction:column;gap:3px;}
.bd-month-entry{display:flex;align-items:center;gap:5px;font-size:11px;padding:2px 0;}
.bd-month-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.bd-month-entry-day{font-weight:600;min-width:18px;color:var(--muted);}
.bd-month-entry-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bd-month-entry-age{font-size:10px;color:var(--muted);font-weight:600;}
.bd-month-empty{font-size:11px;color:var(--muted);opacity:.5;text-align:center;padding:6px 0;}

/* ── TABLE ── */
.bd-table-wrap{overflow-x:auto;}
.bd-table{width:100%;border-collapse:collapse;font-size:12px;}
.bd-table th{text-align:left;padding:10px 12px;font-weight:700;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:1;}
.bd-table th:first-child{padding-left:20px;}
.bd-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle;}
.bd-table td:first-child{padding-left:20px;}
.bd-table tr:hover{background:rgba(27,117,153,.02);}
.bd-row-today{background:linear-gradient(90deg,#fffbeb,transparent) !important;}
.bd-row-soon{background:rgba(27,117,153,.03);}
.bd-tbl-name{display:flex;align-items:center;gap:8px;}
.bd-tbl-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;flex-shrink:0;}
.bd-tbl-pos{font-size:10px;color:var(--muted);}
.bd-chip{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;}
.bd-chip-today{background:#fef3c7;color:#b45309;}
.bd-chip-soon{background:#dbeafe;color:#1e40af;}
.bd-chip-user{background:rgba(27,117,153,.1);color:#1B7599;}
.bd-chip-custom{background:rgba(245,158,11,.1);color:#b45309;}
.bd-tbl-del{background:none;border:none;color:#ccc;cursor:pointer;padding:4px 6px;font-size:11px;border-radius:4px;}
.bd-tbl-del:hover{color:#dc2626;background:rgba(220,38,38,.06);}

/* Fleet gear button (edit) — same style as tta-bu-name-profile */
.fleet-gear-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--border);background:var(--white);
  color:var(--muted);cursor:pointer;transition:all .15s;
  flex-shrink:0;padding:0;font-size:12px;line-height:1;
  margin-left:4px;vertical-align:middle;
}
.fleet-gear-btn:hover{
  background:rgba(27,117,153,.08);border-color:#1B7599;
  color:#1B7599;transform:rotate(60deg);
}
/* Profile view: 2-column → 1-column on mobile */
@media(max-width:768px){
  #view-profile > div{grid-template-columns:1fr !important;}
}
#view-profile .panel{margin-bottom:0;}

/* ═══ Cloud Browser — Explorer-Style ═══════════════════════════════════════ */

/* Breadcrumbs */
.cloud-browse-crumbs{display:flex;align-items:center;gap:2px;padding:8px 0;flex-wrap:wrap;}
.cloud-browse-crumb{background:none;border:1px solid transparent;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:500;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s;}
.cloud-browse-crumb:hover{background:var(--hover);border-color:var(--border);}
.cloud-browse-crumb i{font-size:11px;color:#1B7599;}
.cloud-browse-crumb-current{color:var(--muted);cursor:default;font-weight:600;}
.cloud-browse-sep{color:var(--muted);font-size:11px;margin:0 2px;user-select:none;}

/* Toolbar */
.cloud-browse-toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px;border-bottom:1px solid var(--border);margin-bottom:12px;}
.cloud-browse-view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.cloud-browse-view-btn{background:none;border:none;padding:5px 10px;cursor:pointer;color:var(--muted);font-size:13px;transition:all .15s;}
.cloud-browse-view-btn:hover{background:var(--hover);}
.cloud-browse-view-btn.active{background:var(--primary);color:#fff;}
.cloud-browse-up-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 12px;font-size:12px;cursor:pointer;color:var(--text);display:inline-flex;align-items:center;gap:5px;transition:all .15s;}
.cloud-browse-up-btn:hover{background:var(--hover);border-color:var(--primary);}

/* ── Grid View (Explorer Kacheln) ─────────────────────────────────────── */
.cloud-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.cloud-browse-card{background:var(--white);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;overflow:hidden;transition:all .18s;position:relative;display:flex;flex-direction:column;}
.cloud-browse-card:hover{border-color:var(--primary);box-shadow:0 2px 12px rgba(27,117,153,.12);transform:translateY(-1px);}
.cloud-browse-card:active{transform:translateY(0);}

/* Preview area (top of card) */
.cloud-browse-card-preview{height:100px;display:flex;align-items:center;justify-content:center;background:var(--hover);border-bottom:1px solid var(--border);position:relative;overflow:hidden;}
.cloud-browse-card-preview-folder{background:rgba(245,158,11,.06);}
.cloud-browse-card-preview-img{background-size:cover;background-position:center;background-repeat:no-repeat;}
.cloud-browse-card-preview-icon{flex-direction:column;gap:4px;}
.cloud-browse-card-ext{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;background:var(--white);border:1px solid var(--border);border-radius:3px;padding:1px 5px;}

/* Card info (bottom of card) */
.cloud-browse-card-info{padding:8px 10px 6px;flex:1;min-width:0;}
.cloud-browse-card-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cloud-browse-card-meta{font-size:10px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Actions overlay (hover) */
.cloud-browse-card-actions{position:absolute;top:4px;right:4px;display:none;gap:3px;}
.cloud-browse-card:hover .cloud-browse-card-actions{display:flex;}
.cloud-browse-card-btn{width:26px;height:26px;border-radius:6px;border:none;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .15s;text-decoration:none;}
.cloud-browse-card-btn:hover{background:var(--primary);color:#fff;}
.cloud-browse-card-btn-danger:hover{background:#ef4444;color:#fff;}

/* ── List View (Explorer Detailansicht) ───────────────────────────────── */
.cloud-browse-list{width:100%;border-collapse:collapse;font-size:12px;}
.cloud-browse-list thead th{background:var(--hover);padding:6px 10px;text-align:left;font-weight:600;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;border-bottom:1.5px solid var(--border);position:sticky;top:0;z-index:1;}
.cloud-browse-list tbody tr{border-bottom:1px solid var(--border);transition:background .1s;cursor:pointer;}
.cloud-browse-list tbody tr:hover{background:var(--hover);}
.cloud-browse-list-folder{font-weight:600;}
.cloud-browse-list-folder:hover{background:rgba(245,158,11,.06) !important;}
.cloud-browse-list td{padding:6px 10px;vertical-align:middle;}
.cloud-browse-list-icon{width:40px;text-align:center;}
.cloud-browse-list-thumb{width:28px;height:28px;object-fit:cover;border-radius:4px;border:1px solid var(--border);}
.cloud-browse-list-muted{color:var(--muted);font-size:11px;}

/* ── Cloud meta grid (detail modal) ───────────────────────────────────── */
.cloud-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:12px;margin-top:12px;padding:12px;background:var(--hover);border-radius:8px;}

/* ── Cloud dashboard tiles ────────────────────────────────────────────── */
.cloud-dash-tile-val{font-size:22px;font-weight:700;color:var(--text);}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:600px){
  .cloud-browse-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;}
  .cloud-browse-card-preview{height:72px;}
  .cloud-browse-toolbar{flex-wrap:wrap;gap:6px;}
}

/* ═══ Werkzeug-Entnahme (Checkout) ═════════════════════════════════════════ */

/* Active checkouts banner at top of inventory */
.inv-checkout-banner{background:linear-gradient(135deg,#fff7ed,#fef3c7);border:1.5px solid #f59e0b;border-radius:12px;padding:14px 16px;margin-bottom:14px;}
.inv-checkout-banner-hdr{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:10px;color:#92400e;}
.inv-checkout-banner-hdr i{font-size:16px;}
.inv-checkout-banner-list{display:flex;flex-direction:column;gap:6px;}
.inv-checkout-item{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.8);border:1px solid #fde68a;border-radius:8px;padding:8px 12px;}
.inv-checkout-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.inv-checkout-item-name{font-weight:700;font-size:12px;color:var(--text);}
.inv-checkout-item-detail{font-size:10px;color:var(--muted);}
.inv-checkout-item-overdue{font-size:10px;color:#ef4444;font-weight:700;}
.inv-checkout-overdue{border-color:#fca5a5;background:rgba(254,226,226,.5);}

/* Checkout badge on individual items */
.inv-item-checked-out{border-left-color:#ea580c !important;background:linear-gradient(135deg,var(--white),#fff7ed);}
.inv-item-checkout-badge{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#fff7ed,#fef3c7);border:1px dashed #f59e0b;padding:8px 12px;border-radius:8px;margin-bottom:8px;}
.inv-item-checkout-badge-inner{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11px;color:#92400e;}
.inv-item-checkout-badge-inner i{font-size:14px;color:#ea580c;}
.inv-item-checkout-loc{background:rgba(234,88,12,.1);padding:1px 6px;border-radius:4px;font-size:10px;}
.inv-item-checkout-date{font-size:10px;color:var(--muted);}

/* Prominent checkout button */
.inv-checkout-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1.5px solid #ea580c;border-radius:6px;background:rgba(234,88,12,.08);color:#ea580c;font-size:10px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.inv-checkout-btn:hover{background:#ea580c;color:#fff;transform:scale(1.02);}
.inv-checkout-btn i{font-size:11px;}

/* Dark theme */
[data-theme="dark"] .inv-checkout-banner{background:linear-gradient(135deg,#451a03,#78350f);border-color:#d97706;}
[data-theme="dark"] .inv-checkout-banner-hdr{color:#fbbf24;}
[data-theme="dark"] .inv-checkout-item{background:rgba(0,0,0,.3);border-color:#92400e;}
[data-theme="dark"] .inv-item-checked-out{background:linear-gradient(135deg,var(--white),rgba(234,88,12,.08));}
[data-theme="dark"] .inv-item-checkout-badge{background:linear-gradient(90deg,rgba(234,88,12,.15),rgba(245,158,11,.1));}
[data-theme="dark"] .inv-checkout-btn{background:rgba(234,88,12,.15);}

/* ═══ Dashboard Checkout Alert (aus meinem Fahrzeug entnommen) ═════════════ */
.dash-checkout-alert{background:linear-gradient(135deg,#fff7ed,#fef3c7);border:2px solid #f59e0b;border-radius:12px;padding:14px 16px;margin-bottom:16px;animation:dashAlertPulse 2s ease-in-out;}
@keyframes dashAlertPulse{0%{box-shadow:0 0 0 0 rgba(245,158,11,.4);}50%{box-shadow:0 0 0 8px rgba(245,158,11,0);}100%{box-shadow:none;}}
.dash-checkout-alert-hdr{display:flex;align-items:center;gap:8px;font-size:14px;color:#92400e;margin-bottom:12px;}
.dash-checkout-alert-hdr i{font-size:18px;color:#ea580c;animation:dashAlertShake .5s ease-in-out .3s;}
@keyframes dashAlertShake{0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg);}75%{transform:rotate(8deg);}}
.dash-checkout-alert-item{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.85);border:1px solid #fde68a;border-radius:10px;padding:10px 14px;margin-bottom:6px;transition:all .15s;}
.dash-checkout-alert-item:hover{border-color:#f59e0b;box-shadow:0 2px 8px rgba(245,158,11,.15);}
.dash-checkout-alert-overdue{border-color:#fca5a5 !important;background:rgba(254,226,226,.6) !important;}
.dash-checkout-alert-icon{width:36px;height:36px;border-radius:10px;background:rgba(234,88,12,.12);color:#ea580c;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.dash-checkout-alert-overdue .dash-checkout-alert-icon{background:rgba(239,68,68,.12);color:#ef4444;}
.dash-checkout-alert-info{flex:1;min-width:0;}
.dash-checkout-alert-name{font-weight:700;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-checkout-alert-detail{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--muted);margin-top:3px;}
.dash-checkout-alert-detail i{margin-right:2px;font-size:9px;color:var(--muted);}
.dash-checkout-alert-overdue-badge{font-size:11px;color:#ef4444;font-weight:700;margin-top:3px;}
.dash-checkout-alert-plate{background:#1B7599;color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;white-space:nowrap;flex-shrink:0;letter-spacing:.3px;}
[data-theme="dark"] .dash-checkout-alert{background:linear-gradient(135deg,#451a03,#78350f);border-color:#d97706;}
[data-theme="dark"] .dash-checkout-alert-hdr{color:#fbbf24;}
[data-theme="dark"] .dash-checkout-alert-item{background:rgba(0,0,0,.3);border-color:#92400e;}
@media(max-width:600px){.dash-checkout-alert-detail{flex-direction:column;gap:2px;}.dash-checkout-alert-plate{align-self:flex-start;}}

/* ═══ Meine Geräte — Panel Overlay ══════════════════════════════════════════ */

/* Panel overlay */
.mt-scan-btn,.mt-checkout-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .15s;justify-content:center;}
.mt-scan-btn{background:rgba(27,117,153,.08);color:#1B7599;border:1.5px solid rgba(27,117,153,.2);}
.mt-scan-btn:hover{background:rgba(27,117,153,.15);}
.mt-checkout-btn{background:#ea580c;color:#fff;}
.mt-checkout-btn:hover{background:#c2410c;}
.mt-panel-alert{background:rgba(245,158,11,.06);border:1px solid #fde68a;border-radius:8px;padding:8px 12px;margin-bottom:10px;}
.mt-panel-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;margin-bottom:4px;}
.mt-panel-item-warn{border-color:#fde68a;background:rgba(245,158,11,.04);}
.mt-return-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1.5px solid #16a34a;border-radius:6px;background:rgba(22,163,74,.06);color:#16a34a;font-size:10px;font-weight:600;cursor:pointer;flex-shrink:0;}
.mt-return-btn:hover{background:#16a34a;color:#fff;}

/* Checkout browser */
.mt-co-section-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.mt-co-grid{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;}
.mt-co-card{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;text-align:left;width:100%;}
.mt-co-card:hover{border-color:var(--primary);transform:translateX(2px);}
.mt-co-card-icon{width:28px;height:28px;border-radius:6px;background:rgba(100,116,139,.08);color:#64748b;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.mt-co-card-body{flex:1;min-width:0;}
.mt-co-card-name{font-weight:600;font-size:11px;}
.mt-co-card-count{font-size:9px;color:var(--muted);}
.mt-co-back{background:none;border:none;color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;padding:2px 0;margin-bottom:6px;display:inline-flex;align-items:center;gap:3px;}
.mt-co-loc-hdr{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface);border-radius:6px;margin-bottom:8px;font-size:13px;color:#1B7599;}
.mt-co-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--white);border:1.5px solid var(--border);border-radius:8px;margin-bottom:3px;cursor:pointer;transition:all .15s;text-align:left;width:100%;}
.mt-co-item:hover{border-color:#ea580c;background:rgba(234,88,12,.02);}
.mt-co-item-icon{width:24px;height:24px;border-radius:5px;background:rgba(234,88,12,.08);color:#ea580c;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;}
.mt-co-item-action{color:#ea580c;font-size:12px;flex-shrink:0;}

/* Dark mode */

[data-theme="dark"] .mt-panel-alert{background:rgba(245,158,11,.1);border-color:#92400e;}
[data-theme="dark"] .mt-co-card,[data-theme="dark"] .mt-co-item{background:var(--surface);}

/* Mobile */
@media(max-width:600px){.mt-panel-item{flex-wrap:wrap;}.mt-return-btn{width:100%;justify-content:center;}}

/* ═══ Zeiterfassung Mobile Fixes ═══════════════════════════════════════════ */

/* Break-Icon (Mittagspause Utensils) */
.tt-break-icon{color:#f59e0b;font-size:18px;margin-left:auto;flex-shrink:0;}

/* Break-Minutes area */
.tt-break-minutes{margin-top:8px;padding-left:36px;}
.tt-break-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

@media(max-width:600px){
  /* Toggle-Row: horizontal padding wiederherstellen */
  .tt-toggle-row{
    padding:10px 12px !important;
    gap:8px !important;
    overflow:hidden;
  }
  .tt-toggle-title{font-size:13px !important;}
  .tt-toggle-sub{font-size:10px !important;}
  /* Break-Icon: kleiner auf mobile */
  .tt-break-icon{font-size:14px !important;}
  /* Break-Minutes: kein padding-left auf mobile */
  .tt-break-minutes{padding-left:0 !important;}
  .tt-break-btns{gap:6px !important;}
  .tt-break-quick{
    min-width:36px !important;
    padding:8px 10px !important;
    font-size:13px !important;
  }
  .tt-break-minutes input[type="number"]{
    width:60px !important;
    font-size:16px !important;
    padding:8px !important;
    min-height:40px !important;
  }
  /* Editor: kein overflow-x */
  .tt-editor .insp-body{overflow-x:hidden !important;}
  /* Zeit-Inputs: vertikal statt nebeneinander */
  .tt-edit-row{
    flex-direction:column !important;
    gap:10px !important;
  }
  .tt-edit-row > .tt-edit-field{width:100% !important;}
}

/* ═══ Header Meine Geräte Button ═══════════════════════════════════════════ */
#hdr-mytools-btn{position:relative;}
#hdr-mytools-btn .fa-toolbox{color:#ea580c;}
#hdr-mytools-badge{background:#ea580c;}

/* ═══ Dialog Header Title (colored gradient headers) ═══ */
.insp-hdr-title{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;}
.insp-hdr-title i{font-size:16px;}
.insp-hdr:has(.insp-hdr-title) .insp-close{color:rgba(255,255,255,.8);}
.insp-hdr:has(.insp-hdr-title) .insp-close:hover{background:rgba(255,255,255,.15);color:#fff;}

/* ═══ Watchdog Security Center ═══ */
@keyframes secPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.3);}50%{box-shadow:0 0 0 8px rgba(34,197,94,0);}}
.sec-kpi{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:all .15s;}
.sec-kpi:hover{border-color:var(--primary);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06);}
.sec-kpi-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.sec-kpi-val{font-size:22px;font-weight:800;line-height:1;}
.sec-kpi-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:1px;}
.sec-live-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:12px;transition:background .15s;}
.sec-live-item:hover{background:var(--hover);}
.sec-live-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.sec-live-time{font-size:10px;color:var(--muted);flex-shrink:0;min-width:44px;}
.sec-live-user{font-weight:600;flex-shrink:0;min-width:100px;}
.sec-live-detail{flex:1;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sec-live-ip{font-family:monospace;font-size:11px;color:var(--muted);flex-shrink:0;}
.sec-user-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;}
.sec-user-row:hover{background:var(--hover);}
.sec-user-avatar{width:32px;height:32px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--muted);}
.sec-user-name{font-weight:600;min-width:120px;}
.sec-user-badge{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;}
[data-theme="dark"] .sec-kpi{background:rgba(255,255,255,.03);}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-05-09 EOD: Verwaltungs-Sektionen einheitlicher Look
   User-Wunsch: "schau dir das layout vom aussehen an von Fahrtenbücher,
   Flotte und Zeiterfassung. passe den header und menüseiten stil an von
   Berichte verwaltung und kalender verwaltung so dass das alles aus einem
   guss aussieht"

   Ziel: Alle Verwaltungs-Sektionen haben den gleichen Master-Look:
   - Dunkler Gradient-Header (#1a1a2e → #0a2838) wie rpap-hdr
   - Title weiß + Subtitle in light grey
   - Action-Buttons rechts mit weißer/transparenter Style
   - Tab-Bar als UNDERLINE-Tabs (nicht Pills) mit teal Active-Color

   Affects: .vac-pagehdr (Flotte/Equipment/Geburtstag/Urlaub),
            .tta-pagehdr (Fahrtenbücher/Zeiterfassung)
   ═══════════════════════════════════════════════════════════════════════════ */

/* === Header-Bar einheitlich HELL (wie Kalender-Verwaltung) === */
.vac-pagehdr,
.tta-pagehdr {
  background: var(--white, #fff) !important;
  border-bottom: 1px solid var(--border, #e0e8e5) !important;
  padding: 14px 20px !important;
  border-radius: 0 !important;
}
.vac-pagehdr-title h2,
.tta-pagehdr-title h2 {
  color: var(--text, #1a2926) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.vac-pagehdr-title h2 i,
.tta-pagehdr-title h2 i {
  color: #1B7599 !important;
  font-size: 18px !important;
  opacity: 1;
}
.vac-pagehdr-sub,
.tta-pagehdr-sub {
  color: var(--muted, #7b8c8a) !important;
  font-size: 12px !important;
  display: block !important;
  margin-top: 3px !important;
  font-weight: 500;
}

/* Wenn Title + Subtitle untereinander gestackt sein sollen (Berichte-Style) */
.vac-pagehdr-title,
.tta-pagehdr-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* === Berichte-Verwaltung Header HELL (statt dunkler Gradient) === */
/* Override für rpap-hdr damit Berichte gleich aussieht wie Kalender + Co */
.rpap-hdr {
  background: var(--white, #fff) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border, #e0e8e5) !important;
}
.rpap-hdr-title {
  color: var(--text, #1a2926) !important;
  font-size: 20px !important;
}
.rpap-hdr-title i {
  color: #1B7599 !important;
  opacity: 1 !important;
}
.rpap-hdr-sub {
  color: var(--muted, #7b8c8a) !important;
}
.rpap-hdr-search input {
  background: var(--surface, #f4f6f8) !important;
  border: 1px solid var(--border, #cbd5d1) !important;
  color: var(--text, #1a2926) !important;
}
.rpap-hdr-search input::placeholder {
  color: var(--muted, #7b8c8a) !important;
}
.rpap-hdr-search input:focus {
  border-color: #1B7599 !important;
  background: var(--white, #fff) !important;
  box-shadow: 0 0 0 3px rgba(27,117,153,.12) !important;
}
.rpap-hdr-search i {
  color: var(--muted, #7b8c8a) !important;
}
.rpap-hdr-btn {
  background: var(--surface, #f4f6f8) !important;
  border: 1px solid var(--border, #cbd5d1) !important;
  color: var(--text, #1a2926) !important;
}
.rpap-hdr-btn:hover {
  background: var(--white, #fff) !important;
  border-color: #1B7599 !important;
  color: #1B7599 !important;
}
.rpap-hdr-btn.warn {
  background: rgba(217,119,6,.10) !important;
  border-color: rgba(217,119,6,.40) !important;
  color: #b45309 !important;
}
.rpap-hdr-btn.warn:hover {
  background: rgba(217,119,6,.18) !important;
  border-color: #d97706 !important;
}

/* === Kalender-Admin Tabs (cal-admin-tabs) auch Underline-Style === */
.cal-admin-tabs {
  background: var(--white) !important;
  border-bottom: 2px solid var(--border, #e0e8e5) !important;
  padding: 0 20px !important;
}
.cal-admin-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  color: #7b8c8a !important;
  font-weight: 600 !important;
  font-size: .84rem !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  transition: all .12s !important;
  white-space: nowrap;
  font-family: inherit;
}
.cal-admin-tab:hover {
  color: #1B7599 !important;
  background: rgba(27,117,153,.04) !important;
}
.cal-admin-tab.active {
  color: #1B7599 !important;
  background: transparent !important;
  border-bottom-color: #1B7599 !important;
}

/* === Tab-Bar: Underline-Style wie Berichte (statt Pills) === */
.vac-tabs-bar,
.tta-tabs-bar {
  background: var(--white) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 0 20px !important;
  border-radius: 0 !important;
}
.vac-tabs,
.tta-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex;
}
.vac-tab-btn,
.tta-tab-btn,
.vac-tabs button,
.tta-tabs button {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 11px 16px !important;
  color: #7b8c8a !important;
  font-weight: 600 !important;
  font-size: .84rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  transition: all .12s !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.vac-tab-btn:hover,
.tta-tab-btn:hover,
.vac-tabs button:hover,
.tta-tabs button:hover {
  color: #1B7599 !important;
  background: rgba(27,117,153,.04) !important;
}
.vac-tab-btn.active,
.tta-tab-btn.active,
.vac-tabs button.active,
.tta-tabs button.active {
  color: #1B7599 !important;
  background: transparent !important;
  border-bottom-color: #1B7599 !important;
}
.vac-tab-btn i,
.tta-tab-btn i {
  font-size: .92rem !important;
}

/* === Mobile: Header etwas kompakter === */
@media (max-width: 768px) {
  .vac-pagehdr,
  .tta-pagehdr {
    padding: 14px 16px !important;
    flex-wrap: wrap !important;
  }
  .vac-pagehdr-title h2,
  .tta-pagehdr-title h2 {
    font-size: 17px !important;
  }
  .vac-tabs-bar,
  .tta-tabs-bar {
    padding: 0 12px !important;
  }
  .vac-tab-btn,
  .tta-tab-btn {
    padding: 10px 12px !important;
    font-size: .78rem !important;
  }
}