/* ─────────────────────────────────────────────────────────────────────────
   Brand overrides — narrow scope.

   The earlier full app-wide rollout (PR #248) re-bound the entire
   `--nd-*` palette + body font to the marketing landing's brand, but
   the result on the dashboard / vehicles / devices was visually rough
   ("not well viewed — needs to be redesigned"). Reverted to scope this
   file to only the explicit overrides we still need:

     - .signin-submit Telerik button → brand orange + white text +
       brand-orange-deep on hover.

   Everything else (palette tokens, body font) is left to nordic.css so
   the dashboard goes back to its original look. A real app-wide rebrand
   needs a design pass first.
   ───────────────────────────────────────────────────────────────────────── */


/* ─── Brand orange Telerik submit buttons ────────────────────────────────
   Used by:
     - /signin "Sign in →"        (.signin-submit)
     - /book-demo "Send verification code →" / "Verify & book →" (.submit-btn)

   Specificity bumped to (0,5,0) by listing every k-* class actually
   rendered on the buttons in the live HTML
   (k-button k-button-md k-button-solid k-button-solid-base k-rounded-md).
   This guarantees the override wins over Telerik Material's compiled
   `.k-button.k-button-solid.k-button-solid-base` rule (0,3,0) even if
   Material later adds something at (0,4,0) — and `!important` settles
   any tie that could still occur. *Browsers may cache this file
   aggressively across deploys; force a hard refresh after changes.* */
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base,
body .signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base,
body .submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base {
    width: 100% !important;
    margin-top: 8px !important;
    height: 48px !important;
    background-color: #F0532D !important;       /* brand-orange       */
    background-image: none !important;
    border: none !important;
    border-color: #F0532D !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 6px 18px -6px rgba(240,83,45,0.5) !important;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s !important;
    cursor: pointer !important;
}
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text,
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-icon,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-icon,
body .signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text,
body .submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text {
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
}

.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base:hover:not(:disabled),
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base.k-hover:not(:disabled),
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base:hover:not(:disabled),
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base.k-hover:not(:disabled),
body .signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base:hover:not(:disabled),
body .submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base:hover:not(:disabled) {
    background-color: #C13E1D !important;       /* brand-orange-deep  */
    background-image: none !important;
    border-color: #C13E1D !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base:focus,
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base.k-focus,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base:focus,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base.k-focus {
    outline: none !important;
    box-shadow: 0 0 0 3px #FCE9E1, 0 6px 18px -6px rgba(240,83,45,0.5) !important;
}
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base:disabled,
.signin-submit.k-button.k-button-md.k-button-solid.k-button-solid-base.k-disabled,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base:disabled,
.submit-btn.k-button.k-button-md.k-button-solid.k-button-solid-base.k-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #F0532D !important;
    color: #fff !important;
}

/* book-demo verify-step extra spacing modifier */
.submit-btn--gap.k-button.k-button-md.k-button-solid.k-button-solid-base { margin-top: 20px !important; }


/* ─── App-wide brand alignment (dashboard / vehicles / devices / …) ─────
   Measured second pass after the PR #248 revert. Lessons applied:

   - Don't re-bind --nd-* tokens app-wide — that turned every Telerik
     surface (focus rings, grid headers, dropdown highlights, scrollbars,
     etc.) bright orange and read as "too much".
   - Instead: target only the *high-visibility brand surfaces* —
     body text, primary CTAs, sidebar active item, big headlines.
     Telerik component internals keep their Material defaults so widths
     and densities stay stable.
   - User instruction: "always keep telerik controls" — every TelerikButton
     stays a TelerikButton; we just style the .nd-btn.primary variant. */


/* Nexa @font-face — full family loaded so headings can pick weights
   600-900 and body text can use the regular cut. The TTFs themselves
   live under wwwroot/landing/fonts/ (shared with the marketing pages,
   no duplicate copies). */
