/* =============================================
   SMA-THEME.CSS — Brand tokens, fonts and global
   Bootstrap/Metronic overrides so the whole app
   (header, footer, forms, workspace, login) picks
   up the Sharjah Museums Authority brand used on
   the WebServices site without rewriting every page.
   Loaded AFTER style.bundle.css / site.css so these
   values win the cascade.
   ============================================= */

/* ── Self-hosted brand typeface "Rosetta" (Adapter Arabic Text) ───────── */
@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-El.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Lt.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Rg.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Me.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Sb.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Bd.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Eb.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rosetta";
    src: url("fonts/AdapterArabicText/AdapterArabicText-Bl.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Brand ── */
    --sma-primary: #CDA176;
    --sma-primary-dark: #AC8763;
    --sma-primary-text: #ffffff;
    --sma-primary-rgb: 205, 161, 118;
    /* ── Dark shell (header / footer) ── */
    --sma-dark-bg-top: #3a3a3a;
    --sma-dark-bg-bottom: #141414;
    --sma-dark-gradient: linear-gradient(180deg, var(--sma-dark-bg-top) 0%, var(--sma-dark-bg-bottom) 100%);
    --sma-dark-border: rgba(255,255,255,0.10);
    --sma-dark-divider: rgba(255,255,255,0.14);
    --sma-dark-text: #ffffff;
    --sma-dark-muted: rgba(255,255,255,0.70);
    /* ── Page background (matches WebServices public pages) ── */
    --sma-bg-page: #d3d3d3;
    --sma-Newbg-page: #f5f5f5;
    /* ── Fonts ── */
    --sma-font-en: "Rosetta", "Noto Sans", sans-serif;
    --sma-font-ar: "Rosetta", "Noto Kufi Arabic", sans-serif;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
    :root {
        --sma-primary-50:  color-mix(in srgb, var(--sma-primary) 6%, white);
        --sma-primary-100: color-mix(in srgb, var(--sma-primary) 12%, white);
    }
}

@supports not (color: color-mix(in srgb, red 10%, white)) {
    :root {
        --sma-primary-50:  rgba(205, 161, 118, 0.06);
        --sma-primary-100: rgba(205, 161, 118, 0.12);
    }
}

/* ── Re-point Bootstrap's design tokens at the brand color.
   Metronic's own component layer (.btn.btn-primary, .text-primary,
   .bg-primary, .border-primary, badges, focus rings, stepper state…)
   is built on these custom properties, so this single block re-skins
   buttons/links/badges across every page — login, workspace, e-services,
   the private museum form — without touching their markup. ── */
:root,
[data-bs-theme="light"] {
    --bs-primary:        var(--sma-primary);
    --bs-primary-active: var(--sma-primary-dark);
    --bs-primary-light:  var(--sma-primary-50);
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb:    var(--sma-primary-rgb);
    --bs-link-color:     var(--sma-primary);
    --bs-link-color-rgb: var(--sma-primary-rgb);
    --bs-link-hover-color: var(--sma-primary-dark);
}

[data-bs-theme="dark"] {
    --bs-primary:        var(--sma-primary);
    --bs-primary-active: var(--sma-primary-dark);
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb:    var(--sma-primary-rgb);
    --bs-link-color:     var(--sma-primary);
    --bs-link-color-rgb: var(--sma-primary-rgb);
}

/* ── Typography ── */
html[lang="en"], html[lang="en"] body {
    font-family: var(--sma-font-en) !important;
}

html[lang="ar"], html[lang="ar"] body {
    font-family: var(--sma-font-ar) !important;
}

a { transition: color .15s ease; }
a.link-primary { color: var(--sma-primary) !important; }
a.link-primary:hover { color: var(--sma-primary-dark) !important; }
a:not([class]):hover { color: var(--sma-primary-dark); }

/* Metronic outline / light-primary buttons reference --bs-primary-light,
   which is already re-pointed above, but a few components hardcode the
   green tint directly — patch those here. */
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--sma-primary) !important;
    border-color: var(--sma-primary) !important;
}

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

.spinner-border.text-primary,
.spinner-border-sm.text-primary {
    color: var(--sma-primary) !important;
}