/* ==========================================================================
   MyKhata360 — PERSONAL FINANCE NOTEBOOK LAYER ("Bahi Khata -> Digital Khata")
   --------------------------------------------------------------------------
   Gives Personal Finance (BusinessType 100) the notebook look of the marketing
   site (website.css / design-tokens.css §15): warm paper, faint ruled lines,
   the red ledger margin, ink-navy headings, a highlighter, a sticky note and
   Kalam for a few hand-written words.

   THE SITE'S RULE STILL HOLDS: the notebook FRAMES the product, it never
   replaces it. Paper and rules sit behind the page; panels, tables and forms
   stay on clean surfaces. Kalam is only for labels of one to three words
   (kickers, the balance label, rail captions) — never sentences, never
   figures. Ledger red is ~4:1 on paper, so it is decoration (margin,
   underline) only; red TEXT uses --mk-nb-red-ink.

   SCOPE. Every rule sits under `.pf-theme`, so no other business type moves.
   Loaded after pf-prototype.css, whose tokens this file re-points; equal
   specificity, so load order decides.

   TOKENS. The notebook values are declared here as --mk-nb-* (light + dark
   twins) because Mobile has no --mk-site-* set to alias. They match the
   site's paper palette; change both together.

   Twin of MyKhata360.Mobile/wwwroot/css/pf-notebook.css — the two apps are
   parallel implementations, so a change here needs making there too. Only
   the SHELL section differs (Web: rail + top bar; Mobile: app bar + tab bar).
   ========================================================================== */

/* ── Structure (both themes) ──────────────────────────────────────────── */
.pf-theme {
  --mk-nb-hand:      'Kalam', cursive;
  --mk-nb-line:      32px;    /* ruled-line pitch, as on the site's hero    */
  --mk-nb-margin-x:  18px;    /* the red margin, from the page's left edge  */
  --mk-nb-page-r:    6px 14px 14px 6px;   /* bound edge left, free edge right */
}

/* ── Palette (light) — the site's paper ───────────────────────────────── */
html:not(.dark) .pf-theme {
  --mk-nb-paper:      #FFFDF7;
  --mk-nb-cover:      #F8F2E7;                  /* rail = notebook cover    */
  --mk-nb-rule:       rgba(23, 50, 77, .055);   /* ruled lines              */
  --mk-nb-margin:     rgba(217, 74, 74, .22);   /* red margin               */
  --mk-nb-red:        #D94A4A;                  /* pen underline (decor)    */
  --mk-nb-red-ink:    #B03A3A;                  /* red TEXT, 5:1 on paper   */
  --mk-nb-ink:        #17324D;                  /* ink navy                 */
  --mk-nb-highlight:  rgba(247, 201, 72, .45);  /* highlighter              */
  --mk-nb-tape:       rgba(247, 201, 72, .38);
  --mk-nb-stitch:     #DCCFBA;
  --mk-nb-gutter:     rgba(23, 50, 77, .07);    /* page curving into spine  */
  --mk-nb-sh-page:    0 2px 8px rgba(23, 50, 77, .06);
  --mk-nb-sh-lift:    0 12px 32px rgba(23, 50, 77, .08);

  /* Re-point the PF tokens at the paper. */
  --mk-bg-app:         var(--mk-nb-paper);
  --mk-bg-surface:     #FFFFFF;
  --mk-bg-subtle:      #FBF7EF;
  --mk-bg-container:   #F5EEE2;
  --mk-bg-container-2: #EEE5D6;
  --mk-bg-container-3: #F3ECE0;
  --mk-bg-nav:         var(--mk-nb-cover);
  --mk-bg-nav-hover:   #F1E8D9;
  --mk-bg-nav-active:  var(--mk-nb-highlight);
  --mk-pf-glass:       rgba(255, 253, 247, .96);

  --mk-pf-ink:         var(--mk-nb-ink);
  --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-fin-positive:    #16855B;
  --mk-fin-positive-fg: #16855B;
  --mk-success:         #16855B;
  --mk-success-fg:      #16855B;
  --mk-fin-negative:    var(--mk-nb-red-ink);
  --mk-fin-negative-fg: var(--mk-nb-red-ink);
  --mk-danger:          var(--mk-nb-red-ink);
  --mk-danger-fg:       var(--mk-nb-red-ink);

  --mk-hero-bg:            var(--mk-nb-paper);
  --mk-pf-balance-border:  #E7E0D4;
  --mk-pf-balance-line:    #E7E0D4;
  --mk-pf-balance-muted:   #5a6676;
  --mk-pf-attn-bg:         #FFF7D9;     /* sticky note */
  --mk-pf-attn-border:     #EFDD9C;
  --mk-pf-attn-fg:         #7A5A12;
  --mk-pf-attn-strong:     #5E4409;
  --mk-pf-attn-sub:        #74602F;
  --mk-pf-row-hover:       #FFFBEF;
  --mk-pf-th-bg:           transparent;
  --mk-pf-child-rule:      #E2D6C3;
}

/* ── Palette (dark) — a night notebook: same marks, low contrast ──────── */
html.dark .pf-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);

  /* Dark mode lightens every fill (orange #FB923C, red #F87171, green), and white on those
     measured 1.7–2.8:1 on primary buttons, avatars and "Mark Paid". Ink on them reads 7:1+. */
  --mk-text-oncolor:  #1A1206;
  --mk-primary-foreground: var(--mk-text-oncolor);   /* ~70 PF buttons read this one */
  /* The active segment / cycle tab writes in --mk-primary-active, which kept its light-mode
     dark orange: 2.4:1 on the dark tint. Light orange reads on it, and still works as a
     pressed-button fill now that on-colour text is ink. */
  --mk-primary-active: #FDBA74;
}

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

