/* ═══════════════════════════════════════════════════════════════
   rt-admin-theme.css  —  Royal Textiles Admin Global Design
   Applies premium table, badge, chip, and action-button styles
   across all admin pages. Include after styles.css in every page.
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   BRAND COLOR OVERRIDE
   Replaces Blue_Theme (#5d87ff) with Royal Maroon (#6b1a3a)
   and Gold (#B79557) across every Bootstrap component globally.
══════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme=light][data-color-theme=Blue_Theme]:root,
[data-bs-theme=dark][data-color-theme=Blue_Theme]:root {
    --bs-primary:              #6b1a3a !important;
    --bs-primary-rgb:          107, 26, 58 !important;
    --bs-light-primary:        rgba(107, 26, 58, 0.08) !important;
    --bs-primary-bg-subtle:    rgba(107, 26, 58, 0.08) !important;
    --bs-primary-border-subtle:rgba(107, 26, 58, 0.25) !important;
    --bs-primary-text-emphasis:#4e1129 !important;

    --bs-secondary:            #B79557 !important;
    --bs-secondary-rgb:        183, 149, 87 !important;
    --bs-light-secondary:      rgba(183, 149, 87, 0.1) !important;
    --bs-secondary-bg-subtle:  rgba(183, 149, 87, 0.1) !important;

    --bs-link-color:           #6b1a3a !important;
    --bs-link-hover-color:     #4e1129 !important;
}

/* btn-primary → maroon gradient */
[data-color-theme=Blue_Theme] .btn-primary,
.btn-primary {
    --bs-btn-bg:               #6b1a3a !important;
    --bs-btn-border-color:     #6b1a3a !important;
    --bs-btn-hover-bg:         #4e1129 !important;
    --bs-btn-hover-border-color:#4e1129 !important;
    --bs-btn-active-bg:        #3c0d1f !important;
    --bs-btn-color:            #fff !important;
    --bs-btn-hover-color:      #fff !important;
    background: linear-gradient(135deg, #6b1a3a, #4e1129) !important;
    border-color: #6b1a3a !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, #4e1129, #3c0d1f) !important;
    border-color: #4e1129 !important;
    box-shadow: 0 4px 14px rgba(107,26,58,.35) !important;
}

/* btn-secondary → gold */
[data-color-theme=Blue_Theme] .btn-secondary,
.btn-secondary {
    --bs-btn-bg:               #B79557 !important;
    --bs-btn-border-color:     #B79557 !important;
    --bs-btn-hover-bg:         #9a7c45 !important;
    --bs-btn-hover-border-color:#9a7c45 !important;
    --bs-btn-color:            #fff !important;
}

/* btn-outline-primary */
.btn-outline-primary {
    --bs-btn-color:            #6b1a3a !important;
    --bs-btn-border-color:     #6b1a3a !important;
    --bs-btn-hover-bg:         #6b1a3a !important;
    --bs-btn-hover-border-color:#6b1a3a !important;
    --bs-btn-hover-color:      #fff !important;
}

/* Sidebar active state */
.sidebar-link.active,
.sidebar-link:hover,
[data-simplebar] .sidebar-link.active {
    color: #6b1a3a !important;
}
.sidebar-link.active i,
.sidebar-link:hover i {
    color: #6b1a3a !important;
}
.sidebar-link.active::before,
.sidebar-link:hover::before {
    background: #6b1a3a !important;
}

/* Sidebar active left border / highlight */
.sidebar-item .sidebar-link.active {
    background: linear-gradient(90deg, rgba(107,26,58,.1) 0%, transparent 100%) !important;
    border-left: 3px solid #6b1a3a !important;
}

/* text-primary and related utilities */
.text-primary  { color: #6b1a3a !important; }
.bg-primary    { background-color: #6b1a3a !important; }
.border-primary{ border-color: #6b1a3a !important; }

/* bg-primary-subtle / text badges */
.bg-primary-subtle { background-color: rgba(107,26,58,.08) !important; }
.text-primary-emphasis { color: #4e1129 !important; }

/* Spinners, progress bars that inherit primary */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #6b1a3a !important; }

.progress-bar.bg-primary,
.progress-bar { background-color: #6b1a3a !important; }

/* Form focus rings */
.form-control:focus,
.form-select:focus {
    border-color: rgba(107,26,58,.5) !important;
    box-shadow: 0 0 0 .2rem rgba(107,26,58,.15) !important;
}

/* Preloader color */
.preloader .spinner-border { border-top-color: #6b1a3a !important; }

/* Pagination */
.page-link { color: #6b1a3a !important; }
.page-item.active .page-link {
    background-color: #6b1a3a !important;
    border-color: #6b1a3a !important;
    color: #fff !important;
}

/* Alerts */
.alert-primary {
    background-color: rgba(107,26,58,.08) !important;
    border-color: rgba(107,26,58,.2) !important;
    color: #4e1129 !important;
}

/* Badges */
.badge.bg-primary { background-color: #6b1a3a !important; }
.badge.bg-secondary { background-color: #B79557 !important; }

/* Nav pills / tabs */
.nav-pills .nav-link.active {
    background-color: #6b1a3a !important;
}
.nav-tabs .nav-link.active {
    color: #6b1a3a !important;
    border-bottom-color: #6b1a3a !important;
}
/* user-profile-tab uses nav-pills markup but underline style — reset pill fill */
.user-profile-tab .nav-link.active {
    background-color: transparent !important;
    color: #6b1a3a !important;
    border-bottom: 2px solid #6b1a3a !important;
}

/* Checkboxes / radios */
.form-check-input:checked {
    background-color: #6b1a3a !important;
    border-color: #6b1a3a !important;
}
.form-switch .form-check-input:checked {
    background-color: #6b1a3a !important;
    border-color: #6b1a3a !important;
}

/* Dropdown active item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #6b1a3a !important;
}

/* List group active */
.list-group-item.active {
    background-color: #6b1a3a !important;
    border-color: #6b1a3a !important;
}

/* Card header accent */
.card-header.bg-primary { background-color: #6b1a3a !important; }

/* Sweetalert confirm button */
.swal2-confirm { background-color: #6b1a3a !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar-thumb { background: rgba(107,26,58,.25) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(107,26,58,.45) !important; }

/* ── Tables ──────────────────────────────────────────────────── */
.table thead th {
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: #f8f9fa !important;
    border-bottom: 2px solid #e9ecef !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}
.table tbody td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
.table tbody tr { transition: background .15s; }
.table tbody tr:hover td { background: #fafbff !important; }
.table-hover tbody tr:hover td { background: #fafbff !important; }

/* ── ID / Reference chips ────────────────────────────────────── */
.rt-id-chip {
    display: inline-block;
    background: linear-gradient(135deg, #f3e8f0, #ecddf0);
    color: #6b1a3a;
    border: 1px solid rgba(107,26,58,.18);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    font-family: monospace;
}
.rt-inv-chip {
    display: inline-block;
    background: linear-gradient(135deg, #f3e8f0, #ecddf0);
    color: #6b1a3a;
    border: 1px solid rgba(107,26,58,.18);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    font-family: monospace;
}

/* ── Status badges ───────────────────────────────────────────── */
.rt-badge {
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 700;
    display: inline-block;
    line-height: 1.6;
    white-space: nowrap;
}
/* Green — paid, active, delivered, in-stock, approved */
.rt-badge-paid,
.rt-badge-active,
.rt-badge-instock,
.rt-badge-delivered,
.rt-badge-approved,
.rt-badge-read {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
/* Amber — pending, low-stock, partial, on-hold */
.rt-badge-partial,
.rt-badge-lowstock,
.rt-badge-on_hold {
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
}
/* Yellow — pending specifically */
.rt-badge-pending {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
/* Blue — confirmed, processing */
.rt-badge-confirmed,
.rt-badge-processing {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
/* Indigo — shipped, out-for-delivery */
.rt-badge-shipped,
.rt-badge-out_for_delivery {
    background: #f5f3ff;
    color: #4c1d95;
    border: 1px solid #ddd6fe;
}
/* Purple — refunded, reviewing */
.rt-badge-refunded,
.rt-badge-reviewing {
    background: #fdf4ff;
    color: #701a75;
    border: 1px solid #f0abfc;
}
/* Red — unpaid, cancelled, failed, out-of-stock, rejected */
.rt-badge-unpaid,
.rt-badge-cancelled,
.rt-badge-failed,
.rt-badge-outofstock,
.rt-badge-rejected {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
/* Gray — inactive, unread, draft */
.rt-badge-inactive,
.rt-badge-unread,
.rt-badge-draft {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* ── Money / Amount cells ─────────────────────────────────────── */
.rt-amount         { font-weight: 700; color: #6b1a3a; font-size: 13px; }
.rt-amount-muted   { color: #64748b; font-size: 13px; }
.rt-amount-danger  { color: #dc3545; font-weight: 700; }
.rt-amount-success { color: #198754; font-weight: 600; }
.rt-amount-crossed { color: #8592a3; text-decoration: line-through; font-size: 11px; }

/* ── Name cells ──────────────────────────────────────────────── */
.rt-name { font-weight: 600; font-size: 13px; color: #1e293b; line-height: 1.3; }
.rt-sub  { font-size: 11px; color: #8592a3; margin-top: 1px; line-height: 1.3; }

/* ── Stock pill ──────────────────────────────────────────────── */
.rt-stock {
    background: #f1f5f9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: inline-block;
}
.rt-stock.low  { background: #fff7ed; color: #9a3412; }
.rt-stock.zero { background: #fef2f2; color: #991b1b; }

/* ── Count pill ──────────────────────────────────────────────── */
.rt-count {
    background: #f1f5f9;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: inline-block;
}

/* ── Thumbnail ───────────────────────────────────────────────── */
.rt-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e9ecef;
    flex-shrink: 0;
}
.rt-thumb-lg {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    flex-shrink: 0;
}

/* ── Action buttons ──────────────────────────────────────────── */
.rt-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 6px;
    border: 1.5px solid #dee2e6;
    background: #fff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all .15s;
    vertical-align: middle;
    line-height: 1;
}
/* Intentionally no .rt-btn + .rt-btn margin here. Every admin page already
   spaces its action buttons via a flex `gap` (or a Bootstrap me-1/ms-1 utility)
   on the button's own container — an extra automatic sibling margin on top of
   that was compounding with it page after page (e.g. an 8px gap container plus
   this 4px margin read as 12px), which is why action buttons looked wider apart
   everywhere than any single page's own spacing rule intended. Each page now
   owns its own single source of truth for this spacing. */
.rt-btn:hover { border-color: #6b1a3a; color: #6b1a3a; background: #fdf6f9; }
.rt-btn.rt-btn-danger:hover  { border-color: #dc3545; color: #dc3545; background: #fff5f5; }
.rt-btn.rt-btn-success:hover { border-color: #198754; color: #198754; background: #f0fdf4; }
.rt-btn.rt-btn-primary {
    background: linear-gradient(135deg, #6b1a3a, #4e1129);
    color: #fff;
    border: none;
}
.rt-btn.rt-btn-primary:hover { opacity: .88; }

/* ── Date cell ───────────────────────────────────────────────── */
.rt-date { font-size: 12px; color: #8592a3; white-space: nowrap; }

/* ── Empty state ─────────────────────────────────────────────── */
.rt-empty {
    text-align: center;
    padding: 48px 20px;
    color: #94a3b8;
}
.rt-empty i { font-size: 40px; display: block; margin-bottom: 10px; opacity: .5; }
.rt-empty p { font-size: 13px; margin: 0; }

/* ── Card headers ────────────────────────────────────────────── */
.rt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
}
.rt-card-header .title {
    font-weight: 700;
    font-size: 14px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rt-card-header .title i { color: #6b1a3a; }

/* ── Filter chips row ────────────────────────────────────────── */
.rt-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
}
.rt-filter-row .btn-group .btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px !important;
}
.rt-filter-row .btn-group .btn.active {
    background: linear-gradient(135deg, #6b1a3a, #4e1129) !important;
    color: #fff !important;
    border-color: #6b1a3a !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination .page-link {
    font-size: 12px;
    padding: 5px 10px;
    color: #6b1a3a;
    border-color: #e9ecef;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #6b1a3a, #4e1129);
    border-color: #6b1a3a;
    color: #fff;
}
.pagination .page-link:hover { color: #6b1a3a; background: #fdf6f9; border-color: #e9ecef; }

/* ── Stat tiles ────────────────────────────────────────────────────────────
   Used by dashboard, restock-alerts, delivery-fees and database-backup.
   Defined ONCE here — each of those pages used to carry its own identical
   copy, which is how the four drifted apart in the first place.

   Same visual family as the status strips and report KPIs: compact,
   number-led, accent rule along the bottom, one icon as a watermark.
   The old design drew the icon twice (a coloured well AND the watermark)
   and put the number second in the reading order. */
.rt-stat-card {
    border-radius: 11px;
    border: 1px solid #e6e8ec;
    background: #fff;
    position: relative;
    overflow: hidden;
    min-height: 68px;
    box-shadow: 0 1px 2px rgba(107,26,58,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Bottom bar appears ONLY when the tile is genuinely a slice of a total and
   the page sets --share. Everywhere else there is no rule at all: a full-width
   coloured underline on an unrelated metric is decoration pretending to be
   data, and it made the cards read as broken. */
.rt-stat-card[style*="--share"]::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: #f1f5f9;
}
.rt-stat-card[style*="--share"]::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px;
    width: var(--share, 0%);
    background: var(--rt-sc-accent, #6b1a3a); opacity: .9;
    transition: width .35s ease;
}
.rt-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(107,26,58,.10);
    border-color: var(--rt-sc-accent, #6b1a3a);
}
.rt-stat-card .rt-sc-inner { padding: 10px 12px 13px; display: block; position: relative; z-index: 1; }
.rt-stat-card .rt-sc-icon  { display: none; }   /* the watermark is the icon */
.rt-stat-card .rt-sc-val   { font-size: 1.45rem; font-weight: 800; line-height: 1; margin-bottom: 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--rt-sc-accent, #6b1a3a); }
.rt-stat-card .rt-sc-lbl   { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #64748b; margin-top: 6px; }
.rt-stat-card .rt-sc-sub   { font-size: 10px; color: #94a3b8; margin-top: 4px; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3; }
.rt-stat-card .rt-sc-watermark,
.rt-stat-card .rt-sc-watermark.rt-kb-wm {
    position: absolute; right: -6px; top: 50%; transform: translateY(-50%); bottom: auto;
    height: 44px; width: auto; max-width: 56px;
    font-size: 46px;            /* for Tabler <i> glyphs, which ignore height */
    opacity: .10; pointer-events: none; line-height: 1;
    color: var(--rt-sc-accent, #6b1a3a);
}

/* Headline metric — filled, the way the strips treat their total tile */
/* Always brand maroon, matching the orders strip's total tile — a filled
   blue or red tile reads as a status, not a headline. */
.rt-stat-card.is-headline { background: #6b1a3a !important; border-color: #6b1a3a !important; }
.rt-stat-card.is-headline .rt-sc-val { color: #fff !important; font-size: 1.6rem; }
.rt-stat-card.is-headline .rt-sc-lbl { color: rgba(255,255,255,.82); }
.rt-stat-card.is-headline .rt-sc-sub { color: rgba(255,255,255,.72); }
.rt-stat-card.is-headline .rt-sc-watermark,
.rt-stat-card.is-headline .rt-sc-watermark.rt-kb-wm { color: #fff; opacity: .20; }
.rt-stat-card.is-headline::before,
.rt-stat-card.is-headline::after { display: none; }

/* Needs action — set by JS when the figure is non-zero */
.rt-stat-card.needs-action { background: #fffdf7; border-color: #fcd9a4; }
.rt-stat-card.needs-action .rt-sc-lbl::after {
    content: 'ACTION'; margin-left: 6px; padding: 1px 5px; border-radius: 20px;
    background: #fef3c7; color: #92400e; font-size: 8px; letter-spacing: .4px;
}
@media (prefers-reduced-motion: reduce) { .rt-stat-card, .rt-stat-card::after { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════
   TOPBAR HOVER-ICON MOTION — shared across every admin page.

   Adapted from itshover.com's filled-bell-icon and gear-icon (Apache-2.0),
   reimplemented as CSS keyframes/transitions since this is a plain
   HTML/jQuery admin with no React/motion runtime to run the source
   components directly. Previously lived inline in dashboard.html only;
   moved here so all 22 topbar pages share one definition rather than
   duplicating it per page.

   Requires the icon to be an inline <svg> — an icon-font <i> has no
   addressable inner parts to animate. The bell markup carries
   .bell-body / .bell-clapper with their own transform-box:fill-box and
   transform-origin set inline, so each part pivots from its own anchor
   point rather than the shared SVG viewBox origin.
   ══════════════════════════════════════════════════════════════════════ */
@keyframes rt-bell-swing   { 0%{transform:rotate(0)} 20%{transform:rotate(-8deg)} 40%{transform:rotate(6deg)}  60%{transform:rotate(-4deg)} 80%{transform:rotate(2deg)}  100%{transform:rotate(0)} }
@keyframes rt-bell-clapper { 0%{transform:rotate(0)} 20%{transform:rotate(20deg)} 40%{transform:rotate(-18deg)} 60%{transform:rotate(12deg)} 80%{transform:rotate(-6deg)} 100%{transform:rotate(0)} }
.rt-hicon-bell:hover .bell-body    { animation: rt-bell-swing .6s ease-in-out; }
.rt-hicon-bell:hover .bell-clapper { animation: rt-bell-clapper .6s ease-in-out .05s; }

.rt-hicon-gear .gear-rotator { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s ease-in-out; }
.rt-hicon-gear .gear-center  { transform-box: fill-box; transform-origin: center;  transition: transform .25s ease-out; }
.rt-hicon-gear:hover .gear-rotator { transform: rotate(360deg); }
.rt-hicon-gear:hover .gear-center  { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
    .rt-hicon-bell:hover .bell-body,
    .rt-hicon-bell:hover .bell-clapper { animation: none; }
    .rt-hicon-gear .gear-rotator,
    .rt-hicon-gear .gear-center { transition: none; }
}

/* ── Koboyo hand-drawn sidebar icons ──────────────────────────────────────
   Inlined as <svg>, never <img>: an SVG loaded through <img> is its own
   document, so fill="currentColor" resolves against itself and falls back to
   black instead of inheriting the link colour.
   Hand-drawn art is not a fixed grid — aspect ratios vary widely, so set the
   HEIGHT only and let width follow. Never force one into a square box. */
.sidebar-nav ul .sidebar-item .sidebar-link .rt-kb-nav {
  flex-shrink: 0;
  height: 21px;
  width: auto;
  max-width: 26px;
  display: block;
}
/* Collapsed mini-sidebar centres its icons; keep ours aligned the same way */
[data-sidebartype="mini-sidebar"] .sidebar-nav ul .sidebar-item .sidebar-link .rt-kb-nav {
  margin-inline: auto;
}

/* Koboyo icons used inside page content — header/decorative and empty states.
   Height only; width follows, because aspect ratios vary per icon. */
.rt-kb-inline { height: 17px; width: auto; display: inline-block; vertical-align: -3px; }
.rt-kb-empty  { height: 34px; width: auto; display: block; margin: 0 auto 6px; opacity: .65; }

/* ══ Status strip ══════════════════════════════════════════════════════════
   Shared by orders, wa-orders, transactions, exchange-requests and
   offline-billing. Lives here rather than being copy-pasted into each page,
   so the look can never drift between lists.

   Design intent: a record's status is usually a PIPELINE, not a flat list.
   The markup groups tiles as  total | pipeline | exceptions  so the layout
   encodes that. Each tile carries a share-of-total bar, which turns the strip
   from a filter into a read on where work is piling up. Tiles ARE the filter:
   click to narrow, click the active one to clear. */
.rt-os-bar { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.rt-os-grp { display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; flex:1 1 auto; }
.rt-os-sep { width:1px; background:#e6e8ec; align-self:stretch; margin:2px 4px; flex:0 0 1px; }

.rt-os {
  position:relative; overflow:hidden; flex:1 1 118px; min-width:104px;
  text-align:left; cursor:pointer; background:#fff;
  border:1px solid #e6e8ec; border-radius:11px;
  padding:10px 12px 13px; min-height:68px;
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.rt-os:hover { border-color:var(--os); box-shadow:0 4px 14px rgba(0,0,0,.07); transform:translateY(-1px); }
.rt-os:focus-visible { outline:2px solid var(--os); outline-offset:2px; }

.rt-os-n   { font-size:1.45rem; font-weight:800; line-height:1; color:var(--os); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.rt-os-l   { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#64748b; margin-top:5px; line-height:1.25; }
.rt-os-sub { font-size:9.5px; font-weight:600; color:#94a3b8; margin-top:3px; line-height:1.2; }

/* Share of total, flush to the bottom edge so it reads as a gauge */
.rt-os-bar-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:#f1f5f9; }
.rt-os-bar-fill  { height:100%; background:var(--os); width:0; transition:width .35s ease; }

/* Total: filled, so the summary never reads as just another status */
.rt-os-total { flex:0 0 142px; background:var(--os); border-color:var(--os); }
.rt-os-total .rt-os-n { color:#fff; font-size:1.7rem; }
.rt-os-total .rt-os-l { color:rgba(255,255,255,.82); }
.rt-os-total .rt-os-bar-track { display:none; }
.rt-os-total:hover { filter:brightness(1.08); }

/* Active: filled in its own colour — unmistakable which filter is on */
.rt-os.is-active { background:var(--os); border-color:var(--os); }
.rt-os.is-active .rt-os-n   { color:#fff; }
.rt-os.is-active .rt-os-l   { color:rgba(255,255,255,.85); }
.rt-os.is-active .rt-os-sub { color:rgba(255,255,255,.75); }
.rt-os.is-active .rt-os-bar-track { background:rgba(255,255,255,.28); }
.rt-os.is-active .rt-os-bar-fill  { background:rgba(255,255,255,.9); }

/* Empty status: quiet, but still a valid filter to click */
.rt-os.is-zero { background:#fafbfc; }
.rt-os.is-zero .rt-os-n { color:#cbd5e1; }
.rt-os.is-zero .rt-os-l { color:#a8b3c1; }
.rt-os-ex .rt-os { background:#fcfcfd; }
/* The exceptions group is sized to its content, so give it enough room for its
   tiles to sit side by side instead of stacking into a narrow column. */
.rt-os-grp.rt-os-ex { flex:0 1 auto; min-width:230px; }

/* Koboyo icon watermark — same device the dashboard tiles use */
.rt-os-ico {
  position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  height:44px; width:auto; max-width:56px;
  color:var(--os); opacity:.10; pointer-events:none;
}
.rt-os-total .rt-os-ico  { color:#fff; opacity:.20; }
.rt-os.is-active .rt-os-ico { color:#fff; opacity:.24; }
.rt-os.is-zero  .rt-os-ico { opacity:.05; }

@media (max-width: 991px) { .rt-os-sep { display:none; } .rt-os-total { flex:1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .rt-os, .rt-os-bar-fill { transition:none; } }

/* ── Status strip: loading skeleton ────────────────────────────────────────
   Shown while a period/date filter is refetching. The number is replaced by a
   shimmer of the SAME box size, so nothing shifts as values arrive — a card
   that jumps when data lands is worse than one that waits visibly. */
.rt-os-bar.is-loading .rt-os { pointer-events:none; }
.rt-os-bar.is-loading .rt-os-n,
.rt-os-bar.is-loading .rt-os-sub {
  color:transparent !important;
  border-radius:5px;
  background:linear-gradient(90deg,#e9edf2 25%,#f4f7fa 37%,#e9edf2 63%);
  background-size:400% 100%;
  animation:rt-os-shimmer 1.2s ease-in-out infinite;
}
.rt-os-bar.is-loading .rt-os-total .rt-os-n,
.rt-os-bar.is-loading .rt-os-total .rt-os-sub {
  background:linear-gradient(90deg,rgba(255,255,255,.20) 25%,rgba(255,255,255,.38) 37%,rgba(255,255,255,.20) 63%);
  background-size:400% 100%;
}
.rt-os-bar.is-loading .rt-os-bar-fill { width:0 !important; }
.rt-os-bar.is-loading .rt-os-ico { opacity:.05; }
@keyframes rt-os-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .rt-os-bar.is-loading .rt-os-n,
  .rt-os-bar.is-loading .rt-os-sub { animation:none; }
}

/* ── Report KPI tiles ──────────────────────────────────────────────────────
   Visually the same family as the status strip, but deliberately NOT the same
   component: report KPIs are heterogeneous metrics (rupees, counts, and even a
   product name), not one total split into parts. So there is no share bar —
   a "share" of mixed units is meaningless — and no click-to-filter, because a
   KPI is a readout, not a filter. */
.rt-kpi-bar { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.rt-kpi {
  position:relative; overflow:hidden; flex:1 1 190px; min-width:170px;
  background:#fff; border:1px solid #e6e8ec; border-radius:12px;
  border-top:3px solid var(--os); padding:14px 16px 15px; min-height:86px;
}
.rt-kpi-v {
  font-size:1.5rem; font-weight:800; line-height:1.15; color:var(--os);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
/* Long values — a product name in "Top Product" — step down instead of
   overflowing or being cut off mid-word. */
.rt-kpi-v.len-m { font-size:1.15rem; }
.rt-kpi-v.len-l { font-size:.95rem;  line-height:1.3; }
.rt-kpi-v.len-x { font-size:.82rem;  line-height:1.35; }
.rt-kpi-l {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:#64748b; margin-top:6px; line-height:1.3;
}
.rt-kpi-ico {
  position:absolute; right:-8px; bottom:-10px;
  height:56px; width:auto; max-width:70px;
  color:var(--os); opacity:.09; pointer-events:none;
}
/* Loading skeleton, same behaviour as the status strip: reserve the box so
   values don't shift the layout when they land. */
.rt-kpi-bar.is-loading .rt-kpi-v {
  color:transparent !important; border-radius:5px;
  background:linear-gradient(90deg,#e9edf2 25%,#f4f7fa 37%,#e9edf2 63%);
  background-size:400% 100%; animation:rt-os-shimmer 1.2s ease-in-out infinite;
}
.rt-kpi-bar.is-loading .rt-kpi-ico { opacity:.04; }
@media (prefers-reduced-motion: reduce) { .rt-kpi-bar.is-loading .rt-kpi-v { animation:none; } }