/* ==========================================================================
   MyKhata360 — RETAIL PROTOTYPE LAYER
   --------------------------------------------------------------------------
   Brings every Retail business type (MacroCategory.Retail = 1: grocery,
   kirana, garment, footwear, cycle, toy, battery, mobile, pharmacy ...) to the
   look of the "MyKhata360 Retail Navigation — Blazor + MAUI" prototype
   (Oct 2026): its palette, radii, flat bordered panels, the logo brand block
   on the rail, the tinted-pill nav rows, and the light-orange dashboard hero
   with orange line-icon tiles.

   SCOPE. Every rule sits under `.rt-theme`, which MainLayout adds to the page
   wrapper when TokenStore.MacroCategory is Retail. Wholesale, services, food,
   manufacturing and Personal Finance never carry it. Garment (4), cycle (27)
   and sports (28) are Retail AND keep `.mk-theme-modern` + their identity
   class; `html:not(.dark) .rt-theme` outranks `.mk-theme-modern`, so the
   prototype palette wins for them too in light mode.

   THE PALETTE IS THE PF PROTOTYPE'S. The retail prototype and the PF one are
   the same design system (same orange #F97316, #BE4008 drawer band, #F7F8FC
   page, neutrals and radii), so the light values below mirror
   css/pf-prototype.css. They are restated rather than shared so either
   product can move without dragging the other — keep them in step on purpose.

   DARK MODE. The prototype has no dark mode, so dark keeps the app's own
   values; this file only adds dark twins for the tokens it introduces
   (`--mk-rt-*`).

   SPACING EXCEPTION. As in pf-prototype.css, padding/gap values are the
   prototype's own (17px, 23px ...) and sit off the --mk-s* scale on purpose.

   Twin of MyKhata360.Mobile/wwwroot/css/retail-prototype.css.
   ========================================================================== */

/* ── Structure (both themes) ──────────────────────────────────────────── */
.rt-theme {
  --mk-r-sm:  6px;     /* badges                                    */
  --mk-r-md:  9px;     /* buttons, inputs, nav rows, chips          */
  --mk-r-lg:  14px;    /* panels, cards                             */
  --mk-r-xl:  15px;    /* the dashboard hero                        */

  /* The prototype's rail is 238px, 76px as an icon rail. MainLayout's shell
     metrics are declared on :root and resolved there, so restate them. */
  --mk-sidebar:    238px;
  --mk-sidebar-sm: 76px;
  --sidebar-w:     238px;

  --mk-sh-sm: 0 2px 3px rgba(26, 34, 48, .016);
  --mk-sh-md: 0 0 0 1px var(--mk-border), 0 2px 3px rgba(26, 34, 48, .016);
  --mk-sh-lg: 0 12px 32px rgba(28, 38, 52, .13);

  /* ── Downstream aliases — must be re-declared, not inherited ──────────
     MyStackBlazor's --color-* (App.razor), MainLayout's --color-surface /
     --color-bg / --color-border and the --ek-* / --bs-* bridge (app.css) are
     all declared on :root as var(--mk-*), so they resolved against :root's
     values before this scope existed. Re-stating them here is what lets a
     StackCard, a StackInput border or the top bar follow the palette below.
     Anything added to those bridges must be mirrored here. */
  --color-primary:            var(--mk-primary);
  /* onprimary, not oncolor: dark mode lightens the orange, and white on it fell to ~2:1. */
  --color-primary-foreground: var(--mk-text-onprimary);
  --color-background:         var(--mk-bg-surface);
  --color-foreground:         var(--mk-text-strong);
  --color-card:               var(--mk-bg-surface);
  --color-card-foreground:    var(--mk-text-strong);
  --color-popover:            var(--mk-bg-surface);
  --color-popover-foreground: var(--mk-text-strong);
  --color-secondary:          var(--mk-bg-subtle);
  --color-secondary-foreground: var(--mk-text);
  --color-muted:              var(--mk-bg-subtle);
  --color-muted-foreground:   var(--mk-text-muted);
  --color-accent:             var(--mk-primary-soft);
  --color-accent-foreground:  var(--mk-primary-ink);
  --color-destructive:        var(--mk-danger);
  --color-border:             var(--mk-border);
  --color-input:              var(--mk-border-strong);
  --color-ring:               var(--mk-primary);
  --radius-sm:                var(--mk-r-sm);
  --radius-md:                var(--mk-r-md);
  --radius-lg:                var(--mk-r-lg);
  --color-surface:            var(--mk-bg-surface);
  --color-bg:                 var(--mk-bg-app);
  --color-brand:              var(--mk-primary);

  --bs-primary:     var(--mk-primary);
  --bs-primary-rgb: 194, 65, 12;
  --bs-body-color:  var(--mk-text);
  --bs-border-color: var(--mk-border);

  --ek-primary:    var(--mk-primary);
  --ek-primary-lt: var(--mk-primary-lt);
  --ek-text:       var(--mk-text);
  --ek-muted:      var(--mk-text-2);
  --ek-surface:    var(--mk-bg-app);
  --ek-border:     var(--mk-border);
  --ek-card:       var(--mk-bg-surface);
  --ek-r:          var(--mk-r-lg);
  --ek-r-btn:      var(--mk-r-md);
  --ek-shadow:     var(--mk-sh-sm);
  --ek-shadow-md:  var(--mk-sh-md);
}

