/* style.css — Kanjo Ops Global Styles */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700;900&display=swap');

body { font-family: 'Cairo', sans-serif; -webkit-tap-highlight-color: transparent; }

.toast-animate { animation: slideIn 0.3s ease-out forwards; }

@keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.pulse-live { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.break-words-custom { word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; }

input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }

/* The opt-out keeps deliberate scrollbar hiding (e.g. the horizontal chip
   strips). It must use !important so it still wins over the branded rules,
   which share its specificity and are declared later in this file — except for
   the modal bodies, which intentionally opt back in (see below). */
.hide-scrollbar::-webkit-scrollbar { display: none !important; }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* —— Branded scrollbar INSIDE scrollable containers (royal purple #4B0082) ——
   The bar belongs on the popups' own scroll areas (Black Box, Contracts, …),
   NOT on the window edge, so the old `*` selector is gone. These selectors
   target modal/scroll bodies specifically. Those containers also carry
   `.hide-scrollbar`; because this block is declared AFTER that opt-out and
   shares its specificity, the branded bar wins for any element that is BOTH
   `.overflow-y-auto` and `.hide-scrollbar` — i.e. the actual modal lists.
   `.overflow-x-auto` chip strips are intentionally left out so they stay
   scrollbar-free. */
.modal-body::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    display: block !important;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.03) !important;
}

.modal-body::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb {
    background-color: #4B0082 !important;
    border-radius: 10px !important;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.modal-body::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover { background-color: #230535 !important; }

.modal-body::-webkit-scrollbar-corner,
.overflow-auto::-webkit-scrollbar-corner,
.overflow-y-auto::-webkit-scrollbar-corner,
.offcanvas-body::-webkit-scrollbar-corner { background: transparent; }

/* Firefox equivalent. */
.modal-body,
.overflow-auto,
.overflow-y-auto,
.offcanvas-body { scrollbar-width: thin; scrollbar-color: #4B0082 rgba(0, 0, 0, 0.03); }

/* —— System-backfilled reports ——
   Visits restored by the automated backfill are genuine, but must be visually
   distinct from a rep's own field notes: tinted surface, dashed border, muted
   italic body and a gear "System Note" pill beside the author. */
.system-generated-report {
    background: rgba(103, 58, 183, 0.05) !important;
    border-style: dashed !important;
    border-color: rgba(103, 58, 183, 0.35) !important;
    color: #64748b;
    font-style: italic;
}

.system-generated-report .text-slate-700,
.system-generated-report .text-slate-800,
.system-generated-report .text-slate-900 {
    color: #64748b !important;
}

.system-generated-report .system-report-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin-inline-start: 6px;
    font-style: normal;
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    color: #4B0082;
    background: rgba(103, 58, 183, 0.12);
    border: 1px solid rgba(103, 58, 183, 0.25);
    border-radius: 999px;
    padding: 3px 7px;
    white-space: nowrap;
}

/* —— Sticky modal headers ——
   Long modals keep their title + close button pinned while the body scrolls.
   The negative margins cancel the card's p-5/sm:p-7 padding so the pinned
   header sits flush against the card's top edge with no gap. */
.kanjo-sticky-modal-header { position: sticky; top: 0; z-index: 20; background: #fff; }

.highlight-task { animation: highlightAnim 2s ease-out; }

@keyframes highlightAnim {
    0% { box-shadow: 0 0 0 4px #8B5CF6, 0 0 20px rgba(139, 92, 246, 0.5); transform: scale(1.02); }
    100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

@keyframes kangarooHop {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.05); }
}

.kangaroo-jumping {
    animation: kangarooHop 0.6s infinite ease-in-out;
}

@keyframes progressFill {
    0% { width: 5%; }
    100% { width: 100%; }
}

.kanjo-progress-bar {
    animation: progressFill 0.8s linear forwards;
}

/* —— Kanjo branded loaders (pure CSS/SVG, zero image weight) ——
   Purple #230535 · Gold #FFD700 · Warm Orange #E57723 */
@keyframes kanjoSpin { to { transform: rotate(360deg); } }

@keyframes kanjoPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.kanjo-loader {
    --kanjo-loader-size: 64px;
    width: var(--kanjo-loader-size);
    height: var(--kanjo-loader-size);
    border-radius: 50%;
    border: 6px solid rgba(35, 5, 53, 0.12);
    border-top-color: #230535;
    border-right-color: #E57723;
    border-bottom-color: #FFD700;
    animation: kanjoSpin 0.9s linear infinite;
}

.kanjo-loader-ring {
    position: relative;
    width: 70px;
    height: 70px;
}

.kanjo-loader-ring::before,
.kanjo-loader-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 5px solid transparent;
}

.kanjo-loader-ring::before {
    inset: 0;
    border-top-color: #230535;
    border-right-color: #E57723;
    animation: kanjoSpin 1s linear infinite;
}

.kanjo-loader-ring::after {
    inset: 11px;
    border-bottom-color: #FFD700;
    animation: kanjoSpin 0.8s linear infinite reverse;
}

.kanjo-loader-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #230535;
    animation: kanjoPulse 1.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .kanjo-loader,
    .kanjo-loader-ring::before,
    .kanjo-loader-ring::after,
    .kanjo-loader-dot {
        animation-duration: 2.4s;
    }
}

/* —— أزرار تسجيل الزيارة الميدانية —— */
.visit-control-wrap { position: relative; }

.visit-btn {
    border: none;
    color: #fff;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    will-change: transform;
}

.visit-btn:active:not(:disabled) { transform: scale(0.97); }

.visit-btn-start {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}

.visit-btn-start:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.35);
}

.visit-btn-end {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.28);
    animation: visitEndGlow 1.6s ease-in-out infinite;
}

.visit-btn-end:hover:not(:disabled) {
    filter: brightness(1.05);
}

.visit-btn-loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    box-shadow: none !important;
    animation: none !important;
}

.visit-wrap-busy { pointer-events: none; }

.visit-status-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 11px;
    font-weight: 800;
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
}

.visit-status-active {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

.visit-pulse-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 9999px;
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55);
    animation: visitPulseDot 1.2s infinite;
    flex-shrink: 0;
}

.visit-btn-success-flash {
    animation: visitSuccessFlash 0.7s ease;
}

@keyframes visitPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes visitEndGlow {
    0%, 100% { box-shadow: 0 8px 18px rgba(220, 38, 38, 0.28); }
    50% { box-shadow: 0 10px 24px rgba(220, 38, 38, 0.45); }
}

@keyframes visitSuccessFlash {
    0% { transform: scale(0.96); filter: brightness(1.15); }
    100% { transform: scale(1); filter: brightness(1); }
}

@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
    button { touch-action: manipulation; }
}

/* —— عقد احترافي: حاوية القالب —— */
#contract-template-container {
    background: #ffffff;
    direction: rtl;
    text-align: justify;
    font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
    color: #1f2937;
    line-height: 1.9;
}

/* —— مستند العقد —— */
.contract-document {
    background: #ffffff;
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 56px;
    font-size: 14px;
    position: relative;
}

/* —— ترويسة العقد —— */
.contract-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 3px solid #F59E0B;
    margin-bottom: 28px;
}

.contract-logo {
    max-height: 90px;
    max-width: 160px;
    object-fit: contain;
}

.contract-ref {
    text-align: left;
    direction: ltr;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.7;
}

.contract-ref strong {
    color: #4B0082;
}

/* —— عنوان العقد —— */
.contract-title {
    font-size: 28px;
    font-weight: 900;
    color: #4B0082;
    text-align: center;
    margin: 8px 0 6px;
    letter-spacing: 0.5px;
}

.contract-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #F59E0B;
    text-align: center;
    margin: 0 0 28px;
    letter-spacing: 1px;
}

.contract-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0;
}

.contract-divider::before,
.contract-divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F59E0B, transparent);
}

.contract-divider span {
    color: #4B0082;
    font-weight: 700;
}

/* —— فقرات وبنود —— */
.contract-clause {
    margin-bottom: 20px;
}

.contract-clause-body {
    padding-right: 16px;
    color: #374151;
}

.contract-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 20px;
    font-size: 13.5px;
}

.contract-data-table th,
.contract-data-table td {
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    text-align: right;
}

.contract-data-table th {
    background: #4B0082;
    color: #ffffff;
    font-weight: 800;
    width: 30%;
}

.contract-data-table td {
    background: #ffffff;
    color: #1f2937;
}

.contract-data-table tr:nth-child(even) td {
    background: #fbf7ff;
}

/* —— توقيعات الطرفين —— */
.contract-signatures {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin-top: 48px;
    padding-top: 20px;
    border-top: 2px solid #F59E0B;
}

.contract-signature-box {
    flex: 1;
    text-align: center;
}

.contract-signature-box .signature-line {
    height: 42px;
    border-bottom: 2px dashed #9ca3af;
    margin-bottom: 10px;
}

.contract-signature-box strong {
    display: block;
    color: #4B0082;
    font-size: 15px;
}

.contract-signature-box span {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-top: 4px;
}

/* —— تذييل العقد —— */
.contract-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.7;
}

.contract-footer strong {
    color: #4B0082;
}

.contract-footer .gold {
    color: #F59E0B;
}

/* —— قواعد عقد الاحترافي الأساسية —— */
#contract-template-container { background-color: #ffffff; color: #1e293b; font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif; direction: rtl; text-align: justify; line-height: 1.6; }

