/* ============================================================
   WorkSpace Manager – Haupt-CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

:root {
  --accent:       #00c2a8;
  --accent2:      #0077ff;
  --accent-glow:  rgba(0,194,168,.2);
  --danger:       #ff4757;
  --warning:      #ffa502;
  --success:      #2ed573;

  --dark:         #0b0d17;
  --dark2:        #11141f;
  --sidebar-bg:   #0e1120;
  --card-bg:      #141829;
  --card-bg2:     #1b2036;
  --border:       #1e2540;
  --border2:      #252d47;

  --text:         #dde2f0;
  --text-muted:   #7881a0;
  --text-dim:     #4a5270;

  --sidebar-w:    250px;
  --header-h:     62px;
  --radius:       12px;
  --radius-sm:    8px;
}

/* ---- LIGHT MODE VARIABLEN ---- */
html[data-theme="light"] {
  --dark:         #f0f2f8;
  --dark2:        #ffffff;
  --sidebar-bg:   #f5f7fa;
  --card-bg:      #ffffff;
  --card-bg2:     #f0f2f8;
  --border:       #dde1ed;
  --border2:      #c8cedf;
  --text:         #1a1f36;
  --text-muted:   #5a6282;
  --text-dim:     #8e96b0;
  --accent-glow:  rgba(0,194,168,.15);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--dark);
  color: var(--text);
  font-size: 14px;
  overflow-x: hidden;
}

/* ---- LAYOUT ---- */
.app-layout   { display: flex; height: 100vh; }
.sidebar      { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; overflow-y: auto; }
.main-area    { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar       { height: var(--header-h); min-height: var(--header-h); background: var(--dark2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; }
.content-area { flex: 1; overflow-y: auto; padding: 1.75rem; }

/* ---- SIDEBAR ---- */
.sidebar-brand {
  padding: 1.25rem 1.25rem 1rem;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-brand .logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,194,168,.3);
}
.sidebar-brand .brand-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: .95rem; letter-spacing: -.3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.sidebar-section { padding: 1rem .75rem .25rem; }
.sidebar-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); padding: 0 .5rem; margin-bottom: .4rem; }

.nav-item { margin-bottom: 2px; }
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem; font-weight: 500;
  transition: all .15s;
  cursor: pointer;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nav-link.active { background: rgba(0,194,168,.12); color: var(--accent); }
