/*
  STRAVO Kundenportal - Stable Dark Theme
  Stand: stabile Version vor den Sidebar-/Navbar-Layout-Fixes

  Zweck:
  - dunkler Blau/Slate-Hintergrund statt hartem Schwarz
  - einheitliche Kartenfarben
  - einheitliche Tabellen-/Formularfarben
  - KEINE Änderung am Grundlayout von Sidebar/Navbar
*/

:root {
  --portal-bg-0: #050913;
  --portal-bg-1: #07111f;
  --portal-bg-2: #0b1728;
  --portal-bg-3: #10233d;

  --portal-card-1: rgba(13, 28, 49, 0.96);
  --portal-card-2: rgba(10, 22, 39, 0.96);

  --portal-border: rgba(96, 165, 250, 0.14);
  --portal-border-strong: rgba(96, 165, 250, 0.24);

  --portal-text: #f8fafc;
  --portal-muted: #9fb0d0;
}

/* Grundhintergrund */
html {
  font-size: 90%;
}

html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.18) 0, rgba(37, 99, 235, 0.00) 34%),
    radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.12) 0, rgba(14, 165, 233, 0.00) 32%),
    linear-gradient(135deg, var(--portal-bg-0) 0%, var(--portal-bg-1) 42%, var(--portal-bg-2) 72%, var(--portal-bg-3) 100%) !important;
  color: var(--portal-text);
}

/* Hauptflächen */
.container-scroller,
.page-body-wrapper,
.main-panel,
.content-wrapper {
  background:
    radial-gradient(circle at 16% 7%, rgba(37, 99, 235, 0.14) 0, rgba(37, 99, 235, 0.00) 32%),
    radial-gradient(circle at 92% 14%, rgba(20, 184, 166, 0.08) 0, rgba(20, 184, 166, 0.00) 28%),
    linear-gradient(135deg, var(--portal-bg-0) 0%, var(--portal-bg-1) 48%, var(--portal-bg-2) 100%) !important;
}

/* Sidebar und Topbar nur farblich anpassen, kein Layout überschreiben */
.sidebar,
.sidebar .sidebar-brand-wrapper,
.navbar,
.navbar .navbar-menu-wrapper,
.navbar .navbar-brand-wrapper {
  background: rgba(13, 19, 32, 0.94) !important;
  backdrop-filter: blur(14px);
  border-color: rgba(148, 163, 184, 0.08) !important;
}

/* Karten / Panels */
.card,
.automation-card,
.settings-card,
.support-card,
.contract-card,
.billing-card,
.table-card {
  background:
    linear-gradient(145deg, var(--portal-card-1) 0%, var(--portal-card-2) 100%) !important;
  border: 1px solid var(--portal-border) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.30) !important;
}

.card:hover,
.automation-card:hover,
.settings-card:hover,
.support-card:hover,
.contract-card:hover,
.billing-card:hover,
.table-card:hover {
  border-color: var(--portal-border-strong) !important;
}

/* Tabellen */
.table,
.table thead th,
.table tbody td {
  background: transparent !important;
}

.table thead th {
  color: #9fb0d0 !important;
  border-color: rgba(148, 163, 184, 0.12) !important;
}

.table tbody td {
  border-color: rgba(148, 163, 184, 0.10) !important;
}

/* Formulare */
input,
select,
textarea,
.form-control,
.form-select {
  background: rgba(6, 16, 31, 0.82) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  color: #f8fafc !important;
}

input[type="password"] {
  -webkit-text-security: square;
  font-family: Arial, sans-serif !important;
  letter-spacing: 0.06em;
}

input::placeholder,
textarea::placeholder {
  color: rgba(159, 176, 208, 0.72) !important;
}

/* Dropdowns / Modals */
.dropdown-menu,
.modal-content {
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.98) 0%, rgba(10, 22, 39, 0.98) 100%) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
}

.text-muted,
.dashboard-muted {
  color: var(--portal-muted) !important;
}

/* Kleine optische Abrundung nur für Karten, nicht für Layout */
.card,
.automation-card,
.settings-card,
.support-card,
.contract-card,
.billing-card,
.table-card {
  border-radius: 14px !important;
}
/* Maximalbreite für große Monitore ohne Navigation zu zerstören */
@media (min-width: 1921px) {
  .container-scroller {
    max-width: 2400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* Topbar an maximale Portalbreite koppeln */
@media (min-width: 1921px) {
  .navbar.fixed-top,
  .navbar {
    max-width: 2400px !important;
    width: 2400px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Bis 2400px normale volle Breite behalten */
@media (max-width: 2400px) {
  .navbar.fixed-top,
  .navbar {
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}
/* Desktop: Hamburger deaktivieren, weil Sidebar dauerhaft sichtbar ist */
@media (min-width: 992px) {
  .navbar-toggler[data-toggle="minimize"],
  .navbar-toggler[data-bs-toggle="minimize"],
  .navbar-toggler.align-self-center {
    display: none !important;
    pointer-events: none !important;
  }
}

/* Portal Toasts statt Browser-Alerts */
.portal-toast-container {
  position: fixed;
  top: 92px;
  right: 28px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.portal-toast {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.98) 0%, rgba(8, 18, 34, 0.98) 100%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  color: #f8fafc;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.portal-toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.portal-toast-hide {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}

.portal-toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.36);
}

.portal-toast-error .portal-toast-icon {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.36);
}

.portal-toast-info .portal-toast-icon {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.36);
}

.portal-toast-content {
  flex: 1;
  min-width: 0;
}

.portal-toast-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
}

.portal-toast-message {
  font-size: 14px;
  line-height: 1.5;
  color: #b9c7df;
  word-break: break-word;
}

.portal-toast-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9fb0d0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.portal-toast-close:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .portal-toast-container {
    top: 76px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* Portal Toasts statt Browser-Alerts */
.portal-toast-container {
  position: fixed;
  top: 92px;
  right: 28px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.portal-toast {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.22);
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.98) 0%, rgba(8, 18, 34, 0.98) 100%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  color: #f8fafc;
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

.portal-toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.portal-toast-hide {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
}

.portal-toast-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 900;
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.36);
}

.portal-toast-error .portal-toast-icon {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.36);
}

.portal-toast-info .portal-toast-icon {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.36);
}

.portal-toast-content {
  flex: 1;
  min-width: 0;
}

.portal-toast-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 4px;
}

.portal-toast-message {
  font-size: 14px;
  line-height: 1.5;
  color: #b9c7df;
  word-break: break-word;
}

.portal-toast-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #9fb0d0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.portal-toast-close:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .portal-toast-container {
    top: 76px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* Automationen: Filterleiste sauber ausrichten */
.automation-filters,
.filters-row,
.filter-row {
  align-items: flex-end !important;
}

.automation-filters .form-group,
.filters-row .form-group,
.filter-row .form-group {
  margin-bottom: 0 !important;
}

.automation-filters input,
.automation-filters select,
.automation-filters button,
.filters-row input,
.filters-row select,
.filters-row button,
.filter-row input,
.filter-row select,
.filter-row button {
  min-height: 48px !important;
}

