/* =========================================================
   RKTALLY - APP SHELL + GLOBAL THEME
   Loaded after bootstrap / site.css / rk-app.css.
   1. Design tokens
   2. App shell  (sidebar + app bar + content)
   3. Sidebar navigation
   4. App bar (quick actions, financial year, user)
   5. Responsive behaviour
   6. Global component polish (cards, tables, forms, ...)
   7. Print
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */

:root {
    --rkx-side-bg: #0f172a;
    --rkx-side-hover: rgba(255, 255, 255, .06);
    --rkx-side-active: rgba(255, 255, 255, .10);
    --rkx-side-text: #b8c3d6;
    --rkx-side-muted: #6f7e99;
    --rkx-side-line: rgba(255, 255, 255, .07);
    --rkx-accent: #63d84a;
    --rkx-primary: #2563eb;
    --rkx-primary-dark: #1d4ed8;
    --rkx-bg: #f3f5f9;
    --rkx-surface: #ffffff;
    --rkx-line: #e4e8ef;
    --rkx-ink: #0f172a;
    --rkx-text: #334155;
    --rkx-muted: #64748b;
    --rkx-side-w: 248px;
    --rkx-rail-w: 68px;
    --rkx-bar-h: 56px;
    --rkx-radius: 12px;
    --rkx-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body.rkx-body {
    font-family: var(--rkx-font);
    font-size: .9rem;
    color: var(--rkx-text);
    background: var(--rkx-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ---------------------------------------------------------
   2. APP SHELL
   --------------------------------------------------------- */

.rkx-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.rkx-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1040;
    width: var(--rkx-side-w);
    display: flex;
    flex-direction: column;
    background: var(--rkx-side-bg);
    color: var(--rkx-side-text);
    transition: width .2s ease, transform .22s ease;
}

.rkx-content {
    margin-left: var(--rkx-side-w);
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left .2s ease;
}

.rkx-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px 36px;
}

/* collapsed rail (desktop) */
.rkx-shell.is-collapsed .rkx-side {
    width: var(--rkx-rail-w);
}

.rkx-shell.is-collapsed .rkx-content {
    margin-left: var(--rkx-rail-w);
}

.rkx-backdrop {
    display: none;
}


/* ---------------------------------------------------------
   3. SIDEBAR NAVIGATION
   --------------------------------------------------------- */

.rkx-brand {
    flex: 0 0 var(--rkx-bar-h);
    height: var(--rkx-bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 20px;
    border-bottom: 1px solid var(--rkx-side-line);
}

    .rkx-brand a {
        font-size: 21px;
        font-weight: 800;
        letter-spacing: .3px;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
    }

    .rkx-brand .rk {
        color: var(--rkx-accent);
    }

.rkx-close {
    display: none;
    border: 0;
    background: transparent;
    color: var(--rkx-side-text);
    font-size: 22px;
    line-height: 1;
}

.rkx-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

    .rkx-nav::-webkit-scrollbar {
        width: 6px;
    }

    .rkx-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .18);
        border-radius: 6px;
    }

    .rkx-nav .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rkx-nav .nav-item {
        position: relative;
    }

    /* top level rows */
    .rkx-nav .rk-nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 12px !important;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 500;
        color: var(--rkx-side-text) !important;
        text-decoration: none;
        white-space: nowrap;
        transition: background .15s ease, color .15s ease;
    }

        .rkx-nav .rk-nav-link i {
            flex: 0 0 20px;
            font-size: 17px;
            text-align: center;
            color: var(--rkx-side-muted);
            transition: color .15s ease;
        }

        .rkx-nav .rk-nav-link:hover {
            background: var(--rkx-side-hover);
            color: #fff !important;
        }

            .rkx-nav .rk-nav-link:hover i {
                color: #fff;
            }

        .rkx-nav .rk-nav-link.active {
            background: var(--rkx-side-active);
            color: #fff !important;
        }

            .rkx-nav .rk-nav-link.active i {
                color: var(--rkx-accent);
            }

    /* group chevron (replaces bootstrap caret) */
    .rkx-nav .dropdown-toggle::after {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        margin: 0 4px 0 auto;
        border: 0;
        border-right: 1.6px solid var(--rkx-side-muted);
        border-bottom: 1.6px solid var(--rkx-side-muted);
        transform: rotate(45deg);
        transition: transform .2s ease;
    }

    .rkx-nav .nav-item.is-open > .dropdown-toggle::after {
        transform: rotate(-135deg);
    }

    /* sub menu */
    .rkx-nav .rk-dropdown {
        display: none;
        position: static;
        float: none;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: 2px 0 6px 21px;
        padding: 2px 0 2px 12px;
        background: transparent;
        border: 0;
        border-left: 1px solid var(--rkx-side-line);
        border-radius: 0;
        box-shadow: none;
        transform: none !important;
        overflow: visible;
    }

    .rkx-nav .nav-item.is-open > .rk-dropdown {
        display: block;
    }

    .rkx-nav .rk-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 10px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 400;
        color: var(--rkx-side-text);
        white-space: normal;
        line-height: 1.3;
    }

        .rkx-nav .rk-dropdown .dropdown-item i {
            flex: 0 0 16px;
            font-size: 14px;
            text-align: center;
            color: var(--rkx-side-muted);
        }

        .rkx-nav .rk-dropdown .dropdown-item:hover,
        .rkx-nav .rk-dropdown .dropdown-item:focus {
            background: var(--rkx-side-hover);
            color: #fff;
        }

        .rkx-nav .rk-dropdown .dropdown-item.active {
            background: var(--rkx-side-active);
            color: #fff;
            font-weight: 600;
        }

            .rkx-nav .rk-dropdown .dropdown-item.active i {
                color: var(--rkx-accent);
            }

    .rkx-nav .rk-dropdown .dropdown-divider {
        margin: 5px 6px;
        border-top: 1px solid var(--rkx-side-line);
        opacity: 1;
    }

    .rkx-nav .rk-dropdown .dropdown-header {
        padding: 8px 10px 3px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--rkx-side-muted);
    }

    .rkx-nav .rk-dropdown .dropdown-item-text {
        color: var(--rkx-side-text);
    }

