/* ─────────────────────────────────────────────────────────────────────────────
   NuklaroPlan Design System - Komponenten

   Gemeinsame Bausteine fuer die gesamte Arbeitsumgebung (Planung, Mitarbeiter,
   Urlaub, Objekte, Dialoge). Alles hier ist tokenbasiert (css/tokens.css) und wird
   NACH module/schichtplanung/css/styles.css geladen: die dortigen Klassennamen
   (.action-btn, .modal, ...) bleiben bestehen und bekommen hier ihr einheitliches
   Aussehen, dadurch muss kein JS/HTML angefasst werden.

   Bausteine:  Buttons · Icon-Buttons · Eingabefelder · Dialoge · Tabs · Menues ·
               Karten · Badges/Pillen · Scrollbars · Fokus
   Styleguide: /design-system
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Grundlage ─────────────────────────────────────────────────────────────── */
body { font-family: var(--font-family-base); color: var(--text-primary); }
button, input, select, textarea { font-family: inherit; }

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: 2px;
}
:where(input, select, textarea):focus-visible { outline: none; }

::selection { background: var(--np-accent-ring); }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
/* Basis: ruhige Flaeche, duenner Rahmen. Varianten: .primary  .danger  .ghost */
.action-btn,
.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 14px;
  font-family: inherit; font-size: var(--font-size-1); font-weight: var(--font-weight-semibold);
  line-height: 1; white-space: nowrap; cursor: pointer;
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.action-btn:hover:not(:disabled),
.np-btn:hover:not(:disabled) { background: var(--bg-surface-alt); border-color: var(--border-strong); color: var(--text-primary); }
.action-btn:active:not(:disabled),
.np-btn:active:not(:disabled) { background: var(--bg-surface-hover); }
.action-btn:disabled, .np-btn:disabled { opacity: .5; cursor: default; filter: none; box-shadow: none; }
.action-btn .material-icons, .np-btn .material-icons { font-size: 17px; }

.action-btn.primary, .np-btn.primary {
  background: var(--np-accent); border-color: var(--np-accent); color: #fff;
  box-shadow: 0 1px 2px rgba(31, 91, 255, .35);
}
.action-btn.primary:hover:not(:disabled), .np-btn.primary:hover:not(:disabled) {
  background: var(--np-accent-deep); border-color: var(--np-accent-deep); color: #fff;
}
.action-btn.danger, .np-btn.danger {
  background: var(--bg-surface); border-color: var(--border-default); color: var(--signal-red);
}
.action-btn.danger:hover:not(:disabled), .np-btn.danger:hover:not(:disabled) {
  background: var(--signal-red-light); border-color: var(--signal-red); color: var(--signal-red);
}
.np-btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.np-btn.ghost:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text-primary); }

/* Icon-Buttons (Bearbeiten/Loeschen/Schliessen ...) */
.np-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  color: var(--text-tertiary); background: transparent; border: 0; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.np-iconbtn .material-icons { font-size: 19px; }
.np-iconbtn:hover:not(:disabled) { background: var(--np-accent-soft); color: var(--np-accent); }
.np-iconbtn.danger:hover:not(:disabled) { background: var(--signal-red-light); color: var(--signal-red); }

/* ── Eingabefelder ─────────────────────────────────────────────────────────── */
.modal input:where(:not([type="checkbox"]):not([type="radio"]):not([type="color"])),
.modal select,
.modal textarea,
.np-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  font-family: inherit; font-size: var(--font-size-2); color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.modal input::placeholder, .np-input::placeholder { color: var(--text-tertiary); }
.modal input:where(:not([type="checkbox"]):not([type="radio"])):hover,
.modal select:hover, .np-input:hover { border-color: var(--text-tertiary); }
.modal input:where(:not([type="checkbox"]):not([type="radio"])):focus,
.modal select:focus, .modal textarea:focus, .np-input:focus {
  border-color: var(--np-accent); box-shadow: var(--shadow-focus);
}
.modal input:disabled, .modal select:disabled { background: var(--bg-surface-alt); color: var(--text-tertiary); }
.modal label, .np-label {
  display: block; margin-bottom: 6px;
  font-size: var(--font-size-1); font-weight: var(--font-weight-semibold); color: var(--text-secondary);
}
.modal select {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238590a2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--np-accent); }

