/* Support.me Konsole — angemeldete Oberflaeche im CXHUB-Design
 * (Vorbild: CXHUB „Cogswell Hell", src/styles/theme-cogswell.css + layout.css).
 *
 * Drei Schichten wie im CXHUB:
 *   1 Hintergrund  #f4f4f4 mit einem ruhigen Petrol-Schimmer
 *   2 Inhalt       opake weisse Karten, Hairlines, weiche Ink-Schatten
 *   3 Glas         schwebende Seitenleiste + Kopfzeile
 * Aktiver Menuepunkt = weisse Pill mit Ink-Text (wie CXHUB-Sidebar),
 * Primaeraktion = Ink-Pill, Petrol nur fuer Akzente/Links.
 *
 * Nur fuer html[data-cn-route='app'] (setzt login.js). Ant Design Pro
 * injiziert seine Styles zur Laufzeit danach → hoehere Spezifitaet und
 * !important dort, wo Ant Farben per Token setzt.
 */

html[data-cn-route='app'] {
  --cn-flaeche: #f4f4f4;
  --cn-card: #ffffff;
  --cn-ink: #191c1f;
  --cn-text-2: #505a63;
  --cn-text-3: #79828a;
  --cn-hair: #e2e2e7;
  --cn-accent: #276a87;
  --cn-accent-soft: rgba(77, 144, 173, 0.14);
  --cn-glass: rgba(255, 255, 255, 0.72);
  --cn-shadow-card: 0 0 0 0.5px rgba(25, 28, 31, 0.04), 0 1px 2px rgba(25, 28, 31, 0.04), 0 4px 12px rgba(25, 28, 31, 0.04);
  --cn-shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 32px rgba(25, 28, 31, 0.06), 0 2px 8px rgba(25, 28, 31, 0.03);
  --cn-ease: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}
