/* GENERATED by @stonify/css — do not edit.
   Stonify × ThingsBoard chrome theme: core + app tokens + fonts + overrides, one file.
   Inject via reverse-proxy sub_filter or a thin overlay. See docs/thingsboard. */
/* ============================================================
   Stonify Design System — tokens.css
   Source of truth: web/theme.css + web/design-system/tokens.json
   Dark-mode-first. All values pinned to brand book + theme.css.
   ============================================================ */

/* --- Fontface: Fustat (brand) ----------------------------------- */
/* Variable font preferred; static weights provided for tooling that
   doesn't pick up the variable axis. */

@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/Fustat-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/Fustat-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Fustat-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fustat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Fustat-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Fustat-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Fustat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Fustat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Fustat-ExtraBold.ttf') format('truetype');
}

/* Gvonz Thin — display-only mono/stencil face, reserved for art-direction.
   Not used in product UI. Available for posters / large statements. */
@font-face {
  font-family: 'Gvonz';
  font-style: normal;
  font-weight: 100 300;
  font-display: swap;
  src: url('fonts/GvonzThin.otf') format('opentype');
}

/* --- Tokens (dark-mode canonical) ------------------------------- */
:root {
  /* Surface ladder (HSL triplets — mirrors theme.css) */
  --background: 198 31% 6%;     /* #0E1417 — page canvas */
  --section-muted: 198 10% 13%; /* #1E2326 — alternating section */
  --card-bottom: 198 8% 20%;    /* #2F3437 — lower stop of card gradient */
  --card: 198 8% 24%;           /* #393E41 — upper stop (the lifted surface) */

  /* Text */
  --foreground: 60 4% 95%;        /* #F2F2F1 */
  --muted-foreground: 210 2% 75%; /* #BEBFC0 */

  /* Brand pair */
  --primary: 276 91% 38%;     /* #7209B7 purple — primary action */
  --secondary: 198 100% 45%;  /* #009FE3 cyan — selected / focus / current */
  --primary-foreground: 60 4% 95%;
  --secondary-foreground: 198 31% 6%;

  /* State */
  --border: 210 2% 75%;       /* always consumed with opacity */
  --ring: 198 100% 45%;       /* focus outline = cyan */
  --destructive: 0 70% 56%;   /* #D63F3F */
  --muted: 192 2% 52%;

  /* Hex aliases — brand book direct values (used in light-mode print) */
  --stonify-brand-dark: #0b1215;
  --stonify-brand-light: #f2f2f1;
  --stonify-brand-gray-dark: #474c4e;
  --stonify-brand-gray-mid: #828687;
  --stonify-brand-gray-light: #bebfc0;
  --stonify-brand-purple: #7209b7;
  --stonify-brand-blue: #009fe3;

  /* Chamfer (clip-path corner cut depths — NEVER border-radius on brand surfaces).
     The ladder is sm → default → lg → page. Button + pill chamfers are fixed
     numerals; pill encodes single-corner semantics and is NOT substitutable
     for chamfer-sm (which is a full 4-corner cut for small/narrow surfaces). */
  --stonify-chamfer-sm: 0.5rem;       /* 8px — small/narrow surfaces (partner logo cards, frame placeholders) */
  --stonify-chamfer: 1rem;            /* 16px — cards / frames default */
  --stonify-chamfer-lg: 1.25rem;      /* 20px — prominent shapes */
  --stonify-chamfer-page: 2rem;       /* 32px — page-level surfaces */
  --stonify-chamfer-button: 0.7rem;   /* 11.2px — fixed */
  --stonify-chamfer-pill: 0.5rem;     /* 8px — single-corner */

  /* Brand signature gradient */
  --gradient-brand: linear-gradient(90deg, #7209b7 0%, #009fe3 100%);

  /* Type */
  --font-stonify: "Fustat", "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-display-alt: "Gvonz", "Fustat", ui-sans-serif; /* poster-only */

  /* Spacing scale (Tailwind 4px step — use ONLY these) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  /* Layout maxes */
  --layout-section: 1152px;        /* max-w-6xl */
  --layout-section-narrow: 768px;  /* max-w-3xl */
  --layout-display-column: 896px;  /* max-w-4xl */

  color-scheme: dark;
}

/* --- Light mode tokens (opt-in) -------------------------------- */
/* Activate by setting `data-theme="light"` on <html> or <body>.
   Stonify is dark-first; light mode is for print, letterhead, and any
   surface where dark would be heavier than the brand intends.
   The brand colours (purple, cyan) keep their hex values — the brand
   pair is mode-invariant. The surface ladder and text colours invert.
   Borders flip from light-grey-on-dark to dark-grey-on-light, keeping
   the same opacity ladder semantics (/.25 default → /1 active). */
[data-theme="light"] {
  /* Surface ladder — same logical order (background → muted → card),
     but inverted brightness. The card gradient still flows light-at-top
     → darker-at-bottom (light from above metaphor preserved). */
  --background: 60 12% 97%;       /* #F8F8F6 — page canvas, warm white */
  --section-muted: 60 4% 91%;     /* #E9E9E6 — alternating section */
  --card: 60 6% 94%;              /* #F0F0EE — card gradient top (lifted from muted) */
  --card-bottom: 60 4% 88%;       /* #E1E1DE — card gradient bottom (subtle floor shadow) */

  /* Text — invert. Foreground uses brand-dark; muted uses brand-gray-dark. */
  --foreground: 198 31% 6%;       /* #0B1215 — brand dark */
  --muted-foreground: 198 5% 32%; /* #4D5256 — close to brand-gray-dark */

  /* Brand pair — mode-invariant. Same hex in both modes. */
  --primary: 276 91% 38%;         /* #7209B7 — passes AA on white */
  --secondary: 198 100% 45%;      /* #009FE3 — same as dark mode */
  --primary-foreground: 60 4% 95%;
  --secondary-foreground: 198 31% 6%;

  /* Border — dark grey on light surfaces. Same opacity ladder applies. */
  --border: 198 5% 32%;           /* #4D5256 — consumed with opacity */
  --ring: 198 100% 45%;           /* focus = cyan, mode-invariant */
  --destructive: 0 70% 56%;       /* #D63F3F — AA-passing on white at body text */
  --muted: 192 2% 52%;            /* mid-grey, mode-invariant */

  color-scheme: light;
}

/* Light-mode usage notes — for the next agent
   ===============================================
   1. PixelAccent: in light mode, pick `color="dark"` instead of `"white"`
      for the neutral pixel of cluster/corner presets. The "white" cells
      vanish on light surfaces.
   2. BrandMark: pass `tone="dark"` for light-mode surfaces (renders the
      black wordmark/icon variant).
   3. OnLockup: pass `tone="color-black"` (or `tone="black"`) for the
      light-surface variants of ON-* sub-brand lockups.
   4. The cyan `--secondary` does not pass WCAG AA for body text on white.
      Use it for focus rings, decorative outlines, and ≥24px display text;
      use `--foreground` (brand-dark) for state-conveying body text.
   5. Card gradients in light mode are subtle by design — the chamfer +
      border do most of the visual work. Don't compensate with extra
      shadow or stronger fills.
*/

/* --- Body baseline ---------------------------------------------- */
html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-stonify);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Semantic type roles ---------------------------------------- */
/* Use these classes when raw HTML is closer-to-hand than the React
   primitives. They map 1:1 to the React components and to tokens.json. */

