/*
 * OM-Cockpit theme – dense, panel-based look after Ahrefs.
 * Loaded after Filament's CSS via a render hook (AdminPanelProvider), no build step.
 * Colors are tokens; dark is the default theme, light gets its own values.
 */

:root {
    --om-bg: #f3f3f3;
    --om-panel: #ffffff;
    --om-panel-alt: #f7f7f7;
    --om-border: #e1e1e1;
    --om-text: #1d1d1d;
    --om-muted: #6b6b6b;
    --om-blue: #1f78d1;
    --om-orange: #e67700;
    --om-green: #2e8b3e;
    --om-red: #d93a3a;
    --om-radius: 4px;
}

.dark {
    --om-bg: #1f1f1f;
    --om-panel: #2b2b2b;
    --om-panel-alt: #323232;
    --om-border: #3b3b3b;
    --om-text: #e8e8e8;
    --om-muted: #9c9c9c;
    --om-blue: #4aa3f5;
    --om-orange: #ff8a00;
    --om-green: #5fbf5f;
    --om-red: #f06262;
}

/* ---- Frame ---------------------------------------------------------------------------- */

.fi-body,
.fi-layout,
.fi-main-ctn {
    background: var(--om-bg);
}

.fi-topbar > nav,
.fi-topbar {
    background: var(--om-panel);
    border-bottom: 1px solid var(--om-border);
    box-shadow: none;
}

.fi-sidebar {
    background: var(--om-panel);
    border-right: 1px solid var(--om-border);
}

.fi-sidebar-item-label {
    font-size: 0.8125rem;
}

.fi-main {
    padding-inline: 1.25rem;
}

.fi-header-heading {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---- Panels (sections, widgets, tables) ---------------------------------------------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.om-panel {
    background: var(--om-panel);
    border: 1px solid var(--om-border);
    border-radius: var(--om-radius);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-section-header-heading,
.fi-ta-header-heading {
    font-size: 0.875rem;
    font-weight: 600;
}

.fi-section-header-description,
.fi-ta-header-description {
    font-size: 0.8125rem;
    color: var(--om-muted);
}

/* KPI tiles: small label, big figure, inline delta, flat sparkline */
.fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
}

.fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    color: var(--om-muted);
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.2;
}

.om-delta {
    margin-left: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    vertical-align: middle;
}

.om-delta-up { color: var(--om-green); }
.om-delta-down { color: var(--om-red); }

/* Tables: compact rows like Ahrefs reports */
.fi-ta-header-cell,
.fi-ta-cell {
    padding-block: 0.45rem;
}

.fi-ta-header-cell-label {
    font-size: 0.75rem;
    font-weight: 600;
}

.fi-ta-text-item-label,
.fi-ta-cell {
    font-size: 0.8125rem;
}

/* ---- Shared bits --------------------------------------------------------------------- */

.om-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--om-muted);
}

.om-muted { color: var(--om-muted); }

.om-spark {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 0.5rem;
}

.om-spark polyline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.om-spark polygon { stroke: none; opacity: 0.18; }
.om-spark-blue polyline { stroke: var(--om-blue); }
.om-spark-blue polygon { fill: var(--om-blue); }
.om-spark-orange polyline { stroke: var(--om-orange); }
.om-spark-orange polygon { fill: var(--om-orange); }

/* ---- Cockpit page -------------------------------------------------------------------- */

.om-principle {
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--om-orange);
    background: var(--om-panel);
    border-radius: var(--om-radius);
}

.om-principle p {
    font-size: 0.9375rem;
    color: var(--om-text);
}

.om-cockpit-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.om-cockpit-card {
    padding: 1rem 1.125rem 1.125rem;
}

.om-cockpit-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.om-cockpit-card-head h2 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--om-text);
}

.om-step {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: var(--om-orange);
    color: #1f1f1f;
    font-size: 0.75rem;
    font-weight: 700;
}

.om-decision {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--om-text);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--om-border);
}

.om-decision.om-muted {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--om-muted);
}

.om-facts {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.om-facts dt {
    font-size: 0.75rem;
    color: var(--om-muted);
}

.om-facts dd {
    font-size: 0.8125rem;
    color: var(--om-text);
    line-height: 1.45;
}

.om-facts ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.om-facts li {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--om-border);
    border-radius: 3px;
    background: var(--om-panel-alt);
}

/* ---- All projects (Ahrefs "Projekte" list) ------------------------------------------- */

.om-projects {
    display: grid;
    gap: 0.75rem;
}

.om-project {
    padding: 0.875rem 1rem 1rem;
}

.om-project-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.om-project-avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--om-radius);
    background: var(--om-panel-alt);
    border: 1px solid var(--om-border);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--om-orange);
}

.om-project-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--om-text);
}

.om-project-name:hover { color: var(--om-orange); }

.om-project-url {
    font-size: 0.75rem;
    color: var(--om-muted);
}

.om-project-role {
    margin-left: auto;
    padding: 0.05rem 0.5rem;
    border: 1px solid var(--om-border);
    border-radius: 999px;
    font-size: 0.6875rem;
    color: var(--om-muted);
}

.om-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.om-metric {
    padding: 0 1rem;
    border-left: 1px solid var(--om-border);
}

.om-metric:first-child {
    padding-left: 0;
    border-left: 0;
}

.om-metric-label {
    font-size: 0.75rem;
    color: var(--om-muted);
}

.om-metric-value {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--om-text);
}

.om-metric-sub {
    font-size: 0.6875rem;
    color: var(--om-muted);
}

.om-score {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    color: #fff;
}

.om-score-good { background: #3f9c46; }
.om-score-ok { background: #c98a00; }
.om-score-bad { background: #c94141; }

@media (max-width: 640px) {
    .om-metric {
        padding: 0.5rem 0;
        border-left: 0;
        border-top: 1px solid var(--om-border);
    }
}