@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
/* ============================================================
   BRAccount Desk theme v83 — Vuexy (2026-10-28)

   The owner's html-version/ folder holds the Vuexy Bootstrap admin
   template; this release puts the whole Desk in its language, page by
   page (DESIGN.md, "v83 Vuexy"):

     canvas  light #f8f7fa / dark #14172a        cards  #fdfcff / #1c2036
     ink     #444050 / #ecebf8                   text   #6d6b77 / #bdbdd4
     lines   #e6e6e8 / #2f3450                   inputs #d0ced4 / #3f4566
     accent  #6a5fdf; links #6157e0 light, #9a92f5 dark
     (v90: the /analytics palette, nepal_ird braccount_dash.css on Vuexy
     v10.11.1; it was Vuexy's older #161d31 / #283046 navy until 2026-10-31)
     states  success #28c76f · danger #ea5455 · warning #ff9f43 · info #00cfe8
     depth   one soft card shadow, 0 4px 24px rgba(34,41,47,.1); no hairlines
     shape   5px controls · 6px cards, menus, modals · 999px pills
     menu    gradient pill with a primary glow on the active row; rows
             slide 5px on hover; children carry Vuexy's circle bullet
     type    Geist (the owner's choice, 2026-10-19), tabular figures

   v84 (2026-10-28): the dashboards keep their jewel colouring — number
   cards, chart panels and shortcuts are the v75/v80 jewel set again
   (section 14), as the Agency Book blocks are (block.css v84).
   v85 (2026-10-28): that colour shines and glows — blooms of light inside
   the cards, a sharper top shine, breathing outer glows, a glowing jewel
   rule; dashboard charts glow too (charts.js). Figures stay crisp.
   v87 (2026-10-28): the workspace switcher gives every workspace an icon
   on a glowing jewel tile instead of a letter chip (section 3).
   v90 (2026-10-31): the owner asked for the desk in exactly the /analytics
   colours: its canvas, paper, lines, inks, brand and chart series in both
   themes, its brand light behind every page, the frosted floating head
   and the menu's edge of light (section 3).

   Load-order facts that still apply (see DESIGN.md "Cascade"):
   - :root:root doubles specificity so tokens beat Frappe's own blocks.
   - The Desktop launcher stylesheet is an inline <style> that can land
     after this file; its overrides win on specificity (.desktop-wrapper).
   - Frappe opens menus with inline display:block; never fight that.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root:root:not([data-theme="dark"]),
:root[data-theme="light"] {
  /* brand */
  --primary: #6a5fdf;
  --primary-hover: #5a4fd6;
  --primary-rgb: 106, 95, 223;
  --accent-fg: #6157e0;
  --accent-soft: rgba(106, 95, 223, 0.12);
  --accent-ring: rgba(106, 95, 223, 0.25);
  --primary-color: var(--primary);
  --btn-primary: var(--primary);
  --on-primary: #ffffff;
  --ring: var(--primary);
  --vx-grad: linear-gradient(270deg, rgba(106, 95, 223, 0.7) 0%, #6a5fdf 100%);
  --vx-glow: 0 0.125rem 0.375rem 0 rgba(106, 95, 223, 0.3);
  --vx-btn-glow: 0 0.125rem 0.375rem 0 rgba(106, 95, 223, 0.3);
  --vx-fade: linear-gradient(180deg, rgba(248, 247, 250, 0.95) 44%, rgba(248, 247, 250, 0.46) 73%, rgba(248, 247, 250, 0));
  /* the Analytics page's brand light behind the page, barely there in daylight */
  --lt-aurora-1: rgba(115, 103, 240, 0.12);
  --lt-aurora-2: rgba(37, 99, 235, 0.08);
  --lt-aurora-3: rgba(124, 58, 237, 0.06);

  /* surfaces */
  --background: #f8f7fa;
  --bg-color: var(--background);
  --sidebar-bg: #fdfcff;
  --card-bg: #fdfcff;
  --fg-color: #fdfcff;
  --modal-bg: #fdfcff;
  --raised-bg: #fdfcff;
  --muted: #f3f2f3;
  --accent: #eeeeef;
  --control-bg: #fdfcff;
  --control-bg-on-gray: #f3f2f3;
  --disabled-control-bg: #efefef;
  --input-disabled-bg: #efefef;
  --highlight-color: #f3f2f3;
  --subtle-accent: #f3f2f3;
  --subtle-fg: #eaeaec;
  --awesomplete-hover-bg: rgba(106, 95, 223, 0.08);
  --awesomebar-focus-bg: #fdfcff;
  --fg-hover-color: #f6f5f8;
  --row-hover: #f6f5f8;
  --thead-bg: #f6f5f8;

  /* lines */
  --border-color: #e6e6e8;
  --border-strong: #d0ced4;
  --dark-border-color: #d0ced4;
  --table-border-color: #e6e6e8;
  --sidebar-border-color: #e6e6e8;

  /* ink */
  --heading-color: #444050;
  --text-color: #6d6b77;
  --foreground: #6d6b77;
  --text-muted: #706d80;
  --muted-foreground: #706d80;
  --text-light: #acaab1;
  --disabled-text-color: #acaab1;
  --text-on-light-gray: #6d6b77;
  --menu-ink: #444050;

  /* nav states */
  --sidebar-hover-color: #f1f0f3;
  --sidebar-select-color: var(--accent-soft);
  --sidebar-active-color: var(--accent-soft);
  --checkbox-focus-shadow: 0 0 0 3px var(--accent-ring);

  /* semantics: Vuexy's set; text on a 12-14% tint is darkened until it
     clears AA 4.5:1 (Vuexy's own light badges sit near 2-3:1) */
  --success: #28c76f;
  --warning: #ff9f43;
  --danger: #ff4c51;
  --info: #00bad1;
  --secondary: #808390;
  --bg-green: rgba(40, 199, 111, 0.12);   --text-on-green: #157a43;
  --bg-blue: rgba(106, 95, 223, 0.12);   --text-on-blue: #5a4fd6;
  --bg-red: rgba(255, 76, 81, 0.12);      --text-on-red: #c4262b;
  --bg-orange: rgba(255, 159, 67, 0.14);  --text-on-orange: #a3560c;
  --bg-yellow: rgba(255, 159, 67, 0.14);  --text-on-yellow: #a3560c;
  --bg-gray: rgba(128, 131, 144, 0.12);   --text-on-gray: #5f5b6e;
  --bg-purple: rgba(106, 95, 223, 0.12); --text-on-purple: #5a4fd6;
  --bg-cyan: rgba(0, 186, 209, 0.12);     --text-on-cyan: #0a7585;
  --bg-pink: rgba(232, 62, 140, 0.12);    --text-on-pink: #d6286f;

  /* Frappe v16 "Espresso" families: aligned so core surfaces agree */
  --ink-gray-9: #444050; --ink-gray-8: #6d6b77; --ink-gray-7: #6d6b77;
  --ink-gray-6: #706d80; --ink-gray-5: #706d80; --ink-gray-4: #acaab1;
  --surface-white: #fdfcff; --surface-cards: #fdfcff; --surface-modal: #fdfcff;
  --surface-menu: #fdfcff; --surface-selected: #eeeeef;
  --surface-gray-1: #f6f5f8; --surface-gray-2: #f3f2f3; --surface-gray-3: #eaeaec;
  --surface-gray-4: #e6e6e8; --surface-gray-5: #6d6b77;
  --outline-gray-1: #e6e6e8; --outline-gray-2: #e6e6e8; --outline-gray-3: #d0ced4;

  /* depth: Vuexy draws every card with one soft shadow and no hairline */
  --shadow-xs: 0 0.0625rem 0.375rem 0 rgba(47, 43, 61, 0.1);
  --shadow-sm: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
  --shadow-base: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
  --shadow-md: var(--shadow-base);
  --shadow-lg: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16);
  --shadow-xl: 0 0.375rem 1.5rem 0 rgba(47, 43, 61, 0.18), 0 24px 60px -16px rgba(47, 43, 61, 0.22);
  --lift: 0 0.5rem 1.75rem 0 rgba(47, 43, 61, 0.18);
  --card-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
  --modal-shadow: var(--shadow-xl);
  --drop-shadow: var(--shadow-lg);
  --menu-shadow: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);

  /* shape */
  --border-radius-sm: 5px;
  --border-radius: 6px;
  --border-radius-md: 6px;
  --border-radius-lg: 6px;
  --border-radius-xl: 6px;
  --r-ctl: 5px;
  --r-row: 5px;
  --r-card: 6px;
  --r-modal: 6px;

  /* charts */
  --chart-1: #7367f0;
  --chart-2: #0a9fb3;
  --chart-3: #d97706;
  --chart-4: #e11d48;
  --chart-5: #059669;
  --charts-label-color: var(--text-muted);
  --charts-axis-line-color: var(--border-color);
  --fo-card-grad: var(--card-bg);
}