.t-eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: hsl(var(--muted-foreground));
}
.t-eyebrow--sm { letter-spacing: 0.24em; }
.t-eyebrow--lg { letter-spacing: 0.32em; }

.t-h1 {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.02;
  color: hsl(var(--foreground));
}

.t-h2 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: hsl(var(--foreground));
}

.t-h3 {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: hsl(var(--foreground));
}

.t-body-lg {
  font-size: 18px;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .t-body-lg { font-size: 20px; line-height: 1.6; } }

.t-body {
  font-size: 14px;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
}
@media (min-width: 768px) { .t-body { font-size: 16px; } }

.t-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}

.t-stat-value {
  font-size: clamp(48px, 6vw, 60px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
  color: hsl(var(--foreground));
}

.t-tag {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* --- Brand utilities -------------------------------------------- */

/* Text gradient (use sparingly — counts against per-fold density budget) */
.brand-text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Surfaces */
.surface-bg { background: hsl(var(--background)); }
.surface-muted { background: hsl(var(--section-muted)); }
.surface-card {
  background: linear-gradient(
    180deg,
    hsl(var(--card)) 0%,
    hsl(var(--card-bottom)) 100%
  );
}

/* Chamfer presets (clip-path polygons — match the React components) */
.chamfer-full {
  clip-path: polygon(
    0 var(--stonify-chamfer),
    var(--stonify-chamfer) 0,
    calc(100% - var(--stonify-chamfer)) 0,
    100% var(--stonify-chamfer),
    100% calc(100% - var(--stonify-chamfer)),
    calc(100% - var(--stonify-chamfer)) 100%,
    var(--stonify-chamfer) 100%,
    0 calc(100% - var(--stonify-chamfer))
  );
}
.chamfer-frame {
  clip-path: polygon(
    0 var(--stonify-chamfer-lg),
    var(--stonify-chamfer-lg) 0,
    calc(100% - var(--stonify-chamfer-lg)) 0,
    100% var(--stonify-chamfer-lg),
    100% calc(100% - var(--stonify-chamfer-lg)),
    calc(100% - var(--stonify-chamfer-lg)) 100%,
    var(--stonify-chamfer-lg) 100%,
    0 calc(100% - var(--stonify-chamfer-lg))
  );
}
/* Two corners: top-right + bottom-left (Button primary / ChamferedCard accent tier) */
.chamfer-accent {
  clip-path: polygon(
    0 0,
    calc(100% - 0.7rem) 0,
    100% 0.7rem,
    100% 100%,
    0.7rem 100%,
    0 calc(100% - 0.7rem)
  );
}
/* Pill (single bottom-right corner) — Button "pill" variant */
.chamfer-pill {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 0.5rem),
    calc(100% - 0.5rem) 100%,
    0 100%
  );
}