html[data-cn-route='app'] body {
  background: var(--cn-flaeche) !important;
  font-family: -apple-system, 'SF Pro Text', 'Inter', BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
/* Ant-Hintergrund-Blobs raus, ein ruhiger Petrol-Schimmer rein */
html[data-cn-route='app'] .ant-pro-layout-bg-list {
  background: radial-gradient(ellipse 60% 45% at 18% 8%, rgba(77, 144, 173, 0.07), transparent 70%), var(--cn-flaeche) !important;
}
html[data-cn-route='app'] .ant-pro-layout-bg-list > * { display: none !important; }
html[data-cn-route='app'] .ant-layout,
html[data-cn-route='app'] .ant-pro-layout-container { background: transparent !important; }

/* ─── Kopfzeile (Glas) ─── */
html[data-cn-route='app'] .ant-pro-layout-header,
html[data-cn-route='app'] header.ant-layout-header.ant-pro-layout-header-fixed-header {
  background: rgba(244, 244, 244, 0.72) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 0.5px solid rgba(25, 28, 31, 0.08) !important;
  box-shadow: none !important;
}
html[data-cn-route='app'] .ant-pro-global-header-logo img {
  content: url('./logo-mark.png');
  width: 28px !important;
  height: 28px !important;
}
html[data-cn-route='app'] .ant-pro-global-header-logo h1 {
  color: var(--cn-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
/* Theme-Umschalter: Konsole ist im CXHUB-Design hell */
html[data-cn-route='app'] .ant-pro-global-header-right-content .ant-space-item:last-child { display: none !important; }
html[data-cn-route='app'] .ant-pro-global-header-right-content .ant-dropdown-trigger {
  border-radius: 999px !important;
  transition: background 150ms var(--cn-ease);
}
html[data-cn-route='app'] .ant-pro-global-header-right-content .ant-dropdown-trigger:hover { background: rgba(25, 28, 31, 0.05) !important; }
html[data-cn-route='app'] .ant-pro-global-header-right-content .ant-avatar { background: var(--cn-accent) !important; }

/* ─── Seitenleiste (Glas, schwebend wie im CXHUB) ─── */
html[data-cn-route='app'] .ant-pro-sider {
  background: transparent !important;
  border-inline-end: none !important;
}
html[data-cn-route='app'] .ant-pro-sider .ant-layout-sider-children {
  margin: 16px 0 16px 16px;
  height: calc(100% - 32px) !important;
  width: calc(100% - 16px) !important;
  background: var(--cn-glass) !important;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(25, 28, 31, 0.08) !important;
  border-radius: 22px;
  box-shadow: var(--cn-shadow-glass);
  padding-block: 12px;
  overflow: hidden;
}
html[data-cn-route='app'] .ant-pro-sider .ant-menu,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-sub { background: transparent !important; border: none !important; }
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-title {
  height: 40px !important;
  line-height: 40px !important;
  margin-block: 2px !important;
  border-radius: 12px !important;
  color: var(--cn-text-2) !important;
  font-size: 15px !important;
  font-weight: 510 !important;
  letter-spacing: -0.005em;
  transition: background 150ms var(--cn-ease), color 150ms var(--cn-ease) !important;
}
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item a,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item .anticon,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-title .anticon,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-arrow { color: inherit !important; }
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item:hover,
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-title:hover { background: rgba(25, 28, 31, 0.05) !important; color: var(--cn-ink) !important; }
/* Aktiv: weisse Pill, Ink-Text (CXHUB .side-nav .active-pill) */
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item-selected {
  background: #ffffff !important;
  color: var(--cn-ink) !important;
  box-shadow: 0 1px 3px rgba(25, 28, 31, 0.08), 0 0 0 0.5px rgba(25, 28, 31, 0.05);
}
html[data-cn-route='app'] .ant-pro-sider .ant-menu-item-selected::after { display: none !important; }
html[data-cn-route='app'] .ant-pro-sider .ant-menu-submenu-selected > .ant-menu-submenu-title { color: var(--cn-ink) !important; }
html[data-cn-route='app'] .ant-pro-sider-collapsed-button {
  background: #ffffff !important;
  border: 0.5px solid var(--cn-hair) !important;
  box-shadow: 0 1px 3px rgba(25, 28, 31, 0.08) !important;
  color: var(--cn-text-2) !important;
  inset-inline-end: -8px !important;
}

/* ─── Seitentitel ─── */
html[data-cn-route='app'] .ant-page-header { padding-block: 40px 8px !important; }
html[data-cn-route='app'] .ant-page-header-heading-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.15 !important;
  color: var(--cn-ink) !important;
}
html[data-cn-route='app'] .ant-pro-page-container-children-container { padding-block: 24px 48px !important; }

/* ─── Inhalt: opake Karten ─── */
html[data-cn-route='app'] .ant-card {
  background: var(--cn-card) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--cn-shadow-card) !important;
}
html[data-cn-route='app'] .ant-card-head {
  border-bottom: 0.5px solid var(--cn-hair) !important;
  min-height: 56px;
}
html[data-cn-route='app'] .ant-card-head-title { font-size: 17px !important; font-weight: 600 !important; color: var(--cn-ink) !important; }
html[data-cn-route='app'] .ant-card-body { padding: 24px !important; }

/* Beschreibungslisten (Lizenz-Uebersicht) als KPI-Kacheln:
 * Ant rendert eine starre Tabelle mit 3 Label/Wert-Paaren pro Zeile — bei
 * normaler Breite brachen die Werte buchstabenweise um („Busi|ness").
 * Jede Zeile wird ein Grid, das Paare spaltenweise fuellt: Label oben
 * (11 px, Versalien), Wert darunter (20 px, tabellarisch). */
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-view {
  border: 0.5px solid var(--cn-hair) !important;
  border-radius: 16px !important;
  overflow: hidden;
}
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-view table,
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-view tbody { display: block; width: 100%; }
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  grid-auto-columns: minmax(0, 1fr);
  border-bottom: 0.5px solid var(--cn-hair) !important;
}
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-row:last-child { border-bottom: none !important; }
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-row > th,
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-row > td {
  display: block;
  border: none !important;
  background: transparent !important;
}
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-item-label {
  padding: 18px 20px 4px !important;
  color: var(--cn-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-item-label::after { display: none !important; }
html[data-cn-route='app'] .ant-descriptions-bordered .ant-descriptions-item-content {
  padding: 0 20px 18px !important;
  color: var(--cn-ink) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Hinweis-Banner: Petrol-Tint statt Ant-Gruen/-Blau */
html[data-cn-route='app'] .ant-alert {
  border-radius: 14px !important;
  border: 1px solid rgba(77, 144, 173, 0.30) !important;
  background: rgba(77, 144, 173, 0.10) !important;
  color: var(--cn-ink) !important;
  padding: 12px 16px !important;
}
html[data-cn-route='app'] .ant-alert .ant-alert-icon { color: var(--cn-accent) !important; }

/* ─── Tabellen: Zeilen grosszuegig, Hairlines, tabellarische Zahlen ─── */
html[data-cn-route='app'] .ant-table-wrapper .ant-table { background: transparent !important; border-radius: 16px !important; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-container { border-radius: 16px !important; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-thead > tr > th {
  background: #f6f7f8 !important;
  color: var(--cn-text-3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  border-bottom: 0.5px solid var(--cn-hair) !important;
  padding: 12px 16px !important;
}
html[data-cn-route='app'] .ant-table-wrapper .ant-table-thead > tr > th::before { display: none !important; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr > td {
  border-bottom: 0.5px solid var(--cn-hair) !important;
  padding: 18px 16px !important;
  font-size: 14px;
  color: var(--cn-ink);
  font-variant-numeric: tabular-nums;
  transition: background 150ms var(--cn-ease);
}
/* Viele Spalten (Geraete, Audit): lieber waagerecht scrollen als Woerter
   buchstabenweise umbrechen („STEINER-BUE|RO-PC"). */
html[data-cn-route='app'] .ant-table-wrapper .ant-table-content { overflow-x: auto !important; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-thead > tr > th,
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr > td { white-space: nowrap; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr > td .ant-typography-ellipsis,
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr > td { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr:hover > td { background: rgba(25, 28, 31, 0.03) !important; }
html[data-cn-route='app'] .ant-table-wrapper .ant-table-tbody > tr.ant-table-row-selected > td { background: rgba(77, 144, 173, 0.08) !important; }
html[data-cn-route='app'] .ant-pro-table-list-toolbar-title { font-size: 17px !important; font-weight: 600 !important; }
html[data-cn-route='app'] .ant-pro-table-search,
html[data-cn-route='app'] .ant-pro-card {
  border-radius: 20px !important;
  box-shadow: var(--cn-shadow-card) !important;
  border: none !important;
}

/* ─── Buttons: Ink-Pill primaer, Pills ueberall (eine Formsprache) ─── */
html[data-cn-route='app'] .ant-btn {
  border-radius: 999px !important;
  font-weight: 510 !important;
  box-shadow: none !important;
  transition: background 150ms var(--cn-ease), transform 150ms var(--cn-ease), box-shadow 150ms var(--cn-ease) !important;
}
html[data-cn-route='app'] .ant-btn:not(.ant-btn-icon-only):not(.ant-btn-sm) { padding-inline: 18px !important; }
html[data-cn-route='app'] .ant-btn:active:not(:disabled) { transform: scale(0.97); }
html[data-cn-route='app'] .ant-btn-primary:not(.ant-btn-dangerous):not(.ant-btn-background-ghost) {
  background: var(--cn-ink) !important;
  color: #ffffff !important;
  border-color: var(--cn-ink) !important;
  box-shadow: 0 6px 16px rgba(25, 28, 31, 0.18) !important;
}
html[data-cn-route='app'] .ant-btn-primary:not(.ant-btn-dangerous):not(.ant-btn-background-ghost):hover:not(:disabled) {
  background: #0f0b0a !important;
  box-shadow: 0 8px 20px rgba(25, 28, 31, 0.24) !important;
}
html[data-cn-route='app'] .ant-btn-default:not(.ant-btn-dangerous) {
  background: #ffffff !important;
  border: 1px solid var(--cn-hair) !important;
  color: var(--cn-ink) !important;
}
html[data-cn-route='app'] .ant-btn-default:not(.ant-btn-dangerous):hover:not(:disabled) { background: #f6f7f8 !important; }
html[data-cn-route='app'] .ant-btn-link,
html[data-cn-route='app'] a:not(.ant-btn):not(.ant-pro-global-footer-list-link) { color: var(--cn-accent); }

/* ─── Eingabefelder ─── */
html[data-cn-route='app'] .ant-input-affix-wrapper,
html[data-cn-route='app'] .ant-input:not(.ant-input-affix-wrapper .ant-input),
html[data-cn-route='app'] .ant-select:not(.ant-select-customize-input) .ant-select-selector,
html[data-cn-route='app'] .ant-picker {
  border-radius: 12px !important;
  background: #f6f7f8 !important;
  border-color: var(--cn-hair) !important;
  box-shadow: none !important;
}
html[data-cn-route='app'] .ant-input-affix-wrapper .ant-input { background: transparent !important; }
html[data-cn-route='app'] .ant-input-affix-wrapper-focused,
html[data-cn-route='app'] .ant-input:focus,
html[data-cn-route='app'] .ant-select-focused .ant-select-selector,
html[data-cn-route='app'] .ant-picker-focused {
  background: #ffffff !important;
  border-color: #4d90ad !important;
  box-shadow: 0 0 0 4px rgba(77, 144, 173, 0.18) !important;
}

/* ─── Status-Tags als Pills (wie CXHUB .pill) ─── */
html[data-cn-route='app'] .ant-tag {
  border-radius: 999px !important;
  border: none !important;
  padding: 2px 10px !important;
  font-weight: 510;
}
html[data-cn-route='app'] .ant-badge-status-success { background: #1a7f37 !important; }

/* ─── Modals / Drawer: opak, stark gerundet ─── */
html[data-cn-route='app'] .ant-modal .ant-modal-content {
  border-radius: 24px !important;
  padding: 28px !important;
  box-shadow: 0 24px 60px rgba(25, 28, 31, 0.18), 0 0 0 1px rgba(25, 28, 31, 0.06) !important;
}
html[data-cn-route='app'] .ant-modal .ant-modal-header { background: transparent !important; }
html[data-cn-route='app'] .ant-modal .ant-modal-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
html[data-cn-route='app'] .ant-drawer .ant-drawer-content { border-radius: 24px 0 0 24px; }

/* ─── Fusszeile ─── */
html[data-cn-route='app'] .ant-pro-layout-container > div:has(> .ant-layout-footer) { background: transparent !important; }
html[data-cn-route='app'] .ant-layout-footer { background: transparent !important; padding: 24px 24px 40px !important; }
html[data-cn-route='app'] .ant-pro-global-footer { margin: 0 !important; color: var(--cn-text-3) !important; font-size: 12px; }
html[data-cn-route='app'] .ant-pro-global-footer a { color: var(--cn-text-3) !important; font-size: 12px !important; }
html[data-cn-route='app'] .ant-pro-global-footer a:hover { color: var(--cn-ink) !important; }
html[data-cn-route='app'] .ant-pro-global-footer-copyright { font-size: 12px !important; color: var(--cn-text-3) !important; }

@media (prefers-reduced-transparency: reduce) {
  html[data-cn-route='app'] .ant-pro-sider .ant-layout-sider-children,
  html[data-cn-route='app'] .ant-pro-layout-header { background: rgba(255, 255, 255, 0.97) !important; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-cn-route='app'] .ant-btn:active:not(:disabled) { transform: none; }
}