/* =========================================================
   WHITELABEL LAYER
   ---------------------------------------------------------
   Detta �r ENDA st�llet d�r branding p�verkar UI.
   Inga h�rdkodade f�rger f�r finnas i templates.
   Alla f�rger styrs via CSS-variabler.
   Variabler override:as dynamiskt via PHP.
   ========================================================= */


/* =========================================================
   1?? Brand Variables (Fallback values)
   ---------------------------------------------------------
   Dessa v�rden anv�nds endast om PHP inte injectar
   branding fr�n databasen.
   ========================================================= */

:root {

    /* Core brand colors */
    --brand-primary: #8420d4;
    --brand-primary-rgb: 132, 32, 212; /* anv�nds f�r rgba() */
    --brand-secondary: #4d4d4d;

    /* Text contrast */
    --brand-text-on-primary: #ffffff;
    --brand-text-on-secondary: #ffffff;
    --modal-close-filter: invert(1) grayscale(100%) brightness(200%);

    /* Typography ? overridden by render_brand_css() per brand */
    --brand-font-body: 'Open Sans', system-ui, sans-serif;
    --brand-font-heading: 'Bakbak One', system-ui, sans-serif;
    --brand-font-heading-weight: 400;
    --brand-font-heading-synthesis: none;

    /* Semantic colors (kan ev. bli brand-drivna senare) */
    --brand-success: #198754;
    --brand-danger: #dc3545;
    --brand-warning: #ffc107;
    --brand-info: #0dcaf0;

    /* Form styling */
    --form-focus-color: var(--brand-primary);
    --form-focus-shadow: rgba(var(--brand-primary-rgb), 0.25);

    /* Radius system */
    --input-border-radius: 0.375rem;
    --card-border-radius: 0.75rem;

    /* Ring specific */
    --ring-fill: var(--brand-primary);
    --ring-track: #e9ecef;

      /* Surfaces */
  --sa-surface-topbar: rgba(255,255,255,.90);
  --sa-surface-card: #ffffff;
  --sa-surface-panel: #ffffff;

  --sa-shadow-sidebar: 4px 0 20px rgba(0,0,0,.15);
}


body {
    background-color: #F1F0F5;
}

/* Topbar surface */
.sa-topbar {
  background: var(--sa-surface-topbar);
  border-bottom: 1px solid var(--sa-border);
}

/* Cards */
.sa-card {
  background: var(--sa-surface-card);
  border: 1px solid var(--sa-border);
  box-shadow: var(--sa-shadow);
}

/* Sidebar */
.sa-sidebar {
  box-shadow: var(--sa-shadow-sidebar);
}

/* Panels */
.sa-health-details {
  background: var(--sa-surface-panel);
  border: 1px solid var(--sa-border);
}

/* =========================================================
   2?? Typography
   ---------------------------------------------------------
   Typsnitt ligger h�r eftersom de �r brand-relaterade.
   @font-face injiceras runtime via render_brand_css().
   ========================================================= */

html,
body {
    font-family: var(--brand-font-body, 'Open Sans', system-ui, sans-serif);
}

/*
 * Brand-rubriker (Bakbak m.m.) ? bara admin/SiteAdmin-UI, INTE .sa_editor_preview.
 * Live-sajten laddar inte whitelabel; preview ska f�lja sajtens --sa-font-heading / --sa-heading-weight.
 */
body:not(.sa-editor-template) h1,
body:not(.sa-editor-template) h2,
body:not(.sa-editor-template) h3,
body:not(.sa-editor-template) h4,
body:not(.sa-editor-template) h5,
body:not(.sa-editor-template) h6,
body:not(.sa-editor-template) .header-font,
.sa-editor-template .sa_editor_topbar h1,
.sa-editor-template .sa_sections_panel h1,
.sa-editor-template .sa_sections_panel h2,
.sa-editor-template .sa_sections_panel h3,
.sa-editor-template .sa_code_editor h1,
.sa-editor-template .sa_code_editor h2,
.sa-editor-template .modal h1,
.sa-editor-template .modal h2,
.sa-editor-template .modal h3,
.sa-editor-template .modal .header-font {
    font-family: var(--brand-font-heading, 'Bakbak One', system-ui, sans-serif);
    font-weight: var(--brand-font-heading-weight, 400);
    font-synthesis: var(--brand-font-heading-synthesis, none);
}