.automation-filters label,
.filters-row label,
.filter-row label {
  min-height: 18px !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Suchfeld ohne Label auf gleiche Höhe bringen */
.automation-filters .search-box,
.filters-row .search-box,
.filter-row .search-box,
.automation-filters .search-wrapper,
.filters-row .search-wrapper,
.filter-row .search-wrapper {
  margin-top: 24px !important;
}

/* Aktualisieren-Button bündig mit Inputs */
.automation-filters .btn,
.filters-row .btn,
.filter-row .btn {
  align-self: flex-end !important;
}

/* Automationen: Filterleiste einheitlich ausrichten */
.automation-search-label {
  display: block !important;
  min-height: 18px !important;
  margin-bottom: 6px !important;
  color: #9fb0d0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Filterelemente gleich hoch */
input[placeholder="Suchen..."],
select {
  min-height: 48px !important;
}

/* Aktualisieren-Button auf gleiche Höhe wie Inputs bringen */
button,
.btn {
  min-height: 48px;
}

/* Automations-Filterbereich optisch ruhiger */
.automation-search-label + input,
.automation-search-label + div,
.automation-search-label + .input-group {
  margin-top: 0 !important;
}

/* Automationen: saubere einheitliche Filterleiste */
.automation-toolbar-clean {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto !important;
  gap: 18px !important;
  align-items: end !important;
}

.automation-toolbar-clean .automation-filter {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
}

.automation-toolbar-clean .automation-filter label {
  display: block !important;
  min-height: 18px !important;
  margin: 0 0 7px 0 !important;
  color: #9fb0d0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
}

.automation-toolbar-clean .automation-search,
.automation-toolbar-clean .automation-select,
.automation-toolbar-clean .automation-refresh {
  height: 48px !important;
  min-height: 48px !important;
}

.automation-toolbar-clean .automation-search {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.automation-toolbar-clean .automation-search input {
  height: 48px !important;
  min-height: 48px !important;
  width: 100% !important;
}

.automation-toolbar-clean .automation-select {
  width: 100% !important;
}

.automation-toolbar-clean .automation-refresh {
  white-space: nowrap !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

@media (max-width: 1200px) {
  .automation-toolbar-clean {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .automation-toolbar-clean {
    grid-template-columns: 1fr !important;
  }

  .automation-toolbar-clean .automation-filter-button label {
    display: none !important;
  }
}

/* Automationen: blaue Icon-Box im Suchfeld entfernen */
.automation-toolbar-clean .automation-search i,
.automation-search i {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.automation-toolbar-clean .automation-search,
.automation-search {
  overflow: hidden !important;
}

.automation-toolbar-clean .automation-search input,
.automation-search input {
  background: transparent !important;
  border-left: none !important;
}

/* Support: Hotline-Karte nicht über volle Breite ziehen */
.support-hotline-card,
.support-card-hotline,
.support-summary-card {
  max-width: 620px !important;
  width: fit-content !important;
  min-width: 420px !important;
}

/* Falls die Hotline-Karte eine normale card ist und keinen Spezialnamen hat */
.support-page .card:first-of-type,
.support-content .card:first-of-type {
  max-width: 620px !important;
}

/* Mobile wieder volle Breite */
@media (max-width: 768px) {
  .support-hotline-card,
  .support-card-hotline,
  .support-summary-card,
  .support-page .card:first-of-type,
  .support-content .card:first-of-type {
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Support: Hotline-Box kompakter darstellen */
.support-phone-box {
  display: inline-block !important;
  width: auto !important;
  min-width: 420px !important;
  max-width: 620px !important;
  padding-right: 42px !important;
}

/* Die übergeordnete Support-Karte darf weiterhin normal bleiben */
.support-phone-box .support-phone-number,
.support-phone-box .support-phone-label,
.support-phone-box .support-phone-note {
  width: fit-content !important;
  max-width: 100% !important;
}

/* Mobile wieder volle Breite */
@media (max-width: 768px) {
  .support-phone-card {
    padding: 14px !important;
  }

  .support-phone-card .support-card-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .support-phone-card .support-title-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 19px !important;
    flex: 0 0 36px !important;
  }

  .support-phone-card .support-card-title {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  .support-phone-card .support-card-subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .support-phone-box {
    display: inline-block !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  .support-phone-label {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  .support-phone-number {
    font-size: clamp(21px, 6.5vw, 26px) !important;
    white-space: nowrap !important;
  }

  .support-phone-note {
    margin-top: 5px !important;
    font-size: 11.5px !important;
  }

  .support-sla-list {
    gap: 0 !important;
  }

  .support-sla-item {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    justify-items: start !important;
    padding: 10px 0 !important;
  }

  .support-sla-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  .support-sla-title {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .support-sla-item .support-muted {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .support-sla-item .support-badge {
    display: inline-flex !important;
    align-items: center !important;
    grid-column: 2 !important;
    justify-self: start !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
    margin-top: 6px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .support-ticket-form .support-actions {
    align-items: flex-start !important;
  }

  .support-ticket-form .support-primary-btn {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding-inline: 18px !important;
  }
}

/* Support: Ticket-Icons nach Priorität */
.support-ticket-icon.priority-critical {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.support-ticket-icon.priority-high {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.support-ticket-icon.priority-normal,
.support-ticket-icon.priority-low {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
}

.support-ticket-icon i {
  line-height: 1 !important;
}

/* Support: Bildauswahl im Ticketformular */
.support-file-upload {
  border: 1px dashed rgba(96, 165, 250, 0.28);
  border-radius: 14px;
  padding: 16px;
  background: rgba(6, 16, 31, 0.42);
}

.support-file-input {
  display: none !important;
}

.support-file-label {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.32);
  color: #dbeafe !important;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 10px !important;
}

.support-file-label:hover {
  background: rgba(37, 99, 235, 0.28);
  color: #ffffff !important;
}

.support-file-label i {
  font-size: 20px;
}

.support-file-hint {
  color: #9fb0d0;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.support-image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.support-image-preview-item {
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.26);
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-file-empty {
  color: #9fb0d0;
  font-size: 13px;
}

/* Desktop: obere Navbar ausblenden, Benutzer unten in Sidebar anzeigen */
@media (min-width: 992px) {
  .navbar {
    display: none !important;
  }

  .page-body-wrapper {
    padding-top: 0 !important;
  }

  .main-panel {
    padding-top: 0 !important;
  }

  .content-wrapper {
    padding-top: 34px !important;
  }

  .sidebar {
    position: fixed !important;
    min-height: 100vh !important;
  }

  .sidebar .nav {
    padding-bottom: 140px !important;
  }

  .portal-sidebar-user {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 22px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.16);
    background:
      linear-gradient(145deg, rgba(13, 28, 49, 0.92) 0%, rgba(8, 18, 34, 0.92) 100%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  }

  .portal-sidebar-user-label {
    color: #9fb0d0;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .portal-sidebar-user-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    word-break: break-word;
    margin-bottom: 10px;
  }

  .portal-sidebar-user-logout {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(239, 68, 68, 0.26);
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .portal-sidebar-user-logout:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #ffffff;
  }
}

/* Mobile: obere Navbar bleibt erstmal erhalten, Sidebar-User ausblenden */
@media (max-width: 991px) {
  .portal-sidebar-user {
    display: none !important;
  }
}

/* Desktop-Fix: Topbar ausblenden, aber Content korrekt neben Sidebar halten */
@media (min-width: 992px) {
  .navbar {
    display: none !important;
  }

  .page-body-wrapper {
    padding-top: 0 !important;
  }

  .main-panel {
    margin-left: 244px !important;
    width: calc(100% - 244px) !important;
    padding-top: 0 !important;
  }

  .content-wrapper {
    padding-top: 34px !important;
  }

  .sidebar {
    width: 244px !important;
    min-height: 100vh !important;
  }

  .sidebar .nav {
    padding-bottom: 110px !important;
  }
}

/* Sidebar-Benutzer unten: dezenter, ohne dicke Box */
@media (min-width: 992px) {
  .portal-sidebar-user {
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    bottom: 22px !important;
    padding: 14px 0 0 0 !important;
    border: none !important;
    border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .portal-sidebar-user-label {
    color: #7f8dad !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
  }

  .portal-sidebar-user-name {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    margin-bottom: 8px !important;
  }

  .portal-sidebar-user-logout {
    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #f87171 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  .portal-sidebar-user-logout:hover {
    color: #fecaca !important;
    background: transparent !important;
    text-decoration: underline !important;
  }
}

/* Desktop: Abstand zwischen Sidebar und Content korrigieren */
@media (min-width: 992px) {
  .sidebar {
    width: 220px !important;
  }

  .main-panel {
    margin-left: 220px !important;
    width: calc(100% - 220px) !important;
  }

  .content-wrapper {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Finaler Desktop-Fix: doppelten Abstand neben Sidebar entfernen */
@media (min-width: 992px) {
  .navbar {
    display: none !important;
  }

  .page-body-wrapper {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  .main-panel {
    margin-left: 244px !important;
    width: calc(100% - 244px) !important;
    padding-top: 0 !important;
  }

  .content-wrapper {
    padding-top: 34px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .content-wrapper > .row,
  .content-wrapper > .support-page,
  .content-wrapper > .contract-page,
  .content-wrapper > .automation-page,
  .content-wrapper > .settings-page,
  .content-wrapper > .dashboard-page,
  .content-wrapper > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
  }
}

/* Final: Content richtet sich automatisch nach Sidebar-Breite aus */
:root {
  --portal-sidebar-width: 208px;
  --portal-content-gap: 10px;
}

@media (min-width: 992px) {
  /* obere Navbar auf Desktop deaktiviert */
  .navbar {
    display: none !important;
  }

  /* Sidebar als feste Breite */
  .sidebar {
    width: var(--portal-sidebar-width) !important;
    min-width: var(--portal-sidebar-width) !important;
    max-width: var(--portal-sidebar-width) !important;
  }

  .sidebar .sidebar-brand-wrapper {
    width: var(--portal-sidebar-width) !important;
  }

  /* rechte Seite beginnt exakt nach Sidebar */
  .page-body-wrapper {
    margin-left: var(--portal-sidebar-width) !important;
    padding-left: 0 !important;
    width: calc(100% - var(--portal-sidebar-width)) !important;
  }

  /* main-panel darf keinen zweiten Sidebar-Abstand addieren */
  .main-panel {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  /* eigentlicher Seiteninhalt bekommt nur einen kleinen sauberen Abstand */
  .content-wrapper {
    margin-left: 0 !important;
    padding-left: var(--portal-content-gap) !important;
    padding-right: var(--portal-content-gap) !important;
    padding-top: 34px !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 991px) {
  .page-body-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .main-panel {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Demo-Cleanup: nicht benötigte Elemente ausblenden */
button:has(+ .unused-never-match) {
  display: none;
}

/* Falls der Telegram-Block per HTML nicht eindeutig entfernt wurde */
.settings-card:has(.mdi-telegram),
.settings-row:has(.mdi-telegram),
.setting-row:has(.mdi-telegram),
.settings-section:has(.mdi-telegram) {
  display: none !important;
}

/* Support: Ticket-Detailbereich */
.support-ticket-row-clickable {
  cursor: pointer;
}

.support-ticket-row-clickable:hover {
  background: rgba(96, 165, 250, 0.06);
}

.support-ticket-detail {
  margin-top: 22px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(6, 16, 31, 0.36);
}

.support-ticket-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.support-ticket-detail-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.support-ticket-detail-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
}

.support-ticket-detail-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.support-ticket-description {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: #dbeafe;
  white-space: pre-wrap;
  line-height: 1.55;
}

.support-ticket-messages-title {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 900;
}

.support-ticket-messages {
  display: grid;
  gap: 10px;
}

.support-ticket-message {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(13, 28, 49, 0.70);
  border: 1px solid rgba(96, 165, 250, 0.14);
}

.support-ticket-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #9fb0d0;
  font-size: 12px;
  margin-bottom: 7px;
}

.support-ticket-message-head strong {
  color: #ffffff;
}

.support-ticket-message-body {
  color: #dbeafe;
  white-space: pre-wrap;
  line-height: 1.5;
}

.support-ticket-reply {
  margin-top: 18px;
  position: sticky;
  bottom: -24px;
  padding-top: 16px;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(11, 22, 38, 0.70), #0b1626 28%);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.support-ticket-reply label {
  color: #cbd5e1;
  display: block;
  font-size: 14px;
  margin-bottom: 7px;
}

.support-ticket-section-label {
  margin-top: 18px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.support-secondary-btn.danger {
  border-color: rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}

.support-secondary-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ffffff;
}

@media (max-width: 768px) {
  .support-ticket-detail-controls {
    grid-template-columns: 1fr;
  }

  .support-ticket-detail-header {
    flex-direction: column;
  }
}

/* Support: Ticket-Detailbereich */
.support-ticket-row-clickable {
  cursor: pointer;
}

.support-ticket-row-clickable:hover {
  background: rgba(96, 165, 250, 0.06);
}

.support-ticket-detail {
  margin-top: 22px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  background: rgba(6, 16, 31, 0.36);
}

.support-ticket-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.support-ticket-detail-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.support-ticket-detail-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 10px;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
}

.support-ticket-detail-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.support-ticket-description {
  margin-top: 18px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: #dbeafe;
  white-space: pre-wrap;
  line-height: 1.55;
}

.support-ticket-messages-title {
  margin-top: 20px;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 900;
}

.support-ticket-messages {
  display: grid;
  gap: 10px;
}

.support-ticket-message {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(13, 28, 49, 0.70);
  border: 1px solid rgba(96, 165, 250, 0.14);
}

.support-ticket-message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #9fb0d0;
  font-size: 12px;
  margin-bottom: 7px;
}

.support-ticket-message-head strong {
  color: #ffffff;
}

.support-ticket-message-body {
  color: #dbeafe;
  white-space: pre-wrap;
  line-height: 1.5;
}

.support-ticket-reply {
  margin-top: 18px;
}

.support-ticket-reply label {
  color: #cbd5e1;
  display: block;
  font-size: 14px;
  margin-bottom: 7px;
}

.support-secondary-btn.danger {
  border-color: rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}

.support-secondary-btn.danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ffffff;
}

@media (max-width: 768px) {
  .support-ticket-detail-controls {
    grid-template-columns: 1fr;
  }

  .support-ticket-detail-header {
    flex-direction: column;
  }
}

/* Support: Ticket schließen oben im Detailkopf */
.support-ticket-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.support-ticket-close-top {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.30);
  background: rgba(239, 68, 68, 0.10);
  color: #fca5a5;
  font-weight: 800;
  cursor: pointer;
}

.support-ticket-close-top:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #ffffff;
}

.support-ticket-reply-files {
  margin-top: 12px;
  margin-bottom: 14px;
}

.support-ticket-message-attachments {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 700;
}

/* Support: Ticket schließen unten links in der Detail-Aktionsleiste */
.support-ticket-detail-actions,
.support-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.support-ticket-close-bottom {
  margin-right: auto !important;
}

.support-ticket-close-top {
  display: none !important;
}

@media (max-width: 768px) {
  .support-ticket-detail-actions,
  .support-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .support-ticket-close-bottom {
    margin-right: 0 !important;
    order: 3;
  }
}

/* Support: schönes Bestätigungsmodal für Ticket schließen */
.support-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(8px);
}

.support-confirm-backdrop.open {
  display: flex;
}

.support-confirm-modal {
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.98) 0%, rgba(8, 18, 34, 0.98) 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  padding: 24px;
}

.support-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #f87171;
  font-size: 26px;
}

.support-confirm-content h3 {
  margin: 0 0 8px 0;
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
}

.support-confirm-content p {
  margin: 0;
  color: #b9c7df;
  font-size: 14px;
  line-height: 1.55;
}

.support-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 768px) {
  .support-confirm-actions {
    flex-direction: column;
  }

  .support-confirm-actions button {
    width: 100%;
  }
}

/* Support: schönes Bestätigungsmodal für Ticket schließen */
.support-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(8px);
}

.support-confirm-backdrop.open {
  display: flex;
}

.support-confirm-modal {
  width: min(520px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.98) 0%, rgba(8, 18, 34, 0.98) 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  padding: 24px;
}

.support-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #f87171;
  font-size: 26px;
}

.support-confirm-content h3 {
  margin: 0 0 8px 0;
  color: #ffffff;
  font-size: 21px;
  font-weight: 900;
}

.support-confirm-content p {
  margin: 0;
  color: #b9c7df;
  font-size: 14px;
  line-height: 1.55;
}

.support-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

@media (max-width: 768px) {
  .support-confirm-actions {
    flex-direction: column;
  }

  .support-confirm-actions button {
    width: 100%;
  }
}

/* Support: Storno-Modal muss klickbar sein */
.support-confirm-backdrop {
  pointer-events: auto !important;
  z-index: 999999 !important;
}

.support-confirm-modal {
  position: relative !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

.support-confirm-actions,
.support-confirm-actions button,
#support-close-confirm-cancel,
#support-close-confirm-submit {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1000001 !important;
  cursor: pointer !important;
}

/* Buttontext darf nicht komisch umbrechen */
#support-close-confirm-submit,
.support-ticket-close-bottom,
.support-ticket-close-top {
  white-space: nowrap !important;
}

/* Login-Seite: Anmeldebox sauber zentrieren */
body.login-page,
.login-page {
  min-height: 100vh !important;
}

.login-page .container-scroller,
.login-page .container-fluid,
.login-page .auth,
.login-page .auth-form-light,
.login-page .auth-form-dark {
  min-height: 100vh !important;
}

body:has(#login-form) {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 36%),
    linear-gradient(135deg, #07111f 0%, #08182b 48%, #0b2b3d 100%) !important;
}

body:has(#login-form) .login-wrapper,
body:has(#login-form) .auth-form,
body:has(#login-form) .auth-form-dark,
body:has(#login-form) .auth-form-light,
body:has(#login-form) .card {
  margin: 0 auto !important;
}

body:has(#login-form) form,
body:has(#login-form) #login-form {
  width: 100% !important;
}

body:has(#login-form) .auth-form-dark,
body:has(#login-form) .auth-form-light,
body:has(#login-form) .card {
  max-width: 560px !important;
  width: min(560px, calc(100vw - 36px)) !important;
  border-radius: 18px !important;
  background: rgba(17, 24, 39, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42) !important;
}

@media (max-width: 768px) {
  body:has(#login-form) {
    padding: 18px !important;
  }
}

/* Dashboard Optimierung */
.dashboard-hero-header {
  align-items: center !important;
  margin-bottom: 24px !important;
}

.dashboard-eyebrow {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.dashboard-hero-status {
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(13, 28, 49, 0.72);
  border: 1px solid rgba(96, 165, 250, 0.16);
  text-align: right;
}

.dashboard-hero-status-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.dashboard-hero-status-note {
  color: #4ade80;
  font-size: 13px;
  font-weight: 800;
  margin-top: 7px;
}

.dashboard-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(136px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.dashboard-package-card {
  display: none !important;
}

.dashboard-overview-card {
  min-height: 0 !important;
  padding: 10px !important;
  border-radius: 16px;
  border: 1px solid rgba(96, 165, 250, 0.16);
  background:
    linear-gradient(145deg, rgba(13, 28, 49, 0.78) 0%, rgba(8, 18, 34, 0.80) 100%);
}

.dashboard-overview-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px !important;
  min-width: 0;
}

.dashboard-overview-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 18px;
}

.dashboard-overview-card-head > div:last-child {
  min-width: 0;
}

.dashboard-overview-icon.green { background: rgba(34, 197, 94, 0.92); }
.dashboard-overview-icon.blue { background: rgba(37, 99, 235, 0.92); }
.dashboard-overview-icon.purple { background: rgba(124, 58, 237, 0.92); }
.dashboard-overview-icon.orange { background: rgba(245, 158, 11, 0.92); }
.dashboard-overview-icon.red { background: rgba(239, 68, 68, 0.92); }
.dashboard-overview-icon.red-soft { background: rgba(220, 38, 38, 0.84); }
.dashboard-overview-icon.teal { background: rgba(20, 184, 166, 0.92); }

.dashboard-overview-title {
  color: #ffffff;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.dashboard-overview-subtitle,
.dashboard-overview-foot {
  color: #9fb0d0;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 0 !important;
}

.dashboard-kpi-line {
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

.dashboard-kpi-line span {
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.dashboard-kpi-line small {
  color: #dbeafe;
  font-size: 15px;
  font-weight: 800;
}

.dashboard-kpi-line-compact span {
  font-size: 24px;
  line-height: 1.15;
}

.dashboard-package-price {
  color: #bfdbfe;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 14px;
}

.dashboard-status-badge.success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #4ade80 !important;
}

.dashboard-status-badge.warning {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
}

.dashboard-status-badge.danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
}

.dashboard-status-badge.neutral {
  background: rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
}

.dashboard-setup-warning {
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.26);
  background: rgba(245, 158, 11, 0.10);
}

.dashboard-setup-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.dashboard-setup-title {
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 3px;
}

.dashboard-setup-text {
  color: #fde68a;
  font-size: 14px;
}

.dashboard-focus-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}

.dashboard-info-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-next-action {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.12);
  color: #dbeafe;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.dashboard-next-action-text {
  max-width: 760px;
}

.dashboard-next-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 13px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.dashboard-next-action-button:hover {
  color: #ffffff;
  text-decoration: none;
}

.dashboard-recent-list.compact {
  min-height: 122px;
}

.dashboard-attention-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.dashboard-attention-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.dashboard-attention-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(245, 158, 11, 0.88);
}

.dashboard-attention-icon.error {
  background: rgba(239, 68, 68, 0.90);
}

.dashboard-attention-icon.paused {
  background: rgba(245, 158, 11, 0.90);
}

.dashboard-attention-icon.inactive {
  background: rgba(100, 116, 139, 0.90);
}

.dashboard-attention-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 2px;
}

.dashboard-attention-meta {
  color: #9fb0d0;
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-credit-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.dashboard-overview-card.credit-critical .dashboard-credit-warning {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}

.dashboard-credit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.dashboard-credit-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content !important;
  max-width: max-content !important;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.dashboard-credit-action.secondary {
  background: rgba(37, 99, 235, 0.14);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, 0.24);
}

.dashboard-credit-action:hover {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 1400px) {
  .dashboard-overview-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-overview-grid,
  .dashboard-focus-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-header {
    align-items: flex-start !important;
  }

  .dashboard-hero-status {
    text-align: left;
    width: 100%;
  }
}

/* Dashboard: obere Systemstatus-Kachel deaktivieren */
.dashboard-hero-status {
  display: none !important;
}

.dashboard-hero-header {
  justify-content: flex-start !important;
}


/* Vertrag: sichtbare passende Detail-Icons */
.contract-detail-icon,
.contract-timeline-icon,
.contract-billing-icon,
.contract-info-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #93c5fd !important;
  font-size: 22px !important;
}

.contract-detail-icon i,
.contract-timeline-icon i,
.contract-billing-icon i,
.contract-info-icon i {
  display: inline-flex !important;
  line-height: 1 !important;
}


/* Automationen: Aktualisieren-Button ausblenden und Filter sauber ausrichten */
#automation-refresh-button,
.automation-refresh {
  display: none !important;
}

.automation-toolbar {
  grid-template-columns: minmax(280px, 1.4fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) !important;
}

@media (max-width: 1100px) {
  .automation-toolbar {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 768px) {
  .automation-toolbar {
    grid-template-columns: 1fr !important;
  }
}

/* Stravo Mini-Logo größer anzeigen */
.navbar .brand-logo-mini img,
.sidebar .brand-logo-mini img,
.brand-logo-mini img,
img[src*="logo-mini.svg"] {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

@media (max-width: 991px) {
  .navbar .navbar-brand-wrapper {
    width: 64px !important;
    min-width: 64px !important;
    overflow: visible !important;
  }

  .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini,
  .navbar .navbar-brand-wrapper .brand-logo-mini {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 70px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img,
  .navbar .navbar-brand-wrapper .brand-logo-mini img,
  .navbar img[src*="logo-mini.svg"] {
    display: block !important;
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    object-fit: contain !important;
  }

  .navbar .navbar-menu-wrapper {
    position: relative !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 14px !important;
    justify-content: flex-end !important;
  }

  .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
    display: none !important;
  }

  .navbar .navbar-menu-wrapper .navbar-toggler.navbar-toggler-right {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    color: #9fb0d0 !important;
    border-radius: 10px !important;
  }

  .navbar .navbar-menu-wrapper .navbar-toggler.navbar-toggler-right .mdi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }
}


/* Light Mode */
html[data-portal-theme="light"] {
  --portal-bg-0: #f7fbff;
  --portal-bg-1: #eef6ff;
  --portal-bg-2: #e7f0fb;
  --portal-bg-3: #dceafa;

  --portal-card-1: rgba(255, 255, 255, 0.98);
  --portal-card-2: rgba(247, 251, 255, 0.98);

  --portal-border: rgba(37, 99, 235, 0.16);
  --portal-border-strong: rgba(37, 99, 235, 0.28);

  --portal-text: #0f172a;
  --portal-muted: #52627a;
}

html[data-portal-theme="light"],
html[data-portal-theme="light"] body {
  color: var(--portal-text) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.10) 0, rgba(37, 99, 235, 0.00) 34%),
    radial-gradient(circle at 88% 18%, rgba(14, 165, 233, 0.10) 0, rgba(14, 165, 233, 0.00) 32%),
    linear-gradient(135deg, var(--portal-bg-0) 0%, var(--portal-bg-1) 44%, var(--portal-bg-2) 100%) !important;
}

html[data-portal-theme="light"] .container-scroller,
html[data-portal-theme="light"] .page-body-wrapper,
html[data-portal-theme="light"] .main-panel,
html[data-portal-theme="light"] .content-wrapper,
html[data-portal-theme="light"] .settings-content-wrapper {
  color: var(--portal-text) !important;
  background:
    radial-gradient(circle at 14% 9%, rgba(37, 99, 235, 0.08) 0, rgba(37, 99, 235, 0.00) 30%),
    radial-gradient(circle at 92% 16%, rgba(20, 184, 166, 0.08) 0, rgba(20, 184, 166, 0.00) 28%),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 56%, #e6f0fb 100%) !important;
}

html[data-portal-theme="light"] .sidebar,
html[data-portal-theme="light"] .sidebar .sidebar-brand-wrapper,
html[data-portal-theme="light"] .navbar,
html[data-portal-theme="light"] .navbar .navbar-menu-wrapper,
html[data-portal-theme="light"] .navbar .navbar-brand-wrapper {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08) !important;
}

html[data-portal-theme="light"] .sidebar .nav .nav-item .nav-link,
html[data-portal-theme="light"] .sidebar .nav .nav-item .nav-link .menu-title,
html[data-portal-theme="light"] .navbar .nav-link,
html[data-portal-theme="light"] .navbar .navbar-profile-name {
  color: #334155 !important;
}

html[data-portal-theme="light"] .sidebar .nav .nav-item.active > .nav-link,
html[data-portal-theme="light"] .sidebar .nav .nav-item .nav-link:hover {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .card,
html[data-portal-theme="light"] .automation-card,
html[data-portal-theme="light"] .settings-card,
html[data-portal-theme="light"] .support-card,
html[data-portal-theme="light"] .contract-card,
html[data-portal-theme="light"] .billing-card,
html[data-portal-theme="light"] .table-card,
html[data-portal-theme="light"] .automation-stat-card,
html[data-portal-theme="light"] .automation-table-card,
html[data-portal-theme="light"] .dashboard-overview-card,
html[data-portal-theme="light"] .dashboard-info-card,
html[data-portal-theme="light"] .dashboard-table-card,
html[data-portal-theme="light"] .support-ticket-detail,
html[data-portal-theme="light"] .settings-password-modal,
html[data-portal-theme="light"] .support-confirm-modal {
  background:
    linear-gradient(145deg, var(--portal-card-1) 0%, var(--portal-card-2) 100%) !important;
  border-color: var(--portal-border) !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10) !important;
  color: var(--portal-text) !important;
}

html[data-portal-theme="light"] h1,
html[data-portal-theme="light"] h2,
html[data-portal-theme="light"] h3,
html[data-portal-theme="light"] h4,
html[data-portal-theme="light"] .settings-page-header h1,
html[data-portal-theme="light"] .settings-card-title,
html[data-portal-theme="light"] .settings-row-title,
html[data-portal-theme="light"] .settings-password-value,
html[data-portal-theme="light"] .settings-password-modal-title,
html[data-portal-theme="light"] .dashboard-overview-title,
html[data-portal-theme="light"] .dashboard-kpi-line,
html[data-portal-theme="light"] .dashboard-package-name,
html[data-portal-theme="light"] .dashboard-info-title,
html[data-portal-theme="light"] .dashboard-table-title,
html[data-portal-theme="light"] .dashboard-recent-title,
html[data-portal-theme="light"] .dashboard-list-table tbody td,
html[data-portal-theme="light"] .automation-stat-number,
html[data-portal-theme="light"] .automation-stat-label,
html[data-portal-theme="light"] .automation-list-table tbody td,
html[data-portal-theme="light"] .automation-flow-title,
html[data-portal-theme="light"] .automation-empty,
html[data-portal-theme="light"] .support-card-title,
html[data-portal-theme="light"] .support-sla-title,
html[data-portal-theme="light"] .support-phone-number,
html[data-portal-theme="light"] .support-info-card strong,
html[data-portal-theme="light"] .support-ticket-detail-title,
html[data-portal-theme="light"] .support-ticket-messages-title,
html[data-portal-theme="light"] .contract-value,
html[data-portal-theme="light"] .contract-value-large,
html[data-portal-theme="light"] .contract-service-title,
html[data-portal-theme="light"] .invoice-title,
html[data-portal-theme="light"] .invoice-table-cell,
html[data-portal-theme="light"] .invoice-detail-title,
html[data-portal-theme="light"] .invoice-detail-grid strong,
html[data-portal-theme="light"] .contract-package-title,
html[data-portal-theme="light"] .contract-package-kpi-value,
html[data-portal-theme="light"] .automation-stat-value {
  color: #0f172a !important;
}

html[data-portal-theme="light"] p,
html[data-portal-theme="light"] .text-muted,
html[data-portal-theme="light"] .dashboard-muted,
html[data-portal-theme="light"] .settings-page-header p,
html[data-portal-theme="light"] .settings-card-subtitle,
html[data-portal-theme="light"] .settings-row-text,
html[data-portal-theme="light"] .settings-last-change,
html[data-portal-theme="light"] .settings-password-help,
html[data-portal-theme="light"] .settings-password-modal-subtitle,
html[data-portal-theme="light"] .dashboard-overview-subtitle,
html[data-portal-theme="light"] .dashboard-overview-foot,
html[data-portal-theme="light"] .dashboard-package-price,
html[data-portal-theme="light"] .dashboard-recent-desc,
html[data-portal-theme="light"] .dashboard-recent-time,
html[data-portal-theme="light"] .dashboard-flow-description,
html[data-portal-theme="light"] .dashboard-attention-meta,
html[data-portal-theme="light"] .dashboard-period-note,
html[data-portal-theme="light"] .support-card-subtitle,
html[data-portal-theme="light"] .dashboard-period-filter label,
html[data-portal-theme="light"] .support-muted,
html[data-portal-theme="light"] .support-phone-label,
html[data-portal-theme="light"] .support-phone-note,
html[data-portal-theme="light"] .support-field label,
html[data-portal-theme="light"] .support-file-hint,
html[data-portal-theme="light"] .contract-muted,
html[data-portal-theme="light"] .contract-package-eyebrow,
html[data-portal-theme="light"] .contract-package-subtitle,
html[data-portal-theme="light"] .contract-package-kpi-label,
html[data-portal-theme="light"] .contract-package-kpi-note,
html[data-portal-theme="light"] .automation-stat-sub,
html[data-portal-theme="light"] .automation-desc,
html[data-portal-theme="light"] .automation-filter label,
html[data-portal-theme="light"] .automation-search-label {
  color: var(--portal-muted) !important;
}

html[data-portal-theme="light"] input,
html[data-portal-theme="light"] select,
html[data-portal-theme="light"] textarea,
html[data-portal-theme="light"] .form-control,
html[data-portal-theme="light"] .form-select,
html[data-portal-theme="light"] .settings-input,
html[data-portal-theme="light"] .settings-password-field input,
html[data-portal-theme="light"] .automation-search,
html[data-portal-theme="light"] .automation-search input,
html[data-portal-theme="light"] .automation-select,
html[data-portal-theme="light"] .support-input,
html[data-portal-theme="light"] .support-select,
html[data-portal-theme="light"] .support-textarea,
html[data-portal-theme="light"] .invoice-select,
html[data-portal-theme="light"] .dashboard-period-filter select {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

html[data-portal-theme="light"] input::placeholder,
html[data-portal-theme="light"] textarea::placeholder {
  color: rgba(82, 98, 122, 0.72) !important;
}

html[data-portal-theme="light"] .settings-row,
html[data-portal-theme="light"] .settings-security-row,
html[data-portal-theme="light"] .settings-export-row,
html[data-portal-theme="light"] .settings-password-modal-header,
html[data-portal-theme="light"] .table thead th,
html[data-portal-theme="light"] .table tbody td,
html[data-portal-theme="light"] .automation-list-table thead th,
html[data-portal-theme="light"] .automation-list-table tbody td,
html[data-portal-theme="light"] .dashboard-list-table thead th,
html[data-portal-theme="light"] .dashboard-list-table tbody td,
html[data-portal-theme="light"] .dashboard-recent-item,
html[data-portal-theme="light"] .support-ticket-detail-header,
html[data-portal-theme="light"] .support-sla-item {
  border-color: rgba(37, 99, 235, 0.12) !important;
}

html[data-portal-theme="light"] .table thead th,
html[data-portal-theme="light"] .automation-list-table thead th,
html[data-portal-theme="light"] .dashboard-list-table thead th {
  color: #52627a !important;
  background: rgba(239, 246, 255, 0.72) !important;
}

html[data-portal-theme="light"] .settings-outline-btn {
  border-color: rgba(37, 99, 235, 0.48) !important;
  color: #1d4ed8 !important;
  background: rgba(37, 99, 235, 0.04) !important;
}

html[data-portal-theme="light"] .settings-outline-btn:hover {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .settings-secondary-btn,
html[data-portal-theme="light"] .settings-modal-close,
html[data-portal-theme="light"] .support-ticket-detail-close {
  background: rgba(15, 23, 42, 0.04) !important;
  border-color: rgba(37, 99, 235, 0.14) !important;
  color: #334155 !important;
}

html[data-portal-theme="light"] .settings-toggle {
  background: #cbd5e1 !important;
}

html[data-portal-theme="light"] .settings-toggle-input:checked + .settings-toggle {
  background: #2563eb !important;
}

html[data-portal-theme="light"] .dashboard-next-action,
html[data-portal-theme="light"] .dashboard-toolbar-filter,
html[data-portal-theme="light"] .dashboard-recent-item,
html[data-portal-theme="light"] .support-ticket-description,
html[data-portal-theme="light"] .support-ticket-message,
html[data-portal-theme="light"] .support-file-upload,
html[data-portal-theme="light"] .support-info-card,
html[data-portal-theme="light"] .support-phone-box,
html[data-portal-theme="light"] .dashboard-attention-item,
html[data-portal-theme="light"] .contract-package-kpi,
html[data-portal-theme="light"] .invoice-row,
html[data-portal-theme="light"] .invoice-empty {
  background: rgba(239, 246, 255, 0.74) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
  color: #1e293b !important;
}

html[data-portal-theme="light"] .invoice-icon {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #dc2626 !important;
}

html[data-portal-theme="light"] .invoice-action {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .invoice-action.primary {
  background: #2563eb !important;
  color: #ffffff !important;
}

html[data-portal-theme="light"] .invoice-status {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .invoice-detail-drawer {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98)) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
}

html[data-portal-theme="light"] .invoice-detail-grid > div,
html[data-portal-theme="light"] .invoice-detail-note,
html[data-portal-theme="light"] .invoice-detail-close {
  background: rgba(239, 246, 255, 0.74) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
}

html[data-portal-theme="light"] .invoice-detail-grid span,
html[data-portal-theme="light"] .invoice-list-header,
html[data-portal-theme="light"] .invoice-detail-note {
  color: #52627a !important;
}

html[data-portal-theme="light"] .contract-package-pill {
  background: rgba(34, 197, 94, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.24) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .dashboard-credit-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: rgba(245, 158, 11, 0.30) !important;
  color: #92400e !important;
}

html[data-portal-theme="light"] .dashboard-overview-card.credit-critical .dashboard-credit-warning {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
  color: #991b1b !important;
}

html[data-portal-theme="light"] .dashboard-credit-action.secondary,
html[data-portal-theme="light"] .contract-package-action.secondary {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .contract-package-upgrade-action {
  background: #7c3aed !important;
  color: #ffffff !important;
}

html[data-portal-theme="light"] .contract-credit-meter {
  background: rgba(148, 163, 184, 0.22) !important;
}

html[data-portal-theme="light"] .contract-action-button {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .contract-action-button.primary {
  background: #7c3aed !important;
  color: #ffffff !important;
}

html[data-portal-theme="light"] .contract-action-button.danger {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
  color: #b91c1c !important;
}

/* Final visual polish for the prototype */
.dashboard-overview-card,
.dashboard-info-card,
.dashboard-table-card,
.automation-stat-card,
.automation-table-card,
.contract-card,
.support-card,
.settings-card {
  border-radius: 10px !important;
}

.dashboard-overview-card {
  position: relative;
  overflow: hidden;
}

.dashboard-overview-card.credit-warning,
.dashboard-overview-card.credit-critical {
  border-color: rgba(245, 158, 11, 0.42) !important;
}

.dashboard-overview-card.credit-critical {
  border-color: rgba(239, 68, 68, 0.48) !important;
}

.automation-table-card,
.dashboard-table-card {
  border-radius: 10px !important;
}

.automation-actions,
.dashboard-credit-action,
.contract-package-action,
.contract-package-upgrade-action,
.contract-action-button,
.support-primary-btn,
.support-secondary-btn,
.settings-save-btn,
.settings-outline-btn {
  border-radius: 8px !important;
}

.support-ticket-detail-actions {
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 14px !important;
}

.support-ticket-detail-actions .support-primary-btn,
.support-ticket-detail-actions .support-secondary-btn {
  min-height: 44px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  justify-content: center !important;
}

.support-ticket-detail-actions .support-primary-btn {
  min-width: 118px !important;
}

.support-ticket-detail-actions .support-secondary-btn:not(.danger) {
  min-width: 116px !important;
}

.support-ticket-detail-actions .support-secondary-btn.danger {
  min-width: 138px !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

.settings-form-actions {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 22px !important;
}

.settings-form-actions .settings-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: fit-content !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
}

html[data-portal-theme="dark"],
html[data-portal-theme="dark"] * {
  scrollbar-width: thin;
  scrollbar-color: #2563eb #07111f;
}

html[data-portal-theme="light"],
html[data-portal-theme="light"] * {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}

html[data-portal-theme="dark"] ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html[data-portal-theme="dark"] ::-webkit-scrollbar-track {
  background: #07111f;
}

html[data-portal-theme="dark"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563eb, #1d4ed8);
  border: 3px solid #07111f;
  border-radius: 999px;
}

html[data-portal-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

html[data-portal-theme="dark"] ::-webkit-scrollbar-corner {
  background: #07111f;
}

html[data-portal-theme="light"] ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html[data-portal-theme="light"] ::-webkit-scrollbar-track {
  background: #f1f5f9;
}

html[data-portal-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a8b4c6, #8492a8);
  border: 3px solid #f1f5f9;
  border-radius: 999px;
}

html[data-portal-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7c8ca3, #64748b);
}

html[data-portal-theme="light"] ::-webkit-scrollbar-corner {
  background: #f1f5f9;
}

.portal-dark-mode .ps__rail-y,
.portal-dark-mode .ps__rail-x {
  background: transparent !important;
}

.portal-dark-mode .ps__thumb-y,
.portal-dark-mode .ps__thumb-x {
  background-color: #2563eb !important;
}

.portal-light-mode .ps__rail-y,
.portal-light-mode .ps__rail-x {
  background: transparent !important;
}

.portal-light-mode .ps__thumb-y,
.portal-light-mode .ps__thumb-x {
  background-color: #94a3b8 !important;
}

.automation-actions {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
}

.automation-list-table tbody tr,
.dashboard-list-table tbody tr {
  transition: background 0.16s ease, transform 0.16s ease;
}

.automation-list-table tbody tr:hover,
.dashboard-list-table tbody tr:hover {
  background: rgba(96, 165, 250, 0.07) !important;
}

.support-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  color: #9fb0d0;
  font-size: 12px;
  font-weight: 700;
}

.support-status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.support-status-legend i {
  font-size: 10px;
}

.support-status-legend .status-open {
  color: #f59e0b;
}

.support-status-legend .status-answered {
  color: #60a5fa;
}

.support-status-legend .status-closed {
  color: #22c55e;
}

.support-status-legend .status-trash {
  color: #94a3b8;
}

.support-ticket-state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.support-ticket-state i {
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.support-ticket-state .status-open {
  color: #f59e0b;
}

.support-ticket-state .status-answered {
  color: #60a5fa;
}

.support-ticket-state .status-closed {
  color: #22c55e;
}

.support-ticket-state .status-trash {
  color: #94a3b8;
}

.settings-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.settings-quick-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 10px;
  background: linear-gradient(145deg, #101c2c, #0b1626);
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.settings-quick-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 21px;
}

.settings-quick-icon.green {
  background: #16a34a;
}

.settings-quick-icon.blue {
  background: #2563eb;
}

.settings-quick-icon.purple {
  background: #7c3aed;
}

.settings-quick-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 2px;
}

.settings-quick-text {
  color: #9fb0d0;
  font-size: 12px;
  line-height: 1.35;
}

.automation-row-clickable {
  cursor: pointer;
}

.automation-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  justify-content: flex-end;
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(6px);
}

.automation-detail-backdrop.open {
  display: flex;
}

.automation-detail-panel {
  width: min(680px, 100%);
  height: 100%;
  padding: 26px;
  overflow-y: auto;
  background: linear-gradient(145deg, #101c2c 0%, #0b1626 48%, #101827 100%);
  border-left: 1px solid rgba(96, 165, 250, 0.20);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
  color: #dbeafe;
}

.automation-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.automation-detail-eyebrow {
  color: #60a5fa;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.automation-detail-header h2 {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  margin: 0 0 6px;
}

.automation-detail-subtitle {
  color: #9fb0d0;
  font-size: 14px;
}

.automation-detail-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: #dbeafe;
}

.automation-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.automation-detail-metric,
.automation-detail-section {
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
}

.automation-detail-metric span {
  display: block;
  color: #9fb0d0;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.automation-detail-metric strong {
  color: #ffffff;
  font-size: 18px;
}

.automation-detail-section {
  margin-bottom: 14px;
}

.automation-detail-section h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 8px;
}

.automation-detail-section p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.automation-config-section {
  padding: 0;
  overflow: hidden;
}

.automation-config-section.open {
  border-color: rgba(96, 165, 250, 0.26);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.46), rgba(8, 13, 24, 0.3));
}

.automation-config-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
  padding: 14px 14px 12px;
  border: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.automation-config-header:hover {
  background: rgba(37, 99, 235, 0.08);
}

.automation-config-section.locked .automation-config-header {
  cursor: not-allowed;
}

.automation-config-section.locked .automation-config-header:disabled {
  opacity: 1;
}

.automation-config-section.locked .automation-config-header:hover {
  background: transparent;
}

.automation-config-section.locked .automation-config-meta .mdi {
  color: #64748b;
  transform: none;
}

.automation-config-section.locked .automation-config-source {
  background: rgba(100, 116, 139, 0.18);
  color: #cbd5e1;
}

.automation-config-header p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.automation-config-header h3 {
  margin-bottom: 5px;
}

.automation-config-meta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.automation-config-source {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.automation-config-meta .mdi {
  color: #93c5fd;
  font-size: 20px;
  line-height: 1;
  transition: transform 160ms ease;
}

.automation-config-section.open .automation-config-meta .mdi {
  transform: rotate(180deg);
}

.automation-config-form {
  padding: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(20, 184, 166, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(17, 24, 39, 0.2));
}

.automation-config-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  color: #9fb0d0;
  font-size: 12px;
  font-weight: 800;
}

.automation-config-meta-row span {
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  color: #bfdbfe;
}

.automation-config-meta-row span:nth-child(2) {
  background: rgba(20, 184, 166, 0.12);
  color: #99f6e4;
}

.automation-config-form[hidden] {
  display: none;
}

.automation-config-fields {
  display: grid;
  gap: 18px;
}

.automation-config-group {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(17, 24, 39, 0.56));
  overflow: hidden;
}

.automation-config-group:nth-child(1) {
  border-color: rgba(34, 211, 238, 0.3);
  background: linear-gradient(145deg, rgba(8, 47, 73, 0.34), rgba(15, 23, 42, 0.62));
}

.automation-config-group:nth-child(2) {
  border-color: rgba(34, 197, 94, 0.28);
  background: linear-gradient(145deg, rgba(5, 46, 22, 0.28), rgba(15, 23, 42, 0.62));
}

.automation-config-group:nth-child(3) {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(145deg, rgba(69, 26, 3, 0.24), rgba(15, 23, 42, 0.62));
}

.automation-config-group:nth-child(4) {
  border-color: rgba(168, 85, 247, 0.28);
  background: linear-gradient(145deg, rgba(59, 7, 100, 0.24), rgba(15, 23, 42, 0.62));
}

.automation-config-group:nth-child(n+5) {
  border-color: rgba(244, 114, 182, 0.22);
  background: linear-gradient(145deg, rgba(80, 7, 36, 0.18), rgba(15, 23, 42, 0.62));
}

.automation-config-group::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #14b8a6;
}

.automation-config-group:nth-child(2n)::before {
  background: #f59e0b;
}

.automation-config-group:nth-child(3n)::before {
  background: #8b5cf6;
}

.automation-config-group:nth-child(4n)::before {
  background: #ec4899;
}

.automation-config-group-title {
  color: #99f6e4;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 4px;
}

.automation-config-group:nth-child(1) .automation-config-group-title {
  color: #67e8f9;
}

.automation-config-group:nth-child(2) .automation-config-group-title {
  color: #86efac;
}

.automation-config-group:nth-child(3) .automation-config-group-title {
  color: #fcd34d;
}

.automation-config-group:nth-child(4) .automation-config-group-title {
  color: #c4b5fd;
}

.automation-config-group:nth-child(n+5) .automation-config-group-title {
  color: #f9a8d4;
}

.automation-config-field {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 9px;
  background: rgba(2, 6, 23, 0.28);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.automation-config-field:focus-within {
  border-color: rgba(96, 165, 250, 0.44);
  background: rgba(2, 6, 23, 0.46);
}

.automation-config-field span {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 900;
}

.automation-config-required {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.3);
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.automation-config-field:has([required]) {
  border-color: rgba(248, 113, 113, 0.18);
}

.automation-config-field input,
.automation-config-field select,
.automation-config-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 8px;
  background: rgba(7, 17, 32, 0.9);
  color: #ffffff;
  font-size: 14px;
  line-height: 1.55;
  outline: none;
}

.automation-config-field textarea {
  min-height: 132px;
  resize: vertical;
}

.automation-config-field textarea[data-config-format="json"] {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  border-color: rgba(245, 158, 11, 0.36);
  background: rgba(24, 18, 8, 0.78);
  color: #fde68a;
}

.automation-config-field input:focus,
.automation-config-field select:focus,
.automation-config-field textarea:focus {
  border-color: rgba(96, 165, 250, 0.7);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.automation-config-field small {
  color: #a9bddb;
  font-size: 12px;
  line-height: 1.5;
}

.automation-config-dirty {
  margin-top: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 900;
}

.automation-detail-primary.attention {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.20);
}

.portal-empty-state {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 16px !important;
  border: 1px dashed rgba(96, 165, 250, 0.24);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.30);
  color: #cbd5e1;
}

.portal-empty-state strong {
  display: block;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 3px;
}

.portal-empty-state span {
  display: block;
  color: #9fb0d0;
  font-size: 13px;
}

.portal-empty-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.16);
  color: #93c5fd;
  font-size: 20px;
}

.dashboard-next-action {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.dashboard-next-action-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.16);
  color: #93c5fd;
  font-size: 22px;
}

.dashboard-next-action-copy strong {
  display: block;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 3px;
}

.dashboard-attention-list .portal-empty-state {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 122px;
  padding: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.48);
  color: #dbeafe;
}

.dashboard-attention-list .portal-empty-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  font-size: 22px;
}

.dashboard-attention-list .portal-empty-state strong {
  margin-bottom: 3px;
}

.dashboard-attention-list .portal-empty-state span {
  color: #dbeafe;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.support-ticket-detail.open {
  position: fixed;
  z-index: 2110;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100%);
  margin-top: 0;
  padding: 24px;
  overflow-y: auto;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: linear-gradient(145deg, #101c2c, #0b1626);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35);
}

.automation-detail-panel,
.support-ticket-detail.open,
.invoice-detail-drawer {
  border-left: 1px solid rgba(96, 165, 250, 0.20) !important;
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.35) !important;
}

.automation-detail-backdrop,
.support-ticket-detail-backdrop,
.invoice-detail-backdrop {
  backdrop-filter: blur(6px);
}

.support-ticket-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  background: rgba(2, 6, 23, 0.58);
  backdrop-filter: blur(6px);
}

