/* ==========================================================================
   Counterly design system  (cx)
   Tokens first, then the app shell, then the components every page already uses
   (Bootstrap 4 buttons / forms / tables / modals are restyled here, so all
   existing screens take on the new look without being rewritten).
   Logical properties are used throughout, so right-to-left languages mirror.
   ========================================================================== */

:root {
    --cx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --cx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --cx-bg: #F5F7FA;
    --cx-surface: #FFFFFF;
    --cx-surface-2: #F9FAFB;
    --cx-surface-3: #F2F4F7;
    --cx-line: #E4E7EC;
    --cx-line-2: #EEF0F4;
    --cx-text: #101828;
    --cx-text-2: #475467;
    --cx-muted: #7A8594;

    --cx-brand: #0F9D8A;
    --cx-brand-600: #0C8777;
    --cx-brand-700: #0A6E61;
    --cx-brand-100: #CDEDE7;
    --cx-brand-50: #E8F6F3;
    --cx-on-brand: #FFFFFF;

    --cx-ink: #0E1A2B;
    --cx-ink-2: #15253B;
    --cx-ink-text: #B9C6D8;
    --cx-ink-muted: #7389A3;

    --cx-amber: #F59E0B;  --cx-amber-50: #FFF6E0;
    --cx-red: #E5484D;    --cx-red-50: #FDECEC;
    --cx-green: #16A34A;  --cx-green-50: #E6F6EC;
    --cx-blue: #3B82F6;   --cx-blue-50: #E8F0FE;
    --cx-violet: #7C5CFA; --cx-violet-50: #EFEBFF;

    --cx-r-sm: 8px; --cx-r: 12px; --cx-r-lg: 16px;
    --cx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --cx-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 8px 24px -12px rgba(16, 24, 40, .14);
    --cx-shadow-lg: 0 24px 56px -16px rgba(16, 24, 40, .35);
    --cx-focus: 0 0 0 3px rgba(15, 157, 138, .22);

    --cx-side-w: 268px;
    --cx-rail-w: 76px;
    --cx-top-h: 60px;
    color-scheme: light;
}

