/* ==========================================================================
   Toral Panel — Userside design system
   --------------------------------------------------------------------------
   Single source of truth for every colour, radius, spacing and shadow used by
   the Userside chrome AND by the Elementor content widgets. It lives in the
   plugin (not the theme) because both layers consume it.

   Rules (same as panel-admin's toral-admin.css):
   - Every colour, radius, spacing and shadow value comes from a token below.
     Never hard-code a colour in a component rule.
   - The 5 themes are 5 token blocks selected by [data-tp-us-theme] on <html>.
   - Direction is driven by dir="rtl"/"ltr" on <html>. Only CSS logical
     properties (inline-start / inline-end) are used, so RTL needs no
     mirrored rules and no second stylesheet.
   - Layout family is driven by [data-tp-us-nav="side|top"] on <html>,
     because CSS variables cannot switch a grid template.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Font — Vazirmatn 33.0.3, self-hosted (D6). SIL OFL 1.1, see
   assets/fonts/OFL.txt. No Google Fonts dependency.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Theme-independent tokens
   -------------------------------------------------------------------------- */
:root {
  /* Semantic accents, shared by every theme */
  --tp-us-red:   #ef4444;
  --tp-us-amber: #f59e0b;
  --tp-us-green: #10b981;
  --tp-us-blue:  #3b82f6;
  --tp-us-cyan:  #06b6d4;

  /* Customer levels (Levels\LevelSettings slugs): avatar ring, badges and the
     dashboard level card. Same hues as --tp-level-* in panel-admin. */
  --tp-us-level-new:     #8b94a6;
  --tp-us-level-bronze:  #b8733a;
  --tp-us-level-silver:  #9aa5b3;
  --tp-us-level-gold:    #d4a017;
  --tp-us-level-diamond: #22a9dc;
  --tp-us-level-on:      #ffffff;

  /* Level emblem metal: highlight / body / shadow per level, and the dark
     core shared by every emblem (UI\LevelEmblem). */
  --tp-us-level-new-hi:     #e3e7ee;
  --tp-us-level-new-mid:    #a9b1bf;
  --tp-us-level-new-lo:     #6b7385;
  --tp-us-level-bronze-hi:  #f3c79a;
  --tp-us-level-bronze-mid: #c07a3e;
  --tp-us-level-bronze-lo:  #7a4518;
  --tp-us-level-silver-hi:  #ffffff;
  --tp-us-level-silver-mid: #bcc5d0;
  --tp-us-level-silver-lo:  #6f7a89;
  --tp-us-level-gold-hi:    #fff1a8;
  --tp-us-level-gold-mid:   #e0ae2c;
  --tp-us-level-gold-lo:    #8f6508;
  --tp-us-level-diamond-hi: #e6fbff;
  --tp-us-level-diamond-mid:#5fd0f2;
  --tp-us-level-diamond-lo: #1a6f9c;
  --tp-us-emblem-core:      #1d1b22;

  /* Geometry */
  --tp-us-radius-xl:   25px;
  --tp-us-radius-lg:   16px;
  --tp-us-radius-md:   10px;
  --tp-us-radius-sm:   8px;
  --tp-us-radius-pill: 999px;

  --tp-us-gap:        10px;
  --tp-us-sidebar-w:  252px;
  --tp-us-sidebar-wc: 78px;
  --tp-us-chrome-h:   68px;
  --tp-us-topnav-h:   54px;
  --tp-us-footer-h:   42px;
  --tp-us-avatar:     82px;

  --tp-us-font: Vazirmatn, -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --tp-us-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. Theme 1 — Royal  (light · side menu · panel-admin twin)
   -------------------------------------------------------------------------- */
:root,
[data-tp-us-theme="royal"] {
  --tp-us-b-900: #2a0437;
  --tp-us-b-800: #350645;
  --tp-us-b-700: #4a0d5e;
  --tp-us-b-600: #792c93;
  --tp-us-b-500: #9340ad;
  --tp-us-b-400: #b96fd0;
  --tp-us-b-200: #e6cdef;

  --tp-us-app-bg:        #e1e1e1;
  /* Content surfaces carry a faint tint of the theme colour instead of pure
     white: a white page next to white cards was tiring to read (owner
     request). The hue is the theme's own; the saturation stays minimal. */
  --tp-us-surface:       #f7f1fa;
  --tp-us-surface-2:     #efe4f4;
  --tp-us-surface-3:     #e5d7ec;
  --tp-us-border:        #e3d8ea;
  --tp-us-border-strong: #cbb8d6;

  --tp-us-text:      #1c2434;
  --tp-us-text-soft: #5a6478;
  --tp-us-text-dim:  #8b94a6;

  --tp-us-chrome-bg:     var(--tp-us-b-800);
  --tp-us-chrome-text:   #ffffff;
  --tp-us-chrome-hover:  rgba(255, 255, 255, .12);
  --tp-us-chrome-active: var(--tp-us-b-600);
  --tp-us-chrome-stripe: rgba(255, 255, 255, .035);
  --tp-us-chrome-group:  rgba(255, 255, 255, .55);
  --tp-us-chrome-line:   rgba(255, 255, 255, .12);

  --tp-us-header-bg:     var(--tp-us-b-600);
  --tp-us-header-text:   #ffffff;
  --tp-us-header-hover:  rgba(255, 255, 255, .16);
  --tp-us-header-stripe: rgba(255, 255, 255, .05);

  --tp-us-accent:      var(--tp-us-b-600);
  --tp-us-accent-soft: var(--tp-us-b-200);
  --tp-us-on-accent:   #ffffff;

  --tp-us-shadow-sm: 0 1px 2px rgba(23, 25, 35, .06);
  --tp-us-shadow:    0 4px 16px rgba(23, 25, 35, .08);
  --tp-us-shadow-lg: 0 12px 34px rgba(23, 25, 35, .16);

  --tp-us-table-stripe: #f3ebf7;
  --tp-us-table-head:   #ecdff2;
}

/* --------------------------------------------------------------------------
   3. Theme 2 — Emerald  (light · top menu)
   -------------------------------------------------------------------------- */
[data-tp-us-theme="emerald"] {
  --tp-us-b-900: #022c22;
  --tp-us-b-800: #064e3b;
  --tp-us-b-700: #047857;
  --tp-us-b-600: #059669;
  --tp-us-b-500: #10b981;
  --tp-us-b-400: #34d399;
  --tp-us-b-200: #d1fae5;

  --tp-us-app-bg:        #e4eae7;
  --tp-us-surface:       #f1f9f6;
  --tp-us-surface-2:     #e4f3ec;
  --tp-us-surface-3:     #d8ece3;
  --tp-us-border:        #d6e8e0;
  --tp-us-border-strong: #bad4c9;

  --tp-us-text:      #12231d;
  --tp-us-text-soft: #4d6259;
  --tp-us-text-dim:  #7d928a;

  --tp-us-chrome-bg:     var(--tp-us-b-800);
  --tp-us-chrome-text:   #ffffff;
  --tp-us-chrome-hover:  rgba(255, 255, 255, .13);
  --tp-us-chrome-active: var(--tp-us-b-500);
  --tp-us-chrome-stripe: rgba(255, 255, 255, .035);
  --tp-us-chrome-group:  rgba(255, 255, 255, .55);
  --tp-us-chrome-line:   rgba(255, 255, 255, .12);

  --tp-us-header-bg:     var(--tp-us-b-700);
  --tp-us-header-text:   #ffffff;
  --tp-us-header-hover:  rgba(255, 255, 255, .16);
  --tp-us-header-stripe: rgba(255, 255, 255, .05);

  --tp-us-accent:      var(--tp-us-b-600);
  --tp-us-accent-soft: var(--tp-us-b-200);
  --tp-us-on-accent:   #ffffff;

  --tp-us-shadow-sm: 0 1px 2px rgba(6, 40, 30, .06);
  --tp-us-shadow:    0 4px 16px rgba(6, 40, 30, .09);
  --tp-us-shadow-lg: 0 12px 34px rgba(6, 40, 30, .18);

  --tp-us-table-stripe: #edf7f3;
  --tp-us-table-head:   #dff1e9;
}

/* --------------------------------------------------------------------------
   4. Theme 3 — Sunset  (light · side menu · joined, no gaps — overrides rule 1)
   Palette taken from the reference screenshot: warm orange chrome, neutral
   grey text, hairline borders, white content.
   -------------------------------------------------------------------------- */
[data-tp-us-theme="sunset"] {
  --tp-us-b-900: #7c2d12;
  --tp-us-b-800: #9a3412;
  --tp-us-b-700: #c2410c;
  --tp-us-b-600: #ea580c;
  --tp-us-b-500: #f97316;
  --tp-us-b-400: #fb923c;
  --tp-us-b-200: #ffedd5;

  --tp-us-app-bg:        #f7f8fa;
  --tp-us-surface:       #fff7f1;
  --tp-us-surface-2:     #fbe9dc;
  --tp-us-surface-3:     #f7ddc9;
  --tp-us-border:        #efdccd;
  --tp-us-border-strong: #dcc0a8;

  --tp-us-text:      #1f2937;
  --tp-us-text-soft: #6b7280;
  --tp-us-text-dim:  #9ca3af;

  /* Softer, less saturated orange for the chrome: the pure #ea580c read as
     too loud across a full-height sidebar. It stays the accent colour for
     buttons and links, where the punch is wanted. */
  --tp-us-chrome-bg:     #b3572e;
  --tp-us-chrome-text:   #ffffff;
  --tp-us-chrome-hover:  rgba(255, 255, 255, .16);
  --tp-us-chrome-active: #ffffff;
  --tp-us-chrome-stripe: rgba(255, 255, 255, .04);
  --tp-us-chrome-group:  rgba(255, 255, 255, .62);
  --tp-us-chrome-line:   rgba(255, 255, 255, .2);

  --tp-us-header-bg:     #b3572e;
  --tp-us-header-text:   #ffffff;
  --tp-us-header-hover:  rgba(255, 255, 255, .16);
  --tp-us-header-stripe: rgba(255, 255, 255, .04);

  --tp-us-accent:      var(--tp-us-b-600);
  --tp-us-accent-soft: var(--tp-us-b-200);
  --tp-us-on-accent:   #ffffff;

  --tp-us-shadow-sm: 0 1px 2px rgba(31, 41, 55, .05);
  --tp-us-shadow:    0 1px 3px rgba(31, 41, 55, .08);
  --tp-us-shadow-lg: 0 12px 34px rgba(31, 41, 55, .14);

  --tp-us-table-stripe: #fef2ea;
  --tp-us-table-head:   #fae5d6;

  /* Sunset is the joined theme: no gaps, no rounded chrome. */
  --tp-us-gap: 0px;
  --tp-us-radius-xl: 0px;
}

/* Sunset active menu item is a white pill on the orange rail. */
[data-tp-us-theme="sunset"] .tp-us-navlink.is-active { color: var(--tp-us-b-700); }

/* --------------------------------------------------------------------------
   5. Theme 4 — Golden Black  (dark · top menu · header and menu joined)
   -------------------------------------------------------------------------- */
[data-tp-us-theme="goldenblack"] {
  --tp-us-b-900: #4a3a06;
  --tp-us-b-800: #6b5410;
  --tp-us-b-700: #8a6f1a;
  --tp-us-b-600: #c9a227;
  --tp-us-b-500: #dcb63c;
  --tp-us-b-400: #e8cd6b;
  --tp-us-b-200: #f6ecc4;

  --tp-us-app-bg:        #0a0a0a;
  --tp-us-surface:       #201d19;
  --tp-us-surface-2:     #2a2620;
  --tp-us-surface-3:     #332e27;
  --tp-us-border:        #3d372d;
  --tp-us-border-strong: #554b3b;

  --tp-us-text:      #f2ecdd;
  --tp-us-text-soft: #b9ae95;
  --tp-us-text-dim:  #8b8271;

  --tp-us-chrome-bg:     #121110;
  --tp-us-chrome-text:   #f2ecdd;
  --tp-us-chrome-hover:  rgba(201, 162, 39, .16);
  --tp-us-chrome-active: var(--tp-us-b-600);
  --tp-us-chrome-stripe: rgba(201, 162, 39, .035);
  --tp-us-chrome-group:  rgba(242, 236, 221, .5);
  --tp-us-chrome-line:   rgba(201, 162, 39, .22);

  --tp-us-header-bg:     #121110;
  --tp-us-header-text:   #f2ecdd;
  --tp-us-header-hover:  rgba(201, 162, 39, .18);
  --tp-us-header-stripe: rgba(201, 162, 39, .04);

  --tp-us-accent:      var(--tp-us-b-600);
  --tp-us-accent-soft: rgba(201, 162, 39, .18);
  --tp-us-on-accent:   #17130a;

  --tp-us-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --tp-us-shadow:    0 4px 16px rgba(0, 0, 0, .55);
  --tp-us-shadow-lg: 0 12px 34px rgba(0, 0, 0, .7);

  --tp-us-table-stripe: #262219;
  --tp-us-table-head:   #2c2820;
}

/* --------------------------------------------------------------------------
   6. Theme 5 — Darken Blue  (dark · side menu)
   -------------------------------------------------------------------------- */
[data-tp-us-theme="darkenblue"] {
  --tp-us-b-900: #04202f;
  --tp-us-b-800: #082f49;
  --tp-us-b-700: #0c4a6e;
  --tp-us-b-600: #0284c7;
  --tp-us-b-500: #0ea5e9;
  --tp-us-b-400: #38bdf8;
  --tp-us-b-200: #bae6fd;

  --tp-us-app-bg:        #061019;
  --tp-us-surface:       #0e1e2b;
  --tp-us-surface-2:     #142a3a;
  --tp-us-surface-3:     #1b3548;
  --tp-us-border:        #1e3648;
  --tp-us-border-strong: #2a4c65;

  --tp-us-text:      #e3eff8;
  --tp-us-text-soft: #9fb9cb;
  --tp-us-text-dim:  #74909f;

  --tp-us-chrome-bg:     var(--tp-us-b-900);
  --tp-us-chrome-text:   #eaf5fc;
  --tp-us-chrome-hover:  rgba(255, 255, 255, .1);
  --tp-us-chrome-active: var(--tp-us-b-700);
  --tp-us-chrome-stripe: rgba(255, 255, 255, .028);
  --tp-us-chrome-group:  rgba(234, 245, 252, .5);
  --tp-us-chrome-line:   rgba(255, 255, 255, .12);

  --tp-us-header-bg:     var(--tp-us-b-800);
  --tp-us-header-text:   #eaf5fc;
  --tp-us-header-hover:  rgba(255, 255, 255, .12);
  --tp-us-header-stripe: rgba(255, 255, 255, .04);

  --tp-us-accent:      var(--tp-us-b-500);
  --tp-us-accent-soft: rgba(14, 165, 233, .18);
  --tp-us-on-accent:   #041722;

  --tp-us-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --tp-us-shadow:    0 4px 16px rgba(0, 0, 0, .5);
  --tp-us-shadow-lg: 0 12px 34px rgba(0, 0, 0, .65);

  --tp-us-table-stripe: #112434;
  --tp-us-table-head:   #16293a;
}

/* --------------------------------------------------------------------------
   7. Theme 6 — Sapphire  (light · side menu)
   Blue chrome with diagonal texture. Yellow (--tp-us-pop) is used sparingly:
   the pinned New Order button, the header Add Funds button, field focus halo.
   -------------------------------------------------------------------------- */
[data-tp-us-theme="sapphire"] {
  --tp-us-b-900: #00106b;
  --tp-us-b-800: #001a99;
  --tp-us-b-700: #0022cc;
  --tp-us-b-600: #002aff;
  --tp-us-b-500: #627cfb;
  --tp-us-b-400: #8fa2fc;
  --tp-us-b-200: #dbe2fe;

  --tp-us-app-bg:        #e9edfd;
  --tp-us-surface:       #f7f8fe;
  --tp-us-surface-2:     #eef1fd;
  --tp-us-surface-3:     #e3e8fc;
  --tp-us-border:        #dde3fa;
  --tp-us-border-strong: #c3cdf5;

  --tp-us-text:      #131a3a;
  --tp-us-text-soft: #525b7d;
  --tp-us-text-dim:  #8790ad;

  --tp-us-chrome-bg:     var(--tp-us-b-800);
  --tp-us-chrome-text:   #ffffff;
  --tp-us-chrome-hover:  rgba(255, 255, 255, .13);
  --tp-us-chrome-active: var(--tp-us-b-600);
  --tp-us-chrome-stripe: rgba(255, 255, 255, .05);
  --tp-us-chrome-group:  rgba(255, 255, 255, .6);
  --tp-us-chrome-line:   rgba(255, 255, 255, .14);

  --tp-us-header-bg:     var(--tp-us-b-700);
  --tp-us-header-text:   #ffffff;
  --tp-us-header-hover:  rgba(255, 255, 255, .16);
  --tp-us-header-stripe: rgba(255, 255, 255, .06);

  --tp-us-accent:      var(--tp-us-b-600);
  --tp-us-accent-soft: var(--tp-us-b-200);
  --tp-us-on-accent:   #ffffff;

  /* Yellow accent: only where a rule names it (see the header comment). */
  --tp-us-pop:      #b6c2f4;
  --tp-us-on-pop:   #002aff;
  --tp-us-pop-soft: rgba(182, 194, 244, .9);

  --tp-us-shadow-sm: 0 1px 2px rgba(0, 26, 153, .07);
  --tp-us-shadow:    0 4px 16px rgba(0, 26, 153, .10);
  --tp-us-shadow-lg: 0 12px 34px rgba(0, 26, 153, .20);

  --tp-us-table-stripe: #f1f3fd;
  --tp-us-table-head:   #e7ebfc;
}

/* --------------------------------------------------------------------------
   Topic tones
   --------------------------------------------------------------------------
   One colour hook shared by every component that renders an Updates topic tag:
   the header bell drop-down (chrome) and the Updates widget both set
   .tp-tone-<name> and then paint from --tp-us-tone, so the topic colours are
   defined once here instead of being repeated per stylesheet. The tone names
   come from Announcements\AnnouncementTopics::tone(). */
.tp-tone-blue    { --tp-us-tone: var(--tp-us-blue); }
.tp-tone-green   { --tp-us-tone: var(--tp-us-green); }
.tp-tone-red     { --tp-us-tone: var(--tp-us-red); }
.tp-tone-amber   { --tp-us-tone: var(--tp-us-amber); }
.tp-tone-indigo  { --tp-us-tone: var(--tp-us-accent); }
.tp-tone-neutral { --tp-us-tone: var(--tp-us-text-dim); }

/* --------------------------------------------------------------------------
   Customer level colour hook
   --------------------------------------------------------------------------
   .tp-level-<slug> sets --tp-us-level for every component that paints a
   customer level (header avatar ring, profile picture, badges, dashboard). */
.tp-level-new {
  --tp-us-level: var(--tp-us-level-new);
  --tp-us-level-hi: var(--tp-us-level-new-hi); --tp-us-level-mid: var(--tp-us-level-new-mid); --tp-us-level-lo: var(--tp-us-level-new-lo);
}
.tp-level-bronze {
  --tp-us-level: var(--tp-us-level-bronze);
  --tp-us-level-hi: var(--tp-us-level-bronze-hi); --tp-us-level-mid: var(--tp-us-level-bronze-mid); --tp-us-level-lo: var(--tp-us-level-bronze-lo);
}
.tp-level-silver {
  --tp-us-level: var(--tp-us-level-silver);
  --tp-us-level-hi: var(--tp-us-level-silver-hi); --tp-us-level-mid: var(--tp-us-level-silver-mid); --tp-us-level-lo: var(--tp-us-level-silver-lo);
}
.tp-level-gold {
  --tp-us-level: var(--tp-us-level-gold);
  --tp-us-level-hi: var(--tp-us-level-gold-hi); --tp-us-level-mid: var(--tp-us-level-gold-mid); --tp-us-level-lo: var(--tp-us-level-gold-lo);
}
.tp-level-diamond {
  --tp-us-level: var(--tp-us-level-diamond);
  --tp-us-level-hi: var(--tp-us-level-diamond-hi); --tp-us-level-mid: var(--tp-us-level-diamond-mid); --tp-us-level-lo: var(--tp-us-level-diamond-lo);
}

/* The emblem itself (UI\LevelEmblem): size comes from the component using it. */
.tp-level-emblem {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}