/* ═══════════════════════════════════════════════════════════════
   karliq — Design System v2.0
   Inspiriert von ClickUp · Schweizer KMU Charakter
═══════════════════════════════════════════════════════════════ */

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

:root {
  --brand-1: #4f46e5;
  --brand-2: #7c3aed;
  --sidebar-bg: linear-gradient(160deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  --sidebar-text: #c4b5fd;
  --sidebar-muted: #7c6fcd;
  --bg: #f8f7ff;
  --bg-card: #ffffff;
  --bg-input: #f5f3ff;
  --border: #e8e4f8;
  --border-input: #d4d0ed;
  --text-1: #1e1b4b;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  --shadow-sm: 0 1px 3px rgba(79,70,229,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(79,70,229,.08),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 32px rgba(79,70,229,.12),0 4px 12px rgba(0,0,0,.06);
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;color:var(--text-1);background:var(--bg);-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:10px;}

/* SIDEBAR */
.sidebar{position:fixed;top:0;left:0;width:224px;height:100vh;background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:100;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.15);}
.sidebar-logo{padding:1.5rem 1.25rem 1.25rem;border-bottom:0.5px solid rgba(255,255,255,.08);}
.logo-title{font-size:20px;font-weight:700;letter-spacing:-0.5px;background:linear-gradient(135deg,#fff 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.logo-sub{font-size:11px;color:var(--sidebar-muted);margin-top:3px;font-weight:500;}
.nav-section{padding:.9rem 1.25rem .3rem;font-size:10px;font-weight:700;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:.08em;}
.nav-item{position:relative;display:flex;align-items:center;gap:9px;padding:9px 1rem;font-size:13px;font-weight:500;color:var(--sidebar-text);cursor:pointer;user-select:none;transition:all .15s;margin:1px 8px;border-radius:var(--r-sm);}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;transform:translateX(2px);}
.nav-item.active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);}
.nav-item.active::before{content:"";position:absolute;left:-8px;width:3px;height:28px;background:#a78bfa;border-radius:0 3px 3px 0;}
.nav-item.disabled{opacity:.3;cursor:default;pointer-events:none;}
.nav-badge{margin-left:auto;font-size:10px;font-weight:700;background:#ef4444;color:#fff;padding:1px 6px;border-radius:20px;}
.sidebar-footer{margin-top:auto;padding:1rem 1.25rem;border-top:0.5px solid rgba(255,255,255,.08);}
.sidebar-footer .version{font-size:11px;color:var(--sidebar-muted);}
.support-btn{margin-top:6px;width:100%;padding:7px 10px;font-size:12px;font-weight:500;font-family:inherit;background:rgba(255,255,255,.07);border:0.5px solid rgba(255,255,255,.12);border-radius:var(--r-sm);color:var(--sidebar-text);cursor:pointer;text-align:center;transition:all .15s;}
.support-btn:hover{background:rgba(255,255,255,.14);color:#fff;}

/* MAIN */
.main{margin-left:224px;min-height:100vh;padding:2rem 2.25rem;}
.page{display:none;}.page.active{display:block;}
.page-header{margin-bottom:1.75rem;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;}
.page-header-left h1{font-size:24px;font-weight:700;color:var(--text-1);letter-spacing:-.3px;}
.page-header-left p{font-size:13px;color:var(--text-2);margin-top:4px;}

/* BUTTONS */
.btn{padding:8px 16px;font-size:13px;font-weight:500;font-family:inherit;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-card);color:var(--text-1);cursor:pointer;white-space:nowrap;transition:all .15s;box-shadow:var(--shadow-sm);}
.btn:hover{background:#f5f3ff;border-color:#c4b5fd;box-shadow:var(--shadow-md);}
.btn-primary{background:linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 100%);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(79,70,229,.3);}
.btn-primary:hover{background:linear-gradient(135deg,#4338ca 0%,#6d28d9 100%);box-shadow:0 4px 16px rgba(79,70,229,.4);transform:translateY(-1px);}
.btn-danger{background:#fff1f2;color:#be123c;border-color:#fecdd3;}
.btn-danger:hover{background:#ffe4e6;}
.btn-warn{background:#fffbeb;color:#92400e;border-color:#fde68a;}
.btn-success{background:#f0fdf4;color:#065f46;border-color:#bbf7d0;}
.btn-sm{padding:5px 11px;font-size:12px;}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:6px;}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.375rem;margin-bottom:1rem;box-shadow:var(--shadow-sm);transition:box-shadow .2s;}
.card:hover{box-shadow:var(--shadow-md);}
.card-title{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:1rem;}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:1.75rem;}
.metric{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:1.125rem 1.25rem;box-shadow:var(--shadow-sm);transition:all .2s;position:relative;overflow:hidden;}
.metric::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));}
.metric:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.metric .mlabel{font-size:11px;font-weight:600;color:var(--text-3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.metric .mval{font-size:22px;font-weight:700;color:var(--text-1);letter-spacing:-.5px;}
.metric .msub{font-size:11px;color:var(--text-3);margin-top:4px;}

/* GRIDS */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}

/* FIELDS */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.field label{font-size:12px;font-weight:600;color:var(--text-2);}
.field input,.field select,.field textarea{font-size:13px;font-family:inherit;padding:8px 11px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--r-sm);color:var(--text-1);width:100%;transition:all .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-1);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.1);}
.field .hint{font-size:11px;color:var(--text-3);}
.required::after{content:" *";color:#ef4444;}

/* TAGS */
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;white-space:nowrap;}
.tag-aktiv{background:#ecfdf5;color:#065f46;}
.tag-austritt{background:#fffbeb;color:#92400e;}
.tag-ausgetreten{background:#fff1f2;color:#be123c;}
.tag-info{background:#eff6ff;color:#1d4ed8;}
.tag-warn{background:#fffbeb;color:#92400e;}
.tag-neu{background:#f5f3ff;color:#5b21b6;}
.tag-purple{background:#f5f3ff;color:#5b21b6;}

/* AVATAR */
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}

/* MA LIST */
.ma-list{display:flex;flex-direction:column;gap:8px;}
.ma-row{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);}
.ma-row:hover{border-color:#c4b5fd;box-shadow:var(--shadow-md);transform:translateY(-1px);}

/* FILTER BAR */
.filter-bar{display:flex;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap;}
.filter-bar input,.filter-bar select{font-size:13px;font-family:inherit;padding:7px 11px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-1);box-shadow:var(--shadow-sm);transition:all .15s;}
.filter-bar input:focus,.filter-bar select:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 3px rgba(79,70,229,.1);}

/* TABS */
.tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:1.5rem;overflow-x:auto;}
.tab-btn{padding:9px 16px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap;transition:all .15s;}
.tab-btn:hover{color:var(--brand-1);}
.tab-btn.active{color:var(--brand-1);border-bottom-color:var(--brand-1);font-weight:600;}
.tab-content{display:none;}.tab-content.active{display:block;}

/* TABLES */
.history-table{width:100%;border-collapse:collapse;font-size:13px;}
.history-table th{text-align:left;padding:9px 12px;color:var(--text-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);background:#faf9ff;}
.history-table td{padding:9px 12px;border-bottom:1px solid #f3f0ff;vertical-align:middle;}
.history-table tr:last-child td{border-bottom:none;}
.history-table .right{text-align:right;}
.history-table tr.current-row td{background:linear-gradient(90deg,#f5f3ff,transparent);}
.history-table tr:hover td{background:#faf9ff;}
.month-table{width:100%;border-collapse:collapse;font-size:13px;}
.month-table th{text-align:left;padding:8px 12px;color:var(--text-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);}
.month-table td{padding:8px 12px;border-bottom:1px solid #f3f0ff;}
.month-table tr:last-child td{border-bottom:none;}
.month-table .right{text-align:right;}
.month-table tr.highlight-row td{background:linear-gradient(90deg,#ede9fe,#f5f3ff);color:var(--brand-1);font-weight:600;}
.month-table tfoot td{font-weight:600;border-top:1px solid var(--border);background:#faf9ff;padding:9px 12px;}

/* ALERTS */
.alert-box{padding:11px 15px;border-radius:var(--r-sm);font-size:12px;font-weight:500;margin-bottom:12px;line-height:1.5;border-left:3px solid;}
.alert-warn{background:#fffbeb;color:#92400e;border-left-color:#f59e0b;}
.alert-info{background:#eff6ff;color:#1e40af;border-left-color:#3b82f6;}
.alert-success{background:#f0fdf4;color:#065f46;border-left-color:#22c55e;}
.alert-danger{background:#fff1f2;color:#be123c;border-left-color:#ef4444;}

/* MISC */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;flex-wrap:wrap;gap:8px;}
.empty-state{text-align:center;padding:2.75rem;color:var(--text-3);font-size:13px;border:1px dashed var(--border);border-radius:var(--r-md);background:#faf9ff;}
.divider{height:1px;background:var(--border);margin:1.125rem 0;}
.breadcrumb{display:flex;align-items:center;gap:8px;margin-bottom:1.25rem;flex-wrap:wrap;}
.team-alloc-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.team-alloc-row select{flex:1;}
.team-alloc-row input[type=number]{width:80px;}
.team-alloc-total{font-size:13px;padding:6px 14px;border-radius:var(--r-sm);font-weight:600;margin-top:4px;display:inline-block;}
.alloc-ok{background:#f0fdf4;color:#065f46;}
.alloc-warn{background:#fff1f2;color:#be123c;}
.progress-bar{height:6px;background:#e8e4f8;border-radius:10px;overflow:hidden;margin-top:4px;}
.progress-fill{height:100%;border-radius:10px;}
.year-nav{display:flex;align-items:center;gap:10px;}
.year-nav button{padding:5px 12px;font-size:14px;font-family:inherit;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-card);cursor:pointer;color:var(--text-2);box-shadow:var(--shadow-sm);transition:all .15s;}
.year-nav button:hover{border-color:#c4b5fd;color:var(--brand-1);}
.year-nav span{font-size:15px;font-weight:700;min-width:60px;text-align:center;}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,75,.5);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-card);border-radius:var(--r-lg);padding:1.75rem;width:580px;max-width:96vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg);border:1px solid var(--border);}
.modal-title{font-size:17px;font-weight:700;margin-bottom:1.375rem;padding-right:2rem;letter-spacing:-.2px;}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:#f5f3ff;border:none;width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;color:var(--text-2);display:flex;align-items:center;justify-content:center;transition:all .15s;}
.modal-close:hover{background:#ede9fe;color:var(--brand-1);}
.modal-footer{display:flex;gap:8px;margin-top:1.375rem;justify-content:flex-end;border-top:1px solid var(--border);padding-top:1.125rem;}

/* DOCS */
.dok-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f3f0ff;}
.dok-row:last-child{border-bottom:none;}
.dok-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#ede9fe,#ddd6fe);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}

/* COLLAPSIBLE */
.cs{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;}
.cs-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#faf9ff;cursor:pointer;user-select:none;transition:background .15s;}
.cs-hdr:hover{background:#f5f3ff;}
.cs-title{font-size:13px;font-weight:600;color:var(--text-1);}
.cs-icon{font-size:11px;color:var(--text-3);transition:transform .2s ease;}
.cs-icon.open{transform:rotate(90deg);}
.cs-body{padding:16px;display:none;}
.cs-body.open{display:block;}

/* CHECKBOXES */
.cb-row{display:flex;align-items:center;gap:9px;padding:6px 0;}
.cb-row input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--brand-1);flex-shrink:0;}
.cb-row label{font-size:13px;color:var(--text-1);cursor:pointer;}

/* TEAM ALLOC */
.ta-row{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--r-sm);margin-bottom:6px;transition:border-color .15s;}
.ta-row:hover{border-color:#c4b5fd;}
.ta-row select{flex:1;font-size:13px;font-family:inherit;padding:5px 8px;background:#fff;border:1px solid var(--border);border-radius:6px;}
.ta-row input[type=number]{width:70px;font-size:13px;font-family:inherit;padding:5px 8px;background:#fff;border:1px solid var(--border);border-radius:6px;text-align:right;}
.ta-total{display:inline-block;font-size:13px;font-weight:600;padding:5px 14px;border-radius:var(--r-sm);margin-top:4px;}
.ta-ok{background:#f0fdf4;color:#065f46;}
.ta-warn{background:#fff1f2;color:#be123c;}

/* HISTORY */
.hist-entry{display:flex;gap:14px;padding:12px;background:#faf9ff;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px;transition:box-shadow .15s;}
.hist-entry:hover{box-shadow:var(--shadow-sm);}
.hist-date{font-size:12px;color:var(--text-3);min-width:90px;padding-top:1px;font-weight:500;}
.hist-title{font-size:13px;font-weight:600;}
.hist-sub{font-size:12px;color:var(--text-2);margin-top:3px;}

/* INFO GRID */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;font-size:13px;}
.info-cell .lbl{font-size:11px;font-weight:600;color:var(--text-3);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em;}

/* ── DASHBOARD WIDGETS ──────────────────────────────────────────────────── */
/* 4-Spalten Grid — Widgets können 1/2/3/4 Spalten belegen */
#dash-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Widget-Breiten */
.dash-widget { position: relative; transition: transform .15s, box-shadow .15s; }
.dash-w-third     { grid-column: span 1; } /* 1/3 ≈ 1 Spalte  */
.dash-w-half      { grid-column: span 2; } /* 1/2 = 2 Spalten */
.dash-w-twothird  { grid-column: span 3; } /* 2/3 ≈ 3 Spalten */
.dash-w-full      { grid-column: span 4; } /* Voll = 4 Spalten */

/* Responsive: ab <900px alles voll */
@media (max-width: 900px) {
  #dash-widgets { grid-template-columns: 1fr; }
  .dash-w-third, .dash-w-half, .dash-w-twothird, .dash-w-full { grid-column: span 1; }
}

.dash-widget.dash-edit-mode {
  cursor: grab;
  border-radius: var(--r-lg);
  outline: 2px dashed #c4b5fd;
  outline-offset: 3px;
  background: #faf9ff;
}

.dash-widget.dash-edit-mode:active {
  cursor: grabbing;
}

.dash-widget.drag-over {
  outline-color: #4f46e5;
  outline-width: 2px;
  transform: scale(1.005);
  box-shadow: 0 0 0 4px rgba(79,70,229,.12);
}

.dash-widget-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-radius: var(--r-md) var(--r-md) 0 0;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
}

.dash-drag-handle {
  color: #7c3aed;
  cursor: grab;
  user-select: none;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-drag-handle:active { cursor: grabbing; }

.dash-widget-remove {
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 2px 8px;
  background: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}

.dash-widget-remove:hover {
  background: #ffe4e6;
}

/* Add-Button Gruppe in Edit-Bar */
.dash-add-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── DIENSTPLAN ─────────────────────────────────────────────────────────── */
.dp-drop-hover {
  background: #f5f3ff !important;
  outline: 2px solid #4f46e5;
  outline-offset: -2px;
}
.dp-zelle:hover {
  filter: brightness(0.95);
}

/* ── DIENSTPLAN PLANUNG ─────────────────────────────────────────────────── */
.dp-planung-hover {
  background: #f0eeff !important;
  outline: 2px dashed #4f46e5;
  outline-offset: -3px;
}
.dp-ma-sidebar-karte:hover {
  transform: translateX(-2px);
  box-shadow: 2px 2px 8px rgba(79,70,229,.12);
}
.dp-ma-karte--eingeplant:hover {
  filter: brightness(0.95);
}