.nav-link .nav-icon { width: 20px; text-align: center; font-size: .9rem; }
.nav-link .badge-pill {
  margin-left: auto;
  background: var(--accent2);
  color: #fff; font-size: .65rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 99px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem .75rem;
  border-top: 1px solid var(--border);
}
.user-card {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-info .name { font-size: .82rem; font-weight: 600; color: var(--text); }
.user-info .role { font-size: .72rem; color: var(--text-muted); }

/* ---- TOPBAR ---- */
.page-title { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 800; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: .75rem; }

/* ---- THEME TOGGLE BUTTON ---- */
.btn-theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.btn-theme-toggle:hover {
  background: var(--border);
  color: var(--accent);
  border-color: var(--accent);
}

/* Light-Mode: Topbar-Schatten deutlicher */
html[data-theme="light"] .topbar {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
html[data-theme="light"] .sidebar {
  box-shadow: 1px 0 4px rgba(0,0,0,.06);
}
html[data-theme="light"] .wsm-modal-close:hover {
  background: rgba(0,0,0,.07);
}
html[data-theme="light"] .wsm-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
html[data-theme="light"] .stat-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
html[data-theme="light"] .nav-link:hover {
  background: rgba(0,0,0,.05) !important;
}
html[data-theme="light"] .nav-link.active {
  background: rgba(0,194,168,.12) !important;
}
html[data-theme="light"] .form-ctrl {
  background: #ffffff;
  border-color: var(--border2);
  color: var(--text);
}
html[data-theme="light"] .form-ctrl:focus {
  background: #ffffff;
  border-color: var(--accent);
}
html[data-theme="light"] .wsm-table thead th {
  background: var(--card-bg2);
}
html[data-theme="light"] .wsm-table tbody tr:hover {
  background: rgba(0,0,0,.03);
}
html[data-theme="light"] .badge-role {
  background: rgba(0,0,0,.08);
  color: var(--text-muted);
}
html[data-theme="light"] .tooltip-ws {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  border: 1px solid var(--border2);
}
/* Trennlinien im Tooltip-Inhalt sind inline rgba(255,255,255,.2) → auf hellem Grund unsichtbar */
html[data-theme="light"] .tooltip-ws div[style*="border-top"] {
  border-top-color: rgba(0,0,0,.12) !important;
}
html[data-theme="light"] select.form-ctrl option {
  background: #ffffff;
  color: var(--text);
}
/* Dynamisch gerenderte Listen-Items (Company-Switcher, Strukturbäume) haben
   rgba(255,255,255,.03) als Inline-Hintergrund — im Light Mode durch card-bg2 ersetzen */
html[data-theme="light"] .wsm-modal-body [style*="rgba(255,255,255,.03)"],
html[data-theme="light"] .wsm-modal-body [style*="rgba(255,255,255, .03)"],
html[data-theme="light"] .wsm-modal-body [style*="rgba(255,255,255,0.03)"] {
  background: var(--card-bg2) !important;
}

/* ---- CARDS ---- */
.wsm-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.wsm-card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.wsm-card-title { font-weight: 700; font-size: .9rem; }
.wsm-card-body  { padding: 1.25rem; }

/* ---- STAT CARDS ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-color, linear-gradient(90deg, var(--accent), var(--accent2)));
}
.stat-card .stat-value { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-card .stat-label { font-size: .75rem; color: var(--text-muted); margin-top: .4rem; }
.stat-card .stat-icon  { position: absolute; right: 1rem; top: 1rem; font-size: 2rem; opacity: .12; }

/* ---- TABLES ---- */
.wsm-table { width: 100%; border-collapse: collapse; }
.wsm-table th {
  background: rgba(255,255,255,.03);
  padding: .7rem 1rem;
  text-align: left;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.wsm-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .84rem; }
.wsm-table tr:last-child td { border-bottom: none; }
.wsm-table tr:hover td { background: rgba(255,255,255,.025); }
.wsm-table th.res-sortable:hover { color: var(--text); background: rgba(255,255,255,.055); }
.wsm-table th.res-sortable:hover .res-sort-icon i { color: var(--accent) !important; }

/* ---- BADGES ---- */
.badge-role {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 6px;
  font-size: .7rem; font-weight: 700;
  background: rgba(0,194,168,.15); color: var(--accent);
  border: 1px solid rgba(0,194,168,.25);
}
.badge-role.admin    { background: rgba(255,165,2,.15); color: var(--warning);  border-color: rgba(255,165,2,.25); }
.badge-role.designer { background: rgba(0,119,255,.15); color: var(--accent2);  border-color: rgba(0,119,255,.25); }
.badge-status.active   { color: var(--success); }
.badge-status.inactive { color: var(--danger); }

/* ---- BUTTONS ---- */
.btn-wsm {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 8px;
  font-size: .82rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: all .15s;
}
.btn-wsm:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-wsm:active { transform: translateY(0); filter: brightness(.95); }
.btn-primary  { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.btn-danger   { background: rgba(255,71,87,.15); color: var(--danger); border: 1px solid rgba(255,71,87,.3); }
.btn-danger:hover { background: rgba(255,71,87,.25); }
.btn-secondary { background: rgba(255,255,255,.07); color: var(--text); border: 1px solid var(--border2); }
.btn-sm { padding: .3rem .65rem; font-size: .76rem; }

/* ---- FORMS ---- */
.form-group { margin-bottom: 1.1rem; }
.form-label-wsm { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .4rem; }
.form-ctrl {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  border-radius: 9px;
  color: var(--text);
  padding: .65rem .9rem;
  font-size: .85rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.form-ctrl:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,194,168,.12); outline: none; background: rgba(255,255,255,.07); }
.form-ctrl::placeholder { color: var(--text-dim); }
select.form-ctrl { cursor: pointer; }
textarea.form-ctrl { min-height: 80px; resize: vertical; }

/* ---- MODAL ---- */
.wsm-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wsm-modal-overlay.open { display: flex; }
.wsm-modal {
  background: var(--card-bg);
  border: 1px solid var(--border2);
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.wsm-modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.wsm-modal-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1rem; }
.wsm-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: .25rem .5rem; border-radius: 6px; }
.wsm-modal-close:hover { background: rgba(255,255,255,.07); color: var(--text); }
.wsm-modal-body   { padding: 1.5rem; }
.wsm-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .75rem; }

