/*---------------------------------------------------------------
  MacySoftCoreBaseLayout.css
---------------------------------------------------------------
  Copyright (C) 2000 - 2025 Macy-Soft GmbH
  http://www.macy-soft.com

  MacySoftCoreBaseLayout – Cyan Enterprise Theme
  Basiert auf SideMenuLayout.css (bestehende Basis bleibt unverändert)
---------------------------------------------------------------*/

/* ============================================================
   CSS CUSTOM PROPERTIES – Cyan Theme
   ============================================================ */
:root,
[data-theme="cyan"] {
  --ms-cyan-primary:       #00AEEF;
  --ms-cyan-secondary:     #1e40af;
  --ms-cyan-accent:        #4FD1FF;
  --ms-cyan-glow:          0 0 10px rgba(0, 174, 239, 0.55),
                            0 0 24px rgba(79, 209, 255, 0.30);

  /* Sidebar */
  --ms-sidebar-bg:         #0d1117;
  --ms-sidebar-border:     rgba(0, 174, 239, 0.12);
  --ms-sidebar-text:       #c9d1d9;
  --ms-sidebar-text-muted: #8b949e;
  --ms-sidebar-hover-bg:   rgba(0, 174, 239, 0.08);
  --ms-sidebar-active-bg:  rgba(0, 174, 239, 0.15);
  --ms-sidebar-active-text:#00AEEF;
  --ms-sidebar-width:      260px;
  --ms-sidebar-collapsed:  64px;

  /* Topbar */
  --ms-topbar-bg:          #161b22;
  --ms-topbar-border:      rgba(0, 174, 239, 0.15);
  --ms-topbar-text:        #e6edf3;
  --ms-topbar-height:      72px;

  /* Content */
  --ms-content-bg:         #0d1117;
  --ms-content-card-bg:    #161b22;
  --ms-content-card-border:rgba(0, 174, 239, 0.10);

  /* Footer */
  --ms-footer-bg:          #0d1117;
  --ms-footer-border:      rgba(0, 174, 239, 0.10);
  --ms-footer-text:        #8b949e;

  /* Tenant Badge */
  --ms-badge-bg:           rgba(0, 174, 239, 0.12);
  --ms-badge-text:         #00AEEF;
  --ms-badge-border:       rgba(0, 174, 239, 0.30);

  /* Transitions */
  --ms-transition-speed:   0.22s;
  --ms-transition-fn:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
[data-theme="dark"],
[data-theme="cyan"][data-mode="dark"] {
  --ms-sidebar-bg:         #060a0f;
  --ms-topbar-bg:          #0d1117;
  --ms-content-bg:         #060a0f;
  --ms-content-card-bg:    #0d1117;
}

/* ============================================================
   BODY / WRAPPER
   ============================================================ */
body.cyan-theme {
  background-color: var(--ms-content-bg);
  color: var(--ms-topbar-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Basis-CSS-Variablen überschreiben damit alle abhängigen Regeln stimmen */
body.cyan-theme {
  --sidebar-width:           var(--ms-sidebar-width);
  --sidebar-collapsed-width: var(--ms-sidebar-collapsed);
  --header-height:           var(--ms-topbar-height);
  --sidebar-bg:              var(--ms-sidebar-bg);
  --sidebar-hover:           var(--ms-sidebar-hover-bg);
  --sidebar-active:          var(--ms-sidebar-active-bg);
  --bg-white:                var(--ms-topbar-bg);
  --bg-light:                var(--ms-content-bg);
  --primary-color:           var(--ms-topbar-text);   /* page-title + footer-bg */
  --secondary-color:         var(--ms-cyan-primary);  /* footer-links h3 */
  --text-primary:            var(--ms-topbar-text);
}

/* ============================================================
   SIDEBAR – Cyan Overrides
   ============================================================ */
.cyan-sidebar {
  background-color: var(--ms-sidebar-bg);
  border-right: 1px solid var(--ms-sidebar-border);
  width: var(--ms-sidebar-width);
  transition: width var(--ms-transition-speed) var(--ms-transition-fn);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Sidebar Header: Logo + Toggle korrekt ausrichten --- */
.cyan-sidebar .sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 72px;
  min-height: 72px;
  border-bottom: 1px solid var(--ms-sidebar-border);
  gap: 8px;
  overflow: hidden;
}

/* Logo-Link: Breite beschränken damit Toggle immer sichtbar bleibt */
.cyan-sidebar .sidebar-header .logo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.cyan-sidebar .sidebar-header .logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  overflow: hidden;
}

/* Logo-SVG: Hintergrund transparent, skaliert korrekt */
.cyan-sidebar .sidebar-header .logo img {
  height: 58px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.05) contrast(1.0);
  flex-shrink: 0;
}

/* --- Collapsed State --- */
.layout-wrapper.sidebar-collapsed .cyan-sidebar {
  width: var(--ms-sidebar-collapsed);
}

/* Im collapsed State: Logo ausblenden, Toggle zentrieren */
.layout-wrapper.sidebar-collapsed .cyan-sidebar .sidebar-header .logo {
  width: 0;
  flex: 0;
  overflow: hidden;
}

.layout-wrapper.sidebar-collapsed .cyan-sidebar .nav-text,
.layout-wrapper.sidebar-collapsed .cyan-sidebar .nav-arrow,
.layout-wrapper.sidebar-collapsed .cyan-sidebar .logo-text,
.layout-wrapper.sidebar-collapsed .cyan-sidebar .sidebar-footer .nav-text {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  transition: opacity var(--ms-transition-speed) var(--ms-transition-fn),
              width var(--ms-transition-speed) var(--ms-transition-fn);
}

.layout-wrapper:not(.sidebar-collapsed) .cyan-sidebar .nav-text,
.layout-wrapper:not(.sidebar-collapsed) .cyan-sidebar .logo-text {
  opacity: 1;
  width: auto;
}

/* Basis-CSS: .sidebar.collapsed → .main-wrapper; wir brauchen layout-wrapper-Variante */
.layout-wrapper.sidebar-collapsed .main-wrapper {
  margin-left: var(--ms-sidebar-collapsed) !important;
  width: calc(100% - var(--ms-sidebar-collapsed)) !important;
}

/* --- Sidebar Toggle Button --- */
.cyan-sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--ms-sidebar-text-muted);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: color var(--ms-transition-speed),
              background var(--ms-transition-speed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.cyan-sidebar-toggle:hover {
  color: var(--ms-cyan-primary);
  background: var(--ms-sidebar-hover-bg);
}

/* --- Logo Icon Fallback --- */
.cyan-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ms-cyan-primary), var(--ms-cyan-secondary));
  box-shadow: var(--ms-cyan-glow);
  flex-shrink: 0;
}

