/* ==========================================================================
   MyKhata360 — PERSONAL FINANCE PROTOTYPE LAYER
   --------------------------------------------------------------------------
   Brings Personal Finance (BusinessType 100) to the look of the MyKhata360
   Blazor/MAUI prototype (Oct 2026): its palette, radii and flat bordered
   panels as TOKENS, plus the shell (brand block, "Your workspace" + "Explore"
   rail, breadcrumb top bar, phone tab bar with a centre add button) and the
   dashboard / directory / page-heading pieces as `pfx-*` classes.

   SCOPE. Every rule sits under `.pf-theme`, the class MainLayout puts on the
   page wrapper for a Personal Finance tenant only — garment, cycle, hotel and
   restaurant carry `.mk-theme-modern` too, and must not change. The two
   exceptions are elements MainLayout renders OUTSIDE that wrapper (the phone
   tab bar), which carry their own `pfx-` class instead.

   LIGHT MODE is the prototype's exact palette. The prototype has no dark
   mode, so dark mode keeps css/pf-theme.css's values and this file only adds
   twins for the tokens it introduces (`--mk-pf-*`). Loaded after
   pf-theme.css; `html:not(.dark) .pf-theme` outranks `.mk-theme-modern`.

   SPACING EXCEPTION. Colours, radii, shadows and font sizes are all tokens,
   but padding / gap values are the prototype's own (23px, 17px, 19px...),
   which sit off the 8-point --mk-s* scale. They are literal here on purpose,
   so PF matches the prototype pixel for pixel; nothing outside this file
   should copy them.

   Twin of MyKhata360.Mobile/wwwroot/css/pf-prototype.css — the two apps are
   parallel implementations, so a change here needs making there too.
   ========================================================================== */

/* ── Structure (both themes) ──────────────────────────────────────────── */
.pf-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 balance card                                 */

  /* The prototype's rail is 238px wide and 76px as an icon rail. The shell
     reads --sidebar-w (resolved once on :root), so it is restated here. */
  --mk-sidebar:    238px;
  --mk-sidebar-sm: 76px;
  --sidebar-w:     238px;

  /* Flat panels: a hairline edge does the work a drop shadow used to. A card
     that only had a shadow (no border) gets the edge from the ring in -md. */
  --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);

  --mk-pf-brand-h: 88px;   /* the rail's brand block                       */

  /* The prototype's figure sizes that the --mk-t-* ramp has no step for. */
  --mk-pf-fs-balance:    42px;   /* "Available to spend"                       */
  --mk-pf-fs-balance-sm: 38px;   /* ... on a phone                             */
  --mk-pf-fs-balance-md: 35px;   /* ... on a tablet                            */
  --mk-pf-fs-stat:       23px;   /* summary-stack figures                      */
  --mk-pf-fs-stat-sm:    21px;
  --mk-pf-fs-19:         19px;
  --mk-pf-fs-17:         17px;
  --mk-pf-fs-h1-md:      26px;   /* page title, tablet                         */
  --mk-pf-fs-h1-sm:      25px;   /* page title, phone                          */
}