/* the repair and label screens were built with the earlier --bq-* names; they now follow the same tokens */
:root {
    --bq-primary: var(--cx-brand); --bq-primary-600: var(--cx-brand-600); --bq-primary-700: var(--cx-brand-700); --bq-primary-100: var(--cx-brand-100); --bq-primary-50: var(--cx-brand-50);
    --bq-gold: var(--cx-amber); --bq-green: var(--cx-green); --bq-teal: var(--cx-brand); --bq-cyan: var(--cx-blue); --bq-orange: #F97316; --bq-amber: var(--cx-amber); --bq-pink: #EC4899; --bq-red: var(--cx-red); --bq-slate: var(--cx-muted);
    --bq-bg: var(--cx-bg); --bq-surface: var(--cx-surface); --bq-line: var(--cx-line); --bq-line-soft: var(--cx-line-2); --bq-text: var(--cx-text); --bq-text-2: var(--cx-text-2); --bq-muted: var(--cx-muted);
    --bq-ink: var(--cx-ink); --bq-ink-2: var(--cx-ink-2); --bq-ink-3: var(--cx-ink-2); --bq-radius: var(--cx-r-lg); --bq-radius-sm: var(--cx-r); --bq-shadow: var(--cx-shadow); --bq-shadow-lg: var(--cx-shadow-lg); --bq-font: var(--cx-font); --bq-mono: var(--cx-mono);
}
html[data-theme="dark"] {
    --cx-bg: #0A111C; --cx-surface: #111B2B; --cx-surface-2: #0F1827; --cx-surface-3: #16233A;
    --cx-line: #213047; --cx-line-2: #1A263A; --cx-text: #E7EDF6; --cx-text-2: #A8B5C7; --cx-muted: #7D8CA3;
    --cx-brand: #19B8A3; --cx-brand-600: #14A592; --cx-brand-700: #0F8C7B; --cx-brand-100: #12413B; --cx-brand-50: rgba(25, 184, 163, .13);
    --cx-ink: #070D17; --cx-ink-2: #0E1828;
    --cx-amber-50: rgba(245, 158, 11, .14); --cx-red-50: rgba(229, 72, 77, .15); --cx-green-50: rgba(22, 163, 74, .16);
    --cx-blue-50: rgba(59, 130, 246, .16); --cx-violet-50: rgba(124, 92, 250, .18);
    --cx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --cx-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
/* dark mode is opt-in (the switch in the top bar); the default is light so older screens keep their contrast */

/* ------------------------------------------------------------------ base */
html { -webkit-text-size-adjust: 100%; }
body.cx { margin: 0; background: var(--cx-bg); color: var(--cx-text); font: 400 14px/1.55 var(--cx-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.cx *, body.cx *::before, body.cx *::after { box-sizing: border-box; }
:where(body.cx) a { color: var(--cx-brand-600); text-decoration: none; }
:where(body.cx) a:hover { color: var(--cx-brand-700); text-decoration: none; }
body.cx h1, body.cx h2, body.cx h3, body.cx h4, body.cx h5, body.cx h6 { color: var(--cx-text); font-family: var(--cx-font); font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
body.cx h1 { font-size: 1.55rem; } body.cx h2 { font-size: 1.3rem; } body.cx h3 { font-size: 1.12rem; } body.cx h4 { font-size: 1rem; } body.cx h5 { font-size: .92rem; }
body.cx p { color: var(--cx-text-2); }
body.cx hr { border-color: var(--cx-line); }
body.cx small, body.cx .small { color: var(--cx-muted); }
body.cx ::selection { background: var(--cx-brand-100); }
body.cx :focus-visible { outline: 2px solid var(--cx-brand); outline-offset: 2px; }
body.cx ::-webkit-scrollbar { width: 10px; height: 10px; }
body.cx ::-webkit-scrollbar-thumb { background: var(--cx-line); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
body.cx ::-webkit-scrollbar-thumb:hover { background: var(--cx-muted); background-clip: content-box; border: 2px solid transparent; }
.cx-i { flex: none; vertical-align: middle; }
.sr-only-cx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ app shell */
.cx-app { min-height: 100vh; }
.cx-side {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1030; width: var(--cx-side-w);
    background: linear-gradient(180deg, var(--cx-ink) 0%, var(--cx-ink-2) 100%); color: var(--cx-ink-text);
    display: flex; flex-direction: column; transition: width .18s ease, transform .22s ease; overflow: hidden;
}
.cx-main { margin-inline-start: var(--cx-side-w); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin .18s ease; }
html.cx-rail .cx-side { width: var(--cx-rail-w); }
html.cx-rail .cx-main { margin-inline-start: var(--cx-rail-w); }
html.cx-rail .cx-side:hover { width: var(--cx-side-w); box-shadow: var(--cx-shadow-lg); }

body.cx a.cx-brand, body.cx a.cx-brand:hover { color: #fff; }
.cx-brand { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; min-height: 68px; color: #fff; }
.cx-brand:hover { color: #fff; }
.cx-mark { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em;
    background: linear-gradient(135deg, #19B8A3 0%, #0C8777 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 14px -6px rgba(15, 157, 138, .8); }
.cx-brand-txt { min-width: 0; line-height: 1.15; white-space: nowrap; }
.cx-brand-txt strong { display: block; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.cx-brand-txt small { display: block; color: var(--cx-ink-muted) !important; font-size: 11.5px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

.cx-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.cx-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: content-box; }
.cx-sec { margin: 18px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cx-ink-muted); white-space: nowrap; }
.cx-link, .cx-group > summary {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--cx-ink-text) !important; font-weight: 550; font-size: 13.5px;
    cursor: pointer; list-style: none; white-space: nowrap; position: relative; transition: background .12s, color .12s;
}
.cx-group > summary::-webkit-details-marker { display: none; }
.cx-link:hover, .cx-group > summary:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.cx-link.is-active { background: rgba(25, 184, 163, .16); color: #fff !important; }
.cx-link.is-active::before { content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 4px 4px 0; background: #19B8A3; }
[dir="rtl"] .cx-link.is-active::before { border-radius: 4px 0 0 4px; }
.cx-link .cx-i, .cx-group > summary .cx-i { opacity: .9; }
.cx-chev { margin-inline-start: auto; transition: transform .15s; opacity: .55; }
.cx-group[open] > summary .cx-chev { transform: rotate(180deg); }
.cx-group[open] > summary { color: #fff !important; }
.cx-sub { margin: 2px 0 6px; padding-inline-start: 22px; border-inline-start: 1px solid rgba(255, 255, 255, .09); margin-inline-start: 19px; }
.cx-sub .cx-link { padding: 7px 10px; font-weight: 500; font-size: 13px; color: var(--cx-ink-muted) !important; }
.cx-sub .cx-link:hover { color: #fff !important; }
.cx-sub .cx-link.is-active { color: #fff !important; background: rgba(25, 184, 163, .14); }
.cx-sub .cx-link.is-active::before { display: none; }
.cx-badge { margin-inline-start: auto; background: var(--cx-amber); color: #2A1C00; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }

.cx-side-foot { padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 11.5px; color: var(--cx-ink-muted); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.cx-side-foot button { background: rgba(255, 255, 255, .06); border: 0; color: var(--cx-ink-text); width: 32px; height: 32px; border-radius: 9px; cursor: pointer; display: grid; place-items: center; margin-inline-start: auto; }
.cx-side-foot button:hover { background: rgba(255, 255, 255, .12); color: #fff; }
html.cx-rail .cx-side:not(:hover) .cx-brand-txt, html.cx-rail .cx-side:not(:hover) .cx-link > span, html.cx-rail .cx-side:not(:hover) .cx-group > summary > span,
html.cx-rail .cx-side:not(:hover) .cx-chev, html.cx-rail .cx-side:not(:hover) .cx-sec, html.cx-rail .cx-side:not(:hover) .cx-badge, html.cx-rail .cx-side:not(:hover) .cx-side-foot > span,
html.cx-rail .cx-side:not(:hover) .cx-sub { display: none; }
html.cx-rail .cx-side:not(:hover) .cx-sec { display: block; visibility: hidden; margin: 8px 0 0; height: 1px; }
html.cx-rail .cx-side:not(:hover) .cx-link, html.cx-rail .cx-side:not(:hover) .cx-group > summary { justify-content: center; }
html.cx-rail .cx-side:not(:hover) .cx-side-foot button { margin-inline-start: 0; }
html.cx-rail .cx-side:not(:hover) .cx-side-foot { justify-content: center; padding-inline: 0; }
html.cx-rail .cx-side:not(:hover) .cx-brand { justify-content: center; padding-inline: 0; }
html.cx-rail .cx-side:not(:hover) .cx-link.is-active::before { inset-inline-start: -12px; }

.cx-top { position: sticky; top: 0; z-index: 1020; height: var(--cx-top-h); display: flex; align-items: center; gap: 10px; padding-inline: 20px;
    background: color-mix(in srgb, var(--cx-surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--cx-line); }
.cx-ibtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--cx-text-2); display: inline-grid; place-items: center; cursor: pointer; position: relative; transition: background .12s; }
.cx-ibtn:hover { background: var(--cx-surface-3); color: var(--cx-text); }
.cx-burger { display: none; }
.cx-search { flex: 1; min-width: 0; max-width: 440px; display: flex; align-items: center; gap: 10px; height: 38px; padding-inline: 12px; border-radius: 10px; border: 1px solid var(--cx-line); background: var(--cx-surface-2); color: var(--cx-muted); cursor: pointer; font: inherit; text-align: start; }
.cx-search:hover { border-color: var(--cx-brand-100); background: var(--cx-surface); }
.cx-search span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-kbd { font: 600 11px var(--cx-mono); border: 1px solid var(--cx-line); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--cx-muted); background: var(--cx-surface); }
.cx-grow { flex: 1; min-width: 0; }
.cx-only-xs { display: none !important; }
@media (max-width: 575.98px) { .cx-hide-xs { display: none !important; } .cx-only-xs { display: flex !important; } .cx-top { gap: 4px; } }
.cx-new { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; border-radius: 10px; border: 0; background: var(--cx-brand); color: var(--cx-on-brand); font-weight: 650; cursor: pointer; font-size: 13.5px; box-shadow: 0 6px 14px -8px var(--cx-brand); }
.cx-new:hover { background: var(--cx-brand-600); }
.cx-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cx-brand-100), var(--cx-brand-50)); color: var(--cx-brand-700); font-weight: 750; font-size: 13px; border: 1px solid var(--cx-brand-100); }
.cx-userbtn { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 3px 6px 3px 3px; border-radius: 999px; cursor: pointer; color: var(--cx-text); font: inherit; font-weight: 600; }
.cx-userbtn:hover { background: var(--cx-surface-3); }
.cx-userbtn small { display: block; color: var(--cx-muted); font-weight: 500; font-size: 11px; line-height: 1.1; }

.cx-pop { position: relative; }
.cx-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 220px; background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 14px; box-shadow: var(--cx-shadow-lg); padding: 6px; z-index: 1050; display: none; }
.cx-pop.is-open > .cx-menu { display: block; animation: cx-pop .12s ease-out; }
@keyframes cx-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cx-menu a, .cx-menu button.cx-mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; color: var(--cx-text) !important; font-weight: 550; font-size: 13.5px; background: none; border: 0; text-align: start; cursor: pointer; font-family: inherit; }
.cx-menu a:hover, .cx-menu button.cx-mi:hover { background: var(--cx-surface-3); }
.cx-menu .cx-i { color: var(--cx-muted); }
.cx-menu hr { margin: 6px 4px; }
.cx-menu .cx-mh { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; color: var(--cx-muted); text-transform: uppercase; letter-spacing: .08em; }
.cx-menu a.is-on { background: var(--cx-brand-50); color: var(--cx-brand-700) !important; }

.cx-content { flex: 1; padding: 24px 28px 40px; width: 100%; max-width: 1680px; margin-inline: auto; }
.cx-content > section > .container-fluid, .cx-content .container-fluid { padding-inline: 0; }
.cx-licence { background: var(--cx-amber-50); color: #8A5A00; border-bottom: 1px solid #F6D68A; padding: 8px 20px; font-weight: 600; text-align: center; font-size: 13px; }
html[data-theme="dark"] .cx-licence { color: #F6C86A; border-color: rgba(245, 158, 11, .35); }

.cx-bottom { display: none; }
.cx-scrim { position: fixed; inset: 0; background: rgba(8, 14, 24, .55); backdrop-filter: blur(2px); z-index: 1025; opacity: 0; pointer-events: none; transition: opacity .2s; }

/* tablet & phone: the side navigation becomes a drawer */
@media (max-width: 1199.98px) {
    .cx-side { width: min(300px, 86vw); transform: translateX(-104%); box-shadow: none; }
    [dir="rtl"] .cx-side { transform: translateX(104%); }
    html.cx-nav-open .cx-side { transform: none; box-shadow: var(--cx-shadow-lg); }
    html.cx-nav-open .cx-scrim { opacity: 1; pointer-events: auto; }
    html.cx-nav-open { overflow: hidden; }
    .cx-main, html.cx-rail .cx-main { margin-inline-start: 0; }
    html.cx-rail .cx-side { width: min(300px, 86vw); }
    html.cx-rail .cx-side:not(:hover) .cx-brand-txt, html.cx-rail .cx-side:not(:hover) .cx-link > span, html.cx-rail .cx-side:not(:hover) .cx-group > summary > span,
    html.cx-rail .cx-side:not(:hover) .cx-chev, html.cx-rail .cx-side:not(:hover) .cx-badge, html.cx-rail .cx-side:not(:hover) .cx-side-foot > span, html.cx-rail .cx-side:not(:hover) .cx-sub { display: revert; }
    html.cx-rail .cx-side:not(:hover) .cx-sec { visibility: visible; height: auto; margin: 18px 10px 6px; }
    html.cx-rail .cx-side:not(:hover) .cx-link, html.cx-rail .cx-side:not(:hover) .cx-group > summary { justify-content: flex-start; }
    html.cx-rail .cx-side:not(:hover) .cx-brand { justify-content: flex-start; padding-inline: 18px; }
    .cx-burger { display: inline-grid; }
    .cx-side-foot .cx-collapse { display: none; }
    .cx-content { padding: 20px 20px 36px; }
}
@media (max-width: 767.98px) {
    .cx-top { padding-inline: 12px; gap: 6px; }
    .cx-search { max-width: none; } .cx-search .cx-kbd { display: none; }
    .cx-new span, .cx-userbtn .cx-uname { display: none; } .cx-new { padding-inline: 10px; }
    .cx-hide-sm { display: none !important; }
    .cx-content { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); }
    .cx-bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 1022; background: color-mix(in srgb, var(--cx-surface) 94%, transparent);
        backdrop-filter: blur(14px); border-top: 1px solid var(--cx-line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
    .cx-bottom a, .cx-bottom button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--cx-muted) !important; font: 600 10.5px var(--cx-font); border-radius: 10px; cursor: pointer; }
    .cx-bottom a.is-active, .cx-bottom button.is-active { color: var(--cx-brand-600) !important; }
    .cx-bottom a.cx-fab { position: relative; }
    .cx-bottom a.cx-fab .cx-fab-dot { width: 46px; height: 46px; margin-top: -22px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #19B8A3, #0C8777); box-shadow: 0 10px 20px -8px rgba(15, 157, 138, .9); border: 3px solid var(--cx-bg); }
    .cx-bottom a.cx-fab { color: var(--cx-brand-600) !important; }
}

/* ------------------------------------------------------------------ command palette + toasts */
.cx-pal { position: fixed; inset: 0; z-index: 2100; background: rgba(8, 14, 24, .55); backdrop-filter: blur(3px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cx-pal.is-open { display: flex; }
.cx-pal-box { width: 100%; max-width: 580px; background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 18px; box-shadow: var(--cx-shadow-lg); overflow: hidden; animation: cx-pop .14s ease-out; }
.cx-pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cx-line); color: var(--cx-muted); }
.cx-pal-in input { flex: 1; border: 0; background: transparent; outline: 0; font: 500 16px var(--cx-font); color: var(--cx-text); min-width: 0; }
.cx-pal-list { max-height: min(56vh, 420px); overflow: auto; padding: 8px; }
.cx-pal-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--cx-text) !important; cursor: pointer; }
.cx-pal-item .cx-i { color: var(--cx-muted); }
.cx-pal-item small { margin-inline-start: auto; color: var(--cx-muted); }
.cx-pal-item.is-sel, .cx-pal-item:hover { background: var(--cx-brand-50); }
.cx-pal-item.is-sel .cx-i { color: var(--cx-brand-600); }
.cx-pal-empty { padding: 28px; text-align: center; color: var(--cx-muted); }
.cx-pal-foot { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--cx-line); color: var(--cx-muted); font-size: 12px; background: var(--cx-surface-2); }

#cx-toasts { position: fixed; inset-inline-end: 18px; bottom: 18px; z-index: 2200; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 28px)); pointer-events: none; }
.cx-toast { pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--cx-surface); border: 1px solid var(--cx-line); border-inline-start: 4px solid var(--cx-brand); border-radius: 12px; box-shadow: var(--cx-shadow-lg); animation: cx-toast .22s ease-out; }
.cx-toast.is-danger { border-inline-start-color: var(--cx-red); } .cx-toast.is-warn { border-inline-start-color: var(--cx-amber); }
.cx-toast strong { display: block; font-size: 13.5px; } .cx-toast span { color: var(--cx-text-2); font-size: 13px; }
.cx-toast.is-out { opacity: 0; transform: translateY(8px); transition: .25s; }
@keyframes cx-toast { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 767.98px) { #cx-toasts { bottom: calc(86px + env(safe-area-inset-bottom)); inset-inline: 14px; width: auto; } }

#cx-progress { position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 2300; background: linear-gradient(90deg, var(--cx-brand), #7CE0D0); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; transition: transform .4s ease, opacity .2s; pointer-events: none; }
#cx-progress.on { opacity: 1; transform: scaleX(.78); transition: transform 6s cubic-bezier(.1, .8, .2, 1); }
[dir="rtl"] #cx-progress { transform-origin: 100% 50%; }

/* ------------------------------------------------------------------ page header + filter bar (used by every list) */
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 18px; margin: 0 0 18px; }
.cx-head h1 { margin: 0; font-size: 1.6rem; }
.cx-head p { margin: 4px 0 0; color: var(--cx-muted); font-size: 13.5px; }
.cx-crumb { display: flex; align-items: center; gap: 6px; color: var(--cx-muted); font-size: 12.5px; margin-bottom: 4px; }
.cx-crumb a { color: var(--cx-muted) !important; } .cx-crumb a:hover { color: var(--cx-brand-600) !important; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text-2) !important; font-size: 12.5px; font-weight: 600; }
.cx-chip.is-on { background: var(--cx-brand-50); border-color: var(--cx-brand-100); color: var(--cx-brand-700) !important; }
.cx-chip button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; line-height: 1; }

.cx-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 2000; width: min(460px, 100vw); background: var(--cx-surface); border-inline-start: 1px solid var(--cx-line); box-shadow: var(--cx-shadow-lg);
    display: flex; flex-direction: column; transform: translateX(104%); transition: transform .24s ease; }
[dir="rtl"] .cx-drawer { transform: translateX(-104%); }
.cx-drawer.is-open { transform: none; }
.cx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cx-line); }
.cx-drawer-head h3 { margin: 0; }
.cx-drawer-body { flex: 1; overflow: auto; padding: 18px 20px; }
.cx-drawer-foot { padding: 14px 20px; border-top: 1px solid var(--cx-line); display: flex; gap: 10px; background: var(--cx-surface-2); }
.cx-field { margin-bottom: 14px; }
.cx-field > label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 12.5px; color: var(--cx-text-2); }
.cx-drawer-scrim { position: fixed; inset: 0; z-index: 1990; background: rgba(8, 14, 24, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
.cx-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------ cards, panels, stats */
.cx-card, body.cx .card, body.cx .box { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-r-lg); box-shadow: var(--cx-shadow-sm); }
.cx-card { padding: 18px 20px; }
.cx-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cx-card-head h3 { margin: 0; font-size: 1rem; }
.cx-card-head a { font-size: 13px; font-weight: 600; }
body.cx .box { overflow: hidden; padding: 0; }
body.cx .card-header { background: var(--cx-surface-2); border-bottom: 1px solid var(--cx-line); color: var(--cx-text); font-weight: 650; }
body.cx .card-body { color: var(--cx-text); }

/* ------------------------------------------------------------------ buttons */
body.cx .btn { font-family: var(--cx-font); font-weight: 600; font-size: 13.5px; border-radius: 10px; padding: .5rem .95rem; border: 1px solid transparent; line-height: 1.35; transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; box-shadow: none; }
body.cx .btn:active { transform: translateY(1px); }
body.cx .btn:focus, body.cx .btn.focus { box-shadow: var(--cx-focus); outline: 0; }
body.cx .btn-sm { padding: .32rem .65rem; font-size: 12.5px; border-radius: 8px; }
body.cx .btn-lg { padding: .75rem 1.3rem; font-size: 15px; border-radius: 12px; }
body.cx .btn-primary, body.cx .btn-info { background: var(--cx-brand); border-color: var(--cx-brand); color: var(--cx-on-brand) !important; }
body.cx .btn-primary:hover, body.cx .btn-info:hover, body.cx .btn-primary:not(:disabled):not(.disabled):active, body.cx .btn-info:not(:disabled):not(.disabled):active { background: var(--cx-brand-600); border-color: var(--cx-brand-600); color: #fff !important; }
body.cx .btn-secondary, body.cx .btn-default, body.cx .btn-light { background: var(--cx-surface); border-color: var(--cx-line); color: var(--cx-text) !important; }
body.cx .btn-secondary:hover, body.cx .btn-default:hover, body.cx .btn-light:hover { background: var(--cx-surface-3); border-color: var(--cx-line); color: var(--cx-text) !important; }
body.cx .btn-success { background: var(--cx-green); border-color: var(--cx-green); color: #fff !important; }
body.cx .btn-danger { background: var(--cx-red); border-color: var(--cx-red); color: #fff !important; }
body.cx .btn-warning { background: var(--cx-amber); border-color: var(--cx-amber); color: #2A1C00 !important; }
body.cx .btn-dark { background: var(--cx-ink); border-color: var(--cx-ink); color: #fff !important; }
body.cx .btn-link { color: var(--cx-brand-600); text-decoration: none; padding-inline: .5rem; }
body.cx .btn-link:hover { text-decoration: none; background: var(--cx-brand-50); color: var(--cx-brand-700); }
body.cx .btn-outline-primary, body.cx .btn-outline-info { color: var(--cx-brand-600) !important; border-color: var(--cx-brand-100); background: var(--cx-surface); }
body.cx .btn-outline-primary:hover, body.cx .btn-outline-info:hover { background: var(--cx-brand-50); border-color: var(--cx-brand); }
body.cx .btn-outline-danger { color: var(--cx-red) !important; border-color: rgba(229, 72, 77, .35); background: var(--cx-surface); }
body.cx .btn-outline-danger:hover { background: var(--cx-red-50); }
body.cx .btn-outline-secondary { color: var(--cx-text-2) !important; border-color: var(--cx-line); background: var(--cx-surface); }
body.cx .btn[disabled], body.cx .btn.disabled { opacity: .55; }
body.cx .btn-group > .btn { border-radius: 0; } body.cx .btn-group > .btn:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; } body.cx .btn-group > .btn:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }

/* ------------------------------------------------------------------ forms */
body.cx label { font-weight: 600; font-size: 12.5px; color: var(--cx-text-2); margin-bottom: 6px; }
body.cx .form-group { margin-bottom: 1rem; }
body.cx .form-control, body.cx .custom-select, body.cx select.form-control, body.cx textarea.form-control {
    height: 40px; border-radius: 10px; border: 1px solid var(--cx-line); background-color: var(--cx-surface); color: var(--cx-text); font-family: var(--cx-font); font-size: 14px; padding: .45rem .8rem; box-shadow: none; transition: border-color .12s, box-shadow .12s; }
body.cx textarea.form-control { height: auto; min-height: 84px; }
body.cx .form-control::placeholder { color: var(--cx-muted); opacity: .8; }
body.cx .form-control:focus, body.cx .custom-select:focus { border-color: var(--cx-brand); box-shadow: var(--cx-focus); background-color: var(--cx-surface); color: var(--cx-text); }
body.cx .form-control:disabled, body.cx .form-control[readonly] { background: var(--cx-surface-3); color: var(--cx-text-2); }
body.cx .form-control-sm { height: 34px; font-size: 13px; border-radius: 8px; }
body.cx input[type="checkbox"], body.cx input[type="radio"] { accent-color: var(--cx-brand); }
body.cx input[type="date"], body.cx input[type="time"] { min-height: 40px; }
body.cx .input-group-text { background: var(--cx-surface-3); border-color: var(--cx-line); color: var(--cx-text-2); border-radius: 10px; }
body.cx .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
body.cx .bootstrap-select > .dropdown-toggle, body.cx .bootstrap-select .btn { height: 40px; border-radius: 10px !important; border: 1px solid var(--cx-line) !important; background: var(--cx-surface) !important; color: var(--cx-text) !important; font-weight: 500; text-decoration: none; padding: .4rem .8rem; display: flex; align-items: center; }
body.cx .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; }
body.cx .bootstrap-select .dropdown-toggle:focus { box-shadow: var(--cx-focus) !important; border-color: var(--cx-brand) !important; outline: 0 !important; }
body.cx .bootstrap-select { width: 100% !important; }
body.cx .bootstrap-select .dropdown-menu { border-radius: 12px; padding: 6px; }
body.cx .bootstrap-select .dropdown-menu li a { border-radius: 8px; }
body.cx .bootstrap-select .dropdown-menu li.selected a, body.cx .bootstrap-select .dropdown-menu li a:hover { background: var(--cx-brand-50); color: var(--cx-brand-700); }
body.cx .bootstrap-select .bs-searchbox .form-control { height: 36px; }
body.cx .invalid-feedback, body.cx .text-danger { color: var(--cx-red) !important; }
body.cx .ui-datepicker, body.cx .ui-autocomplete, body.cx .ui-menu { border-radius: 12px; border: 1px solid var(--cx-line); background: var(--cx-surface); box-shadow: var(--cx-shadow-lg); font-family: var(--cx-font); }
body.cx .ui-menu-item .ui-menu-item-wrapper { padding: 8px 12px; color: var(--cx-text); }
body.cx .ui-state-active, body.cx .ui-menu-item .ui-state-active { background: var(--cx-brand-50) !important; border: 0 !important; color: var(--cx-brand-700) !important; margin: 0 !important; }

/* ------------------------------------------------------------------ tables */
body.cx .table-responsive { border: 0; border-radius: var(--cx-r-lg); }
body.cx .table-responsive.box, body.cx .box .table-responsive { border: 0; }
body.cx .table { width: 100%; margin: 0; color: var(--cx-text); border-collapse: separate; border-spacing: 0; background: transparent; }
body.cx .table thead th, body.cx .table thead td { border: 0; border-bottom: 1px solid var(--cx-line); background: var(--cx-surface-2) !important; color: var(--cx-muted) !important; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 11px 14px; white-space: nowrap; vertical-align: middle; }
body.cx .table thead tr.bg-primary, body.cx .table thead tr.bg-primary th { background: var(--cx-surface-2) !important; }
body.cx .table thead .text-light, body.cx .table thead tr.text-light th { color: var(--cx-muted) !important; }
body.cx .table td, body.cx .table tbody th { border: 0; border-bottom: 1px solid var(--cx-line-2); padding: 12px 14px; vertical-align: middle; color: var(--cx-text); }
body.cx .table tbody tr:last-child td { border-bottom: 0; }
body.cx .table-hover tbody tr:hover, body.cx .table tbody tr:hover { background: var(--cx-surface-2); }
body.cx .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
body.cx .table tfoot th, body.cx .table tfoot td { border-top: 1px solid var(--cx-line); background: var(--cx-surface-2); font-weight: 700; padding: 12px 14px; }
body.cx .table-bordered, body.cx .table-bordered td, body.cx .table-bordered th { border-color: var(--cx-line-2); }
body.cx .dataTables_wrapper .dataTables_filter input { border-radius: 10px; border: 1px solid var(--cx-line); padding: 6px 10px; background: var(--cx-surface); color: var(--cx-text); }
body.cx td .btn-group .btn { padding: .3rem .7rem; }

/* tables turn into cards on phones (JS adds .cx-stack + data-label to read-only tables) */
@media (max-width: 767.98px) {
    body.cx .table.cx-stack thead { display: none; }
    body.cx .table.cx-stack, body.cx .table.cx-stack tbody, body.cx .table.cx-stack tr, body.cx .table.cx-stack td { display: block; width: 100%; }
    body.cx .table.cx-stack tr { margin: 0 0 10px; border: 1px solid var(--cx-line); border-radius: 14px; background: var(--cx-surface); box-shadow: var(--cx-shadow-sm); overflow: hidden; }
    body.cx .table.cx-stack tbody tr:hover { background: var(--cx-surface); }
    body.cx .table.cx-stack td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--cx-line-2); text-align: end; }
    body.cx .table.cx-stack td:last-child { border-bottom: 0; }
    body.cx .table.cx-stack td.cx-clip { max-width: none; }
    body.cx .table.cx-stack td .cx-cell { text-align: end; }
    body.cx .table.cx-stack td:first-child { white-space: normal; }
    body.cx .table.cx-stack td::before { content: attr(data-label); flex: none; color: var(--cx-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: start; }
    body.cx .table.cx-stack td:empty { display: none; }
    body.cx .table.cx-stack td[data-label=""]::before { display: none; }
    body.cx .table.cx-stack tr.cx-total td, body.cx .table.cx-stack tfoot { display: none; }
    body.cx .table-responsive.box { background: transparent; border: 0; box-shadow: none; overflow: visible; }
}

/* ------------------------------------------------------------------ misc bootstrap components */
body.cx .dropdown-menu { border: 1px solid var(--cx-line); border-radius: 12px; background: var(--cx-surface); box-shadow: var(--cx-shadow-lg); padding: 6px; font-size: 13.5px; }
body.cx .dropdown-item, body.cx .dropdown-menu > li > a, body.cx .dropdown-menu .btn-link { border-radius: 8px; color: var(--cx-text) !important; padding: 8px 12px; display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; font-weight: 550; }
body.cx .dropdown-item:hover, body.cx .dropdown-menu > li > a:hover, body.cx .dropdown-menu .btn-link:hover { background: var(--cx-surface-3); }
body.cx .dropdown-menu li { list-style: none; } body.cx .dropdown-menu form { margin: 0; }
body.cx .dropdown-divider, body.cx .dropdown-menu .divider { border-color: var(--cx-line); margin: 6px 0; height: 1px; background: var(--cx-line); }
body.cx .modal-content { border: 1px solid var(--cx-line); border-radius: 18px; background: var(--cx-surface); color: var(--cx-text); box-shadow: var(--cx-shadow-lg); }
body.cx .modal-header { border-bottom: 1px solid var(--cx-line); padding: 16px 20px; } body.cx .modal-footer { border-top: 1px solid var(--cx-line); }
body.cx .modal-title { font-weight: 650; } body.cx .modal-body { padding: 18px 20px; }
body.cx .modal-backdrop.show { opacity: .55; background: #08111E; }
body.cx .close { color: var(--cx-text-2); opacity: .8; text-shadow: none; }
body.cx .alert { border-radius: 12px; border: 1px solid transparent; padding: 12px 16px; font-weight: 550; }
body.cx .alert-success { background: var(--cx-green-50); color: #14703A; border-color: rgba(22, 163, 74, .25); }
body.cx .alert-danger { background: var(--cx-red-50); color: #B42318; border-color: rgba(229, 72, 77, .28); }
body.cx .alert-warning { background: var(--cx-amber-50); color: #8A5A00; border-color: rgba(245, 158, 11, .35); }
body.cx .alert-info { background: var(--cx-blue-50); color: #1D4FA8; border-color: rgba(59, 130, 246, .28); }
html[data-theme="dark"] body.cx .alert-success { color: #7BE0A3; } html[data-theme="dark"] body.cx .alert-danger { color: #FF9A9E; } html[data-theme="dark"] body.cx .alert-warning { color: #F6C86A; } html[data-theme="dark"] body.cx .alert-info { color: #8FB8FF; }
body.cx .badge { border-radius: 999px; padding: .32em .7em; font-weight: 700; font-size: 11.5px; letter-spacing: .01em; }
body.cx .badge-primary, body.cx .badge-info { background: var(--cx-brand-50); color: var(--cx-brand-700); } body.cx .badge-success { background: var(--cx-green-50); color: #14703A; }
body.cx .badge-danger { background: var(--cx-red-50); color: #B42318; } body.cx .badge-warning { background: var(--cx-amber-50); color: #8A5A00; } body.cx .badge-secondary { background: var(--cx-surface-3); color: var(--cx-text-2); }
body.cx .pagination { gap: 4px; flex-wrap: wrap; margin: 0; }
body.cx .page-link { border-radius: 9px !important; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text-2); font-weight: 600; padding: .4rem .75rem; margin: 0; }
body.cx .page-item.active .page-link { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff; }
body.cx .page-item.disabled .page-link { background: var(--cx-surface-2); color: var(--cx-muted); }
body.cx .nav-tabs { border-bottom: 1px solid var(--cx-line); gap: 4px; } body.cx .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--cx-text-2); font-weight: 600; border-radius: 0; padding: .6rem .9rem; }
body.cx .nav-tabs .nav-link.active, body.cx .nav-tabs .nav-item.show .nav-link { background: transparent; color: var(--cx-brand-700); border-bottom-color: var(--cx-brand); }
body.cx .nav-pills .nav-link { border-radius: 999px; font-weight: 600; color: var(--cx-text-2); } body.cx .nav-pills .nav-link.active { background: var(--cx-brand); color: #fff; }
body.cx .list-group-item { background: var(--cx-surface); border-color: var(--cx-line); color: var(--cx-text); }
body.cx .progress { background: var(--cx-surface-3); border-radius: 999px; } body.cx .progress-bar { background: var(--cx-brand); }
body.cx .tooltip-inner { background: var(--cx-ink); border-radius: 8px; font-size: 12px; padding: 5px 9px; }
body.cx .text-muted { color: var(--cx-muted) !important; } body.cx .bg-primary { background: var(--cx-brand) !important; } body.cx .text-primary { color: var(--cx-brand-600) !important; }
body.cx .bg-white { background: var(--cx-surface) !important; } body.cx .border { border-color: var(--cx-line) !important; }
/* the old "loading" overlay and floating notification box are replaced by the progress bar and toasts */
#loader, .notification_box { display: none !important; }
#content { display: block !important; }

/* ------------------------------------------------------------------ status pills, key figures, rows (shared by new screens) */
.cx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--cx-surface-3); color: var(--cx-text-2); }
.cx-pill.is-ok { background: var(--cx-green-50); color: #14703A; } .cx-pill.is-warn { background: var(--cx-amber-50); color: #8A5A00; } .cx-pill.is-bad { background: var(--cx-red-50); color: #B42318; }
.cx-pill.is-info { background: var(--cx-blue-50); color: #1D4FA8; } .cx-pill.is-brand { background: var(--cx-brand-50); color: var(--cx-brand-700); } .cx-pill.is-violet { background: var(--cx-violet-50); color: #5B3FD6; }
html[data-theme="dark"] .cx-pill.is-ok { color: #7BE0A3; } html[data-theme="dark"] .cx-pill.is-warn { color: #F6C86A; } html[data-theme="dark"] .cx-pill.is-bad { color: #FF9A9E; } html[data-theme="dark"] .cx-pill.is-info { color: #8FB8FF; } html[data-theme="dark"] .cx-pill.is-violet { color: #B7A5FF; }
.cx-clip { max-width: 340px; }
body.cx .table td:first-child { white-space: nowrap; }
.cx-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.cx-empty { text-align: center; padding: 38px 16px; color: var(--cx-muted); }
.cx-empty .cx-i { opacity: .5; margin-bottom: 8px; }

/* ------------------------------------------------------------------ dashboard */
.cx-hello { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cx-hello h1 { margin: 0; font-size: 1.7rem; } .cx-hello p { margin: 4px 0 0; color: var(--cx-muted); }
.cx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.cx-kpi { background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: var(--cx-r-lg); padding: 16px 18px; box-shadow: var(--cx-shadow-sm); position: relative; overflow: hidden; color: inherit; display: block; }
.cx-kpi:hover { border-color: var(--cx-brand-100); box-shadow: var(--cx-shadow); color: inherit; }
.cx-kpi-top { display: flex; align-items: center; justify-content: space-between; color: var(--cx-muted); font-weight: 650; font-size: 12.5px; }
.cx-kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cx-brand-50); color: var(--cx-brand-600); }
.cx-kpi.tone-blue .cx-kpi-ico { background: var(--cx-blue-50); color: var(--cx-blue); } .cx-kpi.tone-amber .cx-kpi-ico { background: var(--cx-amber-50); color: #C77A00; } .cx-kpi.tone-violet .cx-kpi-ico { background: var(--cx-violet-50); color: var(--cx-violet); }
.cx-kpi strong { display: block; margin-top: 10px; overflow-wrap: anywhere; font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cx-kpi em { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--cx-muted); }
.cx-delta { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; }
.cx-delta.up { background: var(--cx-green-50); color: #14703A; } .cx-delta.down { background: var(--cx-red-50); color: #B42318; } .cx-delta.flat { background: var(--cx-surface-3); color: var(--cx-muted); }
.cx-grid2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.cx-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.cx-chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding-top: 10px; }
.cx-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; position: relative; }
.cx-bar-fill { width: 100%; max-width: 38px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--cx-brand-100), var(--cx-brand-50)); border: 1px solid var(--cx-brand-100); transition: filter .12s; }
.cx-bar.is-today .cx-bar-fill { background: linear-gradient(180deg, #19B8A3, #0C8777); border-color: transparent; }
.cx-bar:hover .cx-bar-fill { filter: brightness(.94); }
.cx-bar-val { font-size: 10.5px; color: var(--cx-muted); font-weight: 650; height: 14px; white-space: nowrap; }
.cx-bar-lbl { font-size: 11.5px; color: var(--cx-muted); font-weight: 600; }
.cx-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cx-legend { flex: 1; min-width: 150px; display: grid; gap: 9px; }
.cx-legend div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--cx-text-2); }
.cx-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .cx-legend b { margin-inline-start: auto; color: var(--cx-text); font-variant-numeric: tabular-nums; }
.cx-list { display: grid; }
.cx-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--cx-line-2); color: var(--cx-text) !important; }
.cx-row:last-child { border-bottom: 0; } a.cx-row:hover { background: var(--cx-surface-2); border-radius: 10px; }
.cx-row-main { flex: 1; min-width: 0; line-height: 1.3; } .cx-row-main strong { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-row-main small, .cx-row-end small { display: block; color: var(--cx-muted); font-size: 12px; } .cx-row-end { text-align: end; line-height: 1.3; } .cx-row-end strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.cx-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-weight: 750; font-size: 14px; background: var(--cx-brand-50); color: var(--cx-brand-700); flex: none; }
.cx-att { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--cx-line); background: var(--cx-surface-2); color: var(--cx-text) !important; }
.cx-att:hover { border-color: var(--cx-brand-100); }
.cx-att .cx-av { border-radius: 10px; } .cx-att.is-bad .cx-av { background: var(--cx-red-50); color: var(--cx-red); } .cx-att.is-warn .cx-av { background: var(--cx-amber-50); color: #C77A00; } .cx-att.is-ok .cx-av { background: var(--cx-green-50); color: var(--cx-green); }
.cx-att strong { display: block; font-size: 13.5px; } .cx-att small { color: var(--cx-muted); }
.cx-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cx-qa { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text) !important; font-weight: 650; font-size: 13.5px; }
.cx-qa:hover { border-color: var(--cx-brand-100); background: var(--cx-brand-50); }
.cx-qa .cx-i { color: var(--cx-brand-600); }
@media (max-width: 1199.98px) { .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-grid2, .cx-grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575.98px) { .cx-kpis { gap: 10px; } .cx-kpi { padding: 13px 14px; } .cx-kpi strong { font-size: 1.3rem; } .cx-hello h1 { font-size: 1.35rem; } .cx-chart { gap: 5px; } }

/* ------------------------------------------------------------------ journal entry editor + general journal */
.cx-je-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.cx-je-lines { margin-top: 6px; }
.cx-je-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.cx-je-grid th { font-size: 11.5px; font-weight: 700; color: var(--cx-muted); text-transform: uppercase; letter-spacing: .06em; padding: 8px 8px; text-align: start; border-bottom: 1px solid var(--cx-line); }
.cx-je-grid td { padding: 7px 6px; vertical-align: top; border-bottom: 1px solid var(--cx-line-2); }
.cx-je-grid td .form-control { height: 38px; }
.cx-je-grid .num { text-align: end; font-variant-numeric: tabular-nums; }
.cx-je-grid .rm { width: 44px; text-align: center; }
.cx-je-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--cx-surface-2); border: 1px solid var(--cx-line); }
.cx-je-tot { display: flex; gap: 22px; flex-wrap: wrap; } .cx-je-tot div small { display: block; } .cx-je-tot b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cx-je-state:empty { display: none; }
.cx-je-state { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; }
.cx-je-state.ok { background: var(--cx-green-50); color: #14703A; } .cx-je-state.bad { background: var(--cx-amber-50); color: #8A5A00; }
html[data-theme="dark"] .cx-je-state.ok { color: #7BE0A3; } html[data-theme="dark"] .cx-je-state.bad { color: #F6C86A; }
.cx-je-acc { position: relative; }
.cx-je-sug { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; background: var(--cx-surface); border: 1px solid var(--cx-line); border-radius: 12px; box-shadow: var(--cx-shadow-lg); max-height: 260px; overflow: auto; padding: 4px; display: none; }
.cx-je-sug.on { display: block; } .cx-je-sug button { display: flex; width: 100%; gap: 10px; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: start; color: var(--cx-text); font: inherit; cursor: pointer; }
.cx-je-sug button:hover, .cx-je-sug button.sel { background: var(--cx-brand-50); } .cx-je-sug small { margin-inline-start: auto; }
.cx-entry { margin-bottom: 14px; } .cx-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cx-line); }
.cx-entry-head h3 { margin: 0; font-size: 1rem; } .cx-entry-meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--cx-muted); font-size: 12.5px; }
.cx-entry .table td, .cx-entry .table th { padding-block: 9px; }
@media (max-width: 767.98px) {
    .cx-je-grid thead { display: none; } .cx-je-grid, .cx-je-grid tbody, .cx-je-grid tr, .cx-je-grid td { display: block; width: 100%; }
    .cx-je-grid tr { border: 1px solid var(--cx-line); border-radius: 14px; padding: 8px; margin-bottom: 10px; background: var(--cx-surface); position: relative; }
    .cx-je-grid td { border: 0; padding: 4px; } .cx-je-grid td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--cx-muted); text-transform: uppercase; margin-bottom: 2px; }
    .cx-je-grid .rm { position: absolute; inset-inline-end: 6px; top: 4px; width: auto; } .cx-je-grid td.acc, .cx-je-grid td.dsc { width: 100%; }
    .cx-je-grid td.dr, .cx-je-grid td.cr { display: inline-block; width: 50%; }
}