.rkx-side-foot {
    flex: 0 0 auto;
    padding: 10px;
    border-top: 1px solid var(--rkx-side-line);
}

.rkx-collapse-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--rkx-side-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

    .rkx-collapse-btn:hover {
        background: var(--rkx-side-hover);
        color: #fff;
    }

    .rkx-collapse-btn i {
        flex: 0 0 20px;
        font-size: 16px;
        text-align: center;
        transition: transform .2s ease;
    }

/* collapsed rail: icons only */
.rkx-shell.is-collapsed .rkx-brand {
    justify-content: center;
    padding: 0;
}

    .rkx-shell.is-collapsed .rkx-brand .rkx-brand-rest {
        display: none;
    }

.rkx-shell.is-collapsed .rkx-nav .rk-nav-link {
    font-size: 0;
    justify-content: center;
    padding: 10px 0 !important;
}

    .rkx-shell.is-collapsed .rkx-nav .rk-nav-link i {
        flex: 0 0 auto;
        font-size: 19px;
    }

.rkx-shell.is-collapsed .rkx-nav .dropdown-toggle::after,
.rkx-shell.is-collapsed .rkx-nav .rk-dropdown {
    display: none !important;
}

.rkx-shell.is-collapsed .rkx-collapse-btn {
    font-size: 0;
    justify-content: center;
}

    .rkx-shell.is-collapsed .rkx-collapse-btn i {
        transform: rotate(180deg);
        font-size: 17px;
    }


/* ---------------------------------------------------------
   4. APP BAR
   --------------------------------------------------------- */

.rkx-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    flex: 0 0 var(--rkx-bar-h);
    height: var(--rkx-bar-h);
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 0 20px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rkx-line);
}

.rkx-burger {
    display: none;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rkx-line);
    border-radius: 9px;
    background: #fff;
    color: var(--rkx-ink);
    font-size: 20px;
    line-height: 1;
}

.rkx-bar-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--rkx-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rkx-bar-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rkx-bar .rk-right-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.rkx-bar .rk-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

    .rkx-bar .rk-quick-btn i {
        margin: 0 !important;
        font-size: 14px;
    }

.rkx-bar .rk-fy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

    .rkx-bar .rk-fy-btn i {
        margin: 0 !important;
    }

.rkx-bar .rk-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px 0 4px;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--rkx-ink);
}

.rkx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--rkx-side-bg);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.rkx-user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* dropdown panels used by the app bar */
.rkx-bar .rk-dropdown {
    min-width: 240px;
    max-width: 340px;
    max-height: min(70vh, 480px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--rkx-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}

    .rkx-bar .rk-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 13.5px;
    }

    .rkx-bar .rk-dropdown .dropdown-header {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--rkx-muted);
    }

/* signed-out pages */
.rkx-guest {
    display: flex;
    align-items: center;
    height: var(--rkx-bar-h);
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--rkx-line);
}

    .rkx-guest a {
        font-size: 21px;
        font-weight: 800;
        color: var(--rkx-ink);
        text-decoration: none;
    }

    .rkx-guest .rk {
        color: var(--rkx-accent);
    }


/* ---------------------------------------------------------
   5. RESPONSIVE
   --------------------------------------------------------- */

/* 15" laptops / zoomed browsers: keep the bar compact, labels off */
@media (max-width: 1279.98px) {
    .rkx-bar .rk-quick-btn span {
        display: none;
    }

    .rkx-bar .rk-quick-btn {
        padding: 6px 9px;
    }

    .rkx-main {
        padding: 16px 18px 32px;
    }
}