:root[data-theme="dark"] {
  --primary: #6a5fdf;
  --primary-hover: #7b71e8;
  --primary-rgb: 106, 95, 223;
  --accent-fg: #9a92f5;
  --accent-soft: rgba(106, 95, 223, 0.16);
  --accent-ring: rgba(106, 95, 223, 0.35);
  --primary-color: var(--primary);
  --btn-primary: var(--primary);
  --on-primary: #ffffff;
  --ring: var(--primary);
  --vx-grad: linear-gradient(270deg, rgba(106, 95, 223, 0.7) 0%, #6a5fdf 100%);
  --vx-glow: 0 0.125rem 0.375rem 0 rgba(106, 95, 223, 0.3);
  --vx-btn-glow: 0 0.125rem 0.375rem 0 rgba(106, 95, 223, 0.3);
  --vx-fade: linear-gradient(180deg, rgba(20, 23, 42, 0.9) 44%, rgba(20, 23, 42, 0.43) 73%, rgba(20, 23, 42, 0));
  --lt-aurora-1: rgba(115, 103, 240, 0.3);
  --lt-aurora-2: rgba(37, 99, 235, 0.22);
  --lt-aurora-3: rgba(124, 58, 237, 0.18);

  --background: #14172a;
  --bg-color: var(--background);
  --sidebar-bg: #1c2036;
  --card-bg: #1c2036;
  --fg-color: #1c2036;
  --modal-bg: #1c2036;
  --raised-bg: #1c2036;
  --muted: #2a2f49;
  --accent: #2f3450;
  --control-bg: #1c2036;
  --control-bg-on-gray: #2a2f49;
  --disabled-control-bg: #181c30;
  --input-disabled-bg: #181c30;
  --highlight-color: #262a42;
  --subtle-accent: #22263d;
  --subtle-fg: #2a2f49;
  --awesomplete-hover-bg: rgba(106, 95, 223, 0.14);
  --awesomebar-focus-bg: #1c2036;
  --fg-hover-color: #262a42;
  --row-hover: #262a42;
  --thead-bg: #22263d;

  --border-color: #2f3450;
  --border-strong: #3f4566;
  --dark-border-color: #3f4566;
  --table-border-color: #2f3450;
  --sidebar-border-color: #2f3450;

  --heading-color: #ecebf8;
  --text-color: #bdbdd4;
  --foreground: #bdbdd4;
  --text-muted: #9c9db6;
  --muted-foreground: #9c9db6;
  --text-light: #626889;
  --disabled-text-color: #626889;
  --text-on-light-gray: #bdbdd4;
  --menu-ink: #cfcde4;

  --sidebar-hover-color: #262a42;
  --sidebar-select-color: var(--accent-soft);
  --sidebar-active-color: var(--accent-soft);
  --checkbox-focus-shadow: 0 0 0 3px var(--accent-ring);

  --success: #28c76f;
  --warning: #ff9f43;
  --danger: #ff4c51;
  --info: #00bad1;
  --secondary: #808390;
  --bg-green: rgba(40, 199, 111, 0.14);   --text-on-green: #5fd99a;
  --bg-blue: rgba(106, 95, 223, 0.16);   --text-on-blue: #b1abf8;
  --bg-red: rgba(255, 76, 81, 0.14);      --text-on-red: #ff8a8d;
  --bg-orange: rgba(255, 159, 67, 0.14);  --text-on-orange: #ffb672;
  --bg-yellow: rgba(255, 159, 67, 0.14);  --text-on-yellow: #ffb672;
  --bg-gray: rgba(189, 189, 212, 0.12);   --text-on-gray: #b7b8cf;
  --bg-purple: rgba(106, 95, 223, 0.16); --text-on-purple: #b1abf8;
  --bg-cyan: rgba(0, 186, 209, 0.14);     --text-on-cyan: #4fd3e4;
  --bg-pink: rgba(232, 62, 140, 0.14);    --text-on-pink: #f06fa9;

  --ink-gray-9: #ecebf8; --ink-gray-8: #bdbdd4; --ink-gray-7: #bdbdd4;
  --ink-gray-6: #9c9db6; --ink-gray-5: #9c9db6; --ink-gray-4: #626889;
  --surface-white: #1c2036; --surface-cards: #1c2036; --surface-modal: #1c2036;
  --surface-menu: #1c2036; --surface-selected: #2f3450;
  --surface-gray-1: #22263d; --surface-gray-2: #2a2f49; --surface-gray-3: #2f3450;
  --surface-gray-4: #3f4566; --surface-gray-5: #bdbdd4;
  --outline-gray-1: #2f3450; --outline-gray-2: #2f3450; --outline-gray-3: #3f4566;

  --shadow-xs: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0.125rem 0.375rem -0.125rem rgba(5, 7, 20, 0.6);
  --shadow-sm: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0.25rem 0.75rem -0.25rem rgba(5, 7, 20, 0.7);
  --shadow-base: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.75rem 2rem -1rem rgba(5, 7, 20, 0.8);
  --shadow-md: var(--shadow-base);
  --shadow-lg: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1rem 2.5rem -1rem rgba(5, 7, 20, 0.85);
  --shadow-xl: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1.5rem 3.5rem -1rem rgba(5, 7, 20, 0.9);
  --lift: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1.25rem 3rem -1rem rgba(5, 7, 20, 0.85);
  --card-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.75rem 2rem -1rem rgba(5, 7, 20, 0.8);
  --modal-shadow: var(--shadow-xl);
  --drop-shadow: var(--shadow-lg);
  --menu-shadow: 0 0.125rem 0.5rem 0 rgba(5, 7, 20, 0.35);

  --border-radius-sm: 5px;
  --border-radius: 6px;
  --border-radius-md: 6px;
  --border-radius-lg: 6px;
  --border-radius-xl: 6px;
  --r-ctl: 5px;
  --r-row: 5px;
  --r-card: 6px;
  --r-modal: 6px;

  --chart-1: #877ef2;
  --chart-2: #16a5b8;
  --chart-3: #f59e0b;
  --chart-4: #fb7185;
  --chart-5: #34d399;
  --charts-label-color: var(--text-muted);
  --charts-axis-line-color: var(--border-color);
  --fo-card-grad: var(--card-bg);

  /* core's dark scale is neutral (#383838 / #232323 / #171717) and a dozen
     core rules paint surfaces with it directly: dialog and grid inputs, tag
     pills, kanban, avatars, the editor toolbar. On Vuexy's navy those read as
     black slabs, so the three darkest steps follow the navy ladder. */
  --gray-700: #2f3450;
  --gray-800: #1c2036;
  --gray-900: #14172a;
}
/* core re-points these per scope in dark; Vuexy keeps the card tone with a visible edge */
[data-theme="dark"] .modal, [data-theme="dark"] .form-in-grid { --control-bg: #1c2036; --border-color: #2f3450; }
[data-theme="dark"] .grid-body .editable-row { --control-bg: #1c2036; --input-disabled-bg: #181c30; }

/* motion tokens, both themes */
:root:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out: arrive fast, settle softly */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-state: 180ms;
  --t-layout: 240ms;
  --t-reveal: 480ms;
  --lt-ease: var(--ease-out);
  --lt-step: 40ms;
  --sidebar-width: 256px;
  --font-stack: "Geist", "Inter", "InterVariable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-sans-serif: var(--font-stack);
  --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* avatar tones, cycled by desk.js data-lt-tone: the /analytics series since v90 */
  --vx-t0: #7367f0; --vx-t1: #0a9fb3; --vx-t2: #059669; --vx-t3: #d97706; --vx-t4: #e11d48;
}
/* in the dark they lift as that page lifts its series */
:root[data-theme="dark"] { --vx-t0: #877ef2; --vx-t1: #16a5b8; --vx-t2: #34d399; --vx-t3: #f59e0b; --vx-t4: #fb7185; }

/* ============================================================
   2. TYPE
   ============================================================ */
body, .form-control, .btn, input, select, textarea, .frappe-control {
  font-family: var(--font-stack);
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
/* v90: the Analytics page's brand light behind every desk page (braccount_dash.css
   body::before: the same three blooms), painted as the canvas's own fixed layers
   so no surface can stack under it; desk pages only (data-route) */
body[data-route] {
  background-image:
    radial-gradient(55% 45% at 10% -5%, var(--lt-aurora-1), transparent 70%),
    radial-gradient(45% 40% at 95% 5%, var(--lt-aurora-2), transparent 70%),
    radial-gradient(50% 45% at 55% 105%, var(--lt-aurora-3), transparent 70%);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .title-text, .workspace-title, .page-title .title-text,
.modal-header .modal-title, .page-card h4 {
  font-family: var(--font-stack);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
.codex-editor .ce-header, .workspace .ce-header {
  font-family: var(--font-stack);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
/* every figure the desk shows aligns in columns */
.list-row-col, .list-row-head, .dt-cell__content, .grid-static-col, .datatable,
.number-widget-box, .report-summary, .tree-node .balance-area,
.frappe-control[data-fieldtype="Currency"] input,
.frappe-control[data-fieldtype="Float"] input,
.frappe-control[data-fieldtype="Int"] input,
.frappe-control[data-fieldtype="Percent"] input,
.list-row .list-row-col.text-right {
  font-family: var(--font-stack);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.list-row .list-row-col.text-right, .tree-node .balance-area { font-size: 13px; letter-spacing: -0.01em; }
.tree-node .balance-area { color: var(--heading-color); font-weight: 500; }
.list-subject .level-left a, .list-row-col .ellipsis { text-overflow: ellipsis; }
::selection { background: var(--accent-ring); }
a, .text-primary { color: var(--accent-fg); }
a:not(.btn):hover { color: var(--primary-hover); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ============================================================
   3. CHROME — page head, sidebar, app switcher
   ============================================================ */
/* The page head is Vuexy's floating navbar: a card held 14px off the top
   and the sides. Since v90 it floats frosted, as the Analytics page's top bar
   does (braccount_dash.css .navbar-detached): no canvas fade behind it, the
   card 82% opaque over a blur of whatever scrolls under it. */
.page-head {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  padding: 14px 24px 10px;
  height: auto;
}
.page-head > .container {
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  max-width: none;
  transition: box-shadow var(--t-layout) ease, background-color var(--t-state) ease;
}
.page-head .page-head-content { margin: 0; padding: 10px 14px 10px 18px; min-height: 60px; height: auto; }
.page-head .page-title .title-text { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading-color); }
.page-head .page-actions .btn, .page-head .btn {
  height: 34px; padding: 6px 14px; font-size: 13px;
}
.page-head .page-actions .btn.icon-btn, .page-head .btn.btn-default.icon-btn { width: 34px; padding: 0; }
/* breadcrumbs read like Vuexy's: linked trail in the accent, chevrons, the page in ink */
.navbar-breadcrumbs a, #navbar-breadcrumbs a, .disable-click.breadcrumb-label { color: var(--accent-fg); font-weight: 500; }
.navbar-breadcrumbs a:hover, #navbar-breadcrumbs a:hover { color: var(--primary-hover); text-decoration: none; }
.navbar-breadcrumbs li:first-child a { color: var(--text-muted); }
.navbar-breadcrumbs li:first-child a:hover { color: var(--accent-fg); }
.navbar-breadcrumbs li + li::before { color: var(--text-light); }
.navbar-breadcrumbs .title-text, .navbar-breadcrumbs li:last-child a.title-text {
  color: var(--heading-color); font-weight: 500; font-size: 17px;
}
.page-head .sidebar-toggle-btn { color: var(--text-color); border-radius: var(--r-ctl); }
.page-head .sidebar-toggle-btn:hover { background: var(--accent-soft); color: var(--primary); }
.page-head .page-indicator-pill { margin-left: 10px; }
.navbar {
  background: var(--card-bg) !important;
  border-bottom: 0;
  box-shadow: var(--card-shadow);
}
.navbar .search-bar .awesomplete input, #navbar-search {
  background: var(--control-bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl); box-shadow: none; color: var(--text-color);
  transition: border-color var(--t-state) ease, box-shadow var(--t-state) ease;
}
.navbar .search-bar .awesomplete input:focus, #navbar-search:focus {
  border-color: var(--primary); box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1);
}

/* ---- sidebar: the /analytics rail, quieter (v91, 2026-10-31) ----
   Vuexy's proportions as /analytics draws them: 38px rows on a 12px inset
   with 6px corners, glyphs a step quieter than their labels, and the
   gradient pill the one bright thing on the rail. A group is a row, not a
   block: its chevron says open or shut and its children hang from a 1px
   guide under its glyph. A name keeps to one line (desk.js puts the whole
   name on hover); the scrollbar shows only while the pointer is on the rail,
   and a rail that scrolls fades at the edge it continues past. Until v90
   rows stood 44px, an open group sat on a solid tint and children wore
   thick rings. */
.body-sidebar {
  --lt-rail-wash: color-mix(in srgb, var(--heading-color) 6%, var(--sidebar-bg));
  --lt-rail-guide: color-mix(in srgb, var(--heading-color) 12%, transparent);
  --lt-rail-glyph: var(--text-muted);
  background-color: var(--sidebar-bg) !important;
  border-right: 0;
  box-shadow: var(--menu-shadow);
  padding: 10px 12px 8px;
}
/* v90: in the dark the menu ends in an edge of light, as on /analytics */
[data-theme="dark"] .body-sidebar { box-shadow: 1px 0 0 rgba(255, 255, 255, 0.06); }

/* brand header: the mark, the workspace in ink, the product under it */
.body-sidebar .sidebar-header {
  padding: 4px 6px 12px !important;
  border-radius: var(--r-card);
  transition: background-color var(--t-state) ease;
}
.body-sidebar .sidebar-header:hover { background-color: transparent; }
.body-sidebar .sidebar-header .header-title,
[data-theme="dark"] .body-sidebar .sidebar-header .header-title {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--heading-color);
}
.body-sidebar .sidebar-header .header-subtitle {
  font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
.body-sidebar .sidebar-header .drop-icon { color: var(--text-muted); transition: color var(--t-state) ease; }
.body-sidebar .sidebar-header:hover .drop-icon { color: var(--heading-color); }
.lt-brand {
  width: 34px; height: 34px; flex: 0 0 auto;
  background: #fff; border-radius: 8px; padding: 2px;
  box-shadow: 0 2px 8px 0 rgba(106, 95, 223, 0.28);
  object-fit: contain;
}

/* search and notifications: one quiet block, a hairline under it */
.body-sidebar .standard-items-sections {
  margin: 0 0 6px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}
.body-sidebar #navbar-modal-search .standard-sidebar-item {
  background: var(--lt-rail-wash);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-height: 36px;
  margin: 0 0 2px;
  transition: border-color var(--t-state) ease;
}
.body-sidebar #navbar-modal-search .standard-sidebar-item:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border-color));
  background: var(--lt-rail-wash);
}
.body-sidebar #navbar-modal-search .sidebar-item-label { color: var(--text-light); font-weight: 400; }
.body-sidebar #navbar-modal-search .keyboard-shortcut {
  padding: 1px 6px; border: 1px solid var(--border-color); border-radius: 5px;
  background: var(--sidebar-bg); line-height: 16px;
}
.body-sidebar #navbar-modal-search .sidebar-item-control,
.body-sidebar .standard-sidebar-item .sidebar-item-control kbd,
.body-sidebar .standard-sidebar-item .sidebar-item-control .text-muted,
.body-sidebar #navbar-modal-search .keyboard-shortcut {
  font-size: 10.5px; color: var(--text-muted); font-family: var(--font-stack);
}

/* rows: 38px, the glyph 20px and a step quieter than the label (the bare
   .standard-sidebar-item rules serve sidebars outside the rail too) */
.body-sidebar .standard-sidebar-item,
.standard-sidebar-item {
  min-height: 38px; height: auto; align-items: center;
  padding: 8px 12px; margin: 2px 0;
  border-radius: var(--r-row);
  transition: background var(--t-state) var(--ease-std), color var(--t-state) ease, box-shadow var(--t-state) ease;
}
.body-sidebar .standard-sidebar-item {
  min-height: 38px; padding: 0 12px; margin: 2px 0 0;
  border-radius: 6px;
  transition: background-color var(--t-state) var(--ease-std), box-shadow var(--t-state) ease;
}
.body-sidebar .standard-sidebar-item .item-anchor { gap: 10px; min-height: 38px; min-width: 0; }
.body-sidebar .sidebar-item-icon {
  padding: 0 !important; width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lt-rail-glyph);
  transition: color var(--t-state) ease;
}
.body-sidebar .sidebar-item-icon .icon,
.body-sidebar .sidebar-item-icon > svg { --icon-stroke: currentColor; width: 20px; height: 20px; }
.body-sidebar .standard-sidebar-item .sidebar-item-label,
.body-sidebar .desk-sidebar .sidebar-item-label,
.standard-sidebar-item .sidebar-item-label {
  font-size: 14px; font-weight: 400; letter-spacing: 0; line-height: 1.35;
  color: var(--menu-ink);
  white-space: normal !important; overflow-wrap: anywhere;
  transition: color var(--t-state) ease, transform 0.25s ease;
}
.body-sidebar .standard-sidebar-item .sidebar-item-label {
  flex: 1 1 auto; min-width: 0; line-height: 20px;
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal;
}
.body-sidebar .standard-sidebar-item:hover { background-color: var(--lt-rail-wash); }
.body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
.body-sidebar .standard-sidebar-item:hover .sidebar-item-icon { color: var(--heading-color); }
.body-sidebar .sidebar-item-control .drop-icon {
  color: var(--text-muted); width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.body-sidebar .sidebar-item-control .drop-icon svg {
  width: 16px; height: 16px; stroke: currentColor !important;
  transition: transform var(--t-layout) var(--ease-out);
}
.body-sidebar .sidebar-item-control .drop-icon svg use { stroke: currentColor !important; }

/* active: Vuexy's gradient pill with the primary glow, white ink (restated
   with the exact selectors older passes used, so core's dark block never wins) */
.body-sidebar .standard-sidebar-item.active-sidebar,
.body-sidebar .standard-sidebar-item.selected,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.active-sidebar,
[data-theme="dark"] .body-sidebar .standard-sidebar-item.selected {
  background: var(--vx-grad) !important;
  box-shadow: var(--vx-glow);
  border-radius: 6px;
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
[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 {
  color: #ffffff !important; font-weight: 500;
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon svg,
.body-sidebar .standard-sidebar-item.selected .sidebar-item-icon svg,
[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: #ffffff !important; --icon-stroke: #ffffff;
}
.body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon,
.body-sidebar .standard-sidebar-item.active-sidebar::before { color: #ffffff !important; }

/* section eyebrows: Vuexy's navigation headers */
.body-sidebar .standard-sidebar-label, .standard-sidebar-label {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-light); padding: 16px 12px 6px;
}

/* a group: a row like the others, its label a touch firmer, set a little
   apart; open or shut is the chevron's to say, not a block's */
.body-sidebar .sidebar-items > .section-item { margin-top: 6px; }
.body-sidebar .section-item > .standard-sidebar-item .sidebar-item-label { font-weight: 500; }
.body-sidebar .section-item:has(> .sidebar-child-item:not(.hidden)) > .standard-sidebar-item { background: transparent; }
.body-sidebar .section-item:has(> .sidebar-child-item:not(.hidden)) > .standard-sidebar-item:hover { background: var(--lt-rail-wash); }
.body-sidebar .section-item:has(> .sidebar-child-item:not(.hidden)) > .standard-sidebar-item .sidebar-item-label { color: var(--heading-color); }

/* level 2: the children hang from a 1px guide under the group's glyph (the
   row's 12px inset plus half its 20px glyph); the guide is their mark, so
   a glyphless child wears no bullet */
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item.nested-container {
  margin: 2px 0 4px 21px !important;
  padding-left: 0 !important;
  border-left: 1px solid var(--lt-rail-guide);
}
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item > .sidebar-item-container > .standard-sidebar-item {
  min-height: 34px; margin: 2px 0 0 8px; padding: 0 12px;
}
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item > .sidebar-item-container > .standard-sidebar-item .item-anchor { min-height: 34px; }
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item > .sidebar-item-container:not(.lt-sub) > .standard-sidebar-item .sidebar-item-icon:not(:has(use[href]:not([href="#icon-"]))),
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item > .sidebar-item-container:not(.lt-sub) > .standard-sidebar-item .sidebar-item-icon:empty {
  display: none;
}
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item .sidebar-item-icon { width: 18px; height: 18px; flex-basis: 18px; }
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item .sidebar-item-icon .icon,
.body-sidebar .sidebar-items > .section-item > .sidebar-child-item .sidebar-item-icon > svg { width: 18px; height: 18px; }

/* level 3: a subgroup (desk.js treeNav) is a caret and a firmer label, its
   leaves on a guide of their own */
.body-sidebar .lt-caret {
  width: 16px; height: 16px; flex: 0 0 auto; margin: 0 -2px 0 -4px;
  border-radius: 4px; background: transparent; color: var(--text-muted);
  transition: transform var(--t-layout) var(--ease-out), color var(--t-state) 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 > .standard-sidebar-item .sidebar-item-icon { display: none; }
.body-sidebar .lt-sub > .standard-sidebar-item .sidebar-item-label { font-weight: 500; }
.body-sidebar .lt-sub.lt-open > .standard-sidebar-item .sidebar-item-label { color: var(--heading-color); }
.body-sidebar .lt-sub > .sidebar-child-item.nested-container { margin-left: 0 !important; padding-left: 0 !important; }
.body-sidebar .lt-sub > .sidebar-child-item {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-layout) var(--ease-out);
}
.body-sidebar .lt-sub.lt-open > .sidebar-child-item { grid-template-rows: 1fr; }
.body-sidebar .lt-sub-clip {
  min-height: 0; overflow: hidden;
  margin-left: 22px; padding-left: 0;
  border-left: 1px solid var(--lt-rail-guide);
}
.body-sidebar .lt-sub-clip .sidebar-item-container { position: relative; }
.body-sidebar .lt-leaf > .standard-sidebar-item { min-height: 32px; padding: 0 10px; margin: 2px 0 0 8px; }
.body-sidebar .lt-leaf > .standard-sidebar-item .sidebar-item-icon:not(:has(use[href]:not([href="#icon-"]))),
.body-sidebar .lt-leaf > .standard-sidebar-item .sidebar-item-icon:empty { display: none; }
.body-sidebar .lt-leaf > .standard-sidebar-item .item-anchor { min-height: 32px; }
.body-sidebar .lt-leaf > .standard-sidebar-item .sidebar-item-label { font-size: 13.5px; }
.body-sidebar .lt-sub.lt-open .lt-sub-clip > .sidebar-item-container {
  animation: lt-leaf-in 0.26s var(--ease-out) backwards;
}
@keyframes lt-leaf-in { from { opacity: 0; transform: translateX(-5px); } }

/* the collapsed rail (core's toggle_width keeps the names and lets each row
   clip them): every row a 38px square with its glyph centred, a group's
   children out of sight. Until v91 the row's 12px padding left the clip no
   width at all, and the glyphs vanished with the names. */
.body-sidebar-container:not(.expanded) .body-sidebar { padding-left: 6px; padding-right: 6px; }
.body-sidebar-container:not(.expanded) .body-sidebar .standard-sidebar-item { padding: 0 9px; }
.body-sidebar-container:not(.expanded) .body-sidebar .onboarding-sidebar { padding: 0 9px !important; }
.body-sidebar-container:not(.expanded) .body-sidebar .sidebar-items .sidebar-child-item { display: none !important; }
.body-sidebar-container:not(.expanded) .body-sidebar .sidebar-items > .section-item { margin-top: 2px; }

/* the scrollbar shows only while the pointer is on the rail; a rail that
   scrolls fades at the edge it continues past (desk.js railEdges) */
.body-sidebar .body-sidebar-top { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.body-sidebar:hover .body-sidebar-top { scrollbar-color: var(--border-strong) transparent; }
.body-sidebar .body-sidebar-top.lt-more-below {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
}
.body-sidebar .body-sidebar-top.lt-more-above {
  -webkit-mask-image: linear-gradient(transparent, #000 20px);
  mask-image: linear-gradient(transparent, #000 20px);
}
.body-sidebar .body-sidebar-top.lt-more-above.lt-more-below {
  -webkit-mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(transparent, #000 20px, #000 calc(100% - 28px), transparent);
}

/* rail foot: Getting Started + the user row (Vuexy's navbar user block) */
.body-sidebar .onboarding-sidebar {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; padding: 0 12px !important; margin: 0;
  border-radius: 6px;
  border: 0; background: transparent;
  font-size: 14px; font-weight: 400; color: var(--menu-ink);
  text-decoration: none !important;
  transition: background-color var(--t-state) ease, color var(--t-state) ease;
}
.body-sidebar .onboarding-sidebar:hover { background: var(--lt-rail-wash); color: var(--heading-color); }
.body-sidebar .onboarding-sidebar .icon { color: var(--lt-rail-glyph); }
.body-sidebar .body-sidebar-bottom { border-top: 1px solid var(--border-color); padding-top: 8px; }
.body-sidebar .sidebar-user-button {
  border-radius: var(--r-card); padding: 6px 8px !important;
  transition: background-color var(--t-state) ease;
}
.body-sidebar .sidebar-user-button:hover { background: var(--lt-rail-wash); }
.body-sidebar .sidebar-user-button .avatar { position: relative; }
.body-sidebar .sidebar-user-button .avatar::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.body-sidebar .sidebar-user-button .avatar-frame { box-shadow: 0 2px 8px 0 rgba(34, 41, 47, 0.14); }
.body-sidebar .sidebar-user-button .user-name, .body-sidebar .sidebar-user-button .sidebar-item-label,
.body-sidebar .sidebar-user-button .avatar-name-email > span:first-child {
  font-size: 13.5px; font-weight: 600; color: var(--heading-color);
}
.body-sidebar .sidebar-user-button .text-muted, .body-sidebar .sidebar-user-button small,
.body-sidebar .sidebar-user-button .text-secondary {
  font-size: 11.5px; color: var(--text-muted) !important;
}
.body-sidebar .collapse-sidebar-link { color: var(--text-muted); }
.body-sidebar .sidebar-resize-handle:hover { background: var(--accent-soft); }

/* onboarding panel: a card, not a slab */
.user-onboarding .onb-panel, .onboarding-sidebar-panel {
  background: var(--raised-bg); border: 0;
  border-radius: var(--r-card); box-shadow: var(--shadow-lg);
}

/* ---- app switcher (desk.js appMenu): a command-menu style directory ----
   v68: brand row with the company and a shortcut hint, a search field with
   its glyph, group headers with counts, a clear active tile, arrow-key
   focus, and a staggered entrance. v87: each workspace's icon on a glowing
   jewel tile instead of a pastel letter chip (below). */
.frappe-menu.lt-menu {
  width: min(440px, calc(100vw - 12px)) !important;
  max-width: min(440px, calc(100vw - 12px)) !important;
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--heading-color) 6%, transparent);
  background: var(--raised-bg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
  animation: lt-menu-in 0.22s var(--ease-out);
}
@keyframes lt-menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.frappe-menu.lt-menu .dropdown-menu-item {
  border-radius: 8px; min-height: 30px; font-size: 12.5px; padding: 5px 10px;
  color: var(--text-color);
}
.frappe-menu.lt-menu .dropdown-menu-item svg { width: 15px; height: 15px; opacity: 0.75; }
.frappe-menu.lt-menu .dropdown-menu-item:hover { background: var(--sidebar-hover-color); }
.frappe-menu.lt-menu .dropdown-divider { margin: 6px 4px; border-color: var(--border-color); opacity: 1; }
.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-kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  font: 500 10.5px/1 var(--font-stack); letter-spacing: 0.02em;
  color: var(--text-light); background: var(--control-bg);
  border: 1px solid var(--border-color); border-bottom-width: 2px; border-radius: 6px;
}

.lt-brandrow {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 8px 11px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.lt-brandrow .lt-brand {
  width: 36px; height: 36px; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border-color), 0 6px 14px -8px rgba(106, 95, 223, 0.55);
}
.lt-brandrow-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.lt-brandrow-t strong { font-size: 13.5px; font-weight: 600; color: var(--heading-color); letter-spacing: -0.01em; }
.lt-brandrow-t span {
  font-size: 11px; color: var(--text-light); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lt-apps-qw { position: relative; margin: 2px 2px 8px; }
.lt-apps-qi {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none;
}
.lt-apps-qk { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.lt-apps-q {
  display: block; width: 100%; height: 36px;
  padding: 0 44px 0 32px; font: 500 13px/1 var(--font-stack);
  color: var(--text-color); background: var(--control-bg);
  border: 1px solid var(--border-strong); border-radius: var(--r-ctl);
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-state) ease, box-shadow var(--t-state) ease, background var(--t-state) ease;
}
.lt-apps-q::-webkit-search-cancel-button { display: none; }
.lt-apps-q::placeholder { color: var(--text-light); }
.lt-apps-q:focus { border-color: var(--primary); background: var(--card-bg); box-shadow: 0 0 0 3px var(--accent-ring); }

.lt-apps {
  padding: 0 2px 6px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  max-height: calc(100vh - 380px); min-height: 160px;
  scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
}
.lt-apps-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-light); margin: 12px 8px 5px;
}
.lt-apps-h:first-of-type { margin-top: 4px; }
.lt-apps-h .lt-apps-n {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0;
  min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center;
  color: var(--text-light); background: var(--control-bg); border: 1px solid var(--border-color);
}
.lt-apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 4px; }
.lt-app-tile {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; min-height: 36px;
  border-radius: 9px; border: 1px solid transparent;
  text-decoration: none !important; cursor: pointer; min-width: 0; position: relative;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
  animation: lt-tile-in 0.3s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 14ms);
}
@keyframes lt-tile-in { from { opacity: 0; transform: translateY(4px); } }
/* hover tints the row in the tile's own tone (the tone vars are below) */
.lt-app-tile:hover, .lt-app-tile:focus-visible { background: rgba(var(--jw-gl), 0.1); outline: none; }
.lt-app-tile:hover { border-color: rgba(var(--jw-gl), 0.22); }
.lt-app-tile:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-ring); }
.lt-app-tile:active { transform: scale(0.985); }
.lt-app-tile.on { background: var(--vx-grad); box-shadow: var(--vx-glow); border-color: rgba(106, 95, 223, 0.32); }
.lt-app-tile.on::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft);
}
.lt-app-tile.lt-q-hide { display: none; }
.lt-apps-h.lt-q-hide, .lt-apps-grid.lt-q-hide { display: none; }
/* v87 (2026-10-28): the owner found the letter chips plain and asked for an
   elegant icon per workspace on tiles that glow and shine. Each tile is a
   jewel in the dashboard cards' tones (section 14: sapphire, violet, ruby,
   emerald, amethyst) plus aqua and topaz, picked per workspace in desk.js
   APP_ICONS: the deep gradient, a bloom of the tone's light hue from the
   lower right, the cards' corner orb, a gloss along the top, and a halo in
   the tone, softer on the light canvas than on navy. A light sweep crosses
   the grid once as the switcher opens and crosses a tile again on hover.
   Every gradient keeps white above 4.5:1; the icon is solid white with a 1px
   drop for depth and no halo, so it stays crisp. The tones and the jewel
   are shared with the desktop launcher (section 10), at its own sizes. */
