/* ============================================================
   Digital Commerce Integration — Shared Design Tokens & Components  (tj-*)
   ------------------------------------------------------------
   One source of truth for every surface (marketplace, admin,
   B2B tenant, admin B2B, fleet). "Digital Commerce Integration SaaS v2": a light,
   premium B2B dashboard language — white surfaces on a soft
   grey canvas, hairline borders, soft shadows, 8–12px radii,
   one brand accent (admin-configurable, green by default).

   RULES
   - No bare-element selectors (body, a, input…). Everything is
     opt-in via .tj-* classes, so this file is inert until used.
   - RTL via logical properties only (no [dir=rtl] forks).
   - Legacy variables are bridged per-surface in tj-<surface>.css,
     never here.
   - The brand accent is used for ONE primary action per view,
     active navigation, focus rings and links. Everything else
     gets weight, size or a rule — not colour.
   ============================================================ */

:root{
    /* ── Secondary: slate scale — headings, dark bands, the dark theme canvas ── */
    --tj-navy-50:  #f3f4f6;
    --tj-navy-100: #e5e7eb;
    --tj-navy-200: #d1d5db;
    --tj-navy-300: #9ca3af;
    --tj-navy-400: #6b7280;
    --tj-navy-500: #4b5563;
    --tj-navy-600: #374151;
    --tj-navy-700: #1e293b;   /* raised step on dark */
    --tj-navy-750: #263049;   /* hairline dividers on dark */
    --tj-navy-panel: #131a2c; /* dark panel step */
    --tj-navy-sidebar: #0d1424;
    --tj-navy-800: #0f172a;
    --tj-navy-900: #0a0f1e;   /* dark canvas */
    --tj-navy:     var(--tj-navy-700);

    /* ── Brand primary. The ONLY decorative accent, and the single source of
          truth for it. Every other accent token on every surface — --adm-accent-*
          in tj-admin-tokens.css (dark) and tj-kit-web.css (light), the
          html[data-theme] blocks in tj-theme.css, and the .tj-dark / .tj-shop
          scopes — resolves back to this ladder.

          Admin → Settings → Appearance stores one base hex; App\Support\BrandPalette
          re-derives the ladder from it and partials/brand-vars.blade.php restates it
          after tj-theme.css. Leave the admin setting empty and nothing is emitted at
          all, so these hand-tuned values (the shipped green) render as authored.
          Never hardcode a green hex in a component — always read this ladder. ── */
    --tj-brand-50:     #ecfdf3;
    --tj-brand-100:    #d1fae5;
    --tj-brand-200:    #a7f0c8;
    --tj-brand-300:    #6ee7b0;  /* ghost text / links on the dark canvas (#0a0f1e)      */
    --tj-brand-400:    #34d38a;  /* text weight on dark                                  */
    --tj-brand:        #0d7f45;  /* 500 · base fill — white on it is 5.07:1              */
    --tj-brand-hover:  #0b6e3c;  /* 600 · hover */
    --tj-brand-deep:   #095c33;  /* 700 · press / ink on light tint                      */
    --tj-brand-deeper: #074a29;  /* 800 · press on the light console mapping             */
    --tj-brand-950:    #04301b;  /* 950 · dark page-hero surface (--adm-hero-bg)         */
    --tj-brand-on:     #ffffff;  /* readable ink ON a base-colored fill                  */

    /* Channel triplets. rgba() cannot take a hex var, so tinted fills are written
       `rgba(var(--tj-brand-rgb), .12)`. Keep in sync with the hexes above. */
    --tj-brand-rgb:     13,127,69;
    --tj-brand-400-rgb: 52,211,138;

    --tj-brand-gradient: linear-gradient(135deg, var(--tj-brand), var(--tj-brand));
    --tj-brand-scrim:    rgba(var(--tj-brand-rgb), .60);

    /* Legacy aliases. ~172 call sites still say --tj-orange-*; kept pointing at the
       ladder so none of them need sweeping. */
    --tj-orange-50:    var(--tj-brand-50);
    --tj-orange-100:   var(--tj-brand-100);
    --tj-orange-200:   var(--tj-brand-200);
    --tj-orange-400:   var(--tj-brand-400);
    --tj-orange:       var(--tj-brand);
    --tj-orange-hover: var(--tj-brand-hover);
    --tj-orange-deep:  var(--tj-brand-deep);
    --tj-primary:      var(--tj-brand);

    /* ── Semantic: solid + light tint + dark ink; *-dark = ink on the dark theme.
          Fixed on purpose — they never follow the brand, so a green brand still
          leaves success / warning / danger / info unambiguous. ── */
    --tj-success:      #12a86b;
    --tj-success-50:   #e6f7ef;
    --tj-success-ink:  #0b7a4e;
    --tj-success-dark: #34d399;
    --tj-warning:      #e0891a;
    --tj-warning-50:   #fdf3e4;
    --tj-warning-ink:  #a35b06;
    --tj-warning-dark: #fbbf24;
    --tj-danger:       #dc2626;
    --tj-danger-50:    #fdecec;
    --tj-danger-ink:   #b42323;
    --tj-danger-dark:  #f87171;
    --tj-info:         #0284c7;
    --tj-info-50:      #e7f3fb;
    --tj-info-ink:     #06618f;
    --tj-info-dark:    #38bdf8;

    /* ── Neutrals (light) ── */
    --tj-bg:          #f5f6f8;   /* canvas                                   */
    --tj-bg-2:        #f9fafb;   /* second canvas step / thead / footers     */
    --tj-surface:     #ffffff;   /* cards, tables, inputs                    */
    --tj-surface-alt: #f9fafb;   /* card headers, hover rows                 */
    --tj-ink:         #111827;
    --tj-ink-2:       #1f2937;
    --tj-muted:       #4b5563;   /* 7.5:1 on white                           */
    --tj-muted-2:     #6b7280;   /* 4.8:1 on white — captions, placeholders  */
    --tj-border:      #e5e7eb;
    --tj-border-2:    #f0f1f3;   /* row separators                           */
    --tj-input-border:#d1d5db;

    /* ── Radius scale ──
          sm 6 = badges, chips, small controls · r 8 = buttons, inputs, menus
          lg 12 = cards, panels, tables · xl 16 = modals, heroes · full = pills/avatars */
    --tj-r-0:    0;
    --tj-r-sm:   6px;
    --tj-r:      8px;
    --tj-r-lg:   12px;
    --tj-r-xl:   16px;
    --tj-r-full: 999px;

    /* ── Elevation: soft, colourless, low-alpha. One step per layer. ── */
    --tj-shadow-xs: 0 1px 2px rgba(16,24,40,.04);
    --tj-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
    --tj-shadow:    0 2px 4px -1px rgba(16,24,40,.05), 0 8px 20px -8px rgba(16,24,40,.10);
    --tj-shadow-lg: 0 12px 32px -10px rgba(16,24,40,.20), 0 2px 6px rgba(16,24,40,.05);

    /* ── Type scale ──
       Inter (latin) + Cairo (arabic), self-hosted in css/tj-fonts.css.
       No weight above 800 anywhere — nothing gets browser-synthesized. */
    --tj-font: "Inter", "Cairo", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tj-font-ar: "Cairo", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --tj-fs-xs:   11.5px;  /* badges, captions          */
    --tj-fs-sm:   12.5px;  /* hints, table meta         */
    --tj-fs:      13.5px;  /* UI body (controls, cells) */
    --tj-fs-md:   14.5px;  /* prose                     */
    --tj-fs-lg:   16px;    /* card titles               */
    --tj-fs-xl:   20px;    /* section titles            */
    --tj-fs-2xl:  24px;    /* page titles               */
    --tj-fs-3xl:  30px;    /* KPI values                */
    --tj-lh-heading: 1.2;
    --tj-ls-heading: -0.015em;
    --tj-fs-body: 15px;
    --tj-lh-body: 1.6;

    /* ── Spacing scale (4px base) ── */
    --tj-sp-1: 4px;  --tj-sp-2: 8px;  --tj-sp-3: 12px; --tj-sp-4: 16px;
    --tj-sp-5: 20px; --tj-sp-6: 24px; --tj-sp-8: 32px; --tj-sp-10: 40px;

    /* ── Control metrics ── */
    --tj-btn-h-sm: 32px;  --tj-btn-h: 38px;  --tj-btn-h-lg: 44px;
    --tj-input-h:  40px;
    --tj-row-h:    52px;   /* table row: 14px padding + 13.5px/1.6 text */
    --tj-modal-sm: 420px;  --tj-modal-md: 540px;  --tj-modal-lg: 720px;  --tj-modal-xl: 920px;

    /* ── Section rhythm: one spacing scale for every marketing section ── */
    --tj-sec-y:    clamp(56px, 7vw, 96px);
    --tj-sec-y-sm: clamp(36px, 4.5vw, 56px);
    --tj-sec-head: clamp(28px, 3.5vw, 44px);

    /* ── Layout ── */
    --tj-sidebar-w: 248px;
    --tj-header-h:  72px;

    /* ── Motion: fast and subtle.
          100ms = color/border/focus · 180ms = dropdowns/tabs/toasts ·
          240ms = modals/drawers · 1.4s = skeleton shimmer loop. ── */
    --tj-dur-instant: 100ms;
    --tj-dur-reveal:  180ms;
    --tj-dur-surface: 240ms;
    --tj-dur-loop:    1.4s;
    --tj-ease-out:    ease-out;
    --tj-ease-reveal: cubic-bezier(.2,.8,.2,1);
    --tj-ease-spring: cubic-bezier(.2,.8,.2,1);

    /* ── Glass tokens: neutralized (kept so old var() call sites stay valid). ── */
    --tj-glass-bg:     var(--tj-surface);
    --tj-blur:         none;
    --tj-glow-primary: 0 0 0 0 rgba(var(--tj-brand-rgb),0);
}