/* Bootstrap fw-* ? brandad rubrikvikt (t.ex. 400 f�r Bakbak) ? ej inne i preview */
body:not(.sa-editor-template) h1.fw-bold,
body:not(.sa-editor-template) h2.fw-bold,
body:not(.sa-editor-template) h3.fw-bold,
body:not(.sa-editor-template) h4.fw-bold,
body:not(.sa-editor-template) h5.fw-bold,
body:not(.sa-editor-template) h6.fw-bold,
body:not(.sa-editor-template) h1.fw-semibold,
body:not(.sa-editor-template) h2.fw-semibold,
body:not(.sa-editor-template) h3.fw-semibold,
body:not(.sa-editor-template) h4.fw-semibold,
body:not(.sa-editor-template) h5.fw-semibold,
body:not(.sa-editor-template) h6.fw-semibold,
body:not(.sa-editor-template) h1.fw-bolder,
body:not(.sa-editor-template) h2.fw-bolder,
body:not(.sa-editor-template) h3.fw-bolder,
body:not(.sa-editor-template) h4.fw-bolder,
body:not(.sa-editor-template) h5.fw-bolder,
body:not(.sa-editor-template) h6.fw-bolder,
body:not(.sa-editor-template) .header-font.fw-bold,
body:not(.sa-editor-template) .header-font.fw-semibold,
body:not(.sa-editor-template) .header-font.fw-bolder {
    font-weight: var(--brand-font-heading-weight, 400) !important;
    font-synthesis: var(--brand-font-heading-synthesis, none);
}


/* =========================================================
   3?? Buttons (Bootstrap override layer)
   ---------------------------------------------------------
   Brand-knappar ? INTE inne i .sa_editor_preview (sajten har egna tokens).
   ========================================================= */

body:not(.sa-editor-template) .btn-primary,
body:not(.sa-editor-template) .btn-brand,
body:not(.sa-editor-template) .auth-btn,
.sa-editor-template .sa_editor_topbar .btn-primary,
.sa-editor-template .sa_editor_topbar .btn-brand,
.sa-editor-template .sa_sections_panel .btn-primary,
.sa-editor-template .sa_sections_panel .btn-brand,
.sa-editor-template .modal .btn-primary,
.sa-editor-template .modal .btn-brand,
.sa-editor-template .modal .auth-btn,
.sa-editor-template .offcanvas .btn-primary,
.sa-editor-template .dropdown-menu .btn-primary {
    background-color: var(--brand-primary)!important;
    border-color: var(--brand-primary)!important;
    color: var(--brand-text-on-primary)!important;
}

body:not(.sa-editor-template) .btn-primary:hover,
body:not(.sa-editor-template) .btn-brand:hover,
body:not(.sa-editor-template) .auth-btn:hover,
.sa-editor-template .sa_editor_topbar .btn-primary:hover,
.sa-editor-template .sa_editor_topbar .btn-brand:hover,
.sa-editor-template .sa_sections_panel .btn-primary:hover,
.sa-editor-template .modal .btn-primary:hover,
.sa-editor-template .modal .btn-brand:hover,
.sa-editor-template .modal .auth-btn:hover {
    background-color: color-mix(in srgb, var(--brand-primary) 82%, #000000) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 82%, #000000) !important;
    color: var(--brand-text-on-primary) !important;
}

body:not(.sa-editor-template) .btn-primary:focus,
body:not(.sa-editor-template) .btn-brand:focus,
body:not(.sa-editor-template) .auth-btn:focus,
.sa-editor-template .modal .btn-primary:focus,
.sa-editor-template .modal .auth-btn:focus {
    box-shadow: 0 0 0 0.25rem var(--form-focus-shadow);
}

body:not(.sa-editor-template) .btn-outline-primary,
.sa-editor-template .sa_editor_topbar .btn-outline-primary,
.sa-editor-template .modal .btn-outline-primary,
.sa-editor-template .sa_sections_panel .btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}

body:not(.sa-editor-template) .btn-outline-primary:hover,
.sa-editor-template .sa_editor_topbar .btn-outline-primary:hover,
.sa-editor-template .modal .btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