/* tablets and zoomed-in desktops: sidebar becomes a drawer */
@media (max-width: 991.98px) {
    .rkx-side {
        width: min(280px, 86vw);
        transform: translateX(-100%);
        box-shadow: none;
    }

    .rkx-shell.is-drawer-open .rkx-side {
        transform: none;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }

    .rkx-content,
    .rkx-shell.is-collapsed .rkx-content {
        margin-left: 0;
    }

    .rkx-shell.is-collapsed .rkx-side {
        width: min(280px, 86vw);
    }

    /* the rail state never applies to the drawer */
    .rkx-shell.is-collapsed .rkx-brand {
        justify-content: space-between;
        padding: 0 16px 0 20px;
    }

        .rkx-shell.is-collapsed .rkx-brand .rkx-brand-rest {
            display: inline;
        }

    .rkx-shell.is-collapsed .rkx-nav .rk-nav-link {
        font-size: 14px;
        justify-content: flex-start;
        padding: 9px 12px !important;
    }

        .rkx-shell.is-collapsed .rkx-nav .rk-nav-link i {
            flex: 0 0 20px;
            font-size: 17px;
        }

    .rkx-shell.is-collapsed .rkx-nav .dropdown-toggle::after {
        display: block !important;
    }

    .rkx-shell.is-collapsed .rkx-nav .nav-item.is-open > .rk-dropdown {
        display: block !important;
    }

    .rkx-shell.is-collapsed .rkx-collapse-btn {
        font-size: 13px;
        justify-content: flex-start;
    }

    .rkx-side-foot {
        display: none;
    }

    .rkx-close,
    .rkx-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .rkx-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
    }

    .rkx-shell.is-drawer-open .rkx-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .rkx-bar {
        padding: 0 14px;
    }
}

/* phones */
@media (max-width: 767.98px) {
    .rkx-bar .rk-quick-btn {
        display: none;
    }

    .rkx-user-name {
        display: none;
    }

    .rkx-bar .rk-user-btn {
        padding: 0 4px;
    }

    .rkx-main {
        padding: 12px 12px 28px;
    }
}

@media (max-width: 400px) {
    .rkx-bar-title {
        display: none;
    }

    .rkx-bar-actions {
        margin-left: auto;
    }
}


/* ---------------------------------------------------------
   6. GLOBAL COMPONENT POLISH  (every page)
   --------------------------------------------------------- */

.rkx-body h1, .rkx-body h2, .rkx-body h3,
.rkx-body h4, .rkx-body h5, .rkx-body h6 {
    color: var(--rkx-ink);
    letter-spacing: -.01em;
}

.rkx-body a {
    text-underline-offset: 2px;
}

/* cards */
.rkx-body .card {
    border: 1px solid var(--rkx-line);
    border-radius: var(--rkx-radius);
    background: var(--rkx-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.rkx-body .card-header {
    background: #fff;
    border-bottom: 1px solid var(--rkx-line);
    font-weight: 600;
    color: var(--rkx-ink);
}

.rkx-body .card-footer {
    background: #fafbfd;
    border-top: 1px solid var(--rkx-line);
}

/* buttons */
.rkx-body .btn {
    border-radius: 8px;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .rkx-body .btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
    }

.rkx-body .btn-primary {
    --bs-btn-bg: var(--rkx-primary);
    --bs-btn-border-color: var(--rkx-primary);
    --bs-btn-hover-bg: var(--rkx-primary-dark);
    --bs-btn-hover-border-color: var(--rkx-primary-dark);
    --bs-btn-active-bg: #1e40af;
    --bs-btn-active-border-color: #1e40af;
}

.rkx-body .btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--rkx-line);
}

/* forms */
.rkx-body .form-control,
.rkx-body .form-select {
    border: 1px solid #d3dae6;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--rkx-ink);
    background-color: #fff;
}

    .rkx-body .form-control:focus,
    .rkx-body .form-select:focus {
        border-color: var(--rkx-primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    }

    .rkx-body .form-control::placeholder {
        color: #9aa7ba;
    }

    .rkx-body .form-control:disabled,
    .rkx-body .form-control[readonly] {
        background-color: #f4f6fa;
    }

.rkx-body .form-label,
.rkx-body label.control-label {
    margin-bottom: 4px;
    font-size: .8rem;
    font-weight: 600;
    color: #475569;
}

.rkx-body .form-check-input:checked {
    background-color: var(--rkx-primary);
    border-color: var(--rkx-primary);
}

.rkx-body .input-group-text {
    border-color: #d3dae6;
    background: #f4f6fa;
    color: var(--rkx-muted);
}

.rkx-body .text-danger.field-validation-error,
.rkx-body .field-validation-error {
    font-size: .78rem;
}

/* tables */
.rkx-body .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: #fafbfd;
    --bs-table-hover-bg: #f5f8ff;
    --bs-table-border-color: var(--rkx-line);
    font-size: .875rem;
    color: var(--rkx-text);
}

    .rkx-body .table > :not(caption) > * > * {
        padding: .55rem .75rem;
    }

    .rkx-body .table:not(.table-dark) thead th {
        background: #f7f9fc;
        border-bottom: 1px solid var(--rkx-line);
        color: #526071;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rkx-body .table td.text-end,
    .rkx-body .table th.text-end,
    .rkx-body .table .rk-num {
        font-variant-numeric: tabular-nums;
    }

.rkx-body .table-responsive {
    border-radius: var(--rkx-radius);
}

/* badges + alerts */
.rkx-body .badge {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: .01em;
}

.rkx-body .alert {
    border-radius: 10px;
    border-width: 1px;
    font-size: .88rem;
}

/* dropdown menus (outside the sidebar) */
.rkx-body .dropdown-menu {
    border-radius: 10px;
    border-color: var(--rkx-line);
    font-size: .88rem;
}

.rkx-body .dropdown-item {
    border-radius: 7px;
}

/* modals */
.rkx-body .modal-content {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25);
}

