/* =====================================================
 * IT-CCS Hub Theme — Header-Akzent + Hub-Layout
 * Tokens 1:1 aus design-tokens.css, nur Header-Background
 * und Hub-spezifisches Layout-CSS hier.
 * ===================================================== */

:root {
    --hub-accent:           #F26306;
    --hub-accent-hover:     #D85805;
    --hub-accent-text:      #FFFFFF;

    /* Header-Interaktions-Tokens — eine zentrale Stelle für alle
       6 States × 4 Komponenten. Vor jedem hardcoded rgba prüfen. */
    --hub-nav-bg-hover:        rgba(255, 255, 255, 0.14);
    --hub-nav-bg-active:       rgba(255, 255, 255, 0.22);
    --hub-nav-bg-active-hover: rgba(255, 255, 255, 0.30);
    --hub-nav-bg-pressed:      rgba(0, 0, 0, 0.10);
    --hub-nav-marker:          rgba(255, 255, 255, 0.55);
    --hub-nav-focus-ring:      rgba(255, 255, 255, 0.70);
    --hub-nav-border:          rgba(255, 255, 255, 0.45);
}

:root[data-theme="dark"] {
    --hub-accent:           #FF7A2E;
    --hub-accent-hover:     #FF8B47;
}

/* ===========================================================
   Hub-Header — Container
   =========================================================== */