body:not(.sa-editor-template) .btn-outline-primary:focus,
body:not(.sa-editor-template) .btn-outline-primary:focus-visible,
.sa-editor-template .modal .btn-outline-primary:focus,
.sa-editor-template .modal .btn-outline-primary:focus-visible {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--form-focus-shadow) !important;
}

body:not(.sa-editor-template) .btn-success,
.sa-editor-template .sa_editor_topbar .btn-success,
.sa-editor-template .modal .btn-success,
.sa-editor-template .sa_sections_panel .btn-success {
    background-color: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
    color: #ffffff !important;
}

body:not(.sa-editor-template) .btn-success:hover,
.sa-editor-template .sa_editor_topbar .btn-success:hover,
.sa-editor-template .modal .btn-success:hover {
    background-color: color-mix(in srgb, var(--brand-success) 82%, #000000) !important;
    border-color: color-mix(in srgb, var(--brand-success) 82%, #000000) !important;
    color: #ffffff !important;
}

body:not(.sa-editor-template) .btn-success:focus,
.sa-editor-template .modal .btn-success:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-success) 45%, transparent) !important;
}

/* =========================================================
   4?? Links
   ---------------------------------------------------------
   Brand-l�nkar i admin ? INTE i .sa_editor_preview.
   ========================================================= */

body:not(.sa-editor-template) a,
.sa-editor-template .sa_editor_topbar a,
.sa-editor-template .sa_sections_panel a,
.sa-editor-template .sa_code_editor a,
.sa-editor-template .modal a,
.sa-editor-template .dropdown-menu a,
.sa-editor-template .zen-menu a,
.sa-editor-template .list-group a,
.sa-editor-template .pagination a,
.sa-editor-template .nav-tabs a {
    color: var(--brand-primary)!important;
    transition: color 0.2s ease;
}

body:not(.sa-editor-template) a:hover,
.sa-editor-template .sa_editor_topbar a:hover,
.sa-editor-template .sa_sections_panel a:hover,
.sa-editor-template .modal a:hover,
.sa-editor-template .dropdown-menu a:hover,
.sa-editor-template .zen-menu a:hover {
    color: var(--brand-secondary)!important;
}

a.skip-link,
a.skip-link:hover,
a.skip-link:focus {
    color: #111 !important;
}

body:not(.sa-editor-template) .auth-photo-credit a,
body:not(.sa-editor-template) .auth-photo-credit a:hover {
    color: inherit !important;
}

body:not(.sa-editor-template) a.btn,
.sa-editor-template .sa_editor_topbar a.btn,
.sa-editor-template .modal a.btn,
.sa-editor-template .sa_sections_panel a.btn {
    color: var(--bs-btn-color) !important;
}
body:not(.sa-editor-template) a.btn:hover,
.sa-editor-template .sa_editor_topbar a.btn:hover,
.sa-editor-template .modal a.btn:hover {
    color: var(--bs-btn-hover-color, var(--bs-btn-color)) !important;
}