/* ── Palette (light) — the prototype's values ─────────────────────────── */
html:not(.dark) .pf-theme {
  --mk-bg-app:         #F7F8FC;
  --mk-bg-surface:     #FFFFFF;
  --mk-bg-subtle:      #F6F7FA;
  --mk-bg-container:   #F0F2F7;
  --mk-bg-container-2: #E9ECF1;
  --mk-bg-container-3: #F1F2F6;
  --mk-bg-nav:         #FFFFFF;
  --mk-bg-nav-hover:   #F6F7FA;
  --mk-bg-nav-active:  #FFF1E5;
  --mk-pf-glass:       rgba(255, 255, 255, .97);

  --mk-pf-ink:         #191F2D;
  --mk-text:           #303847;
  --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:  #D3D9E1;

  --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-fin-positive:    #217649;
  --mk-fin-positive-fg: #217649;
  --mk-fin-positive-lt: #ECF7EF;
  --mk-fin-positive-br: #BFE5CB;
  --mk-fin-negative:    #AD3030;
  --mk-fin-negative-fg: #AD3030;
  --mk-fin-negative-lt: #FCEFEF;
  --mk-fin-negative-br: #F1C9C9;
  --mk-success:         #217649;
  --mk-success-fg:      #217649;
  --mk-success-lt:      #F0FBF3;
  --mk-danger:          #AD3030;
  --mk-danger-fg:       #AD3030;

  --mk-hero-bg:         #FFF7EE;

  /* Tokens this layer introduces. Each has a dark twin below. */
  --mk-pf-balance-bg:     linear-gradient(110deg, #FFF7EE 25%, #FFF2E3 100%);
  --mk-pf-balance-border: #E6D8CD;
  --mk-pf-balance-line:   #E4D7CB;
  --mk-pf-balance-muted:  #786D67;
  --mk-pf-avatar-bg:      #F0E8E2;
  --mk-pf-avatar-fg:      #984516;
  --mk-pf-drawer-brand:   #BE4008;
  --mk-pf-attn-bg:        #FFFBF7;
  --mk-pf-attn-border:    #F1DDC9;
  --mk-pf-attn-fg:        #865336;
  --mk-pf-attn-strong:    #724728;
  --mk-pf-attn-sub:       #927055;
  --mk-pf-tile-bg:        #FFF2E6;
  --mk-pf-tile-fg:        #BB4D16;
  --mk-pf-tile-green-bg:  #ECF7EF;
  --mk-pf-tile-green-fg:  #347752;
  --mk-pf-tile-gray-bg:   #F0F2F7;
  --mk-pf-tile-gray-fg:   #6B7280;
  --mk-pf-bar:            #D44444;
  --mk-pf-bar-track:      #F1F2F6;
  --mk-pf-row-hover:      #FDF9F5;
  --mk-pf-th-bg:          #FAFBFC;
  --mk-pf-hover-border:   #EBC3A5;
  --mk-pf-child-rule:     #EEE2D8;
}

/* ── Dark twins for the tokens above (dark mode is otherwise pf-theme.css) */
html.dark .pf-theme {
  --mk-pf-balance-bg:     linear-gradient(110deg, rgba(249, 115, 22, .10) 25%, rgba(249, 115, 22, .17) 100%);
  --mk-pf-balance-border: rgba(249, 115, 22, .28);
  --mk-pf-balance-line:   rgba(255, 255, 255, .10);
  --mk-pf-balance-muted:  var(--mk-text-2);
  --mk-pf-avatar-bg:      rgba(249, 115, 22, .18);
  --mk-pf-avatar-fg:      #FDBA74;
  --mk-pf-drawer-brand:   #9A3412;
  --mk-pf-attn-bg:        rgba(249, 115, 22, .08);
  --mk-pf-attn-border:    rgba(249, 115, 22, .26);
  --mk-pf-attn-fg:        #FDBA74;
  --mk-pf-attn-strong:    #FED7AA;
  --mk-pf-attn-sub:       var(--mk-text-2);
  --mk-pf-tile-bg:        rgba(249, 115, 22, .16);
  --mk-pf-tile-fg:        #FDBA74;
  --mk-pf-tile-green-bg:  rgba(74, 222, 128, .14);
  --mk-pf-tile-green-fg:  #86EFAC;
  --mk-pf-tile-gray-bg:   var(--mk-bg-container);
  --mk-pf-tile-gray-fg:   var(--mk-text-2);
  --mk-pf-bar:            #F87171;
  --mk-pf-bar-track:      var(--mk-bg-container);
  --mk-pf-row-hover:      rgba(255, 255, 255, .03);
  --mk-pf-th-bg:          var(--mk-bg-subtle);
  --mk-pf-hover-border:   rgba(249, 115, 22, .40);
  --mk-pf-child-rule:     var(--mk-border);
}

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

.pf-theme .pfx-money { font-variant-numeric: tabular-nums; }
.pf-theme .pfx-pos { color: var(--mk-fin-positive-fg) !important; }
.pf-theme .pfx-neg { color: var(--mk-fin-negative-fg) !important; }

/* ══════════════════════════════════════════════════════════════════════
   SHELL — the rail
   ══════════════════════════════════════════════════════════════════════ */

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

.pf-theme .pfx-brand {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--mk-pf-brand-h);
  padding: 22px 21px 19px;
  border-bottom: 1px solid var(--mk-bg-subtle);
  flex-shrink: 0;
  text-decoration: none;
}
.pf-theme .pfx-brand img { width: 37px; height: 38px; border-radius: 11px; flex-shrink: 0; }
.pf-theme .pfx-brand-name { min-width: 0; }
.pf-theme .pfx-brand-name strong {
  display: block; font-size: var(--mk-t-section-sm); font-weight: var(--mk-fw-bold);
  letter-spacing: -.5px; color: var(--mk-text-strong); line-height: 1.2;
}
.pf-theme .pfx-brand-name strong span { color: var(--mk-primary-ink); }
.pf-theme .pfx-brand-name small {
  display: block; margin-top: 2px; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2);
}

/* nowrap: Bootstrap's .nav wraps, and a WRAPPING column flexbox sizes its line to the widest
   label, which pushed an open group's rows (Upcoming commitments) past the rail's edge. */
.pf-theme .pfx-nav-body { padding: 17px 14px; flex-wrap: nowrap; }
.pf-theme .pfx-nav-body > * { min-width: 0; }

.pf-theme .pfx-nav-caption {
  margin: 10px 12px; font-size: var(--mk-t-micro); font-weight: var(--mk-fw-bold);
  letter-spacing: 1px; text-transform: uppercase; color: var(--mk-text-subtle);
}
.pf-theme .pfx-gap { margin-top: 22px !important; }

