/* ============================================================
 * PulseRx Global Theme
 * ------------------------------------------------------------
 * Triton-branded override for ERPNext / Frappe Desk.
 *
 * Goals (per mama feedback, 2026-06):
 *   - Bold, bright, BIGGER letters (no more squinting at a small "V"
 *     in the default warehouse field).
 *   - Triton blue (#1a4d7a) as the primary brand color everywhere -
 *     not just on the PulseRx home, but DEEP into Item / Stock Entry
 *     pages where ERPNext usually drops back to its plain white skin.
 *   - Subtle Triton-tinted off-white background (no harsh pure white).
 *   - Warm cream highlight (#fff8e7 + gold) on Save / Submit so the
 *     key action pops on the page.
 *   - Mobile-responsive - GM uses Galaxy phone on the shop floor.
 *
 * Palette pulled from:
 *   - bmr_cover_sheet.json  (#1a4d7a primary, #fff8e7 + #d4a017 accent)
 *   - v0-architecture.html  (system font stack, line-height base)
 * ============================================================ */

/* ---------- 0. Design-system bridge (Act 12, 2026-06-17) ----------
 * The PulseRx design system lives in tokens.css (112 --prx-* tokens).
 * Cascade order in hooks.py: pulserx-theme.css -> tokens.css -> prx-*,
 * so when this file loads, --prx-* are NOT YET DEFINED, but CSS
 * variables resolve at CONSUMPTION time, not declaration time -
 * meaning var(--prx-primary) below will look up the actual token in
 * tokens.css once that file's :root contributes to the cascade.
 *
 * The fallback values (after the comma in each var()) preserve the
 * original Triton blue look so the app degrades gracefully if
 * tokens.css fails to load. In normal operation, --prx-* wins.
 *
 * The legacy --pulserx-* names are kept as ALIASES so the 914 lines
 * of style rules below (sections 2-9, including the deep-Desk
 * sections 8a-8m and the sidebar identity card) continue to resolve
 * without rewriting.
 */