body:not(.sa-editor-template) a.btn.btn-primary,
body:not(.sa-editor-template) a.btn.btn-brand,
body:not(.sa-editor-template) a.auth-btn,
.sa-editor-template .sa_editor_topbar a.btn.btn-primary,
.sa-editor-template .modal a.btn.btn-primary,
.sa-editor-template .modal a.btn.btn-brand,
.sa-editor-template .modal a.auth-btn {
    color: var(--brand-text-on-primary, #ffffff) !important;
}
body:not(.sa-editor-template) a.btn.btn-primary:hover,
body:not(.sa-editor-template) a.btn.btn-brand:hover,
body:not(.sa-editor-template) a.auth-btn:hover,
.sa-editor-template .modal a.btn.btn-primary:hover,
.sa-editor-template .modal a.auth-btn:hover {
    color: var(--brand-text-on-primary, #ffffff) !important;
}
body:not(.sa-editor-template) a.btn.btn-success,
body:not(.sa-editor-template) a.btn.btn-success:hover,
body:not(.sa-editor-template) a.btn.btn-success:focus,
.sa-editor-template .sa_editor_topbar a.btn.btn-success,
.sa-editor-template .sa_editor_topbar a.btn.btn-success:hover,
.sa-editor-template .modal a.btn.btn-success,
.sa-editor-template .modal a.btn.btn-success:hover {
    color: #ffffff !important;
}
body:not(.sa-editor-template) a.btn.btn-dark,
body:not(.sa-editor-template) a.btn.btn-dark:hover,
.sa-editor-template .modal a.btn.btn-dark,
.sa-editor-template .modal a.btn.btn-dark:hover {
    color: #ffffff !important;
}
body:not(.sa-editor-template) a.btn.gs-btn-action,
body:not(.sa-editor-template) a.btn.gs-btn-action:hover,
body:not(.sa-editor-template) a.btn.gs-btn-action:focus,
body:not(.sa-editor-template) a.btn.gs-btn-action:active,
.sa-editor-template .sa_editor_topbar a.btn.gs-btn-action,
.sa-editor-template .modal a.btn.gs-btn-action {
    color: #ffffff !important;
}
body:not(.sa-editor-template) a.btn.btn-outline-primary,
.sa-editor-template .sa_editor_topbar a.btn.btn-outline-primary,
.sa-editor-template .modal a.btn.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
body:not(.sa-editor-template) a.btn.btn-outline-primary:hover,
.sa-editor-template .modal a.btn.btn-outline-primary:hover {
    color: var(--brand-text-on-primary) !important;
}


/* =========================================================
   5?? Forms
   ---------------------------------------------------------
   Fokustillst�nd anv�nder brand-f�rg.
   ========================================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--form-focus-color)!important;
    box-shadow: 0 0 0 0.25rem var(--form-focus-shadow);
}

.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* =========================================================
   6?? Cards
   ========================================================= */

.card {
    border-radius: var(--card-border-radius);
}

body:not(.sa-editor-template) .card-header,
body:not(.sa-editor-template) .modal-header,
.sa-editor-template .sa_editor_topbar .card-header,
.sa-editor-template .sa_sections_panel .card-header,
.sa-editor-template .modal .card-header,
.sa-editor-template .modal .modal-header,
.sa-editor-template .offcanvas .card-header {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

body:not(.sa-editor-template) .card-header.bg-light,
.sa-editor-template .modal .card-header.bg-light {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

/* bg-white m?ste vinna �ver body .card-header (brand-primary) ? annars osynlig text-primary. */
body:not(.sa-editor-template) .card-header.bg-white,
.sa-editor-template .modal .card-header.bg-white,
.card-header.bg-white {
    background-color: #fff !important;
    color: var(--bs-body-color, #212529) !important;
}

/* St�ng-knapp (X) ? kontrast mot headerbakgrund + hover */
.modal-header .btn-close {
    opacity: 0.88;
    filter: var(--modal-close-filter, invert(1) grayscale(100%) brightness(200%));
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Offcanvas-paneler �r ljusa ? m�rk X. (sa-offcanvas �r m�rk och inverteras nedan.) */
.offcanvas-header .btn-close {
    opacity: 0.72;
    filter: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal-header .btn-close:hover,
.modal-header .btn-close:focus,
.offcanvas-header .btn-close:hover,
.offcanvas-header .btn-close:focus {
    opacity: 1;
    transform: scale(1.2);
}

.modal-header.bg-light .btn-close,
.modal-header.bg-white .btn-close,
.modal-header.text-dark .btn-close {
    --modal-close-filter: none;
}


/* =========================================================
   7?? Alerts and toasts
   ---------------------------------------------------------
   Primary alert anv�nder brand-f�rgen i mjuk ton.
   ========================================================= */

.alert-primary {
    background-color: rgba(var(--brand-primary-rgb), 0.15)!important;
    border-color: rgba(var(--brand-primary-rgb), 0.3)!important;
    color: var(--brand-primary)!important;
}


.toast-success {
    background-color: var(--brand-success) !important;
    color: #fff !important;
}

.toast-error {
    background-color: var(--brand-danger) !important;
    color: #fff !important;
}

.toast-warning {
    background-color: var(--brand-warning) !important;
    color: #000 !important;
}

.toast-info {
    background-color: var(--brand-info) !important;
    color: #000 !important;
}

/* =========================================================
   8?? Guest / Auth specific color bindings
   ---------------------------------------------------------
   Endast f�rger ? layout ligger i template.
   ========================================================= */

.auth-footer {
    color: var(--brand-secondary)!important;
}

.brand-dot {
    background-color: var(--brand-primary)!important;
}

.password-toggle:focus {
    box-shadow: 0 0 0 0.25rem var(--form-focus-shadow);
}


/* =========================================================
   9?? Utility Classes
   ---------------------------------------------------------
   Sm� helpers f�r komponenter.
   ========================================================= */

/*
 * Brand-utilities ? INTE inne i .sa_editor_preview (sajten har --sa-color-primary).
 */
body:not(.sa-editor-template) .text-brand,
body:not(.sa-editor-template) .text-primary,
.sa-editor-template .sa_editor_topbar .text-brand,
.sa-editor-template .sa_editor_topbar .text-primary,
.sa-editor-template .sa_sections_panel .text-primary,
.sa-editor-template .sa_code_editor .text-primary,
.sa-editor-template .modal .text-brand,
.sa-editor-template .modal .text-primary,
.sa-editor-template .offcanvas .text-primary,
.sa-editor-template .dropdown-menu .text-primary,
.sa-editor-template .list-group .text-primary,
.sa-editor-template .pagination .text-primary,
.sa-editor-template .nav-tabs .text-primary {
    color: var(--brand-primary) !important;
}

.bg-brand {
    background-color: var(--brand-primary) !important;
}

.border-brand {
    border-color: var(--brand-primary) !important;
}


/* =========================================================
   ?? Navigation / Branding labels
   ========================================================= */

.navbar-brand,
.platform-name {
    color: var(--brand-primary)!important;
}


/* Ring loader */
#zen-loader .loader,
.loader-container .loader {
    border: 10px solid color-mix(in srgb, var(--brand-primary) 20%, transparent)!important;
    border-top: 10px solid var(--brand-primary)!important;
}

/* =========================================
   Stat ring brand binding
   ========================================= */

.stat-ring {
    background: conic-gradient(var(--ring-fill) var(--p),
            var(--ring-track) 0)!important;
}

.stat-ring-value {
    /* Dark text in white ring center � status color stays on the arc only */
    color: #212529 !important;
}

.stat-ring-value .stat-ring-total {
    color: #495057 !important;
}

/* =========================================
   License ring brand binding
   ========================================= */

.license-ring {
    background: conic-gradient(var(--brand-primary) var(--p),
            #e9ecef 0)!important;
}

.license-ring-value {
    color: var(--brand-primary)!important;
}

/* =========================================================
   Navbar surface styling
   ========================================================= */

.navbar {
    background-color: #ffffff;
}

/* Admin-navbar ? inte sajtpreview (unified nav ligger i .sa_editor_preview) */
body:not(.sa-editor-template) .navbar a,
.sa-editor-template .sa_editor_topbar .navbar a,
.sa-editor-template .modal .navbar a {
    color: #333 !important;
}

body:not(.sa-editor-template) .navbar a:hover,
.sa-editor-template .sa_editor_topbar .navbar a:hover {
    color: #000 !important;
}


/* =========================================================
   Hover brand states
   ========================================================= */

.zen-menu a.menu-item:hover,
.list-group-item:hover,
.list-group-item.active {
    background-color: rgba(var(--brand-primary-rgb), 0.08) !important;
    color: var(--brand-primary) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: rgba(var(--brand-primary-rgb), 0.1) !important;
    color: var(--brand-primary) !important;
    font-weight: 600;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.05);
    color: var(--brand-primary);
}

/* =========================================================
   Pagination
   ========================================================= */
.pagination .page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
    font-weight: bold;
}

.pagination .page-link {
    color: var(--brand-primary);
}

.pagination .page-link:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.08);
}


/* =========================================================
   icons
   ========================================================= */
/* White icon circle */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ffffff!important;
}

/* =========================================================
   ?? Future expansion area
   ---------------------------------------------------------
   H�r kan du senare l�gga:
   - Dark mode brand mapping
   - Sidebar brand overrides
   - Gradient brand overlays
   - Tenant-specific UI tweaks
   ========================================================= */


   /* =========================================================
   PLATFORM UI VARIABLES (SiteAdmin core design)
   Dessa p�verkas INTE av tenant branding.
   ========================================================= */

:root {

    /* SiteAdmin core palette */
    --sa-bg: #f6f7fb;
    --sa-border: rgba(15,23,42,.10);
    --sa-muted: rgba(15,23,42,.65);

    --sa-primary: #4f46e5;
    --sa-primary-rgb: 79, 70, 229;

    --sa-sidebar-bg: #0f172a;
    --sa-sidebar-border: rgba(255,255,255,.10);
    --sa-sidebar-text: rgba(255,255,255,.88);
    --sa-sidebar-muted: rgba(255,255,255,.55);
    --sa-sidebar-hover: rgba(255,255,255,.06);
    --sa-sidebar-active: rgba(79,70,229,.18);
    --sa-sidebar-active-border: rgba(79,70,229,.35);

    --sa-card: #ffffff;
    --sa-text: #0f172a;
    --sa-shadow: 0 10px 30px rgba(15,23,42,.08);
    --sa-radius: 16px;
}

/* =========================================================
   SITEADMIN COLOR BINDINGS
   Endast f�rger. Ingen layout.
   ========================================================= */

/*
 * SiteAdmin + saeditor: plattformskrom (modaler, knappar, laddare) ska f�lja
 * SiteAdmin-paletten ? inte inloggad tenant-brand (t.ex. Zenivo lila).
 * render_siteadmin_brand_css() s�tter samma v�rden inline; detta �r fallback/sp�rr.
 */
body.siteadmin-template,
body.sa-editor-template {
    --brand-primary: var(--sa-primary);
    --brand-primary-rgb: var(--sa-primary-rgb);
    --bs-primary: var(--sa-primary);
    --bs-primary-rgb: var(--sa-primary-rgb);
    --form-focus-color: var(--sa-primary);
    --form-focus-shadow: rgba(var(--sa-primary-rgb), 0.25);
    --ring-fill: var(--sa-primary);
}

/* Body text */
body.siteadmin-template {
    background: var(--sa-bg);
    color: var(--sa-text);
}

/* Topbar */
.sa-topbar {
    background: rgba(255,255,255,.90);
    border-bottom: 1px solid var(--sa-border);
}

/* Breadcrumb / user text */
.sa-user-top .name {
    color: var(--sa-muted);
}

.sa-user-icon {
    color: var(--sa-muted);
}

/* Status badge */
.sa-status-badge {
    border: 1px solid var(--sa-border);
    background: var(--sa-card);
    color: var(--sa-muted);
}

.sa-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.18);
    border: 1px solid rgba(0,0,0,.06);
}

/* Chip */
.sa-chip {
    border: 1px solid var(--sa-border);
    background: var(--sa-card);
    color: var(--sa-muted);
}

/* Sidebar */
.sa-sidebar {
    background: var(--sa-sidebar-bg);
    border-right: 1px solid var(--sa-sidebar-border);
}

.sa-nav-title {
    color: var(--sa-sidebar-muted);
}

/* M?ste vinna ?ver global a { color: var(--brand-primary) !important } */
.sa-nav .nav-link,
.sa-sidebar .sa-nav a.nav-link,
.offcanvas.sa-offcanvas .sa-nav a.nav-link {
    color: var(--sa-sidebar-text) !important;
}

.sa-nav .nav-link:hover,
.sa-sidebar .sa-nav a.nav-link:hover,
.offcanvas.sa-offcanvas .sa-nav a.nav-link:hover {
    color: var(--sa-sidebar-text) !important;
    background: var(--sa-sidebar-hover) !important;
}

.sa-nav .nav-link.active,
.sa-sidebar .sa-nav a.nav-link.active,
.offcanvas.sa-offcanvas .sa-nav a.nav-link.active {
    background: var(--sa-sidebar-active);
    border-color: var(--sa-sidebar-active-border);
    color: var(--sa-sidebar-text) !important;
}

.sa-close-button:hover {
    color: #ffffff!important;
}

.sa-nav i {
    color: var(--sa-sidebar-muted) !important;
}

.sa-sidebar-close {
    border-top: 1px solid var(--sa-sidebar-border);
}

/* Cards */
.sa-card {
    background: var(--sa-card);
    border: 1px solid var(--sa-border);
    box-shadow: var(--sa-shadow);
}

/* Pagehead subtext */
.sa-pagehead .sub {
    color: var(--sa-muted);
}

/* Stats */
.sa-stat .label,
.sa-stat .meta {
    color: var(--sa-muted);
}

/* Health panels */
.sa-health .panel {
    border: 1px solid rgba(34,197,94,.25);
}

.sa-health .panel .text {
    color: rgba(15,23,42,.78);
}

/* Key-value rows */
.sa-kv {
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.sa-kv .k {
    color: var(--sa-muted);
}

/* Health details */
.sa-health-details {
    border: 1px solid rgba(15,23,42,.08);
    background: var(--sa-card);
}

.sa-health-item .btn-light {
    border: 1px solid var(--sa-border);
    background: var(--sa-card);
}

/* Offcanvas */
.offcanvas.sa-offcanvas {
    background: var(--sa-sidebar-bg);
    color: var(--sa-sidebar-text);
}

.offcanvas.sa-offcanvas .offcanvas-title {
    color: var(--sa-sidebar-text);
}

.offcanvas.sa-offcanvas .btn-close {
    --modal-close-filter: invert(1) grayscale(100%) brightness(200%);
}

.offcanvas.sa-offcanvas .sa-nav-title {
    color: var(--sa-sidebar-muted);
}

.sa-form-wrapper {
  padding: 0;
}

/* Soft section instead of card */
.sa-section-soft {
  padding: 28px;
  border-radius: var(--sa-radius);
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--sa-border);
  box-shadow: none;
}

/* Section titles */
.sa-section-title {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sa-muted);
  margin-bottom: 8px;
}

