/* ==========================================================================
   MyKhata360 — RETAIL NOTEBOOK LAYER ("Bahi Khata -> Digital Khata")
   --------------------------------------------------------------------------
   The Personal Finance notebook look (css/pf-notebook.css), brought to every
   Retail business type: warm paper with faint ruled lines and the red ledger
   margin, the rail as a stitched notebook cover with a highlighter on the open
   page, Kalam for short captions, ledger double rules under the top bar and
   every grid header, the dashboard hero as a taped ledger page, and a rubber
   stamp on paid bills.

   THE SITE'S RULE STILL HOLDS: the notebook FRAMES the product, it never
   replaces it. Cards, grids, forms and the POS stay on clean surfaces; the POS
   is a working screen and gets no paper at all. Kalam is only for one to three
   words. Ledger red is decoration; red text uses --mk-nb-red-ink.

   SCOPE. Every rule sits under `.rt-theme` (MacroCategory.Retail). Loaded after
   retail-prototype.css, whose tokens this file re-points. retail-prototype.css
   re-declares the --color-* / --bs-* / --ek-* bridges on `.rt-theme` itself, so
   re-pointing a --mk-* token here reaches MyStackBlazor and Bootstrap too.

   PAGE TITLES. Retail pages have no shared header component, so js/nb-title.js
   marks each page's first heading with [data-nb-title] for the pen stroke.

   The --mk-nb-* values match pf-notebook.css and the marketing site's paper;
   change all three together. Twin of MyKhata360.Mobile/wwwroot/css/rt-notebook.css
   — only the SHELL section differs (Web: rail + top bar; Mobile: app bar + tab bar).
   ========================================================================== */

/* ── Structure (both themes) ──────────────────────────────────────────── */
.rt-theme {
  --mk-nb-hand:      'Kalam', cursive;
  --mk-nb-line:      32px;
  --mk-nb-margin-x:  18px;
  --mk-nb-page-r:    6px 14px 14px 6px;
}

/* ── Palette (light) — the site's paper ───────────────────────────────── */
html:not(.dark) .rt-theme {
  --mk-nb-paper:      #FFFDF7;
  --mk-nb-cover:      #F8F2E7;
  --mk-nb-rule:       rgba(23, 50, 77, .055);
  --mk-nb-margin:     rgba(217, 74, 74, .22);
  --mk-nb-red:        #D94A4A;
  --mk-nb-red-ink:    #B03A3A;
  --mk-nb-ink:        #17324D;
  --mk-nb-highlight:  rgba(247, 201, 72, .45);
  --mk-nb-tape:       rgba(247, 201, 72, .38);
  --mk-nb-stitch:     #DCCFBA;
  --mk-nb-gutter:     rgba(23, 50, 77, .07);
  --mk-nb-sh-page:    0 2px 8px rgba(23, 50, 77, .06);
  --mk-nb-sh-lift:    0 12px 32px rgba(23, 50, 77, .08);

  --mk-bg-app:         var(--mk-nb-paper);
  --mk-bg-subtle:      #FBF7EF;
  --mk-bg-nav:         var(--mk-nb-cover);
  --mk-bg-nav-hover:   #F1E8D9;
  --mk-bg-nav-active:  var(--mk-nb-highlight);
  --mk-bg-hover:       #FFFBEF;
  --mk-bg-table-head:  #FBF7EF;   /* sticky grid header: must stay opaque */

  --mk-text:           #1D2733;
  --mk-text-strong:    var(--mk-nb-ink);
  --mk-text-2:         #5a6676;   /* 4.8:1 on paper */
  --mk-text-muted:     #5a6676;
  --mk-text-subtle:    #8C8578;   /* decorative only */

  --mk-border:         #E7E0D4;
  --mk-border-solid:   #E7E0D4;
  --mk-border-strong:  #D9CFBF;

  --mk-hero-bg:        var(--mk-nb-paper);
  --mk-hero-fg:        var(--mk-nb-ink);
  --mk-hero-fg-2:      #5a6676;
  --mk-hero-line:      #E7E0D4;

  --mk-rt-active-fg:   var(--mk-nb-ink);   /* text on the highlighted nav row */
  --mk-rt-caption:     #6F695E;            /* rail captions, icons: 4.9:1 on the cover */
  --mk-rt-child-rule:  #E2D6C3;
  --mk-rt-attn-bg:     #FFF7D9;            /* "needs attention" is a sticky note */
  --mk-rt-attn-border: #EFDD9C;
  --mk-rt-attn-fg:     #5E4409;
}