.rkx-body .modal-header,
.rkx-body .modal-footer {
    border-color: var(--rkx-line);
}

/* pagination + tabs */
.rkx-body .page-link {
    border-color: var(--rkx-line);
    color: var(--rkx-text);
}

.rkx-body .page-item.active .page-link {
    background: var(--rkx-primary);
    border-color: var(--rkx-primary);
}

.rkx-body .nav-tabs .nav-link.active {
    color: var(--rkx-primary);
    font-weight: 600;
}

/* page background helper for pages that painted their own */
.rkx-body .container-fluid {
    max-width: 100%;
}

/* thin scrollbars in content */
.rkx-main * {
    scrollbar-width: thin;
}


/* ---------------------------------------------------------
   7. PRINT  (screens that print inside the layout)
   --------------------------------------------------------- */

@media print {
    .rkx-side,
    .rkx-bar,
    .rkx-backdrop,
    .rkx-guest {
        display: none !important;
    }

    .rkx-content {
        margin-left: 0 !important;
    }

    .rkx-main {
        padding: 0 !important;
    }

    body.rkx-body {
        background: #fff;
    }
}


/* =========================================================
   8. ADVANCED LOOK  (overrides earlier rules)
   Soft depth, glass app bar, accent glow, command palette
   ========================================================= */

:root {
    --rkx-accent-2: #4f46e5;
    --rkx-glow: 0 0 0 1px rgba(99, 216, 74, .25), 0 0 18px rgba(99, 216, 74, .25);
    --rkx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --rkx-shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -14px rgba(16, 24, 40, .16);
    --rkx-shadow-lg: 0 24px 60px -16px rgba(15, 23, 42, .35);
}

body.rkx-body {
    background: radial-gradient(1100px 420px at 88% -8%, rgba(79, 70, 229, .075), transparent 70%), radial-gradient(900px 380px at -8% 4%, rgba(99, 216, 74, .07), transparent 70%), #f4f6fb;
    background-attachment: fixed;
}

/* ---- sidebar ---- */
.rkx-side {
    background: radial-gradient(260px 200px at 0% 0%, rgba(99, 216, 74, .10), transparent 70%), linear-gradient(180deg, #0b1224 0%, #0f172a 55%, #111b36 100%);
    border-right: 1px solid rgba(255, 255, 255, .04);
}

.rkx-brand a {
    letter-spacing: .4px;
}

.rkx-brand .rk {
    text-shadow: 0 0 18px rgba(99, 216, 74, .55);
}

.rkx-nav .rk-nav-link {
    position: relative;
    border-radius: 10px;
}

    .rkx-nav .rk-nav-link.active {
        background: linear-gradient(90deg, rgba(99, 216, 74, .17), rgba(99, 216, 74, .03));
        color: #fff !important;
    }

        .rkx-nav .rk-nav-link.active::before {
            content: "";
            position: absolute;
            left: -10px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 4px 4px 0;
            background: var(--rkx-accent);
            box-shadow: 0 0 12px rgba(99, 216, 74, .8);
        }

.rkx-nav .rk-dropdown .dropdown-item.active {
    background: rgba(99, 216, 74, .12);
}

.rkx-nav .rk-dropdown {
    border-left-color: rgba(255, 255, 255, .10);
}

/* ---- app bar ---- */
.rkx-bar {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}

.rkx-titlewrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}

    .rkx-titlewrap .rkx-bar-title {
        flex: none;
        font-size: 15.5px;
        font-weight: 650;
        letter-spacing: -.01em;
    }