.pf-theme .pfx-nav-link {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 43px; margin: 3px 0; padding: 10px 12px;
  border: 0; border-radius: var(--mk-r-md); background: none;
  font: inherit; font-size: var(--mk-t-body); text-align: left; text-decoration: none;
  color: var(--mk-text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-theme .pfx-nav-link .lc { width: 19px; height: 19px; flex-shrink: 0; color: var(--mk-text-subtle); }
.pf-theme .pfx-nav-link:hover { background: var(--mk-bg-nav-hover); color: var(--mk-text-strong); }
.pf-theme .pfx-nav-link.active {
  background: var(--mk-bg-nav-active); color: var(--mk-primary-active); font-weight: var(--mk-fw-semibold);
}
.pf-theme .pfx-nav-link.active .lc { color: var(--mk-primary-ink); }

.pf-theme .pfx-group-toggle { justify-content: space-between; }
.pf-theme .pfx-label-icon { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pf-theme .pfx-group-toggle .pfx-chevron { width: 14px; height: 14px; transition: transform .15s; }
.pf-theme .pfx-group-toggle[aria-expanded="true"] .pfx-chevron { transform: rotate(180deg); }

.pf-theme .pfx-nav-children {
  margin: 0 0 7px 21px; padding-left: 23px;
  border-left: 1px solid var(--mk-pf-child-rule);
}
.pf-theme .pfx-nav-children .pfx-nav-link { min-height: 37px; padding: 7px 9px; font-size: var(--mk-t-body); }
.pf-theme .pfx-nav-children .pfx-nav-link .lc { display: none; }

.pf-theme .pfx-sidebar-footer { padding: 11px 14px; border-top: 1px solid var(--mk-border); flex-shrink: 0; }
.pf-theme .pfx-sidebar-footer .pfx-nav-link { margin: 1px 0; }

/* Collapse on the desktop rail, "close" in the drawer. */
.pf-theme .pfx-only-drawer { display: none; }
@media (max-width: 1024.98px) {
  .pf-theme .pfx-only-desktop { display: none; }
  .pf-theme .pfx-only-drawer { display: flex; }

  /* In the drawer the brand block is the prototype's dark-orange band. */
  .pf-theme .pfx-brand { background: var(--mk-pf-drawer-brand); border-bottom: 0; padding: 20px; }
  .pf-theme .pfx-brand-name strong,
  .pf-theme .pfx-brand-name strong span,
  .pf-theme .pfx-brand-name small { color: var(--mk-brand-mark-fg); }
  .pf-theme .pfx-nav-link { min-height: 44px; }
}

/* The 76px icon rail: icons only, centred; groups expand the rail when clicked. */
@media (min-width: 1025px) {
  .pf-theme .sidebar.desktop-collapsed .pfx-brand { padding: 22px 18px; justify-content: center; }
  .pf-theme .sidebar.desktop-collapsed .pfx-nav-body { padding: 16px 12px; }
  .pf-theme .sidebar.desktop-collapsed .pfx-nav-link { justify-content: center; padding: 12px; }
  .pf-theme .sidebar.desktop-collapsed .pfx-label-icon { gap: 0; }
  .pf-theme .sidebar.desktop-collapsed .pfx-sidebar-footer { padding: 10px 12px; }
  .pf-theme .sidebar.desktop-collapsed :is(.pfx-nav-caption, .pfx-nav-children, .pfx-chevron) { display: none; }
}

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

.pf-theme .top-row { background: var(--mk-pf-glass); border-bottom: 1px solid var(--mk-border); }

.pf-theme .pfx-breadcrumbs {
  /* Never squeezed by the search box beside it: the page name is the point of the crumb. */
  display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: 10px;
  font-size: var(--mk-t-secondary); color: var(--mk-text-subtle);
}
.pf-theme .pfx-breadcrumbs a { color: var(--mk-text-subtle); text-decoration: none; white-space: nowrap; }
.pf-theme .pfx-breadcrumbs a:hover { color: var(--mk-primary-ink); }
.pf-theme .pfx-breadcrumbs .lc { width: 13px; height: 13px; flex-shrink: 0; }
.pf-theme .pfx-breadcrumbs span {
  color: var(--mk-text); font-weight: var(--mk-fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-theme .pfx-mobile-brand { display: none; }

/* Avatar trigger: initials, first name, caret — behind a hairline divider. */
.pf-theme .avatar-btn.pfx-avatar-btn {
  width: auto; height: 44px; border-radius: 0; background: transparent; color: var(--mk-text);
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 0 16px; margin-left: 2px; border-left: 1px solid var(--mk-border);
  font-size: var(--mk-t-body); font-weight: var(--mk-fw-medium);
}
.pf-theme .avatar-btn.pfx-avatar-btn:hover { opacity: 1; color: var(--mk-text-strong); }
.pf-theme .pfx-avatar {
  width: 35px; height: 35px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mk-pf-avatar-bg); color: var(--mk-pf-avatar-fg);
  font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-bold);
}
.pf-theme .pfx-avatar-btn .lc { width: 14px; height: 14px; color: var(--mk-text-2); }

.pf-theme .hdr-add {
  min-height: 42px; border-radius: var(--mk-r-md); padding: 10px 15px;
  font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold);
}
.pf-theme .hdr-add:hover { background: var(--mk-primary-hover); }

@media (max-width: 1024.98px) {
  .pf-theme .pfx-avatar-name, .pf-theme .pfx-avatar-btn .lc { display: none; }
  .pf-theme .avatar-btn.pfx-avatar-btn { border-left: 0; padding-left: 4px; }
}
@media (max-width: 599.98px) {
  .pf-theme .pfx-breadcrumbs { display: none; }
  .pf-theme .pfx-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);
  }
  .pf-theme .pfx-avatar { width: 34px; height: 34px; }

  /* The prototype's phone bar is menu · wordmark · avatar. Search and the period picker do
     not fit beside it at 390px (the bar used to overflow the page sideways), so they take a
     second row instead of being dropped. + Add is the tab bar's centre button, the bell is
     in the avatar menu, and the theme switch is in Settings, so those three go. hdr-right
     becomes `display: contents` so its children can be ordered across both rows.
     (Selectors carry .top-row so they outrank MainLayout's scoped rules.) */
  .pf-theme main > .top-row {
    height: auto; min-height: 65px; flex-wrap: wrap; row-gap: 8px; padding: 8px 16px;
  }
  .pf-theme .top-row .hdr-right { display: contents; }
  .pf-theme .top-row :is(.hdr-add, .notif-bell-btn, .notif-badge, .topbar-theme-btn) { display: none; }
  .pf-theme .top-row .pfx-mobile-brand { order: 1; }
  .pf-theme .top-row .pfx-avatar-btn { order: 2; }
  .pf-theme .top-row .tbs { order: 3; flex: 1 1 0; min-width: 0; }
  .pf-theme .top-row .hdr-period { order: 4; flex: 0 1 auto; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   SHELL — phone tab bar (rendered outside .pf-theme, so not scoped by it)
   Home · Transactions · (+) · Insights · More
   ══════════════════════════════════════════════════════════════════════ */

nav.bottom-nav.pfx-bottom {
  height: auto; min-height: 73px;
  align-items: center; justify-content: space-between;
  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);
}
nav.bottom-nav.pfx-bottom .pfx-tab {
  flex: 0 0 auto; width: 66px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2);
  text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
nav.bottom-nav.pfx-bottom .pfx-tab .lc { width: 22px; height: 22px; }
nav.bottom-nav.pfx-bottom .pfx-tab.active {
  background: var(--mk-primary); color: var(--mk-text-oncolor); font-weight: var(--mk-fw-semibold);
}
nav.bottom-nav.pfx-bottom .pfx-add-circle {
  width: 49px; height: 49px; margin-top: -17px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--mk-primary); color: var(--mk-text-oncolor);
  box-shadow: 0 0 0 5px var(--mk-bg-surface);
}
nav.bottom-nav.pfx-bottom .pfx-add-circle .lc { width: 27px; height: 27px; }