/* ── Palette (dark) — a night notebook: same marks, low contrast ──────── */
html.dark .rt-theme {
  --mk-nb-paper:      var(--mk-bg-app);
  --mk-nb-cover:      var(--mk-bg-surface);
  --mk-nb-rule:       rgba(210, 228, 251, .045);
  --mk-nb-margin:     rgba(248, 113, 113, .22);
  --mk-nb-red:        #F87171;
  --mk-nb-red-ink:    #FCA5A5;
  --mk-nb-ink:        #D2E4FB;
  --mk-nb-highlight:  rgba(247, 201, 72, .16);
  --mk-nb-tape:       rgba(247, 201, 72, .18);
  --mk-nb-stitch:     rgba(255, 255, 255, .12);
  --mk-nb-gutter:     rgba(0, 0, 0, .28);
  --mk-nb-sh-page:    0 2px 8px rgba(0, 0, 0, .25);
  --mk-nb-sh-lift:    0 12px 32px rgba(0, 0, 0, .35);

  --mk-bg-nav-active: var(--mk-nb-highlight);
}

/* ══════════════════════════════════════════════════════════════════════
   THE PAGE — ruled paper with the red margin behind every retail screen
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme > main {
  background-color: var(--mk-nb-paper);
  background-image:
    linear-gradient(to right, transparent 0, transparent var(--mk-nb-margin-x),
      var(--mk-nb-margin) var(--mk-nb-margin-x), var(--mk-nb-margin) calc(var(--mk-nb-margin-x) + 2px),
      transparent calc(var(--mk-nb-margin-x) + 2px)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--mk-nb-line) - 1px),
      var(--mk-nb-rule) calc(var(--mk-nb-line) - 1px), var(--mk-nb-rule) var(--mk-nb-line));
  /* On desktop <main> is the scroll box; `local` makes the lines scroll with the writing. */
  background-attachment: local;
  /* The page curves into the binding: a soft shade along the spine. */
  box-shadow: inset 12px 0 14px -12px var(--mk-nb-gutter);
}
/* retail-prototype.css paints the content area solid, which would hide the rules. */
.rt-theme article.content { background: transparent; }
@media (max-width: 599.98px) {
  .rt-theme { --mk-nb-margin-x: 8px; }
}

/* The POS is a working screen: clean surface, no paper behind the cart. */
.rt-theme article.content:has(.pos-root) { background: var(--mk-bg-surface); }