/* --- Nav Links --- */
.cyan-sidebar .nav-link {
  color: var(--ms-sidebar-text);
  border-radius: 8px;
  margin: 2px 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  position: relative;
  transition: background var(--ms-transition-speed) var(--ms-transition-fn),
              color var(--ms-transition-speed) var(--ms-transition-fn),
              box-shadow var(--ms-transition-speed) var(--ms-transition-fn);
  white-space: nowrap;
  overflow: hidden;
}

.cyan-sidebar .nav-link:hover {
  background: var(--ms-sidebar-hover-bg);
  color: var(--ms-cyan-accent);
  box-shadow: var(--ms-cyan-glow);
}

/* --- Active Navigation Indicator --- */
.cyan-sidebar .nav-link.active,
.cyan-sidebar .nav-link.nav-link--active {
  background: var(--ms-sidebar-active-bg);
  color: var(--ms-sidebar-active-text);
  font-weight: 600;
}

.cyan-sidebar .nav-link.active .nav-active-indicator,
.cyan-sidebar .nav-link.nav-link--active .nav-active-indicator {
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 3px 0 0 3px;
  background: var(--ms-cyan-primary);
  box-shadow: 0 0 8px var(--ms-cyan-primary);
}

.nav-active-indicator {
  display: none;
}

/* --- Submenu --- */
.cyan-sidebar .nav-submenu .nav-link {
  padding-left: 40px;
  font-size: 0.88rem;
}

/* --- Nav Icon --- */
.cyan-sidebar .nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--ms-sidebar-text-muted);
  transition: color var(--ms-transition-speed);
}

.cyan-sidebar .nav-link:hover .nav-icon,
.cyan-sidebar .nav-link.active .nav-icon {
  color: var(--ms-cyan-primary);
}

/* --- Sidebar Footer --- */
.cyan-sidebar .sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--ms-sidebar-border);
  padding: 8px 0;
}

/* ============================================================
   MAIN WRAPPER – Expand alongside sidebar
   ============================================================ */