.rkx-crumb {
    display: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rkx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .rkx-crumb.has-text {
        display: block;
    }

.rkx-search {
    flex: 0 1 280px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid #dfe5ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    color: var(--rkx-muted);
    font-size: 13px;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .rkx-search:hover {
        border-color: #c4cee0;
        box-shadow: var(--rkx-shadow-sm);
    }

    .rkx-search i.bi-stars {
        color: var(--rkx-accent-2);
        font-size: 15px;
    }

    .rkx-search span {
        flex: 1 1 auto;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.rkx-kbd {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid #dfe5ef;
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #f7f9fc;
    color: #64748b;
    font-family: var(--rkx-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.rkx-avatar {
    background: linear-gradient(135deg, #4f46e5, #2563eb 55%, #0ea5e9);
    box-shadow: 0 2px 6px rgba(37, 99, 235, .35);
}

.rkx-bar .rk-user-btn {
    border-color: #dfe5ef;
    transition: box-shadow .15s ease;
}

    .rkx-bar .rk-user-btn:hover {
        box-shadow: var(--rkx-shadow-sm);
    }

/* ---- content surfaces ---- */
.rkx-body .card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 14px;
    box-shadow: var(--rkx-shadow-md);
}

.rkx-body .btn-primary {
    --bs-btn-bg: #2563eb;
    --bs-btn-border-color: transparent;
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-color: transparent;
    box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55);
}

    .rkx-body .btn-primary:hover {
        background-image: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%);
        box-shadow: 0 8px 18px -6px rgba(37, 99, 235, .6);
    }

.rkx-body .btn-success {
    background-image: linear-gradient(135deg, #16a34a, #15803d);
    border-color: transparent;
    box-shadow: 0 6px 14px -8px rgba(22, 163, 74, .6);
}

.rkx-body .btn-danger {
    background-image: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
}

.rkx-body .table:not(.table-dark) tbody tr {
    transition: background-color .12s ease;
}

.rkx-body .table-responsive {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: var(--rkx-shadow-sm);
}

    .rkx-body .table-responsive > .table {
        margin-bottom: 0;
    }

.rkx-body .badge.bg-success {
    background-color: #dcfce7 !important;
    color: #15803d !important;
}

.rkx-body .badge.bg-danger {
    background-color: #fee2e2 !important;
    color: #b91c1c !important;
}

.rkx-body .badge.bg-warning {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

.rkx-body .badge.bg-primary {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
}

.rkx-body .badge.bg-secondary {
    background-color: #eef1f6 !important;
    color: #475569 !important;
}

.rkx-body .badge.bg-info {
    background-color: #cffafe !important;
    color: #0e7490 !important;
}

/* focus ring everywhere */
.rkx-body a:focus-visible,
.rkx-body button:focus-visible,
.rkx-body [tabindex]:focus-visible {
    outline: 2px solid rgba(79, 70, 229, .55);
    outline-offset: 2px;
}

/* gentle entrance for each page */
@keyframes rkxRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rkx-main > * {
    animation: rkxRise .38s cubic-bezier(.2, .7, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .rkx-main > * {
        animation: none;
    }

    .rkx-side, .rkx-content {
        transition: none;
    }
}

/* ---- command palette ---- */
.rkx-pal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    background: rgba(8, 13, 28, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .rkx-pal.is-open {
        display: flex;
        animation: rkxFadeIn .14s ease both;
    }

@keyframes rkxFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.rkx-pal-box {
    width: min(620px, 100%);
    max-height: min(520px, 76vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--rkx-shadow-lg);
    animation: rkxRise .18s ease both;
}

.rkx-pal-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-bottom: 1px solid var(--rkx-line);
}

    .rkx-pal-input i {
        font-size: 18px;
        color: var(--rkx-accent-2);
    }

    .rkx-pal-input input {
        flex: 1 1 auto;
        height: 54px;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 16px;
        color: var(--rkx-ink);
    }

        .rkx-pal-input input::placeholder {
            color: #9aa7ba;
        }

.rkx-pal-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px;
}

.rkx-pal-group {
    padding: 10px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.rkx-pal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--rkx-ink);
    font-size: 14px;
    text-align: left;
}

    .rkx-pal-item i {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #eef2fb;
        color: #4f46e5;
        font-size: 15px;
    }

    .rkx-pal-item .t {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .rkx-pal-item .g {
        flex: 0 0 auto;
        font-size: 11.5px;
        color: #94a3b8;
    }

    .rkx-pal-item.is-active {
        background: #eef2ff;
    }

        .rkx-pal-item.is-active i {
            background: #4f46e5;
            color: #fff;
        }

.rkx-pal-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 14px;
    color: var(--rkx-muted);
}

.rkx-pal-foot {
    display: flex;
    gap: 16px;
    padding: 9px 14px;
    border-top: 1px solid var(--rkx-line);
    background: #fafbfd;
    font-size: 11.5px;
    color: var(--rkx-muted);
}

    .rkx-pal-foot .rkx-kbd {
        margin-right: 4px;
    }

@media (max-width: 1199.98px) {
    .rkx-search {
        flex: 0 0 auto;
        width: 36px;
        padding: 0;
        justify-content: center;
    }

        .rkx-search span,
        .rkx-search .rkx-kbd {
            display: none;
        }
}

@media (max-width: 575.98px) {
    .rkx-pal {
        padding-top: 8vh;
    }

    .rkx-pal-foot {
        display: none;
    }
}

@media print {
    .rkx-pal {
        display: none !important;
    }
}


/* =========================================================
   9. TABLE ENGINE  (rk-tables.js)
   ========================================================= */

.rkx-th {
    white-space: nowrap;
}

.rkx-sortable {
    cursor: pointer;
    user-select: none;
}

    .rkx-sortable:hover {
        background: #eef2fb !important;
    }

.rkx-th-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.rkx-sort-i {
    font-size: 11px;
    color: #b4bfd0;
    transition: color .12s ease;
}

.rkx-sortable:hover .rkx-sort-i {
    color: #64748b;
}

.rkx-sortable.is-sorted .rkx-sort-i {
    color: #4f46e5;
    font-size: 12px;
}

.rkx-fbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #b4bfd0;
    font-size: 10.5px;
    opacity: .0;
    transition: opacity .12s ease, background .12s ease, color .12s ease;
}

    .rkx-th:hover .rkx-fbtn,
    .rkx-fbtn:focus-visible,
    .rkx-fbtn.is-on {
        opacity: 1;
    }

    .rkx-fbtn:hover {
        background: #e2e8f5;
        color: #475569;
    }

    .rkx-fbtn.is-on {
        background: #e0e7ff;
        color: #4f46e5;
    }

@media (hover: none) {
    .rkx-fbtn {
        opacity: 1;
    }
}

/* rows hidden by filters / paging */
tr.rkx-hide,
tr.rkx-pg {
    display: none !important;
}

tr.rkx-empty td {
    padding: 28px 12px !important;
    text-align: center;
    color: var(--rkx-muted);
    background: #fff !important;
}

tr.rkx-empty i {
    margin-right: 6px;
}

/* ---- toolbar ---- */
.rkx-tt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 10px;
}

.rkx-tt-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    min-width: 0;
}

.rkx-tt-right {
    margin-left: auto;
}

.rkx-tt-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

    .rkx-tt-search i {
        position: absolute;
        left: 11px;
        font-size: 13px;
        color: #94a3b8;
        pointer-events: none;
    }

    .rkx-tt-search input {
        width: 230px;
        max-width: 100%;
        height: 34px;
        padding: 0 10px 0 32px;
        border: 1px solid #d3dae6;
        border-radius: 9px;
        background: #fff;
        font-size: 13px;
        color: var(--rkx-ink);
    }

        .rkx-tt-search input:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
            outline: 0;
        }