.hub-header {
    background: var(--hub-accent);
    color: var(--hub-accent-text);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

.hub-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* ===========================================================
   Brand (Logo-Link links) — 6 States
   Spezifität durch .hub-header schlägt globale a:hover-Regeln aus style.css
   =========================================================== */

.hub-header .hub-brand,
.hub-header .hub-brand:link,
.hub-header .hub-brand:visited,
.hub-header .hub-brand:hover,
.hub-header .hub-brand:focus,
.hub-header .hub-brand:active {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    color: var(--hub-accent-text);
    text-decoration: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.hub-header .hub-brand { transition: opacity 120ms ease; }
.hub-header .hub-brand:hover { opacity: 0.88; }
.hub-header .hub-brand:focus { outline: none; }
.hub-header .hub-brand:focus-visible {
    outline: 2px solid var(--hub-nav-focus-ring);
    outline-offset: 3px;
    border-radius: 4px;
}

.hub-brand-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: inherit;
}
.hub-brand-sub {
    font-size: 11px;
    opacity: 0.85;
    color: inherit;
}

/* ===========================================================
   Nav-Container
   =========================================================== */

.hub-nav {
    display: flex;
    gap: 4px;
    margin-left: 24px;
    flex: 1;
    align-items: center;
}

/* ===========================================================
   Nav-Link — alle 6 States explizit
   Vermeidet Cross-Browser-Differenzen (Chrome vs. Edge :visited-Cache,
   :focus-Sticky nach Klick, globale a:hover-Underline aus style.css).
   =========================================================== */

/* Base (default) — definiert Layout + alle visuellen Defaults
   Phantom-Bold-Trick gegen Layout-Shift beim Aktivwerden:
   Label-Span und ::after-Pseudo belegen denselben Grid-Cell
   ("stack") und überlappen perfekt. Der Pseudo trägt das Label
   in font-weight: 600 (unsichtbar) und gibt damit die Breite vor.
   Egal ob idle (500) oder active (600) — die Box-Breite bleibt
   identisch, die Geschwister-Tabs verschieben sich nicht.
   Pattern aus Linear / Vercel / Notion. */
.hub-header .hub-nav-link {
    display: inline-grid;
    grid-template-areas: "stack";
    place-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 6px;
    border: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;

    color: var(--hub-accent-text);
    background-color: transparent;
    text-decoration: none;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;

    transition: background-color 120ms ease,
                color           120ms ease,
                box-shadow      120ms ease;
}
.hub-header .hub-nav-link-label,
.hub-header .hub-nav-link::after {
    grid-area: stack;
}
.hub-header .hub-nav-link::after {
    content: attr(data-label);
    font-weight: 600;
    letter-spacing: 0.01em;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

/* State-Reset für alle Link-Pseudoklassen (Browser-Defensives:
   neutralisiert globale a, a:visited, a:hover aus style.css). */
.hub-header .hub-nav-link:link,
.hub-header .hub-nav-link:visited {
    color: var(--hub-accent-text);
    background-color: transparent;
    text-decoration: none;
}

/* State 1: Hover (nicht aktiv) — leicht aufhellen */
.hub-header .hub-nav-link:hover {
    background-color: var(--hub-nav-bg-hover);
    color: var(--hub-accent-text);
    text-decoration: none;
}

/* State 2: Focus — Outline NUR bei Keyboard-Navigation (:focus-visible),
   nicht nach Mausklick (:focus). Genau das verursacht in Chrome vs. Edge
   die unterschiedliche „klebende" Outline nach Klick. */
.hub-header .hub-nav-link:focus {
    outline: none;
}
.hub-header .hub-nav-link:focus-visible {
    outline: 2px solid var(--hub-nav-focus-ring);
    outline-offset: 2px;
}

/* State 3: Active (current page, semantisch via aria-current="page")
   - dezenter Hintergrund + unterer Marker-Strich für klare Position
   - font-weight wird per .hub-nav-link-label gesetzt, damit das
     Phantom-::after-Element seine vorallokierte Breite behält. */
.hub-header .hub-nav-link[aria-current="page"] {
    background-color: var(--hub-nav-bg-active);
    color: var(--hub-accent-text);
    box-shadow: inset 0 -2px 0 0 var(--hub-nav-marker);
}
.hub-header .hub-nav-link[aria-current="page"] .hub-nav-link-label {
    font-weight: 600;
}

/* State 4: Active + Hover — deutlicher aufhellen */
.hub-header .hub-nav-link[aria-current="page"]:hover {
    background-color: var(--hub-nav-bg-active-hover);
}

/* State 5: Pressed (während Click) — kurz „eindrücken" */
.hub-header .hub-nav-link:active {
    background-color: var(--hub-nav-bg-pressed);
    transition-duration: 60ms;
}

/* ===========================================================
   User-Block (Theme-Toggle + Profile-Link + Logout)
   =========================================================== */

.hub-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* --- Profile-Link (Name im Header rechts) — gleiche State-Hierarchie --- */
.hub-header .hub-user-name {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;

    color: var(--hub-accent-text);
    background-color: transparent;
    text-decoration: none;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease;
}
.hub-header .hub-user-name:link,
.hub-header .hub-user-name:visited {
    color: var(--hub-accent-text);
    text-decoration: none;
}
.hub-header .hub-user-name:hover {
    background-color: var(--hub-nav-bg-hover);
    color: var(--hub-accent-text);
    text-decoration: none;
}
.hub-header .hub-user-name:focus { outline: none; }
.hub-header .hub-user-name:focus-visible {
    outline: 2px solid var(--hub-nav-focus-ring);
    outline-offset: 2px;
}
.hub-header .hub-user-name:active {
    background-color: var(--hub-nav-bg-pressed);
}

/* --- Theme-Toggle (Button mit Icon) --- */
.hub-header .hub-theme-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--hub-nav-border);
    border-radius: 6px;

    color: var(--hub-accent-text);
    background-color: transparent;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    transition: background-color 120ms ease, border-color 120ms ease;
}
.hub-header .hub-theme-toggle:hover {
    background-color: var(--hub-nav-bg-hover);
}
.hub-header .hub-theme-toggle:focus { outline: none; }
.hub-header .hub-theme-toggle:focus-visible {
    outline: 2px solid var(--hub-nav-focus-ring);
    outline-offset: 2px;
}
.hub-header .hub-theme-toggle:active {
    background-color: var(--hub-nav-bg-pressed);
}

/* SVG-Icons im Toggle: explizite Box-Maße, weil im Flex-Container das
 * SVG-Attribut width="18" auf 0 kollabieren kann (computed: 0 statt 18). */
.hub-header .hub-theme-toggle svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}
/* Icon-Sichtbarkeit: Sun zeigen wenn aktuell dark (= klick wechselt zu light), Moon sonst */
.hub-header .hub-theme-toggle .theme-icon-sun  { display: none; }
.hub-header .hub-theme-toggle .theme-icon-moon { display: block; }
:root[data-theme="dark"] .hub-header .hub-theme-toggle .theme-icon-sun  { display: block; }
:root[data-theme="dark"] .hub-header .hub-theme-toggle .theme-icon-moon { display: none; }

/* --- Logout-Button (sekundär, mit Border) --- */
.hub-header .hub-logout-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--hub-nav-border);
    border-radius: 6px;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;

    color: var(--hub-accent-text);
    background-color: transparent;
    text-decoration: none;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.hub-header .hub-logout-btn:link,
