/**
 * 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;}
.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 */
  .mobile-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;z-index:1000;
    background:var(--white);
    border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 20px rgba(0,0,0,.08);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    background:color-mix(in srgb,var(--white) 92%,transparent);
  }
  .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) */
  .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(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:mmdFade .2s ease;}
  @keyframes mmdFade{from{opacity:0;}to{opacity:1;}}
  .mmd-sheet{
    position:absolute;bottom:0;left:0;right:0;
    background:var(--white);
    border-radius:20px 20px 0 0;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));
    max-height:80vh;overflow-y:auto;
    animation:mmdSlide .28s var(--ease-out);
    box-shadow:0 -8px 30px rgba(0,0,0,.15);
  }
  @keyframes mmdSlide{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .mmd-grabber{width:40px;height:4px;background:var(--border);border-radius:2px;margin:6px auto 14px;}
  .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 */
.tt-content{
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
}

/* 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);}