.rkx-tt-date {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d3dae6;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
}

    .rkx-tt-date > i {
        color: #94a3b8;
        font-size: 13px;
    }

    .rkx-tt-date input[type="date"] {
        height: 26px;
        padding: 0 4px;
        border: 0;
        border-radius: 6px;
        background: #f4f6fa;
        font-size: 12.5px;
        color: var(--rkx-ink);
    }

.rkx-tt-lbl {
    color: var(--rkx-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

.rkx-tt-sel {
    height: 26px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: #f4f6fa;
    font-size: 12.5px;
    color: var(--rkx-ink);
}

.rkx-tt-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fff5f5;
    color: #b91c1c;
    font-size: 12.5px;
    font-weight: 600;
}

    .rkx-tt-clear[hidden] {
        display: none;
    }

    .rkx-tt-clear:hover {
        background: #fee2e2;
    }

.rkx-tt-count {
    font-size: 12.5px;
    color: var(--rkx-muted);
    white-space: nowrap;
}

    .rkx-tt-count b {
        color: var(--rkx-ink);
    }

.rkx-tt-size {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: var(--rkx-muted);
}

    .rkx-tt-size .rkx-tt-sel {
        border: 1px solid #d3dae6;
        background: #fff;
        height: 32px;
    }

.rkx-tt-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid #d3dae6;
    border-radius: 9px;
    background: #fff;
    color: var(--rkx-ink);
    font-size: 12.5px;
    font-weight: 600;
}

    .rkx-tt-export:hover {
        border-color: #4f46e5;
        color: #4f46e5;
    }

.rkx-tt-sums {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -2px 0 10px;
}

    .rkx-tt-sums[hidden] {
        display: none;
    }

.rkx-chip {
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

    .rkx-chip b {
        margin-left: 4px;
        color: #1e1b4b;
    }

/* ---- pager ---- */
.rkx-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

    .rkx-pager[hidden] {
        display: none;
    }

.rkx-pg-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d3dae6;
    border-radius: 8px;
    background: #fff;
    color: var(--rkx-text);
    font-size: 13px;
}

    .rkx-pg-btn:hover:not(:disabled) {
        border-color: #4f46e5;
        color: #4f46e5;
    }

    .rkx-pg-btn.is-on {
        border-color: transparent;
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #fff;
        font-weight: 600;
    }

    .rkx-pg-btn:disabled {
        opacity: .4;
    }

.rkx-pg-gap {
    padding: 0 4px;
    color: #94a3b8;
}

/* ---- column popover ---- */
.rkx-pop {
    position: fixed;
    z-index: 2500;
    width: 292px;
    max-width: calc(100vw - 16px);
    max-height: min(78vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 54px -14px rgba(15, 23, 42, .35);
    font-size: 13px;
    color: var(--rkx-text);
    text-transform: none;
    letter-spacing: normal;
    animation: rkxRise .14s ease both;
}

.rkx-pop-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px 14px;
    color: var(--rkx-ink);
}

.rkx-pop-x {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
}

    .rkx-pop-x:hover {
        color: var(--rkx-ink);
    }

.rkx-pop-sort {
    display: flex;
    gap: 6px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--rkx-line);
}

.rkx-pop-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d3dae6;
    border-radius: 8px;
    background: #fff;
    color: var(--rkx-text);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

    .rkx-pop-btn:hover {
        border-color: #4f46e5;
        color: #4f46e5;
    }

    .rkx-pop-btn.is-on {
        border-color: #4f46e5;
        background: #eef2ff;
        color: #3730a3;
    }

.rkx-pop-b {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px;
}

