/* DigiMobil 10.1.66 – Modern UI
   Alle Designänderungen sind ausschließlich unter .dm-modern-ui aktiv.
   Ohne diese Body-Klasse bleibt das klassische DigiMobil-Design unverändert. */

html.dm-modern-ui-preload body,
body.dm-modern-ui {
  --dm-green: #1f8f4e;
  --dm-green-dark: #0f5f34;
  --dm-green-deep: #0b3823;
  --dm-green-soft: #edf8f1;
  --dm-surface: #ffffff;
  --dm-surface-soft: #f7faf8;
  --dm-border: #dce7e0;
  --dm-text: #18241d;
  --dm-muted: #6a786f;
  --dm-shadow: 0 10px 30px rgba(20, 70, 40, .07);
  --dm-shadow-hover: 0 16px 38px rgba(20, 70, 40, .11);
}

body.dm-modern-ui {
  background: #f3f7f4;
  color: var(--dm-text);
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body.dm-modern-ui .layout {
  grid-template-columns: 268px minmax(0, 1fr);
}

body.dm-modern-ui .sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  gap: 18px;
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, #102d1e 0%, #0c2518 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 0 35px rgba(9, 36, 22, .08);
}

body.dm-modern-ui .digimobil-sidebar-brand {
  min-height: 62px;
  padding: 6px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

body.dm-modern-ui .digimobil-sidebar-brand img {
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

body.dm-modern-ui .sidebar-navigation {
  gap: 4px;
}

body.dm-modern-ui .nav-section-separator {
  margin: 17px 0 6px;
  padding: 12px 12px 0;
  border-top: 1px solid rgba(255,255,255,.09);
}

body.dm-modern-ui .nav-section-separator.nav-section-first {
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}

body.dm-modern-ui .nav-section-separator span {
  color: #82d9a2;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.dm-modern-ui .sidebar nav a,
body.dm-modern-ui .sidebar-support-create {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #e9f4ed;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

body.dm-modern-ui .sidebar nav a:hover,
body.dm-modern-ui .sidebar-support-create:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
  transform: translateX(2px);
}

body.dm-modern-ui .sidebar nav a:focus-visible,
body.dm-modern-ui .sidebar-support-create:focus-visible {
  outline: 2px solid #82d9a2;
  outline-offset: 2px;
}

body.dm-modern-ui .sidebar-foot {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

body.dm-modern-ui .sidebar-version {
  margin-top: 8px;
  padding: 4px 8px 0;
  font-size: 11px;
  color: rgba(255,255,255,.55);
}

body.dm-modern-ui .content {
  padding: 0 34px 38px;
  background:
    radial-gradient(circle at 92% 2%, rgba(31,143,78,.065), transparent 28%),
    #f3f7f4;
}

body.dm-modern-ui .digimobil-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0 -34px 28px;
  padding: 13px 34px;
  min-height: 68px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--dm-border);
  box-shadow: 0 5px 18px rgba(20,70,40,.045);
  backdrop-filter: blur(12px);
}

body.dm-modern-ui .digimobil-topbar-title strong {
  color: var(--dm-green-dark);
  font-size: 17px;
  letter-spacing: -.01em;
}

body.dm-modern-ui .digimobil-topbar-title span {
  color: var(--dm-muted);
  font-size: 11.5px;
}

.dm-ui-mode-control {
  margin-left: auto;
}

.dm-ui-mode-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #cfe0d5;
  border-radius: 9px;
  background: #fff;
  color: #355041;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20,70,40,.04);
}

.dm-ui-mode-button:hover {
  border-color: #91bda0;
  background: #f6fbf7;
}

.dm-ui-mode-icon {
  color: #1f8f4e;
  font-size: 16px;
}

body:not(.dm-modern-ui) .dm-ui-mode-button {
  background: #1f8f4e;
  border-color: #1f8f4e;
  color: #fff;
}

body:not(.dm-modern-ui) .dm-ui-mode-icon { color: #fff; }

body.dm-modern-ui .page-head {
  align-items: center;
  margin-bottom: 20px;
  padding: 2px 0 4px;
}

body.dm-modern-ui .page-head h1 {
  margin: 3px 0 5px;
  color: #163022;
  font-size: clamp(27px, 2.5vw, 34px);
  font-weight: 720;
  letter-spacing: -.025em;
}

body.dm-modern-ui .page-head p { color: var(--dm-muted); }
body.dm-modern-ui .eyebrow { color: var(--dm-green); font-size: 10.5px; letter-spacing: .14em; }

body.dm-modern-ui .panel,
body.dm-modern-ui .subpanel,
body.dm-modern-ui .signature-card,
body.dm-modern-ui .report-sections article {
  border: 1px solid var(--dm-border);
  border-radius: 14px;
  background: var(--dm-surface);
  box-shadow: var(--dm-shadow);
}

body.dm-modern-ui .panel { padding: 21px; }
body.dm-modern-ui .panel h2 { color: #1b3828; font-size: 20px; letter-spacing: -.015em; }

body.dm-modern-ui .stats {
  gap: 13px;
  margin-bottom: 20px;
}

body.dm-modern-ui .stats article,
body.dm-modern-ui .system-info-card,
body.dm-modern-ui .status-summary div,
body.dm-modern-ui .project-card,
body.dm-modern-ui .card-link,
body.dm-modern-ui .timeline a {
  border: 1px solid var(--dm-border);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(20,70,40,.045);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.dm-modern-ui .stats article { padding: 17px 18px; }
body.dm-modern-ui .stats article:hover,
body.dm-modern-ui .project-card:hover,
body.dm-modern-ui .card-link:hover,
body.dm-modern-ui .timeline a:hover {
  transform: translateY(-1px);
  border-color: #bdd5c5;
  box-shadow: var(--dm-shadow-hover);
}

body.dm-modern-ui .stats span { color: var(--dm-muted); font-size: 12px; font-weight: 600; }
body.dm-modern-ui .stats strong { color: #173c27; font-size: 25px; letter-spacing: -.02em; }

body.dm-modern-ui input,
body.dm-modern-ui select,
body.dm-modern-ui textarea {
  border: 1px solid #d5e1d9;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(20,70,40,.02);
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.dm-modern-ui input:focus,
body.dm-modern-ui select:focus,
body.dm-modern-ui textarea:focus {
  outline: none;
  border-color: #66ad7f;
  box-shadow: 0 0 0 3px rgba(31,143,78,.11);
}

body.dm-modern-ui .button {
  border-radius: 9px;
  padding: 10px 15px;
  background: var(--dm-green);
  font-size: 13px;
  font-weight: 750;
  box-shadow: 0 4px 12px rgba(31,143,78,.14);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

body.dm-modern-ui .button:hover {
  background: #197b43;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(31,143,78,.18);
}

body.dm-modern-ui .button.secondary {
  background: #eef6f1;
  color: #176a3b;
  box-shadow: none;
}

body.dm-modern-ui table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}

body.dm-modern-ui th {
  padding: 11px 12px;
  background: #f7faf8;
  border-top: 1px solid #e0e9e3;
  border-bottom: 1px solid #d8e4dc;
  color: #617067;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .055em;
}

body.dm-modern-ui th:first-child { border-left: 1px solid #e0e9e3; border-radius: 9px 0 0 0; }
body.dm-modern-ui th:last-child { border-right: 1px solid #e0e9e3; border-radius: 0 9px 0 0; }
body.dm-modern-ui td { padding: 12px; border-bottom: 1px solid #e7eee9; }
body.dm-modern-ui tbody tr:hover td { background: #f9fcfa; }

body.dm-modern-ui .badge {
  border: 1px solid #d3e9da;
  background: #edf8f1;
  color: #176a3b;
  font-weight: 700;
}

body.dm-modern-ui .flash {
  border: 1px solid #cfe6d6;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20,70,40,.04);
}

body.dm-modern-ui .notification-bell,
body.dm-modern-ui .digimobil-support-top {
  border-radius: 9px;
}

body.dm-modern-ui .role-view-box {
  border-radius: 12px;
  background: rgba(255,255,255,.055);
}

@media (max-width: 980px) {
  body.dm-modern-ui .layout { grid-template-columns: 235px minmax(0,1fr); }
  body.dm-modern-ui .content { padding-left: 24px; padding-right: 24px; }
  body.dm-modern-ui .digimobil-topbar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .dm-ui-mode-button #dmUiModeLabel { display: none; }
}

@media (max-width: 760px) {
  body.dm-modern-ui .layout { grid-template-columns: 1fr; }
  body.dm-modern-ui .sidebar { position: static; height: auto; overflow: visible; }
  body.dm-modern-ui .sidebar nav { grid-template-columns: 1fr 1fr; }
  body.dm-modern-ui .content { padding: 0 18px 24px; }
  body.dm-modern-ui .digimobil-topbar { margin: 0 -18px 20px; padding: 11px 18px; }
  .dm-ui-mode-button { min-width: 38px; justify-content: center; padding: 8px 10px; }
  #dmUiModeLabel { display: none; }
}