.contract-document { padding: 24px; background: #fff; }

.contract-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #4B0082; padding-bottom: 10px; margin-bottom: 16px; }

.contract-title { text-align: center; font-size: 18px; font-weight: 900; color: #4B0082; margin-bottom: 14px; }

.contract-parties { background-color: #F8F9FA; border: 1px solid #E2E8F0; padding: 12px; border-radius: 8px; margin-bottom: 12px; }

.contract-clause-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #4B0082;
    background-color: #F5F3FF;
    padding: 6px 10px;
    border-right: 4px solid #F59E0B;
    border-radius: 0 6px 6px 0;
    margin-top: 12px;
    margin-bottom: 7px;
    line-height: 1.5;
}

.contract-text { font-size: 12.5px; line-height: 1.7; margin-bottom: 10px; padding-right: 4px; }

.contract-clause-wrapper { page-break-inside: avoid; break-inside: avoid; margin-bottom: 35px; }

.contract-final-block { page-break-inside: avoid; break-inside: avoid; margin-top: 15px; }

.contract-serial-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #F59E0B;
    background-color: #F5F3FF;
    border: 1px solid #F59E0B;
    border-radius: 9999px;
    padding: 2px 10px;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.contract-serial-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #F59E0B;
    background-color: #F5F3FF;
    border: 1px solid #F59E0B;
    border-radius: 9999px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.contract-signatures { display: table; width: 100%; margin-top: 30px; }

.contract-sign-box { display: table-cell; width: 50%; text-align: center; font-weight: bold; }

/* —— الطباعة عبر window.print() —— */
@media print {
    /* 15mm side/top margin and an 18mm bottom margin give the centered page
       number plenty of safe space. Chrome 131+/Safari 18.2+ natively render
       @page margin boxes and, once one is defined, suppress the browser's own
       header/footer (URL, date, corner page count). */
    @page {
        size: A4;
        margin: 15mm 15mm 18mm;

        @bottom-center {
            content: "صفحة " counter(page) " من " counter(pages);
            font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
            font-size: 10pt;
            font-weight: 700;
            color: #4B0082;
            vertical-align: middle;
        }
    }

    body * {
        visibility: hidden !important;
    }

    #contract-template-container,
    #contract-template-container * {
        visibility: visible !important;
    }

    #contract-template-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
        color: #1e293b;
        font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
        direction: rtl;
        text-align: justify;
        line-height: 1.8;
        overflow: visible !important;
        z-index: 999999 !important;
    }

    .contract-document {
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 10px !important;
    }

    .contract-clause-wrapper,
    .contract-final-block {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .contract-header,
    .contract-parties,
    .contract-clause-title,
    .contract-text,
    .contract-signatures,
    .contract-contact-footer,
    .contract-footer {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* —— "النسخة النهائية": مظهر مستند قانوني رسمي مطبوع —— */
    #contract-template-container,
    #contract-template-container .contract-document {
        font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif !important;
        color: #111827;
        line-height: 1.8;
    }

    #contract-template-container .contract-document {
        font-size: 13.5px;
    }

    #contract-template-container .contract-clause-title {
        font-size: 16px !important;
        font-weight: 800 !important;
        text-align: right !important;
        color: #3B0764 !important;
        background: #F5F3FF !important;
        border-right: 4px solid #B45309 !important;
        border-bottom: 1px solid #C4B5FD !important;
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    #contract-template-container .contract-clause-wrapper {
        margin-bottom: 18px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #contract-template-container .contract-text {
        font-weight: 600 !important;
        text-align: justify !important;
        text-justify: inter-word;
        color: #1F2937 !important;
        line-height: 1.8 !important;
    }

    header,
    nav,
    .navbar,
    footer,
    #loginSection,
    #accountingSection,
    #financialAccountingSection,
    #dashboardSection,
    #taskFormWrapper,
    #contractPreviewModal,
    #contractsManagerModal,
    #contractsNavBtnWrapper,
    #userInfo,
    #notificationsWrapper,
    #quickLinksModal,
    #detailsModal,
    #archiveReportModal,
    #viewArchivedReportsModal,
    #merchantProfileModal,
    #transferModal,
    #adminTransferModal,
    #exportModal,
    #deleteModal,
    #editModal,
    #financialProfileModal,
    #reportModal,
    .modal,
    .fixed,
    .sticky {
        display: none !important;
    }
}

.catalog-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.catalog-card-grid.catalog-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.catalog-merchant-card {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.12);
    border-radius: 1.25rem;
    padding: 1.15rem 1rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 4px 14px rgba(35, 5, 53, 0.06);
}

/* Stable hover cue only — never move/scale the card, otherwise the cursor can
   fall outside the element and produce a hover enter/leave jitter loop. */
.catalog-merchant-card:hover {
    border-color: #FFD700;
    box-shadow: 0 14px 28px rgba(35, 5, 53, 0.16);
}

.catalog-product-card {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.1);
    border-radius: 1.15rem;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Stable hover cue only (border color + shadow). Border WIDTH and geometry are
   untouched so the image/placeholder never shifts under the cursor. */
.catalog-product-card:hover {
    border-color: #6D28D9;
    box-shadow: 0 12px 24px rgba(35, 5, 53, 0.14);
}

/* ─── Catalog merchant/product grid: stable mobile expansion ───
   Reserve space so swapping merchants <-> products never collapses the parent
   (prevents Cumulative Layout Shift), and offset smooth-scroll targets below
   the sticky search bar. */
.catalog-card-grid {
    min-height: 200px;
    align-content: start;
    scroll-margin-top: 90px;
}

#catalogAllProductsToolbar,
#catalogRepLeaderboard,
#catalogAllProductsList,
[data-catalog-merchant] {
    scroll-margin-top: 90px;
}

.catalog-merchant-card,
.catalog-product-card {
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Smoothly reveal an expanded merchant's product grid without a hard flash.
   Scoped to accordion bodies only — the manager's product grid and the rep's
   "My Products" list should NOT replay this on every unrelated re-render. */
[data-catalog-group-body] {
    animation: catalogGroupReveal 0.22s ease-out;
}

@keyframes catalogGroupReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-catalog-group-body] { animation: none; }
    .catalog-merchant-card,
    .catalog-product-card,
    #catalogAllProductsView { transition: none !important; animation: none !important; }
}

@media (max-width: 640px) {
    .catalog-card-grid { min-height: 160px; }
}

/* ─── Merchant-card status filter pills (all-products folder grid) ───
   Premium interactive pill buttons — not a stats bar. Brand palette only:
   deep purple #230535, indigo #4B0082, gold #FFD700. */
#catalogStatusFilterBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.catalog-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 9999px;
    border: 1.5px solid rgba(35, 5, 53, 0.14);
    background: #ffffff;
    color: #230535;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 2px rgba(35, 5, 53, 0.06);
    transition: background-color 0.16s ease, border-color 0.16s ease,
        color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.catalog-status-chip i {
    font-size: 0.8rem;
    color: #6D28D9;
    transition: color 0.16s ease;
}

/* Clear affordance: warm gold hover + a subtle lift/shadow. */
.catalog-status-chip:hover {
    border-color: #FFD700;
    background: rgba(255, 215, 0, 0.14);
    box-shadow: 0 8px 18px -10px rgba(35, 5, 53, 0.4);
    transform: translateY(-1px);
}

.catalog-status-chip:active {
    transform: translateY(0) scale(0.97);
}

.catalog-status-chip:focus-visible {
    outline: 2px solid #4B0082;
    outline-offset: 2px;
}

/* Selected filter: filled Kanjo purple, white label, gold accent + count. */
.catalog-status-chip.is-active {
    background: #230535;
    border-color: #230535;
    color: #ffffff;
    box-shadow: 0 10px 22px -10px rgba(35, 5, 53, 0.8);
}

.catalog-status-chip.is-active i {
    color: #FFD700;
}

.catalog-status-chip-count {
    font-size: 0.72rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
    transition: color 0.16s ease, opacity 0.16s ease;
}

.catalog-status-chip.is-active .catalog-status-chip-count {
    color: #FFD700;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .catalog-status-chip { transition: none; }
    .catalog-status-chip:hover,
    .catalog-status-chip:active { transform: none; }
}

/* ─── Laravel Dashboard Sync accents (merchant folder cards) ───
   A compact status pill floats at the top of the card: calm emerald when the
   merchant is published & synced, pulsing amber when edits await transfer. */
.catalog-merchant-card--dashboard-uploaded {
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), #fff 55%);
    box-shadow: 0 6px 18px -10px rgba(16, 185, 129, 0.5);
}
.catalog-merchant-card--dashboard-uploaded:hover {
    border-color: rgba(16, 185, 129, 0.6);
    box-shadow: 0 14px 28px -12px rgba(16, 185, 129, 0.65);
}
.catalog-merchant-card--dashboard-pending {
    border: 1.5px solid rgba(245, 158, 11, 0.55);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), #fff 55%);
    box-shadow: 0 6px 18px -10px rgba(245, 158, 11, 0.55);
}
.catalog-merchant-card--dashboard-pending:hover {
    border-color: rgba(217, 119, 6, 0.75);
    box-shadow: 0 14px 28px -12px rgba(245, 158, 11, 0.7);
}

.catalog-dash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    white-space: nowrap;
}
.catalog-dash-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.catalog-dash-badge--synced {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}
.catalog-dash-badge--synced .catalog-dash-badge__dot { background: #10B981; }
.catalog-dash-badge--pending {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FCD34D;
    cursor: pointer;
}
.catalog-dash-badge--pending .catalog-dash-badge__dot {
    background: #F59E0B;
    animation: catalogDashDotPulse 1.6s ease-in-out infinite;
}
@keyframes catalogDashDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.65); }
}
@media (prefers-reduced-motion: reduce) {
    .catalog-dash-badge--pending .catalog-dash-badge__dot { animation: none; }
}