.rkx-pop label {
    display: block;
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

.rkx-pop input[type="text"],
.rkx-pop input[type="number"],
.rkx-pop input[type="date"],
.rkx-pop input[type="search"],
.rkx-pop select {
    width: 100%;
    height: 32px;
    margin-top: 3px;
    padding: 0 9px;
    border: 1px solid #d3dae6;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--rkx-ink);
}

    .rkx-pop input:focus,
    .rkx-pop select:focus {
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
        outline: 0;
    }

.rkx-pop-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.rkx-pop-field {
    margin-bottom: 4px;
}

.rkx-pop-sub {
    margin: 12px 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.rkx-pop-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rkx-chipbtn {
    padding: 3px 9px;
    border: 1px solid #d3dae6;
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--rkx-text);
}

    .rkx-chipbtn:hover {
        border-color: #4f46e5;
        background: #eef2ff;
        color: #3730a3;
    }

.rkx-pop-list {
    margin-top: 12px;
}

.rkx-pop-ctl {
    display: flex;
    gap: 14px;
    margin: 6px 0 2px;
}

.rkx-link {
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
}

.rkx-pop-checks {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 4px;
    border: 1px solid var(--rkx-line);
    border-radius: 10px;
}

.rkx-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--rkx-text) !important;
    cursor: pointer;
}

    .rkx-check[hidden] {
        display: none !important;
    }

    .rkx-check:hover {
        background: #f5f7fb;
    }

    .rkx-check input {
        flex: 0 0 auto;
        margin: 0;
    }

.rkx-check-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rkx-check-n {
    flex: 0 0 auto;
    font-size: 11px;
    color: #94a3b8;
}

.rkx-pop-f {
    display: flex;
    padding: 10px 12px;
    border-top: 1px solid var(--rkx-line);
    background: #fafbfd;
}

@media (max-width: 767.98px) {
    .rkx-tt-search input {
        width: 100%;
    }

    .rkx-tt-search {
        flex: 1 1 100%;
    }

    .rkx-tt-date {
        flex-wrap: wrap;
        height: auto;
        padding: 6px 8px;
    }

    .rkx-tt-right {
        margin-left: 0;
    }
}

@media print {
    .rkx-tt, .rkx-tt-sums, .rkx-pager, .rkx-pop, .rkx-th-tools {
        display: none !important;
    }

    tr.rkx-hide {
        display: none !important;
    }

    tr.rkx-pg {
        display: table-row !important;
    }
}

.rkx-pop,
.rkx-pop *,
.rkx-tt,
.rkx-tt *,
.rkx-pager,
.rkx-pager * {
    box-sizing: border-box;
}


/* =========================================================
   10. PAGE COMPONENTS  (shared by the redesigned pages)
   .pg  page wrapper      .pg-head  title row
   .pg-kpis / .pg-kpi     summary cards
   .pg-card               white panel (+ .pg-card-h header)
   .pg-chips              segmented filter
   .pg-table              data table      .pg-pill  status
   .pg-ibtn               icon button     .pg-empty empty state
   ========================================================= */

.pg {
    --pg-ink: #0f172a;
    --pg-text: #334155;
    --pg-muted: #64748b;
    --pg-line: rgba(15, 23, 42, .07);
    --pg-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -16px rgba(16, 24, 40, .18);
    max-width: 1500px;
    margin: 0 auto;
    color: var(--pg-text);
}

    .pg .num {
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum";
    }

/* ---- title row ---- */
.pg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 18px;
}

    .pg-head h1 {
        margin: 0;
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        font-weight: 750;
        letter-spacing: -.025em;
        color: var(--pg-ink);
    }

    .pg-head p {
        margin: 3px 0 0;
        font-size: .9rem;
        color: var(--pg-muted);
    }

.pg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid #d3dae6;
    border-radius: 10px;
    background: #fff;
    color: var(--pg-ink);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .pg-btn:hover {
        border-color: #4f46e5;
        color: #4f46e5;
    }

    .pg-btn.is-primary {
        border-color: transparent;
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #fff;
        box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6);
    }

        .pg-btn.is-primary:hover {
            color: #fff;
            transform: translateY(-1px);
        }

    .pg-btn.is-sm {
        height: 32px;
        padding: 0 12px;
        font-size: .8rem;
    }

/* ---- summary cards ---- */
.pg-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.pg-kpi {
    position: relative;
    padding: 15px 16px 13px;
    overflow: hidden;
    border: 1px solid var(--pg-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--pg-shadow);
}

    .pg-kpi::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--c, #4f46e5);
        opacity: .9;
    }

.pg-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pg-kpi-label {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--pg-muted);
}

.pg-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--cs, #e0e7ff);
    color: var(--c, #4f46e5);
    font-size: 16px;
}

.pg-kpi-val {
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 750;
    letter-spacing: -.025em;
    color: var(--pg-ink);
    white-space: nowrap;
}

.pg-kpi-note {
    margin-top: 2px;
    font-size: .8rem;
    color: var(--pg-muted);
}

/* ---- panel ---- */
.pg-card {
    min-width: 0;
    border: 1px solid var(--pg-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--pg-shadow);
}

.pg-card-h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 18px 12px;
}

.pg-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--pg-ink);
}

.pg-sub {
    margin-top: 1px;
    font-size: .78rem;
    color: var(--pg-muted);
}

.pg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
}

.pg-card-h > div {
    min-width: 0;
}

.pg-search {
    position: relative;
    display: flex;
    align-items: center;
}

    .pg-search i {
        position: absolute;
        left: 12px;
        font-size: 13px;
        color: #94a3b8;
        pointer-events: none;
    }

    .pg-search input {
        width: 250px;
        max-width: 100%;
        height: 36px;
        padding: 0 12px 0 34px;
        border: 1px solid #d3dae6;
        border-radius: 10px;
        background: #fff;
        font-size: .86rem;
        color: var(--pg-ink);
    }

        .pg-search input:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
            outline: 0;
        }

