/* ============================================================
   Digital Commerce Integration — Component kit (tjk-*) · SaaS v2
   ------------------------------------------------------------
   Reusable dashboard components shared by the admin console,
   the B2B portal, the fleet portal and the storefront account
   pages: stat cards with sparklines, cards, tables + toolbars,
   buttons, badges, forms, toggles, modals, dropdowns, pagination,
   empty states, tabs, sidebar + topbar and chart chrome.
   Light-first: white surfaces, hairline borders, soft shadows,
   8/12/16px radii, pill badges, one brand fill per view.
   Consumes the --adm-* tokens only (tj-admin-tokens.css for the
   dark theme, tj-kit-web.css / tj-theme.css for light), so it
   has no literal colours and follows the admin-chosen brand.
   Coexists with Bootstrap 3 / Neon by never reusing their
   class names. Direction handled with CSS logical properties.
   Blade partials: resources/views/admin/partials/kit/*.
   Behaviors: js/tj-kit.js · charts: js/tj-kit-charts.js.
   ============================================================ */

/* ════════════════ TONES ════════════════
   One tone class on a component recolors its icon tile, pill,
   sparkline and progress. Components default to the brand. */
.tjk-tone-indigo { --tjk-tone: var(--adm-accent-500); --tjk-tone-soft: var(--adm-accent-50);  --tjk-tone-ink: var(--adm-accent-300); }
.tjk-tone-violet { --tjk-tone: var(--adm-violet);     --tjk-tone-soft: var(--adm-accent-50);  --tjk-tone-ink: var(--adm-accent-300); }
.tjk-tone-cyan   { --tjk-tone: var(--adm-cyan);       --tjk-tone-soft: var(--adm-info-50);    --tjk-tone-ink: var(--adm-info-ink); }
.tjk-tone-emerald{ --tjk-tone: var(--adm-success);    --tjk-tone-soft: var(--adm-success-50); --tjk-tone-ink: var(--adm-success-ink); }
.tjk-tone-amber  { --tjk-tone: var(--adm-warning);    --tjk-tone-soft: var(--adm-warning-50); --tjk-tone-ink: var(--adm-warning-ink); }
.tjk-tone-rose   { --tjk-tone: var(--adm-danger);     --tjk-tone-soft: var(--adm-danger-50);  --tjk-tone-ink: var(--adm-danger-ink); }
.tjk-tone-sky    { --tjk-tone: var(--adm-info);       --tjk-tone-soft: var(--adm-info-50);    --tjk-tone-ink: var(--adm-info-ink); }
.tjk-tone-slate  { --tjk-tone: var(--adm-muted-2);    --tjk-tone-soft: var(--adm-tone-soft);  --tjk-tone-ink: var(--adm-tone-ink); }

/* ════════════════ UTILITIES ════════════════ */
.tjk-sr-only{
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tjk-muted{ color: var(--adm-muted); }

/* ════════════════ LAYOUT GRIDS ════════════════ */
.tjk-stack{ display: grid; gap: 20px; margin: 0 0 20px; }
.tjk-grid-stats{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 22px;
}
@media (max-width: 1200px){ .tjk-grid-stats:not(.is-compact){ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .tjk-grid-stats:not(.is-compact){ grid-template-columns: 1fr; } }
.tjk-grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 20px;
}
@media (max-width: 991px){ .tjk-grid-2{ grid-template-columns: 1fr; } }

/* ════════════════ ICON TILES (shared) ════════════════ */
.tjk-stat-tile,
.tjk-card-tile{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--adm-r);
    background: var(--tjk-tone-soft, var(--adm-accent-50));
    color: var(--tjk-tone-ink, var(--adm-accent-300));
    font-size: 19px;
}

/* ════════════════ CARD ════════════════ */
.tjk-card{
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-lg);
    box-shadow: var(--adm-shadow-sm);
    overflow: hidden;
}
.tjk-card-head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--adm-border);
}
.tjk-card-head-txt{ flex: 1 1 auto; min-width: 0; }
.tjk-card-title{
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--adm-ink);
    line-height: 1.35;
    letter-spacing: -.01em;
}
.tjk-card-sub{
    margin: 2px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--adm-muted-2);
}
.tjk-card-actions{ display: flex; align-items: center; gap: 8px; }
.tjk-card-body{ padding: 20px; }
.tjk-card-body--flush{ padding: 0; }
.tjk-card-foot{
    padding: 12px 20px;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-surface-2);
}

/* ════════════════ STAT CARD ════════════════ */
.tjk-stat{
    --tjk-tone: var(--adm-accent-500);
    --tjk-tone-soft: var(--adm-accent-50);
    --tjk-tone-ink: var(--adm-accent-300);
    display: block;
    position: relative;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-lg);
    box-shadow: var(--adm-shadow-sm);
    padding: 20px;
    color: var(--adm-ink);
    text-decoration: none;
    transition: box-shadow 140ms ease-out, border-color 140ms ease-out;
}
.tjk-stat:hover{
    box-shadow: var(--adm-shadow);
    color: var(--adm-ink);
    text-decoration: none;
}
a.tjk-stat:focus{ color: var(--adm-ink); text-decoration: none; }
.tjk-stat-top{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.tjk-stat-label{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-muted);
    padding-top: 2px;
}
.tjk-stat-value{
    margin-top: 10px;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--adm-ink);
    font-variant-numeric: tabular-nums;
}
.tjk-stat-meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
}
.tjk-stat-trend{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--adm-tone-soft);
    color: var(--adm-tone-ink);
}
.tjk-stat-trend.is-up{   background: var(--adm-success-50); color: var(--adm-success-ink); }
.tjk-stat-trend.is-down{ background: var(--adm-danger-50);  color: var(--adm-danger-ink); }
.tjk-stat-trend-label{
    font-size: 11.5px;
    color: var(--adm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tjk-stat-hint{
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--adm-muted-2);
}
.tjk-stat-spark{ margin-top: 16px; }
/* BS3 sets svg:not(:root){overflow:hidden} — sparkline strokes need room */
.tjk-stat-spark svg,
.tjk-spark svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible !important;
}
.tjk-spark{ width: 100%; }