/* ============================================================
   Buttons
   ============================================================ */
.tj-btn{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--tj-btn-h);
    padding: 0 16px;
    border-radius: var(--tj-r);
    border: 1px solid transparent;
    font-family: var(--tj-font);
    font-weight: 600;
    font-size: var(--tj-fs);
    line-height: 1;
    cursor: pointer;
    transition: background var(--tj-dur-instant) var(--tj-ease-out),
                border-color var(--tj-dur-instant) var(--tj-ease-out),
                color var(--tj-dur-instant) var(--tj-ease-out),
                box-shadow var(--tj-dur-instant) var(--tj-ease-out);
    white-space: nowrap;
    text-decoration: none !important;
}
.tj-btn i{ font-size: 16px; line-height: 1; }
.tj-btn-primary{
    background: var(--tj-brand);
    color: var(--tj-brand-on, #fff) !important;
    box-shadow: var(--tj-shadow-xs);
}
.tj-btn-primary:hover{ background: var(--tj-brand-hover); }
.tj-btn-primary:active{ background: var(--tj-brand-deep); box-shadow: none; }
.tj-btn-navy{
    background: var(--tj-ink);
    color: var(--tj-bg) !important;
}
.tj-btn-navy:hover{ background: var(--tj-ink-2); }
.tj-btn-outline{
    background: var(--tj-surface);
    color: var(--tj-ink) !important;
    border-color: var(--tj-input-border);
    box-shadow: var(--tj-shadow-xs);
}
.tj-btn-outline:hover{ border-color: var(--tj-navy-300); background: var(--tj-surface-alt); }
.tj-btn-outline:active{ background: var(--tj-border-2); box-shadow: none; }
.tj-btn-ghost{ background: transparent; color: var(--tj-brand-deep) !important; }
.tj-btn-ghost:hover{ background: var(--tj-brand-50); }
.tj-btn-danger{ background: var(--tj-surface); color: var(--tj-danger-ink) !important; border-color: #f3c4c4; }
.tj-btn-danger:hover{ background: var(--tj-danger-50); border-color: #e9a3a3; }
.tj-btn-success{ background: var(--tj-success); color: #fff !important; border-color: transparent; }
.tj-btn-success:hover{ background: var(--tj-success-ink); }
.tj-btn.sm{ height: var(--tj-btn-h-sm); padding: 0 12px; font-size: 12.5px; border-radius: var(--tj-r-sm); }
.tj-btn.lg{ height: var(--tj-btn-h-lg); padding: 0 22px; font-size: 15px; }
.tj-btn:focus-visible{ outline: 2px solid var(--tj-brand); outline-offset: 2px; }
.tj-btn:disabled, .tj-btn.is-disabled{ opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.tj-btn.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.tj-btn.is-loading::after{
    content: ""; position: absolute; top: 50%; inset-inline-start: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.55); border-top-color: #fff; animation: tjSpin .7s linear infinite;
}
.tj-btn-outline.is-loading::after, .tj-btn-ghost.is-loading::after{ border-color: var(--tj-border); border-top-color: var(--tj-ink); }
@keyframes tjSpin{ to{ transform: rotate(360deg); } }

/* ============================================================
   Cards
   ============================================================ */
.tj-card{
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    box-shadow: var(--tj-shadow-sm);
    overflow: hidden;
}
.tj-card + .tj-card{ margin-block-start: 18px; }
.tj-card-header{
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tj-border);
    background: var(--tj-surface);
}
.tj-card-header h1, .tj-card-header h2, .tj-card-header h3, .tj-card-header h4{
    margin: 0; color: var(--tj-ink); font-weight: 700; letter-spacing: -.01em;
}
.tj-card-header h2{ font-size: 18px; }
.tj-card-header h3{ font-size: 16px; }
.tj-card-header h4{ font-size: 14.5px; }
.tj-card-body{ padding: 20px; }
.tj-card-body.compact{ padding: 14px 18px; }
.tj-spacer{ margin-inline-start: auto; }

/* ============================================================
   KPI / stat tiles
   ============================================================ */
.tj-kpi-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1200px){ .tj-kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .tj-kpi-grid{ grid-template-columns: 1fr; } }
.tj-kpi{
    position: relative;
    padding: 18px 20px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    box-shadow: var(--tj-shadow-sm);
}
.tj-kpi.primary{ color: var(--tj-brand-deep); }
.tj-kpi.navy{    color: var(--tj-navy-500); }
.tj-kpi.success{ color: var(--tj-success-ink); }
.tj-kpi.warning{ color: var(--tj-warning-ink); }
.tj-kpi.danger{  color: var(--tj-danger-ink); }
.tj-kpi.info{    color: var(--tj-info-ink); }
.tj-kpi .label{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tj-muted);
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.tj-kpi .label i{ font-size: 16px; color: currentColor; opacity: .9; }
.tj-kpi .value{
    font-size: var(--tj-fs-3xl);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tj-ink);
    line-height: 1.05;
}
.tj-kpi .meta{ margin-top: 8px; font-size: 12.5px; color: var(--tj-muted-2); }
.tj-kpi .meta .up{ color: var(--tj-success-ink); font-weight: 600; }
.tj-kpi .meta .down{ color: var(--tj-danger-ink); font-weight: 600; }

/* ============================================================
   Badges, pills, chips — soft tints, pill shape, sentence case
   ============================================================ */
.tj-badge{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: var(--tj-r-full);
    font-size: var(--tj-fs-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    white-space: nowrap;
}
.tj-badge.primary{ background: var(--tj-brand-50); color: var(--tj-brand-deep); }
.tj-badge.navy{    background: var(--tj-navy-50); color: var(--tj-navy-600); }
.tj-badge.success{ background: var(--tj-success-50); color: var(--tj-success-ink); }
.tj-badge.warning{ background: var(--tj-warning-50); color: var(--tj-warning-ink); }
.tj-badge.danger{  background: var(--tj-danger-50); color: var(--tj-danger-ink); }
.tj-badge.info{    background: var(--tj-info-50); color: var(--tj-info-ink); }
.tj-badge.muted{   background: var(--tj-navy-50); color: var(--tj-muted); }

.tj-pill{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tj-navy-50);
    color: var(--tj-navy-600);
    border: 1px solid var(--tj-navy-100);
    border-radius: var(--tj-r-full);
    padding: 6px 13px;
    font-size: 12.5px;
    font-weight: 600;
}
.tj-pill.primary{ background: var(--tj-brand-50); color: var(--tj-brand-deep); border-color: var(--tj-brand-100); }
.tj-pill.warning{ background: var(--tj-warning-50); color: var(--tj-warning-ink); border-color: #f5dcb2; }
.tj-pill.success{ background: var(--tj-success-50); color: var(--tj-success-ink); border-color: #bfe8d4; }
.tj-pill.muted{   background: var(--tj-surface-alt); color: var(--tj-muted); border-color: var(--tj-border); }

.tj-chip{
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-full);
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tj-ink-2);
    transition: border-color var(--tj-dur-instant) var(--tj-ease-out), background var(--tj-dur-instant) var(--tj-ease-out);
}
.tj-chip:hover{ border-color: var(--tj-navy-300); background: var(--tj-surface-alt); }
.tj-chip.active{ background: var(--tj-ink); border-color: var(--tj-ink); color: var(--tj-bg); }

/* ============================================================
   Forms
   ============================================================ */
.tj-form-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}
.tj-field label{
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tj-ink-2);
    margin-bottom: 6px;
}
.tj-field input,
.tj-field select,
.tj-field textarea,
.tj-input{
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border-radius: var(--tj-r);
    border: 1px solid var(--tj-input-border);
    background: var(--tj-surface);
    color: var(--tj-ink);
    font-family: var(--tj-font);
    font-size: 14px;
    box-shadow: var(--tj-shadow-xs);
    transition: border-color var(--tj-dur-instant) var(--tj-ease-out), box-shadow var(--tj-dur-instant) var(--tj-ease-out);
    outline: none;
}
.tj-field input::placeholder, .tj-field textarea::placeholder, .tj-input::placeholder{ color: var(--tj-muted-2); }
.tj-field textarea{ height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; line-height: 1.6; }
.tj-field input:focus, .tj-field select:focus, .tj-field textarea:focus, .tj-input:focus{
    border-color: var(--tj-brand);
    box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.18);
}
.tj-field input:disabled, .tj-field select:disabled, .tj-field textarea:disabled, .tj-input:disabled{
    background: var(--tj-surface-alt); color: var(--tj-muted-2); cursor: not-allowed; box-shadow: none;
}
.tj-field.has-error input, .tj-field.has-error select, .tj-field.has-error textarea{
    border-color: var(--tj-danger);
    box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.tj-field.has-success input{ border-color: var(--tj-success); }
.tj-field .hint{ margin-top: 6px; font-size: 12px; color: var(--tj-muted-2); }
.tj-field .err{  margin-top: 6px; font-size: 12px; color: var(--tj-danger-ink); font-weight: 600; }

/* ============================================================
   Tables
   ============================================================ */
.tj-table-wrap{
    border: 1px solid var(--tj-border);
    border-radius: var(--tj-r-lg);
    overflow: hidden;
    overflow-x: auto;
    background: var(--tj-surface);
    box-shadow: var(--tj-shadow-sm);
}
.tj-table{ width: 100%; border-collapse: separate; border-spacing: 0; }
.tj-table thead th{
    text-align: start;
    padding: 12px 16px;
    background: var(--tj-surface-alt);
    color: var(--tj-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--tj-border);
    white-space: nowrap;
}
.tj-table tbody td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--tj-border-2);
    color: var(--tj-ink);
    font-size: var(--tj-fs);
    vertical-align: middle;
}
.tj-table tbody tr:last-child td{ border-bottom: 0; }
.tj-table tbody tr{ transition: background var(--tj-dur-instant) var(--tj-ease-out); }
.tj-table tbody tr:hover{ background: var(--tj-surface-alt); }
.tj-table tbody tr.is-selected{ background: var(--tj-brand-50); }
.tj-table tbody tr.is-selected td:first-child{ border-inline-start: 2px solid var(--tj-brand); padding-inline-start: 14px; }

