/*
 * OMNIFIN CRM — "Midnight Pro" Brand Layer
 * ─────────────────────────────────────────
 * Implements the Digital Vault design language:
 *   ✦ Tonal layering statt 1px-Linien
 *   ✦ Glassmorphism für schwebende Elemente
 *   ✦ Gradient-First: Buttons, active states, accents
 *   ✦ Ambient Shadows statt harter schwarzer Schatten
 *   ✦ Alles adaptiert sich per Schema über CSS-Variablen
 */

/* ════════════════════════════════════════════════════════════════════════════
   0. TYPOGRAPHY — MANROPE FOR DISPLAY
   ════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3,
.page-title, .display-title, .card-title, .modal-title {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

.page-title {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

/* ════════════════════════════════════════════════════════════════════════════
   1. GRADIENT-UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

.grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.grad-border {
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        var(--grad) border-box;
    border: 1.5px solid transparent;
}

.grad-divider {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(var(--brand-violet-rgb), .5),
        rgba(var(--brand-blue-rgb), .3),
        transparent);
    border: none;
    margin: 1.5rem 0;
}

/* Glassmorphism Utility */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

/* ════════════════════════════════════════════════════════════════════════════
   2. BUTTONS — GRADIENT, IMMER LESBAR
   ════════════════════════════════════════════════════════════════════════════ */

/* Links als Buttons: accent-Farbe nur für echte Text-Links */
a:not(.btn):not([class*="btn-"]) {
    color: var(--accent);
}
a:not(.btn):not([class*="btn-"]):hover {
    color: var(--brand-blue);
    text-decoration: none;
}

/* Primary Button — Gradient + Glow */
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
    background: var(--grad);
    border-color: transparent;
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
    box-shadow: none;
    position: relative;
}
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    border-color: transparent;
    box-shadow: var(--glow-btn);
    transform: translateY(-1px);
    filter: brightness(1.08);
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
    text-decoration: none;
}
.btn.btn-primary:active,
a.btn-primary:active,
button.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
    filter: brightness(.95);
}

/* Ghost Button — Ghost Border */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    transition: all var(--transition);
}
.btn-ghost:hover {
    background: var(--bg-hover);
    border-color: rgba(var(--brand-violet-rgb), .25);
    color: var(--text-primary);
}

/* Outline Button — Gradient-Border */
.btn.btn-outline,
button.btn-outline,
a.btn-outline {
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        var(--grad) border-box;
    border: 1.5px solid transparent;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}
.btn.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover {
    background: var(--grad);
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
}

/* Danger */
.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(239,68,68,.3);
    transform: translateY(-1px);
}

/* Icon-Button hover */
.btn-icon:hover {
    background: var(--glass-bg);
    border-color: rgba(var(--brand-violet-rgb), .2);
    color: var(--accent);
    backdrop-filter: blur(8px);
}

/* Secondary — tonal surface */
.btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
}
.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: rgba(var(--brand-violet-rgb), .2);
}

/* ── Disabled state — universal, covers all button variants ─────── */
.btn:disabled,
button:disabled,
input[type="submit"]:disabled,
a.btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
    filter: none;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Touch targets — WCAG 2.5.8: min 44×44px on coarse pointers ─── */
@media (pointer: coarse) {
    .btn { min-height: var(--touch-target-min, 44px); }
    .btn-sm { min-height: 38px; }   /* small buttons: slightly relaxed but still accessible */
}

/* ════════════════════════════════════════════════════════════════════════════
   3. FORMULARFELDER — GRADIENT FOCUS RING
   ════════════════════════════════════════════════════════════════════════════ */

.form-input,
.form-control,
.form-select,
.form-textarea,
input.form-control,
select.form-control,
textarea.form-control {
    background: var(--input-bg);
    border-color: var(--input-border);
    border-radius: var(--radius);
    color: var(--input-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-control:focus,
.form-select:focus,
.form-textarea:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    border-color: var(--accent);
    /* Spec: 4px soft azure outer glow */
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15);
    outline: none;
}

/* Placeholder — uses dedicated token so it adapts to light/dark surfaces */
.form-input::placeholder,
.form-control::placeholder,
.form-select::placeholder,
.form-textarea::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;   /* Firefox normalisation */
}

