@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');
/* ============================================================
   BRAccount Theme v21 — one palette for landing page and desk.
   Tokens are the landing page's own (braccount-ui/src/index.css):
     dark   ground #0e0c15 · panel #16141f · surface #21242d ·
            text #bcc3d7 · muted #7d859c · heading #ffffff ·
            accent #805af5 → #cd99ff · good #3fca8b · warn #e8b23e · bad #f36270
     light  ground #f4f3f8 · panel #ffffff · surface-2 #eeecf5 ·
            text #3d4258 · muted #767d94 · heading #17131f ·
            accent #6c3fee → #9d66ff · good #14915d · warn #a97407 · bad #cf3345
   Type: Sora (as on the landing page), Fira Code for figures.
   Primary actions carry the landing's violet→lilac gradient.
   Structure kept from Luminaux v20: rounded-xl cards, feather
   shadows, blurred chrome, outline pill badges.
   ============================================================ */

/* ---------- Light tokens ----------
   :root:root doubles specificity so these win over Frappe's own
   token blocks regardless of stylesheet load order. */
:root:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  --background: #f4f3f8;
  --foreground: #17131f;
  --muted: #eeecf5;
  --muted-foreground: #646b82;
  --accent: #e6e2f2;
  --ring: #6c3fee;

  /* brand accent — the landing page's violet, AA on white as text and fill */
  --primary: #6c3fee;
  --primary-hover: #5b32d6;
  --primary-rgb: 108, 63, 238;
  --accent-2: #9d66ff;
  --primary-grad: linear-gradient(to right, #6c3fee, #9d66ff);
  --accent-fg: #6c3fee;
  --primary-color: #6c3fee;
  --btn-primary: #6c3fee;
  --on-primary: #ffffff;

  --bg-color: var(--background);
  --navbar-bg: transparent;
  --card-bg: #ffffff;
  --fg-color: #ffffff;
  --modal-bg: #ffffff;
  --border-color: #e8e6ef;
  --control-bg: var(--muted);
  --control-bg-on-gray: var(--accent);
  --disabled-control-bg: var(--muted);
  --input-disabled-bg: var(--muted);

  --heading-color: #17131f;
  --text-color: #3d4258;
  --text-muted: var(--muted-foreground);
  --text-light: #9a9fb3;
  --disabled-text-color: #9a9fb3;

  --highlight-color: var(--muted);
  --subtle-accent: var(--muted);
  --subtle-fg: var(--accent);
  --awesomplete-hover-bg: var(--muted);
  --awesomebar-focus-bg: #ffffff;

  /* violet-washed nav states */
  --sidebar-hover-color: #f0eef6;
  --sidebar-select-color: rgba(var(--primary-rgb), 0.10);
  --sidebar-active-color: rgba(var(--primary-rgb), 0.12);
  --sidebar-border-color: var(--border-color);

  --checkbox-focus-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.28);

  --shadow-xs: 0px 1px 2px 0px rgba(20, 16, 40, 0.06);
  --shadow-sm: 0px 1px 2px 0px rgba(20, 16, 40, 0.08), 0px 1px 2px -1px rgba(20, 16, 40, 0.08);
  --shadow-base: 0px 1px 2px 0px rgba(20, 16, 40, 0.08), 0px 2px 4px -1px rgba(20, 16, 40, 0.08);
  --shadow-md: 0px 1px 2px 0px rgba(20, 16, 40, 0.08), 0px 2px 4px -1px rgba(20, 16, 40, 0.08);
  --shadow-lg: 0px 1px 2px 0px rgba(20, 16, 40, 0.08), 0px 4px 6px -1px rgba(20, 16, 40, 0.08);
  --shadow-xl: 0px 1px 2px 0px rgba(20, 16, 40, 0.08), 0px 8px 10px -1px rgba(20, 16, 40, 0.10);
  --card-shadow: var(--shadow-xs);
  --modal-shadow: var(--shadow-xl);
  --drop-shadow: var(--shadow-lg);

  --border-radius-sm: 6px;
  --border-radius: 8px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  /* semantic set, from the landing page's light tokens */
  --success: #14915d;
  --warning: #a97407;
  --danger: #cf3345;
  --info: #2f7be6;

  --chart-1: var(--primary);
  --chart-2: #9d66ff;
  --chart-3: #2f7be6;
  --chart-4: #a97407;
  --chart-5: #14915d;
  --charts-label-color: var(--text-light);
  --charts-axis-line-color: var(--border-color);

  /* stat-card wash (pierces the HTML-block shadow DOM, so literal) */
  --fo-card-grad: linear-gradient(to top, rgba(var(--primary-rgb), 0.06), #ffffff);
}