/* Remove shadow stacking */
.sa-section-soft,
.sa-card {
  box-shadow: none !important;
}

.sa-help-link {
  font-size: .85rem;
  text-decoration: none;
  color: var(--sa-muted);
  transition: color .15s ease;
}

.sa-help-link:hover {
  color: var(--brand-primary);
  text-decoration: none;
}

/* =========================================================
   PREMIUM DASHBOARD BOXES ? Subtle Luxe Version
   Modern SaaS / Calm Admin aesthetic
   ========================================================= */

.box-warning,
.box-info,
.box-danger,
.box-success {
    position: relative;
    border-radius: var(--sa-radius);
    border: 1px solid transparent;
    overflow: hidden;
    background-clip: padding-box;
}

/* =========================
   WARNING (Soft Amber)
========================= */
.box-warning {
    background: linear-gradient(
        180deg,
        rgba(245, 158, 11, 0.06),
        rgba(245, 158, 11, 0.03)
    );
    border-color: rgba(245, 158, 11, 0.16);
}

/* =========================
   INFO (Soft Blue)
========================= */
.box-info {
    background: linear-gradient(
        180deg,
        rgba(79, 70, 229, 0.06),
        rgba(79, 70, 229, 0.03)
    );
    border-color: rgba(79, 70, 229, 0.16);
}