/* Border-opacity ladder (use as `var(--border)` with hsl/) */
/* These are docs values — apply directly:  border-color: hsl(var(--border) / 0.25); */

/* Focus ring */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ============================================================
   @stonify/tokens — APP semantic layer (Product/SaaS)
   Source of truth: kits/app/app.css token blocks (verbatim).
   Layers on top of the core tokens (tokens.css). No new brand
   colours, no new font — a denser, theme-responsive deployment.

   Three blocks are lifted here, unchanged:
     • :root              — global state + chart palette (work anywhere)
     • [data-theme=light] — AA-tuned state overrides for warm-white
     • .app               — the density tier (--app-* sizing)
   ============================================================ */

/* ---- Global state + chart tokens (theme-responsive) ---------------- */
:root {
  /* Semantic state — dark-mode values (light, legible on dark surfaces) */
  --ok: oklch(0.80 0.14 155);
  --warn: oklch(0.84 0.13 85);
  --info: hsl(var(--secondary));

  /* Chart palette — cyan primary, purple secondary, neutral + green */
  --chart-1: #009FE3;
  --chart-2: #7209B7;
  --chart-3: hsl(var(--muted-foreground));
  --chart-4: var(--ok);
  --chart-grid: hsl(var(--border) / 0.15);
  --chart-axis: hsl(var(--muted-foreground));
}
[data-theme="light"] {
  /* Darken state colours so text/fills clear AA on the warm-white ladder. */
  --ok: oklch(0.50 0.15 150);
  --warn: oklch(0.52 0.12 72);
  --info: oklch(0.50 0.16 245);
}

/* ---- App density tier --------------------------------------------- */
.app {
  /* App type scale — smaller floor than the marketing scale */
  --app-text-xs: 11px;    /* micro labels, table meta, axis ticks */
  --app-text-sm: 12px;    /* secondary UI text, badges */
  --app-text-base: 13px;  /* DEFAULT app UI text */
  --app-text-md: 14px;    /* emphasised body, inputs */
  --app-text-lg: 16px;    /* panel titles */
  --app-text-xl: 20px;    /* page title */
  --app-metric: 30px;     /* KPI value (vs marketing Stat 48–60) */
  --app-metric-lg: 40px;  /* hero KPI */

  /* Control + row sizing (comfortable tier) */
  --app-control-sm: 28px;
  --app-control-md: 34px;
  --app-control-lg: 40px;
  --app-row-h: 44px;       /* comfortable table row */
  --app-row-h-dense: 36px; /* opt-in dense table row */

  /* App chrome metrics */
  --app-sidebar-w: 248px;
  --app-sidebar-w-collapsed: 64px;
  --app-topbar-h: 60px;
  --app-radius: 0px;            /* panels are square by default */
  --app-gutter: 24px;

  /* App-restrained chamfer — a single small accent corner (8px). */
  --app-chamfer: 8px;
}