/* ── Compact KPI row ── */
.tjk-grid-stats.is-compact{
    grid-template-columns: repeat(auto-fit, minmax(190px, 240px));
    justify-content: start;
    gap: 12px;
    margin-bottom: 18px;
}
.tjk-stat.is-compact{ padding: 14px 16px; }
.tjk-stat.is-compact:hover{ box-shadow: var(--adm-shadow-sm); }
.tjk-stat.is-compact .tjk-stat-label{ font-size: 12px; }
.tjk-stat.is-compact .tjk-stat-value{ margin-top: 4px; font-size: 26px; line-height: 1.15; }
.tjk-stat.is-compact .tjk-stat-tile{ width: 30px; height: 30px; border-radius: var(--adm-r-sm); }
.tjk-stat.is-compact .tjk-stat-tile i{ font-size: 16px; }
@media (max-width: 520px){
    .tjk-grid-stats.is-compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ════════════════ PAGE HEADER ════════════════ */
.tjk-page-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 0 24px;
}
.tjk-page-head-txt{ min-width: 0; }
.tjk-crumbs{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 500;
}
.tjk-crumb{ color: var(--adm-muted); text-decoration: none; transition: color .15s ease; }
a.tjk-crumb:hover{ color: var(--adm-accent-300); text-decoration: none; }
.tjk-crumb.is-current{ color: var(--adm-muted-2); }
.tjk-crumb-sep{ color: var(--adm-muted-2); font-size: 14px; line-height: 1; }
.tjk-page-title{
    margin: 0;
    font-family: var(--adm-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--adm-ink);
}
.tjk-page-desc{
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--adm-muted);
    max-width: 62ch;
}
.tjk-page-head-actions{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ════════════════ FILTER BAR ════════════════ */
.tjk-filters{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-lg);
    background: var(--adm-surface);
    box-shadow: var(--adm-shadow-sm);
}
.tjk-filters .tjk-search{ flex: 1 1 260px; min-width: 200px; }
.tjk-filters .tjk-input,
.tjk-filters .tjk-select{ height: 38px; margin: 0; }
.tjk-filters-end{ display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (max-width: 640px){
    .tjk-filters{ align-items: stretch; }
    .tjk-filters .tjk-search{ flex: 1 1 100%; }
    .tjk-filters .tjk-select{ flex: 1 1 100%; }
    .tjk-filters-end{ margin-inline-start: 0; }
    .tjk-filters-end .tjk-btn{ flex: 1 1 auto; }
}

/* ════════════════ IDENTITY CELL ════════════════ */
.tjk-identity{ display: flex; align-items: center; gap: 11px; min-width: 0; }
.tjk-identity-txt{ min-width: 0; }
.tjk-identity-name{
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--adm-ink) !important;
    line-height: 1.4;
    text-decoration: none;
}
a.tjk-identity-name:hover{ color: var(--adm-accent-300) !important; text-decoration: none; }
.tjk-identity-meta{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 3px;
}
.tjk-identity-meta-item{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500 !important;
    color: var(--adm-muted) !important;
    text-decoration: none;
    line-height: 1.5;
}
a.tjk-identity-meta-item:hover{ color: var(--adm-ink-2) !important; text-decoration: none; }
.tjk-identity-meta-item i{ font-size: 13px; color: var(--adm-muted-2); }

/* ════════════════ TABLE ════════════════ */
.tjk-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tjk-table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    color: var(--adm-ink-2);
}
.tjk-table thead th{
    padding: 12px 20px;
    background: var(--adm-surface-2);
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-align: start;
    white-space: nowrap;
    border-bottom: 1px solid var(--adm-border);
}
.tjk-table tbody td{
    padding: 14px 20px;
    text-align: start;
    border-top: 1px solid var(--adm-border-2);
    vertical-align: middle;
    line-height: 1.5;
}
.tjk-table tbody tr:first-child td{ border-top: 0; }
.tjk-table tbody tr{ transition: background-color 100ms ease-out; }
.tjk-table tbody tr:hover{ background: var(--adm-surface-2); }
.tjk-table a{ color: var(--adm-accent-300); font-weight: 600; text-decoration: none; }
.tjk-table a:hover{ color: var(--adm-accent-400); text-decoration: underline; }
.tjk-table .is-num{ font-variant-numeric: tabular-nums; }
.tjk-table th.is-end, .tjk-table td.is-end{ text-align: end; }
.tjk-table th.is-center, .tjk-table td.is-center{ text-align: center; }
tr[data-tjk-empty]{ background: transparent !important; }
tr[data-tjk-empty] td{ padding: 0; }