:is(.lt-app-tile, .desktop-icon) { --jw: linear-gradient(160deg, #1e40af 0%, #0369a1 100%); --jw-gl: 59, 130, 246; --jw-bl: 56, 189, 248; }
:is(.lt-app-tile, .desktop-icon)[data-tone="violet"] { --jw: linear-gradient(160deg, #4338ca 0%, #6d28d9 100%); --jw-gl: 124, 92, 246; --jw-bl: 167, 139, 250; }
:is(.lt-app-tile, .desktop-icon)[data-tone="ruby"] { --jw: linear-gradient(160deg, #9f1239 0%, #be185d 100%); --jw-gl: 244, 63, 94; --jw-bl: 251, 113, 133; }
:is(.lt-app-tile, .desktop-icon)[data-tone="emerald"] { --jw: linear-gradient(160deg, #065f46 0%, #047857 100%); --jw-gl: 16, 185, 129; --jw-bl: 52, 211, 153; }
:is(.lt-app-tile, .desktop-icon)[data-tone="amethyst"] { --jw: linear-gradient(160deg, #581c87 0%, #7e22ce 100%); --jw-gl: 168, 85, 247; --jw-bl: 216, 180, 254; }
:is(.lt-app-tile, .desktop-icon)[data-tone="aqua"] { --jw: linear-gradient(160deg, #155e75 0%, #0e7490 100%); --jw-gl: 6, 182, 212; --jw-bl: 103, 232, 249; }
:is(.lt-app-tile, .desktop-icon)[data-tone="topaz"] { --jw: linear-gradient(160deg, #92400e 0%, #b45309 100%); --jw-gl: 245, 158, 11; --jw-bl: 252, 211, 77; }
:is(.lt-app-chip, .lt-desk-chip) {
  --orb: 9px; --orb-a: 0.16;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; color: #ffffff;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, var(--orb-a)) 0 var(--orb), transparent calc(var(--orb) + 1px)),
    radial-gradient(90% 80% at 100% 100%, rgba(var(--jw-bl), 0.5) 0%, rgba(var(--jw-bl), 0) 62%), var(--jw);
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.lt-app-chip {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 4px 10px -4px rgba(var(--jw-gl), 0.85), 0 0 10px -3px rgba(var(--jw-gl), 0.45);
}
[data-theme="dark"] .lt-app-chip {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 12px -4px rgba(var(--jw-gl), 0.9), 0 0 16px -2px rgba(var(--jw-gl), 0.6);
}
/* the gloss, and under it the hover glint parked off the left edge (an
   image twice the jewel's width: 200% puts it a jewel out on the left,
   -100% a jewel out on the right): a transition only on hover, so leaving
   a tile never plays it backwards */
:is(.lt-app-chip, .lt-desk-chip)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 60%) 200% 0 / 200% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0) 60%);
}
.lt-app-tile:hover .lt-app-chip::after, .desktop-icon[data-lt-icon]:hover .lt-desk-chip::after {
  background-position: -100% 0, 0 0; transition: background-position 0.7s cubic-bezier(.4, 0, .2, 1); }
/* the opening sweep, tile after tile down the grid */
:is(.lt-app-chip, .lt-desk-chip)::before {
  content: ""; position: absolute; z-index: 2; top: -30%; bottom: -30%; left: 0; width: 60%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 70%, transparent 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: lt-chip-sheen 0.9s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(0.2s + var(--i, 0) * 30ms);
}
@keyframes lt-chip-sheen { to { transform: translateX(260%) skewX(-18deg); } }
.lt-app-ic, .lt-desk-ic {
  position: relative; z-index: 3; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.lt-app-tile:hover .lt-app-chip, .lt-app-tile:focus-visible .lt-app-chip {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 6px 14px -4px rgba(var(--jw-gl), 0.95), 0 0 20px -2px rgba(var(--jw-gl), 0.7);
}
.lt-app-t {
  font-size: 12.5px; font-weight: 500; color: var(--text-color); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
/* the active tile's dot sits in this room, so only that tile gives it up */
.lt-app-tile.on .lt-app-t { color: #ffffff; font-weight: 600; padding-right: 14px; }
/* on the violet pill the jewel keeps its tone inside a white ring */
.lt-app-tile.on .lt-app-chip { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 4px 10px -3px rgba(0, 0, 0, 0.35); }
.lt-app-tile.on::after { background: #ffffff !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) {
  .frappe-menu.lt-menu, .lt-app-tile { animation: none; }
  .lt-app-tile, .lt-app-chip, .lt-app-tile:hover .lt-app-chip::after,
  .lt-desk-chip, .desktop-icon[data-lt-icon]:hover .lt-desk-chip::after { transition: none; }
  .lt-app-chip::before, .lt-desk-chip::before { display: none; }
}
/* the stock Workspaces flyout row never renders */
.frappe-menu.context-menu .dropdown-menu-item:has(use[href="#icon-wallpaper"]) { display: none !important; }

/* ============================================================
   4. BUTTONS & CONTROLS — Vuexy's buttons, inputs and checks
   ============================================================ */
.btn {
  border-radius: var(--r-ctl);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  transition: background-color var(--t-state) ease, border-color var(--t-state) ease,
    box-shadow 0.2s ease, color var(--t-state) ease, transform var(--t-fast) ease;
}
.btn:active { transform: translateY(0.5px); }
/* primary: solid Vuexy violet; the hover is the coloured drop shadow */
.btn-primary, .btn.btn-primary, .btn-primary:focus {
  background-color: var(--primary);
  background-image: none;
  border: 1px solid var(--primary);
  color: var(--on-primary) !important;
  box-shadow: none;
  font-weight: 500;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background-color: var(--primary) !important;
  background-image: none;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: var(--vx-btn-glow);
}
.btn-primary:active, .btn.btn-primary:active { background-color: var(--primary-hover) !important; box-shadow: none; }
[data-theme="dark"] .btn.btn-primary, [data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary svg { color: var(--on-primary) !important; --icon-stroke: var(--on-primary); }
.btn-primary svg, .btn-primary .icon { --icon-stroke: var(--on-primary); color: var(--on-primary); }
/* default / secondary: Vuexy's outline-secondary */
.btn-default, .btn-secondary, .btn-light {
  background-color: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-color);
  box-shadow: none;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
  background-color: rgba(130, 134, 139, 0.06); border-color: var(--secondary); color: var(--heading-color);
}
.btn-default:active, .btn-secondary:active, .btn-light:active { background-color: rgba(130, 134, 139, 0.14); }
[data-theme="dark"] .btn-default, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-light {
  background-color: transparent; border-color: var(--border-strong); box-shadow: none; color: var(--text-color);
}
[data-theme="dark"] .btn-default:hover, [data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-light:hover { background-color: rgba(180, 183, 189, 0.08); border-color: #6e7385; color: var(--heading-color); }
.btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { box-shadow: 0 8px 25px -8px var(--danger); color: #fff; }
.btn-success { background-color: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { box-shadow: 0 8px 25px -8px var(--success); color: #fff; }
.btn-primary-light, .no-result .btn-primary-light, .msg-box .btn-primary-light {
  background: var(--primary); color: var(--on-primary) !important; border-radius: var(--r-ctl);
  border: 1px solid var(--primary); font-weight: 500; padding: 8px 18px;
}
.btn-primary-light:hover, .no-result .btn-primary-light:hover, .msg-box .btn-primary-light:hover {
  background: var(--primary); box-shadow: var(--vx-btn-glow);
}
.btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-ring) !important; outline: none; }
.btn.icon-btn, .btn-xs { border-radius: var(--r-ctl); }
.btn-link { color: var(--accent-fg); }

/* inputs: Vuexy's 38px field, the strong line (#d0ced4 / #3f4566), violet edge + soft lift on focus */
.form-control,
.frappe-control input.form-control,
.frappe-control select.form-control,
.frappe-control textarea.form-control {
  background-color: var(--control-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  box-shadow: none;
  color: var(--text-color);
  font-size: 13.5px;
  transition: border-color var(--t-state) ease, box-shadow var(--t-state) ease, background-color var(--t-state) ease;
}
.frappe-control input.form-control, .frappe-control select.form-control { min-height: 36px; height: 36px; padding: 6px 12px; }
.frappe-control textarea.form-control { min-height: 72px; padding: 8px 12px; }
.form-control::placeholder { color: var(--text-light); }
.form-control:hover:not(:focus):not([disabled]):not([readonly]) { border-color: color-mix(in srgb, var(--border-strong) 55%, var(--secondary)); }
.form-control:focus, .awesomplete input:focus {
  background-color: var(--control-bg);
  border-color: var(--primary) !important;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important;
  outline: none;
}
[data-theme="dark"] .form-control:focus, [data-theme="dark"] .awesomplete input:focus {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3) !important;
}
.form-control[disabled], .form-control[readonly], .control-value.like-disabled-input {
  background-color: var(--disabled-control-bg);
  border-color: var(--border-strong);
  color: var(--text-muted);
}
.control-value.like-disabled-input { border-radius: var(--r-ctl); min-height: 36px; font-size: 13.5px; padding: 7px 12px; }
.frappe-control .control-label, .control-label, .form-layout .control-label {
  font-size: 12.5px; font-weight: 500; color: var(--heading-color); margin-bottom: 5px;
}
.frappe-control .help-box, .frappe-control .help { color: var(--text-muted); font-size: 12px; }
.reqd-asterisk, .form-layout .reqd::after { color: var(--danger); }
.checkbox .label-area { font-size: 13.5px; color: var(--text-color); }
/* Vuexy's checks: Frappe's own appearance-none box, 17px, the strong-line edge, the
   violet fill with its small coloured shadow; the tick stays white in both
   themes (core's dark tick is drawn for a light fill) */
:root:root { --checkbox-size: 17px; }
input[type="checkbox"] { border: 1px solid var(--border-strong); border-radius: 3px; background-color: var(--control-bg); }
input[type="checkbox"]:checked, [data-theme="dark"] input[type="checkbox"]:checked {
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 58%;
  box-shadow: 0 2px 4px 0 rgba(106, 95, 223, 0.4);
}
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }
.awesomplete > ul {
  background: var(--raised-bg); border: 1px solid var(--border-color);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 6px;
}
.awesomplete > ul > li { border-radius: var(--r-ctl); }
.awesomplete > ul > li[aria-selected="true"], .awesomplete > ul > li:hover { background: var(--accent-soft); color: var(--primary); }
.awesomplete > ul > li[aria-selected="true"] *, .awesomplete > ul > li:hover * { color: inherit; }

/* ============================================================
   5. CARDS, WIDGETS, WORKSPACE — Vuexy cards
   (number cards, shortcuts, link cards and chart panels in the
   Vuexy statistics language are in section 14 at the end)
   ============================================================ */
.widget, .frappe-card {
  background: var(--card-bg);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--t-layout) ease, transform var(--t-layout) var(--ease-out);
}
.widget .widget-head .widget-title, .widget .widget-title { color: var(--heading-color); }
.widget .widget-control .btn, .widget .widget-control .dropdown-toggle {
  border: 0; background: transparent; box-shadow: none; color: var(--text-muted);
}
.widget .widget-control .btn:hover { background: var(--accent-soft); color: var(--primary); }
.onboarding-sidebar { background: transparent; }
/* workspace pages may use the whole monitor (core pins --page-max-width: 900px) */
.layout-main:has(.editor-js-container) { --page-max-width: 2200px; }
/* core lays every workspace on a card-coloured sheet (--fg-color), so cards
   melted into it; Vuexy sets them on the canvas. Edit mode keeps core's tint. */
[data-page-route="Workspaces"] .layout-main-section:not(.edit-mode) { background-color: transparent; }
.workspace-skeleton .widget, .skeleton-card { box-shadow: var(--card-shadow); border: 0; }

/* ============================================================
   6. LISTS — Vuexy's datatable card
   The filter strip and the table share ONE card (.layout-main-list holds
   both), as Vuexy's user and invoice lists do: filters on top, an
   uppercase header band, 48px rows, light status badges, pill paging.
   ============================================================ */
/* (a query report reuses .layout-main-list for its own page; it gets the
   filter card + table card of section 8 instead) */
body:not([data-route^="query-report"]) .layout-main-section.layout-main-list {
  background: var(--card-bg);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  margin: 6px 24px 24px;
}
body:not([data-route^="query-report"]) .layout-main-list > .page-form {
  background: transparent;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 18px;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.layout-main-list > .frappe-list { margin: 0; }
.frappe-list .result, .frappe-list .list-paging-area { background: transparent; }
.frappe-list .result {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.list-row-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--heading-color); background: var(--thead-bg); min-height: 42px;
  border-bottom: 0;
}
.list-row-head .list-row-col, .list-row-head .list-subject { color: var(--heading-color); }
.list-row-head .list-row-col.text-right span { font-family: inherit; }
.list-row { font-size: 13.5px; min-height: 50px; }
.frappe-list .list-row-container { border-bottom: 1px solid var(--table-border-color); transition: background-color var(--t-fast) ease; }
.frappe-list .list-row-container:last-child { border-bottom: 0; }
.frappe-list .list-row:hover, .frappe-list .list-row-container:hover { background: var(--row-hover); }
/* the sticky activity column (time, comments, likes) sits on the card, not the canvas */
.frappe-list .list-row .level-right { background: var(--card-bg); }
.frappe-list .list-row-container:hover .list-row .level-right { background: var(--row-hover); }
.list-subject a { color: var(--heading-color); font-weight: 600; }
.list-subject a:hover { color: var(--primary); text-decoration: none; }
.list-row .level-right .text-muted, .list-row-col .text-muted { color: var(--text-muted); }
.list-row .list-row-activity { color: var(--text-muted); }
.list-row .list-row-activity .comment-count, .list-row .list-row-activity .modified { font-size: 12.5px; }
.list-row .liked-by-filter, .list-row .list-like svg { color: var(--text-light); }
.list-paging-area { border: 0; border-top: 1px solid var(--border-color); padding: 12px 18px; border-radius: 0 0 var(--r-card) var(--r-card); background: transparent !important; }
/* paging: Vuexy's pill pagination — one grey track, the current size a violet disc */
.list-paging-area .btn-group {
  background: var(--thead-bg); border-radius: 999px; padding: 2px; gap: 2px; box-shadow: none;
}
.list-paging-area .btn-group .btn {
  border: 0 !important; background: transparent; border-radius: 999px !important;
  font-size: 12.5px; height: 30px; min-width: 38px; padding: 0 11px; color: var(--text-color); box-shadow: none;
}
.list-paging-area .btn-group .btn:hover { color: var(--primary); background: transparent; }
.list-paging-area .btn-group .btn.btn-info, .list-paging-area .btn-group .btn.active,
.list-paging-area .btn-group .btn[data-value].btn-info {
  background: var(--primary) !important; color: #fff !important; font-weight: 600;
  box-shadow: 0 2px 8px 0 rgba(106, 95, 223, 0.45);
}
.list-paging-area .btn-more, .list-paging-area .btn-load-more {
  border: 1px solid var(--primary); color: var(--accent-fg); background: transparent; border-radius: var(--r-ctl);
}
.list-paging-area .btn-more:hover, .list-paging-area .btn-load-more:hover { background: var(--accent-soft); box-shadow: none; }
.frappe-list .no-result .msg-box, .msg-box { color: var(--text-muted); }
.frappe-list .no-result { min-height: 320px; }
/* the empty state's call to action is Vuexy's primary button, not a ghost */
.frappe-list .no-result .btn-new-doc, .frappe-list .no-result .btn-primary-light {
  background: var(--primary); border: 1px solid var(--primary); color: var(--on-primary) !important;
  height: 36px; padding: 0 18px; font-weight: 500; border-radius: var(--r-ctl);
}
.frappe-list .no-result .btn-new-doc:hover { background: var(--primary); box-shadow: var(--vx-btn-glow); }
.frappe-list .no-result .msg-box svg, .frappe-list .no-result .no-result-icon { color: var(--primary); opacity: 0.85; }
.frappe-list .no-result .no-result-icon svg, .frappe-list .no-result img { opacity: 0.8; }
.standard-filter-section .form-control, .list-row-head .filterable { border-radius: var(--r-ctl); }
.standard-filter-section .form-control { height: 36px; min-height: 36px; font-size: 13px; }
.list-count, .list-sidebar .list-count { font-size: 12.5px; color: var(--text-muted); }
.list-row-checkbox, .list-header-checkbox { accent-color: var(--primary); }
.layout-main-list .filter-section .filter-button, .layout-main-list .sort-selector .btn { height: 36px; }
.filter-x-button { border-radius: var(--r-ctl); }

/* list avatars (desk.js listAvatars): Vuexy's initials disc beside a party's name */
.lt-av {
  --c: var(--vx-t0);
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: 10px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; line-height: 1;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.lt-av[data-t="1"] { --c: var(--vx-t1); } .lt-av[data-t="2"] { --c: var(--vx-t2); }
.lt-av[data-t="3"] { --c: var(--vx-t3); } .lt-av[data-t="4"] { --c: var(--vx-t4); }
.list-subject:has(.lt-av) { align-items: center; }

/* status badges: Vuexy's light pills — tinted ground, the hue as ink, no dot */
.indicator-pill, .indicator-pill-right, .indicator-pill-round {
  height: 22px; padding: 0 10px; font-size: 12px; font-weight: 600; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1; letter-spacing: 0.01em;
}
.indicator-pill::before, .indicator-pill-right::after { display: none; }
.indicator-pill.blue, .indicator-pill.purple, .indicator-pill.darkgrey.lt-primary { background: var(--bg-purple); color: var(--text-on-purple); }
.indicator-pill.green { background: var(--bg-green); color: var(--text-on-green); }
.indicator-pill.red { background: var(--bg-red); color: var(--text-on-red); }
.indicator-pill.orange, .indicator-pill.yellow { background: var(--bg-orange); color: var(--text-on-orange); }
.indicator-pill.cyan { background: var(--bg-cyan); color: var(--text-on-cyan); }
.indicator-pill.pink { background: var(--bg-pink); color: var(--text-on-pink); }
.indicator-pill.gray, .indicator-pill.grey, .indicator-pill.darkgrey, .indicator-pill.light-gray { background: var(--bg-gray); color: var(--text-on-gray); }
.indicator-pill .icon, .indicator-pill svg { --icon-stroke: currentColor; }

/* ============================================================
   7. FORMS — Vuexy form layouts: every section a card
   ============================================================ */
.form-tabs-list {
  background: var(--vx-fade);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  padding: 2px 0 10px;
}
/* tabs: Vuexy's nav-pills — the current tab a violet pill with its glow
   (core's own tab rules run four and five classes deep; these match them) */
.form-tabs-list .form-tabs .nav-item .nav-link, .nav-tabs .nav-link {
  color: var(--text-color); font-weight: 500; font-size: 13.5px;
  border: 0; border-radius: var(--r-ctl); padding: 8px 16px; margin: 0 6px 0 0;
  background-color: transparent;
  transition: color var(--t-state) ease, background-color var(--t-state) ease, box-shadow var(--t-state) ease;
}
.form-tabs-list .form-tabs .nav-item .nav-link.active, .nav-tabs .nav-link.active {
  color: #fff; background-color: var(--primary); border: 0; padding-bottom: 8px; font-weight: 500;
  box-shadow: 0 4px 18px -4px rgba(106, 95, 223, 0.65);
}
.form-tabs-list .form-tabs .nav-item .nav-link:hover:not(.active), .nav-tabs .nav-link:hover:not(.active) { color: var(--primary); background-color: transparent; }
.form-tabs-list .form-tabs { border-bottom: 0; gap: 2px; }

/* the sheet: core paints the whole form one card-coloured slab and centres a
   900px column inside full-width section strips; Vuexy sets section cards on
   the canvas across its content column instead */
.std-form-layout > .form-layout > .form-page { background-color: transparent; box-shadow: none; border: 0; }
.std-form-layout > .form-layout { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
body:not(.full-width) .std-form-layout .section-head,
body:not(.full-width) .std-form-layout .section-body { max-width: none; }
body.full-width .std-form-layout > .form-layout { max-width: none; }

.form-page .form-section, .form-page .form-dashboard-section {
  background: var(--card-bg);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  margin: 0 0 22px;
  padding: 0;
}
.form-page .form-section .section-head, .form-page .form-dashboard-section .section-head {
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading-color);
  padding: 18px 22px 0;
}
.form-page .form-section .section-body, .form-page .form-dashboard-section .section-body { padding: 12px 22px 18px; }
.form-page .form-section.empty-section, .form-page .form-dashboard-section.empty-section { display: none; }
.form-page .form-section.hide-control, .form-page .form-dashboard-section.hide-control,
.form-page .form-section.hide, .form-page .form-dashboard-section.hide { display: none !important; }
.form-page .form-section.card-section { background: var(--card-bg); }
.form-section .section-head .collapse-indicator { color: var(--text-muted); }
.form-dashboard { margin-top: 0; }
.form-section .form-column, .form-dashboard-section .form-column { padding: 0 10px; }
.frappe-control { margin-bottom: 14px; }
/* child tables: the Vuexy table — uppercase header band, hairline rows */
.form-grid, .form-grid-container .form-grid {
  border: 1px solid var(--border-color); border-radius: var(--r-card); overflow: hidden;
}
.form-grid .grid-heading-row {
  background: var(--thead-bg); font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--heading-color); border-bottom: 0;
}
.form-grid .grid-row { border-bottom: 1px solid var(--table-border-color); }
.form-grid .grid-row:hover { background: var(--row-hover); }
.form-grid .grid-row .row-index { color: var(--text-muted); }
.grid-footer .grid-add-row { border-radius: var(--r-ctl); }
.grid-footer .btn.grid-add-row { border: 1px solid var(--primary); color: var(--accent-fg); background: transparent; }
.grid-footer .btn.grid-add-row:hover { background: var(--accent-soft); }

/* connections tab: Vuexy list-group rows */
.form-links .document-link, .form-dashboard-section .document-link {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 6px 4px 12px;
  margin: 0 0 8px;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--r-ctl);
  transition: border-color var(--t-state) ease, box-shadow var(--t-state) ease, transform var(--t-state) var(--ease-out);
}
.form-links .document-link:hover, .form-dashboard-section .document-link:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1);
  transform: translateY(-1px);
}
.form-links .document-link .badge-link, .form-dashboard-section .document-link .badge-link {
  font-size: 13.5px; font-weight: 500; color: var(--heading-color); text-decoration: none;
}
.form-links .document-link .badge-link:hover { color: var(--accent-fg); }
.form-links .document-link .count, .form-dashboard-section .document-link .count {
  height: 20px; min-width: 20px; padding: 0 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 20px;
  background: var(--bg-purple); color: var(--text-on-purple);
}
.form-links .document-link .btn-new, .form-dashboard-section .document-link .btn-new {
  background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important;
  color: var(--text-muted); width: 26px; height: 26px; padding: 0; border-radius: var(--r-ctl); margin-left: auto;
}
.form-links .document-link .btn-new:hover { background: var(--accent-soft) !important; color: var(--primary); }
.form-links .document-link .open-notification {
  background: var(--primary) !important; color: #fff !important; border-radius: 999px; font-size: 10.5px;
}
.form-documents .row + .row { margin-top: 4px; }
.form-links .section-body .transactions .form-documents .col-md-4 > .document-link-badge-wrap,
.form-links .section-body .transactions .form-documents h6 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 10px;
}

/* the form's side column: Vuexy's user-view panel — one card for the image,
   assignments, attachments, tags and history */
.layout-side-section .sidebar-menu, .layout-side-section .form-sidebar { font-size: 13px; }
.layout-side-section .form-sidebar {
  background: var(--card-bg); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 18px 18px 10px; margin: 0 24px 24px 0;
}
/* comments and activity line up with the section cards above them */
.form-footer { max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 24px; }
.form-sidebar .sidebar-menu > li { border-bottom: 1px solid var(--table-border-color); }
.form-sidebar .sidebar-menu .sidebar-label { color: var(--text-muted); font-weight: 500; }
.form-sidebar .pageview-count, .form-sidebar .modified-by, .form-sidebar .created-by { color: var(--text-muted); }
.form-sidebar .form-sidebar-stats, .form-sidebar .sidebar-image-section .sidebar-image-wrapper { border-radius: var(--r-card); }
.form-sidebar .sidebar-image-section .sidebar-image { border-radius: var(--r-card); }
.form-sidebar .sidebar-image-section .standard-image {
  border-radius: var(--r-card); background: var(--accent-soft); color: var(--primary); font-weight: 600;
}

/* comments + timeline: Vuexy's timeline — haloed points on a hairline */
.form-footer { margin-top: 14px; }
.comment-box {
  background: var(--card-bg); border: 0; border-radius: var(--r-card); box-shadow: var(--card-shadow);
}
.comment-box .comment-input-wrapper .ql-editor { font-size: 13.5px; }
.form-footer .timeline-item .timeline-content { font-size: 13.5px; color: var(--text-color); }
.form-footer .timeline-item .timeline-content.frappe-card {
  background: var(--card-bg); border: 0; border-radius: var(--r-card); box-shadow: var(--card-shadow);
}
.form-footer .timeline-item .timeline-dot {
  background: var(--primary); border: 0; box-shadow: 0 0 0 4px var(--accent-soft);
}
.form-footer .timeline-item .timeline-dot .icon { color: #fff; --icon-stroke: #fff; }
.new-timeline .timeline-items .timeline-item .timeline-content a { color: var(--accent-fg); }
.form-footer .timeline-item::before, .new-timeline::before { border-color: var(--border-color); }
.new-timeline .timeline-items::before { background: var(--border-color); }
.form-footer .timeline-item .timeline-content .text-muted { color: var(--text-muted); }
.timeline-badge {
  background: var(--accent-soft); border: 0; color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}
.timeline-badge .icon { --icon-stroke: var(--primary); }
.activity-title, .form-footer .form-comments > .new-timeline > .timeline-item h4,
.form-footer h4 { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--heading-color); }
.form-footer .btn.btn-default.btn-sm, .form-footer .btn.btn-sm { font-size: 12.5px; height: 30px; }

/* ============================================================
   8. REPORTS — Vuexy's "Search & Filter" card over a table card
   ============================================================ */
body[data-route^="query-report"] .page-form, body[data-route^="List/"][data-route$="/Report"] .page-form,
.page-form {
  background: var(--bg-color);
  border-bottom: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 16px 12px;
}
body[data-route^="query-report"] .layout-main-section > .page-form {
  background: var(--card-bg);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  margin: 6px 24px 0;
  padding: 16px 18px;
}
.page-form .form-group.frappe-control {
  width: auto;
  /* Frappe leaves .col-md-2 on every filter (max-width 16.6667%); chips must be
     allowed to grow or long labels paint over the next chip */
  max-width: 100%; min-width: 0; flex: 0 0 auto; margin: 0; padding: 0;
}
.page-form .form-control {
  width: 168px; height: 36px; min-height: 36px; font-size: 13px; font-weight: 500; padding: 5px 12px;
  background: var(--control-bg); border: 1px solid var(--border-strong); border-radius: var(--r-ctl);
}
.page-form select.form-control { width: auto; min-width: 124px; max-width: 200px; padding-right: 26px; }
.page-form .form-control::placeholder { color: var(--text-light); font-weight: 400; }
.page-form .form-control:focus { border-color: var(--primary); }
.page-form input.form-control:not(:placeholder-shown) { color: var(--heading-color); }
.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: 34px; padding: 0 12px; margin: 0;
  background: var(--control-bg); border: 1px solid var(--border-strong); border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-state) ease, border-color var(--t-state) ease;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:hover { border-color: var(--primary); }
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label .input-area input { width: 14px; height: 14px; }
.page-form .frappe-control[data-fieldtype="Check"] .checkbox .label-area {
  font-size: 12.5px; font-weight: 500; color: var(--text-color); margin: 0; white-space: nowrap;
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:has(input:checked) {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.page-form .frappe-control[data-fieldtype="Check"] .checkbox label:has(input:checked) .label-area { color: var(--accent-fg); }
.page-form input[type="checkbox"] { accent-color: var(--primary); }
.page-form .frappe-control.lt-more-hidden { display: none !important; }
.page-form.lt-more-open .frappe-control.lt-more-hidden { display: block !important; }
.page-form > .frappe-control.lt-dup { display: none !important; }
.lt-morebar {
  order: 999; display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px dashed var(--border-strong); border-radius: 999px; background: transparent;
  color: var(--text-color); font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: color var(--t-state) ease, border-color var(--t-state) ease, background-color var(--t-state) ease;
}
.lt-morebar:hover { color: var(--accent-fg); border-color: var(--primary); background: var(--accent-soft); }

.report-wrapper {
  background: var(--card-bg);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  margin: 18px 24px 8px;
  overflow: hidden;
  width: fit-content;
  min-width: min(480px, 100%);
  max-width: calc(100% - 48px);
}
.report-wrapper .chart-wrapper { padding: 8px 12px 0; }
.datatable { --dt-border-color: var(--table-border-color); font-size: 13.5px; }
.datatable .dt-header .dt-cell__content {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--heading-color);
}
.datatable .dt-header, .datatable .dt-cell--header { background: var(--thead-bg); }
.datatable .dt-row:not(.dt-row--header):hover .dt-cell { background: var(--row-hover); }
.dt-row.dt-row-totalRow .dt-cell__content, .datatable .dt-cell--highlight .dt-cell__content { font-weight: 600; color: var(--heading-color); }
.dt-row.dt-row-totalRow .dt-cell { background: var(--thead-bg); }
.datatable .dt-cell__content { color: var(--text-color); }
.datatable .dt-cell--col-0 .dt-cell__content { color: var(--text-muted); }
.datatable .dt-scrollable .dt-cell a { color: var(--accent-fg); font-weight: 500; }
.datatable .dt-cell--focus .dt-cell__content { box-shadow: inset 0 0 0 1px var(--primary); }
.report-footer { padding: 12px 24px 18px; font-size: 12.5px; color: var(--text-muted); }
.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; }
.tree-link { border-radius: var(--r-ctl); padding: 3px 8px; }
.tree-link:hover { background: var(--row-hover); }
.tree-link.active { background: var(--accent-soft); color: var(--primary); }
.tree-link.active .tree-label { color: var(--primary); font-weight: 600; }
/* each tree row holds its own right-floated balance, so a short row can never
   push the next row's balance left into a staircase */
.tree-node { display: flow-root; }
/* the tree page is one Vuexy card (core keeps .frappe-card but drops its shadow here) */
body[data-route^="Tree/"] .layout-main-section.frappe-card {
  box-shadow: var(--card-shadow); border: 0; border-radius: var(--r-card); padding: 18px 22px;
}

/* ============================================================
   9. MODALS, DROPDOWNS, POPOVERS, TOASTS — Vuexy's overlays
   ============================================================ */
.modal-content {
  background: var(--modal-bg); border: 0;
  border-radius: var(--r-modal); box-shadow: var(--shadow-xl);
}
/* the header band sits on the canvas tone; the close button floats out of
   the corner as a small raised square that settles in on hover (Vuexy) */
.modal .modal-content .modal-header {
  background: var(--bg-color); border-bottom: 0; padding: 14px 20px;
  border-radius: var(--r-modal) var(--r-modal) 0 0;
}
.modal-header .modal-title { font-size: 17px; font-weight: 500; }
.modal .modal-header .modal-actions .btn-modal-close, .modal .modal-header .btn-modal-close {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  background: var(--card-bg); border-radius: var(--r-ctl); border: 0;
  box-shadow: 0 5px 20px 0 rgba(34, 41, 47, 0.12);
  transform: translate(10px, -4px);
  transition: transform 0.23s ease 0.1s, box-shadow 0.23s ease;
}
.modal .modal-header .modal-actions .btn-modal-close:hover, .modal .modal-header .btn-modal-close:hover {
  transform: translate(6px, 0); box-shadow: 0 2px 8px 0 rgba(34, 41, 47, 0.12);
}
.modal-body { padding: 18px 20px; }
.modal-footer { border-top: 1px solid var(--border-color); padding: 12px 20px; }
.modal-backdrop.show { opacity: 0.45; }
[data-theme="dark"] .modal-backdrop.show { opacity: 0.6; }
.modal.fade .modal-dialog { transition: transform var(--t-layout) var(--ease-out), opacity var(--t-layout) ease; transform: translateY(8px) scale(0.985); }
.modal.show .modal-dialog { transform: none; }
.dropdown-menu, .frappe-menu {
  background: var(--raised-bg); border: 1px solid color-mix(in srgb, var(--heading-color) 6%, transparent);
  border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 6px;
}
.dropdown-item, .dropdown-menu-item { border-radius: var(--r-ctl); font-size: 13.5px; padding: 7px 12px; color: var(--text-color); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus,
.dropdown-menu-item:hover { background-color: var(--accent-soft); color: var(--primary); }
.dropdown-menu .dropdown-item:hover svg, .dropdown-menu-item:hover svg { --icon-stroke: var(--primary); color: var(--primary); }
.dropdown-divider { border-color: var(--border-color); }
.popover { background: var(--raised-bg); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
.popover .popover-header { background: var(--primary); color: #fff; border-radius: var(--r-card) var(--r-card) 0 0; border: 0; }
.frappe-control .tooltip-content, .tooltip-inner { border-radius: var(--r-ctl); }
.tooltip-inner { background: #323232; font-size: 12px; padding: 5px 9px; }
.alert, .desk-alert {
  background: var(--raised-bg); border: 0;
  border-radius: var(--r-card); box-shadow: var(--shadow-lg); color: var(--text-color);
}
.desk-alert .alert-message, .alert .alert-message { font-weight: 500; }
.desk-alert.green, .alert.alert-success { box-shadow: inset 3px 0 0 var(--success), var(--shadow-lg); }
.desk-alert.red, .alert.alert-danger { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-lg); }
.desk-alert.orange, .desk-alert.yellow, .alert.alert-warning { box-shadow: inset 3px 0 0 var(--warning), var(--shadow-lg); }
.desk-alert.blue, .alert.alert-info { box-shadow: inset 3px 0 0 var(--primary), var(--shadow-lg); }
.msgprint, .modal-body .msgprint { color: var(--text-color); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   10. DESKTOP LAUNCHER (/desk) — an app directory
   Every rule is anchored on .desktop-wrapper + direct-child chains so
   nothing leaks into folder thumbnails or the search modal. The core
   stylesheet for this page is an inline <style>; these win on specificity.
   ============================================================ */
:root:root { --lt-desk-col: 1120px; --lt-desk-gutter: 24px; }
.desktop-wrapper {
  min-height: 100vh;
  background: radial-gradient(720px 340px at 50% -10%, var(--accent-soft), transparent 62%), var(--bg-color);
}
.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: 999px;
  background: var(--control-bg); border: 1px solid var(--border-strong);
}
.desktop-wrapper .desktop-navbar-modal-search:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.desktop-wrapper .desktop-container {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; min-height: 0;
  padding: clamp(40px, 11vh, 104px) var(--lt-desk-gutter) 72px;
}
.lt-desk-head { max-width: var(--lt-desk-col); width: 100%; margin: 0 auto 22px; }
.lt-desk-head h1 { margin: 0; font-size: clamp(20px, 4.5vw, 26px); 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); }
.lt-desk-logo { width: 44px; height: 44px; margin-bottom: 10px; animation: lt-float 4s ease-in-out infinite alternate; }
@keyframes lt-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.desktop-wrapper .desktop-container > .icons-container { max-width: var(--lt-desk-col); width: 100%; margin: 0 auto; padding: 0; }
.desktop-wrapper .desktop-container > .icons-container > .icons {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  grid-template-rows: none; grid-auto-rows: min-content; gap: 14px; justify-items: stretch; margin-top: 0;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px;
  width: auto; height: 68px; padding: 0 16px; border-radius: var(--r-card);
  border: 0; background: var(--card-bg); box-shadow: var(--card-shadow);
  transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-state) ease, border-color var(--t-state) ease;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover {
  transform: translateY(-2px); border-color: rgba(var(--jw-gl), 0.35);
  box-shadow: var(--lift); text-decoration: none;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .icon-container {
  flex: none; width: 42px; height: 42px; padding: 0; border-radius: 10px; overflow: hidden;
}
.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: 42px; height: 42px; }
.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 var(--t-state) ease;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover > .icon-caption > .icon-title { color: var(--heading-color); }
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon > .hide-button { top: -8px; left: auto; right: -8px; }
/* folder thumbnails keep a real 3x3 mini-grid inside the 42px chip */
.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%; }
.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;
}
/* v87: the tiles wear the switcher's icons on the same jewels (section 3;
   desk.js deskIcon), larger: a 48px jewel with a 24px icon, Lucide's own
   drawing size, and 56px in a folder. Each card is lit by its jewel, a soft
   wash of the tone behind it; on hover the card lifts with a rim and a glow
   in the tone, the jewel's halo brightens, a glint crosses it and an arrow
   slides in. A folder's jewel sits on a stack of two more. */
.desktop-icon[data-lt-icon] > .icon-container > :not(.lt-desk-chip) { display: none; }
/* the corner orb stays a glint at these sizes, not a folded corner */
.lt-desk-chip {
  --orb: 11px; --orb-a: 0.11;
  width: 100%; height: 100%; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 18px -8px rgba(var(--jw-gl), 0.85), 0 0 16px -4px rgba(var(--jw-gl), 0.45);
  transition: transform var(--t-state) var(--ease-out), box-shadow var(--t-state) ease;
}
[data-theme="dark"] .lt-desk-chip {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 20px -8px rgba(var(--jw-gl), 0.95), 0 0 24px -4px rgba(var(--jw-gl), 0.6);
}
.lt-desk-chip::before { animation-delay: calc(0.3s + var(--i, 0) * 45ms); }
.lt-desk-ic { width: 24px; height: 24px; }
.desktop-icon[data-lt-icon]:hover .lt-desk-chip {
  transform: scale(1.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 10px 22px -8px rgba(var(--jw-gl), 1), 0 0 30px -2px rgba(var(--jw-gl), 0.7);
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] {
  height: 76px; gap: 16px; padding: 0 18px; border: 1px solid transparent;
  background: radial-gradient(150px 110px at 42px 50%, rgba(var(--jw-gl), 0.1), rgba(var(--jw-gl), 0) 70%), var(--card-bg);
  animation: lt-pop 0.5s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 36ms);
}
[data-theme="dark"] .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] {
  background: radial-gradient(150px 110px at 42px 50%, rgba(var(--jw-gl), 0.17), rgba(var(--jw-gl), 0) 70%), var(--card-bg);
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon]:hover {
  transform: translateY(-3px); box-shadow: var(--lift), 0 18px 38px -20px rgba(var(--jw-gl), 0.75);
}
@keyframes lt-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] > .icon-container {
  width: 48px; height: 48px; border-radius: 14px; padding: 0; overflow: visible; background: transparent !important;
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] > .icon-caption > .icon-title { font-size: 14px; color: var(--heading-color); }
/* the arrow, in the tone */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon]::after {
  content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background: rgb(var(--jw-gl));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-state) ease, transform var(--t-state) var(--ease-out);
}
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon]:hover::after { opacity: 0.9; transform: none; }
/* a folder: its jewel on a stack of two more */
.desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-folder] > .icon-container {
  box-shadow: 5px -5px 0 -1px rgba(var(--jw-gl), 0.45), 10px -10px 0 -4px rgba(var(--jw-gl), 0.22);
}
/* the folder's popover */
.desktop-modal-body .icons > .desktop-icon[data-lt-icon] > .icon-container {
  width: 56px; height: 56px; min-width: 56px; min-height: 56px; border-radius: 16px;
  padding: 0; overflow: visible; background: transparent !important;
}
.desktop-modal-body .lt-desk-chip { --orb: 12px; }
.desktop-modal-body .lt-desk-ic { width: 26px; height: 26px; }
.desktop-modal-body .icons > .desktop-icon[data-lt-icon] > .icon-caption > .icon-title { color: var(--heading-color); font-weight: 500; }
@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: 62px; }
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] { height: 68px; }
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon] > .icon-container { width: 44px; height: 44px; border-radius: 13px; }
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon .lt-desk-ic { width: 22px; height: 22px; }
  .desktop-wrapper .navbar-container { padding: 10px 16px; gap: 12px; }
}