/* ---- TOASTS ---- */
.toast-container {
  position: fixed; top: 1.25rem; right: 1.25rem;
  z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
}
.toast-msg {
  background: var(--card-bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: .8rem 1.1rem;
  font-size: .84rem;
  display: flex; align-items: center; gap: .7rem;
  min-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: toastIn .25s ease;
}
.toast-msg.success { border-color: rgba(46,213,115,.3); }
.toast-msg.success .ti { color: var(--success); }
.toast-msg.error   { border-color: rgba(255,71,87,.3); }
.toast-msg.error   .ti { color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---- FLOOR PLAN DESIGNER ---- */
.floorplan-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: crosshair;
  border: 2px solid var(--border2);
  max-width: 100%;
}
.floorplan-img { position: relative; display: block; width: 100%; height: auto; user-select: none; }
.fp-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fp-canvas.editing { pointer-events: all; }
.workspace-rect {
  position: absolute;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 4px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  pointer-events: all;
  display: flex; align-items: center; justify-content: center;
}
.workspace-rect:hover { filter: brightness(1.3); transform: scale(1.02); }
.workspace-rect .ws-label {
  color: #fff;
  font-size: .65rem; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 95%;
}
.tooltip-ws {
  position: fixed;
  background: rgba(0,0,0,.85);
  color: #fff; font-size: .78rem;
  padding: .4rem .7rem;
  border-radius: 7px;
  pointer-events: none;
  z-index: 500;
  white-space: nowrap;
  border: 1px solid var(--border2);
}

/* ---- DRAWING RECT / CIRCLE ---- */
.workspace-rect.ws-circle { border-radius: 50%; }
.draw-ghost {
  position: absolute;
  border: 2px dashed var(--accent);
  background: rgba(0,194,168,.2);
  border-radius: 4px;
  pointer-events: none;
}
.draw-ghost.draw-circle { border-radius: 50%; }

/* ---- TABS ---- */
.wsm-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.wsm-tab {
  padding: .6rem 1.1rem;
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  border: none; background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
  margin-bottom: -1px;
}
.wsm-tab:hover { color: var(--text); }
.wsm-tab.active { color: var(--accent); border-color: var(--accent); }

/* ---- EMPTY STATE ---- */
.empty-state { text-align: center; padding: 3rem 2rem; color: var(--text-muted); }
.empty-state i { font-size: 2.5rem; opacity: .3; margin-bottom: 1rem; display: block; }
.empty-state p { font-size: .875rem; }

/* ---- UTILS ---- */
.text-accent  { color: var(--accent); }
.text-muted-wsm { color: var(--text-muted); }
.flex-1 { flex: 1; }
.gap-1  { gap: .5rem; }
.d-flex { display: flex; }
.ai-center { align-items: center; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ---- HAMBURGER & VIEW-TOGGLE (Desktop: versteckt) ---- */
#btn-hamburger {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: var(--card-bg); color: var(--text-muted);
  cursor: pointer; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
#btn-hamburger:hover { color: var(--accent); border-color: var(--accent); }
#btn-fp-view-toggle { display: none; }

/* ---- FLURPLAN ZOOM/PAN ---- */
/* fp-scroll-container ist ein transparenter Wrapper ohne eigene Layout-Effekte.
   overflow:hidden und transform werden nur per JS gesetzt, wenn tatsächlich gezoomt wird.
   Dadurch bleibt das Layout bei Zoom=1 exakt wie das Original. */
.fp-scroll-container {
  width: 100%;
  line-height: 0; /* Verhindert Descender-Lücke unter inline-block fp-canvas-wrap */
}
.fp-scroll-container .floorplan-wrap {
  transform-origin: 0 0;
}

/* ---- LISTENANSICHT KARTEN ---- */
.fp-ws-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: .65rem;
}
.fp-ws-card-header {
  padding: .3rem .75rem; font-size: .7rem; font-weight: 800;
  letter-spacing: .08em; color: #fff;
}
.fp-ws-card-body {
  padding: .65rem .75rem; display: flex; align-items: center; gap: .6rem;
}
.fp-ws-card-info { flex: 1; min-width: 0; }
.fp-ws-card-label { font-weight: 700; font-size: .88rem; }
.fp-ws-card-meta { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }
.fp-ws-card-eq   { font-size: .7rem;  color: var(--text-dim);   margin-top: .2rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Sidebar als Slide-in-Drawer */
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 280px; min-width: 280px;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform .28s ease;
  }
  .sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.45);
  }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 299;
    backdrop-filter: blur(2px);
  }
  .sidebar-backdrop.open { display: block; }

  #btn-hamburger { display: flex; }

  .topbar { padding: 0 .85rem; gap: .6rem; }
  .page-title { font-size: .92rem; }
  .company-name-text { display: none; }

  .content-area { padding: 1rem; }

  /* Modals als Bottom-Sheet */
  .wsm-modal-overlay { align-items: flex-end; padding: 0; }
  .wsm-modal {
    width: 100% !important; max-width: 100% !important;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /* Touch-Targets */
  .nav-link  { padding: .75rem 1.1rem; font-size: .88rem; }
  .btn-wsm   { padding: .6rem 1.1rem; }
  .btn-sm    { padding: .45rem .8rem; }
  .form-ctrl { padding: .75rem .9rem; font-size: .95rem; }
  .wsm-table th, .wsm-table td { font-size: .78rem; padding: .55rem .65rem; }

  /* Designer-Buttons auf Mobile verstecken */
  #btn-design-mode, #btn-draw-mode, #btn-ws-colors, #draw-shape-btns { display: none !important; }

  /* View-Toggle sichtbar */
  #btn-fp-view-toggle { display: inline-flex; }
}