.hub-header .hub-logout-btn:visited {
    color: var(--hub-accent-text);
    text-decoration: none;
}
.hub-header .hub-logout-btn:hover {
    background-color: var(--hub-nav-bg-hover);
    color: var(--hub-accent-text);
    text-decoration: none;
}
.hub-header .hub-logout-btn:focus { outline: none; }
.hub-header .hub-logout-btn:focus-visible {
    outline: 2px solid var(--hub-nav-focus-ring);
    outline-offset: 2px;
}
.hub-header .hub-logout-btn:active {
    background-color: var(--hub-nav-bg-pressed);
}

/* ===== Hub-Main ===== */
.hub-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px;
    min-height: calc(100vh - 60px - 60px);
}

.hub-page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.hub-page-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 28px;
}

/* ===== Modul-Kacheln (Dashboard-Skelett) ===== */
.hub-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.hub-module-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px 20px 16px;
    transition: transform 0.15s, box-shadow 0.15s;
    color: var(--text-primary);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    min-height: 140px;
}
a.hub-module-card,
a.hub-module-card:link,
a.hub-module-card:visited,
a.hub-module-card:hover,
a.hub-module-card:focus,
a.hub-module-card:active {
    color: var(--text-primary);
    text-decoration: none;
}

.hub-module-footer {
    margin-top: auto;
    padding-top: 14px;
    display: flex;
    justify-content: center;
}

.hub-module-card.is-disabled {
    opacity: 0.75;
}