/* ── Dialoge ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  background: var(--overlay);
  backdrop-filter: blur(3px);
  z-index: var(--z-modal);
}
.modal {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-6); overflow: hidden;
  animation: np-pop var(--dur) var(--ease);
}
@keyframes np-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.modal h3 {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  padding: 18px var(--space-6);
  font-family: var(--font-family-head); font-size: var(--font-size-3); font-weight: var(--font-weight-bold);
  letter-spacing: -.01em; color: var(--text-primary);
  background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
}
.modal-btns { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }

/* ── Tabs (Dialog-Register) ────────────────────────────────────────────────── */
.emp-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-default); background: transparent; }
.emp-tab {
  position: relative; padding: 10px 14px; margin-bottom: -1px;
  font-family: inherit; font-size: var(--font-size-2); font-weight: var(--font-weight-semibold);
  color: var(--text-secondary); background: transparent; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}
.emp-tab:hover { color: var(--text-primary); }
.emp-tab.active { color: var(--np-accent); border-bottom-color: var(--np-accent); background: transparent; }

/* ── Menues / Dropdowns ────────────────────────────────────────────────────── */
.sp-dd-menu, .sp2-ver-menu {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-1); z-index: var(--z-dropdown);
}
.sp-dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--font-size-1); font-weight: var(--font-weight-semibold);
  color: var(--text-primary); cursor: pointer; text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sp-dd-item .material-icons { font-size: 17px; color: var(--text-tertiary); }
.sp-dd-item:hover:not(:disabled) { background: var(--bg-surface-hover); color: var(--text-primary); }
.sp-dd-item:hover:not(:disabled) .material-icons { color: var(--np-accent); }
.sp2-objekt-item.active { background: var(--np-accent-soft); color: var(--np-accent-deep); }
.sp2-objekt-item.active .material-icons { color: var(--np-accent); }

/* ── Karten / Pillen ───────────────────────────────────────────────────────── */
.np-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.np-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  font-size: var(--font-size-1); font-weight: var(--font-weight-semibold);
  color: var(--text-secondary); background: var(--bg-surface); border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
.np-pill.accent { color: var(--np-accent-deep); background: var(--np-accent-soft); box-shadow: none; }
.np-pill.success { color: var(--signal-green); background: var(--signal-green-light); box-shadow: none; }
.np-pill.warning { color: var(--signal-amber); background: var(--signal-amber-light); box-shadow: none; }
.np-pill.danger { color: var(--signal-red); background: var(--signal-red-light); box-shadow: none; }