.support-ticket-detail-backdrop.open {
  display: block;
}

.support-ticket-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.support-ticket-detail-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.14);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

.support-ticket-edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 14px;
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid rgba(96, 165, 250, 0.24);
  background: rgba(37, 99, 235, 0.12);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
}

.support-ticket-detail-controls[hidden] {
  display: none !important;
}

.portal-toast-root {
  position: fixed;
  z-index: 3000;
  top: 18px;
  right: 18px;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
}

.portal-toast {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.96);
  color: #dbeafe;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.portal-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.portal-toast i {
  color: #60a5fa;
  font-size: 22px;
}

.portal-toast.success i {
  color: #4ade80;
}

.portal-toast.error {
  border-color: rgba(239, 68, 68, 0.28);
}

.portal-toast.error i {
  color: #f87171;
}

.portal-skeleton {
  position: relative;
  overflow: hidden;
  min-height: 18px;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
}

.portal-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: portal-skeleton-shimmer 1.3s infinite;
}

.settings-user-list {
  display: grid;
  gap: 12px;
}

.settings-card-columns,
.settings-card-column {
  display: grid;
  gap: 10px;
}

.settings-card-column > .settings-card {
  margin-bottom: 0;
}

.settings-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.32);
}

.settings-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.settings-role-badge.muted {
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
}