/* ---------- Dark tokens (the landing page's default) ---------- */
:root[data-theme="dark"] {
  --background: #0e0c15;
  --foreground: #bcc3d7;
  --muted: #21242d;
  --muted-foreground: #8d95ad;
  --accent: #262a35;
  --ring: #805af5;

  --primary: #805af5;
  --primary-hover: #9070f7;
  --primary-rgb: 128, 90, 245;
  --accent-2: #cd99ff;
  --primary-grad: linear-gradient(to right, #805af5, #cd99ff);
  --accent-fg: #cd99ff;
  --primary-color: #805af5;
  --btn-primary: #805af5;
  --on-primary: #ffffff;

  --bg-color: var(--background);
  --navbar-bg: transparent;
  --card-bg: #16141f;
  --fg-color: #16141f;
  --modal-bg: #16141f;
  --border-color: rgba(255, 255, 255, 0.07);
  --control-bg: #21242d;
  --control-bg-on-gray: #262a35;
  --disabled-control-bg: #16141f;
  --input-disabled-bg: #16141f;

  --heading-color: #ffffff;
  --text-color: #bcc3d7;
  --text-muted: #8d95ad;
  --text-light: #5d647a;
  --disabled-text-color: #5d647a;

  --highlight-color: var(--muted);
  --subtle-accent: var(--muted);
  --subtle-fg: var(--accent);
  --awesomplete-hover-bg: var(--muted);
  --awesomebar-focus-bg: #21242d;

  /* signature: violet-washed active nav pill, lilac label */
  --sidebar-hover-color: #1a1826;
  --sidebar-select-color: rgba(var(--primary-rgb), 0.16);
  --sidebar-active-color: rgba(var(--primary-rgb), 0.18);
  --sidebar-border-color: rgba(255, 255, 255, 0.06);

  --checkbox-focus-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.45);

  --shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px 1px 2px -1px rgba(0, 0, 0, 0.35);
  --shadow-base: 0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
  --shadow-md: 0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px 4px 6px -1px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 8px 10px -1px rgba(0, 0, 0, 0.4);
  --card-shadow: var(--shadow-xs);
  --modal-shadow: var(--shadow-xl);
  --drop-shadow: var(--shadow-lg);

  --border-radius-sm: 6px;
  --border-radius: 8px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  --success: #3fca8b;
  --warning: #e8b23e;
  --danger: #f36270;
  --info: #3d8bff;

  --chart-1: var(--primary);
  --chart-2: #cd99ff;
  --chart-3: #3d8bff;
  --chart-4: #e8b23e;
  --chart-5: #3fca8b;
  --charts-label-color: var(--text-light);
  --charts-axis-line-color: var(--border-color);

  --fo-card-grad: linear-gradient(to top, rgba(128, 90, 245, 0.10), #16141f);
}

/* ---------- Typography: Plus Jakarta Sans ----------
   Luminaux's --font-sans, self-hosted as the variable face so the
   Desk does not reach out to Google Fonts. Inter stays next in the
   stack: Frappe ships InterVariable, so the fallback is already
   resolved locally while the woff2 streams in. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/ledger_theme/fonts/plus-jakarta-sans-latin.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/ledger_theme/fonts/plus-jakarta-sans-latin-ext.woff2")
    format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

:root:root {
  --font-stack: "Sora", "Plus Jakarta Sans", "InterVariable", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-sans-serif: var(--font-stack);
  --font-family-monospace: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}
body {
  font-family: var(--font-stack);
  background-color: var(--bg-color);
  letter-spacing: 0;
}

/* page + workspace titles: bold, tight tracking */
.title-text,
.workspace-title,
.page-title .title-text {
  font-family: var(--font-stack);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* workspace section headings ("Reports & Masters") */
.codex-editor .ce-header,
.workspace .ce-header {
  font-family: var(--font-stack);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}

/* money and quantities align in columns everywhere they're listed */
.list-row-col,
.list-row-head,
.dt-cell__content,
.grid-static-col,
.datatable,
.number-widget-box,
.report-summary {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Chrome — sticky translucent blurred header
   ============================================================ */
.navbar {
  background: color-mix(in srgb, var(--background) 72%, transparent) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}

/* awesomebar reads as a quiet elevated input */
.navbar .search-bar .awesomplete input,
#navbar-search {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-xs);
  color: var(--text-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.navbar .search-bar .awesomplete input:focus,
#navbar-search:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22);
}
[data-theme="dark"] .navbar .search-bar .awesomplete input,
[data-theme="dark"] #navbar-search {
  background: var(--control-bg);
  border-color: transparent;
}

/* breadcrumbs: muted, heading on hover */
#navbar-breadcrumbs a,
.disable-click.breadcrumb-label {
  color: var(--text-muted);
}
#navbar-breadcrumbs a:hover {
  color: var(--heading-color);
  text-decoration: none;
}

/* ============================================================
   Buttons — indigo primary, elevated quiet secondary
   ============================================================ */
.btn {
  border-radius: var(--border-radius);
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.btn-primary {
  background-color: var(--btn-primary);
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(var(--primary-rgb), 0.35);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--primary-hover) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
.btn-default,
.btn-secondary {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}
.btn-default:hover,
.btn-secondary:hover {
  background-color: var(--muted);
  border-color: var(--border-color);
}
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-secondary {
  background-color: var(--control-bg);
  border-color: var(--border-color);
}
[data-theme="dark"] .btn-default:hover,
[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--accent);
}

/* ============================================================
   Card system — rounded-xl, hairline ring, feather shadow
   ============================================================ */
.widget {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* stat cards carry a soft indigo top-lit wash */
.widget.number-widget-box {
  background: var(--fo-card-grad, var(--card-bg));
  background-color: var(--card-bg);
  padding: 14px 16px;
}
.widget.number-widget-box:hover,
.widget.dashboard-widget-box:hover,
.widget.shortcut-widget-box:hover {
  box-shadow: var(--shadow-sm);
  border-color: rgba(var(--primary-rgb), 0.35);
}

/* number cards: muted label over a large tabular semibold number */
.widget.number-widget-box .widget-title {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.widget.number-widget-box .widget-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}
.widget.number-widget-box .widget-body .number {
  font-family: var(--font-stack);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--heading-color);
}

/* deltas: h-5 outline pill badges */
.widget.number-widget-box .card-stats .percentage-stats,
.widget.number-widget-box .widget-footer .green,
.widget.number-widget-box .widget-footer .red {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1px solid var(--border-color);
  background: transparent;
}
/* deltas ride the semantic tokens, so both themes come from one rule */
.widget.number-widget-box .widget-footer .green {
  color: var(--success);
}
.widget.number-widget-box .widget-footer .red {
  color: var(--danger);
}

/* chart + link cards */
.widget.dashboard-widget-box {
  padding: 14px 16px;
}
.widget.dashboard-widget-box .widget-title,
.widget.links-widget-box .widget-title {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
.widget.links-widget-box .link-item {
  border-radius: var(--border-radius-sm);
  padding: 4px 8px;
  margin-left: -8px;
  color: var(--text-muted);
  transition: background-color 0.13s ease, color 0.13s ease;
}
.widget.links-widget-box .link-item:hover {
  background: var(--muted);
  color: var(--heading-color);
  text-decoration: none;
}

/* shortcut pills read as quiet outline buttons */
.widget.shortcut-widget-box {
  border-radius: var(--border-radius);
}
.widget.shortcut-widget-box .widget-title {
  font-weight: 500;
  font-size: 13px;
  color: var(--heading-color);
}

/* onboarding / getting-started panel */
.onboarding-sidebar {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   Login page
   ============================================================ */
.btn-login,
.page-card .page-card-actions .btn-login {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-radius: var(--border-radius);
}
.btn-login:hover,
.btn-login:focus,
.btn-login:active,
.page-card .page-card-actions .btn-login:hover,
.page-card .page-card-actions .btn-login:focus,
.page-card .page-card-actions .btn-login:active {
  background: var(--primary-hover) !important;
  color: #ffffff !important;
}
/* Frappe ships its own neutral palette for the login page, which wins over the
   theme tokens: in dark mode the secondary button stayed #f3f3f3 (light grey on a
   dark card) and the inputs sat at #0f0f0f rather than the theme's control
   surface. Pin both to the tokens so the card reads as one piece. */
.page-card .form-control,
.page-card input.form-control {
  background-color: var(--control-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
.page-card .form-control::placeholder {
  color: var(--text-light) !important;
}
.page-card .form-control:focus {
  background-color: var(--awesomebar-focus-bg) !important;
  box-shadow: var(--checkbox-focus-shadow) !important;
}
.btn-login-option,
.page-card .page-card-actions .btn-login-option,
.page-card .btn-default:not(.btn-login) {
  background: var(--control-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius);
}
.btn-login-option:hover,
.page-card .btn-default:not(.btn-login):hover {
  background: var(--control-bg-on-gray) !important;
  color: var(--heading-color) !important;
}
/* the input-group icons Frappe renders inside the fields */
.page-card .input-group-text,
.page-card .input-with-feedback + .btn,
.page-card .toggle-password {
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}

@media (min-width: 641px) {
  .page-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
}
.page-card h4,
.page-card .page-card-head h4 {
  font-family: var(--font-stack);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ============================================================
   Sidebar — darker rail, indigo-washed active pill
   ============================================================ */
:root:root {
  --sidebar-width: 248px;
}
.body-sidebar {
  background-color: var(--card-bg) !important;
  border-right: 1px solid var(--sidebar-border-color);
}
.standard-sidebar-item {
  border-radius: var(--border-radius);
  transition: background-color 0.13s ease;
}
.standard-sidebar-item:hover {
  background-color: var(--sidebar-hover-color);
}
/* active item: blue wash + lifted-blue label (Luminaux signature) */
.standard-sidebar-item.active-sidebar,
.standard-sidebar-item.selected {
  background-color: var(--sidebar-select-color);
  box-shadow: none;
}
.standard-sidebar-item.active-sidebar .sidebar-item-label,
.standard-sidebar-item.selected .sidebar-item-label {
  color: var(--accent-fg);
  font-weight: 600;
}
.standard-sidebar-item.active-sidebar .sidebar-item-icon .icon,
.standard-sidebar-item.selected .sidebar-item-icon .icon {
  --icon-stroke: var(--accent-fg);
}
/* group labels: xs, muted */
.standard-sidebar-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-light);
}
/* long entries wrap onto a second line instead of being cut off */
.desk-sidebar .sidebar-item-label,
.standard-sidebar-item .sidebar-item-label,
.standard-sidebar-item > span:not(.sidebar-item-control) {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.standard-sidebar-item {
  height: auto;
  min-height: 28px;
  align-items: center;
}
.list-subject .level-left a,
.list-row-col .ellipsis {
  text-overflow: ellipsis;
}

/* ============================================================
   Tabs — active gets the indigo underline (CFDs | Futures)
   ============================================================ */
.form-tabs-list .nav-item .nav-link,
.nav-tabs .nav-link {
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
}
.form-tabs-list .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--heading-color);
  border-bottom: 2px solid var(--primary);
  background: transparent;
}
.form-tabs-list .nav-item .nav-link:hover {
  color: var(--heading-color);
}

/* ============================================================
   List views — normal-case medium headers, muted row hover
   ============================================================ */
.list-row-head {
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  background: transparent;
}
.frappe-list .list-row:hover,
.frappe-list .list-row-container:hover {
  background: color-mix(in srgb, var(--muted) 55%, transparent);
}
.list-subject a {
  color: var(--heading-color);
  font-weight: 500;
}
.list-subject a:hover {
  color: var(--primary);
}
.frappe-list .result,
.frappe-card {
  background: var(--card-bg);
  border-radius: 12px;
}

/* status pills: h-5 rounded-full, quiet */
.indicator-pill {
  height: 20px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 9999px;
}

/* ============================================================
   Forms & controls — bordered inputs, indigo focus ring
   ============================================================ */
.form-control {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
}
[data-theme="dark"] .form-control {
  background-color: var(--control-bg);
  border-color: transparent;
}
.form-control:focus {
  background-color: var(--card-bg);
  border: 1px solid var(--ring);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}
[data-theme="dark"] .form-control:focus {
  background-color: var(--control-bg);
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.28);
}
.form-section .section-head,
.form-dashboard-section .section-head {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
.control-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ============================================================
   Modals, dropdowns, popovers
   ============================================================ */
.modal-content {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
}
.modal-header .modal-title {
  font-family: var(--font-stack);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.dropdown-menu {
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.dropdown-item {
  border-radius: var(--border-radius-sm);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: var(--accent);
}

/* ============================================================
   Scrollbars — thin, unobtrusive
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-light);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================
   Reports (DataTable)
   ============================================================ */
.datatable .dt-header .dt-cell__content {
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.report-summary .summary-value {
  font-family: var(--font-stack);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.report-summary .summary-label {
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ============================================================
   Query reports (Balance Sheet, P&L, General Ledger, ...)
   ============================================================ */
.page-head {
  background: color-mix(in srgb, var(--background) 72%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}
.page-form {
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding-top: 6px;
  padding-bottom: 8px;
}
.page-form .form-control {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .page-form .form-control {
  background: var(--control-bg);
  border-color: transparent;
}
.page-form .form-control:focus {
  border-color: var(--ring);
}

/* the report floats as one card on the ground */
.report-wrapper {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  margin: 14px 16px 6px;
  overflow: hidden;
  width: fit-content;
  min-width: min(480px, 100%);
  max-width: calc(100% - 32px);
}
.report-wrapper .chart-wrapper {
  padding: 8px 12px 0;
}
.report-summary {
  padding: 18px 8px;
  margin: 0;
}
.report-summary .summary-item {
  padding: 2px 24px;
}
.report-summary .summary-item + .summary-item {
  border-left: 1px solid var(--border-color);
}
.report-summary .summary-value {
  font-size: 22px;
  margin-top: 4px;
}
.datatable {
  --dt-border-color: var(--border-color);
}
.datatable .dt-row:not(.dt-row-header):hover .dt-cell {
  background: color-mix(in srgb, var(--muted) 60%, transparent);
}
.report-footer {
  padding: 10px 16px 14px;
  font-size: 12px;
  color: var(--text-light);
}

/* ============================================================
   v8 — Report filter bar: compact chip-row toolbar
   Frappe lays .page-form out on a rigid col-md-2 grid (fixed-width
   slots, holes where filters are hidden, bold 14px values, loose
   checkboxes). Re-laid as a wrapping flex row of even 30px chips.
   ============================================================ */
.page-form.flex,
.page-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 12px;
}
.page-form .form-group.frappe-control {
  width: auto;
  /* Frappe leaves .col-md-2 on every filter, and Bootstrap's rule is
     `flex: 0 0 16.6667%; max-width: 16.6667%`. Overriding flex and width but
     not max-width left each chip clamped to a sixth of the row while its pill
     label is nowrap and cannot shrink with it: on a 1731px toolbar the two
     longest checkbox filters measured 333px of label inside a 283px box and
     painted the 50px difference straight over the next chip. Content width is
     the whole point of a chip row — a chip that will not fit has to wrap, not
     shrink. 100% keeps a pathological label from widening the page. */
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.page-form .form-control {
  width: 158px;
  height: 30px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--border-radius);
}
.page-form select.form-control {
  width: auto;
  min-width: 118px;
  max-width: 190px;
  padding-right: 24px;
}
.page-form .form-control::placeholder {
  color: var(--text-light);
  font-weight: 400;
}
/* hover affordance on idle fields */
.page-form .form-control:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--ring) 35%, transparent);
}
[data-theme="dark"] .page-form .form-control:hover:not(:focus) {
  border-color: rgba(var(--primary-rgb), 0.4);
}

/* checkbox filters become pill toggles (indigo when active) */
.page-form .frappe-control[data-fieldtype="Check"] {
  align-self: center;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox {
  margin: 0;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  margin: 0;
  background: var(--control-bg);
  border: 1px solid transparent;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox .label-area {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:has(input:checked) {
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.5);
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:has(input:checked) .label-area {
  color: var(--heading-color);
}
.page-form input[type="checkbox"] {
  accent-color: var(--primary);
}

/* page head: consistent 30px controls, calmer title block */
.page-head .page-actions .btn {
  height: 30px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12.5px;
}
.page-head .page-title .title-text {
  font-size: 17px;
}

/* ============================================================
   v12 — Desktop launcher: an app directory, not a springboard
   What was wrong (stock Frappe + this theme's v9 pass):
     · .icons keeps `grid-template-rows: repeat(3, 1fr)` from the
       old paged springboard, but paging is dead (total_pages is
       always 1) — so 12 apps still reserve a phantom empty row
     · `repeat(6, 1fr)` of 127px tiles never grows into the
       viewport: 832px of content marooned in a 1447px window,
       vertically centred over a void
     · a 127px square holding a 54px icon and one word is mostly
       padding — low density, weak hit target
     · v9's `.desktop-container .icons` also matched the folder
       *thumbnail's* inner grid, blowing it out to 178px inside a
       54px clipped chip (the mangled "Accounting" tile)
   Now: one contained column the navbar shares an edge with, tiles
   are wide rows (icon left, label right) on a grid that reflows.
   Every rule is anchored on `.desktop-wrapper` + direct-child
   chains so nothing leaks into folder previews or the search modal.
   ============================================================ */
:root:root {
  --lt-desk-col: 1120px;
  --lt-desk-gutter: 24px;
}

.desktop-wrapper {
  min-height: 100vh;
  background:
    radial-gradient(720px 340px at 50% -10%, rgba(var(--primary-rgb), 0.05), transparent 62%),
    var(--bg-color);
}
[data-theme="dark"] .desktop-wrapper {
  background:
    radial-gradient(720px 340px at 50% -10%, rgba(var(--primary-rgb), 0.13), transparent 62%),
    var(--bg-color);
}

/* chrome sits on the content column: the logo lines up with the
   first tile's left edge, the bell with the last tile's right.
   The bar itself is one element carrying the sticky background, so
   it stays full-bleed and the *padding* does the aligning — a
   max-width here would box the blur and leave a floating hairline. */
.desktop-wrapper .navbar-container {
  padding: 10px max(var(--lt-desk-gutter), calc((100% - var(--lt-desk-col)) / 2));
  gap: 24px;
}
.desktop-wrapper .desktop-search-wrapper {
  max-width: 380px;
  margin: 0 auto;
}
.desktop-wrapper .desktop-navbar-modal-search {
  height: 34px;
  padding: 0 14px;
  border-radius: 9999px;
  background: var(--control-bg);
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .desktop-wrapper .desktop-navbar-modal-search {
  border-color: transparent;
}
.desktop-wrapper .desktop-navbar-modal-search:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
}

/* top-aligned column — centring a grid that grows is what produced
   the void under the icons */
.desktop-wrapper .desktop-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  /* sits a little below the bar on tall screens without pinning to
     dead centre — a centred grid is what left the void underneath */
  padding: clamp(40px, 11vh, 104px) var(--lt-desk-gutter) 72px;
}

/* page heading, injected by desk.js — gives the launcher a top
   anchor instead of opening on bare floating icons */
.lt-desk-head {
  max-width: var(--lt-desk-col);
  width: 100%;
  margin: 0 auto 22px;
}
.lt-desk-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--heading-color);
}
.lt-desk-head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.desktop-wrapper .desktop-container > .icons-container {
  max-width: var(--lt-desk-col);
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* reflowing rows — no fixed column count, no phantom third row */
.desktop-wrapper .desktop-container > .icons-container > .icons {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-rows: none;
  grid-auto-rows: min-content;
  gap: 16px;
  justify-items: stretch;
  margin-top: 0;
}

/* each app is a wide row: icon left, label right */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: auto;
  height: 72px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
    border-color 0.16s ease;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.22);
  text-decoration: none;
}
:root:not([data-theme="dark"]) .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.06);
}

.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-container {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
}
/* the whole card carries the hover now, not the chip */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-container:hover {
  transform: none;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-container > img.app-icon {
  width: 44px;
  height: 44px;
  filter: saturate(0.92);
  transition: filter 0.16s ease;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover > .icon-container > img.app-icon {
  filter: saturate(1.05);
}

/* captions read left, wrap to two lines instead of truncating */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-caption {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  margin-top: 0;
  text-align: left;
  justify-content: center;
  white-space: normal;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-caption > .icon-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-color);
  transition: color 0.16s ease;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover > .icon-caption > .icon-title {
  color: var(--heading-color);
}

/* edit-mode remove badge: the tile is fluid now, so pin it to the
   corner rather than the old fixed 108px offset */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .hide-button {
  top: -8px;
  left: auto;
  right: -8px;
}

/* folder tiles: the preview is a thumbnail inside a 44px chip, so it
   gets a real 3x3 mini-grid — not the 178px grid core lets overflow,
   and not the popover's modal surface (v9's leak) */
.desktop-wrapper .desktop-icon > .icon-container.folder-icon {
  padding: 4px;
  background-color: var(--control-bg) !important;
  box-shadow: none;
}
.desktop-wrapper .desktop-icon > .icon-container.folder-icon .icons-container {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.desktop-wrapper .desktop-icon > .icon-container.folder-icon .icons {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.desktop-wrapper .desktop-icon > .icon-container.folder-icon .icons > .desktop-icon {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.desktop-wrapper .desktop-icon > .icon-container.folder-icon .icons > .desktop-icon > .icon-container {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 3px;
}
.desktop-wrapper .desktop-icon > .icon-container.folder-icon .icons > .desktop-icon > .icon-container > img {
  width: 100%;
  height: 100%;
}

/* the folder popover keeps the springboard tiles — a different
   context from the launcher — but its captions must wrap: core
   ellipsises "Financial Reports" down to "Financial Re…" */
.desktop-modal-body .icons > .desktop-icon > .icon-caption {
  height: auto;
  white-space: normal;
}
.desktop-modal-body .icons > .desktop-icon > .icon-caption > .icon-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  font-size: 12.5px;
  line-height: 1.25;
}

/* ============================================================
   v13 — Launcher icons: one hue per workspace
   Both icon sets Frappe ships are the same single blue: solid/ is
   #3d8bff filled, subtle/ is the same #3d8bff at 9% — so twelve
   tiles read as one wall of colour with no way to aim at one.
   Each tile already carries the workspace's own icon name in
   `data-icon`; desk.js swaps that sprite in as a line glyph and
   flags the tile. The palette keys off `data-id` (the label), so
   recolouring a workspace is a one-line edit right here.
   ============================================================ */
.desktop-icon                                             { --lt-icon: var(--primary); }

.desktop-icon[data-id="Framework"]        { --lt-icon: #7d859c; }
.desktop-icon[data-id="Organization"]     { --lt-icon: #cd99ff; }
.desktop-icon[data-id="Accounting"]       { --lt-icon: #3fca8b; }
.desktop-icon[data-id="Assets"]           { --lt-icon: #4cc2e6; }
.desktop-icon[data-id="Buying"]           { --lt-icon: #3d8bff; }
.desktop-icon[data-id="Manufacturing"]    { --lt-icon: #f28a4b; }
.desktop-icon[data-id="Projects"]         { --lt-icon: var(--primary); }
.desktop-icon[data-id="Quality"]          { --lt-icon: #ff5ad1; }
.desktop-icon[data-id="Selling"]          { --lt-icon: #e8b23e; }
.desktop-icon[data-id="Stock"]            { --lt-icon: #805af5; }
.desktop-icon[data-id="Subcontracting"]   { --lt-icon: #38b6a3; }
.desktop-icon[data-id="ERPNext Settings"],
.desktop-icon[data-id="BRAccount Settings"] { --lt-icon: #7d859c; }

/* inside the Accounting folder, and the workspaces that turn up if
   more get added to the desktop */
.desktop-icon[data-id="Invoicing"]         { --lt-icon: #3fca8b; }
.desktop-icon[data-id="Payments"]          { --lt-icon: #38b6a3; }
.desktop-icon[data-id="Financial Reports"] { --lt-icon: #3d8bff; }
.desktop-icon[data-id="Accounts Setup"]    { --lt-icon: #7d859c; }
.desktop-icon[data-id="Taxes"]             { --lt-icon: #ff5ad1; }
.desktop-icon[data-id="Banking"]           { --lt-icon: #3d8bff; }
.desktop-icon[data-id="Budget"]            { --lt-icon: #e8b23e; }
.desktop-icon[data-id="Share Management"]  { --lt-icon: #cd99ff; }
.desktop-icon[data-id="Subscription"]      { --lt-icon: var(--primary); }
.desktop-icon[data-id="Home"]              { --lt-icon: var(--primary); }
.desktop-icon[data-id="Build"]             { --lt-icon: #f28a4b; }
.desktop-icon[data-id="CRM"]               { --lt-icon: #ff5ad1; }
.desktop-icon[data-id="Support"]           { --lt-icon: #4cc2e6; }
.desktop-icon[data-id="Users"]             { --lt-icon: #805af5; }
.desktop-icon[data-id="Website"]           { --lt-icon: #3d8bff; }
.desktop-icon[data-id="Integrations"]      { --lt-icon: #38b6a3; }

/* The original art stays in the DOM (folder previews are walked by
   core's own JS) — hidden, not removed. What shows is one letter chip
   per tile, coloured from the curated palette above, animated in. */
.desktop-icon[data-lt-icon] > .icon-container > :not(.lt-desk-chip) {
  display: none;
}
.lt-desk-chip {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  border-radius: inherit;
  color: var(--lt-icon);
  background: color-mix(in srgb, var(--lt-icon) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lt-icon) 22%, transparent);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="dark"] .lt-desk-chip {
  color: color-mix(in srgb, var(--lt-icon) 72%, #ffffff);
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] > .icon-container {
  padding: 0;
  background: transparent !important;
}
/* a folder reads as a stack: one more ring, half a step out */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-folder] > .icon-container {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lt-icon) 10%, transparent);
  border-radius: var(--border-radius);
}

/* entrance: tiles pop in, in reading order */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] {
  animation: lt-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
@keyframes lt-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
}
/* hover: the tile lifts, the chip answers */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon]:hover {
  border-color: color-mix(in srgb, var(--lt-icon) 45%, transparent);
  transform: translateY(-3px);
}
.desktop-icon[data-lt-icon]:hover .lt-desk-chip {
  transform: scale(1.1) rotate(-4deg);
}

/* the folder popover gets the same chips on core's larger tiles */
.desktop-modal-body .icons > .desktop-icon[data-lt-icon] > .icon-container {
  padding: 0;
  background: transparent !important;
}
.desktop-modal-body .lt-desk-chip { font-size: 26px; }

/* the mark floats over the launcher heading */
.lt-desk-logo {
  width: 46px; height: 46px;
  margin-bottom: 10px;
  animation: lt-float 4s ease-in-out infinite alternate;
}
@keyframes lt-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] { animation: none; }
  .lt-desk-logo { animation: none; }
  .desktop-icon[data-lt-icon]:hover .lt-desk-chip { transform: none; }
}

/* columns follow the space at every width - core's fixed tracks clipped
   a whole column off phone screens */
.desktop-wrapper .desktop-container > .icons-container > .icons {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
@media (max-width: 700px) {
  .desktop-wrapper .desktop-container {
    padding: 24px 16px 48px;
  }
  .desktop-wrapper .desktop-container > .icons-container > .icons {
    gap: 10px;
  }
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon {
    height: 64px;
  }
  .desktop-wrapper .navbar-container {
    padding: 10px 16px;
    gap: 12px;
  }
}

/* v11 — dark depth from hairlines + surface steps, not shadows */
[data-theme="dark"] .widget,
[data-theme="dark"] .report-wrapper,
[data-theme="dark"] .frappe-card,
[data-theme="dark"] .onboarding-sidebar {
  box-shadow: none;
}
[data-theme="dark"] .widget.number-widget-box:hover,
[data-theme="dark"] .widget.dashboard-widget-box:hover,
[data-theme="dark"] .widget.shortcut-widget-box:hover {
  box-shadow: none;
  border-color: rgba(var(--primary-rgb), 0.45);
}

/* ============================================================
   v12 — filter progressive disclosure + compact filter pills
   ============================================================ */
.page-form .frappe-control.lt-more-hidden {
  display: none !important;
}
.page-form.lt-more-open .frappe-control.lt-more-hidden {
  display: block !important;
}
.lt-morebar {
  order: 999;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--text-light) 55%, transparent);
  border-radius: 9999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.lt-morebar:hover {
  color: var(--heading-color);
  border-color: rgba(var(--primary-rgb), 0.55);
  background: rgba(var(--primary-rgb), 0.08);
}

/* checkbox pills: tighter (they dominated the AR filter wall) */
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label {
  height: 28px;
  padding: 0 10px;
  gap: 6px;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label .input-area input {
  width: 12px;
  height: 12px;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox .label-area {
  font-size: 12px;
}

/* inputs that carry a value read slightly stronger than empty ones */
.page-form input.form-control:not(:placeholder-shown) {
  border-color: color-mix(in srgb, var(--text-light) 40%, transparent);
  color: var(--heading-color);
}

/* ============================================================
   v21 — motion for the Desk's own dashboards

   The Agency Book blocks animate themselves inside their shadow
   roots. Everything else the Desk calls a dashboard — the nine
   Dashboard pages, and the link and shortcut cards under a
   workspace — is Frappe's own widget markup out here, and sat
   static next to it. Same language as the blocks: rise on a
   stagger, lift under the pointer.

   The entrance rides widget creation — which is when content
   actually arrives, and avoids replaying over cards that Frappe is
   merely re-showing from a page it kept in the DOM. --lt-i is
   stamped by a MutationObserver in desk.js rather than by a pass
   over the finished page, because a workspace rebuilds its cards
   well after the route changes; see the comment on dash().
   ============================================================ */
:root {
  --lt-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lt-step: 52ms;
}

@keyframes lt-rise {
  from { opacity: 0; transform: translateY(14px); }
}

/* custom-block-widget-box is excluded: an Agency Book block runs its own
   entrance inside the shadow root, and rising the wrapper as well compounds
   the two into one long slide. desk.js skips it when stamping --lt-i. */
.lt-anim .widget:not(.custom-block-widget-box) {
  animation: lt-rise 0.58s var(--lt-ease) backwards;
  animation-delay: calc(var(--lt-i, 0) * var(--lt-step));
}

/* The lift is the transform, not a shadow — v11 deliberately took shadows off
   dark-mode widgets and gets its depth from hairlines and surface steps, so a
   shadow here would only work in one theme. */
.widget {
  transition: box-shadow 0.22s ease, border-color 0.22s ease,
    transform 0.22s var(--lt-ease);
}
.widget.number-widget-box:hover,
.widget.dashboard-widget-box:hover,
.widget.shortcut-widget-box:hover {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  /* durations collapse rather than the rule being dropped, so the entrance
     still settles on opacity 1 rather than never running at all */
  .lt-anim .widget:not(.custom-block-widget-box) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .widget.number-widget-box:hover,
  .widget.dashboard-widget-box:hover,
  .widget.shortcut-widget-box:hover { transform: none; }
}

/* ============================================================
   v28 — let the dashboards breathe
   Core caps every workspace page at .layout-main { max-width:
   900px }, which pins the Agency Book blocks at ~848px — the
   three-column desktop architecture could never engage. Scoped to
   pages that actually carry the workspace editor, so forms, lists
   and reports keep their own widths.
   ============================================================ */
.layout-main:has(.editor-js-container) {
  /* the cap arrives via var(--page-max-width), so override the variable —
     a plain max-width here loses to core's more specific declaration */
  --page-max-width: 1560px;
}

/* ============================================================
   v25 — sidebar tree: the third level
   Folder-tree affordances for the subgroup convention desk.js
   renders: caret on the left, folder glyph, an indent guide down
   the children, and a grid-rows collapse so height animates
   without measuring. Levels one and two are untouched core.
   ============================================================ */
.body-sidebar .lt-caret {
  width: 14px; height: 14px; flex: 0 0 auto; margin-right: 2px;
  color: var(--text-muted);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
}
.body-sidebar .lt-sub > .standard-sidebar-item { cursor: pointer; }
.body-sidebar .lt-sub > .standard-sidebar-item .item-anchor {
  display: flex; align-items: center;
}
.body-sidebar .lt-sub > .standard-sidebar-item:hover .lt-caret { color: var(--heading-color); }
.body-sidebar .lt-sub.lt-open > .standard-sidebar-item .lt-caret { transform: rotate(0deg); }
/* the folder subgroup label reads a shade stronger than a leaf link */
.body-sidebar .lt-sub > .standard-sidebar-item .sidebar-item-label { font-weight: 600; }
.body-sidebar .lt-sub > .standard-sidebar-item .sidebar-item-icon { color: var(--primary); }

/* children: re-parented by desk.js into the subgroup's own container */
.body-sidebar .lt-sub > .sidebar-child-item {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.body-sidebar .lt-sub.lt-open > .sidebar-child-item { grid-template-rows: 1fr; }
.body-sidebar .lt-sub-clip { min-height: 0; overflow: hidden; }

/* the indent guide the reference draws down each open folder */
.body-sidebar .lt-sub-clip {
  margin-left: 21px; padding-left: 7px;
  border-left: 1px solid var(--border-color);
}
.body-sidebar .lt-sub-clip .sidebar-item-container { position: relative; }
.body-sidebar .lt-leaf > .standard-sidebar-item .sidebar-item-label { font-size: 12.8px; }

/* entrance for revealed children — a small settle, not a show */
.body-sidebar .lt-sub.lt-open .lt-sub-clip > .sidebar-item-container {
  animation: lt-leaf-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes lt-leaf-in { from { opacity: 0; transform: translateX(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .body-sidebar .lt-sub > .sidebar-child-item { transition: none; }
  .body-sidebar .lt-caret { transition: none; }
  .body-sidebar .lt-sub.lt-open .lt-sub-clip > .sidebar-item-container { animation: none; }
}

/* ============================================================
   v31 — the engine system across the working desk
   The dashboards moved to the ui-ux-pro-max system (emerald,
   Fira, 6px); the pages their submenus open — lists, forms,
   filters — still wore the old chrome. This aligns them.
   ============================================================ */

/* Fira Sans leads the desk; the old stack stays as fallback */
body, .form-control, .btn, input, select, textarea {
  font-family: "Sora", "Plus Jakarta Sans", InterVariable, Inter,
    -apple-system, sans-serif;
}

/* figures are data: money and counts get the mono face in forms */
.frappe-control[data-fieldtype="Currency"] input,
.frappe-control[data-fieldtype="Float"] input,
.frappe-control[data-fieldtype="Int"] input,
.frappe-control[data-fieldtype="Percent"] input {
  font-family: var(--font-family-monospace);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- controls: 6px system, compact height, emerald focus ---- */
.form-control,
.frappe-control input.form-control,
.frappe-control select.form-control,
.frappe-control textarea.form-control {
  border-radius: 6px;
}
.frappe-control input.form-control,
.frappe-control select.form-control {
  min-height: 34px;
  height: 34px;
  font-size: 13px;
}
.frappe-control textarea.form-control { min-height: 68px; }
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.22);
}

/* ---- buttons: 6px, and dark-mode primary flips to ink-on-green,
   the same move the dashboard actions make ---- */
.btn { border-radius: 6px; }
.btn-primary, .btn-primary:focus {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* Luminaux pins white on .btn-primary with more specificity than a bare
   override; the !important is scoped to exactly this pair and nothing else */
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] .btn.btn-primary:hover,
[data-theme="dark"] .btn.btn-primary:focus,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary svg {
  color: var(--on-primary) !important;
  --icon-stroke: var(--on-primary);
  font-weight: 600;
}


/* ---- forms: quieter labels, firmer section heads, engine tabs ---- */
.form-layout .control-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.form-section .section-head,
.form-dashboard-section .section-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--heading-color);
}
.form-tabs-list .nav-link.active {
  border-bottom: 2px solid var(--primary);
  color: var(--heading-color);
}
.reqd-asterisk, .form-layout .reqd::after { color: var(--danger); }

/* ---- list pages: the filter strip and empty state pull their weight ---- */
.list-row-head .filterable, .standard-filter-section .form-control {
  border-radius: 6px;
}
.standard-filter-section .form-control {
  height: 30px; min-height: 30px; font-size: 12.5px;
}
.no-result .btn-primary, .msg-box .btn-primary {
  border-radius: 6px; padding: 8px 18px; font-weight: 600;
}
.no-result .msg-box, .msg-box {
  color: var(--text-muted);
}

/* selection + link affordances follow the accent */
::selection { background: rgba(var(--primary-rgb), 0.25); }
a:not(.btn):hover { color: var(--primary-hover); }

/* checkboxes and switches take the accent everywhere */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ============================================================
   v34 — the money face on the submenu surfaces
   The direction doc's Stripe rule ("tabular figures, right
   alignment, currency de-emphasis — money is data") applied to
   the pages the sidebar submenus actually open: report
   datatables, list rows, and the account tree. Column targeting
   for reports is data-aware, injected by desk.js from each
   report's own fieldtypes.
   ============================================================ */

/* datatable headers read as eyebrows, the Mercury move */
.datatable .dt-header .dt-cell__content {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.datatable .dt-row:not(.dt-row--header):hover .dt-cell {
  background: var(--highlight-color, rgba(var(--primary-rgb), 0.05));
}
/* totals and group rows carry the ink */
.dt-row.dt-row-totalRow .dt-cell__content,
.datatable .dt-cell--highlight .dt-cell__content { font-weight: 700; color: var(--heading-color); }

/* list rows: numeric columns are already right-aligned — give them the face */
.list-row .list-row-col.text-right,
.list-row-head .list-row-col.text-right span {
  font-family: var(--font-family-monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.list-row-head .list-row-col.text-right span { font-family: inherit; } /* headers stay Sans */
.list-row .list-row-col.text-right { font-size: 12.5px; }

/* account tree: balances are the point of the page */
.tree-node .balance-area {
  font-family: var(--font-family-monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-size: 12.5px;
  color: var(--heading-color);
}
.tree-link { border-radius: 6px; }
.tree-link:hover { background: rgba(var(--primary-rgb), 0.07); }
.tree-link.active { background: rgba(var(--primary-rgb), 0.12); }

/* the empty state's call to action is a real primary, not a grey ghost */
.no-result .btn-primary-light, .msg-box .btn-primary-light {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  padding: 8px 18px;
}
[data-theme="dark"] .no-result .btn-primary-light,
[data-theme="dark"] .msg-box .btn-primary-light { color: var(--on-primary); }
.no-result .btn-primary-light:hover, .msg-box .btn-primary-light:hover {
  background: var(--primary-hover);
}

/* ============================================================
   v35 — the app switcher as a grid
   The workspace flyout is replaced (desk.js appMenu) by one
   sectioned panel: Accounting / Operations / Admin, letter chips
   hue-hashed per workspace, the current one ringed. The rest of
   the menu keeps its shape — utilities quiet, Logout in red.
   ============================================================ */
.frappe-menu.lt-menu {
  width: min(560px, calc(100vw - 12px)) !important;
  /* stock caps dropdowns at 20rem; max-width beats width, so cap ours too */
  max-width: min(560px, calc(100vw - 12px)) !important;
  /* No cap on the menu itself: frappe opens it with inline display:block,
     so flex/overflow tricks here either lose or break closing. The grid
     section below carries its own scroll cap instead. */
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14), 0 24px 60px -18px rgba(0, 0, 0, 0.4);
  padding: 6px;
}
.frappe-menu.lt-menu .dropdown-menu-item { border-radius: var(--border-radius-sm); }
.frappe-menu.lt-menu .dropdown-menu-item:hover {
  background: rgba(var(--primary-rgb), 0.08);
}
.frappe-menu.lt-menu .lt-logout,
.frappe-menu.lt-menu .lt-logout .menu-item-title,
.frappe-menu.lt-menu .lt-logout svg { color: var(--danger) !important; }

.lt-apps { padding: 4px 6px 8px; border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
  overflow-y: auto; overflow-x: hidden;
  max-height: calc(100vh - 400px); min-height: 160px; }
.lt-apps-h {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 10px 4px 6px;
}
.lt-apps-h:first-child { margin-top: 4px; }
.lt-apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 10px;
}
.lt-app-tile {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: var(--border-radius-sm); border: 1px solid transparent;
  text-decoration: none !important; cursor: pointer; min-width: 0;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.lt-app-tile:hover { background: rgba(var(--primary-rgb), 0.08); }
.lt-app-tile.on {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.5);
}
.lt-app-chip {
  width: 26px; height: 26px; border-radius: var(--border-radius-sm); flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: hsl(var(--h) 55% 45% / 0.18);
  color: hsl(var(--h) 55% 38%);
}
[data-theme="dark"] .lt-app-chip { color: hsl(var(--h) 60% 66%); }
.lt-app-t {
  font-size: 12.5px; font-weight: 500; color: var(--text-color);
  min-width: 0;
  white-space: normal; overflow-wrap: break-word; line-height: 1.3;
}
.lt-app-tile.on .lt-app-t { color: var(--heading-color); font-weight: 600; }

/* ============================================================
   v39 - query report chrome: the tree footer as a proper toolbar
   ============================================================ */
.tree-footer { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 0; }
.tree-footer .input-group { width: auto; flex-wrap: nowrap; gap: 6px; align-items: center; }
.tree-footer .input-group input { width: 64px; text-align: center; }

/* ============================================================
   v40 - sidebar tree tuned + active-row contrast
   The subgroup wore caret AND stock icon (noise), its children sat
   SHALLOWER than their own folder label (inverted hierarchy), long
   report names ellipsized, and the active row painted dark ink on
   a faint blue wash. Caret alone carries the folder; children step
   one clear level deeper; labels wrap; active goes emerald.
   ============================================================ */
.body-sidebar .lt-sub > .standard-sidebar-item .sidebar-item-icon { display: none; }
.body-sidebar .lt-caret { margin-right: 6px; }
.body-sidebar .lt-sub-clip { margin-left: 35px; padding-left: 9px; }

/* stock nowrap+ellipsis wins over the v18 wrap rule in this sidebar */
.body-sidebar .standard-sidebar-item .sidebar-item-label {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

/* Light active rows come straight from the tokened base rules earlier in
   this file (the select token is already a primary wash). Dark is the one
   deliberate divergence: a solid emerald fill with --on-primary ink -
   fill and ink live together, here. */
[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.selected {
  background-color: var(--primary) !important;
}
[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg {
  color: var(--on-primary) !important;
  --icon-stroke: var(--on-primary);
}

/* ============================================================
   v41 - the Black Rock mark
   White tile under the diamond so the logo reads in both themes:
   sidebar header brand + app-menu brand row.
   ============================================================ */
.lt-brand {
  width: 30px; height: 30px; flex: 0 0 auto;
  background: #fff; border-radius: var(--border-radius); padding: 2px;
  border: 1px solid var(--border-color);
  object-fit: contain;
}
.lt-brandrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}
.lt-brandrow .lt-brand { width: 34px; height: 34px; }
.lt-brandrow-t { display: flex; flex-direction: column; line-height: 1.25; }
.lt-brandrow-t strong { font-size: 13.5px; color: var(--heading-color); letter-spacing: 0.01em; }
.lt-brandrow-t span { font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================================================
   v52 - the stock Workspaces flyout is retired unconditionally
   Belt for contexts where desk.js hasn't (yet) transformed a menu:
   the row that opens the old flyout is hidden by its icon signature,
   so the previous pattern can never render, transformed or not.
   ============================================================ */
.frappe-menu.context-menu .dropdown-menu-item:has(use[href="#icon-wallpaper"]) {
  display: none !important;
}

/* ============================================================
   v53 - mobile polish: safe areas, touch comfort, fluid heading
   ============================================================ */
@supports (padding: env(safe-area-inset-left)) {
  .body-sidebar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  header.navbar, .desktop-wrapper .navbar-container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}
@media (pointer: coarse) {
  .lt-app-tile { padding: 10px 8px; }
  .frappe-menu.context-menu .dropdown-menu-item { min-height: 42px; }
  .body-sidebar .standard-sidebar-item { min-height: 42px; }
  .tree-footer .btn { padding: 7px 12px; }
}
.lt-desk-head h1 { font-size: clamp(20px, 4.5vw, 28px); }

/* ============================================================
   v21 — landing-page accents on the desk
   ============================================================ */
/* primary actions wear the landing's violet→lilac gradient; hover brightens
   exactly as .btn-gradient does there */
.btn-primary,
.btn.btn-primary,
.btn-primary:focus {
  background-image: var(--primary-grad);
  background-color: var(--primary);
  border-color: transparent;
  color: var(--on-primary) !important;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-image: var(--primary-grad);
  filter: brightness(1.08);
  color: var(--on-primary) !important;
}
.btn-primary:active { transform: translateY(1px); }

/* focus ring in the accent, like the landing's --ring */
.form-control:focus,
.awesomplete input:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22) !important;
  border-color: var(--primary) !important;
}

/* active sidebar label: lilac on dark, violet on light */
.standard-sidebar-item.active-sidebar .sidebar-item-label,
.standard-sidebar-item.active-sidebar svg,
.body-sidebar .sidebar-item.active .sidebar-item-label {
  color: var(--accent-fg);
}

/* selection + links share the accent */
::selection { background: rgba(var(--primary-rgb), 0.28); }
a, .text-primary { color: var(--accent-fg); }
.indicator-pill.blue, .indicator-pill.purple { background: rgba(var(--primary-rgb), 0.14); color: var(--accent-fg); }

/* ============================================================
   Login page - BRAccount presentation
   ------------------------------------------------------------
   Frappe's login is a website page, not a desk page, so it never picks up the
   desk's dark palette and rendered as stock Frappe on a grey field. Everything
   here is scoped to body[data-path="login"] so no other website page moves, and
   the dark tokens are pinned literally rather than via [data-theme] because the
   website shell never sets that attribute.
   ============================================================ */
body[data-path="login"] {
  --login-bg: #0e0c15;
  --login-panel: #16141f;
  --login-hairline: rgba(255, 255, 255, 0.07);
  --login-hairline-strong: rgba(255, 255, 255, 0.12);
  --login-heading: #ffffff;
  --login-body: #bcc3d7;
  --login-muted: #8d95ad;
  --login-accent: #805af5;
  --login-accent-2: #cd99ff;
  --login-control: #21242d;

  background: var(--login-bg) !important;
  color: var(--login-body) !important;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  min-height: 100dvh;
}

/* the landing page's two accent blooms, faint enough to stay out of the way */
body[data-path="login"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38rem 38rem at 18% 12%, rgba(128, 90, 245, 0.16), transparent 65%),
    radial-gradient(30rem 30rem at 84% 86%, rgba(205, 153, 255, 0.12), transparent 65%);
}

body[data-path="login"] .page-card {
  position: relative;
  background: var(--login-panel) !important;
  border: 1px solid var(--login-hairline) !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75) !important;
  padding: 2.25rem 2rem !important;
  max-width: 26rem;
  width: 100%;
}

/* swap Frappe's own framework logo for the BRAccount mark */
body[data-path="login"] .app-logo {
  content: url("/assets/ledger_theme/images/br-logo.png");
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px;
  background: #ffffff;
  padding: 3px;
  margin-bottom: 0.5rem;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card h4 {
  color: var(--login-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  font-size: 1.5rem !important;
}
body[data-path="login"] .page-card-subtitle,
body[data-path="login"] .text-muted {
  color: var(--login-muted) !important;
}
body[data-path="login"] label,
body[data-path="login"] .control-label {
  color: var(--login-heading) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
}

body[data-path="login"] .form-control,
body[data-path="login"] input.form-control {
  background-color: var(--login-control) !important;
  border: 1px solid var(--login-hairline-strong) !important;
  color: var(--login-heading) !important;
  border-radius: 10px !important;
  min-height: 46px !important;
  font-size: 16px !important;   /* keeps iOS from zooming the field on focus */
}
body[data-path="login"] .form-control::placeholder { color: var(--login-muted) !important; }
body[data-path="login"] .form-control:focus {
  border-color: var(--login-accent) !important;
  box-shadow: 0 0 0 3px rgba(128, 90, 245, 0.25) !important;
}

body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
  background: linear-gradient(to right, var(--login-accent), var(--login-accent-2)) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  min-height: 46px !important;
  transition: filter 0.15s ease, transform 0.15s ease;
}
body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

body[data-path="login"] .btn-login-option,
body[data-path="login"] .btn-default:not(.btn-login) {
  background: transparent !important;
  border: 1px solid var(--login-hairline-strong) !important;
  color: var(--login-body) !important;
  border-radius: 10px !important;
  min-height: 44px !important;
}
body[data-path="login"] .btn-login-option:hover,
body[data-path="login"] .btn-default:not(.btn-login):hover {
  background: var(--login-control) !important;
  color: var(--login-heading) !important;
}

body[data-path="login"] a { color: var(--login-accent-2) !important; }
body[data-path="login"] .toggle-password,
body[data-path="login"] .input-group-text {
  background: transparent !important;
  border-color: var(--login-hairline-strong) !important;
  color: var(--login-muted) !important;
}