.hub-module-card:not(.is-disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.hub-module-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.hub-module-status {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.hub-module-status.is-live {
    background: var(--hub-accent);
    color: var(--hub-accent-text);
}

.hub-module-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ===== Hub-Main Body-Background ===== */
.hub-page {
    background: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
}

.hub-page-title {
    color: var(--text-primary);
}

.hub-page-sub {
    color: var(--text-secondary);
}

/* ===== Hub-Footer ===== */
.hub-footer {
    border-top: 1px solid var(--border-color);
    padding: 16px 24px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

/* ===== Login-Page Hub-Override ===== */
.hub-page.login-page .login-logo-title {
    color: var(--hub-accent);
}

/* ===== Messages (statisch — Hub hat kein Toast-JS aus der App) =====
 * Override fuer style.css:4054 `.msg { display: none; }` (App-Pattern,
 * dort wird .msg per JS zu Toast konvertiert). Im Hub rendern wir
 * Messages direkt im DOM. */
.hub-page .msg {
    display: block;
    padding: 12px 16px;
    border-radius: 6px;
    margin: 12px 0 20px;
    font-size: 14px;
    border: 1px solid transparent;
    line-height: 1.5;
}

.hub-page .msg-error {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.30);
    color: #c0392b;
}

.hub-page .msg-success {
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.30);
    color: #1e7e44;
}

.hub-page .msg-warning {
    background: rgba(243, 156, 18, 0.10);
    border-color: rgba(243, 156, 18, 0.35);
    color: #b35900;
}

/* Dark-Mode: hellere Schrift auf dunkleren Tints */
:root[data-theme="dark"] .hub-page .msg-error {
    background: rgba(231, 76, 60, 0.18);
    border-color: rgba(231, 76, 60, 0.45);
    color: #f5b8b1;
}
:root[data-theme="dark"] .hub-page .msg-success {
    background: rgba(39, 174, 96, 0.18);
    border-color: rgba(39, 174, 96, 0.45);
    color: #a3e0bd;
}
:root[data-theme="dark"] .hub-page .msg-warning {
    background: rgba(243, 156, 18, 0.20);
    border-color: rgba(243, 156, 18, 0.50);
    color: #f1c282;
}

/* ===========================================================
   Form-Sections (Gruppen-Header in Edit/Create-Forms)
   =========================================================== */
.hub-form-section {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7785);
    margin: 24px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
.hub-form-section:first-of-type { margin-top: 8px; }

:root[data-theme="dark"] .hub-form-section {
    color: #a8b3c0;
    border-bottom-color: rgba(255, 255, 255, 0.10);
}

/* ===========================================================
   Filter-Form (Listen-Suchleiste oben)
   =========================================================== */
.hub-filter-form {
    background: var(--bg-soft, #f5f7fa);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 8px;
}
.hub-filter-form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #6b7785);
    margin-bottom: 4px;
}
:root[data-theme="dark"] .hub-filter-form {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ===========================================================
   List-Actions (Buttons oberhalb der Tabelle)
   =========================================================== */
.list-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

/* ===========================================================
   Status-Badges (Kunden/Lizenzen)
   =========================================================== */
.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}
.status-badge--lead      { background: rgba(52, 152, 219, 0.10); color: #1f6ea5; border-color: rgba(52, 152, 219, 0.25); }
.status-badge--test      { background: rgba(155, 89, 182, 0.10); color: #7d3c98; border-color: rgba(155, 89, 182, 0.25); }
.status-badge--active    { background: rgba(39, 174, 96, 0.10);  color: #1e7e44; border-color: rgba(39, 174, 96, 0.25); }
.status-badge--suspended { background: rgba(243, 156, 18, 0.12); color: #a05a00; border-color: rgba(243, 156, 18, 0.30); }
.status-badge--cancelled { background: rgba(127, 140, 141, 0.12); color: #5a6c6e; border-color: rgba(127, 140, 141, 0.30); }
.status-badge--expired   { background: rgba(231, 76, 60, 0.10);  color: #b1392c; border-color: rgba(231, 76, 60, 0.25); }

:root[data-theme="dark"] .status-badge--lead      { background: rgba(52, 152, 219, 0.20); color: #9fc8e8; }
:root[data-theme="dark"] .status-badge--test      { background: rgba(155, 89, 182, 0.22); color: #d4a8e8; }
:root[data-theme="dark"] .status-badge--active    { background: rgba(39, 174, 96, 0.22);  color: #a3e0bd; }
:root[data-theme="dark"] .status-badge--suspended { background: rgba(243, 156, 18, 0.22); color: #f1c282; }
:root[data-theme="dark"] .status-badge--cancelled { background: rgba(127, 140, 141, 0.22); color: #b8c4c5; }
:root[data-theme="dark"] .status-badge--expired   { background: rgba(231, 76, 60, 0.22);  color: #f5b8b1; }

/* Service-Level / Tier-Badges (Lizenz) */
.tier-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
}
.tier-badge--xs { background: rgba(127, 140, 141, 0.12); color: #5a6c6e; }
.tier-badge--s  { background: rgba(52, 152, 219, 0.10); color: #1f6ea5; }
.tier-badge--m  { background: rgba(155, 89, 182, 0.10); color: #7d3c98; }
.tier-badge--l  { background: rgba(39, 174, 96, 0.10);  color: #1e7e44; }
.tier-badge--xl { background: rgba(242, 99, 6, 0.12);   color: #b04400; }

:root[data-theme="dark"] .tier-badge--xs { background: rgba(127, 140, 141, 0.22); color: #b8c4c5; }
:root[data-theme="dark"] .tier-badge--s  { background: rgba(52, 152, 219, 0.22); color: #9fc8e8; }
:root[data-theme="dark"] .tier-badge--m  { background: rgba(155, 89, 182, 0.22); color: #d4a8e8; }
:root[data-theme="dark"] .tier-badge--l  { background: rgba(39, 174, 96, 0.22);  color: #a3e0bd; }
:root[data-theme="dark"] .tier-badge--xl { background: rgba(255, 122, 46, 0.22); color: #ffb380; }

/* ===========================================================
   Lizenz-Key-Anzeige (Monospace mit Copy-Affordance)
   =========================================================== */
.license-key {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 4px;
    display: inline-block;
}
:root[data-theme="dark"] .license-key {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ===========================================================
   Heartbeat-Übersicht (RM-68)
   - Klickbare Stat-Karten als Schnellfilter
   - Inline-Wert-Darstellungen (Version, Installation-ID)
   =========================================================== */
.heartbeat-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.heartbeat-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    min-height: 64px;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.heartbeat-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.heartbeat-stat:link,
.heartbeat-stat:visited {
    color: var(--text-primary);
    text-decoration: none;
}
.heartbeat-stat.is-active {
    box-shadow: 0 0 0 2px var(--hub-accent) inset, 0 1px 4px rgba(0, 0, 0, 0.06);
}
.heartbeat-stat-num {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}
.heartbeat-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Akzent-Linke Rahmenfarben je nach Status — semantisch zu status-badge */
.heartbeat-stat--total   { border-left-color: var(--text-secondary); }
.heartbeat-stat--live    { border-left-color: #27ae60; }
.heartbeat-stat--idle    { border-left-color: #3498db; }
.heartbeat-stat--pause   { border-left-color: #f39c12; }
.heartbeat-stat--offline { border-left-color: #e74c3c; }
.heartbeat-stat--unbound { border-left-color: #95a5a6; }

/* Inline-Wert-Darstellungen */
.hb-version {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}
.hb-instid {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: help;
    border-bottom: 1px dotted var(--text-muted);
}

:root[data-theme="dark"] .hb-version {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
}