:root {
  /* Palette matches www.adeo-it.de's corporate design (their :root custom
     properties + accent colors, read directly from their stylesheet). */
  --bg: #f7f8f6;
  --surface: #ffffff;
  --border: #eceeea;
  --text: #262b27;
  --text-muted: #6b6f6c;
  --primary: #8cc63f;
  --primary-hover: #2f3a33;
  --danger: #c0533f;
  --danger-bg: color-mix(in srgb, #c0533f 12%, white);
  --radius: 10px;
  --shadow: 0 4px 18px rgba(27, 33, 29, 0.08);
  /* Dedicated (not just var(--primary)) so badge text stays readable: the
     brand green is too light for AA contrast as small text on its own
     light tint — navy text on the light tint reads clearly instead. */
  --badge-active-bg: color-mix(in srgb, #8cc63f 18%, transparent);
  --badge-active-text: #2f3a33;
  /* Status-light colors for the Nebenstellen tiles — deliberately plain
     red/green (not the brand palette), since these mirror a literal
     hardware-style status light convention (rot = Störung, grün = ok). */
  --status-bad-bg: #ffd6d6;
  --status-bad-border: #ffb3b3;
  --status-good-bg: #d3f5d0;
  --status-good-border: #a9e6a3;
  --status-warn-bg: #fff2b3;
  --status-warn-border: #f5d76e;
  --status-warn-glow: rgba(245, 200, 20, 0.65);
  --status-offline-idle-bg: #d3e8ff;
  --status-offline-idle-border: #a9cdf5;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* adeo-it.de has no dark mode; these are derived from the same
       palette (navy tones for surfaces, the lighter accent green for
       better contrast on dark backgrounds). */
    --bg: #1b211d;
    --surface: #2f3a33;
    --border: rgba(255, 255, 255, 0.12);
    --text: #f7f8f6;
    --text-muted: #a7a9ac;
    --primary: #a4d65e;
    --primary-hover: #8cc63f;
    --danger: #c0533f;
    --danger-bg: rgba(192, 83, 63, 0.18);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    /* Light green text now, not navy — navy would vanish against a dark
       tinted background instead of the light one used in light mode. */
    --badge-active-bg: color-mix(in srgb, #a4d65e 18%, transparent);
    --badge-active-text: #a4d65e;
    --status-bad-bg: rgba(255, 90, 90, 0.28);
    --status-bad-border: rgba(255, 90, 90, 0.5);
    --status-good-bg: rgba(90, 220, 100, 0.22);
    --status-good-border: rgba(90, 220, 100, 0.45);
    --status-warn-bg: rgba(245, 200, 20, 0.25);
    --status-warn-border: rgba(245, 200, 20, 0.5);
    --status-warn-glow: rgba(245, 200, 20, 0.55);
    --status-offline-idle-bg: rgba(90, 160, 240, 0.22);
    --status-offline-idle-border: rgba(90, 160, 240, 0.45);
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
}

.brand-name {
  font-weight: 600;
  font-size: 15px;
}

.brand-sub {
  color: var(--text-muted);
  font-size: 12px;
}

h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 24px;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.field {
  margin-bottom: 16px;
}

input[type="email"],
input[type="password"],
input[type="text"],
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease;
}

.field textarea {
  font-family: inherit;
  resize: vertical;
}

input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--primary);
}

.password-input-wrap {
  position: relative;
}

.password-input-wrap input {
  padding-right: 42px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: auto;
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 15px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text);
}

button {
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

button:hover:not(:disabled) {
  background: var(--primary-hover);
}

button:disabled {
  opacity: 0.6;
  cursor: default;
}

.error-banner {
  display: none;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}

.error-banner.visible {
  display: block;
}

/* Dashboard */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.app-main {
  padding: 32px 24px;
  max-width: 720px;
  margin: 0 auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.logout-link {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  width: auto;
  padding: 7px 14px;
  font-weight: 500;
}

.logout-link:hover:not(:disabled) {
  background: var(--bg);
  color: var(--text);
}

.status-line {
  color: var(--text-muted);
  font-size: 13px;
}

.info-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  max-width: 460px;
}

.info-panel h2 {
  font-size: 15px;
  margin: 0 0 14px;
}

.info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text);
}

.info-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
}

.dashboard-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.dashboard-row__right {
  /* Grow to fill whatever width remains next to the Info panel, so the
     tile count below can respond to the actual browser width instead of
     staying fixed at 5. Override .info-panel's 460px cap, which would
     otherwise block that growth. */
  flex: 1 1 480px;
  min-width: 0;
  max-width: none;
}

.peer-grid {
  display: grid;
  /* auto-fit + 1fr: as many 240px-min columns as fit the panel's width,
     stretched to fill it completely; columns are added/removed
     automatically as the browser window is resized. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.peer-tile {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--bg);
}

.peer-desc {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peer-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.peer-tile--bad {
  background: var(--status-bad-bg);
  border-color: var(--status-bad-border);
}

.peer-tile--good {
  background: var(--status-good-bg);
  border-color: var(--status-good-border);
}

.peer-tile--ringing {
  border-color: var(--status-good-border);
  animation: peer-blink-green 1s step-start infinite;
}

.peer-tile--talking {
  background: var(--status-warn-bg);
  border-color: var(--status-warn-border);
  box-shadow: 0 0 12px 2px var(--status-warn-glow);
}

.peer-tile--offline-idle {
  background: var(--status-offline-idle-bg);
  border-color: var(--status-offline-idle-border);
}

@keyframes peer-blink-green {
  0%, 49% {
    background: var(--status-good-bg);
  }
  50%, 100% {
    background: var(--surface);
  }
}

/* Nav */
.app-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  margin-left: 24px;
}

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
}

.nav-link:hover {
  background: var(--bg);
  color: var(--text);
}

.nav-link.active {
  background: var(--bg);
  color: var(--text);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  width: auto;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  background: var(--bg);
  color: var(--text);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 170px;
  padding: 6px;
  z-index: 20;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.nav-dropdown-item:hover {
  background: var(--bg);
}

.nav-dropdown-item.active {
  background: var(--bg);
  font-weight: 600;
}

.app-main--wide {
  max-width: 1100px;
}

.app-main--dashboard {
  /* Wider than the standard table pages so the doubled-width
     Nebenstellen tiles fit next to the Info panel without wrapping. */
  max-width: 1700px;
}

.mandant-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  max-width: 200px;
  margin-right: 16px;
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar input[type="search"] {
  width: 260px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.toolbar input[type="search"]:focus {
  border-color: var(--primary);
}

.toolbar-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}

.toolbar-checkbox input {
  width: auto;
}

.btn {
  width: auto;
  padding: 9px 16px;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg);
}

/* Data table */
.table-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--bg);
}

.data-table--large {
  font-size: 38px;
}

.data-table--large th {
  font-size: 15px;
}

.row-actions {
  display: flex;
  gap: 6px;
}

.row-actions button {
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-active {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

.badge-inactive {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}

.empty-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 20, 28, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-header h2 {
  font-size: 16px;
  margin: 0;
}

.modal-close {
  width: auto;
  background: transparent;
  color: var(--text-muted);
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
}

.modal-close:hover {
  background: var(--bg);
  color: var(--text);
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.modal-actions button {
  flex: 1;
}

.field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.checkbox-field input {
  width: auto;
}

.checkbox-field label {
  margin: 0;
}