/* ---- FLATPICKR DARK THEME ---- */
.flatpickr-calendar {
  background: var(--card-bg2) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
  border-radius: 10px !important;
}
.flatpickr-months, .flatpickr-weekdays {
  background: var(--card-bg2) !important;
}
.flatpickr-month, .flatpickr-current-month, .flatpickr-monthDropdown-months,
.flatpickr-current-month .numInputWrapper span, .flatpickr-current-month input.cur-year {
  color: var(--text) !important;
  fill: var(--text) !important;
  background: transparent !important;
}
.flatpickr-weekday { color: var(--text-muted) !important; background: transparent !important; }
.flatpickr-day { color: var(--text) !important; border-radius: 6px !important; }
.flatpickr-day:hover { background: var(--border2) !important; border-color: transparent !important; }
.flatpickr-day.today { border-color: var(--accent) !important; color: var(--accent) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.flatpickr-day.flatpickr-disabled { color: var(--text-dim) !important; opacity: .4; }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill: var(--text-muted) !important; }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill: var(--accent) !important; }
.numInputWrapper:hover { background: var(--border) !important; }
.flatpickr-input { color: inherit !important; }

/* ---- FLATPICKR LIGHT THEME ---- */
html[data-theme="light"] .flatpickr-calendar {
  background: #ffffff !important;
  border: 1px solid var(--border2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .flatpickr-months,
html[data-theme="light"] .flatpickr-weekdays {
  background: #f5f7fa !important;
}
html[data-theme="light"] .flatpickr-month,
html[data-theme="light"] .flatpickr-current-month,
html[data-theme="light"] .flatpickr-monthDropdown-months,
html[data-theme="light"] .flatpickr-current-month .numInputWrapper span,
html[data-theme="light"] .flatpickr-current-month input.cur-year {
  color: var(--text) !important;
  fill: var(--text) !important;
  background: transparent !important;
}
html[data-theme="light"] .flatpickr-weekday { color: var(--text-muted) !important; background: transparent !important; }
html[data-theme="light"] .flatpickr-day { color: var(--text) !important; }
html[data-theme="light"] .flatpickr-day:hover { background: var(--border) !important; border-color: transparent !important; }
html[data-theme="light"] .flatpickr-day.today { border-color: var(--accent) !important; color: var(--accent) !important; }
html[data-theme="light"] .flatpickr-day.selected,
html[data-theme="light"] .flatpickr-day.selected:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
html[data-theme="light"] .flatpickr-day.flatpickr-disabled { color: var(--text-dim) !important; opacity: .5; }
html[data-theme="light"] .flatpickr-prev-month svg,
html[data-theme="light"] .flatpickr-next-month svg { fill: var(--text-muted) !important; }
html[data-theme="light"] .numInputWrapper:hover { background: var(--border) !important; }

/* ── Geräte-Modal ────────────────────────────────────────── */
.device-token-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .5rem;
  border-bottom: 1px solid var(--border);
}
.device-token-row:last-child { border-bottom: none; }

/* ── Schnellbuchung Dashboard ────────────────────────────── */
.qb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.qb-card {
  background: var(--card-bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.qb-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,194,168,.15); }
.qb-card-status {
  padding: .25rem .7rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
}
.qb-card-body {
  padding: .65rem .75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.qb-card-label { font-weight: 700; font-size: .92rem; color: var(--text); }
.qb-card-location { font-size: .74rem; color: var(--text-muted); }
.qb-card-colleagues { font-size: .72rem; color: var(--accent); margin-top: .1rem; }
.qb-card-footer {
  padding: .5rem .75rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .4rem;
  align-items: center;
  justify-content: flex-end;
}
.qb-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: .875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.qb-empty i { font-size: 1.6rem; opacity: .4; }

/* Favoriten-Stern in Schnellbuchungs-Karte */
.qb-fav-toggle {
  font-size: .95rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  transition: color .15s, transform .15s;
  flex-shrink: 0;
}
.qb-fav-toggle:hover { color: #fbbf24; transform: scale(1.2); }
.qb-fav-toggle.is-fav { color: #fbbf24; }

/* Favoriten-Stern im Flurplan */
.ws-fav-btn {
  position: absolute;
  bottom: 3px;
  left: 3px;
  font-size: .75rem;
  color: rgba(255,255,255,.85);
  text-shadow: 0 0 3px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5);
  line-height: 1;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  z-index: 2;
  transition: color .15s, transform .15s, text-shadow .15s;
}
.ws-fav-btn:hover {
  color: #fbbf24;
  text-shadow: 0 0 5px rgba(0,0,0,.8), 0 0 8px rgba(251,191,36,.6);
  transform: scale(1.25);
}
.ws-fav-btn.is-fav {
  color: #fbbf24;
  text-shadow: 0 0 4px rgba(0,0,0,.7), 0 0 8px rgba(251,191,36,.5);
}

@media (max-width: 768px) {
  .qb-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .qb-card-label { font-size: .84rem; }
}
@media (max-width: 420px) {
  .qb-grid { grid-template-columns: 1fr; }
}

/* ── Check-in / QR-NFC ───────────────────────────────────── */
.checkin-badge-ok {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: #22c55e;
  font-weight: 600;
}
.checkin-badge-pending {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--warning);
  font-weight: 600;
}
/* ── Büropräsenz ───────────────────────────────────────────── */
.presence-stat {
  text-align: center;
  padding: .5rem 1rem;
}
.presence-pct {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: .2rem;
}
.presence-label {
  font-size: .75rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.presence-bar-track {
  position: relative;
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  overflow: visible;
  margin: .4rem 0;
}
.presence-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .45s ease;
  max-width: 100%;
}
.presence-target-line {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 18px;
  background: var(--text-muted);
  border-radius: 1px;
  transform: translateX(-50%);
}
.presence-target-label {
  position: absolute;
  top: 18px;
  font-size: .65rem;
  color: var(--text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}
.presence-badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.presence-badge-green    { background: rgba(34,197,94,.15);  color: #22c55e; }
.presence-badge-yellow   { background: rgba(255,165,2,.15);  color: var(--warning); }
.presence-badge-red      { background: rgba(239,68,68,.15);  color: #ef4444; }
.presence-badge-disabled { background: var(--border);        color: var(--text-muted); }

/* ── Kalenderansicht ───────────────────────────────────────── */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.cal-nav-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}
.cal-grid-header,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-grid-header { margin-bottom: 3px; }
.cal-day-header {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: .3rem 0;
}
.cal-day {
  background: var(--card-bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 72px;
  padding: .3rem .35rem;
  overflow: hidden;
}
.cal-day.cal-today {
  border-color: var(--accent);
}
.cal-day.cal-empty {
  background: transparent;
  border: none;
}
.cal-day-num {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: .2rem;
  line-height: 1;
}
.cal-today .cal-day-num {
  color: var(--accent);
}
.cal-event {
  font-size: .68rem;
  line-height: 1.35;
  padding: .12rem .3rem;
  border-radius: 3px;
  margin-bottom: .12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-left: 2px solid transparent;
}
.cal-event.cal-confirmed {
  background: rgba(0,194,168,.15);
  color: var(--accent);
  border-left-color: var(--accent);
  cursor: pointer;
}
.cal-event.cal-confirmed:hover {
  background: rgba(0,194,168,.28);
}
.cal-event.cal-expired {
  background: rgba(107,114,128,.15);
  color: var(--text-muted);
  border-left-color: var(--text-muted);
}
.cal-event.cal-cancelled {
  background: rgba(255,165,2,.12);
  color: var(--warning);
  border-left-color: var(--warning);
  text-decoration: line-through;
  opacity: .7;
}
.cal-event-time {
  opacity: .75;
  margin-right: .15rem;
}
.cal-summary {
  margin-top: .6rem;
  font-size: .78rem;
  color: var(--text-muted);
}
@media (max-width: 600px) {
  .cal-day { min-height: 52px; padding: .2rem .2rem; }
  .cal-event { font-size: .62rem; padding: .1rem .2rem; }
  .cal-day-header { font-size: .65rem; }
}

/* Check-in-Indikator im Workspace-Element (Flurplan) */
.ws-checkin-indicator {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: .68rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 3px rgba(0,0,0,.8);
  line-height: 1;
  pointer-events: none;
}