.pf-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);
}
@media (max-width: 599.98px) {
  .pf-theme { --mk-nb-margin-x: 8px; }
}

/* ── Headings: ink navy, with a pen stroke under the page title ──────── */
.pf-theme :is(.pfx-ph-title, .pfx-page-heading h1)::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;
}

/* Kickers ("New entry", "Edit") are hand-written in red ink. */
.pf-theme .pfx-form-kicker {
  font-family: var(--mk-nb-hand); font-size: var(--mk-pf-fs-19); font-weight: var(--mk-fw-bold);
  letter-spacing: 0; text-transform: none; color: var(--mk-nb-red-ink);
}

/* ── Panels: clean paper slips lifted off the page ───────────────────── */
.pf-theme .pfx-panel,
.pf-theme .pfx-directory-group,
.pf-theme .pfx-summary-stack > a,
.pf-theme .pfx-quick-actions > *,
.pf-theme .pfx-extras .db-card {
  border-color: var(--mk-border);
  box-shadow: var(--mk-nb-sh-page);
}
.pf-theme .pfx-panel-heading h2,
.pf-theme .pfx-directory-group > h2 { color: var(--mk-nb-ink); }

/* Ledger rows: a ruled line under each entry, a double rule under the head. */
.pf-theme .pfx-transaction-table th {
  border-bottom: 3px double var(--mk-border-strong);
  background: transparent; color: var(--mk-text-2);
}
.pf-theme .pfx-transaction-table td,
.pf-theme .pfx-record-row,
.pf-theme .pfx-extras .db-row { border-bottom-color: var(--mk-border); }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════════════ */

/* The balance card is a ledger page, taped to the desk. */
.pf-theme .pfx-balance-card {
  position: relative;
  --nb-card-margin: 40px;
  background-color: var(--mk-nb-paper);
  background-image:
    linear-gradient(to right, transparent 0, transparent var(--nb-card-margin),
      var(--mk-nb-margin) var(--nb-card-margin), var(--mk-nb-margin) calc(var(--nb-card-margin) + 2px),
      transparent calc(var(--nb-card-margin) + 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));
  border-radius: var(--mk-nb-page-r);
  box-shadow: var(--mk-nb-sh-lift);
  padding-left: calc(var(--nb-card-margin) + 18px);
}
.pf-theme .pfx-balance-card::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;
}
.pf-theme .pfx-balance-label {
  font-family: var(--mk-nb-hand); font-size: var(--mk-pf-fs-19); font-weight: var(--mk-fw-bold);
  letter-spacing: 0; text-transform: none; color: var(--mk-nb-ink);
}
.pf-theme .pfx-balance-value { color: var(--mk-nb-ink); }
.pf-theme .pfx-balance-footer { border-top: 2px solid var(--mk-nb-ink); }
@media (max-width: 599.98px) {
  .pf-theme .pfx-balance-card { --nb-card-margin: 24px; }
}

/* "Needs attention" is a sticky note. */
.pf-theme .pfx-attention {
  position: relative;
  border-radius: 4px 4px 12px 4px;
  box-shadow: var(--mk-nb-sh-page);
}

/* Category bars read as highlighter strokes on a ruled track. */
.pf-theme .pfx-bar-track { background: var(--mk-bg-container); }

/* ══════════════════════════════════════════════════════════════════════
   NOTEBOOK MARKS — used by page markup, not just restyled tokens
   ══════════════════════════════════════════════════════════════════════ */

/* The day heading of a ledger list, written in the margin ("Tue, 27 Oct"). */
.pf-theme .pfx-day-label {
  font-family: var(--mk-nb-hand); font-size: var(--mk-pf-fs-17); font-weight: var(--mk-fw-bold);
  line-height: 1.2; color: var(--mk-nb-red-ink);
}

/* A rubber stamp: "Paid" on a bill, "Settled" on a khata party. One per row, at most. */
.pf-theme .pfx-stamp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border: 2px solid currentColor; border-radius: var(--mk-r-sm);
  font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-5deg);
  background: color-mix(in srgb, var(--mk-bg-surface) 70%, transparent);
}
.pf-theme .pfx-stamp-ok  { color: var(--mk-fin-positive-fg); }
.pf-theme .pfx-stamp-due { color: var(--mk-nb-red-ink); }

/* Chart legends: the chart library writes its light-mode legend colour inline, which read
   1.3:1 on a dark card. Inline style, hence !important — the only one in this file. */
html.dark .pf-theme .apexcharts-legend-text { color: var(--mk-text-2) !important; }

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

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

/* "360" in the logo: brand orange is under 3:1 on the cream cover, 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) {
  .pf-theme .pfx-brand-name strong span { color: var(--mk-primary-ink); }
}

/* Section captions are hand-written, like tabs pencilled on a notebook. */
.pf-theme .pfx-nav-caption {
  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-text-2);
}

/* The open page is highlighted, not filled. */
.pf-theme .pfx-nav-link.active { color: var(--mk-nb-ink); }
.pf-theme .pfx-nav-link.active .lc { color: var(--mk-nb-ink); }

.pf-theme .pfx-sidebar-footer { border-top: 3px double var(--mk-border); }

/* Top bar: paper with the ledger's double rule beneath it. */
.pf-theme .top-row { border-bottom: 3px double var(--mk-border); }
.pf-theme .pfx-breadcrumbs span { color: var(--mk-nb-ink); }