/* Dark-mode: Azure-Glow enhanced focus ring (stronger than light-mode) */
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus,
[data-theme="dark"] input.form-control:focus,
[data-theme="dark"] select.form-control:focus,
[data-theme="dark"] textarea.form-control:focus {
    border-color: var(--accent);
    box-shadow:
        0 0 0 4px rgba(var(--accent-rgb), .20),
        0 0 16px rgba(var(--accent-rgb), .15);
}

/* ════════════════════════════════════════════════════════════════════════════
   4. CARDS — TONAL LAYERING, NO HARD LINES
   ════════════════════════════════════════════════════════════════════════════ */

/* Kein harter Border — Ghost Border oder reines Tonal */
.card {
    border-color: var(--border);
    border-radius: var(--radius-lg);   /* 18px — Luminous Slate primary container radius */
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.card:hover {
    box-shadow: var(--glow-card);
    border-color: rgba(var(--brand-violet-rgb), .2);
}

/* Interne Trennlinien in Cards: keine! Nur Abstand. */
.card hr,
.card .divider,
.card .card-divider {
    border: none;
    height: 1px;
    background: var(--border);
    opacity: .5;
}

/* Featured Card — Gradient-Glow-Border */
.card-featured {
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        var(--grad) border-box;
    border: 1px solid transparent;
    box-shadow: var(--glow-card);
}

/* Card-Header mit Gradient-Left-Akzent */
.card-header-accent {
    border-left: 3px solid transparent;
    border-image: var(--grad) 1;
    padding-left: 1.25rem;
}

/* Glassmorphism-Karte */
.card-glass {
    background: var(--glass-bg-strong);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow);
}

/* ════════════════════════════════════════════════════════════════════════════
   5. KPI-CARDS
   ════════════════════════════════════════════════════════════════════════════ */

.kpi-card {
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    border-color: var(--border);
}
.kpi-card:hover {
    box-shadow: var(--glow-card);
    border-color: rgba(var(--brand-violet-rgb), .25);
    transform: translateY(-2px);
}
.kpi-icon {
    background: linear-gradient(135deg,
        rgba(var(--brand-violet-rgb), .12),
        rgba(var(--brand-blue-rgb), .12));
    border: 1px solid rgba(var(--brand-violet-rgb), .15);
    border-radius: var(--radius);
    color: var(--accent);
}

.kpi-value { color: var(--text-primary); font-family: var(--font-display); }
.kpi-value.green  { color: var(--success); }
.kpi-value.warn   { color: var(--warning); }
.kpi-value.red    { color: var(--error); }
.kpi-value.accent {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. SIDEBAR
   ════════════════════════════════════════════════════════════════════════════ */

/* Aktives Item — sidebar.css handles ::before gradient line + azure color.
   brand.css only reinforces icon tinting (no color/border overrides). */
.nav-item.active .nav-icon,
.nav-item.active svg { color: var(--accent); }

/* Hover */
.nav-item:hover:not(.active) {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text);
}

/* ════════════════════════════════════════════════════════════════════════════
   7. TABS
   ════════════════════════════════════════════════════════════════════════════ */

/* Tab-Nav: Gradient-Linie (Violet → Blau) anstelle harter 1px-Linie */
.tab-nav {
    border-bottom: 2px solid;
    border-image: linear-gradient(to right,
        var(--brand-violet) 0%,
        var(--brand-blue)   60%,
        transparent         100%) 1;
}

.tab-item:hover { text-decoration: none; }

/* ── Light Mode: solide Akzentfarbe (dunkel genug für Kontrast auf hellem BG) */
.tab-item.active {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    border-bottom: 2px solid var(--accent);
    margin-bottom: -2px;
    font-weight: 700;
}