/* ============================================================
   Stonify × ThingsBoard — chrome theme (brand accents over TB's NATIVE theme)
   ------------------------------------------------------------
   LAYOUT: ALL LIGHT — light toolbar + light side nav + light content. TB's own
   light theme handles most of it; we force the brand light surfaces and apply a
   comprehensive legibility pass on the chrome that TB still colours for its dark
   bar:
     • TOP TOOLBAR is the brand LIGHT surface (#F8F8F6 + one cyan hairline). TB
       colours toolbar controls white (built for its dark bar), so the top bar
       gets ONE legibility pass that darkens every text-bearing control (buttons,
       icons, selects, breadcrumb). Raised/filled brand buttons are a DIFFERENT
       base class and are deliberately excluded → they keep white-on-purple.
     • SIDE NAV is forced light with dark nav text/icons (scoped to the nav) so
       it can't clash with whatever text colour TB picks. (TB ties nav text to
       the toolbar mode — a light toolbar makes it use dark text, so the nav
       surface MUST be light to match.)
     • LOGIN is the brand light card with the same legibility pass.
     • CONTENT is TB's native light theme (with a consistent light canvas).
   Brand accents: black Stonify wordmark; purple chamfered action buttons; cyan
   focus + hairline; Fustat type; branded widget/value-card surfaces.

   Chrome hexes are written directly (not hsl(var(--background))) because
   TB/Material define generic --background/--foreground custom props NEAR THE
   CHROME that SHADOW the Stonify tokens of the same name. Stable tokens.css
   values: light #F8F8F6 / text #0B1215, dark #0E1417, card #393E41→#2F3437.
   Content surfaces below still resolve from the tokens.

   ⚠ Material class names shift between TB versions — verify SELECTORS in
   devtools (the side-menu + toolbar control classes especially).
   ============================================================ */

/* --- Brand type (TB defaults to Roboto) --------------------------- */
body,
.mat-typography,
.mat-toolbar,
.mat-mdc-card,
.mat-mdc-button-base {
  font-family: var(--font-stonify) !important;
}

/* --- Top toolbar: brand LIGHT surface + one cyan hairline ----------
   A background IMAGE (1-stop gradient) paints OVER TB's own background-color,
   which wins the colour cascade; a plain background-color would lose. */