/* ============================================================
   Alerts
   ============================================================ */
.tj-alert{
    border-radius: var(--tj-r);
    padding: 12px 16px;
    font-size: var(--tj-fs);
    font-weight: 500;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid transparent;
}
.tj-alert i{ font-size: 20px; }
.tj-alert-success{ background: var(--tj-success-50); color: var(--tj-success-ink); border-color: #bfe8d4; }
.tj-alert-danger{  background: var(--tj-danger-50); color: var(--tj-danger-ink); border-color: #f3c6c6; }
.tj-alert-info{    background: var(--tj-info-50); color: var(--tj-info-ink); border-color: #b9dcf1; }
.tj-alert-warning{ background: var(--tj-warning-50); color: var(--tj-warning-ink); border-color: #f5dcb2; }

/* ============================================================
   Toolbar & search
   ============================================================ */
.tj-toolbar{
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.tj-toolbar-form{
    display: flex; align-items: center; gap: 10px; flex: 1; flex-wrap: wrap;
}
.tj-search-box{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--tj-surface);
    border: 1px solid var(--tj-input-border);
    border-radius: var(--tj-r);
    padding: 0 14px;
    height: var(--tj-input-h);
    min-width: 260px;
    box-shadow: var(--tj-shadow-xs);
    transition: border-color var(--tj-dur-instant) var(--tj-ease-out), box-shadow var(--tj-dur-instant) var(--tj-ease-out);
}
.tj-search-box:focus-within{ border-color: var(--tj-brand); box-shadow: 0 0 0 3px rgba(var(--tj-brand-rgb),.18); }
.tj-search-box i{ color: var(--tj-muted-2); }
.tj-search-box input{
    border: 0; outline: 0; background: transparent;
    width: 100%; font-size: 14px; color: var(--tj-ink);
    font-family: var(--tj-font);
}

/* ============================================================
   Avatar & empty state
   ============================================================ */
.tj-avatar{
    width: 40px; height: 40px; border-radius: var(--tj-r-full);
    background: var(--tj-brand-100);
    color: var(--tj-brand-deep); font-weight: 700;
    display: grid; place-items: center;
    font-size: 13px;
}
.tj-empty{
    padding: 44px 26px;
    text-align: center;
    color: var(--tj-muted);
    font-size: 14px;
    border: 1px dashed var(--tj-navy-200);
    border-radius: var(--tj-r-lg);
    background: var(--tj-surface-alt);
}
.tj-empty i{ font-size: 28px; color: var(--tj-muted-2); display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--tj-surface); border: 1px solid var(--tj-border); }

/* ============================================================
   App shell (sidebar layouts)
   ============================================================ */
.tj-app{
    display: grid;
    grid-template-columns: var(--tj-sidebar-w) 1fr;
    min-height: 100vh;
}
.tj-sidebar{
    background: var(--tj-surface);
    border-inline-end: 1px solid var(--tj-border);
    color: var(--tj-muted);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 16px 12px;
}
.tj-sidebar::-webkit-scrollbar{ width: 8px; }
.tj-sidebar::-webkit-scrollbar-thumb{ background: var(--tj-border); border-radius: 8px; }
.tj-brand{
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px 16px;
    border-bottom: 1px solid var(--tj-border);
    margin-bottom: 12px;
}
.tj-brand-logo{
    width: 32px; height: 32px; border-radius: var(--tj-r);
    background: var(--tj-brand);
    display: grid; place-items: center;
    color: #fff; font-size: 13px; font-weight: 800;
}
.tj-brand-text{ line-height: 1.2; }
.tj-brand-text strong{ color: var(--tj-ink); font-size: 14px; font-weight: 700; display: block; }
.tj-brand-text span{ color: var(--tj-muted-2); font-size: 11px; font-weight: 500; }

.tj-sec-label{
    color: var(--tj-muted-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 14px 12px 6px;
}
.tj-nav{ display: flex; flex-direction: column; gap: 2px; }
.tj-nav a{
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: var(--tj-r);
    color: var(--tj-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--tj-dur-instant) var(--tj-ease-out), background var(--tj-dur-instant) var(--tj-ease-out);
}
.tj-nav a i{ font-size: 17px; opacity: .9; }
.tj-nav a:hover{ background: var(--tj-navy-50); color: var(--tj-ink); }
.tj-nav a.active{
    background: var(--tj-brand-50);
    color: var(--tj-brand-deep);
    font-weight: 600;
}
.tj-nav a .tj-badge{ margin-inline-start: auto; background: var(--tj-navy-50); color: var(--tj-muted); font-size: 11px; padding: 2px 7px; }

.tj-main{ display: flex; flex-direction: column; min-width: 0; }
.tj-topbar{
    background: var(--tj-surface);
    border-bottom: 1px solid var(--tj-border);
    padding: 12px 24px;
    min-height: 64px;
    display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 20;
}
.tj-topbar h1{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--tj-ink);
    letter-spacing: -.01em;
}
.tj-topbar p{ margin: 0; color: var(--tj-muted-2); font-size: 12.5px; }
.tj-topbar-right{ margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.tj-content{ padding: 24px 24px 56px; }

/* ============================================================
   Misc helpers
   ============================================================ */
.tj-chart-wrap{ position: relative; height: 260px; }
.tj-map{ height: 560px; border-radius: var(--tj-r-lg); border: 1px solid var(--tj-border); overflow: hidden; }
.tj-divider{ border: 0; border-top: 1px solid var(--tj-border); margin: 18px 0; }
.tj-muted-text{ color: var(--tj-muted); }
.tj-grid-2{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tj-grid-3{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px){
    .tj-app{ grid-template-columns: 1fr; }
    .tj-sidebar{
        position: fixed; inset-inline-start: -100%;
        width: var(--tj-sidebar-w); z-index: 40;
        box-shadow: var(--tj-shadow-lg);
        transition: inset-inline-start var(--tj-dur-surface) var(--tj-ease-reveal);
    }
    .tj-sidebar.open{ inset-inline-start: 0; }
}
@media (max-width: 640px){
    .tj-content{ padding: 16px; }
    .tj-topbar{ padding: 10px 16px; }
    .tj-kpi .value{ font-size: 24px; }
    .tj-btn.lg{ height: var(--tj-btn-h); font-size: 14px; }
}

/* ── Arabic (Cairo): no tracking, no caps transform, taller leading ── */
[dir="rtl"] .tj-badge, [dir="rtl"] .tj-kpi .label, [dir="rtl"] .tj-sec-label,
[dir="rtl"] .tj-table thead th, [dir="rtl"] .tj-brand-text span, [dir="rtl"] .tj-field label{
    letter-spacing: 0; text-transform: none; font-weight: 600;
}
[dir="rtl"] .tj-card-header h1, [dir="rtl"] .tj-card-header h2, [dir="rtl"] .tj-card-header h3,
[dir="rtl"] .tj-card-header h4, [dir="rtl"] .tj-topbar h1{ letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] .tj-kpi .value{ letter-spacing: 0; }

/* ── Global smoothness ── */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
    .tj-btn, .tj-chip, .tj-nav a, .tj-sidebar, .tj-table tbody tr, .tj-field input, .tj-field select, .tj-field textarea{ transition: none !important; }
    .tj-btn.is-loading::after{ animation-duration: 1.4s; }
}