/* ---- no adverts in the rail: core injects "Switch to Frappe CRM" /
   "Switch to Helpdesk" promotional links into the CRM and Support sidebars ---- */
.body-sidebar .promotional-banner,
.body-sidebar .promotional-banner + hr,
.body-sidebar .promotional-banner + .sidebar-divider { display: none !important; }

/* ---- form intro banners: tinted hairline notes, not saturated bars ---- */
.form-message, .form-layout .form-message {
  padding: 9px 14px; margin: 10px 0 12px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45;
  border-radius: var(--r-card); border: 1px solid var(--border-color);
  background: var(--card-bg); color: var(--text-color);
}
/* core paints these with solid brand blues at higher specificity */
.form-layout .form-message.blue, .form-message.blue { background: var(--accent-soft) !important; border-color: rgba(106, 95, 223, 0.28) !important; color: var(--accent-fg) !important; }
.form-layout .form-message.yellow, .form-message.yellow, .form-layout .form-message.orange, .form-message.orange { background: var(--bg-orange) !important; border-color: rgba(255, 159, 67, 0.4) !important; color: var(--text-on-orange) !important; }
.form-layout .form-message.red, .form-message.red { background: var(--bg-red) !important; border-color: rgba(234, 84, 85, 0.4) !important; color: var(--text-on-red) !important; }
.form-layout .form-message.green, .form-message.green { background: var(--bg-green) !important; border-color: rgba(40, 199, 111, 0.4) !important; color: var(--text-on-green) !important; }
.form-message.border-bottom { border-bottom: 1px solid rgba(106, 95, 223, 0.28) !important; }
.form-message .indicator, .form-message .indicator-pill { filter: none; }
.form-message a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.form-message .close, .form-message .btn-close { color: inherit; opacity: 0.6; }
.form-message .close:hover, .form-message .btn-close:hover { opacity: 1; }