/* ── Scrollbars ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-color: var(--border-strong) transparent; }

/* ── Einstellungen-Dialog: Seitennavigation links, Inhalt rechts ───────────────── */
.modal.np-settings {
  width: 800px; max-width: calc(100vw - 32px); padding: 0;
  display: flex; flex-direction: column; max-height: min(660px, calc(100vh - 48px));
}
.np-settings h3 { margin: 0; padding: 18px 24px; flex: none; }
.np-settings-body { display: grid; grid-template-columns: 216px minmax(0, 1fr); flex: 1 1 auto; height: min(500px, calc(100vh - 190px)); overflow: hidden; }
.np-settings-nav {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 12px;
  background: var(--bg-surface-alt); border-right: 1px solid var(--border-default); overflow-y: auto;
}
.np-settings-nav .emp-tab {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 12px;
  border: 0; border-radius: var(--radius-sm); text-align: left;
  font-size: var(--font-size-2); color: var(--text-secondary); background: transparent;
}
.np-settings-nav .emp-tab .material-icons { font-size: 19px; color: var(--text-tertiary); }
.np-settings-nav .emp-tab:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.np-settings-nav .emp-tab.active {
  background: var(--bg-surface); color: var(--np-accent-deep); box-shadow: var(--shadow-sm);
}
.np-settings-nav .emp-tab.active .material-icons { color: var(--np-accent); }
.np-settings-content { padding: 24px 32px 28px; overflow-y: auto; height: auto; min-height: 0; }
.np-set-title { margin: 0 0 6px; font-family: var(--font-family-head); font-size: var(--font-size-3); font-weight: var(--font-weight-bold); letter-spacing: -.01em; }
.np-set-group {
  margin: 26px 0 2px; font-size: var(--font-size-0); font-weight: var(--font-weight-bold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary);
}
.np-set-hint { margin: 2px 0 4px; font-size: var(--font-size-1); color: var(--text-tertiary); }
.np-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 14px 0; border-bottom: 1px solid var(--border-default);
}
.np-set-row:last-child { border-bottom: 0; }
.np-set-row-click { cursor: pointer; }
.np-set-label { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-2); font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.np-set-label small {
  display: block; margin-top: 4px; font-size: var(--font-size-1); font-weight: var(--font-weight-normal);
  color: var(--text-tertiary); line-height: 1.45;
}
.np-set-control { flex: 0 0 230px; }
.np-set-control input:not([type="checkbox"]), .np-set-control select { margin-bottom: 0; }
.np-set-control-switch { flex: 0 0 auto; }
.np-set-control .settings-inline-fields { display: flex; gap: 8px; }
.np-set-control .settings-inline-fields select { flex: 0 0 92px; }
.np-set-control .settings-percent-field { display: flex; align-items: stretch; }
.np-set-control .settings-percent-field input { border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; }
.np-set-control .settings-percent-field span {
  display: inline-flex; align-items: center; padding: 0 12px; font-size: var(--font-size-1); color: var(--text-secondary);
  background: var(--bg-surface-alt); border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.np-settings .modal-btns {
  flex: none; margin: 0; padding: 14px 24px; background: var(--bg-surface-alt); border-top: 1px solid var(--border-default);
}

/* Schalter statt Checkbox */
.modal .np-switch {
  padding: 0; border: 0; box-shadow: none; appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 42px; min-width: 42px; height: 24px; margin: 0; border-radius: var(--radius-full); cursor: pointer;
  background: var(--border-strong); transition: background var(--dur) var(--ease);
}
.modal .np-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 41, .3); transition: transform var(--dur) var(--ease);
}
.modal .np-switch:checked { background: var(--np-accent); }
.modal .np-switch:checked::before { transform: translateX(18px); }
.modal .np-switch:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

@media (max-width: 640px) {
  .np-settings-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .np-settings-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-default); padding: 8px 12px; }
  .np-settings-nav .emp-tab { width: auto; white-space: nowrap; }
  .np-settings-content { padding: 18px 18px 22px; }
  .np-set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .np-set-control { flex: none; }
  .np-set-control-switch { align-self: flex-start; }
}
.modal label.np-set-row { display: flex; margin-bottom: 0; font-size: inherit; color: inherit; }

/* Dialog-Ebenen: Die gemeinsamen Dialoge der Shell (Farbwaehler, Meldungen/Rueckfragen) liegen
   im DOM VOR den Modulbereichen. Bei gleicher z-index gewinnt sonst der spaeter stehende
   Modul-Dialog - der Farbwaehler oeffnete sich dann hinter z. B. "Tagesfarben bearbeiten". */
#shiftColorModal.modal-overlay { z-index: calc(var(--z-modal) + 10); }
#dialogModal.modal-overlay { z-index: calc(var(--z-modal) + 20); }

/* ── Dialoge: Kopf zum Verschieben, X-Knopf oben rechts ───────────────────────── */
.np-drag-handle { cursor: grab; user-select: none; touch-action: none; }
.np-drag-handle:active { cursor: grabbing; }
.np-has-x { position: relative; padding-right: 56px; }
.np-modal-x {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-tertiary); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.np-modal-x .material-icons { font-size: 20px; }
.np-modal-x:hover { background: var(--bg-surface-hover); color: var(--text-primary); }

/* ── Farbmisch-Fenster ("Farben"): Proportionen wieder kompakt ────────────────── */
.modal .excel-rgb-list input, .modal .shift-color-hex-input {
  padding: 6px 10px; margin: 0; font-size: var(--font-size-1);
  border-radius: var(--radius-sm); border-color: var(--border-strong);
}
.modal .excel-rgb-list input { width: 100%; }
.shift-color-custom-panel .color-mix-window-head {
  padding: 14px 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
}
.shift-color-custom-panel .color-mix-window-title { font-family: var(--font-family-head); }
.shift-color-custom-panel { border-radius: var(--radius-xl); }