/* DASH MSP — shadcn/ui-Designsystem (Zinc, "New York"-Stil)
   Tokens 1:1 aus shadcn übernommen, umgesetzt als reines CSS ohne Build-Step. */

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(240 10% 3.9%);
  --primary: hsl(240 5.9% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 72.2% 50.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --success: hsl(142 71% 35%);
  --success-bg: hsl(141 79% 96%);
  --success-border: hsl(141 44% 86%);
  --warning: hsl(38 92% 50%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 5.9% 10%);
  --radius: 0.625rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

[data-theme="dark"] {
  --background: hsl(240 10% 3.9%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(240 10% 3.9%);
  --card-foreground: hsl(0 0% 98%);
  --popover: hsl(240 10% 3.9%);
  --popover-foreground: hsl(0 0% 98%);
  --primary: hsl(0 0% 98%);
  --primary-foreground: hsl(240 5.9% 10%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: hsl(0 62.8% 50.6%);
  --destructive-foreground: hsl(0 0% 98%);
  --success: hsl(142 69% 58%);
  --success-bg: hsl(142 60% 10%);
  --success-border: hsl(142 40% 20%);
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);
}

* { box-sizing: border-box; border-color: var(--border); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

main { max-width: 1140px; margin: 0 auto; padding: 28px 22px 70px; }
.portal-main { max-width: 860px; }

/* ===== Header ===== */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 22px;
  height: 56px;
  background: color-mix(in srgb, var(--background) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topnav a {
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 6px 11px;
  border-radius: calc(var(--radius) - 4px);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
}
.topnav a:hover { color: var(--foreground); }
.topnav a.active { color: var(--foreground); background: var(--accent); }
.topnav .brand {
  color: var(--foreground);
  font-weight: 600;
  font-size: 15px;
  margin-right: 16px;
  letter-spacing: -0.01em;
}
.topnav .spacer { flex: 1; }

.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  height: 36px;
  padding: 0 6px 0 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--muted-foreground);
  cursor: pointer;
  margin-right: 8px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease;
}
.search-trigger:hover { background: var(--accent); color: var(--accent-foreground); }
.search-trigger kbd {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--muted);
  padding: 2px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted-foreground);
}

.theme-toggle {
  background: var(--background);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
  margin-right: 8px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease;
}
.theme-toggle:hover { background: var(--accent); }
.theme-toggle::after { content: "Dunkel"; }
[data-theme="dark"] .theme-toggle::after { content: "Hell"; }

/* ===== Command-Dialog (⌘K) ===== */
.cmdk-overlay[hidden] { display: none !important; }
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgb(0 0 0 / 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cmdk-overlay.visible { opacity: 1; }
.cmdk-panel {
  width: min(560px, 92vw);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: transform 0.15s ease;
}
.cmdk-overlay.visible .cmdk-panel { transform: translateY(0) scale(1); }
#cmdk-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  padding: 14px 16px;
  color: var(--foreground);
  border-bottom: 1px solid var(--border);
}
#cmdk-input::placeholder { color: var(--muted-foreground); }
.cmdk-results { max-height: 44vh; overflow-y: auto; padding: 6px; }
.cmdk-hint { color: var(--muted-foreground); font-size: 12.5px; text-align: center; padding: 14px 0; margin: 0; }
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 4px);
  text-decoration: none;
  color: var(--foreground);
  font-size: 14px;
}
.cmdk-item.selected { background: var(--accent); color: var(--accent-foreground); }
.cmdk-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmdk-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-sub { color: var(--muted-foreground); font-size: 12px; }
.cmdk-type {
  font-size: 11px;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  background: var(--muted);
  border-radius: 4px;
  padding: 1px 7px;
  flex-shrink: 0;
}