mat-toolbar.mat-primary,
.mat-toolbar.mat-primary,
.tb-primary-toolbar {
  background: linear-gradient(#f8f8f6, #f8f8f6) !important; /* --background (light) */
  border: 0 !important;
  border-bottom: 2px solid #009fe3 !important;              /* --secondary, the hairline */
}
/* Comprehensive legibility pass: darken EVERY text-bearing toolbar control on
   the light surface (TB colours them white for its dark bar). Raised/filled
   brand buttons use a different base class (.mat-mdc-raised/unelevated-button)
   and are intentionally absent here → they keep white-on-purple. */
.mat-toolbar.mat-primary,
.tb-primary-toolbar,
.mat-toolbar.mat-primary a,
.mat-toolbar.mat-primary .mat-icon,
.mat-toolbar.mat-primary .mat-mdc-button,
.mat-toolbar.mat-primary .mat-mdc-button .mdc-button__label,
.mat-toolbar.mat-primary .mat-mdc-icon-button,
.mat-toolbar.mat-primary .mat-mdc-outlined-button,
.mat-toolbar.mat-primary .mat-mdc-outlined-button .mdc-button__label,
.mat-toolbar.mat-primary .mat-mdc-select-value-text,
.mat-toolbar.mat-primary .mat-mdc-select-min-line,
.mat-toolbar.mat-primary .mat-mdc-select-placeholder,
.mat-toolbar.mat-primary .mat-mdc-select-arrow,
.tb-primary-toolbar .mat-icon,
.tb-primary-toolbar .mat-mdc-button,
.tb-primary-toolbar .mat-mdc-button .mdc-button__label,
.tb-primary-toolbar .mat-mdc-icon-button {
  color: #0b1215 !important;                                /* --foreground (light) */
}
/* Outlined buttons on the light bar (e.g. "Edit mode") → visible border. */
.mat-toolbar.mat-primary .mat-mdc-outlined-button,
.tb-primary-toolbar .mat-mdc-outlined-button {
  border-color: rgba(11, 18, 21, 0.28) !important;
}

/* --- Side navigation: brand LIGHT + dark nav text (all-light theme) ----
   TB ties nav text colour to the toolbar mode — with a light toolbar it uses
   DARK nav text, so the nav surface must be light too. Force light + dark nav
   text/icons (scoped to the nav) so nothing can clash, regardless of TB's pick.
   (.tb-side-menu is TB's nav-specific class — verify per version.) */
.tb-side-menu,
.tb-side-menu .mat-drawer-inner-container {
  background: #f8f8f6 !important;                       /* --background (light) */
  border-right: 1px solid rgba(11, 18, 21, 0.10) !important; /* hairline vs content */
}
.tb-side-menu,
.tb-side-menu a,
.tb-side-menu .mat-icon,
.tb-side-menu .mat-mdc-list-item,
.tb-side-menu .mdc-list-item__primary-text,
.tb-side-menu span {
  color: #0b1215 !important;                            /* --foreground (light) */
}

/* --- Login: brand LIGHT card + the same legibility pass ----------- */
.tb-login-content {
  background: linear-gradient(#f8f8f6, #f8f8f6) !important;  /* --background (light) */
}
.tb-login-content .mat-mdc-card {
  background: linear-gradient(#ffffff, #f4f4f1) !important;  /* --card → --card-bottom (light) */
  border: 1px solid rgba(11, 18, 21, 0.12) !important;
  box-shadow: none !important;
}
.tb-login-content,
.tb-login-content .mat-mdc-form-field,
.tb-login-content label,
.tb-login-content .mdc-floating-label,
.tb-login-content .mat-mdc-input-element,
.tb-login-content input,
.tb-login-content .mat-icon,
.tb-login-content .title,
.tb-login-content .mat-mdc-form-field-icon-prefix {
  color: #0b1215 !important;
}
.tb-login-content .mat-mdc-input-element { caret-color: #0b1215 !important; }
.tb-login-content .mat-mdc-input-element::placeholder { color: rgba(11, 18, 21, 0.5) !important; }
.tb-login-content .mdc-line-ripple::before { border-bottom-color: rgba(11, 18, 21, 0.42) !important; }
/* links + text buttons (e.g. "Forgot your password?") → brand cyan; the raised
   "Sign in" button is .mat-mdc-raised-button (kept white-on-purple), not here. */
.tb-login-content a,
.tb-login-content .mat-mdc-button .mdc-button__label { color: #009fe3 !important; }

/* --- Primary action buttons: solid brand + the fixed button chamfer ---
   TB wires main action buttons to Material's `accent` palette (the default
   orange), and `mat-mdc-raised-button` maps to MDC's "protected" button — so we
   cover BOTH palettes and BOTH MDC container-colour vars. White-on-purple is
   correct on ANY surface (light bar or content). */
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-flat-button.mat-primary,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-flat-button.mat-accent {
  --mdc-filled-button-container-color: hsl(var(--primary));
  --mdc-filled-button-label-text-color: hsl(var(--primary-foreground));
  --mdc-protected-button-container-color: hsl(var(--primary));
  --mdc-protected-button-label-text-color: hsl(var(--primary-foreground));
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-radius: 0 !important; /* drop Material's radius before the chamfer */
  clip-path: polygon(0 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% 100%, 0.45rem 100%, 0 calc(100% - 0.45rem));
  box-shadow: none !important;
  transition: filter .15s, background .18s;
}
.mat-mdc-raised-button.mat-primary:hover,
.mat-mdc-unelevated-button.mat-primary:hover,
.mat-mdc-flat-button.mat-primary:hover,
.mat-mdc-raised-button.mat-accent:hover,
.mat-mdc-unelevated-button.mat-accent:hover,
.mat-mdc-flat-button.mat-accent:hover {
  background: var(--gradient-brand) !important; /* the one allowed gradient-on-action */
  filter: brightness(1.06);
}

/* Stroked / outlined buttons → brand chamfer (colour handled per-surface above
   for the toolbar; in light content TB colours them correctly itself). */
.mat-mdc-outlined-button {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 0.45rem) 0, 100% 0.45rem, 100% 100%, 0.45rem 100%, 0 calc(100% - 0.45rem));
}

/* --- Focus ring = cyan (brand a11y rule) -------------------------- */
*:focus-visible {
  outline: 2px solid hsl(var(--ring)) !important;
  outline-offset: 2px;
}

/* --- Links / accent text ------------------------------------------ */
a:not(.mat-mdc-button-base) { color: hsl(var(--secondary)); }

/* --- Built-in widget surfaces → brand (LIGHT content; dark-on-light = safe) ---
   Brands the widget CHROME globally — card surface, borders, header, tables,
   value cards — so EVERY standard ThingsBoard widget reads as Stonify without
   per-widget work. Scoped to `.tb-widget` (not global .mat-mdc-card) so
   dialogs/menus keep TB's own treatment.

   BOUNDARY: CSS reaches the widget shell + HTML content (cards, tables, type).
   It does NOT recolour widget INTERNALS drawn from config/JS — chart series
   colours, gauge bands, map tiles. Set those to the brand palette (primary
   #7209B7, secondary #009FE3, chart-1..4) per widget, or ship a dashboard preset. */
.tb-widget {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 1px solid hsl(var(--border) / 0.25) !important;
  background: linear-gradient(180deg, hsl(var(--card)) 0%, hsl(var(--card-bottom)) 100%) !important;
  color: hsl(var(--foreground)) !important;
}
.tb-widget .mat-mdc-card,
.tb-widget .mat-mdc-card-content,
.tb-widget .tb-widget-container {
  background: transparent !important;
  box-shadow: none !important;
}
/* Widget title row → Fustat */
.tb-widget .tb-widget-title,
.tb-widget .mat-mdc-card-title,
.tb-widget .tb-title {
  font-family: var(--font-stonify) !important;
  color: hsl(var(--foreground)) !important;
}
/* Tables inside widgets → brand header + row hairlines */
.tb-widget table.mat-mdc-table { background: transparent !important; }
.tb-widget .mat-mdc-header-row {
  background: hsl(var(--section-muted)) !important;
  border-bottom: 1px solid hsl(var(--border) / 0.35) !important;
}
.tb-widget .mat-mdc-header-cell {
  font-family: var(--font-stonify) !important;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 11px !important; font-weight: 600 !important;
  color: hsl(var(--muted-foreground)) !important;
}
.tb-widget .mat-mdc-row { border-bottom: 1px solid hsl(var(--border) / 0.15) !important; }
.tb-widget .mat-mdc-cell { color: hsl(var(--foreground)) !important; border: 0 !important; }
/* Value cards paint their own surface (config-level) — brand it to --card so
   it matches the dashboard instead of a hardcoded white panel. */
.tb-value-card-panel { background: hsl(var(--card)) !important; box-shadow: none !important; }
.tb-value-card-overlay { background: transparent !important; backdrop-filter: none !important; }

/* --- Dashboard canvas → consistent LIGHT content surface ----------
   Dashboards carry their own background config (some default to a dark grid),
   so without this they render inconsistently. Force the brand light canvas. A
   background IMAGE (not colour) beats TB's inline background-color. */
.tb-dashboard-page,
.tb-dashboard-content,
.tb-dashboard-layout,
.tb-dashboard-page .gridster,
.tb-dashboard-content .gridster {
  background: linear-gradient(#f8f8f6, #f8f8f6) !important; /* --background (light) */
}

/* --- Brand scrollbars --------------------------------------------- */
* { scrollbar-color: hsl(var(--border) / 0.5) transparent; scrollbar-width: thin; }