/* Status-filter pills: SVG-style coloured dots for the dashboard-sync filters. */
.catalog-status-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}
.catalog-status-chip-dot--emerald { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.catalog-status-chip-dot--amber { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }

/* ─── Laravel Dashboard Sync section (merchant profile modal) ─── */
.mp-dash-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    margin: 12px 0;
    direction: rtl;
}
.mp-dash-card__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mp-dash-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.mp-dash-card__text { min-width: 0; }
.mp-dash-card__title {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
}
.mp-dash-card__sub {
    font-size: 11.5px;
    line-height: 1.6;
    margin-top: 2px;
}
.mp-dash-card--todo { background: #F8FAFC; border: 1px solid #E2E8F0; }
.mp-dash-card--todo .mp-dash-card__icon--todo { background: #F1F5F9; color: #64748B; }
.mp-dash-card--todo .mp-dash-card__title { color: #1E293B; }
.mp-dash-card--todo .mp-dash-card__sub { color: #64748B; }

.mp-dash-card--synced { background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%); border: 1px solid #A7F3D0; }
.mp-dash-card--synced .mp-dash-card__icon--synced { background: #D1FAE5; color: #059669; }
.mp-dash-card--synced .mp-dash-card__title { color: #065F46; }
.mp-dash-card--synced .mp-dash-card__sub { color: #047857; }

.mp-dash-card--pending { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); border: 1px solid #FCD34D; }
.mp-dash-card--pending .mp-dash-card__icon--pending { background: #FDE68A; color: #B45309; }
.mp-dash-card--pending .mp-dash-card__title { color: #92400E; }
.mp-dash-card--pending .mp-dash-card__sub { color: #B45309; }

.mp-dash-cta {
    border: none;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.mp-dash-cta:hover { transform: translateY(-1px); }
.mp-dash-cta:active { transform: translateY(0) scale(0.98); }
.mp-dash-cta--primary {
    background: linear-gradient(135deg, #230535, #4B0082);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.35);
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(35, 5, 53, 0.18);
}
.mp-dash-cta--ghost {
    background: #FFFFFF;
    color: #64748B;
    border: 1px solid #CBD5E1;
    padding: 6px 12px;
    font-size: 11.5px;
}
.mp-dash-cta--ghost:hover { color: #334155; border-color: #94A3B8; }

/* ─── Laravel Dashboard Sync: change-log modal ─── */
.mp-dash-modal-popup { border-radius: 18px; }
.mp-dash-modal-title {
    background: linear-gradient(135deg, #230535, #4B0082) !important;
    color: #FFD700 !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    padding: 14px 18px !important;
    border-radius: 12px;
    margin: 0 0 0.9rem !important;
    border-bottom: 2px solid rgba(255, 215, 0, 0.45);
}
.mp-dash-modal-html { text-align: right; }
.mp-dash-confirm-btn {
    width: 100% !important;
    background: #230535 !important;
    color: #FFD700 !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
}
.mp-dash-cancel-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.mp-dash-changes-wrap { max-height: 55vh; overflow-y: auto; text-align: right; padding-inline-end: 2px; }
.mp-dash-changes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mp-dash-change {
    position: relative;
    border: 1px solid #E9E4F2;
    border-inline-start: 4px solid #230535;
    border-radius: 12px;
    padding: 10px 12px;
    background: #FCFBFE;
}
.mp-dash-change__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-dash-type {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}
.mp-dash-type--add { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.mp-dash-type--edit { background: #EEF2FF; color: #4338CA; border: 1px solid #C7D2FE; }
.mp-dash-type--image { background: #FFFBEB; color: #B45309; border: 1px solid #FCD34D; }
.mp-dash-type--delete { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
.mp-dash-type--info { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
.mp-dash-change-time { font-size: 10.5px; font-weight: 700; color: #64748b; }
.mp-dash-change-item { font-size: 13px; font-weight: 800; color: #230535; margin-top: 6px; }
.mp-dash-change-summary { font-size: 11.5px; font-weight: 600; color: #475569; margin-top: 3px; }
.mp-dash-diff {
    margin-top: 7px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 9px;
    padding: 7px 10px;
}
.mp-dash-diff__label { display: block; font-size: 10px; font-weight: 800; color: #94A3B8; margin-bottom: 2px; }
.mp-dash-diff__val { font-size: 12px; font-weight: 700; color: #334155; }
.mp-dash-change-by { margin-top: 7px; }
.mp-dash-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    color: #6D28D9;
    background: #F5F3FF;
    border: 1px solid #DDD6FE;
    padding: 2px 9px;
    border-radius: 999px;
}
.mp-dash-change-empty { text-align: center; color: #94a3b8; font-weight: 800; padding: 1.4rem; }

/* ─────────────────── KPI dashboard (Founders + Ops Manager) ─────────────────── */
.kpi-stat-card {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 1.25rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: 0 10px 24px -18px rgba(35, 5, 53, 0.45);
}
.kpi-stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.kpi-stat-value {
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.1;
    color: #230535;
}
.kpi-stat-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #64748b;
    margin-top: 0.15rem;
}

.kpi-overview {
    background: linear-gradient(120deg, #230535 0%, #4C1D95 100%);
    border-radius: 1.25rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 18px 34px -22px rgba(35, 5, 53, 0.8);
}

.kpi-rep-card {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 1.25rem;
    padding: 1rem;
    box-shadow: 0 12px 26px -20px rgba(35, 5, 53, 0.5);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kpi-rep-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -20px rgba(35, 5, 53, 0.55);
}

.kpi-mini {
    background: #f6f4fa;
    border-radius: 0.85rem;
    padding: 0.55rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.kpi-mini-label {
    font-size: 0.62rem;
    font-weight: 800;
    color: #94a3b8;
}
.kpi-mini-value {
    font-size: 0.8rem;
    font-weight: 900;
    color: #230535;
}

.kpi-bar-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    font-weight: 800;
    color: #475569;
}
.kpi-bar-track {
    height: 0.45rem;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}
.kpi-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.kpi-junk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 900;
}
.kpi-clean-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
    .kpi-rep-card { transition: none; }
    .kpi-bar-fill { transition: none; }
}

/* ─────────── KPI full-page Master-Detail analytics dashboard ─────────── */
.kpi-panel {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 1.5rem;
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: 0 14px 30px -26px rgba(35, 5, 53, 0.55);
}
.kpi-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.kpi-panel-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.85rem;
    background: #230535;
    color: #FFD700;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #f3f0fa;
    color: #230535;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.68rem;
    font-weight: 900;
}
.kpi-chip-dark { background: #230535; color: #FFD700; }
.kpi-chip-gold { background: #FFD700; color: #230535; }
.kpi-stat-hint {
    font-size: 0.62rem;
    font-weight: 800;
    color: #94a3b8;
    margin-top: 0.15rem;
}

.kpi-rep-pick {
    text-align: right;
    background: #fff;
    border: 1.5px solid rgba(35, 5, 53, 0.1);
    border-radius: 1.25rem;
    padding: 0.9rem;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    box-shadow: 0 10px 24px -22px rgba(35, 5, 53, 0.6);
}
.kpi-rep-pick:hover {
    transform: translateY(-2px);
    border-color: rgba(35, 5, 53, 0.35);
    box-shadow: 0 16px 30px -20px rgba(35, 5, 53, 0.55);
}
.kpi-rep-pick-active {
    border-color: #FFD700;
    background: linear-gradient(180deg, #fffdf3 0%, #ffffff 100%);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35), 0 16px 30px -20px rgba(35, 5, 53, 0.55);
}

.kpi-avatar-ring {
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(135deg, #230535, #FFD700);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.kpi-avatar-ring-lg { width: 4.25rem; height: 4.25rem; }
.kpi-rep-avatar {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    background: #230535;
    color: #FFD700;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 1.1rem;
    border: 2px solid #fff;
}
.kpi-rep-avatar-fallback { font-size: 1.25rem; }

.kpi-deep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px dashed rgba(35, 5, 53, 0.15);
}

.kpi-financial-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    background: #faf9fd;
    border: 1px solid rgba(35, 5, 53, 0.07);
    border-radius: 1rem;
    padding: 0.5rem 0.85rem;
}
@media (min-width: 768px) {
    .kpi-financial-grid { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}
.kpi-fin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #475569;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(35, 5, 53, 0.05);
}
.kpi-fin-row:last-child { border-bottom: none; }
.kpi-fin-val { font-weight: 900; color: #230535; }

.kpi-chart-card {
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 1.25rem;
    padding: 0.9rem;
    box-shadow: 0 12px 26px -24px rgba(35, 5, 53, 0.6);
}
.kpi-chart-title {
    font-size: 0.72rem;
    font-weight: 900;
    color: #230535;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.kpi-chart-box {
    position: relative;
    height: 15rem;
    min-height: 15rem;
}
@media (min-width: 1024px) {
    .kpi-chart-box { height: 16rem; min-height: 16rem; }
}
.kpi-bars { display: flex; flex-direction: column; gap: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
    .kpi-rep-pick { transition: none; }
}

@media (min-width: 1024px) {
    .kpi-chart-wide { grid-column: 1 / -1; }
    .kpi-chart-wide .kpi-chart-box { height: 18rem; min-height: 18rem; }
}

/* ─────────── KPI compact Bento overrides (desktop density pass) ─────────── */
.kpi-panel {
    padding: 0.9rem 1rem 1rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 24px -22px rgba(35, 5, 53, 0.5);
}
.kpi-panel-head { margin-bottom: 0.75rem; }
.kpi-panel-icon { width: 2rem; height: 2rem; border-radius: 0.65rem; font-size: 0.85rem; }

.kpi-stat-card {
    min-height: 4.25rem;
    padding: 0.6rem 0.7rem;
    gap: 0.6rem;
    border-radius: 1rem;
    align-items: center;
}
.kpi-stat-icon { width: 2.35rem; height: 2.35rem; border-radius: 0.75rem; font-size: 0.95rem; }
.kpi-stat-value { font-size: 1.1rem; }
.kpi-stat-label { font-size: 0.62rem; }
.kpi-stat-hint { font-size: 0.58rem; }

.kpi-rep-pick {
    min-height: 5.75rem;
    padding: 0.7rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kpi-avatar-ring { width: 2.6rem; height: 2.6rem; }

.kpi-deep-head { padding-bottom: 0.6rem; gap: 0.5rem; }

.kpi-financial-grid {
    grid-template-columns: 1fr;
    padding: 0.3rem 0.7rem;
    border-radius: 0.85rem;
}
.kpi-fin-row { font-size: 0.68rem; padding: 0.3rem 0; }

.kpi-chart-card { padding: 0.7rem; border-radius: 1rem; }
.kpi-chart-title { font-size: 0.68rem; margin-bottom: 0.4rem; }

/* Two-column precision table inside the narrow left column on wide desktops. */
@media (min-width: 1280px) {
    .kpi-financial-grid { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}

/* ─────────── KPI rep personal preview (manager-only gamified screen) ─────────── */
.kpi-personal-hero {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
    background: linear-gradient(120deg, #230535 0%, #4C1D95 100%);
    box-shadow: 0 18px 34px -26px rgba(35, 5, 53, 0.8);
    flex-wrap: wrap;
}
.kpi-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 215, 0, 0.16);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.45);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 900;
}
.kpi-personal-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.9rem;
}
@media (min-width: 1024px) {
    .kpi-personal-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kpi-personal-card {
    position: relative;
    background: #fff;
    border: 1.5px solid rgba(35, 5, 53, 0.1);
    border-radius: 1.1rem;
    padding: 0.85rem 0.8rem;
    text-align: center;
    box-shadow: 0 12px 26px -24px rgba(35, 5, 53, 0.6);
    overflow: hidden;
}
.kpi-personal-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: #230535;
}
.kpi-personal-card-purple::before { background: #230535; }
.kpi-personal-card-gold::before { background: #FFD700; }
.kpi-personal-card-green::before { background: #37d99a; }
.kpi-personal-card-indigo::before { background: #6D28D9; }
.kpi-personal-card-icon {
    width: 2.4rem;
    height: 2.4rem;
    margin: 0.15rem auto 0.45rem;
    border-radius: 0.8rem;
    display: grid;
    place-items: center;
    background: #230535;
    color: #FFD700;
    font-size: 1rem;
}
.kpi-personal-card-gold .kpi-personal-card-icon { background: #FFD700; color: #230535; }
.kpi-personal-card-green .kpi-personal-card-icon { background: #37d99a; color: #fff; }
.kpi-personal-card-indigo .kpi-personal-card-icon { background: #6D28D9; color: #fff; }
.kpi-personal-card-value {
    font-size: 1.35rem;
    font-weight: 900;
    color: #230535;
    line-height: 1.1;
}
.kpi-personal-card-label {
    font-size: 0.66rem;
    font-weight: 900;
    color: #475569;
    margin-top: 0.25rem;
    line-height: 1.35;
}
.kpi-personal-card-foot {
    font-size: 0.6rem;
    font-weight: 800;
    color: #94a3b8;
    margin-top: 0.35rem;
    line-height: 1.3;
}

/* ─────── Anonymous benchmarking (rep gamification) ─────── */
.kpi-benchmark-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
}
@media (min-width: 640px) {
    .kpi-benchmark-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.kpi-benchmark-card {
    background: #fff;
    border: 1.5px solid rgba(35, 5, 53, 0.1);
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 10px 22px -22px rgba(35, 5, 53, 0.7);
}
.kpi-benchmark-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 900;
    color: #230535;
}
.kpi-benchmark-values {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.kpi-benchmark-side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border-radius: 0.7rem;
    padding: 0.45rem 0.55rem;
}
.kpi-benchmark-side-own {
    background: rgba(229, 119, 35, 0.1);
    border: 1px solid rgba(229, 119, 35, 0.35);
}
.kpi-benchmark-side-best {
    background: rgba(35, 5, 53, 0.05);
    border: 1px solid rgba(35, 5, 53, 0.12);
}
.kpi-benchmark-side-label {
    font-size: 0.58rem;
    font-weight: 800;
    color: #64748b;
}
.kpi-benchmark-side-own .kpi-benchmark-side-label {
    color: #E57723;
}
.kpi-benchmark-side-value {
    font-size: 0.95rem;
    font-weight: 900;
    color: #230535;
}
.kpi-benchmark-vs {
    align-self: center;
    font-size: 0.6rem;
    font-weight: 900;
    color: #94a3b8;
}
.kpi-benchmark-track {
    height: 7px;
    margin-top: 0.6rem;
    border-radius: 999px;
    background: rgba(35, 5, 53, 0.08);
    overflow: hidden;
}
.kpi-benchmark-track > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFD700 0%, #E57723 100%);
    transition: width 0.4s ease;
}
.kpi-benchmark-note {
    margin-top: 0.45rem;
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
    line-height: 1.35;
}
.kpi-benchmark-note-best {
    color: #15803d;
}
.kpi-benchmark-note-gap {
    color: #b45309;
}
.kpi-benchmark-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(35, 5, 53, 0.04);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.kpi-warn-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    border: 1.5px solid #FFD700;
    background: linear-gradient(120deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    cursor: pointer;
    text-align: right;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 16px 32px -26px rgba(220, 38, 38, 0.9);
}
.kpi-warn-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px -24px rgba(220, 38, 38, 0.95);
}
.kpi-warn-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    background: #FFD700;
    color: #b91c1c;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.kpi-warn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #FFD700;
    color: #230535;
    border-radius: 0.75rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 900;
    flex-shrink: 0;
}
.kpi-ok-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    border: 1.5px solid rgba(55, 217, 154, 0.5);
    background: rgba(55, 217, 154, 0.1);
    color: #0f766e;
}
.kpi-ok-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    background: #37d99a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.kpi-tips {
    margin-top: 0.9rem;
    background: #faf9fd;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 1.1rem;
    padding: 0.85rem 1rem;
}
.kpi-tips-head {
    font-size: 0.75rem;
    font-weight: 900;
    color: #230535;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.kpi-tips-list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.kpi-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #334155;
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.07);
    border-right: 4px solid #6D28D9;
    border-radius: 0.75rem;
    padding: 0.5rem 0.7rem;
    line-height: 1.5;
}
.kpi-tip i { margin-top: 0.15rem; color: #6D28D9; }
.kpi-tip-danger { border-right-color: #dc2626; }
.kpi-tip-danger i { color: #dc2626; }
.kpi-tip-info { border-right-color: #6D28D9; }
.kpi-tip-success { border-right-color: #37d99a; }
.kpi-tip-success i { color: #16a34a; }
.kpi-tip-muted { border-right-color: #94a3b8; }
.kpi-tip-muted i { color: #64748b; }

.kpi-chip-red { background: #fee2e2; color: #b91c1c; }

.kpi-fix-item {
    background: #fff;
    border: 1.5px solid rgba(35, 5, 53, 0.1);
    border-right: 4px solid #dc2626;
    border-radius: 1rem;
    padding: 0.8rem 0.9rem;
    box-shadow: 0 10px 24px -24px rgba(35, 5, 53, 0.6);
}
.kpi-fix-current {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    background: #fef2f2;
    border-radius: 0.65rem;
    padding: 0.45rem 0.65rem;
    margin-top: 0.5rem;
    line-height: 1.5;
    word-break: break-word;
}
.kpi-fix-input {
    width: 100%;
    margin-top: 0.55rem;
    border: 1.5px solid rgba(35, 5, 53, 0.15);
    border-radius: 0.75rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #230535;
    resize: vertical;
    outline: none;
    font-family: inherit;
}
.kpi-fix-input:focus { border-color: #6D28D9; box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15); }
.kpi-fix-save {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #230535;
    color: #FFD700;
    border-radius: 0.75rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 900;
    transition: opacity 0.15s ease;
}
.kpi-fix-save:hover { opacity: 0.9; }
.kpi-fix-save:disabled { opacity: 0.6; cursor: wait; }

.kpi-warn-box + .kpi-warn-box { margin-top: 0.6rem; }
.kpi-warn-box-gold {
    border-color: #230535;
    background: linear-gradient(120deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 16px 32px -26px rgba(217, 119, 6, 0.9);
}
.kpi-warn-box-gold:hover { box-shadow: 0 20px 36px -24px rgba(217, 119, 6, 0.95); }
.kpi-warn-icon-gold { background: #230535; color: #FFD700; }

.kpi-fix-merchant {
    font-size: 0.66rem;
    font-weight: 800;
    color: #6D28D9;
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.kpi-fix-item-image { border-right-color: #E57723; }

/* ─── Missing-image card: clickable title + description snippet ─── */
.kpi-fix-name-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    text-align: right;
    font-weight: 900;
    font-size: 0.8rem;
    color: #230535;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}
.kpi-fix-name-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-fix-name-btn i { font-size: 0.6rem; color: #6D28D9; opacity: 0.65; flex-shrink: 0; transition: opacity 0.15s ease, transform 0.15s ease; }
.kpi-fix-name-btn:hover { color: #6D28D9; }
.kpi-fix-name-btn:hover i { opacity: 1; transform: translateX(-2px); }
.kpi-fix-name-btn:focus-visible { outline: 2px solid #6D28D9; outline-offset: 2px; border-radius: 0.35rem; }

.kpi-fix-desc {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.55;
    margin-top: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.kpi-fix-desc-empty { color: #94a3b8; font-style: italic; }

.kpi-fix-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(109, 40, 217, 0.08);
    color: #230535;
    border-radius: 0.75rem;
    padding: 0.5rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 900;
    transition: background 0.15s ease;
}
.kpi-fix-details-btn:hover { background: rgba(109, 40, 217, 0.16); }

/* ─── Missing-image product details modal body ─── */
.kpi-detail-section-title {
    font-size: 0.68rem;
    font-weight: 900;
    color: #230535;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.kpi-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}
.kpi-detail-meta-row {
    background: #f8fafc;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 0.75rem;
    padding: 0.5rem 0.6rem;
    min-width: 0;
}
.kpi-detail-meta-label {
    font-size: 0.6rem;
    font-weight: 900;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.kpi-detail-meta-value {
    font-size: 0.74rem;
    font-weight: 800;
    color: #230535;
    margin-top: 0.1rem;
    word-break: break-word;
}
@media (max-width: 480px) { .kpi-detail-meta { grid-template-columns: 1fr; } }

/* ─────────── Kanjo weighted score & rank gamification ─────────── */
.kpi-rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #230535;
    color: #FFD700;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    font-size: 0.66rem;
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1.4;
}
.kpi-rank-pill-1 {
    background: linear-gradient(135deg, #FFD700, #f0b400);
    color: #230535;
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.4);
}
.kpi-rank-pill-2 { background: #4C1D95; color: #fff; }
.kpi-rank-pill-3 { background: #6D28D9; color: #fff; }
.kpi-rank-pill-x { background: #eef1f6; color: #475569; }

.kpi-rep-score {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 900;
    color: #230535;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.22), rgba(255, 215, 0, 0.05));
    border: 1px solid rgba(255, 215, 0, 0.55);
    border-radius: 0.65rem;
    padding: 0.32rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.kpi-rep-score-editor {
    margin-top: 0.5rem;
    font-size: 0.64rem;
    font-weight: 900;
    color: #4C1D95;
    background: rgba(109, 40, 217, 0.1);
    border: 1px dashed rgba(109, 40, 217, 0.5);
    border-radius: 0.65rem;
    padding: 0.32rem 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.kpi-rep-pick-editor {
    border-style: dashed;
    border-color: rgba(109, 40, 217, 0.4);
    background: #fbfaff;
}

.kpi-rank-badge-editor {
    background: rgba(109, 40, 217, 0.25);
    color: #e9d5ff;
    border-color: rgba(196, 181, 253, 0.6);
}

.kpi-kanjo-score-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(120deg, #230535 0%, #4C1D95 100%);
    box-shadow: 0 16px 30px -26px rgba(35, 5, 53, 0.85);
}
.kpi-kanjo-score-value {
    font-size: 2rem;
    font-weight: 900;
    color: #FFD700;
    line-height: 1;
    flex-shrink: 0;
}
.kpi-kanjo-score-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #fff;
    min-width: 0;
}
.kpi-kanjo-score-meta .text-slate-400 { color: rgba(255, 255, 255, 0.6) !important; }

/* Clickable Kanjo Score banner (deep-dive) — glow hover only, no layout shift. */
.kpi-kanjo-score-clickable {
    width: 100%;
    text-align: right;
    cursor: pointer;
    border: 1px solid rgba(255, 215, 0, 0.25);
    transition: box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease;
}
.kpi-kanjo-score-clickable:hover,
.kpi-kanjo-score-clickable:focus-visible {
    filter: brightness(1.06);
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.45), 0 18px 34px -24px rgba(35, 5, 53, 0.95);
    outline: none;
}
.kpi-kanjo-score-hint {
    margin-top: 0.15rem;
    font-size: 0.6rem;
    font-weight: 800;
    color: #FFD700;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.85;
}

/* Clickable personal purple card — hint row only, no layout shift. */
.kpi-personal-card-clickable {
    cursor: pointer;
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}
.kpi-personal-card-clickable:hover,
.kpi-personal-card-clickable:focus-visible {
    filter: brightness(1.05);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5);
    outline: none;
}
.kpi-personal-card-hint {
    margin-top: 0.35rem;
    font-size: 0.58rem;
    font-weight: 800;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ---- Kanjo Score breakdown modal ---- */
.kpi-score-final {
    text-align: center;
    padding: 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(120deg, #230535 0%, #4C1D95 100%);
    color: #fff;
}
.kpi-score-final-label {
    font-size: 0.72rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.75);
}
.kpi-score-final-value {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.05;
    color: #FFD700;
}
.kpi-score-final-value span { font-size: 1rem; color: rgba(255, 255, 255, 0.65); }
.kpi-score-final-sub {
    font-size: 0.66rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
}
.kpi-score-crit-list { display: flex; flex-direction: column; gap: 0.75rem; }
.kpi-score-crit { display: flex; flex-direction: column; gap: 0.25rem; }
.kpi-score-crit-name {
    font-size: 0.74rem;
    font-weight: 900;
    color: #230535;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.kpi-score-crit-val { font-size: 0.74rem; font-weight: 900; color: #230535; }
.kpi-score-track {
    height: 0.5rem;
    border-radius: 9999px;
    background: #eef1f6;
    overflow: hidden;
}
.kpi-score-fill { height: 100%; border-radius: 9999px; transition: width 0.3s ease; }
.kpi-score-crit-basis { font-size: 0.6rem; font-weight: 700; color: #64748b; line-height: 1.5; }
.kpi-score-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    background: rgba(255, 215, 0, 0.16);
    border: 1px solid rgba(255, 215, 0, 0.5);
    font-size: 0.8rem;
    font-weight: 900;
    color: #230535;
}
.kpi-score-info {
    border-radius: 0.8rem;
    border: 1px dashed rgba(109, 40, 217, 0.35);
    background: #fbfaff;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.kpi-score-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #4C1D95;
}
.kpi-score-info-row > span:last-child { margin-inline-start: auto; color: #230535; }
.kpi-score-note {
    font-size: 0.6rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.6;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
}
.kpi-score-note i { color: #6D28D9; margin-top: 0.15rem; }


/* ─── Black Box audit log viewer ─────────────────────────────────── */
.audit-row {
    position: relative;
    display: flex;
    gap: 0.7rem;
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 0.9rem;
    padding: 0.65rem 0.75rem 0.65rem 1rem;
    overflow: hidden;
}
.audit-row-line {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.audit-row-time {
    flex-shrink: 0;
    width: 6.6rem;
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
    padding-top: 0.15rem;
    line-height: 1.35;
}
.audit-row-time i { color: #94a3b8; margin-top: 0.1rem; }
.audit-row-main { flex: 1; min-width: 0; }
.audit-row-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.audit-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.62rem;
    font-weight: 900;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.audit-row-user {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 900;
    color: #230535;
}
.audit-src-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.58rem;
    font-weight: 900;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
}
.audit-row-desc {
    font-size: 0.78rem;
    font-weight: 800;
    color: #1e293b;
    margin-top: 0.3rem;
    line-height: 1.5;
    word-break: break-word;
}
.audit-row-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.3rem;
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
}
.audit-row-target i { color: #94a3b8; }
.audit-row-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #94a3b8;
    direction: ltr;
}
/* Deletions are destructive and irreversible, so they are highlighted above
   every other event type: red tint, red border and a bolder description. */
.audit-row[data-action="delete"] {
    background: linear-gradient(0deg, #fff5f5, #fff5f5);
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.06);
}
.audit-row[data-action="delete"] .audit-row-desc { color: #b91c1c; }
.audit-row[data-action="delete"] .audit-row-target { color: #b91c1c; }
.audit-row[data-action="delete"] .audit-row-target i { color: #ef4444; }
.audit-row[data-action="delete"] .audit-action-chip { box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1); }
.audit-entity-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font: inherit;
    font-weight: 900;
    color: #4C1D95;
    background: #f3e8ff;
    border: 1px solid #ddd6fe;
    border-radius: 0.5rem;
    padding: 0.08rem 0.45rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.audit-entity-link:hover { background: #4C1D95; color: #fff; }
.audit-entity-link i { font-size: 0.55rem; }

/* Expandable old-vs-new diff for Update entries. */
.audit-diff { margin-top: 0.45rem; }
.audit-diff > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 900;
    color: #0ea5e9;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 0.55rem;
    padding: 0.15rem 0.55rem;
    user-select: none;
}
.audit-diff > summary::-webkit-details-marker { display: none; }
.audit-diff[open] > summary { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.audit-diff-body {
    margin-top: 0.4rem;
    border: 1px solid rgba(35, 5, 53, 0.08);
    border-radius: 0.7rem;
    overflow: hidden;
    background: #fbfbfd;
}
.audit-diff-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto 1fr;
    align-items: stretch;
    border-bottom: 1px solid rgba(35, 5, 53, 0.06);
}
.audit-diff-row:last-child { border-bottom: 0; }
.audit-diff-field {
    font-size: 0.64rem;
    font-weight: 900;
    color: #230535;
    background: #f8fafc;
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    border-inline-end: 1px solid rgba(35, 5, 53, 0.06);
}
.audit-diff-old, .audit-diff-new {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.4rem 0.55rem;
    display: flex;
    align-items: center;
    word-break: break-word;
    line-height: 1.5;
}
.audit-diff-old { color: #b91c1c; background: #fef2f2; text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, 0.4); }
.audit-diff-new { color: #15803d; background: #f0fdf4; }
.audit-diff-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;
    color: #94a3b8;
    background: #f8fafc;
    font-size: 0.6rem;
}
/* Legacy update rows (written before diff tracking) show a muted notice. */
.audit-legacy-badge {
    margin-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.66rem;
    font-weight: 800;
    color: #64748b;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 0.55rem;
    padding: 0.18rem 0.6rem;
}
.audit-legacy-badge i { font-size: 0.62rem; opacity: 0.75; }

/* Entity previews open above the Black Box while it is visible. */
body.black-box-open #catalogProductDetailsModal,
body.black-box-open #merchantProfileModal,
body.black-box-open #contractPreviewModal { z-index: 260; }
@media (max-width: 640px) {
    .audit-diff-row { grid-template-columns: 1fr; }
    .audit-diff-old { text-decoration: none; }
    .audit-diff-field { border-inline-end: 0; }
    .audit-diff-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
    .audit-row { flex-direction: column; gap: 0.35rem; }
    .audit-row-time { width: auto; }
}

/* Pending / Completed toggle inside the image-processing widget. */
.catalog-content-tab {
    background: transparent;
    color: #64748b;
    border: 0;
    cursor: pointer;
}
.catalog-content-tab:hover { color: #230535; }
.catalog-content-tab.is-active {
    background: #230535;
    color: #FFD700;
    box-shadow: 0 4px 10px rgba(35, 5, 53, 0.18);
}
.catalog-content-tab.is-active #catalogTabPendingCount {
    background: #FFD700;
    color: #230535;
}
.catalog-content-tab.is-active #catalogTabDoneCount {
    background: #10b981;
    color: #ffffff;
}
.catalog-enhanced-thumb {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

/* ─── تفويض إبرام التعاقدات (authorization issuance) ─── */
.auth-letter {
    position: relative;
    background: #eef0f4;
    padding: 1rem;
    border-radius: 1rem;
}
.auth-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: 70vw;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.auth-watermark img { width: 100%; height: auto; display: block; filter: grayscale(100%); }
.auth-toolbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: linear-gradient(to left, #230535, #4C1D95);
    color: #fff;
    padding: 0.65rem 0.9rem;
    border-radius: 0.9rem;
    margin-bottom: 1rem;
}
.auth-toolbar-title { font-size: 0.8rem; font-weight: 900; display: flex; align-items: center; gap: 0.4rem; }
.auth-btn {
    border: none;
    cursor: pointer;
    font-weight: 900;
    font-size: 0.72rem;
    padding: 0.45rem 0.85rem;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.15s ease;
}
.auth-btn:hover { opacity: 0.9; }
.auth-btn-ghost { background: rgba(255, 255, 255, 0.12); color: #fff; }
.auth-btn-gold { background: #FFD700; color: #230535; }
.auth-page {
    position: relative;
    z-index: 1;
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    margin: 0 auto;
    padding: 16mm 16mm 12mm;
    background: #ffffff;
    color: #1e293b;
    direction: rtl;
    text-align: justify;
    font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
    box-shadow: 0 10px 30px rgba(35, 5, 53, 0.18);
    border-top: 6px solid #4B0082;
    border-radius: 0.4rem;
}
.auth-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 3px solid #4B0082;
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}
.auth-header-logo img { max-height: 60px; max-width: 120px; object-fit: contain; }
.auth-header-company { flex: 1; text-align: center; }
.auth-header-name { font-size: 0.95rem; font-weight: 900; color: #4B0082; }
.auth-header-sub { font-size: 0.66rem; font-weight: 800; color: #64748b; margin-top: 0.2rem; }
.auth-header-badge {
    background: #FFD700;
    color: #230535;
    font-size: 0.64rem;
    font-weight: 900;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.auth-title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 900;
    color: #4B0082;
    background: #F5F3FF;
    border-right: 5px solid #F59E0B;
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.9rem;
}
.auth-date { font-size: 0.82rem; font-weight: 900; color: #1e293b; margin-bottom: 0.9rem; }
.auth-p { font-size: 0.82rem; font-weight: 700; line-height: 1.95; margin: 0 0 0.7rem; color: #1e293b; }
.auth-list { font-size: 0.82rem; font-weight: 700; line-height: 1.9; margin: 0 0 0.9rem; padding-inline-start: 1.4rem; list-style-type: arabic-indic; }
.auth-list li { margin-bottom: 0.35rem; }
.auth-section-title { font-size: 0.86rem; font-weight: 900; color: #4B0082; margin: 0.9rem 0 0.4rem; }
.auth-signature { display: table; width: 100%; margin-top: 1.4rem; page-break-inside: avoid; }
.auth-signature-text { display: table-cell; width: 60%; vertical-align: top; font-size: 0.82rem; font-weight: 800; }
.auth-signature-title { color: #4B0082; font-weight: 900; margin-bottom: 0.35rem; }
.auth-signature-name { margin-bottom: 0.6rem; }
.auth-signature-line { margin-top: 1rem; }
.auth-stamp { display: table-cell; width: 40%; vertical-align: top; text-align: center; }
.auth-stamp-space { min-height: 80px; background: #fff; }
.auth-stamp-label { font-size: 0.72rem; font-weight: 900; color: #4B0082; margin-bottom: 0.3rem; }
.auth-footer { margin-top: 1.2rem; padding-top: 0.6rem; border-top: 2px dashed #E2E8F0; text-align: center; font-size: 0.64rem; font-weight: 800; color: #64748b; }

@media (max-width: 768px) {
    .auth-page { width: 100%; min-height: auto; padding: 14px; }
    .auth-header { flex-wrap: wrap; }
    .auth-signature-text { width: 55%; }
    .auth-stamp { width: 45%; }
}

/* A4 print for the authorization letter: strip the app chrome and print only
   the document. */
@media print {
    @page {
        size: A4;
        margin: 15mm 15mm 18mm;

        @bottom-center {
            content: "صفحة " counter(page) " من " counter(pages);
            font-family: 'Cairo', 'Tahoma', 'Arial', sans-serif;
            font-size: 10pt;
            font-weight: 700;
            color: #4B0082;
            vertical-align: middle;
        }
    }
    #authorizationView,
    #authorizationView * { visibility: visible !important; }
    #authorizationView {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        z-index: 999999 !important;
    }
    .auth-letter { background: #ffffff !important; padding: 0 !important; border-radius: 0 !important; }
    .auth-toolbar { display: none !important; }
    .auth-page {
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border-top: none !important;
    }
    .auth-watermark { opacity: 0.05 !important; }
    .auth-section-title,
    .auth-signature,
    .auth-list li { page-break-inside: avoid !important; break-inside: avoid !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKSPACE ROUTER (Part 2) — single-active-view shell
   Purple #230535/#3b0764 + Gold #facc15, matches existing Kanjo brand.
   Panes are existing elements tagged at runtime by workspace.js; nothing is
   restructured, so all existing JS still finds its DOM nodes.
   ═══════════════════════════════════════════════════════════════════════════ */

.kanjo-workspace-pane { animation: kwsPaneIn 150ms ease both; }
.kanjo-workspace-pane:not(.kws-in-active-view) { display: none !important; }

@keyframes kwsPaneIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .kanjo-workspace-pane { animation: none; }
}

/* —— Shared tab look —— */
.kws-nav-inner { display: flex; gap: 0.25rem; }
.kws-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.5rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid transparent;
    background: transparent;
    color: #e9d5ff;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.kws-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.kws-tab.is-active {
    background: #facc15;
    color: #230535;
    border-color: #FFD700;
    box-shadow: 0 2px 10px rgba(250, 204, 21, 0.4);
}
.kws-tab-ic { position: relative; font-size: 1rem; }
.kws-tab-label-short { display: none; }
.kws-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    background: var(--kanjo-gold);
    color: var(--kanjo-purple);
    border-radius: 99px;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    font-weight: 900;
    border: 1px solid #fff;
    box-shadow: 0 1px 4px rgba(35, 5, 53, 0.25);
}
.kws-badge.hidden { display: none; }

/* —— Desktop top command-center nav (founders / managers) —— */
#kanjoWorkspaceNav { display: none; }
body.kanjo-shell-admin #kanjoWorkspaceNav {
    display: block;
    position: sticky;
    top: 61px;
    z-index: 30;
    background: linear-gradient(90deg, #230535 0%, #3b0764 100%);
    border-bottom: 2px solid #facc15;
    box-shadow: 0 4px 14px rgba(35, 5, 53, 0.25);
}
body.kanjo-shell-admin #kanjoWorkspaceNav .kws-nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.4rem 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.kanjo-shell-admin #kanjoWorkspaceNav .kws-nav-inner::-webkit-scrollbar { display: none; }

/* —— Mobile bottom app nav (reps / data-entry / media) —— */
body.kanjo-shell-mobile #kanjoMobileNav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(35, 5, 53, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 2px solid #facc15;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28);
}
body.kanjo-shell-mobile #kanjoMobileNav .kws-nav-inner {
    max-width: 32rem;
    margin: 0 auto;
}
body.kanjo-shell-mobile #kanjoMobileNav .kws-tab {
    flex: 1 1 0;
    height: 56px;
    border-radius: 0;
    gap: 3px;
    font-size: 0.66rem;
    color: #d8b4fe;
}
body.kanjo-shell-mobile #kanjoMobileNav .kws-tab.is-active {
    background: transparent;
    color: #facc15;
    box-shadow: none;
    border-color: transparent;
}
body.kanjo-shell-mobile #kanjoMobileNav .kws-tab.is-active .kws-tab-ic::after {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background: #facc15;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
}

/* —— Responsive shell switching —— */
@media (min-width: 768px) {
    /* Mobile shell gets a normal top tab bar on desktop widths. */
    body.kanjo-shell-mobile #kanjoWorkspaceNav {
        display: block;
        position: sticky;
        top: 61px;
        z-index: 30;
        background: linear-gradient(90deg, #230535 0%, #3b0764 100%);
        border-bottom: 2px solid #facc15;
    }
    body.kanjo-shell-mobile #kanjoWorkspaceNav .kws-nav-inner {
        max-width: 72rem;
        margin: 0 auto;
        padding: 0.4rem 0.5rem;
        overflow-x: auto;
    }
    body.kanjo-shell-mobile #kanjoMobileNav { display: none !important; }
}

@media (max-width: 767px) {
    body.kanjo-shell-mobile #kanjoWorkspaceNav { display: none; }
    .kws-tab-label { display: none; }
    .kws-tab-label-short { display: inline; }
    /* Never let the fixed bottom nav cover content/inputs. */
    body.kanjo-shell-mobile main { padding-bottom: 96px !important; }
    /* iOS: 16px inputs prevent the auto-zoom jump on focus. */
    body.kanjo-shell-mobile input,
    body.kanjo-shell-mobile select,
    body.kanjo-shell-mobile textarea { font-size: 16px; }
    body.kanjo-shell-mobile { overflow-x: hidden; }
    /* Thumb-friendly tap targets inside the mobile shell. */
    body.kanjo-shell-mobile button,
    body.kanjo-shell-mobile .kws-tab { min-height: 44px; }
    /* Smooth, non-overflowing view transitions. */
    .kanjo-workspace-pane { animation: kwsPaneInMobile 150ms ease both; }
    @keyframes kwsPaneInMobile {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP SAAS APP SHELL (>= 992px)
   Right-hand sidebar + slate canvas + Bento card grid.
   Mobile (< 992px) keeps the 4-tab bottom navigation untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sidebar is hidden until a shell class is applied by workspace.js. */
#kanjoWorkspaceSidebar { display: none; }

/* Catalog view header actions (holds the export button) — shown only in catalog views. */
.kws-catalog-actions { display: none; }
.kws-catalog-actions-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 900; color: #230535; font-size: 0.95rem; }
.kws-catalog-actions-title i { color: #facc15; }
body.kws-view-catalog .kws-catalog-actions,
body.kws-view-rep_catalog .kws-catalog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.05rem;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
}

/* Catalog auto-expand: the accordion strip header disappears and the body is
   forced open whenever its view is active — no second click required. */
body.kws-view-catalog #catalogAllProductsToggle { display: none !important; }
body.kws-view-catalog #catalogAllProductsBody { display: block !important; }
body.kws-view-rep_catalog #catalogAllProductsToggle,
body.kws-view-rep_catalog #catalogMyProductsToggle { display: none !important; }
body.kws-view-rep_catalog #catalogAllProductsBody,
body.kws-view-rep_catalog #catalogMyProductsBody { display: block !important; }
body.kws-repcatalog-all #catalogMyProductsWidget { display: none !important; }
body.kws-repcatalog-mine #catalogAllProductsWidget { display: none !important; }

/* Rep catalog segmented pill switcher — shown only in the rep_catalog view. */
.kws-segmented { display: none; }
body.kws-view-rep_catalog .kws-segmented {
    display: flex;
    gap: 0.4rem;
    padding: 0.3rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.kws-segmented button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 0.5rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.82rem;
    color: #475569;
    background: transparent;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.kws-segmented button:hover { background: #f1f5f9; }
.kws-segmented button.is-active {
    background: linear-gradient(90deg, #230535, #4C1D95);
    color: #FFD700;
    box-shadow: 0 4px 14px rgba(35, 5, 53, 0.25);
}

/* Rep KPI: the back button is redundant (nav handles switching) on the app shell. */
body.kanjo-shell-mobile #kpiBackToDashboardBtn { display: none !important; }

@media (min-width: 992px) {
    /* ── Right sidebar ─────────────────────────────────────────────────── */
    body.kanjo-shell-admin #kanjoWorkspaceSidebar,
    body.kanjo-shell-mobile #kanjoWorkspaceSidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 260px;
        z-index: 70;
        background: linear-gradient(180deg, #240038 0%, #3b0764 100%);
        border-left: 1px solid rgba(250, 204, 21, 0.25);
        box-shadow: -8px 0 30px rgba(35, 5, 53, 0.28);
    }

    /* Reserve the sidebar width; give content a clean slate canvas. */
    body.kanjo-shell-admin,
    body.kanjo-shell-mobile { padding-right: 260px; background: #f8fafc; }
    body.kanjo-shell-admin main,
    body.kanjo-shell-mobile main { max-width: 1440px; }

    /* The sidebar owns navigation now — drop the compact top tab bar. */
    body.kanjo-shell-admin #kanjoWorkspaceNav,
    body.kanjo-shell-mobile #kanjoWorkspaceNav { display: none !important; }

    /* Hide the header pill buttons that duplicate sidebar destinations. */
    body.kanjo-shell-admin #kpiNavBtnWrapper,
    body.kanjo-shell-admin #financialProfileBtnWrapper,
    body.kanjo-shell-admin #catalogAuditNavBtnWrapper,
    body.kanjo-shell-admin #marketingNavBtnWrapper,
    body.kanjo-shell-admin #blackBoxNavBtnWrapper,
    body.kanjo-shell-mobile #kpiNavBtnWrapper,
    body.kanjo-shell-mobile #financialProfileBtnWrapper,
    body.kanjo-shell-mobile #catalogAuditNavBtnWrapper,
    body.kanjo-shell-mobile #marketingNavBtnWrapper,
    body.kanjo-shell-mobile #blackBoxNavBtnWrapper { display: none !important; }

    /* ── Sidebar: brand ────────────────────────────────────────────────── */
    .ksb-brand { display: flex; align-items: center; gap: 0.7rem; padding: 1.05rem 0.95rem; border-bottom: 1px solid rgba(250, 204, 21, 0.18); }
    .ksb-logo { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: 0.9rem; padding: 3px; flex-shrink: 0; }
    .ksb-brand-title { display: block; font-weight: 900; font-size: 1.1rem; color: #fff; letter-spacing: 0.5px; line-height: 1.1; }
    .ksb-brand-title span { color: #facc15; }
    .ksb-brand-sub { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 3px; color: #c4b5fd; margin-top: 2px; }

    /* ── Sidebar: vertical nav ─────────────────────────────────────────── */
    #kanjoSidebarNav { flex: 1 1 auto; overflow-y: auto; padding: 0.75rem 0.6rem; }
    #kanjoSidebarNav .kws-nav-inner { flex-direction: column; gap: 0.3rem; }
    .kanjo-sidebar .kws-tab {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        padding: 0.7rem 0.85rem;
        font-size: 0.86rem;
        border-radius: 0.9rem;
        color: #e9d5ff;
    }
    .kanjo-sidebar .kws-tab .kws-tab-label-short { display: none; }
    .kanjo-sidebar .kws-tab .kws-tab-label { display: inline; flex: 1 1 auto; text-align: right; }
    .kanjo-sidebar .kws-tab .kws-tab-ic { font-size: 1.05rem; width: 1.5rem; text-align: center; flex: 0 0 auto; }
    .kanjo-sidebar .kws-tab.is-active {
        background: linear-gradient(90deg, #facc15, #FFD700);
        color: #230535;
        box-shadow: 0 6px 18px rgba(250, 204, 21, 0.45);
    }
    /* Micro-pill badge: a real flex item, cleanly pinned to the far-left edge. */
    .kanjo-sidebar .kws-badge {
        position: static;
        margin-right: auto;
        height: fit-content;
        line-height: 1;
        background: #facc15;
        color: #3b0764;
        border: none;
        border-radius: 99px;
        font-size: 11px;
        padding: 2px 8px;
        font-weight: 900;
        flex: 0 0 auto;
    }
    .kanjo-sidebar .kws-tab.is-active .kws-badge { background: var(--kanjo-purple); color: var(--kanjo-gold); }

    /* ── Sidebar: user + quick links footer ────────────────────────────── */
    .ksb-footer { margin-top: auto; border-top: 1px solid rgba(250, 204, 21, 0.18); padding: 0.75rem; }
    .ksb-user { display: flex; align-items: center; gap: 0.6rem; }
    .ksb-avatar { flex-shrink: 0; }
    .ksb-avatar img { width: 38px; height: 38px; border-radius: 9999px; object-fit: cover; border: 2px solid rgba(250, 204, 21, 0.6); }
    .ksb-user-meta { min-width: 0; flex: 1; }
    .ksb-user-name { display: block; color: #fff; font-weight: 800; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ksb-user-role { display: block; color: #c4b5fd; font-size: 0.66rem; font-weight: 700; margin-top: 1px; }
    .ksb-user-actions { display: flex; gap: 0.25rem; }
    .ksb-icon-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 0.7rem; color: #e9d5ff; background: rgba(255, 255, 255, 0.08); transition: background 0.15s, color 0.15s; }
    .ksb-icon-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
    .ksb-icon-btn.ksb-logout:hover { color: #fca5a5; }
    .ksb-notif-badge { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; border: 1px solid #240038; }
    .ksb-notif-badge.hidden { display: none; }
    .ksb-quick { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.6rem; }
    .ksb-quick:empty { display: none; }
    .ksb-quick button { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: right; padding: 0.55rem 0.7rem; border-radius: 0.7rem; font-size: 0.78rem; font-weight: 800; color: #e9d5ff; background: rgba(255, 255, 255, 0.06); transition: background 0.15s; }
    .ksb-quick button:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
    .ksb-quick button i { color: #facc15; }

    /* ── Bento card grid ───────────────────────────────────────────────── */
    #dashboardSection.kws-bento:not(.hidden) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 20px;
        align-items: start;
    }
    /* Every pane spans the full row by default; cards opt into a single column. */
    #dashboardSection.kws-bento > * { grid-column: 1 / -1; margin-top: 0 !important; }
    #dashboardSection.kws-bento > .kws-card { grid-column: span 1; }

    #dashboardSection.kws-bento > .kws-card {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 14px;
        min-height: 168px;
        padding: 20px;
        border-radius: 16px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
        overflow: visible;
    }
    #dashboardSection.kws-bento > .kws-card > button {
        width: 100%;
        justify-content: center;
        margin-top: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXECUTIVE SCREENS — Command Hub, Finance Hub, Flight Calendar, Export Studio
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hubs are shown only in their own workspace view (never for reps). */
.kws-hub-pane { display: none; }
body.kws-view-visits #kanjoCommandHub { display: block; }
body.kws-view-admin_finance #kanjoFinanceHub { display: block; }

/* ── Command Hub ───────────────────────────────────────────────────────── */
.kws-hub-head { margin-bottom: 1rem; }
.kws-hub-title { font-weight: 900; font-size: 1.35rem; color: #230535; margin: 0; }
.kws-hub-sub { font-weight: 700; font-size: 0.82rem; color: #64748b; margin: 0.25rem 0 0; }
.kws-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.kws-hub-card {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    border: 1px solid rgba(35, 5, 53, 0.1);
    box-shadow: 0 10px 30px rgba(35, 5, 53, 0.08);
}
.kws-hub-card-action { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.kws-hub-card-action:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(35, 5, 53, 0.14); }
.kws-hub-ic {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.9rem;
    font-size: 1.15rem;
    color: #FFD700;
    background: linear-gradient(135deg, #230535, #4C1D95);
}
.kws-hub-ic-gold { background: linear-gradient(135deg, #facc15, #FFD700); color: #230535; }
.kws-hub-body { min-width: 0; flex: 1; }
.kws-hub-body h3 { font-weight: 900; font-size: 0.98rem; color: #230535; margin: 0 0 0.25rem; }
.kws-hub-body p { font-weight: 700; font-size: 0.76rem; color: #64748b; margin: 0 0 0.6rem; line-height: 1.5; }
.kws-hub-search { position: relative; }
.kws-hub-search i { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.8rem; pointer-events: none; }
.kws-hub-search input {
    width: 100%;
    padding: 0.7rem 2.2rem 0.7rem 0.8rem;
    border-radius: 0.85rem;
    border: 2px solid rgba(35, 5, 53, 0.12);
    background: #fff;
    font-weight: 800;
    font-size: 0.82rem;
    color: #230535;
    outline: none;
}
.kws-hub-search input:focus { border-color: #230535; box-shadow: 0 0 0 4px rgba(35, 5, 53, 0.08); }
.kws-hub-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, #230535, #4C1D95);
    color: #FFD700; font-weight: 900; font-size: 0.78rem;
}
.kws-hub-utility { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.kws-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid rgba(35, 5, 53, 0.15);
    font-weight: 800; font-size: 0.8rem; color: #230535;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kws-pill:hover { background: #f5f3ff; }
.kws-pill.is-active { background: linear-gradient(90deg, #230535, #4C1D95); color: #FFD700; border-color: transparent; }
.kws-pill-ghost { background: transparent; border-color: transparent; color: #64748b; }
.kws-pill-ghost:hover { background: #f1f5f9; color: #230535; }

/* Hide the raw task board until a date is picked or a search begins. */
body.kanjo-shell-admin.kws-view-visits #tasksDateNav { display: none !important; }
body.kanjo-shell-admin.kws-view-visits:not(.kws-tasks-revealed) #tasksSearchWrapper,
body.kanjo-shell-admin.kws-view-visits:not(.kws-tasks-revealed) #tasksContainer { display: none !important; }

/* ── Finance Hub (admin_finance) ───────────────────────────────────────── */
.kws-fin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 960px;
}
.kws-fin-card {
    display: flex; flex-direction: column;
    padding: 1.4rem;
    border-radius: 1.35rem;
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.1);
    box-shadow: 0 14px 40px rgba(35, 5, 53, 0.08);
}
.kws-fin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.kws-fin-ic {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border-radius: 0.9rem; font-size: 1.1rem; color: #FFD700;
    background: linear-gradient(135deg, #230535, #4C1D95);
}
.kws-fin-ic-teal { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }
.kws-fin-badge { font-size: 0.72rem; font-weight: 900; color: #230535; background: #F5F3FF; border: 1px solid rgba(35, 5, 53, 0.1); padding: 0.3rem 0.7rem; border-radius: 9999px; }
.kws-fin-card h3 { font-weight: 900; font-size: 1rem; color: #230535; margin: 0 0 0.4rem; }
.kws-fin-amount { font-weight: 900; font-size: 1.9rem; color: #230535; line-height: 1.1; margin-bottom: 0.4rem; }
.kws-fin-card p { font-weight: 700; font-size: 0.78rem; color: #64748b; line-height: 1.55; margin: 0 0 1rem; }
.kws-cta-primary {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(90deg, #230535, #4C1D95);
    color: #FFD700; font-weight: 900; font-size: 0.85rem;
    transition: opacity 0.15s, transform 0.15s;
}
.kws-cta-primary:hover { opacity: 0.92; transform: translateY(-1px); }

/* The legacy full-width finance strips are replaced by the hub cards. */
body.kws-view-admin_finance #founderPayrollSummaryBox,
body.kws-view-admin_finance #merchantDocsAuditBanner { display: none !important; }

@media (max-width: 640px) {
    .kws-fin-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Command Hub: 2-column split (search | date strip & tasks) ─────────── */
.kws-visits-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 1.25rem;
    align-items: start;
}
.kws-visits-search,
.kws-visits-dates { min-width: 0; }

/* ── Premium horizontal date-strip carousel (visits hub) ───────────────── */
.kws-datestrip-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: 1.35rem;
    background: #fff;
    border: 1px solid rgba(35, 5, 53, 0.08);
    box-shadow: 0 14px 38px rgba(35, 5, 53, 0.08);
}
.kws-datestrip-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.kws-datestrip-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 900; color: #230535; font-size: 0.95rem; }
.kws-datestrip-title i { color: #facc15; }

/* The strip itself: evenly spaced pill cards, horizontally scrollable. */
.kws-datestrip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0.25rem 0.15rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.kws-datestrip::-webkit-scrollbar { height: 6px; }
.kws-datestrip::-webkit-scrollbar-thumb { background: rgba(35, 5, 53, 0.15); border-radius: 99px; }

.kds-day {
    position: relative;
    flex: 0 0 auto;
    min-width: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0.6rem 0.7rem 0.7rem;
    border-radius: 0.95rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    cursor: pointer;
    transition: background 0.16s, color 0.16s, transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.kds-day:hover { background: #f5f3ff; border-color: #c4b5fd; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(35, 5, 53, 0.1); }
.kds-wd { font-size: 0.68rem; font-weight: 800; opacity: 0.75; white-space: nowrap; }
.kds-num { font-size: 1.15rem; font-weight: 900; color: #230535; line-height: 1; }
.kds-day.is-today { border-color: rgba(250, 204, 21, 0.9); }
.kds-day.is-active {
    background: linear-gradient(135deg, #230535, #4C1D95);
    border-color: transparent;
    color: #FFD700;
    box-shadow: 0 10px 24px rgba(35, 5, 53, 0.3);
    transform: translateY(-2px);
}
.kds-day.is-active .kds-num { color: #FFD700; }
.kds-day.is-active .kds-wd { opacity: 0.9; }
.kds-dot {
    position: absolute;
    bottom: 0.3rem;
    width: 5px; height: 5px;
    border-radius: 9999px;
    background: #facc15;
}
.kds-day.is-active .kds-dot { background: #FFD700; }

/* Week navigation footer. */
.kws-datestrip-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kds-nav {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.8rem;
    background: #F5F3FF; color: #230535;
    font-weight: 800; font-size: 0.76rem;
    transition: background 0.15s, transform 0.15s;
}
.kds-nav:hover { background: #ede9fe; transform: translateY(-1px); }
.kds-nav-today { background: linear-gradient(90deg, #230535, #4C1D95); color: #FFD700; }
.kds-nav-today:hover { background: linear-gradient(90deg, #230535, #4C1D95); }

@media (max-width: 900px) {
    .kws-visits-top { grid-template-columns: 1fr; }
}

/* ── Catalog executive sub-tabs (centered premium switcher) ────────────── */
.kws-ctabs { display: flex; gap: 0.35rem; padding: 0.28rem; background: #F5F3FF; border-radius: 99px; }
.kws-ctabs button {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1rem; border-radius: 99px;
    font-weight: 800; font-size: 0.78rem; color: #475569;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.kws-ctabs button:hover { background: #ede9fe; }
.kws-ctabs button.is-active { background: linear-gradient(90deg, #230535, #4C1D95); color: #FFD700; box-shadow: 0 6px 16px rgba(35, 5, 53, 0.25); }
body.kws-view-catalog .kws-catalog-actions {
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    gap: 0.6rem;
}
body.kws-view-catalog .kws-catalog-actions .kws-catalog-actions-title { display: none; }
body.kws-view-catalog .kws-catalog-actions #openExportProductsBtn { display: none !important; }
body.kws-view-catalog .kws-catalog-actions .kws-ctabs { align-self: center; }

/* ── Export Studio extras ──────────────────────────────────────────────── */
.kws-export-searchwrap { position: relative; }
.kws-export-searchwrap i { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem; pointer-events: none; }
.kws-export-searchwrap input {
    width: 100%;
    padding: 0.8rem 2.4rem 0.8rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-weight: 800; font-size: 0.85rem; color: #230535; outline: none;
}
.kws-export-searchwrap input:focus { border-color: #230535; box-shadow: 0 0 0 4px rgba(35, 5, 53, 0.08); }
.kws-advanced { border: 1px solid #eef2f7; border-radius: 1rem; overflow: hidden; }
.kws-advanced > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1rem;
    font-weight: 900; font-size: 0.82rem; color: #230535;
    background: #f8fafc;
}
.kws-advanced > summary::-webkit-details-marker { display: none; }
.kws-advanced > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: auto; color: #94a3b8; transition: transform 0.15s; }
.kws-advanced[open] > summary::after { transform: rotate(180deg); }
.kws-advanced-body { padding: 0.9rem 1rem 1rem; }

/* Rep catalog keeps its own segmented switcher — no executive sub-tabs. */
body.kws-view-rep_catalog #kanjoCatalogTabs { display: none !important; }

/* ── Executive design tokens ───────────────────────────────────────────── */
:root {
    --kanjo-gold: #facc15;
    --kanjo-gold-strong: #FFD700;
    --kanjo-purple: #230535;
    --kanjo-purple-2: #4C1D95;
}

/* ── Legacy top header removal (desktop shell only) ────────────────────── */
@media (min-width: 992px) {
    body.kanjo-shell-admin > header,
    body.kanjo-shell-mobile > header { display: none !important; }
    body.kanjo-shell-admin #marketingBack,
    body.kanjo-shell-mobile #marketingBack { display: none !important; }
}

/* ── Floating notifications panel (decoupled from the legacy header) ───── */
#notificationsDropdown {
    position: fixed;
    top: 68px;
    right: 16px;
    width: min(90vw, 340px);
    max-height: min(72vh, 460px);
    background: #fff;
    border: 1px solid #f3e8ff;
    border-radius: 1.15rem;
    box-shadow: 0 24px 60px rgba(35, 5, 53, 0.24);
    z-index: 210;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#notificationsDropdown.hidden { display: none !important; }
@media (min-width: 992px) {
    body.kanjo-shell-admin #notificationsDropdown,
    body.kanjo-shell-mobile #notificationsDropdown { top: 16px; right: 272px; }
}

/* ── Resilient avatar fallback (initials on brand gradient) ────────────── */
.kanjo-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #230535, #4C1D95);
    color: #FFD700;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

/* ── Command Hub head + corner pill ────────────────────────────────────── */
.kws-hub-head {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.kws-pill-corner { flex-shrink: 0; }

/* Catalog view: finance/audit strips live in the finance hub, not here. */
body.kws-view-catalog #founderPayrollSummaryBox,
body.kws-view-catalog #merchantDocsAuditBanner { display: none !important; }

/* ── Marketing / Black Box router panes (Bug 4: no fixed overlays) ─────── */
.kws-overlay-pane {
    display: block;
    padding: 1.25rem;
}
.kws-overlay-pane.hidden { display: none !important; }
.kws-overlay-pane > div { margin-left: auto; margin-right: auto; }
#marketingSection { max-width: 1100px; margin-left: auto; margin-right: auto; }

/* ── Rep "daily work" 3-card bento (Bug 5) ─────────────────────────────── */
@media (min-width: 992px) {
    body.kanjo-shell-mobile.kws-view-rep_work #dashboardSection {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        align-items: start;
    }
    body.kanjo-shell-mobile.kws-view-rep_work #dashboardSection > * { grid-column: 1 / -1; }
    body.kanjo-shell-mobile.kws-view-rep_work #catalogRepBanner { grid-column: 1; }
    body.kanjo-shell-mobile.kws-view-rep_work #catalogDraftsWidget { grid-column: 2; }
    body.kanjo-shell-mobile.kws-view-rep_work #tasksDateNav { grid-column: 3; }
    body.kanjo-shell-mobile.kws-view-rep_work #dashboardActionBar { display: none !important; }
    body.kanjo-shell-mobile.kws-view-rep_work #pendingUploadsWidgetSlot { grid-column: 1 / -1; }
    /* The three bento cards get an equal, tidy height. */
    body.kanjo-shell-mobile.kws-view-rep_work #catalogRepBanner,
    body.kanjo-shell-mobile.kws-view-rep_work #catalogDraftsWidget,
    body.kanjo-shell-mobile.kws-view-rep_work #tasksDateNav { height: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Premium entry points — login portal + branded boot splash
   Royal purple (#230535 / #4C1D95) · Deep slate · Gold (#FFD700) · Orange #E57723
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes kanjoPortalRise {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kanjoAuroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-4%, 3%, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes kanjoPulseGlow {
    0%   { transform: scale(0.85); opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes kanjoBarShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Login portal ──────────────────────────────────────────────────────── */
.login-portal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    overflow: hidden;
    background:
        radial-gradient(1100px 620px at 82% -8%, rgba(76, 29, 149, 0.55), transparent 60%),
        radial-gradient(900px 560px at 8% 108%, rgba(229, 119, 35, 0.28), transparent 62%),
        linear-gradient(150deg, #12031f 0%, #230535 46%, #1b0a2e 100%);
}
.login-portal.hidden { display: none !important; }

.login-portal__aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(closest-side, rgba(255, 215, 0, 0.16), transparent 70%),
        radial-gradient(closest-side, rgba(149, 76, 233, 0.20), transparent 72%);
    filter: blur(10px);
    animation: kanjoAuroraDrift 14s ease-in-out infinite;
    pointer-events: none;
}

.login-portal__card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    animation: kanjoPortalRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-portal__logo {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-portal__logo img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.login-portal__logo-glow {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 215, 0, 0.42), transparent 72%);
    animation: kanjoPulseGlow 3.2s ease-out infinite;
}

.login-portal__title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.01em;
}
.login-portal__sub {
    margin-top: 0.4rem;
    margin-bottom: 1.6rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.7;
    color: rgba(233, 213, 255, 0.78);
}

.login-portal__field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.10);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-portal__field:focus-within {
    border-color: #FFD700;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.16);
}
.login-portal__field i { color: #FFD700; font-size: 1rem; }
.login-portal__field input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    text-align: center;
}
.login-portal__field input::placeholder { color: rgba(233, 213, 255, 0.55); letter-spacing: normal; font-weight: 700; }

.login-portal__btn {
    width: 100%;
    margin-top: 1.1rem;
    padding: 1rem;
    border-radius: 18px;
    font-size: 1.02rem;
    font-weight: 900;
    color: #230535;
    background: linear-gradient(135deg, #FFD700 0%, #E57723 100%);
    box-shadow: 0 16px 34px -14px rgba(229, 119, 35, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.login-portal__btn:hover { filter: brightness(1.06); box-shadow: 0 20px 40px -12px rgba(255, 215, 0, 0.85); }
.login-portal__btn:active { transform: translateY(1px) scale(0.99); }

@media (max-width: 420px) {
    .login-portal__card { padding: 2rem 1.35rem 1.6rem; border-radius: 24px; }
    .login-portal__title { font-size: 1.4rem; }
}

/* ── Branded boot splash ───────────────────────────────────────────────── */
.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    background: linear-gradient(150deg, #12031f 0%, #230535 50%, #1b0a2e 100%);
    transition: opacity 0.4s ease;
}
.boot-splash__bg {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(closest-side, rgba(76, 29, 149, 0.5), transparent 70%),
        radial-gradient(closest-side, rgba(229, 119, 35, 0.22), transparent 72%);
    filter: blur(8px);
    animation: kanjoAuroraDrift 12s ease-in-out infinite;
    pointer-events: none;
}
.boot-splash__inner {
    position: relative;
    width: 100%;
    max-width: 320px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.boot-splash__pulse {
    position: relative;
    width: 112px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.boot-splash__pulse-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 215, 0, 0.55);
    animation: kanjoPulseGlow 2.4s ease-out infinite;
}
.boot-splash__pulse-ring--2 { border-color: rgba(229, 119, 35, 0.55); animation-delay: 1.2s; }
.boot-splash__logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 22px rgba(255, 215, 0, 0.35));
    animation: kangarooHop 1.1s ease-in-out infinite;
}
.boot-splash__title {
    font-size: 1.7rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.04em;
}
.boot-splash__title span { color: #FFD700; }
.boot-splash__sub {
    margin-top: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    color: rgba(233, 213, 255, 0.72);
}
.boot-splash__bar {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.boot-splash__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #230535, #4C1D95, #E57723, #FFD700, #E57723, #4C1D95);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.7);
    animation: progressFill 0.9s linear forwards, kanjoBarShimmer 1.6s linear infinite;
}