/* ============================================================
   11. MOTION
   - widgets reveal on creation (desk.js stamps --lt-i by MutationObserver)
   - the page body settles in on each route (desk.js adds .lt-page-in)
   - everything collapses to 1ms under reduced motion so end states hold
   ============================================================ */
@keyframes lt-rise { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
.lt-anim .widget:not(.custom-block-widget-box) {
  animation: lt-rise var(--t-reveal) var(--ease-out) backwards;
  animation-delay: calc(var(--lt-i, 0) * var(--lt-step));
}
@keyframes lt-page-in { from { opacity: 0; transform: translateY(6px); } }
.page-container.lt-page-in > .page-body { animation: lt-page-in 0.32s var(--ease-out) both; }
.page-container.lt-page-in > .page-head { animation: lt-page-in 0.24s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .widget.number-widget-box:hover, .widget.dashboard-widget-box:hover, .widget.shortcut-widget-box:hover,
  .form-links .document-link:hover,
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon:hover,
  .desktop-wrapper .desktop-container > .icons-container > .icons > .desktop-icon[data-lt-icon]:hover { transform: none; }
  .desktop-icon[data-lt-icon]:hover .lt-desk-chip { transform: none; }
}

/* ============================================================
   12. LOGIN — Vuexy's basic auth page (auth-login-basic)
   A centred card on the canvas with two soft violet shapes behind it,
   the mark and product name over a greeting, 38px fields and a full-width
   violet button. Scoped to the sign-in page and to the set-password page
   new users reach from the BRAccount welcome email, so the two always
   match. The website shell never sets data-theme, so dark follows the OS.
   ============================================================ */
body:is([data-path="login"], [data-path="update-password"]) {
  --login-bg: #f8f7fa;
  --login-panel: #fdfcff;
  --login-hairline: #e6e6e8;
  --login-hairline-strong: #d0ced4;
  --login-heading: #444050;
  --login-body: #6d6b77;
  --login-muted: #706d80;
  --login-accent: #6a5fdf;
  --login-accent-hover: #5a4fd6;
  --login-link: #6157e0;
  --login-control: #fdfcff;
  --login-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
  background: var(--login-bg) !important;
  color: var(--login-body) !important;
  font-family: var(--font-stack) !important;
  min-height: 100dvh;
}
@media (prefers-color-scheme: dark) {
  body:is([data-path="login"], [data-path="update-password"]) {
    --login-bg: #14172a;
    --login-panel: #1c2036;
    --login-hairline: #2f3450;
    --login-hairline-strong: #3f4566;
    --login-heading: #ecebf8;
    --login-body: #bdbdd4;
    --login-muted: #9c9db6;
    --login-accent: #6a5fdf;
    --login-accent-hover: #7b71e8;
    --login-link: #9a92f5;
    --login-control: #1c2036;
    --login-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0.75rem 2rem -1rem rgba(5, 7, 20, 0.8);
  }
}
/* the two shapes Vuexy draws behind its basic auth card */
body:is([data-path="login"], [data-path="update-password"])::before,
body:is([data-path="login"], [data-path="update-password"])::after {
  content: ""; position: fixed; pointer-events: none; border-radius: 28px;
  background: color-mix(in srgb, var(--login-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--login-accent) 16%, transparent);
}
/* the card sits ~60px from the top, 26rem wide: one shape behind its top-left
   corner, one behind its bottom-right, as in Vuexy */
body:is([data-path="login"], [data-path="update-password"])::before {
  position: absolute; width: 240px; height: 240px; left: calc(50% - 330px); top: 40px; transform: rotate(18deg);
}
body:is([data-path="login"], [data-path="update-password"])::after {
  position: absolute; width: 180px; height: 180px; left: calc(50% + 136px); top: 420px; transform: rotate(-12deg);
  background: color-mix(in srgb, var(--login-accent) 6%, transparent);
}
body:is([data-path="login"], [data-path="update-password"]) .page-card {
  position: relative; z-index: 1;
  background: var(--login-panel) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: var(--login-shadow) !important;
  padding: 2.4rem 2.2rem !important;
  max-width: 26rem; width: 100%;
  animation: lt-page-in 0.5s var(--ease-out) both;
}
body:is([data-path="login"], [data-path="update-password"]) .app-logo {
  content: url("/assets/ledger_theme/images/br-logo.png");
  width: 46px !important; height: 46px !important; border-radius: 10px;
  background: #ffffff; padding: 3px; margin-bottom: 0.6rem;
  box-shadow: 0 4px 14px -4px rgba(106, 95, 223, 0.55);
}
body:is([data-path="login"], [data-path="update-password"]) .page-card-head h4, body:is([data-path="login"], [data-path="update-password"]) .page-card h4 {
  color: var(--login-heading) !important; font-weight: 500 !important; letter-spacing: -0.01em; font-size: 1.45rem !important;
}
body:is([data-path="login"], [data-path="update-password"]) .page-card-subtitle, body:is([data-path="login"], [data-path="update-password"]) .text-muted { color: var(--login-muted) !important; }
body:is([data-path="login"], [data-path="update-password"]) label, body:is([data-path="login"], [data-path="update-password"]) .control-label {
  color: var(--login-heading) !important; font-weight: 500 !important; font-size: 0.8125rem !important;
}
body:is([data-path="login"], [data-path="update-password"]) .form-control, body:is([data-path="login"], [data-path="update-password"]) input.form-control {
  background-color: var(--login-control) !important;
  border: 1px solid var(--login-hairline-strong) !important;
  color: var(--login-heading) !important;
  border-radius: 5px !important; min-height: 42px !important;
  font-size: 16px !important;   /* keeps iOS from zooming the field on focus */
  box-shadow: none !important;
}
body:is([data-path="login"], [data-path="update-password"]) .form-control::placeholder { color: var(--login-muted) !important; opacity: 0.7; }
body:is([data-path="login"], [data-path="update-password"]) .form-control:focus {
  border-color: var(--login-accent) !important;
  box-shadow: 0 3px 10px 0 rgba(34, 41, 47, 0.1) !important;
}
body:is([data-path="login"], [data-path="update-password"]) .btn-login, body:is([data-path="login"], [data-path="update-password"]) .btn-primary, body[data-path="update-password"] .btn-signup {
  background: var(--login-accent) !important; border: 1px solid var(--login-accent) !important; color: #ffffff !important;
  font-weight: 500 !important; border-radius: 5px !important; min-height: 42px !important;
  box-shadow: none;
  transition: box-shadow 0.2s ease, transform var(--t-fast) ease;
}
body:is([data-path="login"], [data-path="update-password"]) .btn-login:hover, body:is([data-path="login"], [data-path="update-password"]) .btn-primary:hover, body[data-path="update-password"] .btn-signup:not(:disabled):hover {
  background: var(--login-accent) !important; box-shadow: 0 8px 25px -8px var(--login-accent) !important;
}
body:is([data-path="login"], [data-path="update-password"]) .btn-login-option, body:is([data-path="login"], [data-path="update-password"]) .btn-default:not(.btn-login) {
  background: transparent !important; border: 1px solid var(--login-hairline-strong) !important;
  color: var(--login-body) !important; border-radius: 5px !important; min-height: 42px !important;
}
body:is([data-path="login"], [data-path="update-password"]) .btn-login-option:hover, body:is([data-path="login"], [data-path="update-password"]) .btn-default:not(.btn-login):hover {
  background: color-mix(in srgb, var(--login-accent) 6%, transparent) !important; border-color: var(--login-accent) !important; color: var(--login-heading) !important;
}
body[data-path="update-password"] .btn-signup:disabled { opacity: 0.45 !important; transform: none !important; cursor: not-allowed; }
body:is([data-path="login"], [data-path="update-password"]) a { color: var(--login-link) !important; }
body:is([data-path="login"], [data-path="update-password"]) .toggle-password, body:is([data-path="login"], [data-path="update-password"]) .input-group-text {
  background: transparent !important; border-color: var(--login-hairline-strong) !important; color: var(--login-muted) !important;
}
@media (max-width: 640px) {
  body:is([data-path="login"], [data-path="update-password"])::before,
  body:is([data-path="login"], [data-path="update-password"])::after { display: none; }
}

/* ============================================================
   13. RESPONSIVE & ACCESSIBILITY
   ============================================================ */
@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));
  }
}
/* phones: the floating head and the cards keep a 12px gutter instead of 24px */
@media (max-width: 767px) {
  .page-head { padding: 10px 12px 8px; }
  .page-head .page-head-content { padding: 8px 10px; min-height: 52px; }
  body:not([data-route^="query-report"]) .layout-main-section.layout-main-list { margin: 4px 12px 16px; }
  body[data-route^="query-report"] .layout-main-section > .page-form,
  .report-summary, body[data-route^="query-report"] .chart-wrapper { margin-left: 12px; margin-right: 12px; }
  .report-wrapper { margin-left: 12px; margin-right: 12px; max-width: calc(100% - 24px); }
  .std-form-layout > .form-layout, .form-footer { padding: 0 12px; }
  .layout-side-section .form-sidebar { margin: 0 12px 16px; }
  body[data-route^="dashboard-view"] .layout-main-section { padding: 6px 12px 16px; }
}
@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; }
}
/* v87: on a phone the switcher's columns are ~165px; beside the 30px jewel
   a long name ("BRAccount Settings") wraps at its space, never clipped */