.settings-invite-button {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  margin-top: 14px;
  padding-inline: 16px !important;
}

@media (min-width: 769px) {
  .settings-content-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
    align-content: start !important;
  }

  .settings-page-header,
  .settings-message,
  .settings-quick-grid,
  .settings-company-card,
  .settings-card-columns {
    grid-column: 1 / -1 !important;
  }

  .settings-card-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  #settings-form {
    display: contents !important;
  }

  .settings-content-wrapper > .settings-card,
  #settings-form > .settings-card {
    margin-bottom: 0 !important;
  }

  .settings-toggle-row {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    justify-content: start !important;
  }

  .settings-toggle-row > div:nth-child(3) {
    justify-self: start !important;
  }

  .settings-toggle-row > span {
    display: none !important;
  }

  .settings-security-row,
  .settings-export-row {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    justify-content: start !important;
  }

  .settings-security-row .settings-outline-btn,
  .settings-export-row .settings-outline-btn {
    justify-self: start !important;
  }

  .settings-user-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-content: start !important;
    gap: 10px !important;
  }
}

@keyframes portal-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.automation-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.automation-detail-primary,
.automation-detail-secondary {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.automation-detail-primary {
  border: 0;
  background: #2563eb;
  color: #ffffff;
}

.automation-detail-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.automation-detail-secondary {
  display: inline-flex;
  align-items: center;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(96, 165, 250, 0.24);
  color: #bfdbfe;
}

@media (max-width: 1100px) {
  .dashboard-overview-grid {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  }

  .contract-package-hero {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .dashboard-overview-grid,
  .dashboard-focus-grid,
  .contract-package-kpis {
    grid-template-columns: 1fr !important;
  }

  .dashboard-next-action,
  .contract-actions-card,
  .support-ticket-row {
    align-items: flex-start;
  }

  .support-ticket-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .support-ticket-state {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: center !important;
    justify-content: flex-end !important;
  }

  .support-ticket-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
  }

  .automation-detail-panel {
    width: 100%;
    padding: 20px;
  }

  .automation-detail-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-next-action {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .dashboard-next-action-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
  }

  .dashboard-next-action-copy strong {
    margin-bottom: 2px !important;
  }

  .dashboard-next-action-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  .dashboard-attention-list .portal-empty-state {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .dashboard-attention-list .portal-empty-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
  }

  .support-ticket-detail.open {
    width: 100%;
    padding: 20px;
  }
}

@media (max-width: 900px) {
  .settings-quick-grid {
    grid-template-columns: 1fr;
  }
}

html[data-portal-theme="light"] .settings-quick-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98)) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

