/* Mtheel brand package v1 on the live Razor app. Loaded after site.css; tokens and fonts come from
   mtheel-tokens.css. This is the visual layer only: colour, type, logo and shell follow the
   approved brand (handoff/01-BRAND-AND-DESIGN-SYSTEM.md), while markup and behaviour stay as they
   are. Rules: the hairline is never a fill or text; the accent is never text; status is always
   colour + icon + word; Arabic is Tajawal and never letter-spaced. */

/* ---------- 1. site.css palette and Bootstrap, on the Mtheel tokens ---------- */
:root {
    --hg-primary: var(--ink);
    --hg-primary-dark: var(--deep);
    --hg-primary-soft: var(--mist);
    --hg-sidebar: var(--mist);
    --hg-sidebar-active: var(--surface);
    --hg-sidebar-hover: rgba(4, 48, 42, .06);
    --hg-sidebar-text: var(--body);
    --hg-sidebar-muted: var(--muted);
    --hg-bg: var(--ice);
    --hg-surface: var(--surface);
    --hg-border: var(--hairline);
    --hg-text: var(--body);
    --hg-muted: var(--muted);
    --hg-success: var(--ok);
    --hg-success-soft: rgba(31, 122, 77, .1);
    --hg-radius: var(--r-lg);
    --hg-font: var(--f-ar);

    --bs-body-font-family: var(--hg-font);
    --bs-body-color: var(--body);
    --bs-body-color-rgb: 28, 74, 65;
    --bs-body-bg: var(--ice);
    --bs-emphasis-color: var(--ink);
    --bs-heading-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--hairline);
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: 4, 48, 42;
    --bs-link-hover-color: var(--deep);
    --bs-link-hover-color-rgb: 10, 74, 62;
    --bs-primary: #04302A;
    --bs-primary-rgb: 4, 48, 42;
    --bs-success-rgb: 31, 122, 77;
    --bs-danger-rgb: 179, 38, 30;
    --bs-focus-ring-color: rgba(31, 163, 125, .35);
}
html[lang="en"] { --hg-font: var(--f-body); }

html, body { font-family: var(--hg-font); color: var(--body); background: var(--ice); }
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] * { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-weight: 700; }
html[lang="en"] :is(h1, h2, h3, .h1, .h2, .h3) { font-family: var(--f-head); letter-spacing: -.01em; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--deep); }
::selection { background: var(--pale); color: var(--ink); }
/* Focus: a 2px accent ring with a 1px ink ring inside carries the 3:1 contrast. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 1px var(--ink); }

/* ---------- 2. Buttons: pills; primary is ink, secondary is outlined ---------- */
.btn { border-radius: var(--r-pill); font-weight: 700; }
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--deep); --bs-btn-hover-border-color: var(--deep);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--deep); --bs-btn-active-border-color: var(--deep);
    --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink);
}
.btn-outline-primary {
    --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--deep); --bs-btn-active-border-color: var(--deep);
}
.btn-light, .btn-outline-secondary {
    --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--hairline);
    --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--mist); --bs-btn-active-border-color: var(--ink);
}
.btn-success { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: var(--deep); --bs-btn-hover-border-color: var(--deep); }
.btn-danger { --bs-btn-bg: var(--bad); --bs-btn-border-color: var(--bad); }
.btn-outline-danger { --bs-btn-color: var(--bad); --bs-btn-border-color: var(--bad); --bs-btn-hover-bg: var(--bad); --bs-btn-hover-border-color: var(--bad); }
.btn-icon { border-radius: var(--r-md); color: var(--ink); }

/* ---------- 3. Forms ---------- */
.form-control, .form-select { border-color: var(--field); border-radius: var(--r-md); color: var(--ink); }
.form-control::placeholder { color: #557A70; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form-check-input { border-color: var(--field); }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-label { color: var(--ink); font-weight: 700; }
.form-text { color: var(--muted); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--ice); }

/* ---------- 4. Cards, tables, tabs, notices ---------- */
.card { border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: none; }
.card-header { background: var(--surface); border-bottom-color: var(--hairline); }
.table { --bs-table-hover-bg: var(--ice); --bs-table-border-color: var(--hairline); }
.table > thead th { background: var(--mist); color: var(--muted); font-weight: 700; }
.nav-tabs { border-bottom-color: var(--hairline); }
.nav-tabs .nav-link { color: var(--body); }
.nav-tabs .nav-link.active { color: var(--ink); border-bottom: 3px solid var(--accent); font-weight: 700; }
.alert { border: 0; border-inline-start: 3px solid; border-radius: var(--r-md); }
.alert-success, .alert-info, .alert-primary { background: var(--mist); color: var(--ink); border-inline-start-color: var(--accent); }
.alert-warning { background: var(--warn-tint); color: var(--warn-ink); border-inline-start-color: var(--warn); }
.alert-danger { background: var(--bad-tint); color: var(--bad); border-inline-start-color: var(--bad); }
.progress { --bs-progress-bg: var(--mist); --bs-progress-bar-bg: var(--deep); }

/* ---------- 5. The logo ---------- */
img.brand-lockup { display: block; height: auto; }
img.brand-lockup.brand-sm { width: 120px; }
img.brand-lockup.brand-md { width: 168px; }
img.brand-lockup.brand-lg { width: 220px; }
.topbar-mark { width: 32px; height: 32px; border-radius: 0; box-shadow: none; }
.welcome-mark { width: 72px; height: 72px; border-radius: 0; opacity: .9; box-shadow: none; }