/* ══════════════════════════════════════════════════════════════════════
   PAGE HEADING, PANELS, BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme .pfx-content { max-width: 1450px; margin: 0 auto; padding: 29px 31px 36px; }

.pf-theme .pfx-page-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 25px;
}
.pf-theme .pfx-page-heading h1 {
  margin: 0; font-size: var(--mk-t-page-sm); line-height: 1.3; letter-spacing: -.7px;
  font-weight: var(--mk-fw-bold); color: var(--mk-text-strong);
}
.pf-theme .pfx-page-heading p { margin: 6px 0 0; font-size: var(--mk-t-body); line-height: 1.5; color: var(--mk-text-2); }
.pf-theme .pfx-heading-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pf-theme .pfx-back {
  width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); background: var(--mk-bg-surface);
  color: var(--mk-text-strong); cursor: pointer;
}
.pf-theme .pfx-back:hover { background: var(--mk-bg-subtle); }

/* PfPageHeader — the same heading, for the ~70 PF screens that use the component. */
.pf-theme .pfx-ph { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mk-s3) 18px; margin-bottom: 25px; }
.pf-theme .pfx-ph-text { flex: 1 1 240px; min-width: 0; }
.pf-theme .pfx-ph-title {
  margin: 0; font-size: var(--mk-t-page-sm); line-height: 1.3; letter-spacing: -.7px;
  font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); overflow-wrap: anywhere;
}
.pf-theme .pfx-ph-sub { margin: 6px 0 0; font-size: var(--mk-t-body); line-height: 1.5; color: var(--mk-text-2); }
.pf-theme .pfx-ph-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  flex-wrap: wrap; flex-shrink: 0; margin-left: auto;
}
@media (max-width: 599.98px) {
  .pf-theme .pfx-ph { margin-bottom: 20px; gap: 11px; }
  .pf-theme .pfx-ph-title { font-size: var(--mk-pf-fs-h1-sm); letter-spacing: -.6px; }
  .pf-theme .pfx-ph-sub { font-size: var(--mk-t-secondary); }
}

.pf-theme .pfx-btn {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 15px; border: 1px solid var(--mk-border); border-radius: var(--mk-r-md);
  background: var(--mk-bg-surface); color: var(--mk-text);
  font: inherit; font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold);
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.pf-theme .pfx-btn:hover { background: var(--mk-bg-subtle); color: var(--mk-text-strong); }
.pf-theme .pfx-btn.pfx-primary { background: var(--mk-primary); border-color: var(--mk-primary); color: var(--mk-text-oncolor); }
.pf-theme .pfx-btn.pfx-primary:hover { background: var(--mk-primary-hover); }
.pf-theme .pfx-text-link {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold);
  color: var(--mk-primary-ink); text-decoration: none; white-space: nowrap;
}
.pf-theme .pfx-text-link:hover { text-decoration: underline; }
.pf-theme .pfx-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px;
  border-radius: var(--mk-r-sm); background: var(--mk-primary-lt-2); color: var(--mk-primary-active);
  font-size: var(--mk-t-secondary-sm); white-space: nowrap;
}
.pf-theme .pfx-badge .lc { width: 13px; height: 13px; }

.pf-theme .pfx-panel {
  background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-lg);
  padding: 23px; box-shadow: var(--mk-sh-sm); min-width: 0;
}
.pf-theme .pfx-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.pf-theme .pfx-panel-heading h2 {
  margin: 0; font-size: var(--mk-fs-md); font-weight: var(--mk-fw-semibold);
  letter-spacing: -.2px; color: var(--mk-text-strong);
}
.pf-theme .pfx-panel-subtitle { margin-top: 4px; font-size: var(--mk-t-body); color: var(--mk-text-2); }

.pf-theme .pfx-icon-tile {
  width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 11px; background: var(--mk-pf-tile-bg); color: var(--mk-pf-tile-fg);
}
.pf-theme .pfx-icon-tile .lc { width: 20px; height: 20px; }
.pf-theme .pfx-icon-tile.pfx-green { background: var(--mk-pf-tile-green-bg); color: var(--mk-pf-tile-green-fg); }
.pf-theme .pfx-icon-tile.pfx-gray  { background: var(--mk-pf-tile-gray-bg);  color: var(--mk-pf-tile-gray-fg); }

.pf-theme .pfx-empty { padding: 32px 16px; text-align: center; font-size: var(--mk-t-body); color: var(--mk-text-2); }
.pf-theme .pfx-empty .lc { display: block; margin: 0 auto 12px; color: var(--mk-primary-ink); }

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

.pf-theme .pfx-dashboard-grid {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, 1fr); gap: 20px;
}
.pf-theme .pfx-wide { grid-column: 1 / -1; }