/* ------------------------------------------------------------------ utilities */
.cx-stack-gap > * + * { margin-top: 16px; }
.cx-flex { display: flex; align-items: center; gap: 10px; } .cx-between { justify-content: space-between; } .cx-wrap { flex-wrap: wrap; }
.cx-mt { margin-top: 16px; } .cx-mb { margin-bottom: 16px; }

/* ------------------------------------------------------------------ print: only the page content */
@media print {
    .cx-side, .cx-top, .cx-bottom, .cx-scrim, #cx-toasts, #cx-progress, .cx-pal, .cx-licence, .cx-drawer, .cx-drawer-scrim { display: none !important; }
    .cx-main { margin: 0 !important; } .cx-content { padding: 0 !important; max-width: none; }
    body.cx { background: #fff; color: #000; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------------ legacy form polish */
.cx-app { overflow-x: clip; }
body.cx .bootstrap-select.form-control { border: 0 !important; padding: 0 !important; height: auto !important; background: transparent !important; box-shadow: none !important; }
body.cx .bootstrap-select.form-control > .dropdown-toggle { width: 100%; }
body.cx .create_card_header { background: var(--cx-surface-2) !important; color: var(--cx-text) !important; border-bottom: 1px solid var(--cx-line); justify-content: flex-start !important; text-align: start; padding: 14px 18px !important; border-radius: var(--cx-r-lg) var(--cx-r-lg) 0 0; }
body.cx .create_card_header, body.cx .create_card_header * { color: var(--cx-text) !important; font-weight: 650; }
body.cx .card-header.bg-primary, body.cx .card-header[style*="background"] { background: var(--cx-surface-2) !important; color: var(--cx-text) !important; }
body.cx .container-fluid > .row > [class*="col-"] > h1, body.cx .container-fluid > h2:first-child, body.cx .container-fluid > h3:first-child { margin-bottom: 14px; }
body.cx .text-right.mb-2, body.cx .btn-toolbar { gap: 8px; }
body.cx table .btn-default, body.cx table .btn-group .dropdown-toggle { background: var(--cx-surface) !important; border: 1px solid var(--cx-line) !important; color: var(--cx-text) !important; }
body.cx .modal .form-control, body.cx .modal .selectpicker { max-width: 100%; }
body.cx .alert-dismissible .close { padding: .65rem 1rem; }

/* ---- Reports ---------------------------------------------------------------------------------------------- */
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rp-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--cx-line); border-radius: var(--cx-r-lg); background: var(--cx-surface); color: var(--cx-text) !important; text-decoration: none !important; transition: border-color .12s, box-shadow .12s, transform .08s; }
.rp-card:hover { border-color: var(--cx-brand); box-shadow: var(--cx-shadow); }
.rp-card:active { transform: scale(.99); }
.rp-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cx-brand-50); color: var(--cx-brand-700); }
html[data-theme="dark"] .rp-ico { background: rgba(15, 157, 138, .16); color: var(--cx-brand); }
.rp-txt b { display: block; font-size: 14.5px; margin-bottom: 2px; } .rp-txt small { display: block; color: var(--cx-muted); line-height: 1.4; }
.rp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { padding: 6px 13px; border: 1px solid var(--cx-line); border-radius: 999px; background: var(--cx-surface); color: var(--cx-text-2) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; }
.rp-chip:hover { border-color: var(--cx-brand); } .rp-chip.on { background: var(--cx-brand); border-color: var(--cx-brand); color: #fff !important; }
.rp-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cx-line); }
.rp-tools input { max-width: 320px; } .rp-tools small { color: var(--cx-muted); }
.rp-table thead th { position: sticky; top: 0; background: var(--cx-surface-2); white-space: nowrap; }
.rp-table tfoot td { background: var(--cx-surface-2); border-top: 2px solid var(--cx-line); }
.rp-neg { color: var(--cx-red); }
.rp-hbars { display: flex; flex-direction: column; gap: 8px; }
.rp-hrow { display: grid; grid-template-columns: minmax(90px, 200px) 1fr minmax(80px, auto); gap: 12px; align-items: center; font-size: 13px; }
.rp-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-hb { height: 12px; border-radius: 6px; background: var(--cx-surface-3); overflow: hidden; } .rp-hb i { display: block; height: 100%; border-radius: 6px; background: var(--cx-brand); } .rp-hb i.neg { background: var(--cx-red); }
.rp-hv { text-align: end; font-weight: 650; }
.rp-vbars { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.rp-vbar { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: var(--cx-brand); opacity: .85; } .rp-vbar:hover { opacity: 1; } .rp-vbar.neg { background: var(--cx-red); }
@media (max-width: 600px) { .rp-hrow { grid-template-columns: 90px 1fr auto; } .rp-grid { grid-template-columns: 1fr; } }