/* ==========================================================================
   SearchlyFlow Dashboard — Modernisierungs-Schicht
   Wird NACH dashboard.css geladen und ueberschreibt gezielt das Erscheinungs-
   bild. Der Original-Code bleibt unveraendert; alle Farben/Radien/Schatten
   laufen ueber CSS-Variablen (Fundament fuer ein spaeteres Dark Theme).
   ========================================================================== */

:root {
    /* Akzent: eine Farbe fuer Buttons, Links, Fokus */
    --sf-primary: #0080ff;
    --sf-primary-hover: #0066cc;
    --sf-primary-soft: #eef2ff;
    --sf-primary-ring: rgba(79, 70, 229, 0.16);

    /* Flaechen */
    --sf-bg: #f1f5f9;
    --sf-surface: #ffffff;
    --sf-surface-soft: #f8fafc;

    /* Text */
    --sf-text: #0f172a;
    --sf-text-muted: #64748b;
    --sf-text-soft: #475569;

    /* Linien */
    --sf-border: #e2e8f0;
    --sf-border-strong: #cbd5e1;

    /* Formen */
    --sf-radius: 14px;
    --sf-radius-sm: 10px;

    /* Schatten: weicher, gestaffelt */
    --sf-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --sf-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
    --sf-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

    /* Sidebar / Header */
    --sf-sidebar-bg: #0f172a;
    --sf-sidebar-hover: rgba(148, 163, 184, 0.14);
    --sf-sidebar-active: rgba(99, 102, 241, 0.22);
}

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--sf-bg);
    color: var(--sf-text);
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
    background: var(--sf-sidebar-bg);
    box-shadow: var(--sf-shadow);
    position: relative;
    z-index: 20;
}

.header h2 {
    letter-spacing: -0.01em;
}