/* Narrow screens: the table scrolls sideways, but row actions stay reachable. */
@media (max-width: 780px){
    .tjk-table.has-sticky-actions thead th:last-child,
    .tjk-table.has-sticky-actions tbody td:last-child{
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        background: var(--adm-surface);
        box-shadow: inset 1px 0 0 var(--adm-border), -6px 0 12px -6px rgba(16,24,40,.12);
    }
    [dir="rtl"] .tjk-table.has-sticky-actions thead th:last-child,
    [dir="rtl"] .tjk-table.has-sticky-actions tbody td:last-child{
        box-shadow: inset -1px 0 0 var(--adm-border), 6px 0 12px -6px rgba(16,24,40,.12);
    }
    .tjk-table.has-sticky-actions tbody tr:hover td:last-child{ background: var(--adm-surface-2); }
}

/* ── Responsive stacking (phones) ──
   tj-kit.js labels every cell with its column header (data-label) and adds
   .tjk-stacked to tables that qualify (thead present, no colspan, ≤ 10 cols).
   Below 640px each row becomes a small card: label on the start side, value on
   the end side. Pure presentation — DOM order, links and forms are untouched. */
@media (max-width: 640px){
    table.tjk-stacked{ display: block; width: 100%; border: 0 !important; background: transparent !important; }
    table.tjk-stacked > thead{ display: none !important; }
    table.tjk-stacked > tbody{ display: block; width: 100%; }
    table.tjk-stacked > tbody > tr{
        display: block;
        width: 100%;
        margin: 0 0 10px;
        padding: 6px 0;
        background: var(--adm-surface) !important;
        border: 1px solid var(--adm-border) !important;
        border-radius: var(--adm-r-lg);
        box-shadow: var(--adm-shadow-xs);
    }
    table.tjk-stacked > tbody > tr:hover{ background: var(--adm-surface) !important; }
    table.tjk-stacked > tbody > tr > td{
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 8px 14px !important;
        border: 0 !important;
        text-align: end !important;
        white-space: normal !important;
        background: transparent !important;
    }
    table.tjk-stacked > tbody > tr > td[data-label]::before{
        content: attr(data-label);
        flex: 0 0 42%;
        max-width: 42%;
        font-size: 12px;
        font-weight: 600;
        color: var(--adm-muted);
        text-align: start;
    }
    table.tjk-stacked > tbody > tr > td:empty{ display: none !important; }
    table.tjk-stacked > tbody > tr[data-tjk-empty]{ border: 0 !important; background: transparent !important; box-shadow: none; }
    table.tjk-stacked > tbody > tr[data-tjk-empty] > td{ display: block !important; text-align: center !important; }
    table.tjk-stacked > tbody > tr[data-tjk-empty] > td::before{ content: none; }
    table.tjk-stacked > tbody > tr > td.tjk-stack-actions,
    table.tjk-stacked > tbody > tr > td:last-child:has(.tjk-actions){ justify-content: flex-end; }
}

/* ════════════════ TOOLBAR + SEARCH ════════════════ */
.tjk-toolbar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--adm-border);
    background: var(--adm-surface);
}
.tjk-toolbar-end{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}
.tjk-search{ position: relative; min-width: 220px; }
.tjk-search > i{
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--adm-muted-2);
    font-size: 16px;
    pointer-events: none;
}
.tjk-search .tjk-input{
    padding-inline-start: 36px;
    padding-inline-end: 30px;
}
.tjk-search-clear{
    position: absolute;
    inset-inline-end: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--adm-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.tjk-search-clear:hover{ background: var(--adm-tone-soft); color: var(--adm-ink); }
.tjk-search.has-value .tjk-search-clear{ display: inline-flex; align-items: center; justify-content: center; }

/* ════════════════ BUTTONS ════════════════
   One system, eight intents, three sizes.
   Intent  → primary | secondary | ghost | quiet | soft | success | warning | danger | link
   Size    → .tjk-btn-sm (32px) · default (38px) · .tjk-btn-lg (44px)
   Shape   → add .tjk-btn-icon for a square icon-only control
   State   → :hover :active :focus-visible [disabled] .is-loading
   ════════════════════════════════════════ */
.tjk-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--adm-r);
    font-family: var(--adm-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    transition: background-color 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out, box-shadow 100ms ease-out;
}
.tjk-btn:hover, .tjk-btn:focus{ text-decoration: none; outline: none; }
.tjk-btn:focus-visible{ box-shadow: var(--adm-focus-ring); }
.tjk-btn:active{ transform: translateY(0); }
.tjk-btn i{ font-size: 16px; line-height: 1; flex: 0 0 auto; }