/* =========================
   SUCCESS (Soft Emerald)
========================= */
.box-success {
    background: linear-gradient(
        180deg,
        rgba(16, 185, 129, 0.06),
        rgba(16, 185, 129, 0.03)
    );
    border-color: rgba(16, 185, 129, 0.16);
}

/* =========================
   DANGER (Soft Red)
========================= */
.box-danger {
    background: linear-gradient(
        180deg,
        rgba(239, 68, 68, 0.06),
        rgba(239, 68, 68, 0.03)
    );
    border-color: rgba(239, 68, 68, 0.16);
}
/* =========================================================
   Saeditor preview ? sista f?rsvar mot brand-/navbar-l?cka
   (t.ex. .navbar a { color:#333 !important } ? svart CTA-text)
   ========================================================= */

.sa_editor_preview a.btn.btn-success,
.sa_editor_preview a.btn.btn-success:hover,
.sa_editor_preview a.btn.btn-success:focus,
.sa_editor_preview .navbar a.btn.btn-success,
.sa_editor_preview .navbar a.btn.btn-success:hover,
.sa_editor_preview nav.navbar a.btn.btn-success,
.sa_editor_preview a.btn.text-white,
.sa_editor_preview .navbar a.btn.text-white {
    color: #ffffff !important;
}

.sa_editor_preview a.btn.btn-primary,
.sa_editor_preview a.btn.btn-primary:hover,
.sa_editor_preview .navbar a.btn.btn-primary,
.sa_editor_preview nav.navbar a.btn.btn-primary {
    color: #ffffff !important;
}

.sa_editor_preview a.btn.btn-dark,
.sa_editor_preview a.btn.btn-dark:hover,
.sa_editor_preview .navbar a.btn.btn-dark {
    color: #ffffff !important;
}