:root {
    /* Legacy --pulserx-* aliases now sourced from --prx-* design tokens */
    --pulserx-primary:        var(--prx-primary,        #244494);   /* PulseRx primary blue (was Triton #1a4d7a) */
    --pulserx-primary-dark:   var(--prx-primary-hover,  #1D3878);
    --pulserx-primary-light:  var(--prx-blue-600,       #244494);
    --pulserx-primary-tint:   var(--prx-bg-selected,    #E4EAF6);   /* very pale blue for hovers */
    --pulserx-accent-cream:   var(--prx-warning-bg,     #FBF1DA);   /* warm cream for key actions */
    --pulserx-accent-gold:    var(--prx-accent,         #916B00);   /* gold accent (was #d4a017) */
    --pulserx-panel:          var(--prx-bg-panel,       #FAFAFA);   /* subtle off-white panel bg */
    --pulserx-page-bg:        var(--prx-bg-page,        #F5F7F9);   /* page background */
    --pulserx-ink:            var(--prx-text-strong,    #0A0A0A);   /* body text */
    --pulserx-muted:          var(--prx-text-muted,     #666666);   /* secondary text */
    --pulserx-line:           var(--prx-border,         #E4E7EB);   /* border lines */

    /* Frappe Desk variables we are overriding - cascade through aliases */
    --primary:                var(--pulserx-primary);
    --primary-color:          var(--pulserx-primary);
    --brand-color:            var(--pulserx-primary);
    --link-color:             var(--pulserx-primary);
    --bg-color:               var(--pulserx-page-bg);
    --fg-color:               #ffffff;
    --navbar-bg:              var(--pulserx-primary);
    --sidebar-bg:             var(--pulserx-panel);
    --text-color:             var(--pulserx-ink);
    --text-muted:             var(--pulserx-muted);
    --text-light:             var(--pulserx-muted);
    --border-color:           var(--pulserx-line);
    --btn-primary:            var(--pulserx-primary);

    /* Bootstrap-style overrides that ERPNext still references */
    --blue-500:               var(--pulserx-primary);
    --blue-600:               var(--pulserx-primary-dark);

    /* Direct Frappe var bridge - semantic colors that were never wired */
    --red-500:                var(--prx-danger-fill,    #B42318);
    --green-500:              var(--prx-success-fill,   #1B8755);
    --yellow-500:             var(--prx-warning-fill,   #C68A00);
}

/* Dark-mode safety - keep the brand consistent if user flips Desk
 * to dark; just dial the page bg, not the brand blue. */
[data-theme="dark"] {
    --primary:                var(--pulserx-primary-light);
    --primary-color:          var(--pulserx-primary-light);
    --brand-color:            var(--pulserx-primary-light);
    --link-color:             var(--pulserx-primary-light);
}

/* ---------- 2. Font scaling (mama-readability) ----------
 * Default Frappe root font-size is 14px. Mama said "bigger letters"
 * and called out unreadable single-character fields. We bump the
 * root to 15.4px (1.10x) which cascades through every rem-based
 * size in the Desk without breaking layouts. 1.10 chosen over 1.15
 * because 1.15 starts to break the table column widths on dense
 * doctypes like Stock Entry detail. 1.10 keeps grids intact while
 * giving a clear, visible size bump on every label, input, button.
 */
html {
    font-size: 15.4px;        /* 14 * 1.10 */
}

body {
    font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--pulserx-ink);
    background: var(--pulserx-page-bg);
    line-height: 1.55;        /* up from Frappe default ~1.4 */
    -webkit-font-smoothing: antialiased;
}

/* Form labels - bolder + slightly larger so the field name is
 * impossible to miss. This is the fix for the "small V in the
 * default warehouse" complaint. */
.control-label,
.frappe-control .control-label,
.form-section .section-head,
.form-column .control-label,
label.control-label {
    font-weight: 600 !important;
    font-size: 0.95rem;
    color: var(--pulserx-ink);
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}

/* Inputs - bigger text, comfortable padding */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
select,
.like-disabled-input {
    font-size: 0.98rem;
    line-height: 1.5;
    color: var(--pulserx-ink);
    border-color: var(--pulserx-line);
}

.form-control:focus {
    border-color: var(--pulserx-primary);
    box-shadow: 0 0 0 2px rgba(26, 77, 122, 0.15);
}

/* Section headings */
.form-section .section-head,
.section-head,
.head-title {
    font-weight: 700 !important;
    color: var(--pulserx-primary);
    font-size: 1.0rem;
    letter-spacing: 0.3px;
}

/* Page titles in the Desk */
.page-title,
.title-text,
.title-area .title-text {
    font-weight: 700 !important;
    color: var(--pulserx-primary);
    font-size: 1.35rem;
    letter-spacing: -0.2px;
}

/* Data tables - readable rows */
.dt-cell,
.datatable .dt-cell__content,
.list-row,
.list-row-container,
.frappe-list .list-row {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- 3. Navbar - Triton blue ---------- */
.navbar,
header.navbar,
.navbar.navbar-expand {
    background: var(--pulserx-primary) !important;
    border-bottom: 3px solid var(--pulserx-accent-gold);
    box-shadow: 0 2px 6px rgba(20, 61, 97, 0.18);
}

.navbar a,
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar .dropdown-toggle,
.navbar-brand,
.navbar .navbar-brand {
    color: #ffffff !important;
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .navbar-nav .nav-link:hover {
    color: var(--pulserx-accent-cream) !important;
}

.navbar .navbar-brand {
    font-size: 1.15rem;
    letter-spacing: 0.4px;
}

/* Page container background (so ERPNext deep pages don't flash white) */
body,
.layout-main,
.layout-main-section,
.page-container,
.desk-page,
.page-body,
.page-content {
    background: var(--pulserx-page-bg) !important;
}

/* Cards, sections, forms - subtle off-white panel */
.frappe-card,
.form-page,
.form-layout,
.widget,
.dashboard-graph,
.shadow-sm,
.std-form-layout,
.section-body {
    background: #ffffff;
    border: 1px solid var(--pulserx-line);
    border-radius: 6px;
}

.form-page,
.std-form-layout {
    box-shadow: 0 1px 3px rgba(20, 61, 97, 0.06);
}

/* Sidebar */
.layout-side-section,
.desk-sidebar {
    background: var(--pulserx-panel) !important;
    border-right: 1px solid var(--pulserx-line);
}

/* ---------- 4. Buttons - key actions POP ---------- */

/* Generic primary - Triton blue */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: var(--pulserx-primary) !important;
    border-color: var(--pulserx-primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 7px 16px;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: var(--pulserx-primary-dark) !important;
    border-color: var(--pulserx-primary-dark) !important;
}

/* The "key" actions - Save / Submit / Create.
 * Frappe wraps the page-level primary action in .primary-action and
 * gives Submit the modifier .btn-modal-primary. We pull these out in
 * warm cream with the gold border so they sing on the page. */
.primary-action,
.btn.primary-action,
.standard-actions .primary-action,
.btn-modal-primary,
.modal-footer .btn-primary,
button[data-label="Save"],
button[data-label="Submit"] {
    background: var(--pulserx-accent-cream) !important;
    border: 2px solid var(--pulserx-accent-gold) !important;
    color: var(--pulserx-primary-dark) !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    box-shadow: 0 2px 6px rgba(212, 160, 23, 0.25);
    padding: 7px 18px;
}

.primary-action:hover,
.btn.primary-action:hover,
.btn-modal-primary:hover,
button[data-label="Save"]:hover,
button[data-label="Submit"]:hover {
    background: #fff1cc !important;
    border-color: #b8860b !important;
    color: var(--pulserx-primary-dark) !important;
    box-shadow: 0 3px 9px rgba(212, 160, 23, 0.35);
}

/* Secondary buttons - readable */
.btn-default,
.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--pulserx-line);
    color: var(--pulserx-ink);
    font-weight: 500;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--pulserx-primary-tint);
    border-color: var(--pulserx-primary);
    color: var(--pulserx-primary-dark);
}

/* Links */
a, a:link, a:visited {
    color: var(--pulserx-primary);
}
a:hover {
    color: var(--pulserx-primary-dark);
    text-decoration: underline;
}

/* Indicators / badges keep their semantic colors but bump weight */
.indicator-pill,
.indicator {
    font-weight: 600;
}

/* ---------- 5. Login / setup screens (whitelabel) ----------
 * These are public pages so they live outside Desk but still pick
 * up app_include_css when www_include_css is set. We restyle the
 * login card with Triton brand colors so the first impression is
 * PulseRx, not stock Frappe. */
.for-login,
.for-signup,
.login-content,
.page-card {
    background: #ffffff;
    border: 1px solid var(--pulserx-line);
    border-top: 4px solid var(--pulserx-primary);
    box-shadow: 0 4px 14px rgba(20, 61, 97, 0.10);
    border-radius: 8px;
}

.for-login .page-card-head,
.login-content .page-card-head {
    color: var(--pulserx-primary);
    font-weight: 700;
}

/* The Frappe-branded "powered by" footer on login - tone it down */
.login-content .footer-links,
.for-login .footer-links {
    opacity: 0.55;
    font-size: 0.8rem;
}

/* ---------- 6. Mobile responsiveness (Galaxy phone) ---------- */
@media (max-width: 768px) {
    html {
        font-size: 16px;          /* slightly larger on phone */
    }

    .control-label,
    .form-section .section-head {
        font-size: 1.0rem;
    }

    .form-control,
    input[type="text"],
    input[type="number"],
    select,
    textarea {
        font-size: 1.0rem;
        padding: 10px 12px;       /* fat-finger friendly */
        min-height: var(--prx-tap-min, 48px);  /* Phase 5: 44->48 to match mockup */
    }

    .btn,
    .btn-primary,
    .primary-action {
        padding: 12px 18px;
        font-size: 1.0rem;
        min-height: var(--prx-tap-min, 48px);  /* Phase 5: 44->48 to match mockup */
    }

    .navbar .navbar-brand {
        font-size: 1.05rem;
    }

    /* Avoid horizontal overflow on dense datatables */
    .datatable,
    .frappe-list {
        font-size: 0.92rem;
    }
}

/* ---------- 7. Small polish ---------- */

/* Soften the white modal headers */
.modal-header {
    background: var(--pulserx-panel);
    border-bottom: 2px solid var(--pulserx-primary);
}

.modal-title {
    color: var(--pulserx-primary);
    font-weight: 700;
}

/* Workspace / dashboard tiles */
.widget-head,
.widget-title,
.dashboard-section-title {
    color: var(--pulserx-primary) !important;
    font-weight: 700;
}

/* Form dashboard (the strip above a doctype) */
.form-dashboard,
.form-dashboard-section {
    background: var(--pulserx-panel);
    border-bottom: 1px solid var(--pulserx-line);
}

/* Sidebar items in workspace */
.sidebar-item-container .sidebar-item-label {
    font-weight: 500;
    color: var(--pulserx-ink);
}

.sidebar-item-container.selected .sidebar-item-label,
.standard-sidebar-item.selected {
    color: var(--pulserx-primary) !important;
    font-weight: 700;
    background: var(--pulserx-primary-tint);
}

/* ============================================================
 * 8. Deep-Desk Gap Closers (added 2026-06-14)
 *
 * After hardening the v0 theme, mama's view still had a handful
 * of Frappe defaults bleeding through. This block is targeted
 * at those specific surfaces so the theme reads as "PulseRx
 * end-to-end" not "PulseRx skin + Frappe internals."
 * ============================================================ */

/* ---- 8a. Page head (the title strip above every page) ----
 * Frappe's .page-head sits between navbar + content with a plain
 * white background. Drop a Triton-tinted band so the eye reads it
 * as part of the brand shell, not a Frappe panel.
 */
.page-head,
.page-head-content,
.page-head .page-title {
    background: linear-gradient(180deg, #ffffff 0%, var(--pulserx-page-bg) 100%) !important;
    border-bottom: 1px solid var(--pulserx-line);
}

.page-head .title-text,
.page-head .page-title h3,
.page-head .page-title h4 {
    color: var(--pulserx-primary) !important;
    font-weight: 700 !important;
}

/* Breadcrumbs - Frappe greys these out; make them readable */
.breadcrumb-container .breadcrumb a,
.breadcrumb a {
    color: var(--pulserx-primary) !important;
    font-weight: 500;
}

.breadcrumb-container .breadcrumb .active,
.breadcrumb .active {
    color: var(--pulserx-muted) !important;
}

/* ---- 8b. Workspace shortcut tiles ----
 * The big colored chips at the top of every workspace (GM
 * Dashboard / Partial-Stock Indent / BMR / BPR). Frappe paints
 * these by passing a `color` prop that maps to its own palette.
 * We hijack the base styles so any color choice still pulls
 * from the Triton accent palette.
 */
.widget.shortcut-widget-box,
.widget-group .widget.shortcut-widget-box {
    background: #ffffff !important;
    border: 1px solid var(--pulserx-line) !important;
    border-left: 4px solid var(--pulserx-primary) !important;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(20, 61, 97, 0.08);
    transition: all 0.15s ease;
}

.widget.shortcut-widget-box:hover {
    border-left-color: var(--pulserx-accent-gold) !important;
    box-shadow: 0 3px 10px rgba(20, 61, 97, 0.14);
    transform: translateY(-1px);
}

.widget.shortcut-widget-box .widget-title,
.widget.shortcut-widget-box .shortcut-title,
.widget.shortcut-widget-box .widget-head .widget-title {
    color: var(--pulserx-primary) !important;
    font-weight: 700 !important;
    font-size: 0.98rem !important;
}

.widget.shortcut-widget-box .indicator-pill,
.widget.shortcut-widget-box .stat-label {
    color: var(--pulserx-muted) !important;
}

/* ---- 8c. Number cards / KPI tiles ----
 * Frappe's number-card widget shows the current value in its own
 * blue. Switch to Triton blue + gold accent for the trend arrow.
 */
.widget.number-widget-box,
.number-card {
    background: #ffffff !important;
    border: 1px solid var(--pulserx-line) !important;
    border-top: 3px solid var(--pulserx-primary) !important;
    border-radius: 6px;
}

.widget.number-widget-box .widget-title,
.number-card .widget-title,
.number-card-title {
    color: var(--pulserx-primary) !important;
    font-weight: 700 !important;
}

.widget.number-widget-box .number,
.number-card .number,
.number-card-percentage {
    color: var(--pulserx-primary-dark) !important;
    font-weight: 700;
}

.number-card .indicator-pill.green,
.number-card .delta.positive {
    color: #1f6e3a !important;
}

.number-card .indicator-pill.red,
.number-card .delta.negative {
    color: #a3251c !important;
}

/* ---- 8d. List view rows + selection ----
 * Stock Entry / Item / Supplier list pages. Frappe highlights the
 * checked row in its own light-blue; replace with Triton tint.
 */
.list-row:hover,
.list-row-container:hover {
    background: var(--pulserx-primary-tint) !important;
}

.list-row.level.selected,
.list-row-container.selected,
.list-row-checkbox:checked + .list-row {
    background: rgba(26, 77, 122, 0.08) !important;
    border-left: 3px solid var(--pulserx-primary) !important;
}

.list-row .level-left .ellipsis,
.list-row .level-item .ellipsis {
    color: var(--pulserx-ink);
    font-weight: 500;
}

/* List sidebar filter labels */
.list-sidebar .sidebar-label {
    color: var(--pulserx-primary) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

/* ---- 8e. Form save toolbar (sticky top action bar) ----
 * When you have unsaved changes Frappe shows a yellow strip with
 * Save / Discard buttons. Make the strip read as PulseRx.
 */
.form-message,
.form-message-text,
.frappe-form-footer,
.std-form-layout .form-message {
    background: var(--pulserx-accent-cream) !important;
    border-left: 4px solid var(--pulserx-accent-gold) !important;
    color: var(--pulserx-primary-dark) !important;
    font-weight: 600;
}

/* The "you have unsaved changes" Yellow strip Frappe injects */
.unsaved {
    background: var(--pulserx-accent-cream) !important;
    border-bottom: 2px solid var(--pulserx-accent-gold) !important;
}

/* ---- 8f. Indicator pills (status badges) ----
 * Frappe paints state badges (Draft / Submitted / Cancelled) in
 * its palette. Keep the semantic colors but bump contrast +
 * tighten the type so they read at a glance.
 */
.indicator-pill,
.indicator,
.indicator-pill-round {
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    padding: 3px 9px !important;
    border-radius: 12px;
}

.indicator-pill.blue,
.indicator.blue {
    background: var(--pulserx-primary-tint) !important;
    color: var(--pulserx-primary-dark) !important;
}

.indicator-pill.gray,
.indicator.gray,
.indicator-pill.grey,
.indicator.grey {
    background: #e8eaed !important;
    color: #475569 !important;
}

/* ---- 8g. Onboarding tiles + banners ----
 * Frappe injects "Welcome to ERPNext" onboarding strips with stock
 * branding when a doctype is new to the user. Drop the ERPNext
 * accents in favor of PulseRx.
 */
.onboarding-banner,
.onboarding-step,
.onboarding-success {
    background: var(--pulserx-primary-tint) !important;
    border-left: 4px solid var(--pulserx-primary) !important;
    color: var(--pulserx-ink) !important;
}

.onboarding-step .step-title,
.onboarding-banner .banner-title {
    color: var(--pulserx-primary) !important;
    font-weight: 700;
}

/* ---- 8h. Search bar / Awesome Bar ----
 * Mama loved Ctrl+K. Make it brand-consistent so the panel that
 * pops down reads as PulseRx, not Frappe.
 */
.search-bar input,
.awesomplete input,
.awesomeplete input,
.global-search-input {
    border: 1.5px solid var(--pulserx-line) !important;
    border-radius: 6px;
    padding-left: 36px !important;
    background: #ffffff;
}

.search-bar input:focus,
.global-search-input:focus {
    border-color: var(--pulserx-primary) !important;
    box-shadow: 0 0 0 3px rgba(26, 77, 122, 0.12) !important;
}

/* Search dropdown panel */
.awesomplete ul,
.awesomeplete ul,
.search-dialog .results-area {
    border: 1px solid var(--pulserx-line) !important;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(20, 61, 97, 0.18) !important;
}

.awesomplete ul li:hover,
.awesomplete ul li[aria-selected="true"] {
    background: var(--pulserx-primary-tint) !important;
    color: var(--pulserx-primary-dark) !important;
}

/* ---- 8i. App switcher dropdown (the navbar app-picker) ----
 * Mama is going to see PulseRx + ERPNext + Frappe Framework in
 * this menu. Style the row so PulseRx visually wins.
 */
.navbar .dropdown-menu .app-switcher-item,
.navbar .dropdown-menu .dropdown-item {
    padding: 9px 14px;
    font-weight: 500;
}

.navbar .dropdown-menu .app-switcher-item:hover,
.navbar .dropdown-menu .dropdown-item:hover {
    background: var(--pulserx-primary-tint) !important;
    color: var(--pulserx-primary-dark) !important;
}

/* The currently-active app row */
.navbar .dropdown-menu .app-switcher-item.active,
.navbar .dropdown-menu .dropdown-item.active {
    background: var(--pulserx-primary) !important;
    color: #ffffff !important;
}

/* ---- 8j. Dialogs / modals (popups Frappe injects) ---- */
.modal-content {
    border: 1px solid var(--pulserx-line) !important;
    border-top: 4px solid var(--pulserx-primary) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(20, 61, 97, 0.18) !important;
}

.modal-header .close,
.modal-header button.close {
    color: var(--pulserx-muted) !important;
    opacity: 0.7;
}

.modal-header .close:hover {
    color: var(--pulserx-primary) !important;
    opacity: 1;
}

/* ---- 8k. Workspace section card headers ----
 * The "Masters" / "Transactions" / "Reports" group headings inside
 * a workspace - Frappe makes these dim grey; bump to readable.
 */
.workspace-content .widget-group-head,
.workspace-content .widget-group-title,
.workspace-content .ce-header,
.workspace-content h2,
.workspace-content h3,
.workspace-content h4 {
    color: var(--pulserx-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    border-bottom: 2px solid var(--pulserx-primary-tint);
    padding-bottom: 6px;
    margin-top: 18px;
    margin-bottom: 12px;
}

/* Card section in workspace (the Masters / Transactions card boxes) */
.workspace-content .links-widget-box,
.workspace-content .widget-body .link-item {
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.12s ease;
}

.workspace-content .widget-body .link-item:hover {
    background: var(--pulserx-primary-tint);
    color: var(--pulserx-primary-dark);
}

/* ---- 8l. Bench rebuild loading bar at top of page ----
 * Frappe shows a thin blue progress line during XHR; recolor. */
.progress-bar,
#progress-bar,
.frappe-progress {
    background: var(--pulserx-accent-gold) !important;
}

/* ---- 8m. Submit / Cancel docstatus banner ----
 * After submit, Frappe shows a green "Submitted" pill in the head
 * area; after cancel, a red. Tone both to PulseRx semantic palette.
 */
.indicator-pill.green,
.indicator.green {
    background: #d6efdc !important;
    color: #1f6e3a !important;
}

.indicator-pill.red,
.indicator.red {
    background: #fbe2e0 !important;
    color: #a3251c !important;
}

.indicator-pill.orange,
.indicator.orange {
    background: var(--pulserx-accent-cream) !important;
    color: #8a5a00 !important;
}

/* ============================================================
 * 9. Sidebar user footer (added 2026-06-15)
 *
 * Frappe drops a tiny avatar + small-text name + email at the
 * bottom of the sidebar. Mama's reaction: the identity strip is
 * hard to read, and there's no visible Logout (click goes to
 * user profile, which makes Logout 2 clicks).
 *
 * Fix: style the existing markup as a Triton-branded identity
 * card with bigger avatar, bolder name, more breathing room.
 * A separate small JS file (pulserx_sidebar_footer.js) injects
 * a clickable Logout pill next to the identity card.
 *
 * Markup we target (Frappe template):
 *   .nav-item.dropdown.dropdown-navbar-user
 *     a.sidebar-user-button
 *       div          (avatar wrapper)
 *       div.avatar-name-email
 *         span (full name)
 *         span.text-secondary (email)
 * ============================================================ */

.dropdown-navbar-user {
    margin: 12px 8px !important;
    border-top: 1px solid var(--pulserx-line);
    padding-top: 14px !important;
}

.sidebar-user-button {
    background: linear-gradient(135deg,
                  #ffffff 0%,
                  var(--pulserx-primary-tint) 100%) !important;
    border: 1px solid var(--pulserx-primary-tint) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    min-height: 56px !important;
    box-shadow: 0 2px 6px rgba(20, 61, 97, 0.08);
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.sidebar-user-button:hover {
    background: linear-gradient(135deg,
                  var(--pulserx-primary-tint) 0%,
                  #ffffff 100%) !important;
    border-color: var(--pulserx-primary) !important;
    box-shadow: 0 4px 12px rgba(20, 61, 97, 0.18);
    transform: translateY(-1px);
}

/* Avatar - bigger circle in Triton blue */
.sidebar-user-button .avatar,
.sidebar-user-button > div:first-child .avatar,
.sidebar-user-button > div:first-child {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: var(--pulserx-primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.0rem !important;
    box-shadow: 0 2px 5px rgba(20, 61, 97, 0.25);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.sidebar-user-button .avatar-frame {
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 2px var(--pulserx-primary);
}

/* Name + email block - clearer hierarchy */
.sidebar-user-button .avatar-name-email {
    margin-left: 10px !important;
    line-height: 1.25;
}

.sidebar-user-button .avatar-name-email span:first-child {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--pulserx-primary-dark) !important;
    letter-spacing: 0.1px;
}

.sidebar-user-button .avatar-name-email span:last-child {
    font-size: 0.78rem !important;
    color: var(--pulserx-muted) !important;
    margin-top: 1px !important;
    opacity: 0.85;
}

/* Logout pill - injected via pulserx_sidebar_footer.js as a sibling
 * of the .sidebar-user-button. The button gets class .pulserx-logout.
 * Tight, ~32px tall pill so it reads as secondary to the identity card. */
.pulserx-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 32px !important;
    max-height: 32px !important;
    margin-top: 6px !important;
    padding: 0 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--pulserx-line) !important;
    border-radius: 6px !important;
    color: var(--pulserx-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    overflow: hidden !important;
}

.pulserx-logout:hover {
    background: var(--pulserx-accent-cream) !important;
    border-color: var(--pulserx-accent-gold) !important;
    color: #8a5a00 !important;
    box-shadow: 0 1px 4px rgba(212, 160, 23, 0.22) !important;
}

/* Hard-constrain SVG dimensions - the default SVG with viewBox but no
 * width/height attrs expands to 300x150 in Chrome / Edge. */
.pulserx-logout svg,
.pulserx-logout .feather {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex-shrink: 0 !important;
    stroke-width: 2.2 !important;
}

.pulserx-logout span {
    font-size: 0.82rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* End of PulseRx theme */