/* ── Intents ── */
.tjk-btn-primary{
    background: var(--adm-accent-500);
    border-color: var(--adm-accent-500);
    color: var(--tj-brand-on, #fff);
    box-shadow: var(--adm-shadow-xs);
}
.tjk-btn-primary:hover{ background: var(--adm-accent-600); border-color: var(--adm-accent-600); color: var(--tj-brand-on, #fff); }
.tjk-btn-primary:active{ background: var(--adm-accent-700); border-color: var(--adm-accent-700); box-shadow: none; }

.tjk-btn-secondary{
    background: var(--adm-surface);
    border-color: var(--adm-input-border);
    color: var(--adm-ink);
    box-shadow: var(--adm-shadow-xs);
}
.tjk-btn-secondary:hover{ background: var(--adm-surface-2); border-color: var(--adm-hover-border); color: var(--adm-ink); }

.tjk-btn-ghost{
    background: var(--adm-surface);
    border-color: var(--adm-border);
    color: var(--adm-ink-2);
    box-shadow: var(--adm-shadow-xs);
}
.tjk-btn-ghost:hover{ background: var(--adm-surface-2); border-color: var(--adm-input-border); color: var(--adm-ink); }

/* lowest weight — no border, no fill until hover */
.tjk-btn-quiet{
    background: transparent;
    border-color: transparent;
    color: var(--adm-muted);
}
.tjk-btn-quiet:hover{ background: var(--adm-tone-soft); color: var(--adm-ink); }

.tjk-btn-soft{
    background: var(--adm-accent-50);
    border-color: transparent;
    color: var(--adm-accent-300);
}
.tjk-btn-soft:hover{ background: var(--adm-accent-100); color: var(--adm-accent-300); }

.tjk-btn-success{
    background: var(--adm-success);
    border-color: var(--adm-success);
    color: #fff;
}
.tjk-btn-success:hover{ background: var(--adm-success-ink); border-color: var(--adm-success-ink); color: #fff; }
.tjk-btn-success-soft{
    background: var(--adm-success-50);
    border-color: transparent;
    color: var(--adm-success-ink);
}
.tjk-btn-success-soft:hover{ background: var(--adm-success); color: #fff; }

.tjk-btn-warning{
    background: var(--adm-warning);
    border-color: var(--adm-warning);
    color: #fff;
}
.tjk-btn-warning:hover{ background: var(--adm-warning-ink); border-color: var(--adm-warning-ink); color: #fff; }
.tjk-btn-warning-soft{
    background: var(--adm-warning-50);
    border-color: transparent;
    color: var(--adm-warning-ink);
}
.tjk-btn-warning-soft:hover{ background: var(--adm-warning); color: #fff; }

/* destructive */
.tjk-btn-danger{
    background: var(--adm-danger);
    border-color: var(--adm-danger);
    color: #fff;
}
.tjk-btn-danger:hover{ background: var(--adm-danger-ink); border-color: var(--adm-danger-ink); color: #fff; }
.tjk-btn-danger-soft{
    background: var(--adm-danger-50);
    border-color: transparent;
    color: var(--adm-danger-ink);
}
.tjk-btn-danger-soft:hover{ background: var(--adm-danger); color: #fff; }
.tjk-btn-danger:focus-visible,
.tjk-btn-danger-soft:focus-visible{ box-shadow: 0 0 0 3px rgba(220,38,38,.28); }

.tjk-btn-link{
    background: transparent;
    border-color: transparent;
    color: var(--adm-accent-300);
    padding: 0 4px;
    height: auto;
    box-shadow: none;
}
.tjk-btn-link:hover{ color: var(--adm-accent-400); text-decoration: underline; }

/* ── Sizes ── */
.tjk-btn-sm{ height: 32px; padding: 0 11px; font-size: 12.5px; border-radius: var(--adm-r-sm); gap: 6px; }
.tjk-btn-sm i{ font-size: 15px; }
.tjk-btn-lg{ height: 44px; padding: 0 20px; font-size: 14.5px; border-radius: var(--adm-r); gap: 9px; }
.tjk-btn-lg i{ font-size: 18px; }
.tjk-btn-block{ display: flex; width: 100%; }

/* ── Icon-only ── */
.tjk-btn-icon{ width: 38px; padding: 0; }
.tjk-btn-icon.tjk-btn-sm{ width: 32px; height: 32px; }
.tjk-btn-icon.tjk-btn-lg{ width: 44px; }

/* ── States ── */
.tjk-btn[disabled], .tjk-btn.is-disabled{
    opacity: .5;
    pointer-events: none;
    box-shadow: none;
}
.tjk-btn.is-loading{ position: relative; color: transparent !important; pointer-events: none; }
.tjk-btn.is-loading > *{ visibility: hidden; }
.tjk-btn.is-loading::after{
    content: "";
    position: absolute;
    top: 50%; inset-inline-start: 50%;
    width: 15px; height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    color: #fff;
    animation: tjkSpin .7s linear infinite;
}
.tjk-btn-secondary.is-loading::after,
.tjk-btn-ghost.is-loading::after,
.tjk-btn-quiet.is-loading::after,
.tjk-btn-soft.is-loading::after{ color: var(--adm-ink-2); }
@keyframes tjkSpin{ to{ transform: rotate(360deg); } }

/* Intent-on-hover — a neutral control that reveals its semantic colour only when reached. */
.tjk-btn-quiet.is-success:hover{ background: var(--adm-success-50); color: var(--adm-success-ink); }
.tjk-btn-quiet.is-warning:hover{ background: var(--adm-warning-50); color: var(--adm-warning-ink); }
.tjk-btn-quiet.is-danger:hover{  background: var(--adm-danger-50);  color: var(--adm-danger-ink); }
.tjk-btn-quiet.is-danger:focus-visible{ box-shadow: 0 0 0 3px rgba(220,38,38,.28); }

/* ── Action group — the one row-actions pattern ── */
.tjk-actions{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.tjk-actions-sep{
    width: 1px;
    align-self: stretch;
    margin: 4px 3px;
    background: var(--adm-border);
}

/* ── Tooltip — attach data-tip to any control ── */
[data-tip]{ position: relative; }
[data-tip]::after{
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    inset-inline-start: 50%;
    transform: translateX(var(--tjk-tip-shift, -50%)) translateY(3px);
    z-index: 1200;
    padding: 5px 9px;
    border-radius: var(--adm-r-sm);
    background: var(--adm-ink);
    color: var(--adm-bg);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms ease-out, transform 100ms ease-out;
    box-shadow: var(--adm-shadow);
}
[dir="rtl"] [data-tip]::after,
.page-mode-rtl [data-tip]::after{ --tjk-tip-shift: 50%; }
[data-tip]:hover::after,
[data-tip]:focus-visible::after{ opacity: 1; transform: translateX(var(--tjk-tip-shift, -50%)) translateY(0); }

/* ════════════════ BADGES ════════════════ */
.tjk-badge{
    --tjk-tone: var(--adm-muted-2);
    --tjk-tone-soft: var(--adm-tone-soft);
    --tjk-tone-ink: var(--adm-tone-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--tjk-tone-soft);
    color: var(--tjk-tone-ink);
    border: 0;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    white-space: nowrap;
}
.tjk-badge-md{ font-size: 12.5px; padding: 4px 11px; }
.tjk-badge-dot{
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tjk-tone);
    flex: 0 0 auto;
}

/* ════════════════ FORMS ════════════════ */
.tjk-field{ display: block; margin-bottom: 16px; }
.tjk-field-label{
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600; /* resets BS3 label{font-weight:bold} */
    color: var(--adm-ink-2);
}
.tjk-req{ color: var(--adm-danger-ink); margin-inline-start: 2px; }
.tjk-field-hint{
    margin-top: 6px;
    font-size: 12px;
    color: var(--adm-muted-2);
}
.tjk-field-error{
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--adm-danger-ink);
}
.tjk-input,
.tjk-select,
.tjk-textarea{
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: var(--adm-input-bg);
    border: 1px solid var(--adm-input-border);
    border-radius: var(--adm-r);
    color: var(--adm-ink);
    font-family: var(--adm-font);
    font-size: 13.5px;
    box-shadow: var(--adm-shadow-xs);
    transition: border-color 100ms ease-out, box-shadow 100ms ease-out;
}
.tjk-input::placeholder,
.tjk-textarea::placeholder{ color: var(--adm-muted-2); }
.tjk-input:hover, .tjk-select:hover, .tjk-textarea:hover{ border-color: var(--adm-hover-border); }
.tjk-input:focus,
.tjk-select:focus,
.tjk-textarea:focus{
    outline: none;
    border-color: var(--adm-accent-500);
    box-shadow: var(--adm-focus-ring);
}
.tjk-input:disabled, .tjk-select:disabled, .tjk-textarea:disabled,
.tjk-input[readonly]{ background: var(--adm-surface-2); color: var(--adm-muted); cursor: not-allowed; box-shadow: none; }
.tjk-input.is-invalid,
.tjk-select.is-invalid,
.tjk-textarea.is-invalid{ border-color: var(--adm-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.tjk-textarea{ height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.7; resize: vertical; }
.tjk-select{
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}
[dir="rtl"] .tjk-select,
.page-mode-rtl .tjk-select{ background-position: left 12px center; }
.tjk-select option{ color: var(--adm-ink); background: var(--adm-surface); }
.tjk-input-group{ display: flex; align-items: stretch; }
.tjk-input-group .tjk-input{ flex: 1 1 auto; min-width: 0; }
.tjk-input-group .tjk-input:not(:first-child){ border-start-start-radius: 0; border-end-start-radius: 0; }
.tjk-input-group .tjk-input:not(:last-child){ border-start-end-radius: 0; border-end-end-radius: 0; }
.tjk-input-affix{
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--adm-surface-2);
    border: 1px solid var(--adm-input-border);
    color: var(--adm-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
.tjk-input-affix:first-child{ border-inline-end: 0; border-start-start-radius: var(--adm-r); border-end-start-radius: var(--adm-r); }
.tjk-input-affix:last-child{ border-inline-start: 0; border-start-end-radius: var(--adm-r); border-end-end-radius: var(--adm-r); }

/* ════════════════ TOGGLE (pure CSS switch) ════════════════ */
.tjk-toggle{
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.tjk-toggle input{
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.tjk-toggle-track{
    position: relative;
    flex: 0 0 auto;
    width: 40px; height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--adm-input-border);
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
.tjk-toggle-thumb{
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transition: inset-inline-start .2s ease;
}
.tjk-toggle input:checked ~ .tjk-toggle-track{
    background: var(--adm-accent-500);
    border-color: var(--adm-accent-500);
}
.tjk-toggle input:checked ~ .tjk-toggle-track .tjk-toggle-thumb{ inset-inline-start: 20px; }
.tjk-toggle input:focus-visible ~ .tjk-toggle-track{ box-shadow: var(--adm-focus-ring); }
.tjk-toggle input[disabled] ~ .tjk-toggle-track{ opacity: .5; }
.tjk-toggle input[disabled] ~ .tjk-toggle-txt{ opacity: .5; }
.tjk-toggle-txt{ min-width: 0; }
.tjk-toggle-label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-ink-2);
    line-height: 1.5;
}
.tjk-toggle-desc{
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--adm-muted-2);
}

/* ════════════════ MODAL ════════════════ */
body.tjk-modal-lock{ overflow: hidden; }
.tjk-modal{
    position: fixed;
    inset: 0;
    z-index: 1700; /* above Neon .message-box */
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17,24,39,.55);
}
.tjk-modal.is-open{ display: flex; animation: tjkFade 180ms cubic-bezier(.2,.8,.2,1); }
.tjk-modal-panel{
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-xl);
    box-shadow: var(--adm-shadow-lg);
    animation: tjkPop 240ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.tjk-modal-panel.tjk-modal-sm{ max-width: 420px; }
.tjk-modal-panel.tjk-modal-lg{ max-width: 720px; }
.tjk-modal-panel.tjk-modal-xl{ max-width: 920px; }
@keyframes tjkFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes tjkPop{ from{ opacity: 0; transform: translateY(8px) scale(.98); } to{ opacity: 1; transform: none; } }
.tjk-modal-head{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px 16px;
    border-bottom: 1px solid var(--adm-border);
}
.tjk-modal-title{
    flex: 1 1 auto;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--adm-ink);
    line-height: 1.35;
}
.tjk-modal-x{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border: 0;
    border-radius: var(--adm-r);
    background: transparent;
    color: var(--adm-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    margin: -4px -6px 0 0;
    transition: background 100ms ease-out, color 100ms ease-out;
}
[dir="rtl"] .tjk-modal-x{ margin: -4px 0 0 -6px; }
.tjk-modal-x:hover{ background: var(--adm-tone-soft); color: var(--adm-ink); }
.tjk-modal-body{
    padding: 20px 22px;
    overflow-y: auto;
    color: var(--adm-ink-2);
    font-size: 13.5px;
    line-height: 1.7;
}
.tjk-modal-body p{ margin: 0 0 10px; }
.tjk-modal-body p:last-child{ margin-bottom: 0; }
.tjk-modal-foot{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--adm-border);
    background: var(--adm-surface-2);
}
@media (max-width: 520px){
    .tjk-modal{ padding: 12px; align-items: flex-end; }
    .tjk-modal-panel{ max-height: calc(100vh - 24px); }
    .tjk-modal-foot{ flex-direction: column-reverse; }
    .tjk-modal-foot .tjk-btn{ width: 100%; }
}

/* ════════════════ DROPDOWN ════════════════ */
.tjk-dropdown{ position: relative; }
.tjk-menu{
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 1100;
    min-width: 208px;
    display: none;
    padding: 6px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-lg);
    box-shadow: var(--adm-shadow-lg);
}
.tjk-dropdown.is-open .tjk-menu{ display: block; animation: tjkPop 180ms cubic-bezier(.2,.8,.2,1); }
.tjk-menu-item{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: var(--adm-r);
    background: transparent;
    color: var(--adm-ink-2);
    font-size: 13px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms ease-out, color 100ms ease-out;
}
.tjk-menu-item i{ font-size: 16px; color: var(--adm-muted); }
.tjk-menu-item:hover{ background: var(--adm-surface-2); color: var(--adm-ink); text-decoration: none; }
.tjk-menu-item.is-danger{ color: var(--adm-danger-ink); }
.tjk-menu-item.is-danger i{ color: var(--adm-danger-ink); }
.tjk-menu-item.is-danger:hover{ background: var(--adm-danger-50); }
.tjk-menu-sep{ height: 1px; margin: 5px 6px; background: var(--adm-border); }

/* ════════════════ PAGINATION ════════════════ */
.tjk-pagination{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-top: 1px solid var(--adm-border);
}
.tjk-page-meta{
    font-size: 12.5px;
    font-weight: 500;
    color: var(--adm-muted);
    font-variant-numeric: tabular-nums;
    margin-inline-end: auto;
}
.tjk-page-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r-sm);
    background: var(--adm-surface);
    color: var(--adm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
}
.tjk-page-btn:hover{ background: var(--adm-surface-2); border-color: var(--adm-input-border); color: var(--adm-ink); text-decoration: none; }
.tjk-page-btn.is-current{
    background: var(--adm-accent-500);
    border-color: var(--adm-accent-500);
    color: var(--tj-brand-on, #fff);
    pointer-events: none;
}
.tjk-page-btn.is-disabled{ opacity: .4; pointer-events: none; }
.tjk-page-gap{ color: var(--adm-muted-2); font-size: 12px; padding: 0 2px; }

/* ════════════════ EMPTY STATE ════════════════ */
.tjk-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 48px 24px;
    text-align: center;
}
.tjk-empty.is-compact{ padding: 24px 18px; }
.tjk-empty-icon{
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    border: 1px solid var(--adm-border);
    background: var(--adm-surface-2);
    color: var(--adm-muted);
    font-size: 24px;
    box-shadow: var(--adm-shadow-xs);
}
.tjk-empty.is-compact .tjk-empty-icon{ width: 40px; height: 40px; font-size: 19px; }
.tjk-empty-title{
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--adm-ink);
}
.tjk-empty-desc{
    margin: 0;
    max-width: 380px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--adm-muted);
}
.tjk-empty-action{ margin-top: 12px; }

/* ════════════════ TABLE SKELETON ════════════════
   Shimmer animation comes from .tjsk in tj-skeleton.css. */
.tjk-skel-line{
    height: 10px;
    border-radius: var(--adm-r-sm);
}
.tjk-skel-w-40{ width: 40%; }
.tjk-skel-w-55{ width: 55%; }
.tjk-skel-w-70{ width: 70%; }
.tjk-skel-w-85{ width: 85%; }

/* ════════════════ TABS + SEGMENTED ════════════════ */
.tjk-tabs{
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--adm-border);
    padding: 0 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tjk-tabs::-webkit-scrollbar{ display: none; }
.tjk-tab{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--adm-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.tjk-tab:hover{ color: var(--adm-ink-2); text-decoration: none; }
.tjk-tab.is-active{
    color: var(--adm-accent-300);
    border-bottom-color: var(--adm-accent-500);
}
.tjk-tab-count{
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--adm-tone-soft);
    color: var(--adm-tone-ink);
    font-size: 10.5px;
    font-weight: 700;
}
.tjk-segmented{
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r);
    background: var(--adm-surface-2);
}
.tjk-seg-btn{
    border: 0;
    padding: 6px 12px;
    border-radius: var(--adm-r-sm);
    background: transparent;
    color: var(--adm-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 100ms ease-out;
}
.tjk-seg-btn:hover{ color: var(--adm-ink-2); }
.tjk-seg-btn.is-active{
    background: var(--adm-surface);
    color: var(--adm-ink);
    box-shadow: var(--adm-shadow-sm);
}

/* ════════════════ PROGRESS ════════════════ */
.tjk-progress{
    --tjk-tone: var(--adm-accent-500);
    height: 6px;
    border-radius: 999px;
    background: var(--adm-border);
    overflow: hidden;
}
.tjk-progress-bar{
    height: 100%;
    border-radius: inherit;
    background: var(--tjk-tone);
    transition: width .3s ease;
}

/* ════════════════ AVATAR ════════════════ */
.tjk-avatar{
    --tjk-tone: var(--adm-accent-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--tjk-tone-soft, var(--adm-accent-50));
    color: var(--tjk-tone-ink, var(--adm-accent-300));
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    flex: 0 0 auto;
}
.tjk-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.tjk-avatar-sm{ width: 32px; height: 32px; font-size: 12px; }
.tjk-avatar-lg{ width: 56px; height: 56px; font-size: 19px; }
.tjk-avatar.has-ring{ box-shadow: 0 0 0 2px var(--adm-surface), 0 0 0 4px var(--adm-accent-200); }

/* ════════════════ TIMELINE ════════════════ */
.tjk-timeline{ list-style: none; margin: 0; padding: 0; }
.tjk-timeline > li{
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 18px;
}
.tjk-timeline > li::before{
    content: "";
    position: absolute;
    top: 28px; bottom: 2px;
    inset-inline-start: 13px;
    width: 2px;
    background: var(--adm-border);
}
.tjk-timeline > li:last-child{ padding-bottom: 0; }
.tjk-timeline > li:last-child::before{ display: none; }
.tjk-timeline-dot{
    --tjk-tone-soft: var(--adm-accent-50);
    --tjk-tone-ink: var(--adm-accent-300);
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--tjk-tone-soft);
    color: var(--tjk-tone-ink);
    font-size: 13px;
    z-index: 1;
}
.tjk-timeline-txt{ min-width: 0; padding-top: 3px; }
.tjk-timeline-title{ font-size: 13px; font-weight: 700; color: var(--adm-ink); }
.tjk-timeline-desc{ font-size: 12px; color: var(--adm-muted); margin-top: 2px; line-height: 1.6; }
.tjk-timeline-time{ font-size: 11px; color: var(--adm-muted-2); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ════════════════ CHART CHROME ════════════════ */
.tjk-chart{
    position: relative;
    width: 100%;
    min-height: 120px;
}
.tjk-chart canvas{ display: block; width: 100% !important; }
.tjk-chart-skel{
    position: absolute;
    inset: 0;
    border-radius: var(--adm-r);
}
.tjk-chart-empty{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--adm-muted-2);
    font-size: 12.5px;
    font-weight: 600;
}
.tjk-chart-empty i{ font-size: 18px; }

/* ════════════════ TOPBAR ════════════════ */
.tjk-topbar{
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 24px;
    background: var(--adm-side);
    border-bottom: 1px solid var(--adm-border);
}
.tjk-topbar-burger{
    display: none;
    width: 38px; height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r);
    background: var(--adm-surface);
    color: var(--adm-ink-2);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 auto;
}
@media (max-width: 1024px){ .tjk-topbar-burger{ display: inline-flex; } }
.tjk-topbar-title{ min-width: 0; flex: 1 1 auto; }
.tjk-topbar-crumb{
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adm-muted-2);
}
.tjk-topbar-page{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--adm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tjk-topbar-end{
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.tjk-topbar-lang{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-r);
    background: var(--adm-surface);
    color: var(--adm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--adm-shadow-xs);
    transition: background 100ms ease-out, border-color 100ms ease-out, color 100ms ease-out;
}
.tjk-topbar-lang i{ font-size: 17px; }
.tjk-topbar-lang:hover{ background: var(--adm-surface-2); border-color: var(--adm-input-border); color: var(--adm-ink); text-decoration: none; }
.tjk-topbar-chip{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 6px;
    padding-inline-end: 12px;
    border: 1px solid transparent;
    border-radius: var(--adm-r);
    background: transparent;
    cursor: pointer;
    text-align: start;
    transition: background 100ms ease-out, border-color 100ms ease-out;
}
.tjk-topbar-chip:hover{ background: var(--adm-surface-2); border-color: var(--adm-border); }
.tjk-topbar-chip-name{
    display: block;
    max-width: 140px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--adm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tjk-topbar-chip-role{
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--adm-muted-2);
}
@media (max-width: 640px){ .tjk-topbar-chip-txt{ display: none; } .tjk-topbar{ padding: 8px 14px; gap: 10px; } }

/* ════════════════ SIDEBAR (tjk-side) ════════════════
   Rendered inside the legacy .page-sidebar wrapper, which
   tj-admin.css paints as a white rail. */
.tjk-side{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 14px 12px 24px;
}
.tjk-side-brand{
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 8px 16px;
    border-bottom: 1px solid var(--adm-side-border);
    margin-bottom: 12px;
    text-decoration: none;
}
.tjk-side-brand:hover{ text-decoration: none; }
.tjk-side-brand-mark.is-logo{ background: transparent; box-shadow: none; overflow: hidden; }
.tjk-side-brand-mark.is-logo img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.tjk-side-brand-mark{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--adm-r);
    background: var(--adm-accent-500);
    color: var(--tj-brand-on, #fff);
    font-size: 18px;
    box-shadow: var(--adm-shadow-xs);
}
.tjk-side-brand-txt{ min-width: 0; }
.tjk-side-brand-name{
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--adm-side-text-hi);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tjk-side-brand-sub{
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--adm-side-label);
}
.tjk-side-profile{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--adm-side-border);
    border-radius: var(--adm-r-lg);
    background: var(--adm-side-bg-2);
    text-decoration: none;
    transition: border-color 100ms ease-out;
}
.tjk-side-profile:hover{ border-color: var(--adm-input-border); text-decoration: none; }
.tjk-side-profile-txt{ min-width: 0; flex: 1 1 auto; }
.tjk-side-profile-name{
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--adm-side-text-hi);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;
}
.tjk-side-nav{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tjk-side-label{
    padding: 16px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--adm-side-label);
}
.tjk-side-link{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--adm-r);
    color: var(--adm-side-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 100ms ease-out, color 100ms ease-out;
}
.tjk-side-link:hover{
    background: var(--adm-tone-soft);
    color: var(--adm-side-text-hi);
    text-decoration: none;
}
.tjk-side-link > .fa,
.tjk-side-link > i{
    flex: 0 0 auto;
    width: 20px;
    font-size: 17px;
    text-align: center;
    color: var(--adm-muted-2);
    transition: color 100ms ease-out;
}
.tjk-side-link:hover > .fa,
.tjk-side-link:hover > i{ color: var(--adm-side-text-hi); }
.tjk-side-link-txt{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tjk-side-link.is-active{
    background: var(--adm-accent-50);
    color: var(--adm-accent-300);
    font-weight: 600;
}
.tjk-side-link.is-active > .fa,
.tjk-side-link.is-active > i{ color: var(--adm-accent-300); }

/* ════════════════ ADMIN GEOMETRY ════════════════
   The Neon theme sizes the rail at 220px with physical margins
   (theme-default.css + theme-default_rtl.css/rtl.css). The new
   sidebar is 264px, so both language sides are overridden here. */
.page-container .page-sidebar{ width: 264px !important; }
.page-container:not(.page-mode-rtl) .page-content{ margin-left: 264px !important; margin-right: 0 !important; }
.page-container.page-mode-rtl .page-content{ margin-left: 0 !important; margin-right: 264px !important; }

/* the sticky topbar spans the full content width (the content column
   has 28px side padding from tj-admin.css; 14px below 768px) */
.page-content > .tjk-topbar{ margin: 0 -28px 22px; }
@media (max-width: 768px){
    .page-content > .tjk-topbar{ margin: 0 -14px 16px; }
}

/* ── off-canvas rail (theme collapses at 1024px) ── */
@media (max-width: 1024px){
    .page-container .page-sidebar{
        position: fixed !important;
        top: 0 !important;
        float: none !important;
        width: 264px !important;
        height: 100vh !important;
        z-index: 1200 !important;
        box-shadow: var(--adm-shadow-lg);
        transition: transform .25s ease;
    }
    .page-container:not(.page-mode-rtl) .page-sidebar{ transform: translateX(-102%); }
    .page-container.page-mode-rtl .page-sidebar{ transform: translateX(102%); }
    body.tjk-side-open .page-sidebar{ transform: translateX(0) !important; }
    .page-container:not(.page-mode-rtl) .page-content{ margin-left: 0 !important; }
    .page-container.page-mode-rtl .page-content{ margin-right: 0 !important; }
}
#tjk-side-backdrop{
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: none;
    background: rgba(17,24,39,.45);
}
#tjk-side-backdrop.on{ display: block; }

/* ════════════════ RTL ════════════════ */
[dir="rtl"] .tjk-side-label, .page-mode-rtl .tjk-side-label{ letter-spacing: 0; text-transform: none; }

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion: reduce){
    .tjk-card, .tjk-stat, .tjk-btn, .tjk-side-link,
    .tjk-toggle-track, .tjk-toggle-thumb, .tjk-progress-bar{ transition: none; }
    .tjk-modal.is-open, .tjk-modal-panel, .tjk-dropdown.is-open .tjk-menu{ animation: none; }
    .tjk-btn.is-loading::after{ animation-duration: 1.4s; }
}

/* ════════════════ TABLE NORMALISATION (all consoles) ════════════════
   Dozens of pages carry their own table skin (orders-table, flc-table,
   slf-table…). Whatever they set, headers read as one system: 12px / 600 /
   sentence case, muted ink on the thead step. */
.page-content table thead th, .tjc-content table thead th, .fl-content table thead th, .site-content .tj-shop table thead th{
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 12px !important; font-weight: 600 !important;
    color: var(--adm-muted) !important; background: var(--adm-surface-2) !important;
}
.page-content table tbody td, .tjc-content table tbody td, .fl-content table tbody td{ font-size: 13.5px; line-height: 1.5; }