@font-face { font-family: 'Nexa'; src: url('/landing/fonts/nexa_regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('/landing/fonts/nexa_book.ttf')    format('truetype'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('/landing/fonts/nexa_bold.ttf')    format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('/landing/fonts/nexa_heavy.ttf')   format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa'; src: url('/landing/fonts/nexa_xbold.ttf')   format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rift Soft'; src: url('/landing/fonts/rift_soft_bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }


/* ─── Body text → Nexa ───────────────────────────────────────────────────
   Targets the workspace shell only. Telerik component internals keep
   the Material font (Roboto-ish) — overriding inside .k-* would shift
   computed widths on grids and dropdowns. */
body,
.nd-app,
.nd-main,
.nd-card,
.nd-sidebar nav a,
.nd-menu-link,
.nd-appbar,
.nd-btn {
    font-family: 'Nexa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ─── Headlines → Rift Soft (display) ───────────────────────────────────
   Same display face used by /landing's hero and section headings. Keeps
   the dashboard feeling like a continuation of the marketing site. */
.nd-app h1,
.nd-app h2,
.nd-app .nd-page-title,
.nd-card-header > h2,
.nd-card-header > h3 {
    font-family: 'Rift Soft', 'Nexa', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.005em;
}


/* ─── Primary brand button — .nd-btn.primary on a TelerikButton ─────────
   The convention across Vehicles / Devices / sidepanel is
   <TelerikButton Class="nd-btn primary">…</TelerikButton>. Specificity
   bumped to (0,5,0) by listing all the k-* classes Telerik renders, so
   the override beats Material's compiled .k-button.k-button-solid.
   .k-button-solid-base rule. */
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base,
body .nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base {
    background-color: #F0532D !important;       /* brand-orange       */
    background-image: none !important;
    border: none !important;
    border-color: #F0532D !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
    font-weight: 800 !important;                 /* "bold" per request */
    box-shadow: 0 4px 14px -6px rgba(240,83,45,0.45) !important;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s !important;
    cursor: pointer !important;
}
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text,
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-icon,
body .nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base .k-button-text {
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
    font-weight: 800 !important;
}
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base:hover:not(:disabled),
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base.k-hover:not(:disabled) {
    background-color: #C13E1D !important;       /* brand-orange-deep  */
    background-image: none !important;
    border-color: #C13E1D !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base:focus,
.nd-btn.primary.k-button.k-button-md.k-button-solid.k-button-solid-base.k-focus {
    outline: none !important;
    box-shadow: 0 0 0 3px #FCE9E1, 0 4px 14px -6px rgba(240,83,45,0.45) !important;
}


/* ─── Sidebar active item → brand orange ────────────────────────────────
   The current rule in nordic.css uses --nd-accent (dusty navy). Keeping
   nordic intact, just override the active-state colour here. */
.nd-sidebar nav a.active,
.nd-menu-link.active {
    background: #F0532D !important;
    color: #fff !important;
}
.nd-sidebar nav a:not(.active):hover,
.nd-menu-link:not(.active):hover {
    color: #F0532D !important;
}


/* ─── Telerik Window (modals: New vehicle, New device, Edit geofence,
       Acknowledge alerts, Notification broadcast, Subscription rules…) ─
   Brand the chrome (titlebar font, content padding font) but keep
   Telerik's Material structure so the close button + drag affordances
   stay where users expect them. */
.k-window,
.k-window-content,
.k-window-titlebar,
.k-window-actions,
.k-actions {
    font-family: 'Nexa', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.k-window {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.06) !important;
}
.k-window-titlebar {
    border-bottom: 1px solid #E3E3E3 !important;
    background: #fff !important;
}
.k-window-titlebar .k-window-title {
    font-family: 'Rift Soft', 'Nexa', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #191919 !important;
    letter-spacing: -0.005em;
}


/* ─── Primary Telerik button — ThemeColor="primary" everywhere ──────────
   Used by every modal Save / Confirm CTA (New vehicle, New device,
   Acknowledge alerts, Send broadcast, Save rule, Save profile, …)
   and renders as `.k-button-solid-primary`. Bumped specificity to
   beat Material's compiled `.k-button.k-button-solid.k-button-solid-primary`
   rule (0,3,0). */
.k-button.k-button-md.k-button-solid.k-button-solid-primary,
body .k-button.k-button-md.k-button-solid.k-button-solid-primary {
    background-color: #F0532D !important;       /* brand-orange       */
    background-image: none !important;
    border: none !important;
    border-color: #F0532D !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px -6px rgba(240,83,45,0.45) !important;
    transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s !important;
}
.k-button.k-button-md.k-button-solid.k-button-solid-primary .k-button-text,
.k-button.k-button-md.k-button-solid.k-button-solid-primary .k-button-icon {
    color: #fff !important;
    font-family: 'Nexa', sans-serif !important;
    font-weight: 800 !important;
}
.k-button.k-button-md.k-button-solid.k-button-solid-primary:hover:not(:disabled),
.k-button.k-button-md.k-button-solid.k-button-solid-primary.k-hover:not(:disabled) {
    background-color: #C13E1D !important;       /* brand-orange-deep  */
    background-image: none !important;
    border-color: #C13E1D !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.k-button.k-button-md.k-button-solid.k-button-solid-primary:focus,
.k-button.k-button-md.k-button-solid.k-button-solid-primary.k-focus {
    outline: none !important;
    box-shadow: 0 0 0 3px #FCE9E1, 0 4px 14px -6px rgba(240,83,45,0.45) !important;
}
.k-button.k-button-md.k-button-solid.k-button-solid-primary:disabled,
.k-button.k-button-md.k-button-solid.k-button-solid-primary.k-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #F0532D !important;
    color: #fff !important;
}


/* ─── Global Telerik input/picker focus → brand orange ──────────────────
   User request: every Telerik input across the app shows the brand
   orange focus ring (not the default Material blue-grey). Scope:
   .k-input  — TelerikTextBox, TelerikTextArea, TelerikNumericTextBox
   .k-picker — TelerikDropDownList, TelerikComboBox, TelerikDatePicker,
               TelerikDateTimePicker, TelerikTimePicker, TelerikMaskedTextBox
   Idle border stays Material default; only the *focused* state takes brand
   colour, so the dashboard isn't flooded with orange when the user isn't
   actively editing a field. */
.k-input.k-focus,
.k-input:focus-within,
.k-picker.k-focus,
.k-picker:focus-within,
body .k-input.k-focus,
body .k-input:focus-within,
body .k-picker.k-focus,
body .k-picker:focus-within {
    border-color: #F0532D !important;          /* brand-orange       */
    box-shadow: 0 0 0 3px #FCE9E1 !important;  /* brand-orange-soft  */
    outline: none !important;
}


/* ─── Sidebar brandmark (.nd-logo) → matches landing .brandmark ──────────
   nordic.css renders it in Space Mono with the dusty-blue accent on the
   "Tracking" suffix. Brand-align: Nexa 900 brand-orange "α²" + white
   "Tracking" suffix at 400 weight, same vocabulary as the landing's top
   nav. */
.nd-sidebar .nd-logo,
body .nd-sidebar .nd-logo {
    font-family: 'Nexa', sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
    color: #F0532D !important;          /* brand-orange "α²" */
}
.nd-sidebar .nd-logo span,
body .nd-sidebar .nd-logo span {
    font-weight: 400 !important;
    color: #fff !important;             /* white "Tracking" — sidebar bg is dark */
}