/*
 * Easy Leads — brand tokens
 * "Intelligent Lead Control"
 *
 * Loaded LAST, after tenant-modern-theme.css, glassmorphism-theme.css and
 * saabeq-2026.css. Colour tokens only — no class names, no layout, no spacing,
 * so every existing selector keeps working, including any a customer has copied
 * into their own site.
 *
 * ── Colour policy ──────────────────────────────────────────────────────────
 * The interface is MONOCHROME. Ink on paper. Buttons, links, active states and
 * focus rings are near-black, not orange.
 *
 * Orange (#EA741C) is the LOGO colour. In the UI it appears only as a small,
 * deliberate accent — never as the primary action colour, never as a large
 * fill. If a screen reads as "an orange screen", something here is wrong.
 *
 * An earlier version of this file pointed every accent token at orange. The
 * result was orange buttons, orange links and orange active rows on every page,
 * which buried the brand instead of expressing it. Use `--el-brand` explicitly
 * when you want the accent; do not reach for it by default.
 */

:root {
    /* ---------- Brand ---------- */
    --el-brand:          234 116 28;   /* #EA741C — the logo orange. Accent only. */
    --el-brand-hover:    201  95  16;  /* #C95F10 */
    --el-brand-soft:     253 241 231;  /* #FDF1E7 — faint tint for badges */

    /* ---------- Ink & paper: the actual interface palette ---------- */
    --el-ink:             24  24  27;  /* #18181B — primary action + heading */
    --el-ink-hover:        9   9  11;  /* #09090B */
    --el-ink-soft:       244 244 245;  /* #F4F4F5 — hover rows, subtle fills */
    --el-paper:          255 255 255;
}

/* =========================================================
   Design-system tokens (saabeq-2026.css)
   Accent = ink, not orange.
   ========================================================= */
:root {
    --sq-accent:            var(--el-brand);
    --sq-accent-hover:      var(--el-brand-hover);
    --sq-accent-soft:       var(--el-brand-soft);
    --sq-accent-grad-start: var(--el-brand);
    --sq-accent-grad-end:   201  95  16;

    /* Surfaces */
    --sq-bg:          250 250 250;
    --sq-surface:     255 255 255;
    --sq-surface-2:   250 250 250;
    --sq-sidebar:     255 255 255;
    --sq-overlay:      24  24  27;

    /* Text */
    --sq-fg:           24  24  27;
    --sq-fg-muted:    113 113 122;
    --sq-fg-subtle:   161 161 170;

    /* Borders */
    --sq-border:      228 228 231;
    --sq-border-strong: 212 212 216;

    /* Status stays semantic — colour here carries meaning in the pipeline */
    --sq-success:  22 163  74;
    --sq-warning: 217 119   6;
    --sq-danger:  220  38  38;
    --sq-info:    113 113 122;
}

