/* =========================================================
   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%);

    /* 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.
   ========================================================= */

@import "/fonts.css";

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.header-font {
    font-family: 'Bakbak One', sans-serif;
}


/* =========================================================
   3️⃣ Buttons (Bootstrap override layer)
   ---------------------------------------------------------
   Bootstrap primary mappas till brand-primary.
   ========================================================= */

.btn-primary,
.btn-brand,
.auth-btn {
    background-color: var(--brand-primary)!important;
    border-color: var(--brand-primary)!important;
    color: var(--brand-text-on-primary)!important;
}

/* Hover: lite mörkare primär (samma nyansfamilj oavsett brand) */
.btn-primary:hover,
.btn-brand:hover,
.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;
}

.btn-primary:focus,
.btn-brand:focus,
.auth-btn:focus {
    box-shadow: 0 0 0 0.25rem var(--form-focus-shadow);
}

/* Outline primary: brand (Bootstrap default är blå #0d6efd) */
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

.btn-outline-primary:focus,
.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;
}

/* =========================================================
   Success-knappar (använder brand-success; undvik att globala-länkregel bryter kontrast)
   ========================================================= */

.btn-success {
    background-color: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
    color: #ffffff !important;
}

.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;
}

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

/* =========================================================
   4️⃣ Links
   ---------------------------------------------------------
   Alla länkar följer brand-färger.
   ========================================================= */

a {
    color: var(--brand-primary)!important;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-secondary)!important;
}

/* Skip-länk (WCAG 2.4.1) — ska inte ärva brand-länkfärg */
a.skip-link,
a.skip-link:hover,
a.skip-link:focus {
    color: #111 !important;
}

/* Länkar som är Bootstrap-knappar: följ knappens egna färger (annars vinner länk-regeln och t.ex. btn-success blir oläsbar) */
a.btn {
    color: var(--bs-btn-color) !important;
}
a.btn:hover {
    color: var(--bs-btn-hover-color, var(--bs-btn-color)) !important;
}

/* Säkerställ kontrast när whitelabel + Bootstrap-variabler möter <a class="btn"> */
a.btn.btn-primary:hover,
a.btn.btn-brand:hover,
a.auth-btn:hover {
    color: var(--brand-text-on-primary) !important;
}
a.btn.btn-success:hover {
    color: #ffffff !important;
}
a.btn.gs-btn-action,
a.btn.gs-btn-action:hover,
a.btn.gs-btn-action:focus,
a.btn.gs-btn-action:active {
    color: #ffffff !important;
}
a.btn.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}
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);
}

.card-header,
.modal-header {
    background-color: var(--brand-primary) !important;
    color: var(--brand-text-on-primary) !important;
}

.card-header.bg-light {
    background-color: #f8f9fa !important;
    color: #212529 !important;
}

.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,
.offcanvas-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;
}

.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.
   ========================================================= */

.text-brand,.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 {
    /* Följer --ring-fill när render_stat_ring sätter den (t.ex. hälsa grön/gul/röd) */
    color: var(--ring-fill, var(--brand-primary))!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;
}

.navbar a {
    color: #333 !important;
}

.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);
}

.sa-nav .nav-link {
    color: var(--sa-sidebar-text);
}

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

.sa-nav .nav-link.active {
    background: var(--sa-sidebar-active);
    border-color: var(--sa-sidebar-active-border);
}

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

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

.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);
}