.main-wrapper {
  margin-left: var(--ms-sidebar-width);
  width: calc(100% - var(--ms-sidebar-width));
  transition: margin-left var(--ms-transition-speed) var(--ms-transition-fn),
              width var(--ms-transition-speed) var(--ms-transition-fn);
}

/* ============================================================
   TOPBAR – Cyan
   ============================================================ */
.cyan-topbar {
  background-color: var(--ms-topbar-bg) !important;
  border-bottom: 1px solid var(--ms-topbar-border);
  height: var(--ms-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 var(--ms-topbar-border);
}

/* Page Title – explizit hell (Basis-CSS setzt dunkle Farbe) */
.cyan-topbar .page-title,
.cyan-topbar h1.page-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ms-topbar-text) !important;
  margin: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-title-area {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Breadcrumb */
.cyan-breadcrumb {
  font-size: 0.78rem;
  color: var(--ms-sidebar-text-muted);
}

/* Header Left */
.cyan-topbar .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

/* Header Right – alle Elemente vertikal zentriert */
.cyan-topbar .header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* User info wrapper – Höhe fixieren damit Login-Partial nicht bricht */
.cyan-topbar .user-info {
  display: flex;
  align-items: center;
  min-height: 34px;
}

/* --- Tenant Badge --- */
.cyan-tenant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ms-badge-bg);
  color: var(--ms-badge-text);
  border: 1px solid var(--ms-badge-border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}

/* --- Dark Mode Toggle Button --- */
.cyan-darkmode-toggle {
  background: transparent;
  border: 1px solid var(--ms-topbar-border);
  color: var(--ms-sidebar-text-muted);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--ms-transition-speed),
              border-color var(--ms-transition-speed),
              box-shadow var(--ms-transition-speed);
}

.cyan-darkmode-toggle:hover {
  color: var(--ms-cyan-primary);
  border-color: var(--ms-cyan-primary);
  box-shadow: 0 0 8px rgba(0, 174, 239, 0.40);
}

/* ============================================================
   CONTENT AREA
   ============================================================ */
.cyan-content {
  background-color: var(--ms-content-bg);
  min-height: calc(100vh - var(--ms-topbar-height));
}

.cyan-content-inner {
  padding: 24px;
}

/* Card-basierter Aufbau: Views können .cyan-card nutzen */
.cyan-card {
  background: var(--ms-content-card-bg);
  border: 1px solid var(--ms-content-card-border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  transition: border-color var(--ms-transition-speed),
              box-shadow var(--ms-transition-speed);
}

.cyan-card:hover {
  border-color: rgba(0, 174, 239, 0.25);
  box-shadow: 0 0 0 1px rgba(0, 174, 239, 0.12),
              0 4px 16px rgba(0, 0, 0, 0.25);
}

.cyan-card__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ms-topbar-text);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ms-content-card-border);
}

/* ============================================================
   FOOTER
   ============================================================ */
.cyan-footer {
  background-color: var(--ms-footer-bg);
  border-top: 1px solid var(--ms-footer-border);
  color: var(--ms-footer-text);
}

.cyan-footer a {
  color: var(--ms-footer-text);
  transition: color var(--ms-transition-speed);
}

.cyan-footer a:hover {
  color: var(--ms-cyan-primary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .cyan-tenant-badge span {
    display: none;
  }
}

@media (max-width: 768px) {
  .cyan-tenant-badge {
    display: none;
  }

  .cyan-topbar .page-title {
    font-size: 0.9rem;
  }

  .cyan-content-inner {
    padding: 16px;
  }

  /* Sidebar auf Mobile ausblenden */
  .cyan-sidebar,
  .sidebar.cyan-sidebar {
    transform: translateX(-100%);
    position: fixed;
    z-index: 1050;
    transition: transform 0.3s ease;
  }

  /* Sidebar via mobile-open Klasse einblenden */
  .cyan-sidebar.mobile-open,
  .sidebar.cyan-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Main-Wrapper auf volle Breite, kein margin-left */
  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Sidebar beim Collapse ebenfalls korrigieren */
  .layout-wrapper.sidebar-collapsed .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Mobile-Toggle Button sichtbar machen */
  .mobile-toggle {
    display: flex !important;
  }

  /* Sidebar-Toggle (Desktop) ausblenden */
  .cyan-sidebar-toggle {
    display: none;
  }
}

/* ============================================================
   DARK MODE (data-theme="dark" auf html-Element)
   ============================================================ */
[data-theme="dark"] body.cyan-theme,
body.cyan-theme[data-mode="dark"] {
  background-color: var(--ms-content-bg);
}

[data-theme="dark"] .cyan-sidebar,
body.cyan-theme[data-mode="dark"] .cyan-sidebar {
  background-color: #060a0f;
}

[data-theme="dark"] .cyan-topbar,
body.cyan-theme[data-mode="dark"] .cyan-topbar {
  background-color: #0d1117;
}

[data-theme="dark"] .cyan-content,
body.cyan-theme[data-mode="dark"] .cyan-content {
  background-color: #060a0f;
}

[data-theme="dark"] #darkModeIcon,
body.cyan-theme[data-mode="dark"] #darkModeIcon {
  content: "\f185"; /* fa-sun – via JS gesteuert */
}

