/* ═══════════════════════════════════════════════════════════════
   Otimo Utilities – Återanvändbara CSS-klasser
   Ersätter vanliga inline-stilar i Razor-sidor.
   ═══════════════════════════════════════════════════════════════ */

/* ── Flexbox-layouts ──────────────────────────────────────────── */
.otimo-flex              { display: flex; }
.otimo-flex-col          { display: flex; flex-direction: column; }
.otimo-flex-center       { display: flex; align-items: center; }
.otimo-flex-between      { display: flex; justify-content: space-between; align-items: center; }
.otimo-flex-end          { display: flex; justify-content: flex-end; }
.otimo-flex-wrap         { flex-wrap: wrap; }

.otimo-gap-xs            { gap: var(--otimo-spacing-xs); }
.otimo-gap-sm            { gap: var(--otimo-spacing-sm); }
.otimo-gap-md            { gap: var(--otimo-spacing-md); }
.otimo-gap-lg            { gap: var(--otimo-spacing-lg); }

/* ── Grid-layouts ─────────────────────────────────────────────── */
.otimo-grid-2            { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.otimo-grid-3            { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; }
.otimo-grid-4            { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.otimo-grid-span-2       { grid-column: span 2; }
.otimo-grid-span-3       { grid-column: span 3; }

/* ── Marginaler ───────────────────────────────────────────────── */
.otimo-m-0               { margin: 0; }
.otimo-mb-xs             { margin-bottom: var(--otimo-spacing-xs); }
.otimo-mb-sm             { margin-bottom: var(--otimo-spacing-sm); }
.otimo-mb-md             { margin-bottom: var(--otimo-spacing-md); }
.otimo-mb-lg             { margin-bottom: var(--otimo-spacing-lg); }
.otimo-mb-xl             { margin-bottom: var(--otimo-spacing-xl); }
.otimo-mt-md             { margin-top: var(--otimo-spacing-md); }
.otimo-mt-lg             { margin-top: var(--otimo-spacing-lg); }

/* ── Padding ──────────────────────────────────────────────────── */
.otimo-p-md              { padding: var(--otimo-spacing-md); }
.otimo-p-lg              { padding: var(--otimo-spacing-lg); }
.otimo-pt-md             { padding-top: var(--otimo-spacing-md); }

/* ── Text ─────────────────────────────────────────────────────── */
.otimo-text-secondary    { color: var(--otimo-color-text-secondary); }
.otimo-text-muted        { color: var(--otimo-color-text-secondary); font-size: 0.85rem; }
.otimo-text-center       { text-align: center; }
.otimo-text-right        { text-align: right; }
.otimo-text-sm           { font-size: 0.85rem; }
.otimo-text-lg           { font-size: 1.25rem; }
.otimo-text-bold         { font-weight: 600; }
.otimo-text-nowrap       { white-space: nowrap; }

/* ── Sidrubriker ──────────────────────────────────────────────── */
.otimo-page-header       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.otimo-page-header h2    { margin: 0; }
.otimo-page-subtitle     { color: var(--otimo-color-text-secondary); margin-bottom: 24px; }

/* ── Detaljfält (label + värde) ───────────────────────────────── */
.otimo-detail-label      { color: var(--otimo-color-text-secondary); font-size: 0.85rem; }
.otimo-detail-value      { font-weight: 500; }

/* ── KPI-kort ─────────────────────────────────────────────────── */
.otimo-kpi               { text-align: center; }
.otimo-kpi-value         { font-size: 1.8rem; font-weight: 700; }
.otimo-kpi-value--danger { font-size: 1.8rem; font-weight: 700; color: var(--rz-danger); }
.otimo-kpi-label         { color: var(--otimo-color-text-secondary); font-size: 0.85rem; }

/* ── Panel/kort med ram ───────────────────────────────────────── */
.otimo-panel             { border: 1px solid var(--otimo-color-border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.otimo-panel--highlight  { border: 2px solid var(--rz-primary); }
.otimo-panel--danger     { border: 2px solid var(--rz-danger); background: var(--rz-danger-lighter); }

/* ── Laddningsindikator (centrerad) ───────────────────────────── */
.otimo-loader            { display: block; margin: 60px auto; }

/* ── Fullbredd ────────────────────────────────────────────────── */
.otimo-w-full            { width: 100%; }

/* ── Expanderbar detalj (DataGrid template) ───────────────────── */
.otimo-expand-detail     { padding: 12px; background: var(--rz-base-50); border-radius: 6px; overflow: hidden; max-width: 100%; box-sizing: border-box; word-break: break-word; }
.otimo-expand-detail pre { margin: 4px 0; font-size: 0.85rem; white-space: pre-wrap; max-height: 200px; overflow: auto; word-break: break-all; }

/* ── KPI-kortlayout ───────────────────────────────────────────── */
.otimo-kpi-grid          { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.otimo-kpi-grid > *      { flex: 1; min-width: 160px; }
.otimo-kpi-grid--loading > * { height: 120px; }

/* ── Kortrubrik (h3/h4 som första barn i RadzenCard) ─────────── */
.otimo-card-title        { margin-top: 0; }

/* ── Redigerbar sektion (kontakt/fakturering) ────────────────── */
.otimo-editable-panel    { border: 1px solid var(--rz-base-200); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.otimo-editable-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

/* ── Formulärgrid (2-kolumn) ─────────────────────────────────── */
.otimo-form-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.otimo-form-grid--wide   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.otimo-form-grid--policy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.otimo-grid-2col         { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* ── Skrivskyddad detaljgrid ─────────────────────────────────── */
.otimo-readonly-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }

/* ── Filterrad ────────────────────────────────────────────────── */
.otimo-filter-bar        { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.otimo-filter-bar--spaced { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 24px; }

/* ── Åtgärdsrad (knappar) ────────────────────────────────────── */
.otimo-actions           { display: flex; gap: 8px; }
.otimo-actions--spread   { display: flex; gap: 12px; }
.otimo-actions--border-top { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--rz-base-200); }
.otimo-actions--section  { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rz-base-200); }

/* ── Stor statusbadge ────────────────────────────────────────── */
.otimo-badge-lg          { font-size: 1rem; padding: 8px 16px; }
.otimo-badge-health      { font-size: 1.1rem; padding: 8px 16px; }

/* ── Centrerade smala sektioner ───────────────────────────────── */
.otimo-centered-narrow   { max-width: 440px; margin: 0 auto; }
.otimo-centered-form     { max-width: 650px; margin: 48px auto; }
.otimo-centered-block    { display: block; margin: 16px auto 0; }

/* ── Infopanel / callout ─────────────────────────────────────── */
.otimo-callout           { margin-top: 24px; padding: 16px; background: var(--otimo-color-background-secondary); border-radius: 8px; }
.otimo-callout--success  { margin-top: 16px; padding: 16px; background: #e8f5e9; border-radius: 8px; color: #2d7d6b; }
.otimo-callout--warning  { border: 1px solid var(--rz-warning-lighter); border-radius: 8px; padding: 16px; margin-bottom: 16px; background: var(--rz-base-50); }
.otimo-callout--inline   { margin-bottom: 16px; padding: 12px; background: var(--rz-base-100); border-radius: 6px; }

/* ── Prisrad ─────────────────────────────────────────────────── */
.otimo-price-summary     { border-top: 1px solid var(--rz-base-300); padding-top: 16px; margin-bottom: 16px; }
.otimo-price-line        { display: flex; justify-content: space-between; padding: 4px 0; }
.otimo-price-value       { font-weight: 600; }

/* ── Kontaktförfrågan-banner ─────────────────────────────────── */
.otimo-contact-banner    { grid-column: 1 / -1; padding: 8px 12px; background: #fff3e0; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
.otimo-contact-banner-text { color: #e65100; font-weight: 500; }
.otimo-contact-banner-icon { color: #e65100; }

/* ── Prisförhandsvisning (order expand) ──────────────────────── */
.otimo-price-preview     { margin-bottom: 16px; padding: 12px 16px; background: var(--rz-base-100); border-radius: 6px; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.otimo-price-effective   { font-size: 1.1rem; color: var(--rz-primary); }

/* ── Anteckningsrad ──────────────────────────────────────────── */
.otimo-note-card         { border: 1px solid var(--rz-base-200); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.otimo-note-header       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.otimo-note-body         { margin: 0; white-space: pre-wrap; }

/* ── Exportkort-rad ──────────────────────────────────────────── */
.otimo-export-row        { display: flex; gap: 16px; margin-top: 16px; }
.otimo-export-card       { flex: 1; max-width: 320px; }
.otimo-notifications-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.otimo-notifications-card { flex: 1; min-width: 300px; }

/* ── Hälsokort ────────────────────────────────────────────────── */
.otimo-health-grid       { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.otimo-health-card       { flex: 1; min-width: 280px; }
.otimo-health-meta       { margin-top: 8px; font-size: 0.85rem; }
.otimo-health-meta--danger { margin-top: 8px; color: var(--rz-danger); font-size: 0.85rem; }
.otimo-health-meta--muted { margin-top: 8px; font-size: 0.85rem; color: var(--otimo-color-text-secondary); }

/* ── CTA-stegindikator ───────────────────────────────────────── */
.otimo-step-indicator    { background: var(--rz-primary); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.otimo-step-row          { display: flex; align-items: center; gap: 12px; }
.otimo-steps-col         { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }

/* ── Audit/logg detalj-grid ──────────────────────────────────── */
.otimo-log-detail        { display: grid; grid-template-columns: 140px 1fr; gap: 4px 16px; font-size: 0.9rem; }
.otimo-log-detail--narrow { display: grid; grid-template-columns: 120px 1fr; gap: 4px 16px; font-size: 0.9rem; }

/* ── Verifieringsfält (inline OTP) ────────────────────────────── */
.otimo-verify-inline     { display: flex; gap: 8px; align-items: center; }
.otimo-otp-group         { display: flex; gap: 4px; align-items: center; }

/* ── Paginering ──────────────────────────────────────────────── */
.otimo-pagination        { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* ── Valideringsfelttext ─────────────────────────────────────── */
.otimo-field-error       { color: var(--otimo-color-error); font-size: 0.875rem; margin-top: 4px; }

/* ── Statusinfo-tabell (TrialStatus) ─────────────────────────── */
.otimo-status-table      { width: 100%; font-size: 0.95rem; }
.otimo-status-table td   { padding: 8px 0; }
.otimo-status-table td:first-child { color: var(--otimo-color-text-secondary); }

/* ── Sektion med margin ──────────────────────────────────────── */
.otimo-section-status    { margin: 24px 0; }

/* ── Subtil text under formulär ──────────────────────────────── */
.otimo-form-hint         { color: var(--otimo-color-text-secondary); font-size: 0.82rem; margin-top: 4px; }
.otimo-form-subtext      { color: var(--otimo-color-text-secondary); font-size: 0.875rem; margin-top: 4px; }

/* ── Hero-sektion compact ────────────────────────────────────── */
.otimo-hero--compact     { padding: 48px 0 32px; }

/* ── Länk utan dekoration ────────────────────────────────────── */
.otimo-link-plain        { text-decoration: none; }

/* ── Kodblock max-bredd ──────────────────────────────────────── */
.otimo-code-block--narrow { max-width: 600px; margin: 16px auto 0; }

/* ── Detaljpanel med primär-ram ──────────────────────────────── */
.otimo-selected-panel    { margin-top: 16px; border: 2px solid var(--rz-primary); }
.otimo-danger-panel      { margin-top: 16px; border: 2px solid var(--rz-danger); background: var(--rz-danger-lighter); }

/* ── Text-färger ──────────────────────────────────────────────── */
.otimo-text-danger       { color: var(--rz-danger); }

/* ── Kodblock ─────────────────────────────────────────────────── */
.otimo-code-block        { white-space: pre-wrap; font-size: 0.85rem; }

/* ── Inline actions (centered flex row) ──────────────────────── */
.otimo-actions-inline    { display: flex; gap: 6px; align-items: center; justify-content: center; }

/* ── Sektionsrubrik ──────────────────────────────────────────── */
.otimo-section-heading   { margin-top: 40px; margin-bottom: 16px; }
.otimo-section-heading-sm { margin: 16px 0 12px; }

/* ── Contact-banner (orange) ─────────────────────────────────── */
.otimo-contact-banner-text { color: #e65100; font-weight: 500; }

/* ── Price override / input row ──────────────────────────────── */
.otimo-price-override    { min-width: 200px; }
.otimo-price-input-row   { display: flex; gap: 8px; align-items: center; }
.otimo-price-highlight   { font-size: 1.1rem; color: var(--rz-primary); }

/* ── Actions section (border-top) ────────────────────────────── */
.otimo-actions-section   { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rz-base-200); }

/* ── Small text ──────────────────────────────────────────────── */
.otimo-text-sm           { font-size: 0.85rem; }

/* ── Word break ──────────────────────────────────────────────── */
.otimo-word-break        { word-break: break-all; }

/* ── Health-kort ─────────────────────────────────────────────── */
.otimo-health-card       { flex: 1; min-width: 280px; }
.otimo-health-note       { margin-top: 8px; font-size: 0.85rem; }

/* ── Spacing: xl ─────────────────────────────────────────────── */
.otimo-mb-xl             { margin-bottom: 32px; }
.otimo-mt-md             { margin-top: 16px; }

/* ── Align / flex helpers ────────────────────────────────────── */
.otimo-align-start       { align-items: flex-start; }
.otimo-flex-1            { flex: 1; }
.otimo-mt-xs             { margin-top: 4px; }
.otimo-mt-sm             { margin-top: 8px; }
.otimo-mt-lg             { margin-top: 24px; }
.otimo-max-w-sm          { max-width: 400px; }
.otimo-text-md           { font-size: 0.9rem; }
.otimo-pre-wrap          { white-space: pre-wrap; }
.otimo-text-italic       { font-style: italic; }
.otimo-text-tertiary     { color: var(--rz-text-tertiary-color); }
.otimo-grid-span-full    { grid-column: 1 / -1; }

/* ── Note-item (bordered card for notes) ─────────────────────── */
.otimo-note-item         { border: 1px solid var(--rz-base-200); border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.otimo-note-header       { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }

/* ── Pre constrained ─────────────────────────────────────────── */
.otimo-pre-constrained   { margin: 4px 0; max-height: 200px; overflow: auto; }

/* ── Dialog layout ───────────────────────────────────────────── */
.otimo-dialog-form       { display: flex; flex-direction: column; gap: 12px; }
.otimo-dialog-actions    { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ── Form grid (2-column policy style) ───────────────────────── */
.otimo-form-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }

/* ── Export cards ─────────────────────────────────────────────── */
.otimo-export-card       { flex: 1; max-width: 320px; }

/* ── Notification grid ───────────────────────────────────────── */
.otimo-notification-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.otimo-notification-card { flex: 1; min-width: 300px; }

/* ── API-key grid ────────────────────────────────────────────── */
.otimo-apikey-grid       { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; align-items: center; }
.otimo-text-base         { font-size: 1rem; }

/* ── List compact ────────────────────────────────────────────── */
.otimo-list-compact      { margin: 0; padding-left: 16px; }

/* ── Icon inline ─────────────────────────────────────────────── */
.otimo-icon-inline       { font-size: 1rem; vertical-align: middle; }

/* ── Details/summary (expanderbar sektion) ───────────────────── */
.otimo-details           { margin-top: 8px; }
.otimo-details-summary   { cursor: pointer; font-weight: 600; }
.otimo-details-body      { margin-top: 8px; padding: 8px; background: white; border: 1px solid var(--rz-base-300); border-radius: 4px; max-height: 300px; overflow-y: auto; }

/* ── Admin-badge i topbar ─────────────────────────────────────── */
.otimo-admin-badge       { background: var(--rz-danger); color: white; font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-left: 8px; }

/* ── Login / Verify ──────────────────────────────────────────── */
.otimo-login-hint        { margin-bottom: 4px; font-size: 0.875rem; color: var(--otimo-color-text-secondary); }
.otimo-login-client-card { margin-top: 12px; cursor: pointer; }
.otimo-login-client-id   { font-size: 0.8rem; color: var(--otimo-color-text-secondary); }
.otimo-login-footer      { text-align: center; margin-top: 24px; font-size: 0.875rem; color: var(--otimo-color-text-secondary); }
.otimo-verify-hint       { text-align: center; margin-bottom: 16px; color: var(--otimo-color-text-secondary); font-size: 0.9rem; }
.otimo-text-center       { text-align: center; }

/* ── Table scroll ────────────────────────────────────────────── */
.otimo-table-scroll      { overflow-x: auto; }

/* ── Step flow (CTA numbered steps) ──────────────────────────── */
.otimo-step-flow         { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 24px; }
.otimo-step-row          { display: flex; align-items: center; gap: 12px; }
.otimo-step-number       { background: var(--rz-primary); color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }

/* ── Hero logo ───────────────────────────────────────────────── */
.otimo-hero-logo         { height: 48px; margin-bottom: 24px; }

/* ── Icon expand ─────────────────────────────────────────────── */
.otimo-icon-expand       { font-size: 18px; color: var(--otimo-color-text-secondary); }

/* ── Link plain ──────────────────────────────────────────────── */
.otimo-link-plain        { text-decoration: none; }

/* ── Topbar logo ─────────────────────────────────────────────── */
.otimo-topbar-logo       { height: 32px; }

/* ── Quick links grid ────────────────────────────────────────── */
.otimo-quick-links       { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Flex wrap ───────────────────────────────────────────────── */
.otimo-flex-wrap          { flex-wrap: wrap; }

/* ── Margin left ─────────────────────────────────────────────── */
.otimo-ml-sm             { margin-left: 8px; }

/* ── Formulärlayout ───────────────────────────────────────────── */
.otimo-form-label        { display: block; margin-bottom: 4px; }

/* ── Radzen DataGrid expandrad – overflow-skydd ──────────────── */
.rz-datatable-rowexpansion > td { overflow: hidden; }
.rz-datatable-rowexpansion > td > * { max-width: 100%; overflow: hidden; box-sizing: border-box; word-break: break-word; }

/* ── Feature-detalj (parentes) i plankort ────────────────────── */
.otimo-feature-detail { font-size: 0.82em; color: var(--rz-text-secondary-color); }