/* ═══════════════════════════════════════════════════════════════
   Otimo Tema – Radzen CSS-variable overrides
   Enda stället där färger definieras.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Primärfärg (Otimo-blå) ───────────────────────────────── */
    --rz-primary: #2f6fa5;
    --rz-primary-lighter: #4a8ec4;
    --rz-primary-light: #a3c4e0;
    --rz-primary-dark: #265b86;

    /* ── Bakgrund ─────────────────────────────────────────────── */
    --rz-base-background-color: #ffffff;
    --rz-secondary-background-color: #f5f7f9;

    /* ── Text ─────────────────────────────────────────────────── */
    --rz-text-color: #1f2a33;
    --rz-text-secondary-color: #4f5b66;

    /* ── Statusfärger ─────────────────────────────────────────── */
    --rz-success: #2d7d6b;
    --rz-warning: #b58900;
    --rz-danger: #a94442;
    --rz-info: #2f6fa5;

    /* ── Ramar ────────────────────────────────────────────────── */
    --rz-border-color: #d8dee4;

    /* ── Otimo-specifika variabler ────────────────────────────── */
    --otimo-color-primary: #2f6fa5;
    --otimo-color-primary-hover: #265b86;
    --otimo-color-background-primary: #ffffff;
    --otimo-color-background-secondary: #f5f7f9;
    --otimo-color-text-primary: #1f2a33;
    --otimo-color-text-secondary: #4f5b66;
    --otimo-color-border: #d8dee4;
    --otimo-color-muted: #e9edf1;
    --otimo-color-success: #2d7d6b;
    --otimo-color-warning: #b58900;
    --otimo-color-error: #a94442;

    /* ── Formulärfält: placeholders & floating labels ─────────── */
    --rz-input-placeholder-color: #b0b0b0;
    --rz-text-tertiary-color: #b0b0b0;

    /* ── Spacing (4px grid) ───────────────────────────────────── */
    --otimo-spacing-xs: 4px;
    --otimo-spacing-sm: 8px;
    --otimo-spacing-md: 16px;
    --otimo-spacing-lg: 24px;
    --otimo-spacing-xl: 32px;
    --otimo-spacing-xxl: 48px;

    /* ── Typografi ────────────────────────────────────────────── */
    --otimo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --otimo-font-size-base: 1rem;
    --otimo-font-size-sm: 0.875rem;
    --otimo-font-size-lg: 1.25rem;

    /* ── Sidebar ──────────────────────────────────────────────── */
    --otimo-sidebar-width: 260px;
    --otimo-sidebar-collapsed-width: 0px;
    --otimo-topbar-height: 56px;
}

/* ── Radzen FormField: floating label vid fokus – samma färg som ramen ── */
.rz-form-field {
    --rz-form-field-label-focus-color: var(--rz-primary);
}

/* ═══════════════════════════════════════════════════════════════
   Globala bas-stilar
   ═══════════════════════════════════════════════════════════════ */

html, body {
    font-family: var(--otimo-font-family);
    font-size: var(--otimo-font-size-base);
    color: var(--otimo-color-text-primary);
    background-color: var(--otimo-color-background-primary);
    margin: 0;
    padding: 0;
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }

h1:focus { outline: none; }

a {
    color: var(--otimo-color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--otimo-color-primary-hover);
    text-decoration: underline;
}

/* ── Validering ───────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--otimo-color-success);
}

.invalid {
    outline: 1px solid var(--otimo-color-error);
}

.validation-message {
    color: var(--otimo-color-error);
    font-size: var(--otimo-font-size-sm);
}

/* ── Blazor error boundary ────────────────────────────────────── */
.blazor-error-boundary {
    background: var(--otimo-color-error);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ett fel har inträffat.";
}

/* ═══════════════════════════════════════════════════════════════
   Exempelstatistik (produktsida)
   ═══════════════════════════════════════════════════════════════ */

.otimo-example-block {
    margin-bottom: var(--otimo-spacing-xl);
}

.otimo-example-block h3 {
    display: flex;
    align-items: center;
    gap: var(--otimo-spacing-sm);
    margin-bottom: var(--otimo-spacing-sm);
}

.otimo-example-card {
    padding: var(--otimo-spacing-lg) !important;
}

.otimo-example-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--otimo-spacing-lg);
    align-items: start;
}

.otimo-example-chart-col,
.otimo-example-detail-col {
    min-width: 0;
}

.otimo-example-summary {
    margin-top: var(--otimo-spacing-md);
    padding-top: var(--otimo-spacing-md);
    border-top: 1px solid var(--otimo-color-border);
}

.otimo-example-note {
    margin-top: var(--otimo-spacing-sm);
    font-size: var(--otimo-font-size-sm);
    color: var(--otimo-color-text-secondary);
}

/* ── Exempeltabeller ──────────────────────────────────────────── */

.otimo-sample-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--otimo-font-size-sm);
}

.otimo-sample-table th,
.otimo-sample-table td {
    padding: var(--otimo-spacing-xs) var(--otimo-spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--otimo-color-border);
}

.otimo-sample-table thead th {
    font-weight: 600;
    color: var(--otimo-color-text-secondary);
    border-bottom: 2px solid var(--otimo-color-border);
}

.otimo-sample-table tfoot td {
    border-top: 2px solid var(--otimo-color-border);
    border-bottom: none;
}

.otimo-sample-table--compact {
    max-width: 400px;
}

.otimo-sample-table--compact td {
    padding: var(--otimo-spacing-xs) var(--otimo-spacing-md);
}

/* ── Score-färger ─────────────────────────────────────────────── */

.otimo-score-high {
    color: var(--otimo-color-success);
    font-weight: 600;
}

.otimo-score-medium {
    color: var(--otimo-color-warning);
    font-weight: 600;
}

.otimo-score-low {
    color: var(--otimo-color-error);
    font-weight: 600;
}

/* ── Responsiv: exempelrad ────────────────────────────────────── */

@media (max-width: 768px) {
    .otimo-example-row {
        grid-template-columns: 1fr;
    }
}