/* ---------- glassmorphism-theme.css ---------- */
:root {
    --primary:          #18181B;
    --primary-light:    #3F3F46;
    --primary-dark:     #09090B;
    --primary-gradient: linear-gradient(135deg, #27272A 0%, #18181B 100%);

    --purple:           #18181B;
    --purple-light:     #3F3F46;
    --purple-gradient:  linear-gradient(135deg, #27272A 0%, #09090B 100%);
    --indigo:           #18181B;
    --teal:             #71717A;
    --pink:             #EA741C;      /* the one orange hook, for accents */

    --brand-black:      #000000;
    --brand-charcoal:   #18181B;
    --brand-ink:        #27272A;
}

/* ---------- tenant-modern-theme.css ---------- */
:root {
    --primary-50:  #FAFAFA;
    --primary-100: #F4F4F5;
    --primary-300: #D4D4D8;
    --primary-400: #A1A1AA;
    --primary-500: #18181B;
    --primary-600: #09090B;
    --primary-700: #000000;

    --purple-500: #18181B;
    --purple-600: #09090B;
}

/* ---------- Bootstrap 5 (landlord panel) ----------
   A primary action is a brand moment, so it wears the brand colour. Everything
   around it stays ink, which is what keeps one orange button reading as an
   accent rather than as an orange screen. */
:root {
    --bs-primary:          #EA741C;
    --bs-primary-rgb:      234, 116, 28;
    --bs-link-color:       #18181B;
    --bs-link-hover-color: #C95F10;
}

.btn-primary {
    --bs-btn-bg:                    #EA741C;
    --bs-btn-border-color:          #EA741C;
    --bs-btn-hover-bg:              #C95F10;
    --bs-btn-hover-border-color:    #C95F10;
    --bs-btn-active-bg:             #A84F0C;
    --bs-btn-active-border-color:   #A84F0C;
    --bs-btn-disabled-bg:           #F7B27C;
    --bs-btn-disabled-border-color: #F7B27C;
}

.btn-outline-primary {
    --bs-btn-color:              #C95F10;
    --bs-btn-border-color:       #EA741C;
    --bs-btn-hover-bg:           #EA741C;
    --bs-btn-hover-border-color: #EA741C;
}

.text-primary   { color: #C95F10 !important; }
.bg-primary     { background-color: #EA741C !important; }
.border-primary { border-color: #EA741C !important; }

/* =========================================================
   Deliberate orange accents — opt in, never automatic
   ========================================================= */

/* The wordmark, wherever it is set as live text rather than artwork. */
.el-brand,
.saabeq-brand {          /* legacy alias, kept so old markup still renders */
    color: rgb(var(--el-brand));
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Small orange affordances: badges, pills, the AI marker. */
.el-accent        { color: rgb(var(--el-brand)); }
.el-accent-bg     { background: rgb(var(--el-brand)); color: #fff; }
.el-accent-soft   { background: rgb(var(--el-brand-soft)); color: rgb(var(--el-brand-hover)); }
.el-accent-border { border-color: rgb(var(--el-brand)); }

/* A thin orange rule reads as brand without shouting. */
.el-rule {
    height: 3px;
    width: 44px;
    background: rgb(var(--el-brand));
    border-radius: 999px;
}

/* ---------- Logo sizing ---------- */
/* The lockup is ~5:1, so height drives a lot of width. These are deliberately
   restrained: at h-14 the mark is ~350px wide and dominates a header. */
.el-logo    { height: 30px; width: auto; display: block; }
.el-logo-sm { height: 24px; width: auto; display: block; }
.el-logo-lg { height: 38px; width: auto; display: block; }

@media (min-width: 768px) {
    .el-logo    { height: 34px; }
    .el-logo-sm { height: 26px; }
    .el-logo-lg { height: 44px; }
}

/* Focus ring: ink by default, so it reads as UI rather than decoration. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--el-ink));
    outline-offset: 2px;
}

::selection {
    background: rgb(var(--el-brand) / 0.20);
    color: rgb(var(--el-ink));
}

/* =========================================================
   Tenant app — sidebar corrections
   Loaded after saabeq-2026.css, so these win without editing it.
   ========================================================= */

/* The header carried a bottom border AND a .sidebar-divider sat directly under
   it — two hairlines a few pixels apart. The divider element is gone from the
   markup; this removes the second line for any view still rendering one. */
.sidebar-header { border-bottom: 0 !important; }
.sidebar-divider { display: none !important; }

/* Give the logo room now that the edition label is gone. */
.sidebar-brand { padding: 1.15rem 1rem !important; }
.sidebar-brand .brand-logo { margin-inline: auto; }

/* Active item runs full-bleed instead of floating inset. The inset version read
   as a detached pill; flush reads as "this is the page you are on". */
.sidebar-nav .nav-item.active,
.sidebar .nav-item.active,
.sidebar .nav-link.active,
.sidebar a.active {
    margin-inline: 0 !important;
    border-radius: 0 !important;
    padding-inline: 1.375rem !important;
    background: rgb(var(--el-brand-soft)) !important;
    color: rgb(var(--el-ink)) !important;
    position: relative;
}

/* One thin orange marker on the active row — the accent doing real work,
   rather than colouring the whole element. */
.sidebar-nav .nav-item.active::before,
.sidebar .nav-item.active::before,
.sidebar .nav-link.active::before,
.sidebar a.active::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: rgb(var(--el-brand));
}

.sidebar-nav .nav-item.active i,
.sidebar .nav-item.active i,
.sidebar .nav-link.active i,
.sidebar a.active i {
    color: rgb(var(--el-ink)) !important;
}

/* Hover stays a quiet grey — colour is reserved for the selected row. */
.sidebar-nav .nav-item:hover:not(.active),
.sidebar .nav-item:hover:not(.active),
.sidebar .nav-link:hover:not(.active) {
    background: rgb(var(--el-ink-soft)) !important;
    color: rgb(var(--el-ink)) !important;
}

/* The header tagline IS the brand line. It was shrunk to caption size; this
   gives it presence without turning it into a heading. */
.header-tagline {
    color: rgb(var(--sq-fg)) !important;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.header-tagline::before {
    content: "";
    width: 3px;
    height: 1.05em;
    border-radius: 999px;
    background: rgb(var(--el-brand));
    flex: none;
}

@media (max-width: 991px) { .header-tagline { display: none; } }