/* ── Dark Mode: Gradient-Text (hell auf dunklem BG = hoch kontrastreich) */
[data-theme="dark"] .tab-item.active {
    background: linear-gradient(90deg, var(--brand-violet), var(--brand-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    border-bottom: 2px solid var(--brand-blue);
    margin-bottom: -2px;
}

/* ── Settings-Tab-Nav: Gradient-Pill (Violet → Blau, beide Farben sichtbar) */
.settings-tab-nav .tab-item.active {
    background: linear-gradient(90deg, var(--brand-violet), var(--brand-blue));
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--accent-text);
    background-clip: unset;
    color: var(--accent-text);
    font-weight: 700;
    box-shadow:
        0 4px 16px rgba(var(--brand-violet-rgb), .4),
        0 0   24px rgba(var(--brand-blue-rgb),   .2);
    border: none;
    border-radius: var(--radius);
    border-image: none;
    margin-bottom: 0;
}

/* Settings-Tab-Trenner: Gradient-Linie mit beiden Brand-Farben */
.settings-tab-sep {
    background: linear-gradient(90deg,
        rgba(var(--brand-violet-rgb), .35),
        rgba(var(--brand-blue-rgb),   .25),
        transparent);
}

/* ════════════════════════════════════════════════════════════════════════════
   8. TABELLEN — TONAL DIVIDER
   ════════════════════════════════════════════════════════════════════════════ */

/* Kein harter Rahmen — Tonal */
.table {
    border-color: transparent;
}
.table thead tr {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg,
        rgba(var(--brand-violet-rgb), .3),
        rgba(var(--brand-blue-rgb), .2),
        transparent) 1;
}
.table tbody td {
    border-color: var(--table-border);
}

/* ════════════════════════════════════════════════════════════════════════════
   9. PAGE HEADER
   ════════════════════════════════════════════════════════════════════════════ */

.page-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: .25rem;
    display: block;
}

.page-divider {
    height: 1px;
    background: linear-gradient(90deg,
        rgba(var(--brand-violet-rgb), .3),
        rgba(var(--brand-blue-rgb), .2),
        transparent);
    border: none;
    margin: 1.5rem 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. MODALS — GLASSMORPHISM
   ════════════════════════════════════════════════════════════════════════════ */

.modal-content,
.modal-inner {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-inner {
    background: rgba(20,20,20,.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(var(--brand-violet-rgb), .12);
    box-shadow:
        0 24px 60px rgba(0,0,0,.7),
        0 0 0 1px rgba(255,255,255,.04);
}

.modal-header {
    border-top: 2px solid transparent;
    border-image: var(--grad) 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. BADGES
   ════════════════════════════════════════════════════════════════════════════ */

.badge-brand {
    background: var(--grad);
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
    font-size: .7rem;
    font-weight: 700;
    padding: .2rem .6rem;
    border-radius: 9999px;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
}

/* ════════════════════════════════════════════════════════════════════════════
   12. PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */

.pagination-btn.active {
    background: var(--grad);
    border-color: transparent;
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
    box-shadow: 0 4px 12px rgba(var(--brand-violet-rgb), .3);
}
.pagination-btn:hover:not(.active) {
    color: var(--accent);
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        var(--grad) border-box;
    border-color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   13. AVATAR / SPINNER
   ════════════════════════════════════════════════════════════════════════════ */

.avatar {
    background: var(--grad);
    color: var(--accent-text);
    -webkit-text-fill-color: var(--accent-text);
    font-family: var(--font-display);
    font-weight: 700;
}

.spinner {
    border-color: rgba(var(--brand-violet-rgb), .15);
    border-top-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════════════════════
   14. ALERTS
   ════════════════════════════════════════════════════════════════════════════ */

.alert {
    border-left: 3px solid;
    border-radius: var(--radius);
    background: var(--glass-bg);
}
[data-theme="dark"] .alert { backdrop-filter: blur(8px); }
.alert-success { border-left-color: var(--success); background: var(--success-bg); }
.alert-error   { border-left-color: var(--error);   background: var(--error-bg); }
.alert-warning { border-left-color: var(--warning); background: var(--warning-bg); }
.alert-info    { border-left-color: var(--brand-blue); background: var(--info-bg); }

/* ════════════════════════════════════════════════════════════════════════════
   15. TIMELINE
   ════════════════════════════════════════════════════════════════════════════ */

.timeline-icon--note {
    background: linear-gradient(135deg,
        rgba(var(--brand-violet-rgb), .15),
        rgba(var(--brand-blue-rgb), .15));
    color: var(--accent);
    border-color: rgba(var(--brand-violet-rgb), .2);
}
.timeline-line {
    background: linear-gradient(180deg,
        rgba(var(--brand-violet-rgb), .3),
        rgba(var(--brand-blue-rgb), .15));
}

/* ════════════════════════════════════════════════════════════════════════════
   16. FARBSCHEMA-PICKER
   ════════════════════════════════════════════════════════════════════════════ */

.scheme-active {
    box-shadow: 0 0 0 2px var(--accent), var(--glow-card) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   17. DARK MODE — VERSTÄRKTE MIDNIGHT PRO EFFECTS
   ════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] body {
    background: var(--bg-base);
}

[data-theme="dark"] .card {
    background: var(--bg-surface);
    /* Ghost Border per spec: outline_variant at 15% opacity */
    border-color: rgba(255,255,255,.05);
}
[data-theme="dark"] .card:hover {
    border-color: rgba(var(--brand-violet-rgb), .2);
    box-shadow:
        0 0 30px rgba(var(--brand-violet-rgb), .12),
        0 0 60px rgba(var(--brand-blue-rgb), .06),
        0 0 0 1px rgba(var(--brand-violet-rgb), .1);
}

/* Card-Header: tonal divider only between .card-header and .card-body (targeted) */
[data-theme="dark"] .card-header + .card-body {
    border-top: 1px solid rgba(255,255,255,.04);
}
[data-theme="light"] .card-header + .card-body {
    border-top: 1px solid rgba(0,0,0,.04);
}
[data-theme="dark"] .kpi-card:hover {
    box-shadow:
        0 0 40px rgba(var(--brand-violet-rgb), .18),
        0 0 80px rgba(var(--brand-blue-rgb), .08);
}
[data-theme="dark"] .btn.btn-primary:hover,
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] button.btn-primary:hover {
    box-shadow:
        0 8px 28px rgba(var(--brand-violet-rgb), .5),
        0 0 50px rgba(var(--brand-blue-rgb), .2);
    filter: brightness(1.1);
}

/* Topbar: Ghost-Border */
[data-theme="dark"] .topbar {
    border-bottom: 1px solid rgba(255,255,255,.05);
}

/* Dropdowns — Glassmorphism */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover,
[data-theme="dark"] [data-dropdown] {
    background: rgba(20,20,20,.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--brand-violet-rgb), .1);
    box-shadow:
        0 16px 48px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,255,255,.04);
    border-radius: var(--radius-lg);
}

/* Scrollbar */
[data-theme="dark"] * {
    scrollbar-color: rgba(var(--brand-violet-rgb), .25) transparent;
    scrollbar-width: thin;
}
[data-theme="dark"] *::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme="dark"] *::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        rgba(var(--brand-violet-rgb), .4),
        rgba(var(--brand-blue-rgb), .3));
    border-radius: 9999px;
}