/* ============================================================
   TOPBAR LAYOUT FIX
   Verhindert Zeilenumbruch – alle Elemente in einer Zeile
   ============================================================ */

/* Topbar selbst: immer einzeilig, feste Höhe */
.cyan-topbar {
  flex-wrap: nowrap !important;
  height: var(--ms-topbar-height) !important;
  min-height: var(--ms-topbar-height) !important;
  max-height: var(--ms-topbar-height) !important;
  overflow: hidden;
}

/* header-left: nimmt verfügbaren Platz, kein Umbruch */
.cyan-topbar .header-left {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* header-right: immer rechtsbündig, kein Schrumpfen, kein Umbruch */
.cyan-topbar .header-right {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow: visible;
}

/* nav-menu-auth (<ul> aus _LoginPartial): horizontal darstellen */
.cyan-topbar .nav-menu-auth {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.cyan-topbar .nav-menu-auth .nav-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Nav-Links in der Topbar: passende Farben + Höhe */
.cyan-topbar .nav-menu-auth .nav-link {
  color: var(--ms-topbar-text) !important;
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.83rem;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--ms-transition-speed), background var(--ms-transition-speed);
}

.cyan-topbar .nav-menu-auth .nav-link:hover {
  color: var(--ms-cyan-primary) !important;
  background: var(--ms-sidebar-hover-bg);
}

/* Abmelden-Button: als Kendo-ähnlicher Button */
.cyan-topbar .nav-menu-auth .btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(0, 174, 239, 0.25);
  color: var(--ms-topbar-text);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.83rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--ms-transition-speed),
              border-color var(--ms-transition-speed),
              background var(--ms-transition-speed);
}

.cyan-topbar .nav-menu-auth .btn-logout:hover {
  color: var(--ms-cyan-primary);
  border-color: var(--ms-cyan-primary);
  background: var(--ms-sidebar-hover-bg);
}

/* form-inline innerhalb nav-item: kein Block */
.cyan-topbar .nav-menu-auth .form-inline {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Mandant-Dropdown (_SwitchMandantPartial): kompakt + passende Farben */
.cyan-topbar .nav-menu-auth .nav-item .mandant-label,
.cyan-topbar [class*="mandant"],
.cyan-topbar [class*="switch-mandant"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--ms-topbar-text);
  font-size: 0.83rem;
}

/* Select / Dropdown im Header */
.cyan-topbar select,
.cyan-topbar .k-dropdownlist,
.cyan-topbar .k-picker {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 0.83rem !important;
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: rgba(0, 174, 239, 0.25) !important;
  border-radius: 6px !important;
}