/* Aktualisieren-Button an das neue Farbschema angleichen */
.dashboard-refresh-btn {
    border-color: var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.dashboard-refresh-btn:hover {
    background: #1e293b;
    border-color: var(--sf-primary);
}

/* Mandanten-Auswahl unterhalb der Überschrift umbrechen (schmale Viewports) */
@media (max-width: 950px) {
    .dashboard-tenant-switcher {
        position: static;
        transform: none;
        min-width: 0;
        max-width: 100%;
        margin: 4px 0 10px;
    }

    .dashboard-tenant-select {
        width: 100%;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
    background: var(--sf-sidebar-bg);
}

.nav-btn {
    border-radius: var(--sf-radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-btn:hover {
    background: var(--sf-sidebar-hover);
}

.nav-btn.active {
    background: var(--sf-sidebar-active);
    color: #ffffff;
    box-shadow: inset 2px 0 0 var(--sf-primary);
}

.sub-btn.active {
    background: var(--sf-sidebar-active);
}

.nav-group > .nav-btn::after {
    opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Karten & Panels
   -------------------------------------------------------------------------- */

.card,
.table-wrap,
.controls,
.detail-mini-card {
    border-radius: var(--sf-radius);
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
}

.card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
    box-shadow: var(--sf-shadow-lg);
}

.card .label {
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
    font-weight: 600;
}

.card .value {
    color: var(--sf-text);
    letter-spacing: -0.02em;
}

span#synonymSuggestionsMeta {
    padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Tabellen
   -------------------------------------------------------------------------- */

table:not(.theme-token-table) th {
    background: var(--sf-surface-soft);
    color: var(--sf-text-soft);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
}

table:not(.theme-token-table) td {
    color: var(--sf-text) !important;
    border-bottom: 1px solid var(--sf-border);
    padding: 12px 16px;
}

table:not(.theme-token-table) tbody tr {
    transition: background 0.12s ease;
}

table:not(.theme-token-table) tbody tr:hover {
    background: var(--sf-surface-soft);
}

table:not(.theme-token-table) tbody tr:last-child td {
    border-bottom: none;
}

/* --------------------------------------------------------------------------
   Buttons & Formulare
   -------------------------------------------------------------------------- */

.controls button,
.sync-btn {
    background: var(--sf-primary);
    border-radius: var(--sf-radius-sm);
    font-weight: 600;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.controls button:hover,
.sync-btn:hover {
    background: var(--sf-primary-hover);
    box-shadow: var(--sf-shadow-sm);
}

.controls input,
.controls select,
.admin-assignment-controls select,
.admin-assignment-controls input {
    border-color: var(--sf-border-strong);
    border-radius: var(--sf-radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.controls input:focus,
.controls select:focus,
.admin-assignment-controls select:focus,
.admin-assignment-controls input:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px var(--sf-primary-ring);
}

.dashboard-tenant-select:focus {
    border-color: var(--sf-primary);
    box-shadow: 0 0 0 3px var(--sf-primary-ring);
}

/* --------------------------------------------------------------------------
   Badges & Status
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.healthy,
.badge.success {
    background: #dcfce7;
    color: #15803d;
}

.warning,
.badge.warning {
    background: #fef9c3;
    color: #611212;
}

.critical,
.badge.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.unknown {
    background: #e2e8f0;
    color: #475569;
}

/* --------------------------------------------------------------------------
   Empfehlungs-Karten
   -------------------------------------------------------------------------- */

.recommendation-card {
    border-left-color: var(--sf-primary);
    border-radius: var(--sf-radius-sm);
    box-shadow: var(--sf-shadow-sm);
    transition: box-shadow 0.2s ease;
}

.recommendation-card:hover {
    box-shadow: var(--sf-shadow);
}

/* --------------------------------------------------------------------------
   Sektions-Ueberschriften
   -------------------------------------------------------------------------- */

.section-header h2 {
    letter-spacing: -0.02em;
    color: var(--sf-text);
}

.section-header p {
    color: var(--sf-text-muted);
}

/* --------------------------------------------------------------------------
   Feinheiten
   -------------------------------------------------------------------------- */

::selection {
    background: var(--sf-primary-soft);
    color: var(--sf-primary);
}

/* Scrollbar dezent */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--sf-border-strong);
    border-radius: 999px;
    border: 2px solid var(--sf-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --------------------------------------------------------------------------
   Akzent-Vereinheitlichung: verbliebene #0080ff-Stellen im Original-CSS
   (moderate Overrides, gleiche Spezifitaet -> letzte Regel gewinnt)
   -------------------------------------------------------------------------- */

/* Feeds: Feed-erstellen-Button + Fokus + Upload-Box */
button#createFeedButton,
.feed-create-btn {
    background: var(--sf-primary);
    color: #ffffff;
}

.feed-create-btn {
    background: var(--sf-primary) !important;
    color: #ffffff !important;
}

.feed-create-grid input:focus,
.feed-create-grid select:focus,
.feed-table-input:focus {
    border-color: var(--sf-primary) !important;
    box-shadow: 0 0 0 3px var(--sf-primary-ring) !important;
}

.feed-upload-box:hover,
.feed-upload-box.drag-over {
    border-color: var(--sf-primary);
}

.feed-upload-file {
    color: var(--sf-primary);
}

/* Scheduler: aktive Zeit-Auswahl */
#section_scheduler {
    --scheduler-primary: var(--sf-primary);
    --scheduler-primary-soft: var(--sf-primary-soft);
}

#section_scheduler .scheduler-feed-weekday.active,
#section_scheduler .scheduler-feed-hour.active {
    border-color: var(--sf-primary);
    background: var(--sf-primary);
}

#section_scheduler .scheduler-feed-minute:hover {
    border-color: var(--sf-primary);
    background: var(--sf-primary-soft);
}

/* System-Status-Karten */
.system-health-card:hover {
    border-color: var(--sf-primary);
}

.system-health-card.info .system-health-value {
    color: var(--sf-primary);
}

/* Merchandising-Icon-Buttons */
.merch-icon-btn.edit,
.merch-icon-btn.toggle {
    background: var(--sf-primary);
}

/* API-Keys: Copy-Button + Integrations-Status */
#section_apiKeys .integration-copy-button,
#section_apiKeys .integration-health-header button {
    background: var(--sf-primary);
    color: #ffffff;
}

.integration-selector-state[data-state="manual"] {
    color: var(--sf-primary);
}