html[data-portal-theme="light"] .settings-quick-title {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .settings-quick-text,
html[data-portal-theme="light"] .support-status-legend {
  color: #52627a !important;
}

html[data-portal-theme="light"] .automation-detail-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98)) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .automation-detail-header h2,
html[data-portal-theme="light"] .automation-detail-section h3,
html[data-portal-theme="light"] .automation-detail-metric strong {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .automation-detail-subtitle,
html[data-portal-theme="light"] .automation-detail-metric span,
html[data-portal-theme="light"] .automation-detail-section p {
  color: #52627a !important;
}

html[data-portal-theme="light"] .automation-detail-metric,
html[data-portal-theme="light"] .automation-detail-section,
html[data-portal-theme="light"] .automation-detail-close {
  background: rgba(239, 246, 255, 0.74) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
}

html[data-portal-theme="light"] .automation-config-header {
  border-color: rgba(37, 99, 235, 0.12) !important;
}

html[data-portal-theme="light"] .automation-config-header:hover {
  background: rgba(37, 99, 235, 0.06) !important;
}

html[data-portal-theme="light"] .automation-config-header p {
  color: #52627a !important;
}

html[data-portal-theme="light"] .automation-config-source {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .automation-config-meta .mdi {
  color: #2563eb !important;
}

html[data-portal-theme="light"] .automation-config-field span {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .automation-config-field input,
html[data-portal-theme="light"] .automation-config-field select,
html[data-portal-theme="light"] .automation-config-field textarea {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .automation-config-field small {
  color: #64748b !important;
}

html[data-portal-theme="light"] .automation-config-meta-row {
  color: #52627a !important;
}

html[data-portal-theme="light"] .automation-config-meta-row span {
  background: rgba(37, 99, 235, 0.08) !important;
}

html[data-portal-theme="light"] .automation-config-group,
html[data-portal-theme="light"] .portal-empty-state,
html[data-portal-theme="light"] .settings-user-row {
  background: rgba(239, 246, 255, 0.74) !important;
  border-color: rgba(37, 99, 235, 0.14) !important;
}

html[data-portal-theme="light"] .settings-role-badge {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .settings-role-badge.muted {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .automation-config-group-title,
html[data-portal-theme="light"] .portal-empty-icon,
html[data-portal-theme="light"] .dashboard-next-action-icon {
  color: #2563eb !important;
}

html[data-portal-theme="light"] .portal-empty-state strong,
html[data-portal-theme="light"] .dashboard-next-action-copy strong {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .portal-empty-state span {
  color: #52627a !important;
}

html[data-portal-theme="light"] .support-ticket-detail.open {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98)) !important;
}

html[data-portal-theme="light"] .portal-toast {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .portal-skeleton {
  background: rgba(148, 163, 184, 0.16) !important;
}

html[data-portal-theme="light"] .support-ticket-detail-summary span,
html[data-portal-theme="light"] .support-ticket-edit-toggle {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .support-ticket-reply {
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.76), rgba(247, 251, 255, 0.98) 30%) !important;
  border-color: rgba(37, 99, 235, 0.12) !important;
}

html[data-portal-theme="light"] .support-ticket-section-label {
  color: #2563eb !important;
}

html[data-portal-theme="light"] .automation-config-dirty {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #92400e !important;
}

html[data-portal-theme="light"] .dashboard-next-action-button {
  background: #2563eb !important;
  color: #ffffff !important;
}

html[data-portal-theme="light"] .automation-list-table,
html[data-portal-theme="light"] .dashboard-list-table {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .automation-list-table tbody tr:hover,
html[data-portal-theme="light"] .dashboard-list-table tbody tr:hover {
  background: rgba(37, 99, 235, 0.05) !important;
}

html[data-portal-theme="light"] .automation-toolbar,
html[data-portal-theme="light"] .automation-toolbar-clean,
html[data-portal-theme="light"] .dashboard-table-header {
  border-color: rgba(37, 99, 235, 0.12) !important;
  background: rgba(255, 255, 255, 0.56) !important;
}

html[data-portal-theme="light"] .automation-search i {
  color: #2563eb !important;
}

html[data-portal-theme="light"] .dashboard-kpi-line small {
  color: #64748b !important;
}

html[data-portal-theme="light"] .dashboard-recent-icon.success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #16a34a !important;
}

html[data-portal-theme="light"] .dashboard-status-badge.success {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .support-badge.green {
  background: rgba(34, 197, 94, 0.16) !important;
  color: #15803d !important;
}

html[data-portal-theme="light"] .support-badge.orange {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
}

html[data-portal-theme="light"] .support-badge.blue {
  background: rgba(59, 130, 246, 0.14) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .support-badge.red {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #b91c1c !important;
}

html[data-portal-theme="light"] .support-file-label {
  background: rgba(37, 99, 235, 0.10) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .portal-sidebar-user {
  border-color: rgba(37, 99, 235, 0.16) !important;
  color: #0f172a !important;
}

html[data-portal-theme="light"] .portal-sidebar-user-label {
  color: #64748b !important;
}

html[data-portal-theme="light"] .portal-sidebar-user-name {
  color: #0f172a !important;
}

.portal-sidebar-help-link {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 126px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8ca4c4;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s ease, opacity 0.18s ease;
  margin: 0;
  padding: 0;
}

.portal-sidebar-help-link .mdi {
  font-size: 18px;
}

.portal-sidebar-help-link:hover,
.portal-sidebar-help-link:focus {
  color: #dbe7ff;
  text-decoration: none;
}

html[data-portal-theme="light"] .portal-sidebar-help-link {
  color: #4b5563 !important;
}

html[data-portal-theme="light"] .portal-sidebar-help-link:hover,
html[data-portal-theme="light"] .portal-sidebar-help-link:focus {
  color: #1d4ed8 !important;
}

html[data-portal-theme="light"] .automation-title,
html[data-portal-theme="light"] .dashboard-flow-title,
html[data-portal-theme="light"] .dashboard-attention-title,
html[data-portal-theme="light"] .dashboard-list-table tbody td:first-child,
html[data-portal-theme="light"] .dashboard-recent-list .dashboard-recent-title,
html[data-portal-theme="light"] .support-ticket-title,
html[data-portal-theme="light"] .support-ticket-message-head strong {
  color: #0b1220 !important;
}

html[data-portal-theme="light"] .automation-list-table tbody td,
html[data-portal-theme="light"] .dashboard-list-table tbody td {
  color: #0f172a !important;
}

html[data-portal-theme="light"] .brand-logo img[src*="logo.svg"] {
  opacity: 1 !important;
}

html[data-portal-theme="light"] body:has(#login-form) {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.11), transparent 36%),
    linear-gradient(135deg, #f8fbff 0%, #edf6ff 52%, #e6f3fb 100%) !important;
}

html[data-portal-theme="light"] body:has(#login-form) .login-card,
html[data-portal-theme="light"] body:has(#forgot-form) .forgot-card,
html[data-portal-theme="light"] body:has(#reset-form) .reset-card,
html[data-portal-theme="light"] body:has(#login-form) .card {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(37, 99, 235, 0.16) !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.14) !important;
}

/* Tablet und Smartphone: nur additive Regeln, Desktop bleibt unverändert */
@media (max-width: 1180px) {
  .content-wrapper {
    padding: 24px 18px !important;
  }

  .dashboard-overview-grid,
  .automation-stats-grid,
  .settings-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .settings-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    gap: 8px !important;
  }

  .settings-quick-card {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .settings-quick-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: 16px !important;
  }

  .settings-quick-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  .settings-quick-text {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .dashboard-focus-grid,
  .support-grid,
  .contract-billing-grid {
    grid-template-columns: 1fr !important;
  }

  .contract-card-grid,
  .contract-package-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .automation-toolbar,
  .automation-toolbar-clean,
  .dashboard-table-header,
  .invoice-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .automation-detail-panel,
  .support-ticket-detail.open,
  .invoice-detail-drawer {
    width: min(520px, 86vw) !important;
  }
}

@media (max-width: 760px) {
  body,
  .content-wrapper {
    overflow-x: hidden !important;
  }

  .main-panel {
    width: 100% !important;
  }

  .content-wrapper,
  .settings-content-wrapper,
  .support-content-wrapper,
  .contract-content-wrapper,
  .automation-content-wrapper,
  .dashboard-content-wrapper {
    padding: 16px 12px 24px !important;
  }

  .dashboard-page-header,
  .dashboard-hero-header,
  .automations-page-header,
  .automation-page-header,
  .support-page-header,
  .contract-page-header,
  .settings-page-header {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .dashboard-page-header h1,
  .automations-page-header h1,
  .automation-page-header h1,
  .support-page-header h1,
  .contract-page-header h1,
  .settings-page-header h1 {
    font-size: 26px !important;
    line-height: 1.12 !important;
    margin-bottom: 6px !important;
  }

  .dashboard-page-header p,
  .automations-page-header p,
  .automation-page-header p,
  .support-page-header p,
  .contract-page-header p,
  .settings-page-header p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .dashboard-overview-grid,
  .dashboard-focus-grid,
  .automation-stats-grid,
  .contract-card-grid,
  .contract-package-kpis,
  .support-grid,
  .settings-quick-grid,
  .settings-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .dashboard-overview-card {
    min-height: 0 !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }

  .dashboard-overview-card-head {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .dashboard-overview-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .dashboard-overview-title {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }

  .dashboard-overview-subtitle,
  .dashboard-overview-foot {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .dashboard-kpi-line {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }

  .dashboard-kpi-line span {
    font-size: 23px !important;
  }

  .dashboard-kpi-line small {
    font-size: 11.5px !important;
  }

  .dashboard-kpi-line-compact span {
    font-size: 20px !important;
  }

  .dashboard-credit-actions {
    margin-top: 8px !important;
  }

  .dashboard-credit-action {
    min-height: 28px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
  }

  .contract-package-overview {
    padding: 16px !important;
    margin-bottom: 18px !important;
  }

  .contract-package-hero {
    gap: 16px !important;
  }

  .contract-package-main {
    min-height: 0 !important;
  }

  .contract-package-eyebrow {
    font-size: 11.5px !important;
    margin-bottom: 8px !important;
  }

  .contract-package-title {
    font-size: 27px !important;
    margin-bottom: 8px !important;
  }

  .contract-package-subtitle {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .contract-badge {
    margin-top: 10px !important;
    padding: 5px 9px !important;
    font-size: 12px !important;
  }

  .contract-package-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .contract-package-kpi {
    min-height: 0 !important;
    padding: 12px 13px !important;
    border-radius: 8px !important;
  }

  .contract-package-kpi-head {
    gap: 8px !important;
    margin-bottom: 9px !important;
  }

  .contract-package-kpi-icon {
    font-size: 17px !important;
  }

  .contract-package-kpi-label {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .contract-package-kpi-value {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .contract-package-kpi-note {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin-top: 5px !important;
  }

  .contract-package-actions {
    margin-top: 8px !important;
  }

  .contract-package-action {
    min-height: 28px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
  }

  .dashboard-overview-card,
  .dashboard-info-card,
  .dashboard-table-card,
  .automation-stat-card,
  .automation-table-card,
  .contract-card,
  .support-card,
  .settings-card {
    border-radius: 10px !important;
    padding: 16px !important;
  }

  .dashboard-overview-card {
    min-height: 132px !important;
  }

  .dashboard-overview-head,
  .contract-card-header,
  .support-card-header,
  .settings-card-header,
  .settings-card-header.with-action {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .dashboard-overview-icon,
  .settings-icon,
  .support-icon,
  .contract-title-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 18px !important;
  }

  .dashboard-overview-card {
    min-height: 0 !important;
    padding: 11px 12px !important;
    border-radius: 8px !important;
  }

  .dashboard-overview-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
  }

  .automation-stat-card {
    padding: 14px !important;
  }

  .automation-stat-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
    font-size: 18px !important;
  }

  .automation-stat-number {
    font-size: 25px !important;
  }

  .automation-stat-label {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  .automation-stat-sub {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }

  .settings-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    gap: 8px !important;
  }

  .settings-quick-card {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  .settings-quick-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: 16px !important;
  }

  .settings-quick-title {
    font-size: 12px !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  .settings-quick-text {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .dashboard-overview-value,
  .contract-package-title,
  .contract-value,
  .settings-password-value {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .dashboard-period-filter,
  .dashboard-toolbar-filter {
    justify-self: stretch !important;
    justify-items: stretch !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }

  .dashboard-period-filter label {
    text-align: left !important;
  }

  .dashboard-next-action,
  .contract-actions-card,
  .settings-row,
  .settings-security-row,
  .settings-export-row,
  .support-sla-item {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .support-ticket-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .support-ticket-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
    border-radius: 8px !important;
  }

  .support-ticket-state {
    grid-column: auto !important;
    justify-self: end !important;
    align-self: center !important;
    justify-content: flex-end !important;
  }

  .dashboard-next-action-button,
  .support-primary-btn,
  .support-secondary-btn,
  .settings-save-btn,
  .settings-outline-btn,
  .settings-secondary-btn,
  .automation-detail-primary,
  .automation-detail-secondary {
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
  }

  .settings-form-actions .settings-save-btn {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding-inline: 18px !important;
  }

  .settings-company-card {
    padding: 16px !important;
  }

  .settings-company-card .settings-card-header {
    margin-bottom: 16px !important;
    gap: 12px !important;
  }

  .settings-company-card .settings-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 17px !important;
  }

  .settings-company-card .settings-card-title {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  .settings-company-card .settings-form-grid {
    gap: 12px !important;
  }

  .settings-company-card .settings-field label {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-bottom: 5px !important;
  }

  .settings-company-card .settings-input {
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .settings-company-card .settings-form-actions {
    margin-top: 16px !important;
  }

  .settings-company-card .settings-save-btn {
    min-height: 38px !important;
    padding: 9px 15px !important;
    font-size: 12.5px !important;
  }

  .settings-invite-button {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding-inline: 16px !important;
  }

  .support-phone-card.support-card {
    padding: 14px !important;
  }

  .support-phone-card .support-card-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .support-phone-card .support-title-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    font-size: 19px !important;
    flex: 0 0 36px !important;
  }

  .support-phone-card .support-card-title {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }

  .support-phone-card .support-card-subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .support-phone-card .support-sla-item {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 9px !important;
    padding: 10px 0 !important;
  }

  .support-phone-card .support-sla-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 15px !important;
  }

  .support-phone-card .support-sla-title {
    font-size: 13px !important;
    margin-bottom: 2px !important;
  }

  .support-phone-card .support-muted {
    font-size: 10.5px !important;
    line-height: 1.3 !important;
  }

  .support-phone-card .support-badge {
    grid-column: 2 !important;
    margin-top: 6px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .settings-toggle-row {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .settings-toggle-row .settings-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  .settings-toggle-row .settings-row-title {
    margin-bottom: 2px !important;
  }

  .settings-toggle-row > div:nth-child(3) {
    justify-self: end !important;
  }

  .settings-toggle-row > span {
    display: none !important;
  }

  .settings-security-row,
  .settings-export-row {
    justify-items: start !important;
  }

  .settings-security-row {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .settings-security-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  .settings-last-change {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .settings-security-row .settings-outline-btn,
  .settings-export-row .settings-outline-btn {
    width: fit-content !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding-inline: 16px !important;
  }

  .settings-security-row .settings-outline-btn {
    justify-self: end !important;
    white-space: nowrap !important;
  }

  .settings-export-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .settings-export-row .settings-outline-btn {
    justify-self: end !important;
    white-space: nowrap !important;
  }

  .automation-toolbar,
  .automation-toolbar-clean,
  .dashboard-table-header,
  .invoice-toolbar,
  .support-actions,
  .settings-password-actions,
  .automation-detail-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .automation-search,
  .automation-filter,
  .invoice-filter,
  .support-field,
  .settings-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  .automation-search input,
  .automation-filter select,
  .invoice-select,
  .support-input,
  .support-select,
  .support-textarea,
  .settings-input {
    width: 100% !important;
    min-width: 0 !important;
  }

  .dashboard-table-card::before,
  .automation-table-card::before,
  .invoice-card::before {
    display: block;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.18);
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
  }

  .dashboard-table-card::before {
    content: "Smartphone-Ansicht: Die Tabelle zeigt nur die wichtigsten Spalten.";
  }

  .automation-table-card::before {
    content: "Smartphone-Ansicht: Wegen der begrenzten Breite werden nur Kerninfos angezeigt. Alle Details siehst du im Browser am PC.";
  }

  .invoice-card::before {
    content: "Smartphone-Ansicht: Rechnungsdetails kannst du über Details öffnen.";
  }

  .dashboard-list-table,
  .automation-list-table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .dashboard-list-table th,
  .dashboard-list-table td,
  .automation-list-table th,
  .automation-list-table td {
    padding: 14px 10px !important;
    white-space: normal !important;
    vertical-align: top !important;
  }

  .dashboard-list-table th:nth-child(2),
  .dashboard-list-table td:nth-child(2),
  .dashboard-list-table th:nth-child(4),
  .dashboard-list-table td:nth-child(4),
  .dashboard-list-table th:nth-child(5),
  .dashboard-list-table td:nth-child(5),
  .dashboard-list-table th:nth-child(6),
  .dashboard-list-table td:nth-child(6) {
    display: none !important;
  }

  .dashboard-list-table th:nth-child(1),
  .dashboard-list-table td:nth-child(1) {
    width: 46% !important;
  }

  .dashboard-list-table th:nth-child(3),
  .dashboard-list-table td:nth-child(3) {
    width: 24% !important;
    text-align: left !important;
  }

  .dashboard-list-table th:nth-child(7),
  .dashboard-list-table td:nth-child(7) {
    width: 30% !important;
  }

  .dashboard-list-table .dashboard-flow-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .dashboard-list-table .dashboard-flow-description {
    display: none !important;
  }

  .dashboard-list-table .dashboard-status {
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .dashboard-list-table .dashboard-dot {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  .automation-main-table th:nth-child(2),
  .automation-main-table td:nth-child(2),
  .automation-main-table th:nth-child(3),
  .automation-main-table td:nth-child(3),
  .automation-main-table th:nth-child(5),
  .automation-main-table td:nth-child(5),
  .automation-main-table th:nth-child(7),
  .automation-main-table td:nth-child(7) {
    display: none !important;
  }

  .automation-main-table th:nth-child(1),
  .automation-main-table td:nth-child(1) {
    width: 52% !important;
  }

  .automation-main-table th:nth-child(4),
  .automation-main-table td:nth-child(4),
  .automation-main-table th:nth-child(6),
  .automation-main-table td:nth-child(6) {
    width: 24% !important;
  }

  .automation-main-table th:nth-child(6),
  .automation-main-table td:nth-child(6) {
    display: table-cell !important;
  }

  .automation-runs-table th:nth-child(3),
  .automation-runs-table td:nth-child(3),
  .automation-runs-table th:nth-child(4),
  .automation-runs-table td:nth-child(4) {
    display: none !important;
  }

  .automation-runs-table th:nth-child(1),
  .automation-runs-table td:nth-child(1) {
    width: 44% !important;
  }

  .automation-runs-table th:nth-child(2),
  .automation-runs-table td:nth-child(2) {
    display: table-cell !important;
    width: 24% !important;
  }

  .automation-runs-table th:nth-child(5),
  .automation-runs-table td:nth-child(5) {
    display: table-cell !important;
    width: 32% !important;
  }

  .automation-info,
  .automation-trigger,
  .dashboard-status {
    align-items: flex-start !important;
  }

  .support-ticket-state {
    align-items: center !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .automation-app-icon,
  .automation-trigger-icon {
    display: none !important;
  }

  .automation-title,
  .dashboard-flow-title,
  .support-ticket-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .automation-desc,
  .dashboard-flow-description,
  .contract-muted,
  .support-muted,
  .settings-row-text {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .automation-main-table .automation-desc {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .invoice-list-header {
    display: none !important;
  }

  .invoice-row {
    grid-template-columns: 36px 1fr !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }

  .invoice-row .invoice-table-cell,
  .invoice-row > div:nth-child(5) {
    grid-column: 2 !important;
  }

  .invoice-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .invoice-action {
    width: 100% !important;
    justify-content: center !important;
  }

  .automation-detail-backdrop,
  .support-ticket-detail-backdrop,
  .invoice-detail-backdrop {
    align-items: stretch !important;
  }

  .automation-detail-panel,
  .support-ticket-detail.open,
  .invoice-detail-drawer {
    inset: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    border-radius: 0 !important;
    padding: 18px !important;
    overflow-y: auto !important;
  }

  .automation-detail-grid,
  .support-ticket-detail-controls,
  .invoice-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .support-ticket-detail-actions {
    grid-template-columns: 1fr !important;
  }

  .support-ticket-close-bottom {
    margin-right: 0 !important;
    order: 3 !important;
  }

  .portal-toast-container {
    top: 72px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  .contract-package-overview.contract-card {
    padding: 16px !important;
  }

  .contract-package-overview .contract-package-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .contract-package-overview .contract-package-kpi {
    min-height: 0 !important;
    padding: 12px 13px !important;
    border-radius: 8px !important;
  }

  .contract-package-overview .contract-package-title {
    font-size: 27px !important;
  }

  .contract-grid {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .contract-grid > .contract-card,
  .billing-card {
    padding: 16px !important;
  }

  .contract-card-header {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .contract-card-header h3 {
    font-size: 17px !important;
  }

  .contract-title-icon {
    font-size: 21px !important;
  }

  .contract-label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .contract-value-large {
    font-size: 24px !important;
  }

  .contract-value,
  .contract-term-date {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  .contract-muted,
  .contract-term-note {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .contract-separator {
    margin: 16px 0 !important;
  }

  .contract-info-row,
  .billing-item {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px 0 !important;
  }

  .contract-compact-row {
    padding: 10px 0 !important;
  }

  .contract-number-row {
    margin-top: 16px !important;
  }

  .contract-customer-row {
    margin-bottom: 16px !important;
  }

  .contract-round-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  .contract-upgrade-slot {
    margin-top: 16px !important;
  }

  .contract-package-upgrade-action {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .billing-grid {
    gap: 0 !important;
    margin-top: 14px !important;
  }

  .billing-item {
    border-right: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  }
}

@media (max-width: 430px) {
  .content-wrapper,
  .settings-content-wrapper,
  .support-content-wrapper,
  .contract-content-wrapper,
  .automation-content-wrapper,
  .dashboard-content-wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dashboard-page-header h1,
  .automations-page-header h1,
  .automation-page-header h1,
  .support-page-header h1,
  .contract-page-header h1,
  .settings-page-header h1 {
    font-size: 24px !important;
  }

  .dashboard-overview-value,
  .contract-package-title,
  .contract-value,
  .settings-password-value {
    font-size: 22px !important;
  }

  .dashboard-list-table th,
  .dashboard-list-table td,
  .automation-list-table th,
  .automation-list-table td {
    padding: 12px 8px !important;
    font-size: 12px !important;
  }
}

/* Harmonize the most visible portal pages so they feel like one system */
@media (min-width: 992px) {
  .dashboard-page-header h1,
  .automations-page-header h1,
  .automation-page-header h1,
  .support-page-header h1,
  .contract-page-header h1,
  .settings-page-header h1 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em;
  }

  .dashboard-page-header p,
  .automations-page-header p,
  .automation-page-header p,
  .support-page-header p,
  .contract-page-header p,
  .settings-page-header p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .dashboard-stats-grid,
  .automation-stats-grid,
  .dashboard-main-grid,
  .dashboard-secondary-grid,
  .support-grid,
  .contract-grid {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }

  .dashboard-stat-card,
  .automation-stat-card,
  .dashboard-info-card,
  .dashboard-table-card,
  .support-card,
  .contract-card,
  .settings-card,
  .automation-table-card {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  .dashboard-stat-icon,
  .automation-stat-icon,
  .support-title-icon,
  .contract-title-icon,
  .settings-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .dashboard-stat-number,
  .automation-stat-number,
  .support-phone-number,
  .contract-value-large {
    font-size: 28px !important;
  }

  .dashboard-stat-label,
  .automation-stat-label,
  .automation-stat-sub,
  .support-card-subtitle,
  .contract-label,
  .contract-muted,
  .contract-term-note,
  .settings-card-subtitle,
  .automation-credit-note {
    font-size: 14px !important;
  }

  .support-card-header,
  .contract-card-header,
  .settings-card-header {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .support-card-title,
  .contract-card-header h3,
  .settings-card-title {
    font-size: 17px !important;
  }

  .automation-detail-panel {
    width: min(620px, 100%) !important;
    padding: 20px !important;
  }

  .automation-detail-header {
    gap: 16px !important;
    margin-bottom: 18px !important;
  }

  .automation-detail-header h2 {
    font-size: 24px !important;
  }

  .automation-detail-grid {
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .automation-detail-metric,
  .automation-detail-section {
    padding: 12px !important;
  }

  .automation-config-header {
    padding: 12px 12px 10px !important;
  }

  .automation-config-form {
    padding: 14px !important;
  }

  .automation-config-fields {
    gap: 14px !important;
  }

  .automation-config-group {
    gap: 12px !important;
    padding: 14px !important;
  }
}