/* Page Title: nicht umbrechen, Overflow mit Ellipsis */
.cyan-topbar h1.page-title,
.cyan-topbar .page-title {
  color: var(--ms-topbar-text) !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

/* ============================================================
   KENDO GRID – Dark Theme Overrides
   Bringt alle Grid-Komponenten auf das Cyan-Dark Design
   ============================================================ */

/* --- Grid Container & Borders --- */
body.cyan-theme .k-grid {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
  border-radius: 8px;
  overflow: hidden;
}

/* Grid Content-Bereiche (tbody, table, scroll-container) */
body.cyan-theme .k-grid-content,
body.cyan-theme .k-grid-content-locked,
body.cyan-theme .k-grid-footer,
body.cyan-theme .k-grid-footer-wrap,
body.cyan-theme .k-grid table,
body.cyan-theme .k-grid .k-table,
body.cyan-theme .k-grid tbody,
body.cyan-theme .k-grid .k-table-tbody {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
}

/* Jede Tabellenzeile (tr / k-table-row) – auch leer */
body.cyan-theme .k-grid tr,
body.cyan-theme .k-grid .k-table-row {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
}

/* Kendo setzt auf .k-table-row auch direkt background – überschreiben */
body.cyan-theme .k-grid .k-table-row.k-table-alt-row {
  background-color: #1a2233 !important;
}
body.cyan-theme .k-grid .k-table-row:not(.k-table-alt-row) {
  background-color: var(--ms-content-card-bg) !important;
}

/* --- Grid Header --- */
body.cyan-theme .k-grid-header,
body.cyan-theme .k-grid-header-wrap,
body.cyan-theme .k-grid .k-table-thead,
body.cyan-theme .k-grid .k-grid-header table {
  background-color: #1c2433 !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-grid th,
body.cyan-theme .k-grid .k-header,
body.cyan-theme .k-grid .k-table-th {
  background-color: #1c2433 !important;
  color: #a0b3c6 !important;
  border-color: var(--ms-content-card-border) !important;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Header Hover (Sortier-Icon) */
body.cyan-theme .k-grid th:hover,
body.cyan-theme .k-grid .k-header:hover {
  background-color: rgba(0, 174, 239, 0.08) !important;
  color: var(--ms-cyan-primary) !important;
}

/* Aktiv-Sortierung */
body.cyan-theme .k-grid .k-sorted,
body.cyan-theme .k-grid .k-header.k-sorted {
  background-color: rgba(0, 174, 239, 0.12) !important;
  color: var(--ms-cyan-primary) !important;
}

body.cyan-theme .k-grid .k-sort-icon,
body.cyan-theme .k-grid .k-sort-order {
  color: var(--ms-cyan-primary) !important;
}

/* --- Grid Rows --- */
body.cyan-theme .k-grid td,
body.cyan-theme .k-grid .k-table-td,
body.cyan-theme .k-grid .k-table-row > td {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
  font-size: 0.84rem;
}

/* Zebra-Streifen – ungerade Zeilen etwas heller */
body.cyan-theme .k-grid .k-table-alt-row,
body.cyan-theme .k-grid .k-alt,
body.cyan-theme .k-grid tr.k-alt {
  background-color: #1a2233 !important;
}
body.cyan-theme .k-grid .k-table-alt-row td,
body.cyan-theme .k-grid .k-alt td,
body.cyan-theme .k-grid tr.k-alt td,
body.cyan-theme .k-grid .k-table-alt-row .k-table-td {
  background-color: #1a2233 !important;
}

/* Hover */
body.cyan-theme .k-grid tr:hover td,
body.cyan-theme .k-grid .k-table-row:hover td,
body.cyan-theme .k-grid .k-hover td {
  background-color: rgba(0, 174, 239, 0.07) !important;
  color: var(--ms-topbar-text) !important;
}

/* Selektiert */
body.cyan-theme .k-grid tr.k-selected td,
body.cyan-theme .k-grid .k-table-row.k-selected td,
body.cyan-theme .k-grid .k-state-selected td {
  background-color: rgba(0, 174, 239, 0.18) !important;
  color: #ffffff !important;
}

/* --- Grid Toolbar --- */
body.cyan-theme .k-grid .k-toolbar,
body.cyan-theme .k-grid-toolbar {
  background-color: #161e2d !important;
  border-color: var(--ms-content-card-border) !important;
  color: var(--ms-topbar-text) !important;
  padding: 6px 10px;
}

/* --- Grid Pager --- */
body.cyan-theme .k-grid .k-pager,
body.cyan-theme .k-pager-wrap,
body.cyan-theme .k-grid-pager {
  background-color: #1c2433 !important;
  color: var(--ms-sidebar-text-muted) !important;
  border-color: var(--ms-content-card-border) !important;
  border-top: 1px solid var(--ms-content-card-border) !important;
}

body.cyan-theme .k-pager .k-link,
body.cyan-theme .k-pager-wrap .k-link,
body.cyan-theme .k-grid-pager .k-link,
body.cyan-theme .k-pager .k-button {
  color: var(--ms-topbar-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 4px;
}

body.cyan-theme .k-pager .k-link:hover,
body.cyan-theme .k-pager-wrap .k-link:hover,
body.cyan-theme .k-pager .k-button:hover {
  background-color: var(--ms-sidebar-hover-bg) !important;
  color: var(--ms-cyan-primary) !important;
}

body.cyan-theme .k-pager .k-selected,
body.cyan-theme .k-pager-wrap .k-selected,
body.cyan-theme .k-pager .k-state-selected {
  background-color: var(--ms-cyan-primary) !important;
  color: #000 !important;
  border-color: var(--ms-cyan-primary) !important;
  border-radius: 4px;
}

/* Seiten-Info Text */
body.cyan-theme .k-pager-info,
body.cyan-theme .k-pager .k-pager-info {
  color: var(--ms-sidebar-text-muted) !important;
  font-size: 0.8rem;
}

/* --- Grid Filterrow --- */
body.cyan-theme .k-grid .k-filtercell,
body.cyan-theme .k-grid .k-filter-row td {
  background-color: #131c29 !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-grid .k-filtercell input,
body.cyan-theme .k-grid .k-filter-row input {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: rgba(0, 174, 239, 0.2) !important;
  border-radius: 4px;
}

/* --- Grid Column Menu / Filter-Popup --- */
body.cyan-theme .k-columnmenu-item,
body.cyan-theme .k-column-menu,
body.cyan-theme .k-filter-menu {
  background-color: #1c2433 !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-columnmenu-item:hover,
body.cyan-theme .k-column-menu .k-item:hover {
  background-color: var(--ms-sidebar-hover-bg) !important;
  color: var(--ms-cyan-primary) !important;
}

/* --- Kendo Inputs (TextBox, ComboBox, DatePicker) allgemein --- */
body.cyan-theme .k-input,
body.cyan-theme .k-picker,
body.cyan-theme .k-textbox,
body.cyan-theme .k-combobox .k-input,
body.cyan-theme .k-dateinput .k-input {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: rgba(0, 174, 239, 0.2) !important;
}

body.cyan-theme .k-input:focus,
body.cyan-theme .k-picker:focus,
body.cyan-theme .k-input.k-focus,
body.cyan-theme .k-picker.k-focus {
  border-color: var(--ms-cyan-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.20) !important;
}

/* --- Kendo Buttons (Grid Toolbar) --- */
body.cyan-theme .k-button-solid-primary {
  background-color: var(--ms-cyan-primary) !important;
  border-color: var(--ms-cyan-primary) !important;
  color: #000 !important;
}

body.cyan-theme .k-button-solid-primary:hover {
  background-color: #0096cc !important;
  border-color: #0096cc !important;
}

body.cyan-theme .k-button-solid-base,
body.cyan-theme .k-grid .k-button {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(0, 174, 239, 0.2) !important;
  color: var(--ms-topbar-text) !important;
  border-radius: 5px;
}

body.cyan-theme .k-button-solid-base:hover,
body.cyan-theme .k-grid .k-button:hover {
  background-color: rgba(0, 174, 239, 0.12) !important;
  border-color: var(--ms-cyan-primary) !important;
  color: var(--ms-cyan-primary) !important;
}

/* --- Kendo Dropdown / Popup --- */
body.cyan-theme .k-popup,
body.cyan-theme .k-list-container,
body.cyan-theme .k-list-ul {
  background-color: #1c2433 !important;
  border-color: var(--ms-content-card-border) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .k-list .k-list-item:hover,
body.cyan-theme .k-popup .k-item:hover {
  background-color: var(--ms-sidebar-hover-bg) !important;
  color: var(--ms-cyan-primary) !important;
}

body.cyan-theme .k-list .k-list-item.k-selected,
body.cyan-theme .k-popup .k-state-selected {
  background-color: rgba(0, 174, 239, 0.18) !important;
  color: var(--ms-cyan-primary) !important;
}

/* --- Kendo Grouping Header (Drop-Zone oben: "Ziehen Sie eine Spalte...") --- */
body.cyan-theme .k-grouping-header,
body.cyan-theme .k-grid .k-grouping-header,
body.cyan-theme .k-grouping-header .k-group-indicator {
  background-color: #0f1923 !important;
  color: #6a8099 !important;
  border-bottom-color: var(--ms-content-card-border) !important;
  font-size: 0.8rem;
}

body.cyan-theme .k-grouping-header .k-button,
body.cyan-theme .k-grouping-header .k-group-indicator .k-button {
  background-color: rgba(0, 174, 239, 0.1) !important;
  border-color: rgba(0, 174, 239, 0.25) !important;
  color: var(--ms-cyan-primary) !important;
}

body.cyan-theme .k-grouping-header .k-group-indicator {
  background-color: rgba(0, 174, 239, 0.12) !important;
  border-color: rgba(0, 174, 239, 0.30) !important;
  color: var(--ms-cyan-primary) !important;
  border-radius: 4px;
}

/* --- Kendo Group Header (Grouping Row) --- */
body.cyan-theme .k-grid .k-grouping-row,
body.cyan-theme .k-grid .k-grouping-row td,
body.cyan-theme .k-grid .k-group-cell {
  background-color: #131c29 !important;
  color: var(--ms-cyan-accent) !important;
  font-weight: 600;
  border-color: var(--ms-content-card-border) !important;
}

/* Group Footer */
body.cyan-theme .k-grid .k-group-footer td,
body.cyan-theme .k-grid .k-group-footer {
  background-color: #131c29 !important;
  color: #8b949e !important;
  border-color: var(--ms-content-card-border) !important;
}

/* Detail/Hierarchy Row */
body.cyan-theme .k-grid .k-detail-row td,
body.cyan-theme .k-grid .k-detail-row,
body.cyan-theme .k-grid .k-hierarchy-cell,
body.cyan-theme .k-grid .k-master-row td {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
}

/* --- Scrollbar im Grid --- */
body.cyan-theme .k-grid-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

body.cyan-theme .k-grid-content::-webkit-scrollbar-track {
  background: var(--ms-content-card-bg);
}

body.cyan-theme .k-grid-content::-webkit-scrollbar-thumb {
  background: rgba(0, 174, 239, 0.3);
  border-radius: 3px;
}

body.cyan-theme .k-grid-content::-webkit-scrollbar-thumb:hover {
  background: var(--ms-cyan-primary);
}

/* --- Kendo Notification / Loading Overlay --- */
body.cyan-theme .k-loading-mask .k-loading-image {
  background-color: transparent;
}

body.cyan-theme .k-loading-mask .k-loading-color {
  background-color: rgba(13, 17, 23, 0.6) !important;
}

/* --- Grid: Cyan Akzent-Linie oben (optional, Enterprise-Look) --- */
body.cyan-theme .k-grid {
  box-shadow: 0 0 0 1px var(--ms-content-card-border),
              0 4px 16px rgba(0, 0, 0, 0.3);
}


/* ============================================================
   FORM & DIALOG OVERRIDES – Cyan Theme
   ============================================================ */

/* --- Allgemeiner Content-Hintergrund --- */
body.cyan-theme .cyan-content,
body.cyan-theme .main-content,
body.cyan-theme .cyan-content-inner {
  background-color: var(--ms-content-bg) !important;
  color: var(--ms-topbar-text) !important;
}

/* --- Bootstrap Cards --- */
body.cyan-theme .card {
  background-color: var(--ms-content-card-bg) !important;
  border-color: var(--ms-content-card-border) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .card-header,
body.cyan-theme .card-footer {
  background-color: rgba(0, 174, 239, 0.06) !important;
  border-color: var(--ms-content-card-border) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .card-body {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
}

/* --- HTML Inputs & Textareas --- */
body.cyan-theme input[type="text"],
body.cyan-theme input[type="email"],
body.cyan-theme input[type="password"],
body.cyan-theme input[type="number"],
body.cyan-theme input[type="search"],
body.cyan-theme input[type="url"],
body.cyan-theme input[type="tel"],
body.cyan-theme input[type="date"],
body.cyan-theme input[type="datetime-local"],
body.cyan-theme textarea,
body.cyan-theme select {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border: 1px solid rgba(0, 174, 239, 0.20) !important;
  border-radius: 5px;
}

body.cyan-theme input[type="text"]:focus,
body.cyan-theme input[type="email"]:focus,
body.cyan-theme input[type="number"]:focus,
body.cyan-theme textarea:focus,
body.cyan-theme select:focus {
  border-color: var(--ms-cyan-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.18) !important;
  outline: none;
}

body.cyan-theme input[readonly],
body.cyan-theme input[disabled],
body.cyan-theme textarea[readonly],
body.cyan-theme textarea[disabled] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #8b949e !important;
  border-color: rgba(0, 174, 239, 0.10) !important;
}

/* --- Bootstrap form-control --- */
body.cyan-theme .form-control,
body.cyan-theme .form-select {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: rgba(0, 174, 239, 0.20) !important;
}

body.cyan-theme .form-control:focus,
body.cyan-theme .form-select:focus {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-cyan-primary) !important;
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.18) !important;
}

body.cyan-theme .form-control[readonly],
body.cyan-theme .form-control:disabled {
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: #8b949e !important;
}

/* --- Labels --- */
body.cyan-theme label,
body.cyan-theme .form-label,
body.cyan-theme .col-form-label {
  color: #a0b8cc !important;
}

/* --- Bootstrap table in forms/dialogs --- */
body.cyan-theme table:not(.k-table) {
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme table:not(.k-table) th {
  background-color: #1c2433 !important;
  color: #a0b3c6 !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme table:not(.k-table) td {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme table:not(.k-table) tr:nth-child(even) td {
  background-color: #1a2233 !important;
}

/* --- Bootstrap Buttons --- */
body.cyan-theme .btn-primary {
  background-color: var(--ms-cyan-primary) !important;
  border-color: var(--ms-cyan-primary) !important;
  color: #000 !important;
}

body.cyan-theme .btn-secondary,
body.cyan-theme .btn-default {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(0, 174, 239, 0.25) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .btn-secondary:hover,
body.cyan-theme .btn-default:hover {
  background-color: rgba(0, 174, 239, 0.12) !important;
  border-color: var(--ms-cyan-primary) !important;
  color: var(--ms-cyan-primary) !important;
}

/* --- Kendo Window / Dialog --- */
body.cyan-theme .k-window,
body.cyan-theme .k-dialog {
  background-color: var(--ms-content-card-bg) !important;
  border-color: var(--ms-content-card-border) !important;
  color: var(--ms-topbar-text) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.cyan-theme .k-window-titlebar,
body.cyan-theme .k-dialog-titlebar {
  background-color: #1c2433 !important;
  color: var(--ms-topbar-text) !important;
  border-bottom-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-window-content,
body.cyan-theme .k-dialog-content {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .k-window-actions .k-button,
body.cyan-theme .k-dialog-actions .k-button,
body.cyan-theme .k-dialog-buttongroup {
  background-color: transparent !important;
  border-color: rgba(0, 174, 239, 0.20) !important;
  color: var(--ms-topbar-text) !important;
}

/* --- Kendo TabStrip in Dialogen --- */
body.cyan-theme .k-tabstrip {
  background-color: transparent !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-tabstrip .k-item {
  background-color: #1c2433 !important;
  color: #8b949e !important;
  border-color: var(--ms-content-card-border) !important;
}

body.cyan-theme .k-tabstrip .k-item.k-active,
body.cyan-theme .k-tabstrip .k-item.k-state-active {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-cyan-primary) !important;
  border-bottom-color: var(--ms-content-card-bg) !important;
}

body.cyan-theme .k-tabstrip-content,
body.cyan-theme .k-tabstrip > .k-content {
  background-color: var(--ms-content-card-bg) !important;
  color: var(--ms-topbar-text) !important;
  border-color: var(--ms-content-card-border) !important;
}

/* --- Kendo Splitter --- */
body.cyan-theme .k-splitter,
body.cyan-theme .k-pane {
  background-color: var(--ms-content-bg) !important;
  color: var(--ms-topbar-text) !important;
}

body.cyan-theme .k-splitbar {
  background-color: #1c2433 !important;
  border-color: var(--ms-content-card-border) !important;
}

/* --- Validation messages --- */
body.cyan-theme .field-validation-error,
body.cyan-theme .text-danger {
  color: #f87171 !important;
}

body.cyan-theme .k-tooltip.k-tooltip-validation,
body.cyan-theme .k-callout {
  background-color: #3d1515 !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
}

/* --- Alert/Info boxes --- */
body.cyan-theme .alert-info {
  background-color: rgba(0, 174, 239, 0.10) !important;
  border-color: rgba(0, 174, 239, 0.30) !important;
  color: #a0d8f0 !important;
}

body.cyan-theme .alert-warning {
  background-color: rgba(251, 191, 36, 0.10) !important;
  border-color: rgba(251, 191, 36, 0.30) !important;
  color: #fcd34d !important;
}

body.cyan-theme .alert-danger,
body.cyan-theme .alert-error {
  background-color: rgba(248, 113, 113, 0.10) !important;
  border-color: rgba(248, 113, 113, 0.30) !important;
  color: #fca5a5 !important;
}

body.cyan-theme .alert-success {
  background-color: rgba(52, 211, 153, 0.10) !important;
  border-color: rgba(52, 211, 153, 0.30) !important;
  color: #6ee7b7 !important;
}