/* ---------- 6. Sidebar: mist for a subscriber, ink for the platform owner ---------- */
.sidebar-inner { background: var(--mist); color: var(--body); border-inline-end: 1px solid var(--hairline); }
.sidebar-product { color: var(--muted); border-bottom-color: var(--hairline); }
.sidebar-tenant { color: var(--ink); border-bottom-color: var(--hairline); }
.sidebar-nav { scrollbar-color: var(--light) transparent; }
.sidebar-footer { border-top-color: var(--hairline); background: rgba(4, 48, 42, .04); }
.sf-avatar { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); }
.sf-name { color: var(--ink); }
.sf-role { color: var(--muted); }
.sidebar-footer .lang-switch, .sf-btn { border-color: var(--hairline); background: var(--surface); color: var(--ink); }
.sidebar-footer .lang-switch:hover, .sf-btn:hover, .sf-btn:focus-visible { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.sf-logout:hover, .sf-logout:focus-visible { background: var(--bad); border-color: var(--bad); color: #fff; }
.nav-section { color: var(--muted); font-weight: 700; }
html[lang="ar"] .nav-section { text-transform: none; font-size: .78rem; }
html[lang="en"] .nav-section { font-family: var(--f-label); font-weight: 300; letter-spacing: .2em; font-size: .68rem; }
.nav-link-item { color: var(--body); border: 1px solid transparent; border-radius: var(--r-md); }
.nav-link-item .bi { color: var(--muted); }
a.nav-link-item:hover { background: var(--hg-sidebar-hover); color: var(--ink); }
.nav-link-item.active { background: var(--surface); border-color: var(--hairline); color: var(--ink); font-weight: 700; }
.nav-link-item.active .bi { color: var(--accent); }

.sidebar-owner { --bs-offcanvas-bg: var(--ink); }
.sidebar-owner .sidebar-inner { background: var(--ink); color: var(--pale); border-inline-end-color: var(--ink); }
.sidebar-owner .sidebar-product, .sidebar-owner .nav-section, .sidebar-owner .sf-role { color: var(--pale); }
.sidebar-owner .sidebar-product, .sidebar-owner .sidebar-tenant { border-bottom-color: rgba(143, 227, 194, .18); }
.sidebar-owner .sidebar-tenant, .sidebar-owner .sf-name { color: #fff; }
.sidebar-owner .nav-link-item, .sidebar-owner .nav-link-item .bi { color: var(--pale); }
.sidebar-owner a.nav-link-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar-owner .nav-link-item.active { background: var(--deep); border-color: transparent; color: #fff; }
.sidebar-owner .nav-link-item.active .bi { color: var(--light); }
.sidebar-owner .sidebar-footer { background: rgba(0, 0, 0, .15); border-top-color: rgba(143, 227, 194, .18); }
.sidebar-owner .sf-avatar { background: rgba(255, 255, 255, .12); border-color: transparent; color: #fff; }
.sidebar-owner .sidebar-footer .lang-switch, .sidebar-owner .sf-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); color: var(--pale); }
.sidebar-owner .sidebar-footer .lang-switch:hover, .sidebar-owner .sf-btn:hover, .sidebar-owner .sf-btn:focus-visible { background: rgba(255, 255, 255, .14); border-color: var(--pale); color: #fff; }

/* ---------- 7. Top bar, content, footer ---------- */
.topbar { background: var(--surface); border-bottom-color: var(--hairline); }
.topbar-title { color: var(--ink); font-weight: 700; }
.topbar-date { color: var(--body); }
.app-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; color: var(--muted); border-top-color: var(--hairline); background: var(--surface); }
.welcome .card-body { background: linear-gradient(120deg, var(--mist), var(--surface) 70%); }

/* ---------- 8. Figures and status: colour + icon + word ---------- */
.kpi { border-color: var(--hairline); }
.kpi-value { font-family: var(--f-fig); color: var(--ink); }
.kpi-hero { background: var(--ink); border-color: var(--ink); color: #fff; }
.kpi-hero .kpi-value { color: #fff; }
.kpi-hero .kpi-label, .kpi-hero .kpi-note { color: var(--pale); }
.kpi-danger { border-inline-start-color: var(--bad); }
.kpi-danger > .bi { color: var(--bad); }
.kpi-warning { border-inline-start-color: var(--warn); }
.kpi-warning > .bi { color: var(--warn); }
.kpi-success { border-inline-start-color: var(--ok); }
.kpi-success > .bi { color: var(--ok); }
.st-good { color: var(--ok); }
.st-warning { color: var(--warn); }
.st-critical { color: var(--bad); }
.cell-st-good .matrix-cell { background: rgba(31, 122, 77, .1); }
.cell-st-warning .matrix-cell { background: var(--warn-tint); }
.cell-st-critical .matrix-cell { background: var(--bad-tint); }
.chip { background: var(--mist); color: var(--deep); border-radius: var(--r-sm); }
.chip-warning { background: var(--warn-tint); color: var(--warn-ink); }
.chip-danger { background: var(--bad-tint); color: var(--bad); }
.nav-tabs .count { background: var(--mist); color: var(--deep); }
.alerts-badge { background: var(--bad); }
.alerts-dot { background: var(--warn); }
.hg-tip { background: var(--ink); }
.temp-password { border-color: var(--ink); color: var(--ink); }

/* ---------- 9. Sign-in (Mtheel screen 01): one card on ice ---------- */
.auth-body { background: var(--ice); }
.auth-shell { flex-direction: column; }
.auth-top { position: static; display: flex; justify-content: flex-end; padding: 1.5rem; }
.auth-form { align-items: flex-start; padding: .5rem 1rem 3rem; }
.auth-card { max-width: 480px; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: none; }
.auth-logo { display: block; width: 132px; height: auto; margin: 0 auto 1.25rem; }
.auth-title { text-align: center; color: var(--ink); }
.auth-footer { padding: 1.25rem 1rem; border-top: 1px solid var(--hairline); background: var(--surface); text-align: center; font-size: .82rem; color: var(--muted); }