/* ===== Cards ===== */
.card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.card h3 { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head h2 { margin: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.page-head h1 { margin: 0 0 18px; }
.page-head > span { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h1 { font-size: 24px; margin-top: 0; letter-spacing: -0.025em; font-weight: 600; }

/* ===== KPIs ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.kpi-label { color: var(--muted-foreground); font-size: 13px; font-weight: 500; }
.kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.pos { color: var(--success); }
.neg { color: var(--destructive); }
.muted { color: var(--muted-foreground); }
.pre { white-space: pre-wrap; }
.success { color: var(--success); font-weight: 500; }
.hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; word-break: break-all; }
.small-print { font-size: 12.5px; }

/* ===== Tabellen ===== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted-foreground); font-size: 13px; font-weight: 500; height: 40px; padding-top: 0; padding-bottom: 0; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--muted) 50%, transparent); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td a { color: var(--foreground); text-decoration: none; font-weight: 500; text-underline-offset: 3px; }
td a:hover { text-decoration: underline; }
td.actions { white-space: nowrap; text-align: right; }
td.actions a { margin-right: 10px; font-size: 13px; color: var(--muted-foreground); }
td.actions a:hover { color: var(--foreground); }
.muted-row td { color: var(--muted-foreground); }

/* ===== Badges ===== */
.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  padding: 2px 10px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 12px;
  font-weight: 500;
  background: var(--secondary);
  color: var(--secondary-foreground);
  white-space: nowrap;
}
.badge.ok {
  background: var(--success-bg);
  color: var(--success);
  border-color: var(--success-border);
}

.warn-card { border-left: 3px solid var(--warning); }
.success-card { border-left: 3px solid var(--success); }

/* ===== Formulare ===== */
.form label { display: block; margin-bottom: 14px; font-weight: 500; font-size: 13.5px; }
.form input, .form select, .form textarea,
.login-card input, .gate-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 14px;
  background: transparent;
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .form input, [data-theme="dark"] .form select, [data-theme="dark"] .form textarea,
[data-theme="dark"] .login-card input, [data-theme="dark"] .gate-card input {
  background: color-mix(in srgb, var(--input) 30%, transparent);
}
.form select { appearance: auto; background: var(--background); }
.form input:focus, .form select:focus, .form textarea:focus,
.login-card input:focus, .gate-card input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted-foreground); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form label.checkbox { display: flex; align-items: center; gap: 8px; }
.form label.checkbox input { width: auto; min-height: auto; margin: 0; box-shadow: none; accent-color: var(--primary); }
.form-actions { display: flex; gap: 8px; margin-top: 6px; align-items: center; flex-wrap: wrap; }

dl { margin: 0; }
dt { color: var(--muted-foreground); font-size: 12.5px; font-weight: 500; margin-top: 10px; }
dd { margin: 1px 0 0; }

code {
  background: var(--muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}

/* ===== Buttons (shadcn-Varianten) ===== */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  height: 36px;
  padding: 0 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
button:hover, .btn:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
.btn.secondary, button.secondary {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--input);
}
.btn.secondary:hover, button.secondary:hover { background: var(--accent); color: var(--accent-foreground); }
.btn.small, button.small { height: 32px; padding: 0 12px; font-size: 13px; }
button.danger {
  background: transparent;
  color: var(--destructive);
  border-color: color-mix(in srgb, var(--destructive) 30%, transparent);
  box-shadow: none;
}
button.danger:hover { background: color-mix(in srgb, var(--destructive) 8%, transparent); }
button.link {
  background: none;
  border: none;
  height: auto;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  box-shadow: none;
}
button.link:hover { background: none; color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
button.link.danger { color: var(--destructive); }
button.link.danger:hover { color: var(--destructive); }
form.inline { display: inline; }

/* ===== Login & PLZ-Gate ===== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--muted);
}
[data-theme="dark"] .login-page { background: var(--background); }
.login-card, .gate-card {
  width: min(380px, 92vw);
  text-align: center;
  padding: 32px 28px;
  margin-bottom: 0;
}
.gate-wrap { display: flex; justify-content: center; padding-top: 8vh; }
.login-card h1, .gate-card h1 { font-size: 20px; }
.login-card input, .gate-card input { text-align: center; margin-bottom: 14px; }
.login-card button, .gate-card button { width: 100%; }
.error { color: var(--destructive); font-size: 13.5px; font-weight: 500; }

/* ===== Signatur-Canvas ===== */
.sig-wrap { margin: 14px 0 16px; }
#sig-canvas {
  display: block;
  width: 100%;
  height: 180px;
  background: #fff;
  border: 1.5px dashed var(--input);
  border-radius: calc(var(--radius) - 2px);
  cursor: crosshair;
  touch-action: none;
  margin-bottom: 8px;
}
.sig-preview {
  max-height: 90px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 8px 14px;
  margin-top: 8px;
}

/* ===== Vorlagen-Loader & Mono-Textarea ===== */
.template-loader { display: flex; gap: 12px; align-items: flex-end; }
.template-loader button { margin-bottom: 14px; }
textarea.mono, .form textarea.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; }

/* ===== Margen-Balken ===== */
.bar-cell { min-width: 110px; }
.bar-track { height: 6px; border-radius: 99px; background: var(--muted); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; background: var(--primary); transition: width 0.4s ease; }
.bar-fill.neg-bar { background: var(--destructive); }

/* ===== MRR-Verlaufs-Chart ===== */
.chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding-top: 8px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.chart-bars { display: flex; align-items: flex-end; gap: 3px; flex: 1; width: 100%; justify-content: center; }
.chart-bar { width: 38%; max-width: 26px; border-radius: 4px 4px 2px 2px; min-height: 2px; transition: height 0.4s ease; }
.chart-bar.mrr { background: var(--primary); }
.chart-bar.margin { background: var(--success); }
.chart-label { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.chart-legend { display: flex; gap: 18px; margin-top: 12px; font-size: 12.5px; color: var(--muted-foreground); }
.chart-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.chart-legend .dot.mrr { background: var(--primary); }
.chart-legend .dot.margin { background: var(--success); }

/* ===== Stunden & NinjaOne ===== */
.quick-hours-row { display: flex; gap: 14px; }
.quick-hours-row label { flex: 1; }
.hours-group { margin-bottom: 20px; }
.hours-group:last-child { margin-bottom: 0; }
.hours-group h3 { margin: 0; font-size: 14px; }
.hours-group h3 .muted { font-weight: 400; font-size: 13px; margin-left: 8px; }
.assign-form select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 13px;
  background: var(--background);
  color: var(--foreground);
  max-width: 260px;
  box-shadow: var(--shadow-sm);
}
input[type="file"] { padding: 5px 8px !important; box-shadow: none !important; }
input[type="file"]::file-selector-button {
  border: 1px solid var(--input);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  padding: 3px 10px;
  margin-right: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}