/* segmented filter */
.pg-chips {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: #eef1f6;
}

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pg-muted);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}

    .pg-chip:hover {
        color: var(--pg-ink);
    }

    .pg-chip.is-on {
        background: #fff;
        color: var(--pg-ink);
        box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    }

    .pg-chip b {
        padding: 1px 7px;
        border-radius: 999px;
        background: #e2e8f0;
        font-size: .72rem;
        font-weight: 700;
        color: #475569;
    }

    .pg-chip.is-on b {
        background: #e0e7ff;
        color: #3730a3;
    }

/* ---- table ---- */
.pg-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pg-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .875rem;
    color: var(--pg-text);
}

    .pg-table thead th {
        padding: 10px 14px;
        border-top: 1px solid var(--pg-line);
        border-bottom: 1px solid var(--pg-line);
        background: #f7f9fc;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        text-align: left;
        color: #526071;
    }

        .pg-table thead th.text-end {
            text-align: right;
        }

        .pg-table thead th:first-child,
        .pg-table tbody td:first-child {
            padding-left: 18px;
        }

        .pg-table thead th:last-child,
        .pg-table tbody td:last-child {
            padding-right: 18px;
        }

    .pg-table tbody td {
        padding: 11px 14px;
        border-bottom: 1px solid #eef1f6;
        vertical-align: middle;
    }

    .pg-table tbody tr {
        transition: background-color .12s ease;
    }

        .pg-table tbody tr:hover {
            background: #f6f8ff;
        }

        .pg-table tbody tr:last-child td {
            border-bottom: 0;
        }

    .pg-table .text-end {
        text-align: right;
    }

    .pg-table .nowrap {
        white-space: nowrap;
    }

.pg-link {
    font-weight: 700;
    color: var(--pg-ink);
    text-decoration: none;
}

    .pg-link:hover {
        color: #4f46e5;
        text-decoration: underline;
    }

.pg-muted {
    color: #94a3b8;
}

.pg-party {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e7ff, #dbeafe);
    color: #3730a3;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pg-party span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* status pills */
.pg-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
}

    .pg-pill::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .pg-pill.ok {
        background: #dcfce7;
        color: #15803d;
    }

    .pg-pill.warn {
        background: #fef3c7;
        color: #b45309;
    }

    .pg-pill.bad {
        background: #fee2e2;
        color: #b91c1c;
    }

    .pg-pill.info {
        background: #e0e7ff;
        color: #3730a3;
    }

    .pg-pill.muted {
        background: #eef1f6;
        color: #64748b;
    }

/* row buttons */
.pg-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

    .pg-row-actions form {
        display: inline-flex;
        margin: 0;
    }

.pg-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e1e6ef;
    border-radius: 9px;
    background: #fff;
    color: #64748b;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}

    .pg-ibtn:hover {
        border-color: #4f46e5;
        background: #eef2ff;
        color: #4f46e5;
    }

    .pg-ibtn.is-danger:hover {
        border-color: #ef4444;
        background: #fef2f2;
        color: #dc2626;
    }

/* empty state */
.pg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 46px 20px 52px;
    text-align: center;
}

    .pg-empty[hidden] {
        display: none;
    }

    .pg-empty .pg-ic {
        width: 54px;
        height: 54px;
        margin-bottom: 14px;
        border-radius: 16px;
        font-size: 24px;
    }

    .pg-empty h3 {
        margin: 0 0 4px;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--pg-ink);
    }

    .pg-empty p {
        margin: 0 0 14px;
        font-size: .88rem;
        color: var(--pg-muted);
    }

/* footer strip */
.pg-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    padding: 12px 18px;
    border-top: 1px solid var(--pg-line);
    border-radius: 0 0 16px 16px;
    background: #fafbfd;
    font-size: .84rem;
    color: var(--pg-muted);
}

    .pg-foot strong {
        color: var(--pg-ink);
    }

/* table-engine pieces sitting inside a panel */
.pg-card > .rkx-tt,
.pg-card > .rkx-tt-sums,
.pg-card > .rkx-pager {
    margin-left: 18px;
    margin-right: 18px;
}

.pg-card > .rkx-pager {
    margin-bottom: 12px;
}

@media (max-width: 1199.98px) {
    .pg-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pg-head {
        align-items: flex-start;
    }

    .pg-actions {
        width: 100%;
    }

        .pg-actions .pg-btn {
            flex: 1 1 auto;
            justify-content: center;
        }

    .pg-toolbar {
        width: 100%;
    }

    .pg-search {
        flex: 1 1 100%;
    }

        .pg-search input {
            width: 100%;
        }

    .pg-chips {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .pg-chips::-webkit-scrollbar {
            display: none;
        }
}

@media (max-width: 479.98px) {
    .pg-kpis {
        grid-template-columns: 1fr;
    }
}

@media print {
    .pg-actions, .pg-toolbar, .pg-row-actions {
        display: none !important;
    }
}