/* ============================================================
   Modern UI overlay — NUR aktiv unter html[data-modern="1"].
   Umschalten: ?modern=1 (an) / ?modern=0 (aus); gemerkt in
   localStorage (gerdware-modern). Sobald freigegeben, kann der
   Inhalt in style.css übernommen und das Gate entfernt werden.
   ============================================================ */

html[data-modern="1"] {
    /* Komplett auf Sans (auch Zahlen/Codes). Da im gesamten CSS
       konsequent var(--font-mono) genutzt wird, flippt diese eine
       Zeile die komplette Oberfläche auf eine moderne Sans. */
    --font-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --radius: 10px;
}

html[data-modern="1"] body {
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Cards: dezenter Schatten + Hover-Lift --- */
html[data-modern="1"] .card,
html[data-modern="1"] .stat-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .12);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html[data-modern="1"] .stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 10px 24px rgba(0, 0, 0, .16);
}

/* --- Login-Karte: gleiche Anmutung wie die App-Cards --- */
html[data-modern="1"] .login-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px rgba(0, 0, 0, .22);
}
html[data-modern="1"] .login-card img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* --- Buttons: Hover-Lift + Schatten + Press-Feedback --- */
html[data-modern="1"] .btn {
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
html[data-modern="1"] .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}
html[data-modern="1"] .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
html[data-modern="1"] .btn-primary:hover { filter: brightness(1.05); }

/* --- Tabellen: Zeilen-Hover, mehr Luft, sticky Header --- */
html[data-modern="1"] .table td { padding: 12px 16px; }
html[data-modern="1"] .table tbody tr { transition: background .12s ease; }
html[data-modern="1"] .table tbody tr:hover td { background: rgba(255, 255, 255, .045); }
html[data-modern="1"][data-theme="light"] .table tbody tr:hover td { background: rgba(0, 0, 0, .03); }
html[data-modern="1"] .table thead th { position: sticky; top: 0; z-index: 2; }

/* --- Inputs: weicher Fokus-Ring --- */
html[data-modern="1"] .form-control {
    transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-modern="1"] .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(177, 214, 65, .25);                 /* Fallback */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* --- Globaler Fokus-Ring nur bei Tastaturbedienung --- */
html[data-modern="1"] :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
html[data-modern="1"] :focus:not(:focus-visible) { outline: none; }

/* --- Sanfte Hover-Übergänge für Navigation & Pills --- */
html[data-modern="1"] .filter-pill,
html[data-modern="1"] .sidebar a,
html[data-modern="1"] .nav-link,
html[data-modern="1"] .chip {
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* --- Top-Progressbar (von modern.js gesteuert) --- */
#ggw-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: width .2s ease, opacity .3s ease;
}

/* --- Lade-Spinner im Button beim Absenden --- */
html[data-modern="1"] .btn[data-loading="1"] { pointer-events: none; opacity: .8; }
.ggw-spin {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ggw-spin .6s linear infinite;
    margin-right: 4px;
    vertical-align: -1px;
}
@keyframes ggw-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Kundenportal — gleiche moderne Anmutung (helles Theme bleibt).
   Schrift wird bereits über --font-mono (oben) auf Sans geflippt.
   ============================================================ */

/* Cards & Stats: weichere Schatten (helles Theme) */
html[data-modern="1"] .portal-card,
html[data-modern="1"] .portal-stat {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .06);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
html[data-modern="1"] .portal-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 12px 26px rgba(0, 0, 0, .08);
}

/* Buttons: Hover-Lift + Press-Feedback */
html[data-modern="1"] .portal-btn {
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, filter .2s ease;
}
html[data-modern="1"] .portal-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
html[data-modern="1"] .portal-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
html[data-modern="1"] .portal-btn-primary:hover { filter: brightness(1.05); }

/* Tabellen: kein Umbruch pro Zeichen, weicher Zeilen-Hover */
html[data-modern="1"] .portal-table th,
html[data-modern="1"] .portal-table td {
    overflow-wrap: normal;
    word-break: normal;
}
html[data-modern="1"] .portal-table tbody tr { transition: background .12s ease; }

/* Schmale Breiten: breite Portal-Tabellen scrollen statt zu quetschen
   (Portal-Tabellen sind nicht in .table-responsive gewrappt). */
@media (max-width: 880px) {
    html[data-modern="1"] .portal-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ============================================================
   Freshup: Badges, Chips, Empty-States (app-weit, da data-modern Standard)
   ============================================================ */

/* Badges/Pills: runde Pillen, etwas mehr Luft, feine Kontur für Definition */
html[data-modern="1"] .badge {
    border-radius: 999px;
    padding: 3px 10px;
    letter-spacing: .4px;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .16);
}

/* Chips ebenfalls als Pillen */
html[data-modern="1"] .chip {
    border-radius: 999px;
    padding: 3px 10px;
}

/* Empty-States: Icon in weichem Kreis, klarere Hierarchie */
html[data-modern="1"] .empty-state { padding: 56px 20px; }
html[data-modern="1"] .empty-state .empty-icon,
html[data-modern="1"] .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    font-size: 38px;
    opacity: 1;
    color: var(--primary);
    background: rgba(127, 127, 127, .10);                          /* Fallback */
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
html[data-modern="1"] .empty-state h3 { font-size: 17px; }
html[data-modern="1"] .empty-state p { max-width: 420px; margin-left: auto; margin-right: auto; }

/* Mini-Trend auf Kennzahlen-Karten (z. B. Umsatz Monat vs. Vormonat) */
.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    vertical-align: middle;
}
.stat-trend.up { background: rgba(34, 197, 94, .16); color: var(--success); }
.stat-trend.down { background: rgba(239, 68, 68, .16); color: var(--danger); }

/* --- Bewegung reduzieren respektieren --- */
@media (prefers-reduced-motion: reduce) {
    html[data-modern="1"] *,
    #ggw-progress,
    .ggw-spin {
        transition: none !important;
        animation: none !important;
    }
    html[data-modern="1"] .btn:hover,
    html[data-modern="1"] .card:hover { transform: none !important; }
}