@media (max-width: 420px) {
  .lt-app-tile { gap: 8px; padding-left: 6px; padding-right: 6px; }
  .lt-app-t { white-space: normal; text-overflow: clip; }
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-control:focus-visible, .btn:focus-visible { outline: none; }

/* ==========================================================================
   14. v83 — WORKSPACE WIDGETS, DASHBOARD PAGES AND REPORT SUMMARIES
   v84 (2026-10-28): the dashboards keep their jewel colouring. v83 had made
   these widgets flat Vuexy statistic cards; after seeing it live the owner
   asked for the "previous colouring style" on every dashboard, so number
   cards, chart panels and shortcuts are the v75/v80 jewel set again, rule
   for rule:
   - number cards are deep jewel gradients, near-vertical, each >= 4.5:1 for
     white at its lightest stop; figures solid white with a cyan glint
     passing; a gloss, a light sweep and a soft corner orb carry the shine.
     Tones follow page order via data-lt-tone (desk.js), nth-child as
     fallback: sapphire, ruby, violet, emerald;
   - chart panels are glass cards with a jewel rule along the top (the
     charts inside are ECharts, charts.js); the rule is a background layer,
     so the panel needs no overflow clip and a chart's menu or tooltip is
     never cut off;
   - shortcuts are jewel tiles with a frosted count.
   v85 then made that colour shine and glow; v89 (2026-10-31, below) gives
   number cards, shortcuts and chart panels the Analytics page's look instead.
   The rest of the section stays Vuexy (v83):
   - link cards ("Reports & Masters") are plain Vuexy cards: an h4 title and
     links that carry the menu's circle bullet and slide on hover;
   - a report's summary strip is Vuexy's "Statistics" card: avatar,
     figure, label per item, green/red only where the figure is a gain or
     a loss.
   ========================================================================== */
/* v89 (2026-10-31) — the widgets shine the way the Analytics page does ("make
   in all shinney same", the owner's reference: /analytics, nepal_ird
   braccount_dash.css). Number cards and shortcuts are its jewel cards: deep
   140deg gradients (purple, blue, rose, green in page order, data-lt-tone from
   desk.js), lit from the top left with a bright spot at the top right and a
   little shade at the foot, an edge of light, a glow in the card's own hue that
   spreads in the dark, and a sheen that sweeps once when the pointer rests on
   it. Figures are solid white and still: the v85 glint and breathing halo are
   gone. Chart panels are its paper cards: no jewel rule, one soft shadow (in
   the dark the desk's navy with an edge of light). */
.widget.number-widget-box, .widget.shortcut-widget-box {
  --jw: linear-gradient(140deg, #3c2fb3 0%, #5b4fd6 48%, #7c3aed 100%); --jw-glow: rgba(91, 79, 214, 0.65);
  position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 16px; color: #fbfaff;
  background: var(--jw);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1rem 2rem -1rem var(--jw-glow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.widget.number-widget-box { padding: 18px 20px; min-height: 118px; }
.widget.shortcut-widget-box { min-height: 60px; padding: 14px 16px; }
.widget.number-widget-box[data-lt-tone="1"], .widget.shortcut-widget-box[data-lt-tone="1"],
.widget.number-widget-box:nth-child(4n+2):not([data-lt-tone]) {
  --jw: linear-gradient(140deg, #173d9c 0%, #1d4ed8 65%, #2563eb 100%); --jw-glow: rgba(29, 78, 216, 0.6); }
.widget.number-widget-box[data-lt-tone="2"], .widget.shortcut-widget-box[data-lt-tone="2"],
.widget.number-widget-box:nth-child(4n+3):not([data-lt-tone]) {
  --jw: linear-gradient(140deg, #881337 0%, #be123c 65%, #e11d48 100%); --jw-glow: rgba(190, 18, 60, 0.55); }
.widget.number-widget-box[data-lt-tone="3"], .widget.shortcut-widget-box[data-lt-tone="3"],
.widget.number-widget-box:nth-child(4n+4):not([data-lt-tone]) {
  --jw: linear-gradient(140deg, #064e3b 0%, #047857 68%, #059669 100%); --jw-glow: rgba(4, 120, 87, 0.55); }
[data-theme="dark"] .widget.number-widget-box, [data-theme="dark"] .widget.shortcut-widget-box {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1.25rem 3rem -1rem var(--jw-glow), 0 0 3.5rem -1rem var(--jw-glow); }
.widget.number-widget-box:hover, .widget.shortcut-widget-box:hover {
  transform: translateY(-3px); border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 1.5rem 2.75rem -1.25rem var(--jw-glow), 0 0 2rem -1rem var(--jw-glow); }
[data-theme="dark"] .widget.number-widget-box:hover, [data-theme="dark"] .widget.shortcut-widget-box:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1.75rem 3.5rem -1rem var(--jw-glow), 0 0 4.5rem -0.75rem var(--jw-glow); }
/* the light on the card */
.widget.number-widget-box::after, .widget.shortcut-widget-box::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
    radial-gradient(36% 36% at 88% 12%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.14)); }
/* the sheen: once across, when the pointer rests on the card */
.widget.number-widget-box::before, .widget.shortcut-widget-box::before {
  content: ""; position: absolute; inset: -60% -40%; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 48%,
    rgba(255, 255, 255, 0.04) 52%, transparent 60%);
  transform: translateX(-70%); }
@media (prefers-reduced-motion: no-preference) {
  .widget.number-widget-box::before, .widget.shortcut-widget-box::before {
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
  .widget.number-widget-box:hover::before, .widget.shortcut-widget-box:hover::before { transform: translateX(70%); }
}
.widget.number-widget-box > *, .widget.shortcut-widget-box > * { position: relative; z-index: 2; }
.widget.number-widget-box .widget-title { color: rgba(251, 250, 255, 0.88); font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: 0; }
.widget.number-widget-box .widget-subtitle { color: rgba(251, 250, 255, 0.82); }
.widget.number-widget-box .widget-control .btn,
.widget.number-widget-box .dropdown-toggle,
.widget.number-widget-box .card-actions .btn {
  color: #fff; background: rgba(255, 255, 255, 0.16); border: 0; border-radius: 8px; }
.widget.number-widget-box .widget-control svg { stroke: #fff; fill: #fff; }
/* the figure: solid white, crisp and still. Core's own rule is
   `.widget.number-widget-box .widget-body .widget-content .number` (0,5,0,
   --text-color at --text-2xl), so this one names the same chain: a shorter one
   lost and left the figure grey at 20px on the deep card. */
.widget.number-widget-box .widget-body .widget-content .number {
  display: inline-block; margin-top: 10px; font-size: 30px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: #fbfaff; }
.widget.number-widget-box .card-stats .percentage-stats,
.widget.number-widget-box .widget-footer .green,
.widget.number-widget-box .widget-footer .red {
  color: #fff; border: 0; background: rgba(255, 255, 255, 0.16); border-radius: 999px; }
.widget.shortcut-widget-box .widget-title { color: #fff; font-weight: 600; font-size: 14px; }
.widget.shortcut-widget-box .widget-control,
.widget.shortcut-widget-box .widget-control svg { color: #fff; stroke: #fff; }
.widget.shortcut-widget-box .indicator-pill {
  background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; font-weight: 700;
  font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); }
.lt-anim .widget.number-widget-box, .lt-anim .widget.shortcut-widget-box {
  animation: lt-rise var(--t-reveal) var(--ease-out) backwards;
  animation-delay: calc(var(--lt-i, 0) * var(--lt-step)); }

/* chart panels: the Analytics page's paper cards */
.widget.dashboard-widget-box {
  position: relative; border: 0; border-radius: 12px; padding: 20px 22px;
  background: var(--card-bg); box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14); }
[data-theme="dark"] .widget.dashboard-widget-box {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0.75rem 2rem -1rem rgba(5, 7, 20, 0.8); }
.widget.dashboard-widget-box .widget-control .btn { border-radius: 8px; }
.widget.dashboard-widget-box .chart-loading-state, .widget.dashboard-widget-box .chart-empty-state { color: var(--text-muted); }

/* titles: core's `.widget .widget-head .widget-label .widget-title` (0,4,0)
   paints every widget title in --text-color and outranks the rules above, so
   number-card and shortcut titles read grey on the deep cards. White on the
   jewels, ink on the panels. */
.widget.number-widget-box .widget-head .widget-label .widget-title {
  color: rgba(251, 250, 255, 0.88); font-size: 13px; font-weight: 500; }
.widget.shortcut-widget-box .widget-head .widget-label .widget-title,
.widget.shortcut-widget-box:hover .widget-head .widget-label .widget-title { color: #fff; font-weight: 600; }
.widget.dashboard-widget-box .widget-head .widget-label .widget-title {
  color: var(--heading-color); font-size: 1.0625rem; font-weight: 600; }

/* link cards: plain Vuexy cards, h4 title, bulleted links that slide */
.widget.links-widget-box {
  position: relative; border-radius: var(--r-card); border: 0; padding: 20px 22px;
  background: var(--card-bg); box-shadow: var(--card-shadow); }
.widget.links-widget-box:hover { box-shadow: var(--lift); transform: none; }
.widget.links-widget-box .widget-title {
  display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; color: var(--heading-color); margin-bottom: 6px; }
.widget.links-widget-box .widget-title::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 18px; border-radius: 4px; background: var(--vx-grad);
  box-shadow: 0 0 6px 0 rgba(106, 95, 223, 0.45); }
.widget.links-widget-box .link-item {
  display: flex; align-items: center; gap: 0; border-radius: var(--r-ctl);
  padding: 7px 8px; margin-left: -8px; color: var(--text-color); font-size: 13.5px;
  transition: color .2s ease, background-color .2s ease; }
.widget.links-widget-box .link-item::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 12px; border-radius: 50%;
  border: 1.6px solid currentColor; opacity: 0.7; transition: transform 0.25s ease, opacity .2s ease; }
.widget.links-widget-box .link-item .link-content, .widget.links-widget-box .link-item > span { transition: transform 0.25s ease; }
.widget.links-widget-box .link-item:hover { color: var(--primary); background: transparent; text-decoration: none; }
.widget.links-widget-box .link-item:hover::before { transform: translateX(5px); opacity: 1; }
.widget.links-widget-box .link-item:hover .link-content, .widget.links-widget-box .link-item:hover > span { transform: translateX(5px); }
[data-theme="dark"] .widget.links-widget-box .link-item:hover { color: var(--accent-fg); }
.widget.links-widget-box .link-item .indicator-pill { margin-left: auto; }
.widget.links-widget-box .link-item svg { --icon-stroke: currentColor; }

.widget.onboarding-widget-box, .widget.quick-list-widget-box, .widget.custom-block-widget-box {
  border: 0; border-radius: var(--r-card); box-shadow: var(--card-shadow); background: var(--card-bg); }
/* (an Agency Book dashboard clears its own frame inline: engine-head.js abMain) */

@media (prefers-reduced-motion: reduce) {
  .widget.number-widget-box:hover, .widget.shortcut-widget-box:hover { transform: none; }
  .widget.links-widget-box .link-item:hover::before, .widget.links-widget-box .link-item:hover .link-content,
  .widget.links-widget-box .link-item:hover > span { transform: none; }
}

/* dashboard pages (v76 balance kept): four cards across on a wide page,
   two-by-two below that, never three plus an orphan */
body[data-route^="dashboard-view"] .widget-group-body:has(> .number-widget-box) {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1199px) {
  body[data-route^="dashboard-view"] .widget-group-body:has(> .number-widget-box) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  body[data-route^="dashboard-view"] .widget-group-body:has(> .number-widget-box) { grid-template-columns: minmax(0, 1fr); }
}
body[data-route^="dashboard-view"] .widget-group-body:has(> .number-widget-box) > .number-widget-box { margin: 0; width: auto; }
body[data-route^="dashboard-view"] .layout-main-section { padding: 6px 24px 24px; }

/* ---- the report summary: Vuexy's Statistics card ---- */
.report-summary {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  padding: 18px 8px; margin: 18px 24px 0; border: 0;
  background: var(--card-bg); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.report-summary .summary-item {
  --c: var(--vx-t0);
  /* core pins height: 62px; max-width: 300px and centres the content */
  flex: 1 1 200px; min-width: 180px; max-width: none; height: auto; min-height: 58px;
  margin: 0; position: relative; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; align-items: center; align-content: center;
  padding: 8px 20px; text-align: left; border: 0 !important; background: transparent; box-shadow: none; }
.report-summary .summary-item + .summary-item { border-left: 0 !important; }
.report-summary .summary-item::before {
  content: ""; grid-row: 1 / span 2; grid-column: 1; width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent); }
.report-summary .summary-item::after {
  content: ""; position: absolute; left: 32px; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; }
.report-summary .summary-item:nth-of-type(4n+2) { --c: var(--vx-t1); }
.report-summary .summary-item:nth-of-type(4n+3) { --c: var(--vx-t3); }
.report-summary .summary-item:nth-of-type(4n+4) { --c: var(--vx-t0); }
.report-summary .summary-item:has(.summary-value.green) { --c: var(--success); }
.report-summary .summary-item.lt-neg,
.report-summary .summary-item:has(.summary-value.red) { --c: var(--danger); }
.report-summary .summary-item .summary-value {
  grid-column: 2; grid-row: 1; display: block; margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--heading-color); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.report-summary .summary-item .summary-value.green { color: var(--text-on-green); }
.report-summary .summary-item .summary-value.red { color: var(--text-on-red); }
.report-summary .summary-label {
  grid-column: 2; grid-row: 2; display: block; color: var(--text-muted); font-size: 12.5px; font-weight: 400;
  text-transform: none; letter-spacing: 0; }
/* the label comes first in Frappe's markup; the grid puts the figure on top,
   both flush left beside the avatar (core centres them) */
.report-summary .summary-item > .summary-label { order: 2; }
.report-summary .summary-item > .summary-label, .report-summary .summary-item > .summary-value {
  justify-self: start; text-align: left; width: auto; margin-left: 0; }
/* the "+", "-", "=" between tiles some reports send */
.report-summary .summary-separator { display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0 2px; border: 0 !important; }
.report-summary .summary-separator .summary-value { font-size: 20px; font-weight: 600; color: var(--text-muted); }
.report-summary .summary-separator::before, .report-summary .summary-separator::after { display: none; }

/* the report chart: a Vuexy chart card drawn by ECharts */
body[data-route^="query-report"] .chart-wrapper {
  /* ERPNext pins financial-statement charts to max-width: 470px inline */
  max-width: none !important;
  position: relative; margin: 18px 24px 4px; padding: 18px 18px 10px; border-radius: var(--r-card);
  border: 0; background: var(--card-bg); box-shadow: var(--card-shadow); }
/* a report chart that plots only ticked rows opens empty: say so (v80) */
body[data-route^="query-report"] .chart-wrapper.lt-chart-empty .lt-echart-wrap { opacity: .35; }
body[data-route^="query-report"] .chart-wrapper.lt-chart-empty::after {
  content: "Tick rows in the table below to plot them here";
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 13.5px; font-weight: 500; color: var(--heading-color); }

/* ---- ECharts frames (charts.js) ---- */
.lt-echart-wrap { position: relative; width: 100%; }
.lt-echart { width: 100%; }
.lt-echart-title { font-size: 15px; font-weight: 500; color: var(--heading-color); margin: 0 0 8px 2px; }
.lt-echart-none {
  height: 100%; min-height: 80px; display: grid; place-items: center;
  color: var(--text-muted); font-size: 13px; }
.form-graph .lt-echart-wrap, .form-dashboard .lt-echart-wrap { padding-top: 4px; }