/* Balance card */
.pf-theme .pfx-balance-card {
  border: 1px solid var(--mk-pf-balance-border); background: var(--mk-pf-balance-bg);
  border-radius: var(--mk-r-xl); padding: 24px 26px; box-shadow: 0 2px 4px rgba(65, 34, 13, .016);
}
.pf-theme .pfx-balance-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; }
.pf-theme .pfx-balance-top p { margin: 0; font-size: var(--mk-t-body); color: var(--mk-pf-balance-muted); }
.pf-theme .pfx-balance-top strong { display: block; margin-top: 3px; font-size: var(--mk-pf-fs-17); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); }
.pf-theme .pfx-balance-label {
  display: block; margin-bottom: 5px; font-size: var(--mk-t-secondary-sm);
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--mk-pf-balance-muted);
}
.pf-theme .pfx-balance-value {
  font-size: var(--mk-pf-fs-balance); line-height: 1.15; letter-spacing: -1.8px; font-weight: var(--mk-fw-bold);
  color: var(--mk-text-strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.pf-theme .pfx-balance-detail { margin: 12px 0 0; font-size: var(--mk-t-body); color: var(--mk-text-2); }
.pf-theme .pfx-balance-footer {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; padding-top: 17px;
  border-top: 1px solid var(--mk-pf-balance-line);
}
.pf-theme .pfx-balance-footer > div + div { border-left: 1px solid var(--mk-pf-balance-line); padding-left: 22px; }
.pf-theme .pfx-balance-footer small { display: block; margin-bottom: 4px; font-size: var(--mk-t-secondary); color: var(--mk-pf-balance-muted); }
.pf-theme .pfx-balance-footer strong { font-size: var(--mk-t-section-sm); letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.pf-theme .pfx-balance-more { margin-top: 14px; }
.pf-theme .pfx-balance-more > summary { cursor: pointer; font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-semibold); color: var(--mk-primary-ink); list-style: none; }
.pf-theme .pfx-balance-more > summary::-webkit-details-marker { display: none; }
.pf-theme .pfx-lines { list-style: none; margin: 10px 0 0; padding: 0; }
.pf-theme .pfx-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--mk-t-secondary); color: var(--mk-text); }
.pf-theme .pfx-lines li.total { border-top: 1px solid var(--mk-pf-balance-line); margin-top: 4px; padding-top: 8px; font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); }

/* Quick actions */
.pf-theme .pfx-quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 19px 0 0; }
.pf-theme .pfx-quick-actions > * {
  min-height: 85px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--mk-border); border-radius: 11px; background: var(--mk-bg-surface);
  font: inherit; font-size: var(--mk-t-body); font-weight: var(--mk-fw-medium); color: var(--mk-text);
  text-align: center; text-decoration: none; cursor: pointer; padding: 7px;
}
.pf-theme .pfx-quick-actions > * .lc { width: 21px; height: 21px; color: var(--mk-pf-tile-fg); }
.pf-theme .pfx-quick-actions > *:hover { border-color: var(--mk-pf-hover-border); background: var(--mk-pf-attn-bg); color: var(--mk-text-strong); }