/* ════════════════════════════════════════════════════════════════════════════
   18. CHART GRADIENT UTILITIES — LUMINOUS SLATE
   Spec: Charts must use Azure→Violet gradient; area fills with decreasing opacity.
   Grid lines: outline_variant at 10% opacity.
   ════════════════════════════════════════════════════════════════════════════ */

/* SVG area fill — references the <defs> gradient injected by chart_defs.php */
.chart-area-fill,
svg .chart-area-fill {
    fill: url(#chart-grad-primary);
}

/* SVG stroke/line — horizontal Azure→Violet */
.chart-line-stroke,
svg .chart-line-stroke {
    stroke: url(#chart-grad-line);
    fill: none;
}

/* Chart container — dark-mode glass panel */
.chart-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Chart grid lines: outline_variant at 10% opacity (spec) */
.chart-grid-line,
svg .chart-grid-line {
    stroke: rgba(var(--brand-violet-rgb), .10);
    stroke-width: 1;
}

/* Chart axis labels — label style (All-caps, +0.05em tracking, azure) */
.chart-axis-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Active data point / highlight glow */
.chart-point-active {
    filter: drop-shadow(0 0 6px rgba(var(--brand-violet-rgb), .6));
}

/* Pipeline stage — Deep Violet glow (spec: 40px spread, 20% opacity) */
.pipeline-stage-active {
    box-shadow: var(--glow-pipeline);
}

/* ════════════════════════════════════════════════════════════════════════════
   19. BREADCRUMBS & CODE
   ════════════════════════════════════════════════════════════════════════════ */

.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }

code {
    color: var(--accent);
    background: rgba(var(--accent-rgb), .08);
    padding: .1em .35em;
    border-radius: 4px;
    font-size: .875em;
}