/* ── The page title: ink navy with a pen stroke (marked by js/nb-title.js) ── */
.rt-theme [data-nb-title] { color: var(--mk-nb-ink); }
.rt-theme [data-nb-title]::after {
  content: ""; display: block;
  width: min(7.5rem, 60%); height: 10px; margin-top: 4px;
  background: var(--mk-nb-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 30 2, 70 10, 118 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 30 2, 70 10, 118 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: .85;
}

/* ── Panels and grids: clean paper slips lifted off the page ─────────── */
.rt-theme :is(.card, .rd-kpi-card, .rd-tile, .dash-ops-link) {
  border-color: var(--mk-border);
  box-shadow: var(--mk-nb-sh-page);
}

/* A ledger's double rule under every grid and table header. */
.page.rt-theme .mk-dg-table thead th,
.page.rt-theme .table > thead > tr > th { border-bottom: 3px double var(--mk-border-strong); }

/* "Needs attention" notes on the dashboard read as a sticky note. */
.rt-theme .dash-info { box-shadow: var(--mk-nb-sh-page); border-radius: 4px 4px 12px 4px !important; }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD — the hero is a ledger page, taped to the desk
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme .rd-banner.rd-banner-hero {
  position: relative; overflow: visible;
  background-color: var(--mk-nb-paper);
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--mk-nb-line) - 1px),
      var(--mk-nb-rule) calc(var(--mk-nb-line) - 1px), var(--mk-nb-rule) var(--mk-nb-line));
  border: 1px solid var(--mk-border);
  border-radius: var(--mk-nb-page-r);
  box-shadow: var(--mk-nb-sh-lift);
}
.rt-theme .rd-banner.rd-banner-hero::before {
  content: ""; position: absolute; top: -9px; left: 50%;
  width: 92px; height: 20px; margin-left: -46px;
  background: var(--mk-nb-tape); border-radius: 2px;
  transform: rotate(-2deg); pointer-events: none;
}
/* The eyebrow ("Today", the date) is hand-written. */
.rt-theme .rd-banner-hero .rd-banner-eyebrow {
  font-family: var(--mk-nb-hand); font-size: var(--mk-t-body); font-weight: var(--mk-fw-bold);
  letter-spacing: 0; text-transform: none; color: var(--mk-nb-red-ink);
}

/* RetailOverviewDashboard (the current retail home): its `ro-*` rules are component-scoped,
   one class plus the scope attribute — equal to these, and this sheet loads later. */
.rt-theme :is(.ro-kpi, .ro-card) { border-color: var(--mk-border); box-shadow: var(--mk-nb-sh-page); }
.rt-theme .ro-eyebrow {
  font-family: var(--mk-nb-hand); font-size: var(--mk-t-body); font-weight: var(--mk-fw-bold);
  letter-spacing: 0; text-transform: none; color: var(--mk-nb-red-ink);
}
.rt-theme .ro-warning { border-radius: 4px 4px 12px 4px; box-shadow: var(--mk-nb-sh-page); }

/* ══════════════════════════════════════════════════════════════════════
   NOTEBOOK MARKS — restyle classes the retail screens already render
   ══════════════════════════════════════════════════════════════════════ */

/* A paid bill is stamped, like a cleared page in a bahi khata. */
.page.rt-theme .invoice-status.paid {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border: 2px solid currentColor; border-radius: var(--mk-r-sm);
  background: color-mix(in srgb, var(--mk-bg-surface) 70%, transparent);
  color: var(--mk-success-fg);
  font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-5deg);
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — the rail is the notebook's cover, stitched at the spine
   ══════════════════════════════════════════════════════════════════════ */

.rt-theme .sidebar { background: var(--mk-nb-cover); }
.rt-theme .sidebar::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 6px;
  border-right: 2px dashed var(--mk-nb-stitch); pointer-events: none;
}
.rt-theme .sidebar .nav-brand-row { border-bottom: 3px double var(--mk-border); }

/* "360" in the logo: brand orange is 2.5:1 on the cream cover — below even the 3:1 large-text
   floor — so it takes the AA-safe ink orange. Desktop rail only: the drawer draws the logo
   on its orange band in white. */
@media (min-width: 1025px) {
  .rt-theme .rtx-brand-name strong span { color: var(--mk-primary-ink); }
}

/* Section captions are hand-written, like tabs pencilled on a notebook
   (built by a RenderTreeBuilder, so they are reachable only from a global sheet). */
.page.rt-theme .nav-section-toggle,
.page.rt-theme .nav-section-label {
  font-family: var(--mk-nb-hand); font-size: var(--mk-t-body); font-weight: var(--mk-fw-bold);
  letter-spacing: 0; text-transform: none;
}

/* The open page is highlighted, not filled. */
.rt-theme .sidebar .nav-item a.active .ni { color: var(--mk-nb-ink); }

/* Top bar: paper with the ledger's double rule beneath it. */
.rt-theme main > .top-row { background: var(--mk-nb-paper); border-bottom: 3px double var(--mk-border); }