/* Summary stack (right column) */
.pf-theme .pfx-summary-stack { display: flex; flex-direction: column; gap: 13px; }
.pf-theme .pfx-summary-stack > a {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 19px;
  background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: 13px;
  text-align: left; text-decoration: none; color: inherit;
}
.pf-theme .pfx-summary-stack > a:hover { border-color: var(--mk-pf-hover-border); }
.pf-theme .pfx-summary-stack > a > div { flex: 1; min-width: 0; }
.pf-theme .pfx-summary-stack small { font-size: var(--mk-t-body); color: var(--mk-text-2); }
.pf-theme .pfx-summary-stack strong {
  display: block; margin: 4px 0; font-size: var(--mk-pf-fs-stat); letter-spacing: -.5px;
  font-weight: var(--mk-fw-bold); color: var(--mk-text-strong); font-variant-numeric: tabular-nums;
}
.pf-theme .pfx-summary-stack strong > span { font-size: var(--mk-t-body); font-weight: var(--mk-fw-regular); color: var(--mk-text-2); }
.pf-theme .pfx-summary-stack p { margin: 0; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
.pf-theme .pfx-summary-stack > a > .lc { width: 16px; height: 16px; color: var(--mk-text-subtle); }

/* Spending */
.pf-theme .pfx-spending-list { display: grid; gap: 20px; }
.pf-theme .pfx-spend-top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: var(--mk-t-body); color: var(--mk-text); }
.pf-theme .pfx-spend-top > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-theme .pfx-spend-top strong { margin-left: auto; font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-theme .pfx-percent { min-width: 33px; text-align: right; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
.pf-theme .pfx-category-icon {
  width: 29px; height: 29px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 8px; background: var(--mk-pf-tile-bg); color: var(--mk-pf-tile-fg);
}
.pf-theme .pfx-category-icon .lc { width: 15px; height: 15px; }
.pf-theme .pfx-bar-track { height: 7px; border-radius: 9px; background: var(--mk-pf-bar-track); overflow: hidden; }
.pf-theme .pfx-bar-fill { height: 100%; border-radius: 9px; background: var(--mk-pf-bar); }
.pf-theme .pfx-bar-fill.pfx-green { background: var(--mk-fin-positive); }
.pf-theme .pfx-budget-footer {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 23px; padding-top: 15px; border-top: 1px solid var(--mk-bg-subtle);
  font-size: var(--mk-t-secondary); color: var(--mk-text-2);
}
.pf-theme .pfx-budget-footer .lc { width: 15px; height: 15px; }
.pf-theme .pfx-budget-footer strong { font-weight: var(--mk-fw-semibold); color: var(--mk-text); }
.pf-theme .pfx-budget-footer .pfx-text-link { margin-left: auto; font-size: var(--mk-t-secondary); }

/* Record rows (Coming up) */
.pf-theme .pfx-record-row {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 15px 0;
  border: 0; border-bottom: 1px solid var(--mk-bg-subtle); background: none;
  text-align: left; text-decoration: none; color: inherit; font: inherit;
}
.pf-theme .pfx-record-row:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.pf-theme .pfx-record-row .pfx-icon-tile { width: 40px; height: 40px; }
.pf-theme .pfx-record-text { flex: 1; min-width: 0; }
.pf-theme .pfx-record-text strong { display: block; font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-theme .pfx-record-text small { display: block; margin-top: 4px; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
.pf-theme .pfx-record-value { text-align: right; font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-theme .pfx-record-value small { display: block; font-size: var(--mk-t-micro); font-weight: var(--mk-fw-regular); color: var(--mk-primary-ink); }
.pf-theme .pfx-record-value small.pfx-neg { color: var(--mk-fin-negative-fg); }

/* Attention box */
.pf-theme .pfx-attention {
  display: flex; align-items: center; gap: 11px; margin-top: 20px; padding: 16px 18px;
  background: var(--mk-pf-attn-bg); border: 1px solid var(--mk-pf-attn-border); border-radius: 11px;
  font-size: var(--mk-t-secondary); color: var(--mk-pf-attn-fg); text-decoration: none;
}
.pf-theme .pfx-attention > div { flex: 1; min-width: 0; }
.pf-theme .pfx-attention strong { display: block; font-size: var(--mk-t-body); color: var(--mk-pf-attn-strong); }
.pf-theme .pfx-attention p { margin: 3px 0 0; font-size: var(--mk-t-secondary-sm); color: var(--mk-pf-attn-sub); }
.pf-theme .pfx-attention .lc { flex-shrink: 0; }

/* Transaction table */
.pf-theme .pfx-table-wrap { overflow-x: auto; }
.pf-theme .pfx-transaction-table { width: 100%; border-collapse: collapse; font-size: var(--mk-t-body); }
.pf-theme .pfx-transaction-table th {
  padding: 9px 10px; text-align: left; font-size: var(--mk-t-secondary-sm); font-weight: var(--mk-fw-medium);
  color: var(--mk-text-subtle); background: var(--mk-pf-th-bg); border-bottom: 1px solid var(--mk-border);
}
.pf-theme .pfx-transaction-table td { padding: 14px 10px; border-bottom: 1px solid var(--mk-bg-subtle); color: var(--mk-text); vertical-align: middle; }
.pf-theme .pfx-transaction-table tr:last-child td { border-bottom: 0; }
.pf-theme .pfx-transaction-table :is(th, td):last-child { text-align: right; }
.pf-theme .pfx-transaction-table tbody tr:hover { background: var(--mk-pf-row-hover); }
.pf-theme .pfx-transaction-name { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--mk-text-strong); text-decoration: none; }
.pf-theme .pfx-transaction-name .pfx-icon-tile { width: 34px; height: 34px; border-radius: 9px; }
.pf-theme .pfx-transaction-name .pfx-icon-tile .lc { width: 17px; height: 17px; }
.pf-theme .pfx-transaction-name strong { display: block; font-size: var(--mk-t-body); font-weight: var(--mk-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }
.pf-theme .pfx-transaction-name small { display: block; margin-top: 4px; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
.pf-theme .pfx-amount { font-weight: var(--mk-fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--mk-text-strong); }

/* The dashboard's further widgets (the existing .db-card sections) wear the panel look. */
.pf-theme .pfx-extras { margin-top: 20px; }
.pf-theme .pfx-extras .db-card { border-radius: var(--mk-r-lg); box-shadow: var(--mk-sh-sm); }
.pf-theme .pfx-extras .db-card-head { padding: 18px 23px 14px; border-bottom: 0; }
.pf-theme .pfx-extras .db-card-title { font-size: var(--mk-fs-md); font-weight: var(--mk-fw-semibold); letter-spacing: -.2px; }
.pf-theme .pfx-extras .db-card-body { padding: 4px 23px 20px; }
.pf-theme .pfx-extras .db-row { padding: 13px 23px; border-bottom-color: var(--mk-bg-subtle); }
.pf-theme .pfx-extras .db-link { font-size: var(--mk-t-body); font-weight: var(--mk-fw-semibold); }

/* ══════════════════════════════════════════════════════════════════════
   ALL FEATURES DIRECTORY
   ══════════════════════════════════════════════════════════════════════ */

.pf-theme .pfx-search {
  display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 13px;
  border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); background: var(--mk-bg-surface);
}
.pf-theme .pfx-search .lc { width: 17px; color: var(--mk-text-subtle); }
.pf-theme .pfx-search input {
  width: 100%; padding: 11px 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--mk-t-body); color: var(--mk-text);
}
.pf-theme .pfx-directory-search { margin-bottom: 18px; }
.pf-theme .pfx-result-count { margin: 0 0 18px; font-size: var(--mk-t-body); color: var(--mk-text-2); }
.pf-theme .pfx-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pf-theme .pfx-directory-group {
  padding: 21px; background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: 13px; min-width: 0;
}
.pf-theme .pfx-directory-group > h2 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 5px;
  font-size: var(--mk-t-card); font-weight: var(--mk-fw-semibold); color: var(--mk-text-strong);
}
.pf-theme .pfx-directory-group > h2 .lc { width: 19px; color: var(--mk-pf-tile-fg); }
.pf-theme .pfx-directory-group > p { margin: 0 0 15px; font-size: var(--mk-t-secondary); line-height: 1.5; color: var(--mk-text-2); }
.pf-theme .pfx-directory-links { display: grid; gap: 2px; }
.pf-theme .pfx-directory-links a {
  display: flex; align-items: center; gap: 10px; min-height: 41px; padding: 9px 10px;
  border-radius: 7px; text-decoration: none; font-size: var(--mk-t-body); color: var(--mk-text);
}
.pf-theme .pfx-directory-links a:hover { background: var(--mk-pf-attn-bg); color: var(--mk-primary-active); }
.pf-theme .pfx-directory-links a .lc { width: 17px; height: 17px; color: var(--mk-text-subtle); }
.pf-theme .pfx-directory-links a .lc:last-child { margin-left: auto; width: 13px; height: 13px; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — prototype tiers mapped onto the app's 600 / 1025 edges
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 1024.98px) {
  .pf-theme .pfx-content { padding: 25px 22px; }
  .pf-theme .pfx-dashboard-grid { grid-template-columns: minmax(0, 1.2fr) minmax(235px, 1fr); gap: 16px; }
  .pf-theme .pfx-balance-card { padding: 22px; }
  .pf-theme .pfx-balance-value { font-size: var(--mk-pf-fs-balance-md); }
  .pf-theme .pfx-quick-actions { gap: 7px; }
  .pf-theme .pfx-quick-actions > * { font-size: var(--mk-t-secondary-sm); }
  .pf-theme .pfx-summary-stack { gap: 10px; }
  .pf-theme .pfx-summary-stack > a { padding: 14px; }
  .pf-theme .pfx-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-theme .pfx-page-heading h1 { font-size: var(--mk-pf-fs-h1-md); }
}

@media (max-width: 599.98px) {
  .pf-theme .pfx-content { padding: 23px 16px 102px; }
  .pf-theme .pfx-page-heading { margin-bottom: 20px; gap: 11px; flex-wrap: wrap; }
  .pf-theme .pfx-page-heading h1 { font-size: var(--mk-pf-fs-h1-sm); letter-spacing: -.6px; }
  .pf-theme .pfx-page-heading p { font-size: var(--mk-t-secondary); }
  .pf-theme .pfx-heading-actions .pfx-hide-phone { display: none; }
  .pf-theme .pfx-dashboard-grid { grid-template-columns: 1fr; gap: 17px; }
  .pf-theme .pfx-balance-card { padding: 22px 20px; }
  .pf-theme .pfx-balance-value { font-size: var(--mk-pf-fs-balance-sm); }
  .pf-theme .pfx-balance-top { margin-bottom: 22px; }
  .pf-theme .pfx-balance-footer { margin-top: 20px; }
  .pf-theme .pfx-balance-footer strong { font-size: var(--mk-pf-fs-19); }
  .pf-theme .pfx-quick-actions { gap: 8px; margin-top: 16px; }
  .pf-theme .pfx-quick-actions > * { min-height: 80px; font-size: var(--mk-t-secondary-sm); gap: 9px; line-height: 1.4; padding: 7px 3px; }
  .pf-theme .pfx-summary-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pf-theme .pfx-summary-stack > a { display: block; padding: 15px 13px; }
  .pf-theme .pfx-summary-stack > a > .pfx-icon-tile { float: right; width: 30px; height: 30px; margin: 0 0 8px 8px; border-radius: 8px; }
  .pf-theme .pfx-summary-stack > a > .pfx-icon-tile .lc { width: 16px; height: 16px; }
  .pf-theme .pfx-summary-stack > a > .lc { display: none; }
  .pf-theme .pfx-summary-stack small { font-size: var(--mk-t-secondary); }
  .pf-theme .pfx-summary-stack strong { font-size: var(--mk-pf-fs-stat-sm); margin: 7px 0; }
  .pf-theme .pfx-summary-stack p { font-size: var(--mk-t-micro); }
  .pf-theme .pfx-summary-stack > a:last-child { grid-column: 1 / -1; display: flex; gap: 13px; }
  .pf-theme .pfx-summary-stack > a:last-child > .pfx-icon-tile { float: none; width: 35px; height: 35px; margin: 0; }
  .pf-theme .pfx-summary-stack > a:last-child strong { font-size: var(--mk-fs-md); }
  .pf-theme .pfx-panel { padding: 20px; }
  .pf-theme .pfx-panel-heading { margin-bottom: 19px; }
  .pf-theme .pfx-panel-heading h2 { font-size: var(--mk-pf-fs-17); }
  .pf-theme .pfx-desktop-column { display: none; }
  .pf-theme .pfx-transaction-table td { padding: 13px 4px; }
  .pf-theme .pfx-transaction-table th { padding: 9px 4px; }
  .pf-theme .pfx-transaction-table th:first-child { width: 70%; }
  .pf-theme .pfx-transaction-name strong { font-size: var(--mk-t-secondary); max-width: 22ch; }
  .pf-theme .pfx-transaction-name small { font-size: var(--mk-t-micro); }
  .pf-theme .pfx-transaction-name .pfx-icon-tile { width: 32px; height: 32px; }
  .pf-theme .pfx-directory { grid-template-columns: 1fr; gap: 14px; }
  .pf-theme .pfx-directory-group { padding: 20px; }
  .pf-theme .pfx-directory-links { grid-template-columns: 1fr 1fr; gap: 5px; }
  .pf-theme .pfx-directory-links a { min-height: 44px; padding: 12px 0; line-height: 1.4; }
  .pf-theme .pfx-directory-links a .lc:last-child { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   EVERY PF PAGE — the shared building blocks, in the prototype's shape
   These restyle classes the ~75 PF screens already use, so no page has to
   opt in. Inline-styled one-offs are fixed in their own pages instead.
   ══════════════════════════════════════════════════════════════════════ */

/* Icons that replaced emoji (a script swapped ~380 of them for <LcIcon>). They size
   themselves from the font-size the emoji slot already had, so a 40px empty-state
   emoji becomes a 40px line icon. Not scoped: the khata and split pages are shared
   with business tenants, where the icon simply takes the text colour. */
.lc.pfx-emo { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex-shrink: 0; }
.pf-theme .lc.pfx-emo-tile { color: var(--mk-pf-tile-fg); }

/* Page wrapper: the prototype's content gutter and width. */
.pf-theme .pf-page {
  max-width: 1450px; margin-inline: auto;
  padding: 29px 31px 36px;
}
@media (min-width: 600px) and (max-width: 1024.98px) {
  .pf-theme .pf-page { padding: 25px 22px; }
}
@media (max-width: 599.98px) {
  .pf-theme .pf-page { padding: 23px 16px 36px; }
}

/* MyStackBlazor buttons (rendered as button/a with id="ms-btn-…") lose the prebuilt
   Tailwind bundle's square corners and take the prototype's 42px rounded button. */
.pf-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);
}
.pf-theme .btn { border-radius: var(--mk-r-md); font-weight: var(--mk-fw-semibold); }

/* Segmented period / filter toggles -> the prototype's filter chips: separate bordered
   chips, the selected one a light orange tint rather than a solid fill. */
.pf-theme :is(.pf-seg, .cycle-tabs) {
  gap: 6px; padding: 0; background: none; border: 0; border-radius: 0;
}
.pf-theme :is(.pf-seg-btn, .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);
}
.pf-theme :is(.pf-seg-btn, .cycle-tab):hover { color: var(--mk-text-strong); background: var(--mk-bg-subtle); }
.pf-theme :is(.pf-seg-btn, .cycle-tab).is-on {
  background: var(--mk-primary-lt-2); color: var(--mk-primary-active);
  border-color: var(--mk-primary-border); font-weight: var(--mk-fw-semibold);
}

/* Bootstrap form controls take the prototype's input. */
.pf-theme :is(.form-control, .form-select) {
  min-height: 43px; border: 1px solid var(--mk-border-strong); border-radius: 8px;
  font-size: var(--mk-t-body); color: var(--mk-text);
}
.pf-theme :is(.form-control, .form-select):focus {
  border-color: var(--mk-primary-border); box-shadow: 0 0 0 3px var(--mk-primary-lt-2);
}
.pf-theme .form-label { font-size: var(--mk-t-body); font-weight: var(--mk-fw-medium); color: var(--mk-text); }

/* Add/edit form pages: the tinted hero band they used to open with is now the prototype's
   plain heading — back control, a small section label, the title — and the form card sits
   below it instead of being pulled up over a band. */
.pf-theme .pfx-form-head { margin-bottom: 22px; }
.pf-theme .pfx-form-head-row { display: flex; align-items: center; gap: 14px; }
.pf-theme .pfx-form-kicker { font-size: var(--mk-t-secondary); color: var(--mk-text-2); margin-bottom: 2px; }
.pf-theme .pfx-form-head .pfx-ph-title .lc { display: none; }

/* Khata Book: the dark hero band with cards lifted over it becomes the prototype's flat
   heading over a row of white stat cards. Overrides the page's own .kb-* block. */
.pf-theme .kb-hero {
  background: none; color: var(--mk-text-strong);
  padding: 0 var(--rd-page-px) 18px;
}
.pf-theme .kb-hero .rd-banner-blob { display: none; }
.pf-theme .kb-hero .rd-banner-eyebrow { color: var(--mk-text-2); letter-spacing: 0; text-transform: none; font-size: var(--mk-t-secondary); }
.pf-theme .kb-hero .kb-hero-net { color: var(--mk-text-strong); font-size: var(--mk-t-page-sm); letter-spacing: -.7px; font-weight: var(--mk-fw-bold); }
.pf-theme .kb-hero .rd-banner-sub { color: var(--mk-text-2); }
.pf-theme .kb-kpis { margin-top: 0; }
.pf-theme .kb-kpi { border: 1px solid var(--mk-border); border-radius: 12px; box-shadow: none; }
.pf-theme .kb-kpi-lbl { text-transform: none; letter-spacing: 0; font-weight: var(--mk-fw-medium); color: var(--mk-text-2) !important; }

/* Prototype stat card — for pages that adopt it (see the per-page pass). */
.pf-theme .pfx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 22px; }
.pf-theme .pfx-stat-card {
  background: var(--mk-bg-surface); border: 1px solid var(--mk-border);
  border-radius: 12px; padding: 18px 20px; min-width: 0;
}
.pf-theme .pfx-stat-card small { display: block; margin-bottom: 8px; font-size: var(--mk-t-secondary); color: var(--mk-text-2); }
.pf-theme .pfx-stat-card strong {
  display: block; font-size: var(--mk-pf-fs-stat); font-weight: var(--mk-fw-semibold);
  letter-spacing: -.8px; color: var(--mk-text-strong); font-variant-numeric: tabular-nums;
}
.pf-theme .pfx-stat-card p { margin: 6px 0 0; font-size: var(--mk-t-secondary-sm); color: var(--mk-text-2); }
@media (max-width: 599.98px) {
  .pf-theme .pfx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-theme .pfx-stat-card { padding: 14px 10px; }
  .pf-theme .pfx-stat-card strong { font-size: var(--mk-pf-fs-19); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-theme .pfx-group-toggle .pfx-chevron { transition: none; }
}