/* ── Palette (light) — the prototype's values ─────────────────────────── */
html:not(.dark) .rt-theme {
  --mk-bg-app:         #F7F8FC;
  --mk-bg-surface:     #FFFFFF;
  --mk-bg-subtle:      #F6F7FA;
  --mk-bg-nav:         #FFFFFF;
  --mk-bg-nav-hover:   #F6F7FA;
  --mk-bg-nav-active:  #FFF1E5;
  --mk-bg-hover:       #FDF9F5;   /* table row hover — the prototype's warm tint */
  --mk-bg-table-head:  #FAFBFC;

  --mk-text:           #4C5565;
  --mk-text-strong:    #191F2D;
  --mk-text-2:         #687181;
  --mk-text-muted:     #687181;
  --mk-text-subtle:    #8A92A0;

  --mk-border:         #E3E5EA;
  --mk-border-solid:   #E3E5EA;
  --mk-border-strong:  #DFE3E9;

  --mk-primary:        #C2410C;
  --mk-primary-hover:  #E9610A;
  --mk-primary-active: #A63F0D;
  --mk-primary-ink:    #B14813;
  --mk-primary-lt:     #FFF1E5;
  --mk-primary-lt-2:   #FFF0E3;
  --mk-primary-soft:   #FFF1E5;
  --mk-primary-border: #F0C4A2;
  --mk-primary-muted:  #ECBD9B;
  --mk-text-link:      #B14813;
  --mk-focus:          #B44812;

  --mk-success:        #217649;
  --mk-success-fg:     #217649;
  --mk-success-lt:     #F0FAF3;
  --mk-danger:         #AD3030;
  --mk-danger-fg:      #AD3030;
  --mk-fin-positive:    #217649;
  --mk-fin-positive-fg: #217649;
  --mk-fin-positive-lt: #ECF7EF;
  --mk-fin-negative:    #AD3030;
  --mk-fin-negative-fg: #AD3030;
  --mk-fin-negative-lt: #FCEFEF;

  /* The dashboard hero is the prototype's "Today's sales" card: a pale
     orange wash, dark figures, warm-grey captions, white secondary buttons. */
  --mk-hero-bg:    linear-gradient(110deg, #FFF7EE 25%, #FFF2E3 100%);
  --mk-hero-fg:    #1B2230;
  --mk-hero-fg-2:  #786D67;
  --mk-hero-line:  #E6D8CD;
  --mk-hero-fill:  #FFFFFF;

  /* Tokens this layer introduces. Each has a dark twin below. */
  --mk-rt-tile-bg:       #FFF2E6;
  --mk-rt-tile-fg:       #BB4D16;
  --mk-rt-hover-border:  #ECBD9B;
  --mk-rt-hover-bg:      #FFF8F1;
  --mk-rt-note-bg:       #F8F9FB;
  --mk-rt-attn-bg:       #FFFBF7;
  --mk-rt-attn-border:   #F1DDC9;
  --mk-rt-attn-fg:       #865336;
  --mk-rt-avatar-bg:     #F0E8E2;
  --mk-rt-avatar-fg:     #984516;
  --mk-rt-drawer-brand:  #BE4008;
  --mk-rt-child-rule:    #EEE2D8;
  --mk-rt-active-fg:     #A63F0D;   /* text on an active/selected row — --mk-primary-active has no dark twin */
  --mk-rt-caption:       #8A92A0;   /* rail captions, icons, table heads */
}

html.dark .rt-theme {
  --mk-rt-tile-bg:       rgba(249, 115, 22, .16);
  --mk-rt-tile-fg:       #FDBA74;
  --mk-rt-hover-border:  rgba(249, 115, 22, .40);
  --mk-rt-hover-bg:      rgba(249, 115, 22, .08);
  --mk-rt-note-bg:       var(--mk-bg-subtle);
  --mk-rt-attn-bg:       rgba(249, 115, 22, .08);
  --mk-rt-attn-border:   rgba(249, 115, 22, .26);
  --mk-rt-attn-fg:       #FDBA74;
  --mk-rt-avatar-bg:     rgba(249, 115, 22, .18);
  --mk-rt-avatar-fg:     #FDBA74;
  --mk-rt-drawer-brand:  #9A3412;
  --mk-rt-child-rule:    var(--mk-border);
  --mk-rt-active-fg:     #FDBA74;
  --mk-rt-caption:       #A9A199;
}

.rt-theme :is(button, a, input, select, summary):focus-visible {
  outline: 2px solid var(--mk-focus);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — the rail
   NavMenu's own rules are component-scoped (`.nav-item[b-…] .nav-link`), so
   each selector here carries `.sidebar` to outrank them by one class.
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme .sidebar { background: var(--mk-bg-nav); border-right: 1px solid var(--mk-border); }

/* Brand block: the app mark, "MyKhata360" and the business type. */
/* nowrap: Bootstrap's .navbar wraps, which dropped the collapse control under the logo. */
.rt-theme .sidebar .nav-brand-row { min-height: 88px; flex-wrap: nowrap; border-bottom: 1px solid var(--mk-bg-subtle); }
.rt-theme .sidebar .nav-brand-row { padding-left: 4px; padding-right: 8px; }
.rt-theme .sidebar .nav-brand-row .rtx-brand { flex: 1 1 auto; min-width: 0; margin-right: 0; }
.rt-theme .sidebar .rtx-brand { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0; }
.rt-theme .sidebar .rtx-brand img { width: 37px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.rt-theme .rtx-brand-name { min-width: 0; display: block; }
.rt-theme .rtx-brand-name strong {
  display: block; font-size: var(--mk-fs-md); font-weight: var(--mk-fw-bold);
  letter-spacing: -.5px; line-height: 1.2; color: var(--mk-text-strong); white-space: nowrap;
}
.rt-theme .rtx-brand-name strong span { color: var(--mk-primary-ink); }
.rt-theme .rtx-brand-name small {
  display: block; margin-top: 2px; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-regular);
  letter-spacing: 0; color: var(--mk-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Nav rows: the prototype's 43px tinted pill, no left edge. */
.rt-theme .sidebar .nav-scrollable .nav { padding: 17px 0; gap: 0; }
.rt-theme .sidebar .nav-item { padding-left: 14px !important; padding-right: 14px !important; }
.rt-theme .sidebar .nav-item .nav-link {
  min-height: 43px; margin: 3px 0; padding: 10px 12px;
  border-left: 0; border-radius: var(--mk-r-md);
  font-size: var(--mk-t-body); color: var(--mk-text);
}
.rt-theme .sidebar .nav-item .nav-link .ni { width: 19px; height: 19px; margin: 0 11px 0 0; color: var(--mk-rt-caption); }
.rt-theme .sidebar .nav-item .nav-link:hover { background: var(--mk-bg-nav-hover); color: var(--mk-text-strong); }
.rt-theme .sidebar .nav-item a.active,
.rt-theme .sidebar .nav-item a.active:hover {
  background: var(--mk-bg-nav-active); color: var(--mk-rt-active-fg); font-weight: var(--mk-fw-semibold);
}
.rt-theme .sidebar .nav-item a.active .ni { color: var(--mk-primary-ink); }

/* Section headers are the prototype's uppercase captions (built by a
   RenderTreeBuilder, so unscoped — app.css holds their base rules). */
.page.rt-theme .nav-section-toggle { width: calc(100% - 28px); margin: 10px 14px 0; padding: 0 12px; color: var(--mk-rt-caption); }
.page.rt-theme .nav-section-toggle:hover { background: var(--mk-bg-nav-hover); color: var(--mk-text); }
.rt-theme .nav-section-label { letter-spacing: 1px; color: inherit; margin-top: 0; }
.rt-theme .nav-subgroup { color: var(--mk-rt-caption); }

/* The drawer (below the desktop tier): the brand block is the prototype's
   dark-orange band. */
@media (max-width: 1024.98px) {
  .rt-theme .sidebar .nav-brand-row { background: var(--mk-rt-drawer-brand); border-bottom: 0; }
  .rt-theme .rtx-brand-name strong,
  .rt-theme .rtx-brand-name strong span,
  .rt-theme .rtx-brand-name small { color: var(--mk-brand-mark-fg); }
  .rt-theme .sidebar .nav-item .nav-link { min-height: 44px; }
}

/* The 76px icon rail: icons only, centred. */
@media (min-width: 1025px) {
  .rt-theme .sidebar.desktop-collapsed .nav-item { padding-left: 12px !important; padding-right: 12px !important; }
  .rt-theme .sidebar.desktop-collapsed .nav-item .nav-link { justify-content: center; padding: 12px; }
  .rt-theme .sidebar.desktop-collapsed .nav-item .nav-link .ni { margin: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — the top bar
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {
  .rt-theme { --mk-topbar: 74px; --topbar-h: 74px; }
  .rt-theme main > .top-row { padding-left: 30px; padding-right: 30px; }
}
.rt-theme main > .top-row { background: var(--mk-bg-surface); border-bottom: 1px solid var(--mk-border); }
.rt-theme .hdr-welcome-text { font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.rt-theme .hdr-welcome-date { font-size: var(--mk-t-secondary-sm); color: var(--mk-rt-caption); }

/* Avatar: the prototype's warm initials disc instead of a solid orange one. */
.rt-theme .avatar-btn {
  width: 35px; height: 35px;
  background: var(--mk-rt-avatar-bg); color: var(--mk-rt-avatar-fg);
  font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-bold);
}
.rt-theme :is(.notif-bell-btn, .topbar-theme-btn) { border-radius: 10px; color: var(--mk-text-2); }

/* ══════════════════════════════════════════════════════════════════════
   EVERY RETAIL PAGE — shared building blocks in the prototype's shape.
   These restyle classes the retail screens already use, so no page has to
   opt in.
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme article.content { background: var(--mk-bg-app); color: var(--mk-text); }

/* MyStackBlazor buttons (id="ms-btn-…") and Bootstrap buttons: 42px, 9px radius, 600. */
.rt-theme [id^="ms-btn-"]:not(.mk-plain) {
  border-radius: var(--mk-r-md);
  min-height: 42px;
  padding-inline: 15px;
  font-weight: var(--mk-fw-semibold);
}
.rt-theme .btn { border-radius: var(--mk-r-md); font-weight: var(--mk-fw-semibold); }
.rt-theme .btn:not(.btn-sm):not(.btn-lg) { min-height: 42px; padding: 10px 15px; font-size: var(--mk-t-body); }
.rt-theme .btn-primary { --bs-btn-bg: var(--mk-primary); --bs-btn-border-color: var(--mk-primary);
  --bs-btn-hover-bg: var(--mk-primary-hover); --bs-btn-hover-border-color: var(--mk-primary-hover);
  --bs-btn-active-bg: var(--mk-primary-active); --bs-btn-active-border-color: var(--mk-primary-active);
  --bs-btn-color: var(--mk-text-onprimary); --bs-btn-hover-color: var(--mk-text-onprimary); }
.rt-theme .btn-outline-primary { --bs-btn-color: var(--mk-primary-ink); --bs-btn-border-color: var(--mk-border);
  --bs-btn-bg: var(--mk-bg-surface);
  --bs-btn-hover-bg: var(--mk-rt-hover-bg); --bs-btn-hover-color: var(--mk-rt-active-fg);
  --bs-btn-hover-border-color: var(--mk-rt-hover-border);
  --bs-btn-active-bg: var(--mk-primary-lt-2); --bs-btn-active-color: var(--mk-rt-active-fg);
  --bs-btn-active-border-color: var(--mk-primary-border); }
.rt-theme .btn-outline-secondary, .rt-theme .btn-light {
  --bs-btn-color: var(--mk-text); --bs-btn-bg: var(--mk-bg-surface); --bs-btn-border-color: var(--mk-border);
  --bs-btn-hover-bg: var(--mk-bg-subtle); --bs-btn-hover-color: var(--mk-text-strong); --bs-btn-hover-border-color: var(--mk-border);
}

/* Inputs: 43px, 8px radius, a pale-orange focus ring. */
.rt-theme :is(.form-control, .form-select):not(.form-control-sm):not(.form-select-sm) { min-height: 43px; }
.rt-theme :is(.form-control, .form-select) {
  border: 1px solid var(--mk-border-strong); border-radius: 8px;
  font-size: var(--mk-t-body); color: var(--mk-text-strong); background-color: var(--mk-bg-surface);
}
.rt-theme :is(.form-control, .form-select):focus {
  border-color: var(--mk-primary-border); box-shadow: 0 0 0 3px var(--mk-primary-lt-2);
}
.rt-theme .form-label { font-size: var(--mk-t-body); font-weight: var(--mk-fw-medium); color: var(--mk-text); }
.rt-theme .form-check-input:checked { background-color: var(--mk-primary); border-color: var(--mk-primary); }
.rt-theme .form-check-input:focus { border-color: var(--mk-primary-border); box-shadow: 0 0 0 3px var(--mk-primary-lt-2); }

/* Panels: white, hairline edge, 14px corners, almost no shadow. */
.rt-theme .card {
  border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg);
  box-shadow: var(--mk-sh-sm); background: var(--mk-bg-surface);
}
.rt-theme .card-header {
  background: var(--mk-bg-surface); border-bottom: 1px solid var(--mk-border);
  font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong);
}
.rt-theme .card-header:first-child { border-radius: var(--mk-r-lg) var(--mk-r-lg) 0 0; }

/* Badges and status pills: the prototype's 6px tag. */
.rt-theme .badge { border-radius: var(--mk-r-sm); font-weight: var(--mk-fw-medium); padding: 4px 8px; }

/* Bootstrap tables (documents, statements): muted 12px header on #FAFBFC. */
.rt-theme .table { --bs-table-hover-bg: var(--mk-bg-hover); color: var(--mk-text); }
.rt-theme .table > thead > tr > th {
  background: var(--mk-bg-table-head); color: var(--mk-rt-caption);
  font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium);
  border-bottom: 1px solid var(--mk-border);
}
.rt-theme .table > tbody > tr > td { border-bottom-color: var(--mk-bg-subtle); }

/* Segmented tabs -> the prototype's separate filter chips. */
.rt-theme .cycle-tabs { gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; }
.rt-theme .cycle-tab {
  min-height: 42px; padding: 10px 14px;
  border: 1px solid var(--mk-border); border-radius: 8px;
  background: var(--mk-bg-surface); color: var(--mk-text-2);
  font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-medium);
}
.rt-theme .cycle-tab:hover { color: var(--mk-text-strong); background: var(--mk-bg-subtle); }
.rt-theme .cycle-tab.is-on {
  background: var(--mk-primary-lt-2); color: var(--mk-rt-active-fg);
  border-color: var(--mk-primary-border); font-weight: var(--mk-fw-semibold);
}
.rt-theme .nav-tabs .nav-link.active,
.rt-theme .nav-pills .nav-link.active { color: var(--mk-rt-active-fg); }
.rt-theme .nav-pills .nav-link.active { background: var(--mk-primary-lt-2); }

/* Links in body copy use the AA-safe ink, never the 2.9:1 orange. */
.rt-theme article.content a:not([class]) { color: var(--mk-primary-ink); }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD — GenericBusinessDashboard (every retail vertical's home)
   The per-vertical theme data still arrives inline (KPI icon fills, ops
   link colours, tip colours); the prototype is one orange system, so those
   inline colours are overridden here, which needs !important.
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme .rd-banner.rd-banner-hero { border-radius: var(--mk-r-xl); box-shadow: 0 2px 4px rgba(65, 34, 13, .016); }
.rt-theme .rd-banner-hero .rd-banner-eyebrow { letter-spacing: 1.1px; font-weight: var(--mk-fw-medium); }
.rt-theme .rd-banner-hero .rd-banner-title { letter-spacing: -.7px; }
/* The bokeh circles were drawn in --mk-hero-fill, which is now white: on the pale
   wash they read as a white disc over the header buttons. The prototype has none. */
.rt-theme .rd-banner-hero .rd-banner-blob { display: none; }
.rt-theme .rd-banner-hero .rd-banner-art { background: var(--mk-rt-tile-bg); color: var(--mk-rt-tile-fg); border: 0; }
.rt-theme .rd-banner-hero .rd-banner-art .lc { width: 46%; height: 46%; }
.rt-theme .rd-btn { border-radius: var(--mk-r-md); font-weight: var(--mk-fw-semibold); }
.rt-theme .rd-btn:hover { transform: none; opacity: 1; filter: brightness(.97); }

/* KPI cards -> the prototype's stat cards with an orange icon tile. */
.rt-theme .rd-kpi-card { border-radius: 12px; box-shadow: none; }
.rt-theme .rd-kpi-icon {
  background: var(--mk-rt-tile-bg) !important; color: var(--mk-rt-tile-fg);
  border-radius: 11px;
}
.rt-theme .rd-kpi-icon .lc { width: 52%; height: 52%; }
.rt-theme .rd-kpi-lbl { text-transform: none; letter-spacing: 0; font-weight: var(--mk-fw-medium); color: var(--mk-text-2); }
.rt-theme .rd-kpi-val { font-weight: var(--mk-fw-semibold); letter-spacing: -.8px; }

/* Module shortcuts -> the prototype's quick-action buttons. */
.rt-theme .rd-tile-row { --hover-border: var(--mk-rt-hover-border) !important; --hover-color: var(--mk-text-strong) !important; gap: 10px; }
.rt-theme .rd-tile { border: 1px solid var(--mk-border); border-radius: 11px; color: var(--mk-text); }
.rt-theme .rd-tile:hover { background: var(--mk-rt-hover-bg); box-shadow: none; }
.rt-theme .rd-tile-icon { color: var(--mk-rt-tile-fg); display: inline-flex; }
.rt-theme .rd-tile-icon .lc { width: 21px; height: 21px; }
.rt-theme .rd-tile-label { font-weight: var(--mk-fw-medium); }

/* Operations links -> the prototype's two-column action grid. */
.rt-theme .dash-ops-link {
  background: var(--mk-bg-surface) !important; color: var(--mk-text) !important;
  border: 1px solid var(--mk-border); border-radius: var(--mk-r-md);
  min-height: 58px; font-weight: var(--mk-fw-medium);
}
.rt-theme .dash-ops-link:hover { opacity: 1; border-color: var(--mk-rt-hover-border); background: var(--mk-rt-hover-bg) !important; }
.rt-theme .dash-ops-link .lc { width: 19px; height: 19px; color: var(--mk-rt-tile-fg); }

/* Tip, info banners and "View all" links: one neutral note, one attention box, one ink. */
.rt-theme .dash-tip { background: var(--mk-rt-note-bg) !important; color: var(--mk-text-2) !important; border-radius: var(--mk-r-md) !important; }
.rt-theme .dash-tip strong { color: var(--mk-text-strong); }
.rt-theme .dash-info { background: var(--mk-rt-attn-bg) !important; border-color: var(--mk-rt-attn-border) !important; border-radius: 11px !important; }
.rt-theme .dash-info > div { color: var(--mk-rt-attn-fg) !important; }
.rt-theme .dash-link { color: var(--mk-primary-ink) !important; }

@media (max-width: 599.98px) {
  .rt-theme .rd-tile-row { gap: 8px; }
  .rt-theme .dash-ops-link { min-height: 52px; }
}

/* ══════════════════════════════════════════════════════════════════════
   POS (Billing.razor + the shared Pos* pieces)
   The POS draws its accent from the blue "info" tokens. Inside a retail
   POS they become the prototype's orange: the token itself takes the
   AA-safe ink (it colours text such as prices and the POS title), and the
   solid fills below take the brand orange, which carries white text.
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme .pos-root {
  --mk-fin-info:    var(--mk-primary-ink);
  --mk-fin-info-lt: var(--mk-primary-lt-2);
  --mk-fin-info-fg: var(--mk-rt-active-fg);
  --mk-fin-info-br: var(--mk-primary-border);
  --mk-info:        var(--mk-primary-ink);
  --mk-info-lt:     var(--mk-primary-lt-2);
  --mk-info-fg:     var(--mk-rt-active-fg);
}
.rt-theme .pos-root .pos-pay-btn.active,
.rt-theme .pos-root .pos-checkout-btn:not(:disabled) {
  background: var(--mk-primary); border-color: var(--mk-primary); color: var(--mk-text-onprimary);
}
.rt-theme .pos-root .pos-qty-btn:hover { background: var(--mk-primary); border-color: var(--mk-primary); }
.rt-theme .pos-root .pos-pay-btn { border-radius: var(--mk-r-md); }

/* ══════════════════════════════════════════════════════════════════════
   PHONE — top-bar wordmark and the tab bar
   The tab bar is rendered outside the themed .page wrapper, so it carries
   its own `.rtx-bottom` class and these rules are not scoped by .rt-theme.
   The class is doubled to outrank MainLayout.razor.css, whose scoped rules
   carry an extra [b-…] attribute on the More button.
   ══════════════════════════════════════════════════════════════════════ */

.rtx-mobile-brand { display: none; }
@media (max-width: 599.98px) {
  .rt-theme .rtx-mobile-brand {
    display: block; margin: 0 auto 0 9px; font-size: var(--mk-t-section-sm);
    font-weight: var(--mk-fw-bold); letter-spacing: -.6px; color: var(--mk-text-strong); white-space: nowrap;
  }
  .rt-theme .rtx-mobile-brand span { color: var(--mk-primary-ink); }
}

div.bottom-nav.rtx-bottom.rtx-bottom {
  min-height: 73px; align-items: center;
  padding: 7px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--mk-bg-surface); border-top: 1px solid var(--mk-border); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
div.bottom-nav.rtx-bottom.rtx-bottom .bottom-nav-item {
  min-height: 52px; margin: 0 2px; border-radius: 10px; gap: 5px;
  font-size: var(--mk-t-micro); color: var(--mk-text-2);
}
div.bottom-nav.rtx-bottom.rtx-bottom .bottom-nav-item.active {
  background: var(--mk-primary-lt-2); color: var(--mk-rt-active-fg); font-weight: var(--mk-fw-semibold);
}
div.bottom-nav.rtx-bottom.rtx-bottom .bottom-nav-item.active::before { display: none; }
div.bottom-nav.rtx-bottom.rtx-bottom .bn-icon { display: inline-flex; }
div.bottom-nav.rtx-bottom.rtx-bottom .bn-icon .lc { width: 22px; height: 22px; }