/* ============================================================
   ERPNEXT BEAUTHEME v3.0
   Microsoft Visual Studio Blue Design System
   Primary  : #0078D7  |  Orange Accent : #E8890C
   Rail BG  : #2D3D58  |  Navbar : #1E2D45
   Font     : Segoe UI / Inter
   Author   : Safdar Ali
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&display=swap');

/* ============================================================
   §1  LIGHT THEME — CSS VARIABLE OVERRIDES
   ============================================================ */
:root,
[data-theme="light"] {
    --font-stack: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    /* VS Interactive Blue — Windows/VS primary action color */
    --primary: #0078D7;
    --primary-color: #0078D7;
    --btn-primary: #0078D7;
    --brand-color: #0078D7;
    --border-primary: #0078D7;
    --progress-bar-bg: #0078D7;
    --checkbox-gradient: linear-gradient(180deg, #0078D7 -124.51%, #005A9E 100%);
    --highlight-shadow: 1px 1px 10px rgba(0,120,215,0.18), 0px 0px 4px rgba(0,120,215,0.38);
    --focus-default: 0 0 0 3px rgba(0,120,215,0.18);

    /* VS workspace background — cool light blue-grey */
    --bg-color: #ECF0F6;
    --fg-color: #FFFFFF;
    --card-bg: #FFFFFF;
    --modal-bg: #FFFFFF;
    --popover-bg: #FFFFFF;
    --toast-bg: #FFFFFF;
    --subtle-accent: #E4EBF5;
    --subtle-fg: #D6E0EE;
    --highlight-color: #E4EBF5;
    --yellow-highlight-color: #FFF8E6;

    /* VS navy topbar */
    --navbar-bg: linear-gradient(90deg, #1E2D45 0%, #253550 60%, #1E2D45 100%);
    --navbar-height: 48px;

    /* Inputs */
    --control-bg: #F4F7FB;
    --control-bg-on-gray: #E4EBF5;
    --awesomebar-focus-bg: #FFFFFF;
    --input-disabled-bg: #EEF2F8;

    /* VS-style borders */
    --border-color: #C5CDD8;
    --dark-border-color: #A8B5C2;
    --table-border-color: #C5CDD8;
    --btn-group-border-color: #A8B5C2;

    /* Shadows */
    --card-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
    --btn-shadow: 0 1px 3px rgba(0,0,0,0.09);
    --modal-shadow: 0 20px 60px rgba(0,0,0,0.20);
    --shadow-xs: 0 1px 4px rgba(0,0,0,0.07);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.09);
    --shadow-base: 0 2px 8px rgba(0,0,0,0.09);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.11);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.13);
    --shadow-2xl: 0 16px 48px rgba(0,0,0,0.17);

    /* VS text — dark navy */
    --text-color: #1B2838;
    --heading-color: #0F1D2C;
    --text-muted: #5A6A7E;
    --text-light: #8A9BB0;
    --disabled-text-color: #9AAABB;

    /* Sidebar */
    --sidebar-select-color: rgba(0,120,215,0.08);

    /* Buttons */
    --btn-default-bg: #E8EDF5;
    --btn-default-hover-bg: #D6E0EE;
    --btn-height: 30px;

    /* Date picker */
    --date-active-bg: #0078D7;
    --date-active-text: #FFFFFF;
    --date-range-bg: rgba(0,120,215,0.08);

    /* Scrollbar */
    --scrollbar-thumb-color: #BCCADB;
    --scrollbar-track-color: #E4EBF5;

    /* Checkbox */
    --checkbox-focus-shadow: 0 0 0 3px rgba(0,120,215,0.18);
    --checkbox-size: 15px;
    --switch-bg: #A8B5C2;

    /* Nav rail width */
    --bt-rail-w: 52px;
    /* VS Orange — active indicator accent */
    --vs-orange: #E8890C;
    /* VS Rail BG */
    --vs-rail-bg: #2D3D58;
    --vs-rail-header-bg: #253348;
}

/* ============================================================
   §2  DARK THEME — CSS VARIABLE OVERRIDES
   ============================================================ */
[data-theme="dark"] {
    --primary: #60AAEF;
    --primary-color: #60AAEF;
    --btn-primary: #0078D7;
    --brand-color: #60AAEF;
    --border-primary: #60AAEF;
    --progress-bar-bg: #0078D7;
    --highlight-shadow: 1px 1px 10px rgba(0,120,215,0.3), 0px 0px 6px rgba(96,170,239,0.4);
    --focus-default: 0 0 0 3px rgba(0,120,215,0.28);
    --checkbox-gradient: linear-gradient(180deg, #60AAEF -124.51%, #0078D7 100%);
    --checkbox-focus-shadow: 0 0 0 3px rgba(0,120,215,0.28);
    --navbar-bg: linear-gradient(90deg, #141E2E 0%, #1A2840 60%, #141E2E 100%);
    --navbar-height: 48px;
    --sidebar-select-color: rgba(0,120,215,0.16);
    --date-active-bg: #0078D7;
    --date-active-text: #ffffff;
    --btn-default-bg: rgba(255,255,255,0.07);
    --btn-default-hover-bg: rgba(255,255,255,0.12);
    --bt-rail-w: 52px;
    --vs-orange: #F0A030;
    --vs-rail-bg: #1E2D42;
    --vs-rail-header-bg: #182438;
}

/* ============================================================
   §3  GLOBAL TYPOGRAPHY & BASE
   ============================================================ */
/* Apply custom font to all text elements.
   Exclude <i> so Font Awesome 4.x (which renders via font-family on the <i> element
   itself, then inherits into ::before) continues to work correctly. */
*:not(i) {
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
    background-color: var(--bg-color) !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.02em !important;
}
a { color: #0078D7; }
a:hover { color: #005A9E; text-decoration: none; }
[data-theme="dark"] a { color: #60AAEF; }

/* ============================================================
   §4  SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track-color); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ============================================================
   §5  NAVBAR — sticky + deep navy gradient
   ============================================================ */
/* Navbar is fixed and spans the full viewport. left+right handles width — no 100vw needed
   (100vw includes scrollbar width on Windows and causes right-edge overflow).
   z-index 1500 sits above modals (1140), freeze (1055), and all page content. */
.navbar {
    background: linear-gradient(90deg, #2A3F62 0%, #324B75 60%, #2A3F62 100%) !important;
    border-bottom: 2px solid #0078D7 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.28) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1500 !important;
    padding: 0 15px !important;
}
/* Content inside navbar gets 18px breathing room; background stays edge-to-edge */
.navbar > .container,
.navbar > .container-fluid,
.navbar .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Compensate for the fixed navbar — push .main-section content down by navbar height
   so the first page element is not hidden behind the fixed bar */
.main-section {
    padding-top: var(--navbar-height, 48px) !important;
}
[data-theme="dark"] .navbar {
    background: linear-gradient(90deg, #1E2D45 0%, #253550 60%, #1E2D45 100%) !important;
    border-bottom-color: #0078D7 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
}

/* Navbar text — all white */
.navbar,
.navbar *:not(.dropdown-menu):not(.dropdown-menu *):not(.awesomplete ul):not(.awesomplete ul *):not(.search-bar input) {
    color: #ffffff !important;
}
/* Uniform height for all navbar controls and icons */
.navbar .nav-link,
.navbar .nav-link:focus,
.navbar .navbar-brand,
.navbar .btn-reset,
.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .nav-item > .nav-link {
    color: #ffffff !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: color 0.12s ease, background 0.12s ease;
}
.navbar-home span {
    color: #ffffff !important;
    transition: color 0.12s ease, background 0.12s ease;
}
.navbar .avatar.avatar-medium {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
}
.navbar .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 6px;
}

/* SVG icons — uniform 20px to match home logo size */
.navbar .nav-link .icon,
.navbar .nav-link .es-icon,
.navbar .btn-reset .icon,
.navbar .btn-reset .es-icon {
    width: 20px !important;
    height: 20px !important;
}
/* White icons only on the navbar bar itself, not inside dropdown menus */
.navbar .nav-link .icon use,
.navbar .nav-link .icon svg use,
.navbar .nav-link .es-icon use,
.navbar .navbar-brand .icon use,
.navbar .navbar-brand .es-icon use {
    stroke: #ffffff !important;
}
.navbar .nav-link:hover .icon use { stroke: #fff !important; }

/* Circular icon buttons (notification, chat) — match control board button style */
.navbar .dropdown-notifications .nav-link,
.navbar .dropdown-message .nav-link,
.navbar .notifications-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 0 !important;
}
.navbar .dropdown-notifications .nav-link:hover,
.navbar .dropdown-message .nav-link:hover,
.navbar .notifications-icon:hover {
    background: rgba(255,255,255,0.18) !important;
    border-color: rgba(255,255,255,0.30) !important;
}
/* Help menu — completely hidden */
.navbar .dropdown-help {
    display: none !important;
}

/* Home brand — container sized to icon size, image clipped inside */
.navbar .navbar-brand.navbar-home {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.navbar .navbar-brand.navbar-home img,
.navbar .navbar-brand.navbar-home .app-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

.navbar .badge-pill { background: #e63757 !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; }

/* Search bar */
.navbar .search-bar { max-width: 320px; }

/* Navbar back button (injected by JS) */
#bt-back-btn {
    background: rgba(255,255,255,0.14) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    color: rgba(255,255,255,0.90) !important;
    transition: background 0.15s ease !important;
    padding: 0 !important;
}
#bt-back-btn:hover { background: rgba(255,255,255,0.26) !important; }
#bt-back-btn svg { display: block !important; }
.navbar .search-bar .awesomplete input,
.navbar .search-bar input[type="text"] {
    background: rgba(255,255,255,0.90) !important;
    border: 1px solid rgba(0,0,0,0.16) !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    height: 32px !important;
    padding-left: 36px !important;
    transition: all 0.15s ease;
}
.navbar .search-bar input::placeholder { color: rgba(0,0,0,0.45) !important; }
.navbar .search-bar input:focus {
    background: #FFFFFF !important;
    border-color: rgba(0,0,0,0.30) !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
}
.navbar .search-bar input:focus::placeholder { color: rgba(0,0,0,0.35) !important; }
.navbar .search-icon svg use, .navbar .search-icon use { stroke: #1a1a1a !important; }

/* ── Navbar dropdowns (Help & Administrator) ─────────────── */
.navbar .dropdown-menu {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
    padding: 5px !important;
    margin-top: 6px !important;
    min-width: 180px !important;
    z-index: 1501 !important;
}

/* Items */
.navbar .dropdown-item,
.navbar .dropdown-item.btn-reset,
.navbar #toolbar-user .dropdown-item,
.navbar #toolbar-help .dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    gap: 8px !important;
    color: var(--text-color) !important;
    background: transparent !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    transition: background 0.1s ease !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--subtle-fg) !important;
    color: var(--heading-color) !important;
    text-decoration: none !important;
}
.navbar .dropdown-item:active {
    background: var(--bg-blue) !important;
    color: var(--blue) !important;
}

/* Restore icon colors inside dropdowns — override the white-stroke rule */
.navbar .dropdown-menu .icon use,
.navbar .dropdown-menu .icon svg use,
.navbar .dropdown-menu .es-icon use {
    stroke: var(--text-muted) !important;
}
.navbar .dropdown-menu .dropdown-item:hover .icon use,
.navbar .dropdown-menu .dropdown-item:hover .es-icon use {
    stroke: var(--heading-color) !important;
}

/* Divider */
.navbar .dropdown-divider,
.navbar .dropdown-menu .divider {
    border-color: var(--border-color) !important;
    margin: 4px 6px !important;
    opacity: 1 !important;
}

/* Section header (e.g. "Apps" label) */
.navbar .dropdown-header {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    padding: 8px 12px 3px !important;
    width: 100% !important;
}

/* User info block at top of Administrator dropdown */
.navbar .dropdown-navbar-user .dropdown-menu .help-links,
.navbar #toolbar-user .help-links {
    padding: 4px 2px !important;
}

/* Menu item icons injected by JS */
.navbar .dropdown-item .bt-menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}
.navbar .dropdown-item .bt-menu-icon .icon,
.navbar .dropdown-item .bt-menu-icon .es-icon {
    width: 16px !important;
    height: 16px !important;
}
.navbar .dropdown-item .bt-menu-icon .icon use,
.navbar .dropdown-item .bt-menu-icon .es-icon use {
    stroke: var(--text-muted) !important;
}
.navbar .dropdown-item:hover .bt-menu-icon .icon use,
.navbar .dropdown-item:hover .bt-menu-icon .es-icon use {
    stroke: var(--heading-color) !important;
}

.navbar .vertical-bar { border-color: rgba(255,255,255,0.15) !important; }

/* ── Page menu (.menu-btn-group) item icons ── */
/* ── Page dropdown items: View / Create / Actions / Preview (global) ── */
.menu-btn-group .dropdown-item,
.page-head .dropdown-menu .dropdown-item {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
}

.menu-btn-group .dropdown-item .bt-pm-icon,
.page-head .dropdown-menu .dropdown-item .bt-pm-icon {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           16px !important;
    height:          16px !important;
    flex-shrink:     0 !important;
    color:           var(--text-muted) !important;
}

.menu-btn-group .dropdown-item .bt-pm-icon .es-icon,
.menu-btn-group .dropdown-item .bt-pm-icon .icon,
.page-head .dropdown-menu .dropdown-item .bt-pm-icon .es-icon,
.page-head .dropdown-menu .dropdown-item .bt-pm-icon .icon {
    width:  16px !important;
    height: 16px !important;
}

.menu-btn-group .dropdown-item .bt-pm-icon .es-icon use,
.menu-btn-group .dropdown-item .bt-pm-icon .icon use,
.page-head .dropdown-menu .dropdown-item .bt-pm-icon .es-icon use,
.page-head .dropdown-menu .dropdown-item .bt-pm-icon .icon use {
    stroke: var(--text-muted) !important;
}

.menu-btn-group .dropdown-item:hover .bt-pm-icon .es-icon use,
.menu-btn-group .dropdown-item:hover .bt-pm-icon .icon use,
.page-head .dropdown-menu .dropdown-item:hover .bt-pm-icon .es-icon use,
.page-head .dropdown-menu .dropdown-item:hover .bt-pm-icon .icon use {
    stroke: var(--text-color) !important;
}

/* ============================================================
   §6  FULL WIDTH — only when body.full-width or bt-fullwidth-on
   (controlled by the Full Width toggle button in the nav rail)
   ============================================================ */
body.full-width .container,
body.bt-fullwidth-on .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.page-container,
.page-body {
    width: 100% !important;
    max-width: 100% !important;
}

/* Page-head ALWAYS keeps 15px horizontal padding so the Bootstrap row's
   -15px negative margin doesn't bleed outside the viewport and clip buttons */
.page-head .container,
.page-head-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* In full-width mode: page-head slightly inset from edges for breathing room */
body.full-width .page-head,
body.bt-fullwidth-on .page-head {
    margin-left: 10px !important;
    margin-right: 10px !important;
    border-radius: 0 0 8px 8px !important;
}

/* ============================================================
   §7  PERSISTENT LEFT NAV RAIL
   Always visible on ALL pages — forms, lists, reports, workspace.
   ============================================================ */

/* ── VS SLATE-BLUE RAIL — dark background, white wireframe icons ── */
#bt-sidenav {
    position: fixed;
    top: var(--navbar-height, 48px);
    left: 0;
    bottom: 0;
    width: var(--bt-rail-w, 52px);
    z-index: 150;
    background: #2D3D58;
    border-right: 1px solid #1E2D45;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 16px rgba(0,0,0,0.28);
}
body.bt-sidenav-expanded #bt-sidenav { width: 240px; }
[data-theme="dark"] #bt-sidenav {
    background: #1E2D42;
    border-right-color: #141E2E;
    box-shadow: 2px 0 16px rgba(0,0,0,0.5);
}

/* Rail header */
.bt-rail-header {
    padding: 6px 6px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #253348;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.bt-sidenav-expanded .bt-rail-header { justify-content: space-between; padding: 6px 10px 4px; }
[data-theme="dark"] .bt-rail-header { background: #182438; }

/* Hamburger toggle */
.bt-rail-toggle {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}
.bt-rail-toggle:hover {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
}
/* Toggle icon is always white on dark rail */
.bt-rail-toggle svg { stroke: rgba(255,255,255,0.8); }
.bt-rail-toggle:hover svg { stroke: #ffffff; }

/* Brand label in expanded mode */
.bt-rail-brand {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.bt-sidenav-expanded .bt-rail-brand { opacity: 1; }

/* Scrollable item list */
.bt-rail-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 5px;
    scrollbar-width: none;
}
.bt-rail-items::-webkit-scrollbar { width: 0; }

/* ── NAV ITEM — white text on dark rail ── */
.bt-rail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 5px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.78);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    margin-bottom: 2px;
    min-height: 30px;
    position: relative;
}
.bt-rail-item:hover {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    text-decoration: none !important;
}
/* VS Orange active indicator — right-edge bar */
.bt-rail-item.active {
    background: rgba(232,137,12,0.18);
    color: #ffffff;
    font-weight: 600;
    border-right: 3px solid #E8890C;
}

/* ── ICON — white wireframe on dark bg, orange when active ── */
.bt-rail-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    transition: background 0.15s ease, transform 0.12s ease;
    /* currentColor cascades into SVG symbols via <use> */
    color: rgba(255,255,255,0.80) !important;
}
/* Target every possible SVG element Frappe generates */
.bt-rail-icon .icon,
.bt-rail-icon svg,
.bt-rail-icon .es-icon {
    color: rgba(255,255,255,0.80) !important;
    stroke: rgba(255,255,255,0.80) !important;
    fill: none !important;
}
/* <use> element and Frappe's .use-text-color class */
.bt-rail-icon .icon use,
.bt-rail-icon svg use,
.bt-rail-icon .es-icon use,
.bt-rail-icon .use-text-color {
    stroke: rgba(255,255,255,0.80) !important;
    fill: none !important;
    color: rgba(255,255,255,0.80) !important;
}
/* Inline SVG paths (fallback icons & header buttons) */
#bt-sidenav .bt-rail-icon path,
#bt-sidenav .bt-rail-icon line,
#bt-sidenav .bt-rail-icon polyline,
#bt-sidenav .bt-rail-icon circle,
#bt-sidenav .bt-rail-icon rect,
#bt-sidenav .bt-rail-icon polygon {
    stroke: rgba(255,255,255,0.80) !important;
    fill: none !important;
}
/* Nuclear filter fallback for Frappe sprite icons (.icon = the <svg> from frappe.utils.icon()) */
#bt-sidenav .bt-rail-icon .icon {
    filter: brightness(0) invert(1) opacity(0.80) !important;
}

/* Hover — brighter white */
.bt-rail-item:hover .bt-rail-icon {
    background: rgba(255,255,255,0.15);
    color: #ffffff !important;
    transform: scale(1.05);
}
.bt-rail-item:hover .bt-rail-icon .icon,
.bt-rail-item:hover .bt-rail-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.bt-rail-item:hover .bt-rail-icon use,
.bt-rail-item:hover .bt-rail-icon .use-text-color {
    stroke: #ffffff !important;
    color: #ffffff !important;
}
#bt-sidenav .bt-rail-item:hover .bt-rail-icon path,
#bt-sidenav .bt-rail-item:hover .bt-rail-icon line,
#bt-sidenav .bt-rail-item:hover .bt-rail-icon polyline,
#bt-sidenav .bt-rail-item:hover .bt-rail-icon circle,
#bt-sidenav .bt-rail-item:hover .bt-rail-icon rect {
    stroke: #ffffff !important;
}
#bt-sidenav .bt-rail-item:hover .bt-rail-icon .icon {
    filter: brightness(0) invert(1) !important;
}

/* Active — orange icon on orange-tinted bg */
.bt-rail-item.active .bt-rail-icon {
    background: rgba(232,137,12,0.25);
    color: #E8890C !important;
}
.bt-rail-item.active .bt-rail-icon .icon,
.bt-rail-item.active .bt-rail-icon svg {
    color: #E8890C !important;
    stroke: #E8890C !important;
}
.bt-rail-item.active .bt-rail-icon use,
.bt-rail-item.active .bt-rail-icon .use-text-color {
    stroke: #E8890C !important;
    color: #E8890C !important;
}
#bt-sidenav .bt-rail-item.active .bt-rail-icon path,
#bt-sidenav .bt-rail-item.active .bt-rail-icon line,
#bt-sidenav .bt-rail-item.active .bt-rail-icon polyline,
#bt-sidenav .bt-rail-item.active .bt-rail-icon circle,
#bt-sidenav .bt-rail-item.active .bt-rail-icon rect {
    stroke: #E8890C !important;
}
/* Filter to orange for active Frappe sprite icons */
#bt-sidenav .bt-rail-item.active .bt-rail-icon .icon {
    filter: brightness(0) saturate(100%) invert(58%) sepia(72%) saturate(874%) hue-rotate(4deg) brightness(104%) !important;
}

/* Control Board navbar button */
#bt-control-board-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    margin-left: 8px !important;
    background: linear-gradient(135deg, #2A3F62, #324B75) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
    transition: box-shadow 0.15s ease, filter 0.15s ease !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
#bt-control-board-btn:hover {
    color: #ffffff !important;
    filter: brightness(1.2) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
    text-decoration: none !important;
}
#bt-control-board-btn svg { display: block !important; }

/* ── Admin Area Button (pw_home only, authorized users only) ── */
#bt-admin-area-btn {
    display: none;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 12px 0 10px !important;
    margin-left: 8px !important;
    background: linear-gradient(135deg, #1e4a2e, #276339) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.28) !important;
    transition: filter 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
}
#bt-admin-area-btn.visible {
    display: inline-flex !important;
}
#bt-admin-area-btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    filter: brightness(1.18) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.40) !important;
}
#bt-admin-area-btn svg { display: block !important; flex-shrink: 0 !important; }
[data-theme="dark"] #bt-admin-area-btn {
    background: linear-gradient(135deg, #163521, #1e4a2e) !important;
    border-color: rgba(255,255,255,0.16) !important;
}

/* Home + Fullwidth footer buttons */
.bt-home-btn { color: rgba(255,255,255,0.75); }
.bt-home-btn:hover { color: #ffffff; }
#bt-sidenav .bt-home-btn svg { color: rgba(255,255,255,0.75); stroke: rgba(255,255,255,0.75); }
#bt-sidenav .bt-home-btn:hover svg { color: #ffffff; stroke: #ffffff; }
#bt-sidenav .bt-home-btn path,
#bt-sidenav .bt-home-btn polyline { stroke: rgba(255,255,255,0.75) !important; }
#bt-sidenav .bt-home-btn:hover path,
#bt-sidenav .bt-home-btn:hover polyline { stroke: #ffffff !important; }

/* Fullwidth footer button */
.bt-fullwidth-btn { color: rgba(255,255,255,0.75); }
.bt-fullwidth-btn:hover { color: #ffffff; }
#bt-sidenav .bt-fullwidth-btn svg { color: rgba(255,255,255,0.75) !important; stroke: rgba(255,255,255,0.75) !important; }
#bt-sidenav .bt-fullwidth-btn:hover svg { color: #ffffff !important; stroke: #ffffff !important; }
#bt-sidenav .bt-fullwidth-btn path,
#bt-sidenav .bt-fullwidth-btn polyline { stroke: rgba(255,255,255,0.75) !important; }
#bt-sidenav .bt-fullwidth-btn:hover path,
#bt-sidenav .bt-fullwidth-btn:hover polyline { stroke: #ffffff !important; }
.bt-fw-icon { color: rgba(255,255,255,0.75) !important; }

/* Text label — hidden when collapsed */
.bt-rail-label {
    font-size: 12.5px;
    font-weight: 700;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.18s ease, width 0.22s ease;
    white-space: nowrap;
    color: inherit;
}
body.bt-sidenav-expanded .bt-rail-label { opacity: 1; width: auto; }

/* Section separator label */
.bt-rail-section-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.35);
    padding: 8px 10px 4px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0;
    height: 0;
    transition: opacity 0.15s ease, height 0.22s ease;
}
body.bt-sidenav-expanded .bt-rail-section-label { opacity: 1; height: auto; }

/* ── NAV SEARCH BOX ── */
.bt-rail-search {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s ease;
    min-height: 38px;
    position: relative;
    background: rgba(180, 120, 50, 0.22);
}
.bt-rail-search:hover {
    background: rgba(180, 120, 50, 0.32);
}

/* Search icon — always visible, acts as button in collapsed mode */
.bt-search-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    border-radius: 6px;
    transition: color 0.12s ease;
}
.bt-rail-search:hover .bt-search-icon { color: rgba(255,255,255,0.85); }

/* Search icon inherits white stroke */
.bt-search-icon svg path,
.bt-search-icon svg circle,
.bt-search-icon svg line {
    stroke: rgba(255,255,255,0.55) !important;
}
.bt-rail-search:hover .bt-search-icon svg path,
.bt-rail-search:hover .bt-search-icon svg circle,
.bt-rail-search:hover .bt-search-icon svg line {
    stroke: rgba(255,255,255,0.85) !important;
}

/* Input — hidden when rail is collapsed */
.bt-search-input {
    flex: 1;
    height: 26px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.88);
    font-size: 12.5px;
    font-weight: 400;
    padding: 0 2px;
    outline: none;
    box-shadow: none;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    font-family: inherit;
}
body.bt-sidenav-expanded .bt-search-input {
    width: auto;
    opacity: 1;
    pointer-events: auto;
    cursor: text;
}
.bt-search-input::placeholder { color: rgba(255,255,255,0.32); }
.bt-search-input:focus { outline: none; box-shadow: none; }

/* Clear (×) button */
.bt-search-clear {
    display: none;
    width: 18px;
    height: 18px;
    border: none;
    background: rgba(255,255,255,0.14);
    border-radius: 50%;
    color: rgba(255,255,255,0.70);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s ease;
}
.bt-search-clear:hover { background: rgba(255,255,255,0.25); color: #fff; }

/* Empty state message */
.bt-search-empty {
    display: none;
    font-size: 11.5px;
    color: rgba(255,255,255,0.38);
    text-align: center;
    padding: 16px 8px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Footer */
.bt-rail-footer {
    padding: 4px 5px 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* ============================================================
   §8  BODY OFFSET — push content right for nav rail
   .page-container is INSIDE #body — only offset #body itself
   ============================================================ */
body.bt-has-sidenav #body {
    margin-left: var(--bt-rail-w, 52px) !important;
    width: calc(100vw - 52px) !important;
    max-width: calc(100vw - 52px) !important;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.bt-has-sidenav.bt-sidenav-expanded #body {
    margin-left: 240px !important;
    width: calc(100vw - 240px) !important;
    max-width: calc(100vw - 240px) !important;
}

/* ============================================================
   §8b  CONTENT BREATHING ROOM — 15px left/right margins
   ============================================================ */
.page-body,
.layout-main-section-wrapper {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
/* Top-level page container */
.page-container > .page-body {
    padding-top: 0 !important;
}
/* Don't double-pad inside form/list cards */
.layout-main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   §9  PAGE LAYOUT & BACKGROUND
   ============================================================ */
html, body { background-color: var(--bg-color) !important; overflow-x: hidden !important; }

.page-wrapper, .frappe-app, .main-section, .layout-main, .page-container {
    background: var(--bg-color) !important;
}

.page-head, .page-header-wrapper, .page-head .page-head-content {
    background: var(--fg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-xs) !important;
}

.page-title .title-text, .page-title h3, .title-area .title-text {
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--heading-color) !important;
    letter-spacing: -0.02em !important;
}

/* Breadcrumb */
.breadcrumb-container .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.breadcrumb-container .breadcrumb-item a { color: #0078D7 !important; font-size: 12px !important; font-weight: 500 !important; }
.breadcrumb-container .breadcrumb-item.active { color: var(--text-muted) !important; font-size: 12px !important; }
[data-theme="dark"] .breadcrumb-container .breadcrumb-item a { color: #60AAEF !important; }

/* ============================================================
   §10  SIDEBAR — eliminate double-menu
   Our #bt-sidenav replaces workspace/module navigation.
   Frappe's .layout-side-section is hidden ONLY on pages where
   it would show workspace nav (duplicating our rail).
   Forms and list-filter sidebars are kept intact.
   ============================================================ */

/* Hide Frappe's built-in workspace navigation sidebar.
   Our #bt-sidenav replaces all sidebar navigation.
   Exceptions: form sidebar (Assigned To, Attachments, etc.)
   and list view filter sidebar are shown via :has() rules below. */
.layout-side-section {
    display: none !important;
}

/* Show sidebar for form view (Assigned To, Attachments, Tags, Share, etc.) */
.layout-side-section:has(.form-sidebar) {
    display: block !important;
}

/* Show sidebar for list view filter panel.
   ListSidebar always appends .sidebar-section inside .list-sidebar.
   The workspace also uses .list-sidebar but only puts .desk-sidebar in it —
   never .sidebar-section — so this selector safely excludes workspace pages. */
.layout-side-section:has(.list-sidebar .sidebar-section) {
    display: block !important;
}

/* When either sidebar is visible, let the main section fill remaining space.
   flex-basis:0% prevents flex-wrap; min-width:0 prevents content overflow. */
.layout-side-section:has(.form-sidebar) + .layout-main-section-wrapper,
.layout-side-section:has(.list-sidebar .sidebar-section) + .layout-main-section-wrapper {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Let main content take full width when no sidebar is shown */
.layout-main-section-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
}

/* Workspace page: ensure the content column fills the full row height when the
   sidebar column (.col-lg-2) is hidden.  Frappe sets height:100% on this wrapper
   only inside a @media(min-width:992px) .layout-main rule; when the sidebar is
   display:none Bootstrap's flex row still reserves space — override explicitly. */
[data-page-route="Workspaces"] .layout-main-section-wrapper {
    height: 100% !important;
    min-height: 0 !important;
}

/* Sidebar item hover & active */
.standard-sidebar-item > a, .sidebar-item > a {
    border-radius: 7px !important;
    padding: 7px 10px !important;
    color: var(--text-color) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}
.standard-sidebar-item > a:hover, .sidebar-item > a:hover {
    background: var(--sidebar-select-color) !important;
    color: #0078D7 !important;
    text-decoration: none;
}
.standard-sidebar-item.selected > a, .standard-sidebar-item.active > a,
.sidebar-item.active > a, .sidebar-item.selected > a {
    background: rgba(0,120,215,0.10) !important;
    color: #0078D7 !important;
    font-weight: 600 !important;
    border-left: 3px solid #0078D7 !important;
    border-radius: 0 7px 7px 0 !important;
    padding-left: 7px !important;
}

/* Section labels */
.standard-sidebar-label span, .sidebar-label {
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* Item hover */
.standard-sidebar-item > a, .sidebar-item > a {
    border-radius: 7px !important;
    padding: 7px 10px !important;
    color: var(--text-color) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: background 0.12s ease, color 0.12s ease;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}
.standard-sidebar-item > a:hover, .sidebar-item > a:hover {
    background: var(--sidebar-select-color) !important;
    color: #0078D7 !important;
    text-decoration: none;
}
.standard-sidebar-item.selected > a, .standard-sidebar-item.active > a,
.sidebar-item.active > a, .sidebar-item.selected > a {
    background: rgba(0,120,215,0.10) !important;
    color: #0078D7 !important;
    font-weight: 600 !important;
    border-left: 3px solid #0078D7 !important;
    border-radius: 0 7px 7px 0 !important;
    padding-left: 7px !important;
}

/* Section labels */
.standard-sidebar-label span, .sidebar-label {
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* ============================================================
   §11  BUTTONS
   ============================================================ */
.btn-primary, .btn.btn-primary {
    background: #0078D7 !important;
    border-color: #0078D7 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,120,215,0.30) !important;
    transition: all 0.15s ease !important;
    letter-spacing: 0.01em !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: #005A9E !important; border-color: #005A9E !important;
    box-shadow: 0 4px 14px rgba(0,120,215,0.42) !important; transform: translateY(-1px) !important;
    color: #ffffff !important;
}
.btn-primary:active { transform: translateY(0) !important; background: #1560c4 !important; }
.btn-primary:disabled, .btn-primary.disabled { background: #90b8f0 !important; border-color: #90b8f0 !important; box-shadow: none !important; transform: none !important; }

.btn-default, .btn.btn-default {
    background: var(--btn-default-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    transition: all 0.12s ease !important;
}
.btn-default:hover, .btn-default:focus {
    background: var(--btn-default-hover-bg) !important;
    border-color: #a0b4cc !important;
    color: var(--heading-color) !important;
    transform: translateY(-1px) !important;
}
.btn-default:active { transform: translateY(0) !important; }

.btn-danger, .btn.btn-danger {
    background: #e63757 !important; border-color: #e63757 !important; color: #fff !important;
    font-weight: 600 !important; border-radius: 8px !important; transition: all 0.15s ease !important;
}
.btn-danger:hover { background: #c0243b !important; border-color: #c0243b !important; transform: translateY(-1px) !important; }

.btn-sm, .btn.btn-sm { border-radius: 6px !important; font-size: 12px !important; padding: 4px 12px !important; }
.btn-xs, .btn.btn-xs { border-radius: 5px !important; font-size: 11px !important; padding: 3px 8px !important; }
.icon-btn { border-radius: 7px !important; transition: background 0.12s ease !important; }
.icon-btn:hover { background: var(--subtle-fg) !important; }

[data-theme="dark"] .btn-primary { background: #0078D7 !important; border-color: #0078D7 !important; box-shadow: 0 2px 10px rgba(0,120,215,0.4) !important; }
[data-theme="dark"] .btn-primary:hover { background: #005A9E !important; box-shadow: 0 4px 16px rgba(0,120,215,0.5) !important; }

/* ============================================================
   §12  FORM STRUCTURE
   ============================================================ */
.form-page { background: var(--bg-color) !important; overflow: visible !important; }
.form-layout { background: var(--bg-color) !important; overflow: visible !important; }

/* Page-head must stack above form-tabs so its View/Create dropdowns aren't clipped.
   Frappe sets z-index:6 on .page-head; form-tabs-list below uses z-index:10,
   so without this override the tab bar covers the open dropdown menus. */
.page-head {
    z-index:    20      !important;
    width:      100%    !important;
    max-width:  none    !important;
    flex:       1 1 auto !important;
    box-sizing: border-box !important;
    padding:    0 25px  !important;
}

.page-form {
    padding:    0 25px  !important;
}

.page-head-content,
.page-head .container {
    width:      100%    !important;
    max-width:  none    !important;
    display:    flex    !important;
    flex:       1 1 auto !important;
}

/* Sticky form tabs — no overflow:hidden on ancestors required */
.form-tabs-list {
    position: sticky !important;
    top: var(--navbar-height, 48px) !important;
    z-index: 10 !important;
    background: var(--fg-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Main form card */
.std-form-layout > .form-layout > .form-page {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow) !important;
    overflow: visible !important;
}

/* Sections */
.form-section {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0 !important;
    margin: 0 !important;
}
.form-section:last-child { border-bottom: none !important; }

/* Section head — VS orange left bar accent */
.section-head {
    background: var(--subtle-accent) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-left: 3px solid #E8890C !important;
    border-radius: 0 !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #E8890C !important;
    cursor: default;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-head.collapsible { cursor: pointer; }
.section-head .collapse-indicator { color: #94a3b8 !important; margin-left: auto; }
.section-body { padding: 14px 16px 8px !important; }
.form-dashboard-section {
    background: var(--subtle-accent) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 12px 16px !important;
}

/* frappe-card inside forms */
.frappe-card {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--card-shadow) !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
}

/* Form actions bar */
.form-actions, .form-footer {
    background: var(--subtle-accent) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 10px 16px !important;
}

/* ============================================================
   §12b  INPUT LABELS
   ============================================================ */
.control-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.4 !important;
    transition: color 0.15s ease !important;
}
/* Label turns blue when its field is focused */
.frappe-control:focus-within .control-label { color: #0078D7 !important; }
[data-theme="dark"] .frappe-control:focus-within .control-label { color: #60AAEF !important; }

/* Required asterisk */
.reqd .control-label::after, .reqd > label::after {
    content: ' *' !important;
    color: #e63757 !important;
    font-weight: 800 !important;
    font-size: 11px !important;
}

/* Help / description text */
.help-box, .field-description {
    font-size: 11px !important;
    color: var(--text-light) !important;
    margin-top: 4px !important;
    line-height: 1.45 !important;
}

/* ============================================================
   §12c  BASE INPUT — text, data, int, float, currency, email
   ============================================================ */
.form-control,
.form-control:not([type="range"]),
input.form-control,
.input-with-feedback {
    border: 1.5px solid var(--border-color) !important;
    border-radius: 7px !important;
    background: var(--fg-color) !important;
    color: var(--text-color) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    line-height: 30px !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    width: 100% !important;
}

/* Textarea overrides */
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    line-height: 1.55 !important;
    padding: 8px 10px !important;
    resize: vertical !important;
}

/* Hover (editable only) */
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.input-with-feedback:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: #a0b4cc !important;
    background: var(--fg-color) !important;
}

/* Focus — crisp blue ring matching prescription_writter */
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
.input-with-feedback:focus {
    border-color: #0078D7 !important;
    background: var(--fg-color) !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.13) !important;
    outline: none !important;
}

/* Placeholder */
.form-control::placeholder,
.input-with-feedback::placeholder {
    color: var(--text-light) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    opacity: 1 !important;
}

/* ============================================================
   §12d  READ-ONLY FIELDS
   ============================================================ */
.form-control[readonly],
.like-disabled-input,
.frappe-control.read-only .form-control,
.frappe-control[data-fieldtype] .like-disabled-input,
.control-value.like-disabled-input {
    background: transparent !important;
    color: var(--text-color) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    cursor: default !important;
    box-shadow: none !important;
    height: 32px !important;
    line-height: 32px !important;
}
.frappe-control.read-only textarea.form-control,
.frappe-control.read-only .like-disabled-input[rows] {
    height: auto !important;
    line-height: 1.55 !important;
    padding: 4px 0 !important;
}

/* Disabled (greyed out, not interactable) */
.form-control:disabled {
    background: var(--input-disabled-bg) !important;
    color: var(--text-muted) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 7px !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.75 !important;
}

/* ============================================================
   §12e  VALIDATION STATES
   ============================================================ */
.has-error .form-control,
.has-error .input-with-feedback {
    border-color: #e63757 !important;
    background: rgba(230,55,87,0.03) !important;
}
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(230,55,87,0.13) !important;
}
.help-box.text-danger,
.help-box.hidden-xs.text-danger {
    color: #e63757 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 3px !important;
}

/* ============================================================
   §12f  SELECT DROPDOWN (native)
   ============================================================ */
select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 30px !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-color: var(--fg-color) !important;
}
select.form-control:focus {
    border-color: #0078D7 !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.13) !important;
}
[data-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236baedd' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* ============================================================
   §12f  MULTISELECT PILLS — prevent double border
   The outer .table-multiselect.form-control wrapper already gets the
   theme's 1.5px border; the inner .input-with-feedback / input must
   have its border removed so it doesn't create a second nested ring.
   ============================================================ */
.table-multiselect.form-control input,
.table-multiselect.form-control .input-with-feedback,
.table-multiselect input.input-with-feedback {
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    line-height: inherit !important;
    width: 100% !important;
}
.table-multiselect.form-control {
    height: auto !important;
    min-height: 32px !important;
    line-height: 1.4 !important;
    padding: 6px 8px !important;
}

/* ============================================================
   §12g  LINK / DYNAMIC LINK FIELD
   ============================================================ */
.frappe-control[data-fieldtype="Link"] .control-input,
.frappe-control[data-fieldtype="Dynamic Link"] .control-input {
    position: relative !important;
}
.frappe-control[data-fieldtype="Link"] .input-with-feedback,
.frappe-control[data-fieldtype="Dynamic Link"] .input-with-feedback {
    padding-right: 30px !important;
}
/* Open link arrow button */
.frappe-control[data-fieldtype="Link"] .btn-open,
.frappe-control[data-fieldtype="Link"] .link-btn,
.frappe-control[data-fieldtype="Dynamic Link"] .btn-open,
.frappe-control[data-fieldtype="Dynamic Link"] .link-btn {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-light) !important;
    background: none !important;
    border: none !important;
    padding: 2px !important;
    opacity: 0.7;
    transition: color 0.12s, opacity 0.12s;
    cursor: pointer !important;
}
.frappe-control[data-fieldtype="Link"]:focus-within .btn-open,
.frappe-control[data-fieldtype="Link"]:focus-within .link-btn,
.frappe-control[data-fieldtype="Dynamic Link"]:focus-within .btn-open {
    color: #0078D7 !important;
    opacity: 1 !important;
}

/* ============================================================
   §12h  TEXT EDITOR (QUILL)
   ============================================================ */
.frappe-control[data-fieldtype="Text Editor"] .ql-toolbar {
    border: 1.5px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 7px 7px 0 0 !important;
    background: var(--subtle-accent) !important;
    padding: 5px 8px !important;
}
.frappe-control[data-fieldtype="Text Editor"] .ql-container {
    border: 1.5px solid var(--border-color) !important;
    border-top: none !important;
    border-radius: 0 0 7px 7px !important;
    font-size: 13px !important;
    background: var(--fg-color) !important;
}
.frappe-control[data-fieldtype="Text Editor"]:focus-within .ql-toolbar,
.frappe-control[data-fieldtype="Text Editor"]:focus-within .ql-container {
    border-color: #0078D7 !important;
}
.ql-editor {
    min-height: 100px !important;
    font-size: 13px !important;
    color: var(--text-color) !important;
    line-height: 1.6 !important;
    padding: 10px 12px !important;
}
.ql-toolbar .ql-stroke { stroke: var(--text-muted) !important; }
.ql-toolbar .ql-fill { fill: var(--text-muted) !important; }
.ql-toolbar button:hover .ql-stroke,
.ql-toolbar button.ql-active .ql-stroke { stroke: #0078D7 !important; }
.ql-toolbar button:hover .ql-fill,
.ql-toolbar button.ql-active .ql-fill { fill: #0078D7 !important; }

/* ============================================================
   §12i  CHECKBOX / RADIO — unified custom controls
   ============================================================ */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    background: var(--fg-color) !important;
    border: 1.5px solid var(--border-color) !important;
    cursor: pointer !important;
    position: relative !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 8px !important;
}
input[type="checkbox"] {
    border-radius: 3px !important;
    /* Force perfect square — overrides Frappe's var(--checkbox-size) !important */
    width: 16px !important;
    height: 16px !important;
}
input[type="radio"]    { border-radius: 50% !important; }

/* Form Check field: .input-area is display:flex and would stretch the checkbox.
   align-self:center + explicit dimensions guarantee a perfect square. */
.checkbox .input-area input[type="checkbox"],
.frappe-control .checkbox input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* Hover — no color change; keep each state's own background */
input[type="checkbox"]:not(:checked):hover,
input[type="radio"]:not(:checked):hover {
    border-color: var(--border-color) !important;
    background: var(--fg-color) !important;
}
input[type="checkbox"]:checked:hover,
.frappe-control input[type="checkbox"]:checked:hover,
.frappe-control[data-fieldtype="Check"] input[type="checkbox"]:checked:hover,
.checkbox input[type="checkbox"]:checked:hover {
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
    border-color: #0078D7 !important;
    filter: none !important;
}

/* Checked — checkbox */
input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
    border-color: #0078D7 !important;
}
input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8px !important;
    border: 2px solid #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}

/* Grid-row checked checkbox — keeps blue when mouse leaves the active row.
   The general .input-with-feedback:hover:not(...) rule has specificity (0,5,0);
   we need (0,5,1)+ here so this wins even without :hover. */
.grid-row .checkbox input[type="checkbox"].input-with-feedback:checked,
.form-grid-row .checkbox input[type="checkbox"].input-with-feedback:checked {
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
    border-color: #0078D7 !important;
}

/* Grid-row unchecked checkbox — restores white background + visible border on mouseout.
   The .grid-row .input-with-feedback rule sets background:transparent and border:none
   which makes the unchecked checkbox appear white/blank when mouse leaves the row. */
.grid-row .checkbox input[type="checkbox"].input-with-feedback:not(:checked),
.form-grid-row .checkbox input[type="checkbox"].input-with-feedback:not(:checked) {
    background: var(--fg-color) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 3px !important;
}

/* Checked — radio */
input[type="radio"]:checked {
    border-color: #0078D7 !important;
    background: var(--fg-color) !important;
}
input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
}

/* Focus ring */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.18) !important;
    border-color: #0078D7 !important;
}

/* Disabled */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Static (inactive grid-row) checked state — Frappe renders .disabled-selected with no checked
   attribute, so :checked rules don't apply; we must target the class directly. */
input[type="checkbox"].disabled-selected {
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
    border-color: #0078D7 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    cursor: default !important;
}
input[type="checkbox"].disabled-selected::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8px !important;
    border: 2px solid #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
}
/* Static unchecked state — restore normal unchecked look (not dimmed) */
input[type="checkbox"].disabled-deselected {
    background: var(--fg-color) !important;
    border-color: var(--border-color) !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Checkbox / radio — label spacing */
input[type="checkbox"] + label,
input[type="checkbox"] + span,
input[type="radio"] + label,
input[type="radio"] + span {
    margin-left: 8px !important;
    vertical-align: middle !important;
}
.frappe-control[data-fieldtype="Check"] .label-area {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
}

/* List view — align header and row checkboxes in same column
   Header: input.list-check-all is a direct level-item (no .select-like wrapper)
   Rows:   input.list-row-checkbox sits inside span.level-item.select-like        */
.list-row .select-like {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    padding: 0 15px 0 12px !important;
}
/* Header checkbox — match the 12px offset and add 10px right gap before title */
input.list-check-all {
    margin: 0 15px 0 12px !important;
    display: block !important;
}
/* Row checkbox — no extra margin; spacing comes from .select-like padding */
input.list-row-checkbox {
    margin: 0 !important;
    display: block !important;
}

/* Dark mode */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    background: var(--fg-color) !important;
    border-color: rgba(255,255,255,0.2) !important;
}
[data-theme="dark"] input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #60AAEF 0%, #0078D7 100%) !important;
    border-color: #60AAEF !important;
}
[data-theme="dark"] input[type="radio"]:checked { border-color: #60AAEF !important; }
[data-theme="dark"] input[type="radio"]:checked::after {
    background: linear-gradient(135deg, #60AAEF 0%, #0078D7 100%) !important;
}
[data-theme="dark"] input[type="checkbox"].disabled-selected {
    background: linear-gradient(135deg, #60AAEF 0%, #0078D7 100%) !important;
    border-color: #60AAEF !important;
    opacity: 1 !important;
}
[data-theme="dark"] input[type="checkbox"].disabled-deselected {
    background: var(--fg-color) !important;
    border-color: rgba(255,255,255,0.2) !important;
    opacity: 0.55 !important;
}

/* ============================================================
   §12j  ATTACH / ATTACH IMAGE
   ============================================================ */
.frappe-control[data-fieldtype="Attach"] .attached-file,
.frappe-control[data-fieldtype="Attach Image"] .attached-file {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 10px !important;
    background: var(--subtle-accent) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 7px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    max-width: 100% !important;
    word-break: break-all !important;
}
.btn-attach,
.frappe-control .btn-attach,
.frappe-control[data-fieldtype="Attach"] .btn-attach,
.frappe-control[data-fieldtype="Attach Image"] .btn-attach {
    display: block !important;
    width: 100% !important;
    border: 1.5px dashed var(--border-color) !important;
    border-radius: 7px !important;
    background: var(--subtle-accent) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}
.btn-attach:hover,
.frappe-control .btn-attach:hover {
    border-color: #0078D7 !important;
    color: #0078D7 !important;
    background: rgba(0,120,215,0.05) !important;
}

/* ============================================================
   §12k  INPUT GROUP (prefix / suffix — e.g. currency symbol)
   ============================================================ */
.input-group > .form-control:not(:last-child) {
    border-right: none !important;
    border-radius: 7px 0 0 7px !important;
}
.input-group > .form-control:not(:first-child) {
    border-left: none !important;
    border-radius: 0 7px 7px 0 !important;
}
.input-group-text,
.input-group-append .input-group-text,
.input-group-prepend .input-group-text {
    background: var(--subtle-accent) !important;
    border: 1.5px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 0 10px !important;
    height: 32px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
}
.input-group-prepend .input-group-text {
    border-right: none !important;
    border-radius: 7px 0 0 7px !important;
}
.input-group-append .input-group-text {
    border-left: none !important;
    border-radius: 0 7px 7px 0 !important;
}

/* ============================================================
   §12l  NUMERIC / CURRENCY ALIGNMENT
   ============================================================ */
.frappe-control[data-fieldtype="Currency"] .form-control,
.frappe-control[data-fieldtype="Int"] .form-control,
.frappe-control[data-fieldtype="Float"] .form-control,
.frappe-control[data-fieldtype="Percent"] .form-control {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.01em !important;
}

/* ============================================================
   §12m  RATING
   ============================================================ */
.frappe-control[data-fieldtype="Rating"] .rating .fa-star,
.frappe-control[data-fieldtype="Rating"] .star-icon,
.rating-icons .fa {
    color: #f6c343 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, color 0.1s ease !important;
}
.frappe-control[data-fieldtype="Rating"] .rating .fa-star:hover { transform: scale(1.2) !important; }
.frappe-control[data-fieldtype="Rating"] .rating .fa-star-o { color: var(--border-color) !important; }

/* ============================================================
   §12n  DARK MODE — Input adjustments
   ============================================================ */
[data-theme="dark"] .std-form-layout > .form-layout > .form-page {
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .section-head { background: rgba(0,120,215,0.08) !important; }
[data-theme="dark"] .form-control:not([readonly]):not(:disabled),
[data-theme="dark"] .input-with-feedback:not([readonly]):not(:disabled) {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: var(--text-color) !important;
}
[data-theme="dark"] .form-control:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: rgba(255,255,255,0.22) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .input-with-feedback:focus {
    background: rgba(255,255,255,0.07) !important;
    border-color: #60AAEF !important;
    box-shadow: 0 0 0 3px rgba(96,170,239,0.14) !important;
}
[data-theme="dark"] .frappe-control:focus-within .control-label { color: #60AAEF !important; }
[data-theme="dark"] .input-group-text { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; }
[data-theme="dark"] .btn-attach { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.15) !important; }
[data-theme="dark"] .btn-attach:hover { background: rgba(0,120,215,0.12) !important; }
[data-theme="dark"] .ql-toolbar { background: rgba(255,255,255,0.04) !important; }
[data-theme="dark"] .ql-editor { background: rgba(255,255,255,0.02) !important; color: var(--text-color) !important; }
[data-theme="dark"] .ql-toolbar .ql-stroke { stroke: rgba(255,255,255,0.6) !important; }
[data-theme="dark"] .ql-toolbar .ql-fill { fill: rgba(255,255,255,0.6) !important; }

/* ============================================================
   §13  CHILD TABLE / GRID
   ============================================================ */
.form-grid {
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    box-shadow: var(--shadow-xs) !important;
}
.grid-heading-row {
    background: var(--subtle-accent) !important;
    border-bottom: 2px solid var(--border-color) !important;
    border-radius: 8px 8px 0 0 !important;
}
.grid-heading-row .col-header-content {
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
}
.grid-row, .form-grid-row {
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.1s ease !important;
    min-height: 34px !important;
}
.grid-row:hover, .form-grid-row:hover { background: rgba(0,120,215,0.025) !important; }
.grid-row.editable-row, .form-grid-row.editable-row { background: rgba(0,120,215,0.04) !important; }

/* Strip vertical padding from cells + margin from form-group so input fills full cell height */
.grid-row .data-row > [class*="col"],
.form-grid-row .data-row > [class*="col"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 34px !important;
}
.grid-row .data-row .form-group,
.form-grid-row .data-row .form-group {
    margin-bottom: 0 !important;
    height: 100% !important;
}

/* Inline grid inputs — flat, transparent, fill the full cell height */
.grid-row .form-control,
.form-grid-row .form-control,
.grid-row .input-with-feedback,
.form-grid-row .input-with-feedback {
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    font-size: 12px !important;
    padding: 0 7px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1.5px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: border-color 0.12s ease, background 0.12s ease !important;
}
.grid-row .form-control:focus,
.form-grid-row .form-control:focus,
.grid-row .input-with-feedback:focus,
.form-grid-row .input-with-feedback:focus {
    border-bottom-color: #0078D7 !important;
    background: rgba(0,120,215,0.04) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Edit icon (icon-edit) — blue, larger */
.grid-body .btn-open-row a svg,
svg:has(use[href="#icon-edit"]) {
    --icon-stroke: #0078D7 !important;
    color: #0078D7 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Grid add-row button */
/* Grid footer area */
.grid-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 8px 12px !important;
    background: var(--subtle-accent) !important;
    border-radius: 0 0 8px 8px !important;
}

/* Add Row & Add Multiple buttons */
button.grid-add-row,
button.grid-add-multiple-rows {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: #0078D7 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    height: 34px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease !important;
    letter-spacing: 0.02em !important;
}
button.grid-add-row:hover,
button.grid-add-multiple-rows:hover {
    background: #005A9E !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
button.grid-add-row::before {
    content: '+' !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
}
button.grid-add-multiple-rows::before {
    content: '⊞' !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Download & Upload buttons */
button.grid-download,
button.grid-upload {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0078D7 !important;
    background: rgba(0,120,215,0.08) !important;
    border: 1.5px solid rgba(0,120,215,0.30) !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    height: 34px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    letter-spacing: 0.02em !important;
}
button.grid-download:hover,
button.grid-upload:hover {
    background: rgba(0,120,215,0.14) !important;
    border-color: #0078D7 !important;
}
button.grid-download::before {
    content: '↓' !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
button.grid-upload::before {
    content: '↑' !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Column header labels in grid */
.grid-heading-row .col-header-content { color: var(--text-muted) !important; }

/* Form-in-grid field overrides — reset inline grid styles to match normal form */
.form-in-grid .form-control,
.form-in-grid .input-with-feedback {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 0 10px !important;
    border-radius: 7px !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--fg-color) !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    width: 100% !important;
}
.form-in-grid textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
    line-height: 1.55 !important;
    padding: 8px 10px !important;
    resize: vertical !important;
}
.form-in-grid .form-control:hover:not(:focus):not([readonly]):not(:disabled),
.form-in-grid .input-with-feedback:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: #a0b4cc !important;
    background: var(--fg-color) !important;
}
.form-in-grid .form-control:focus,
.form-in-grid .input-with-feedback:focus {
    border-color: #0078D7 !important;
    background: var(--fg-color) !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.13) !important;
    outline: none !important;
}
.form-in-grid .control-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 4px !important;
    display: block !important;
    line-height: 1.4 !important;
}
.form-in-grid .frappe-control:focus-within .control-label { color: #0078D7 !important; }
.form-in-grid .form-group { margin-bottom: 12px !important; height: auto !important; }
.form-in-grid .data-row > [class*="col"] { height: auto !important; padding-top: 4px !important; padding-bottom: 4px !important; }

/* Pencil (es-line-edit-alt) SVG — button blue via icon-stroke variable */
svg:has(use[href="#es-line-edit-alt"]),
svg:has(use[href="#icon-edit"]) {
    --icon-stroke: #0078D7 !important;
    color: #0078D7 !important;
}

/* Settings gear icon — blue + larger */
svg:has(use[href="#icon-setting-gear"]) {
    --icon-stroke: #0078D7 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Center gear icon inside the child-table header cell — match pencil column alignment */
.grid-heading-row .col.grid-static-col.d-flex.justify-content-center {
    align-items: center !important;
    padding: 0 !important;
}

.col.grid-static-col.d-flex.justify-content-center {
    margin: 0 auto;
}

/* Thicker horizontal scrollbar for child tables.
   Frappe sets overflow-x:unset on .form-grid-container on desktop, so we
   make it the explicit scroll host with overflow-x:auto.  This lets both
   Chromium (::-webkit-scrollbar, 15 px) and Firefox (scrollbar-width:auto,
   system-default ≈ 15-17 px on Windows) hit the same element. */
.form-grid-container {
    overflow-x: auto !important;
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Chromium/Safari — 15 px tall horizontal scrollbar */
.form-grid-container::-webkit-scrollbar { height: 15px; }
.form-grid-container::-webkit-scrollbar-track { background: var(--scrollbar-track-color); border-radius: 4px; }
.form-grid-container::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 4px; }
.form-grid-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Grid row open — the row itself just marks the open state; the form-in-grid
   is pulled out of flow and shown as a centered overlay (see below). */
.grid-row.grid-row-open {
    outline: none !important;
    background: transparent !important;
}


/* ── form-in-grid: always centered on screen, maximum viewport coverage ──
   position:fixed pulls it out of the DOM flow so it is never hidden by
   parent overflow:hidden containers and never drifts with page scroll.
   z-index:1045 keeps it above the freeze overlay (Bootstrap backdrop ~1040)
   but BELOW Bootstrap modals (1050+) so child dialogs open on top of it. */
.grid-row-open .form-in-grid {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(90vw, 1020px) !important;
    max-height: 88vh !important;
    overflow: hidden !important;
    z-index: 1060 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

.form-in-grid {
    background: var(--fg-color, #ffffff) !important;
    border: 4px solid #E8890C !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.32), 0 4px 16px rgba(232,137,12,0.22) !important;
    padding: 0 !important;
}
.form-in-grid .grid-form-heading {
    position:    relative !important;
    background:  linear-gradient(135deg, #2A3F62 0%, #324B75 100%) !important;
    border-bottom: 2px solid #E8890C !important;
    border-radius: 6px 6px 0 0 !important;
    padding:     8px 42px 8px 14px !important;  /* right pad reserves space for X btn */
    flex-shrink: 0 !important;
}

/* Hide Frappe's native collapse button — bt-grid-close-btn replaces it */
.form-in-grid .grid-form-heading .grid-collapse-row {
    display: none !important;
}
.form-in-grid .grid-form-heading .panel-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
.form-in-grid .grid-form-heading .btn { font-size: 12px !important; }
.form-in-grid .grid-form-body {
    padding: 14px 16px !important;
    background: var(--fg-color, #ffffff) !important;
    border-radius: 0 0 8px 8px !important;
    /* Body takes all remaining height and scrolls — captures mouse-wheel so
       the page behind the freeze overlay doesn't scroll away */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Form builder sidebar: prevent the browser anchoring to the bottom when a
   new field is selected and the content changes. */
.sidebar-container .control-data {
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
}
.form-in-grid .grid-footer-toolbar {
    border-top: 1px solid var(--border-color) !important;
    padding: 8px 16px !important;
    background: var(--subtle-accent, #f8f9fa) !important;
    border-radius: 0 0 8px 8px !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   §13b  CONFIGURE COLUMNS DIALOG (gear → Configure Columns)
   ============================================================ */

/* ── Header row (Fieldname / Column Width labels) ── */
.form-group:has(.selected-fields) > .row {
    display: flex !important;
    align-items: center !important;
    background: var(--subtle-accent) !important;
    border: 1px solid var(--border-color) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 0 0 0 !important;
    padding: 0 12px !important;
    height: 36px !important;
}
.form-group:has(.selected-fields) > .row b {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--text-muted) !important;
}

/* ── Rows container ── */
.control-input-wrapper.selected-fields {
    border: 1px solid var(--border-color) !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
}

/* ── Each draggable row ── */
.selected-fields .fields_order {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: var(--fg-color) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: grab !important;
    transition: background 0.12s ease !important;
}
.selected-fields .fields_order:last-child {
    border-bottom: none !important;
}
.selected-fields .fields_order:hover {
    background: rgba(0,120,215,0.04) !important;
}

/* Inner Bootstrap row — full width, vertically centred */
.selected-fields .fields_order > .row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    flex: 1 !important;
}

/* Drag handle col */
.selected-fields .fields_order .col-1:first-child {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
}

/* Field label col */
.selected-fields .fields_order .col-6 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Column-width input col */
.selected-fields .fields_order .col-4 {
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
}
.selected-fields .fields_order .column-width {
    height: 28px !important;
    min-height: unset !important;
    max-width: 72px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 28px !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    text-align: right !important;
    margin: 0 !important;
}

/* Delete icon col */
.selected-fields .fields_order .col-1:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
}

/* Delete (trash) icon — blue */
a.remove-field {
    color: #0078D7 !important;
    text-decoration: none !important;
    opacity: 0.75 !important;
    transition: opacity 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}
a.remove-field:hover { opacity: 1 !important; }
a.remove-field i { color: inherit !important; font-size: 14px !important; }

/* ── "+ Add / Remove Columns" button ── */
a.add-new-fields {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0078D7 !important;
    background: rgba(0,120,215,0.08) !important;
    border: 1.5px solid rgba(0,120,215,0.30) !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
}
a.add-new-fields:hover {
    background: rgba(0,120,215,0.15) !important;
    border-color: #0078D7 !important;
    color: #005A9E !important;
    text-decoration: none !important;
}

/* ── Secondary modal buttons ("Reset to Default", "Select All", "Close", etc.) ── */
/* :not(.hide) ensures Bootstrap's .hide class is not overridden by our display rule */
.modal-footer .btn-modal-secondary:not(.hide) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #0078D7 !important;
    background: rgba(0,120,215,0.08) !important;
    border: 1.5px solid rgba(0,120,215,0.30) !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.modal-footer .btn-modal-secondary:not(.hide):hover {
    background: rgba(0,120,215,0.15) !important;
    border-color: #0078D7 !important;
    color: #005A9E !important;
}
/* Ensure all visible standard-action buttons share the same height */
.modal-footer .standard-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.modal-footer .standard-actions .btn:not(.hide) {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   §14  LIST VIEW
   ============================================================ */
.list-page-container { background: var(--bg-color) !important; }

.list-result-area, .result-list, .frappe-list {
    background: var(--fg-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--card-shadow) !important;
    overflow: visible !important;
}

.list-row.list-row-head, .list-headers-group {
    background: var(--subtle-accent) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
.list-row.list-row-head .list-col-title, .list-headers-group .list-col-title {
    font-size: 10px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.07em !important; color: var(--text-muted) !important;
}

.list-row-container { border-top: none !important; border-bottom: none !important; }
.list-row { border-top: none !important; border-bottom: none !important; transition: background 0.1s ease; }
.list-row-container .list-row-border { border-bottom: 1px solid var(--border-color) !important; margin: 0 !important; }
.list-row-container:last-child .list-row-border { display: block !important; }
.list-row:hover, .list-row-container:hover { background: rgba(0,120,215,0.03) !important; }

.list-subject .subject-link, .list-row .list-col-subject .bold {
    color: var(--heading-color) !important; font-weight: 600 !important; font-size: 13px !important; transition: color 0.1s ease;
}
.list-subject .subject-link:hover { color: #0078D7 !important; }

.list-filters-wrapper, .list-toolbar-wrapper {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--card-shadow) !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
}

.list-paging-area {
    background: var(--fg-color) !important;
    padding: 10px 16px !important;
    border-radius: 0 0 10px 10px !important;
}

[data-theme="dark"] .list-subject .subject-link:hover { color: #60AAEF !important; }

/* ============================================================
   §15  WORKSPACE / HOME WIDGETS
   ============================================================ */
.desk-page, .workspace-container { background: var(--bg-color) !important; }

.widget {
    background: var(--fg-color) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: var(--card-shadow) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.widget-body {
    background: var(--fg-color) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.widget:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px) !important; }

.shortcut-widget-box {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
}
.shortcut-widget-box:hover {
    border-color: rgba(0,120,215,0.35) !important;
    box-shadow: 0 4px 18px rgba(0,120,215,0.16) !important;
    transform: translateY(-2px) !important;
}
.shortcut-widget-box .widget-icon { background: rgba(0,120,215,0.09) !important; border-radius: 9px !important; transition: background 0.15s ease; }
.shortcut-widget-box:hover .widget-icon { background: rgba(0,120,215,0.16) !important; }
/* Do NOT force stroke/fill on widget icons — Frappe icons use either stroke or fill
   depending on icon style; forcing one breaks the other. Let currentColor handle it. */
.shortcut-widget-box .widget-icon { color: #0078D7 !important; }
.shortcut-widget-box .widget-label .widget-title { font-weight: 600 !important; font-size: 13px !important; color: var(--heading-color) !important; }

.links-widget-box { background: var(--fg-color) !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; box-shadow: var(--card-shadow) !important; overflow: hidden; }
.links-widget-box .widget-head { background: var(--subtle-accent) !important; border-bottom: 1px solid var(--border-color) !important; padding: 12px 16px !important; }
.links-widget-box .widget-title { font-weight: 700 !important; font-size: 13px !important; color: var(--heading-color) !important; }
.links-widget-box .link-item, .links-widget-box .widget-link {
    padding: 7px 16px !important; border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    font-size: 13px !important; font-weight: 500 !important; color: var(--text-color) !important; transition: background 0.1s ease;
}
.links-widget-box .link-item .link-content,
.links-widget-box .link-item .link-content:hover { color: inherit !important; }
.links-widget-box .link-item:hover, .links-widget-box .widget-link:hover { background: rgba(0,120,215,0.04) !important; color: #0078D7 !important; }
.links-widget-box .link-item:last-child, .links-widget-box .widget-link:last-child { border-bottom: none !important; }

/* Replace diagonal ↗ arrow with a clean CSS chevron */
.widget.shortcut-widget-box .widget-control svg.ml-2,
.links-widget-box .link-item .link-content svg.ml-2 {
    display: none !important;
}
.widget.shortcut-widget-box .widget-control::after {
    content: '›';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(232, 137, 12, 0.12);
    border-radius: 50%;
    color: #E8890C;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}
.links-widget-box .link-item .link-text::after {
    content: '›';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(232, 137, 12, 0.12);
    border-radius: 50%;
    color: #E8890C;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-left: 6px;
    vertical-align: middle;
}

.number-card, .number-card-container {
    background: var(--fg-color) !important; border: 1px solid var(--border-color) !important;
    border-radius: 10px !important; box-shadow: var(--card-shadow) !important; padding: 18px !important; transition: all 0.15s ease;
}
.number-card:hover { box-shadow: var(--shadow-md) !important; transform: translateY(-1px); }
.number-card .number-card-label, .number-card .number-card-head { color: var(--text-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; }
.number-card .number-card-number { font-size: 30px !important; font-weight: 800 !important; color: var(--heading-color) !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
.number-card .number-card-number.green { color: #00875a !important; }
.number-card .number-card-number.red { color: #c0243b !important; }
.number-card .number-card-number.blue { color: #0078D7 !important; }

.widget-group-title { font-size: 15px !important; font-weight: 700 !important; color: var(--heading-color) !important; letter-spacing: -0.02em !important; margin-bottom: 12px !important; }

[data-theme="dark"] .widget:hover, [data-theme="dark"] .shortcut-widget-box:hover {
    border-color: rgba(96,170,239,0.3) !important; box-shadow: 0 4px 20px rgba(0,120,215,0.12) !important;
}
[data-theme="dark"] .shortcut-widget-box .widget-icon { background: rgba(0,120,215,0.14) !important; color: #60AAEF !important; }
[data-theme="dark"] .links-widget-box .link-item:hover { background: rgba(0,120,215,0.08) !important; color: #60AAEF !important; }

/* ============================================================
   §16  MODALS / DIALOGS
   ============================================================ */
/* Modal dialog: flex column so the body scrolls independently and the dialog
   never moves off-screen when the user scrolls with the mouse wheel. */
.modal-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 56px) !important;
    margin-top: 28px !important;
    margin-bottom: 28px !important;
}
.modal-content {
    border: 1.5px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.10) !important;
    overflow: hidden !important;
    background: var(--modal-bg) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: inherit !important;
}
.modal-header {
    background: linear-gradient(135deg, #2A3F62 0%, #324B75 100%) !important;
    border-bottom: 2px solid #0078D7 !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    /* override Frappe's sticky — header is fixed by flex, not by sticky scroll */
    position: relative !important;
    top: auto !important;
}
.modal-title { font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.01em !important; }
.modal-body {
    padding: 20px !important;
    background: var(--modal-bg) !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
}
.modal-footer {
    background: var(--fg-color) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    /* override Frappe's sticky — footer is fixed by flex */
    position: relative !important;
    bottom: auto !important;
}
.modal-backdrop { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/* Freeze: always invisible and non-interactive so it never blocks the
   form-in-grid or child dialogs. The form-in-grid (z-index:1060) sits
   above the freeze (z-index:1055 from Frappe) and child modals (1080)
   sit above the form, giving the correct stacking order. */
#freeze { background: transparent !important; opacity: 0 !important; pointer-events: none !important; }

/* ── Child modals must appear above the form-in-grid (1060) ──
   Bootstrap 3 sets .modal at z-index:1040 which would be hidden behind
   the form. Raise it to 1080 so any dialog opened from within the form
   (link search, filter dialog, etc.) renders on top. */
.modal { z-index: 1080 !important; }
/* ── Modal header close & minimize buttons: always white ── */
.modal-header .close,
.modal-header .btn-modal-close,
.modal-header .btn-modal-minimize {
    color: #ffffff !important;
    --icon-stroke: #ffffff !important;
    opacity: 1 !important;
    border-radius: 7px !important;
    transition: all 0.12s ease !important;
}
/* Force white on the SVG elements directly (Frappe uses currentColor + --icon-stroke) */
.modal-header .close svg,
.modal-header .btn-modal-close svg,
.modal-header .btn-modal-minimize svg,
.modal-header .close .icon,
.modal-header .btn-modal-close .icon,
.modal-header .btn-modal-minimize .icon {
    stroke: #ffffff !important;
    --icon-stroke: #ffffff !important;
    color: #ffffff !important;
}
.modal-header .close use,
.modal-header .btn-modal-close use,
.modal-header .btn-modal-minimize use {
    stroke: #ffffff !important;
    color: #ffffff !important;
}
.modal-header .close:hover,
.modal-header .btn-modal-close:hover,
.modal-header .btn-modal-minimize:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    --icon-stroke: #ffffff !important;
}

.quick-entry-dialog .modal-header, .quick-entry-dialog.modal .modal-header {
    background: linear-gradient(135deg, #071929 0%, #0A2342 100%) !important; border-bottom: 2px solid #0078D7 !important;
}
.quick-entry-dialog .modal-title { color: #ffffff !important; }
.quick-entry-dialog .modal-header .close,
.quick-entry-dialog .modal-header .btn-modal-close {
    color: #ffffff !important;
    --icon-stroke: #ffffff !important;
}

[data-theme="dark"] .modal-content { background: var(--modal-bg, #1a1f2e) !important; border: 1.5px solid var(--border-color) !important; }
[data-theme="dark"] .modal-header { background: linear-gradient(135deg, #141820 0%, #1a2235 100%) !important; }
[data-theme="dark"] .modal-footer { background: #141820 !important; }
[data-theme="dark"] .modal-backdrop { background: transparent !important; }

/* ============================================================
   §17  INDICATORS / BADGES
   ============================================================ */
.indicator-pill, .indicator-pill.no-margin {
    border-radius: 20px !important; font-size: 10px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.05em !important;
    padding: 3px 10px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.indicator-pill.green  { background: rgba(0,217,126,0.12) !important; color: #00875a !important; }
.indicator-pill.red    { background: rgba(230,55,87,0.12)  !important; color: #c0243b !important; }
.indicator-pill.blue   { background: rgba(0,120,215,0.12) !important; color: #005A9E !important; }
.indicator-pill.yellow { background: rgba(246,195,67,0.15) !important; color: #8a6900 !important; }
.indicator-pill.orange { background: rgba(253,126,20,0.12) !important; color: #c56000 !important; }
.widget.shortcut-widget-box .indicator-pill { background: rgba(232,137,12,0.12) !important; color: #E8890C !important; }
.indicator-pill.gray, .indicator-pill.grey { background: rgba(100,116,139,0.10) !important; color: #475569 !important; }
.indicator-pill.purple { background: rgba(124,58,237,0.10) !important; color: #5b21b6 !important; }
.indicator-pill.cyan   { background: rgba(57,175,209,0.12) !important; color: #0f7a9a !important; }

.badge { border-radius: 20px !important; font-size: 10px !important; font-weight: 700 !important; padding: 3px 8px !important; letter-spacing: 0.03em !important; }
.badge-primary { background: #0078D7 !important; color: #fff !important; }
.badge-success { background: #00875a !important; color: #fff !important; }
.badge-danger  { background: #e63757 !important; color: #fff !important; }
.badge-warning { background: #f6c343 !important; color: #12263f !important; }
.badge-info    { background: #39afd1 !important; color: #fff !important; }

[data-theme="dark"] .indicator-pill.green  { background: rgba(0,217,126,0.18) !important; color: #00d97e !important; }
[data-theme="dark"] .indicator-pill.red    { background: rgba(230,55,87,0.20)  !important; color: #f47d92 !important; }
[data-theme="dark"] .indicator-pill.blue   { background: rgba(96,170,239,0.18) !important; color: #60AAEF !important; }
[data-theme="dark"] .indicator-pill.yellow { background: rgba(246,195,67,0.20) !important; color: #f6c343 !important; }

/* ============================================================
   §18  AWESOMPLETE / AUTOCOMPLETE
   ============================================================ */
.awesomplete {
    position: relative;
    /* No z-index here — avoids creating a stacking context that traps the dropdown */
}
.awesomplete ul {
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-lg) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 280px !important;
    padding: 4px !important;
    background: var(--popover-bg) !important;
    position: absolute !important;
    z-index: 9999 !important;  /* above all page chrome, modals, sticky headers */
}
.awesomplete li { border-radius: 7px !important; padding: 7px 10px !important; font-size: 13px !important; font-weight: 700 !important; color: #000000 !important; transition: background 0.1s ease; cursor: pointer; }
.awesomplete li:hover, .awesomplete li[aria-selected="true"] { background: var(--subtle-fg) !important; }
.awesomplete li mark { background: rgba(255,200,0,0.30) !important; color: #1a1a1a !important; border-radius: 3px !important; padding: 0 2px; }
#awesomplete_list_1 li,
#awesomplete_list_1 li * { color: #000000 !important; }

[data-theme="dark"] .awesomplete ul { background: #1a1f2e !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .awesomplete li:hover, [data-theme="dark"] .awesomplete li[aria-selected="true"] { background: rgba(0,120,215,0.14) !important; }
[data-theme="dark"] .awesomplete li mark { background: rgba(96,170,239,0.2) !important; color: #60AAEF !important; }

/* Global search dialog — result text forced to near-black */
.search-dialog .result { color: #111111 !important; }
.search-dialog .result-title { color: #111111 !important; }
.search-dialog .result-text { color: #111111 !important; }
.search-dialog .result-body { color: #111111 !important; }
.search-dialog .description { color: #555555 !important; }
.search-dialog mark { color: #0055b3 !important; background: rgba(255,200,0,0.30) !important; }

/* Search dialog — resizable */
.search-dialog .modal-dialog {
    width: 620px;
    max-width: 90vw;
}
.search-dialog .modal-content {
    resize: both !important;
    overflow: auto !important;
    min-width: 380px;
    min-height: 260px;
}

/* ============================================================
   §19  TIMELINE
   ============================================================ */
.timeline-item .timeline-content, .timeline-content {
    background: var(--fg-color) !important; border: 1px solid var(--border-color) !important;
    border-radius: 9px !important; box-shadow: var(--shadow-xs) !important; padding: 12px 14px !important; font-size: 13px !important;
}

/* ============================================================
   §20  TOAST NOTIFICATIONS
   ============================================================ */
.toast {
    border-radius: 10px !important; box-shadow: var(--shadow-lg) !important;
    border: none !important; overflow: hidden !important; background: var(--toast-bg) !important;
    border-left: 4px solid #0078D7 !important;
}
.toast.toast-success { border-left-color: #00d97e !important; }
.toast.toast-error   { border-left-color: #e63757 !important; }
.toast.toast-warning { border-left-color: #f6c343 !important; }
.toast .toast-title { font-weight: 700 !important; font-size: 13px !important; color: var(--heading-color) !important; }
.toast .toast-message { font-size: 12px !important; color: var(--text-muted) !important; }

[data-theme="dark"] .toast { background: #1a1f2e !important; }

/* ============================================================
   §21  REPORT VIEW / DATATABLE
   ============================================================ */
.dt-header-cell, .dt-header .dt-cell {
    background: var(--subtle-accent) !important;
    border-bottom: 2px solid var(--border-color) !important;
}
.dt-header-cell__content, .dt-cell__content--header {
    font-size: 10px !important; font-weight: 800 !important;
    text-transform: uppercase !important; letter-spacing: 0.07em !important; color: var(--text-muted) !important;
}
.dt-row:hover .dt-cell { background: rgba(0,120,215,0.03) !important; }
.dt-cell { border-bottom: 1px solid var(--border-color) !important; border-right: 1px solid var(--border-color) !important; font-size: 13px !important; }
.datatable-wrapper, .frappe-datatable { border: 1px solid var(--border-color) !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: var(--card-shadow) !important; }
.report-wrapper { background: var(--bg-color) !important; }

/* ============================================================
   §22  CALENDAR
   ============================================================ */
.fc-event { border-radius: 6px !important; border: none !important; font-weight: 500 !important; font-size: 11px !important; }
.fc-event.fc-daygrid-event { background: rgba(0,120,215,0.82) !important; color: #ffffff !important; }
.fc-day-today { background: rgba(0,120,215,0.05) !important; }
.fc-button.fc-button-primary { background: #0078D7 !important; border-color: #0078D7 !important; border-radius: 6px !important; font-weight: 600 !important; font-size: 12px !important; box-shadow: none !important; }
.fc-button.fc-button-primary:hover { background: #005A9E !important; border-color: #005A9E !important; }
.fc-col-header-cell { background: var(--subtle-accent) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--text-muted) !important; }
.fc-scrollgrid { border: 1px solid var(--border-color) !important; border-radius: 10px !important; overflow: hidden !important; }

/* ============================================================
   §23  TABS
   ============================================================ */
.nav-tabs {
    border-bottom: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 6px 8px !important;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-item { flex-shrink: 0 !important; }
.nav-tabs .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-radius: 7px !important;
    border: 1.5px solid transparent !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
    line-height: 1.4 !important;
}
.nav-tabs .nav-link:hover {
    color: var(--heading-color) !important;
    background: var(--subtle-accent) !important;
    border-color: var(--border-color) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.active .nav-link {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0078D7 0%, #005A9E 100%) !important;
    border-color: #0078D7 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0,120,215,0.30) !important;
}

/* ============================================================
   §24  KANBAN
   ============================================================ */
.kanban-board { background: var(--bg-color) !important; }
.kanban-column { background: var(--fg-color) !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important; min-width: 280px !important; }
.kanban-column-header { background: var(--subtle-accent) !important; border-bottom: 1px solid var(--border-color) !important; border-radius: 10px 10px 0 0 !important; padding: 12px 14px !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; color: var(--text-muted) !important; }
.kanban-card { background: var(--fg-color) !important; border: 1px solid var(--border-color) !important; border-radius: 8px !important; box-shadow: var(--shadow-xs) !important; margin: 8px !important; padding: 12px !important; font-size: 13px !important; transition: all 0.15s ease; cursor: pointer; }
.kanban-card:hover { box-shadow: var(--shadow-sm) !important; transform: translateY(-1px) !important; border-color: rgba(0,120,215,0.25) !important; }

[data-theme="dark"] .kanban-card:hover { border-color: rgba(96,170,239,0.25) !important; }

/* ============================================================
   §25  SELECT2 DROPDOWN
   ============================================================ */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--border-color) !important; border-radius: 7px !important;
    background: var(--control-bg) !important; min-height: 30px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: #0078D7 !important; box-shadow: 0 0 0 3px rgba(0,120,215,0.15) !important;
}
.select2-dropdown { border: 1px solid var(--border-color) !important; border-radius: 10px !important; box-shadow: var(--shadow-lg) !important; overflow: visible !important; background: var(--popover-bg) !important; padding: 4px !important; z-index: 9999 !important; }
.select2-container--default .select2-results__option { border-radius: 7px !important; padding: 7px 10px !important; font-size: 13px !important; color: var(--text-color) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(0,120,215,0.09) !important; color: #005A9E !important; }
.select2-container--default .select2-selection__choice { background: rgba(0,120,215,0.10) !important; border: 1px solid rgba(0,120,215,0.2) !important; border-radius: 20px !important; color: #005A9E !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 8px !important; }

[data-theme="dark"] .select2-dropdown { background: #1a1f2e !important; }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(0,120,215,0.16) !important; color: #60AAEF !important; }

/* ============================================================
   §26  DATEPICKER
   ============================================================ */
.datepicker--cell.-selected-, .datepicker--cell.-selected-.-focus- { background: #0078D7 !important; color: #ffffff !important; border-radius: 7px !important; font-weight: 600 !important; }
.datepicker--cell.-focus- { background: rgba(0,120,215,0.10) !important; border-radius: 7px !important; }
.datepicker--cell.-range-from-, .datepicker--cell.-range-to- { background: rgba(0,120,215,0.85) !important; color: #fff !important; border-radius: 7px !important; }
.datepicker--cell.-in-range- { background: rgba(0,120,215,0.08) !important; color: #005A9E !important; }
.datepicker--cell:hover:not(.-selected-) { background: rgba(0,120,215,0.08) !important; border-radius: 7px !important; }
.datepicker--day-name { color: var(--text-muted) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.datepicker { border: 1px solid var(--border-color) !important; border-radius: 10px !important; box-shadow: var(--shadow-lg) !important; background: var(--popover-bg) !important; }

[data-theme="dark"] .datepicker { background: #1a1f2e !important; border-color: var(--border-color) !important; }
[data-theme="dark"] .datepicker--cell.-selected- { background: #0078D7 !important; color: #ffffff !important; }

/* ============================================================
   §27  PROGRESS / CHECKBOX / SWITCH
   ============================================================ */
.progress { background: var(--subtle-fg) !important; border-radius: 5px !important; height: 6px !important; overflow: hidden !important; }
.progress-bar { background: linear-gradient(90deg, #0078D7, #005A9E) !important; border-radius: 5px !important; transition: width 0.4s ease !important; }

/* ============================================================
   §28  POPOVER / TOOLTIP
   ============================================================ */
.popover { border: 1px solid var(--border-color) !important; border-radius: 10px !important; box-shadow: var(--shadow-lg) !important; background: var(--popover-bg) !important; }
.popover-header { background: var(--subtle-accent) !important; border-bottom: 1px solid var(--border-color) !important; border-radius: 10px 10px 0 0 !important; font-weight: 700 !important; font-size: 13px !important; }
.tooltip-inner { background: #0f172a !important; color: #ffffff !important; border-radius: 7px !important; font-size: 11px !important; font-weight: 500 !important; padding: 5px 10px !important; }
.bs-tooltip-top .arrow::before { border-top-color: #0f172a !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #0f172a !important; }
.bs-tooltip-left .arrow::before { border-left-color: #0f172a !important; }
.bs-tooltip-right .arrow::before { border-right-color: #0f172a !important; }

/* ============================================================
   §29  ALERT MESSAGES
   ============================================================ */
.alert { border-radius: 9px !important; border: none !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px 14px !important; border-left: 4px solid transparent !important; }
.alert-info    { background: rgba(0,120,215,0.07) !important; border-left-color: #0078D7 !important; color: #005A9E !important; }
.alert-success { background: rgba(0,217,126,0.07) !important; border-left-color: #00d97e !important; color: #00875a !important; }
.alert-danger  { background: rgba(230,55,87,0.07) !important; border-left-color: #e63757 !important; color: #c0243b !important; }
.alert-warning { background: rgba(246,195,67,0.10) !important; border-left-color: #f6c343 !important; color: #8a6900 !important; }

/* ============================================================
   §30  LOGIN PAGE
   ============================================================ */
.login-page-wrapper, body.login-page { background: linear-gradient(155deg, #071929 0%, #0A2342 30%, #0d3060 65%, #1565C0 100%) !important; min-height: 100vh; }
.login-page-wrapper .page-card { border-radius: 14px !important; box-shadow: 0 8px 40px rgba(7,25,41,0.2) !important; }
.login-page-wrapper .btn-primary { background: linear-gradient(135deg, #0A2342 0%, #1565C0 100%) !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; box-shadow: 0 4px 16px rgba(21,101,192,0.4) !important; }

/* ============================================================
   §31  MISC — filter tags, comment box, loading, print
   ============================================================ */
.filter-tag { background: rgba(0,120,215,0.09) !important; border: 1px solid rgba(0,120,215,0.2) !important; color: #005A9E !important; border-radius: 20px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 10px !important; }
[data-theme="dark"] .filter-tag { background: rgba(0,120,215,0.16) !important; border-color: rgba(96,170,239,0.25) !important; color: #60AAEF !important; }

.comment-input-wrapper { border: 1px solid var(--border-color) !important; border-radius: 9px !important; overflow: hidden !important; }
.comment-input-wrapper .ql-toolbar { border-bottom: 1px solid var(--border-color) !important; background: var(--subtle-accent) !important; }

*:focus-visible { outline: 2px solid #0078D7 !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(0,120,215,0.12) !important; }

/* ============================================================
   §32  FORM DASHBOARD & CONNECTIONS — document link chips
   Targets: .form-dashboard wrapper, .document-link badge chips,
   .badge-link (count + label), .btn-new (create button)
   ============================================================ */

/* Scope dashboard to avoid clashing with form section heads */
.form-dashboard {
    padding: 0 !important;
}

/* Each dashboard section becomes a clean white card */
.form-dashboard .form-dashboard-section {
    background: var(--fg-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 10px !important;
    box-shadow: var(--card-shadow) !important;
    margin: 0 0 10px !important;
    padding: 14px 16px !important;
    border-left: none !important;
    border-bottom: none !important;
}

/* Section label (e.g. "Connections", "Sales") */
.form-dashboard .form-dashboard-section .form-link-title,
.form-dashboard .form-dashboard-section h6,
.form-dashboard .form-dashboard-section .form-links-header {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: var(--text-muted) !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    display: block !important;
}

/* Flex row of chips */
.form-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Each document-type chip group (badge + new button) */
.document-link {
    display: inline-flex !important;
    align-items: stretch !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--border-color) !important;
    overflow: hidden !important;
    transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
    background: var(--fg-color) !important;
}
.document-link:hover {
    border-color: #0078D7 !important;
    box-shadow: 0 2px 10px rgba(0,120,215,0.12) !important;
}

/* Clickable link: count pill + doctype name */
.document-link .badge-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 5px 10px 5px 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
    transition: color 0.12s ease, background 0.12s ease !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 30px !important;
}
.document-link:hover .badge-link {
    color: #0078D7 !important;
    text-decoration: none !important;
}

/* Count pill inside badge-link */
.document-link .badge-link .count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 6px !important;
    background: #0078D7 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    transition: background 0.12s ease !important;
}
.document-link:hover .badge-link .count {
    background: #005A9E !important;
}
/* Zero count — grey pill */
.document-link .badge-link .count.no-count {
    background: var(--subtle-fg) !important;
    color: var(--text-muted) !important;
}

/* Open-notification badge (overdue/open indicator) */
.document-link .open-notification {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    background: rgba(232,137,12,0.15) !important;
    color: #B86A00 !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    margin-left: 2px !important;
}

/* New document (+) button — right side of chip */
.document-link .btn-new {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    border-left: 1.5px solid var(--border-color) !important;
    background: var(--subtle-accent) !important;
    color: var(--text-muted) !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transition: all 0.12s ease !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.document-link:hover .btn-new {
    border-left-color: #0078D7 !important;
    background: rgba(0,120,215,0.08) !important;
    color: #0078D7 !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .document-link {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
[data-theme="dark"] .document-link:hover {
    border-color: #60AAEF !important;
    box-shadow: 0 2px 10px rgba(96,170,239,0.12) !important;
}
[data-theme="dark"] .document-link:hover .badge-link { color: #60AAEF !important; }
[data-theme="dark"] .document-link .btn-new { background: rgba(255,255,255,0.05) !important; }
[data-theme="dark"] .document-link:hover .btn-new { background: rgba(0,120,215,0.15) !important; color: #60AAEF !important; }

/* ============================================================
   §33  BOXED INPUTS — enhanced clear border style
   ============================================================ */

/* Stronger base border so fields are unmistakably distinct */
.form-control,
.form-control:not([type="range"]),
input.form-control,
.input-with-feedback {
    border: 1.5px solid #B8C6D4 !important;
}
/* Hover — border darkens slightly */
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
.input-with-feedback:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: #8FA3B8 !important;
}
/* Focus — 2px crisp VS blue border + glow */
.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
.input-with-feedback:focus {
    border: 2px solid #0078D7 !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.13) !important;
}

/* Label → field gap: add a subtle horizontal rule under the label when focused */
.frappe-control:focus-within .control-label {
    color: #0078D7 !important;
}

/* Dark mode */
[data-theme="dark"] .form-control:not([readonly]):not(:disabled),
[data-theme="dark"] .input-with-feedback:not([readonly]):not(:disabled) {
    border-color: rgba(255,255,255,0.16) !important;
}
[data-theme="dark"] .form-control:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: rgba(255,255,255,0.28) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .input-with-feedback:focus {
    border: 2px solid #60AAEF !important;
    box-shadow: 0 0 0 3px rgba(96,170,239,0.14) !important;
}

/* ============================================================
   §34  DOCTYPE SEARCH MODAL — Full-screen browse palette
   ============================================================ */

/* Spin keyframe for loading spinner */
@keyframes bt-spin { to { transform: rotate(360deg); } }
@keyframes bt-dt-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bt-dt-slidein {
    from { transform: scale(0.93) translateY(-18px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);     opacity: 1; }
}

/* ── Overlay backdrop ── */
#bt-dt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 22, 38, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 2100;
    display: none;
    animation: bt-dt-fadein 0.18s ease;
}
#bt-dt-overlay.bt-open { display: block; }

/* ── Modal shell ── */
.bt-dt-modal {
    position: absolute;
    background: var(--fg-color, #fff);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 32px 96px rgba(0,0,0,0.40), 0 10px 32px rgba(0,0,0,0.20);
    border: 1px solid rgba(0,120,215,0.26);
    animation: bt-dt-slidein 0.24s cubic-bezier(0.34,1.56,0.64,1);
    min-width: 400px;
    min-height: 280px;
}

/* ── All-sides resize handles ── */
.bt-dt-rh { position: absolute; z-index: 20; }
.bt-dt-rh-n  { top: 0;    left: 8px;   right: 8px;  height: 5px; cursor: n-resize; }
.bt-dt-rh-s  { bottom: 0; left: 8px;   right: 8px;  height: 5px; cursor: s-resize; }
.bt-dt-rh-e  { right: 0;  top: 8px;    bottom: 8px; width: 5px;  cursor: e-resize; }
.bt-dt-rh-w  { left: 0;   top: 8px;    bottom: 8px; width: 5px;  cursor: w-resize; }
.bt-dt-rh-nw { top: 0; left: 0;   width: 12px; height: 12px; cursor: nw-resize; }
.bt-dt-rh-ne { top: 0; right: 0;  width: 12px; height: 12px; cursor: ne-resize; }
.bt-dt-rh-sw { bottom: 0; left: 0;  width: 12px; height: 12px; cursor: sw-resize; }
.bt-dt-rh-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }

/* ── Header (dark navy matching navbar) ── */
.bt-dt-header {
    background: linear-gradient(90deg, #253550 0%, #2F4570 60%, #253550 100%);
    padding: 16px 22px 14px;
    flex-shrink: 0;
    border-bottom: 2px solid rgba(0,120,215,0.4);
}
[data-theme="dark"] .bt-dt-header {
    background: linear-gradient(90deg, #141E2E 0%, #1A2840 60%, #141E2E 100%);
}

.bt-dt-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bt-dt-search-wrap {
    position: relative;
    flex: 1;
}
.bt-dt-search-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.6);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.bt-dt-input {
    width: 100%;
    background: rgba(255,255,255,0.10) !important;
    border: 1.5px solid rgba(255,255,255,0.18) !important;
    border-radius: 10px !important;
    height: 46px !important;
    padding-left: 46px !important;
    padding-right: 18px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
    transition: background 0.15s, border-color 0.15s;
}
.bt-dt-input::placeholder { color: rgba(255,255,255,0.45) !important; }
.bt-dt-input:focus {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(0,120,215,0.7) !important;
}
.bt-dt-toggle-btn,
.bt-dt-close-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s;
    padding: 0;
}
.bt-dt-toggle-btn:hover,
.bt-dt-close-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.bt-dt-toggle-btn svg { transition: transform 0.22s ease; }
.bt-dt-toggle-btn.bt-toggle-collapsed svg { transform: rotate(180deg); }

/* ── Remember module section — pill toggle row ── */
.bt-dt-remember-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.bt-dt-remember-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    user-select: none;
}
.bt-dt-remember-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 9px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.bt-dt-remember-toggle.bt-remember-on {
    background: #0078D7;
    border-color: #0078D7;
}
.bt-dt-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.60);
    transition: left 0.2s ease, background 0.2s;
}
.bt-dt-remember-toggle.bt-remember-on .bt-dt-toggle-knob {
    left: 17px;
    background: #fff;
}
.bt-dt-remember-sep {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.15);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ── Module filter cards — grid, one card per module ── */
.bt-dt-chips {
    background: linear-gradient(180deg, #1A2B42 0%, #1E3050 100%);
    padding: 12px 22px 12px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 7px;
    flex-shrink: 0;
    border-bottom: 2px solid rgba(0,120,215,0.22);
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: auto;
    scrollbar-color: rgba(255,255,255,0.38) rgba(255,255,255,0.08);
    transition: max-height 0.25s ease, padding 0.22s ease, opacity 0.2s ease, border-bottom-width 0.22s ease;
    opacity: 1;
}
.bt-dt-chips.bt-chips-collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    opacity: 0;
    border-bottom-width: 0 !important;
}
.bt-dt-chips::-webkit-scrollbar { width: 24px; }
.bt-dt-chips::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 6px; }
.bt-dt-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 6px; border: 2px solid rgba(0,0,0,0.15); }
.bt-dt-chips::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); }
[data-theme="dark"] .bt-dt-chips {
    background: linear-gradient(180deg, #0F1924 0%, #141E2E 100%);
}

/* Each module card */
.bt-dt-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 11px 5px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.78);
    cursor: pointer;
    text-align: center;
    transition: all 0.14s ease;
    user-select: none;
    white-space: normal;
    word-break: break-word;
}
.bt-dt-chip:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.22);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.bt-dt-chip.bt-chip-active {
    background: rgba(232,137,12,0.22);
    border-color: #E8890C;
    border-left: 3px solid #E8890C;
    color: #fff;
    box-shadow: 0 2px 10px rgba(232,137,12,0.28);
}
.bt-dt-chip-name {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    color: inherit;
    letter-spacing: 0.01em;
}
.bt-dt-chip.bt-chip-active .bt-dt-chip-name {
    color: #FFB347;
}
.bt-dt-chip-count {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    line-height: 1;
}
.bt-dt-chip.bt-chip-active .bt-dt-chip-count {
    color: rgba(255,200,100,0.70);
}

/* ── Scrollable body ── */
.bt-dt-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 24px;
    background: var(--bg-color, #ECF0F6);
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb-color, #BCCADB) var(--scrollbar-track-color, #E4EBF5);
}
.bt-dt-body::-webkit-scrollbar { width: 24px; }
.bt-dt-body::-webkit-scrollbar-track { background: var(--scrollbar-track-color, #E4EBF5); border-radius: 6px; }
.bt-dt-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color, #BCCADB); border-radius: 6px; border: 2px solid var(--scrollbar-track-color, #E4EBF5); }
.bt-dt-body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-theme="dark"] .bt-dt-body {
    scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0.06);
}
[data-theme="dark"] .bt-dt-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .bt-dt-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-color: rgba(0,0,0,0.15); }
[data-theme="dark"] .bt-dt-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.55); }

/* Count line */
.bt-dt-tally {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #5A6A7E);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--subtle-fg, #D6E0EE);
}

/* Group label */
.bt-dt-group {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #5A6A7E);
    margin: 16px 0 8px;
    padding: 4px 6px 4px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.14s;
    user-select: none;
}
.bt-dt-group:hover { background: var(--subtle-fg, #D6E0EE); }
.bt-dt-group:first-of-type { margin-top: 0; }
.bt-dt-group-ct {
    font-size: 10px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}
.bt-dt-group-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    opacity: 0.55;
    flex-shrink: 0;
    transition: opacity 0.14s;
}
.bt-dt-group:hover .bt-dt-group-toggle { opacity: 1; }
.bt-dt-group-toggle svg { transition: transform 0.22s ease; }
.bt-dt-group.bt-group-collapsed .bt-dt-group-toggle svg { transform: rotate(180deg); }

/* ── Card grid ── */
.bt-dt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 6px;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.22s ease;
    max-height: 9999px;
    opacity: 1;
}
.bt-dt-grid.bt-group-grid-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin-bottom: 0 !important;
}

/* ── Single doctype card ── */
.bt-dt-card {
    background: var(--fg-color, #fff);
    border-radius: 14px;
    padding: 20px 14px 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--border-color, #C5CDD8);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: all 0.16s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    color: var(--text-color, #1B2838) !important;
    position: relative;
    overflow: hidden;
}
.bt-dt-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    transform: scaleX(0);
    transition: transform 0.16s ease;
}
.bt-dt-card:hover {
    border-color: #0078D7;
    box-shadow: 0 4px 18px rgba(0,120,215,0.16), 0 2px 6px rgba(0,0,0,0.09);
    transform: translateY(-2px);
    text-decoration: none !important;
}
.bt-dt-card:hover::after { transform: scaleX(1); background: #0078D7; }

/* Icon bubble */
.bt-dt-ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.bt-dt-ico svg {
    display: block;
    flex-shrink: 0;
}
.bt-dt-ico svg path,
.bt-dt-ico svg line,
.bt-dt-ico svg polyline,
.bt-dt-ico svg circle,
.bt-dt-ico svg ellipse,
.bt-dt-ico svg polygon,
.bt-dt-ico svg rect {
    stroke: currentColor;
}

/* Card text */
.bt-dt-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading-color, #0F1D2C);
    line-height: 1.35;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* "Single" tag shown at the bottom of single-type doctype cards */
/* ── DocType type badges ── */
.bt-dt-type-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.4;
    flex-shrink: 0;
    display: inline-block;
}
/* Single — purple */
.bt-dt-type-single  { color:#6D28D9; background:#F5F3FF; border:1px solid #DDD6FE; }
/* Submittable — blue */
.bt-dt-type-submit  { color:#1558A8; background:#EFF6FF; border:1px solid #BFDBFE; }
/* Tree — teal */
.bt-dt-type-tree    { color:#0D7E72; background:#F0FDFA; border:1px solid #99F6E4; }
/* Virtual — slate */
.bt-dt-type-virtual { color:#475569; background:#F1F5F9; border:1px solid #CBD5E1; }
/* Regular document — neutral steel */
.bt-dt-type-doc     { color:#4B6A8A; background:#EEF3F8; border:1px solid #C9D8E8; }
/* Page — amber/orange */
.bt-dt-type-page    { color:#B45309; background:#FFFBEB; border:1px solid #FDE68A; }

[data-theme="dark"] .bt-dt-type-single  { background:rgba(109,40,217,0.18); border-color:rgba(109,40,217,0.35); color:#C4B5FD; }
[data-theme="dark"] .bt-dt-type-submit  { background:rgba(21,88,168,0.18);  border-color:rgba(59,130,246,0.35); color:#93C5FD; }
[data-theme="dark"] .bt-dt-type-tree    { background:rgba(13,126,114,0.18); border-color:rgba(20,184,166,0.35); color:#5EEAD4; }
[data-theme="dark"] .bt-dt-type-virtual { background:rgba(71,85,105,0.22);  border-color:rgba(148,163,184,0.30); color:#94A3B8; }
[data-theme="dark"] .bt-dt-type-doc     { background:rgba(75,106,138,0.16); border-color:rgba(148,180,220,0.25); color:#90B4D8; }
[data-theme="dark"] .bt-dt-type-page    { background:rgba(180,83,9,0.18);   border-color:rgba(251,191,36,0.35); color:#FCD34D; }

/* ── Card action buttons (Customize / Edit Doctype) ── */
.bt-dt-card-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0;
    padding: 5px 6px;
    background: rgba(15, 29, 44, 0.82);
    border-radius: 0 0 14px 14px;
    transform: translateY(100%);
    transition: transform 0.18s ease;
    backdrop-filter: blur(4px);
}
.bt-dt-card:hover .bt-dt-card-actions {
    transform: translateY(0);
}
.bt-dt-action-btn {
    flex: 1;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.80);
    border-radius: 6px;
    padding: 0 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.bt-dt-action-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
[data-theme="dark"] .bt-dt-card-actions {
    background: rgba(0,0,0,0.72);
}

/* Custom doctype star badge — top-right corner of card */
.bt-dt-custom-badge {
    position: absolute;
    top: 7px;
    right: 8px;
    color: #E8890C;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ── Loading state ── */
.bt-dt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    flex-direction: column;
    gap: 14px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}
.bt-dt-loading svg { animation: bt-spin 1s linear infinite; opacity: 0.45; }

/* ── Empty state ── */
.bt-dt-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
}
.bt-dt-empty svg { opacity: 0.25; margin-bottom: 14px; }
.bt-dt-empty-ttl {
    font-size: 15px;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 6px;
}
.bt-dt-empty-sub { font-size: 13px; color: var(--text-muted); }

/* ── DocType browse button in navbar — blends with navbar bg, subtle glass style ── */
.bt-dt-nav-btn {
    background: rgba(255,255,255,0.11) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-radius: 20px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 12px 0 10px !important;
    cursor: pointer !important;
    color: rgba(255,255,255,0.90) !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
.bt-dt-nav-btn:hover {
    background: rgba(255,255,255,0.20) !important;
    border-color: rgba(255,255,255,0.35) !important;
    color: #ffffff !important;
}
.bt-dt-nav-btn:active { background: rgba(255,255,255,0.14) !important; }
.bt-dt-nav-icon {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}
.bt-dt-nav-icon svg { display: block !important; stroke: currentColor !important; }
.bt-dt-nav-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: inherit !important;
}
[data-theme="dark"] .bt-dt-nav-btn {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
[data-theme="dark"] .bt-dt-nav-btn:hover {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.28) !important;
}

/* ── Dark mode adjustments ── */
[data-theme="dark"] .bt-dt-modal { border-color: rgba(0,120,215,0.32); }
[data-theme="dark"] .bt-dt-tally { border-bottom-color: rgba(255,255,255,0.08); }

/* ── CodeMirror — reset letter-spacing so cursor aligns with text ── */
.CodeMirror,
.CodeMirror * { letter-spacing: 0 !important; }

/* ── ACE editor — restore monospace font and reset letter-spacing so cursor aligns with text ── */
.ace_editor,
.ace_editor * {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace !important;
    letter-spacing: 0 !important;
}

@media print { .navbar, #bt-sidenav, .layout-side-section { display: none !important; } #body { margin-left: 0 !important; } }

/* ============================================================
   §  FORM SIDEBAR — collapse / expand
   ============================================================ */

/* Smooth transitions on both columns */
.layout-side-section,
.layout-main-section-wrapper {
    transition: flex 0.25s ease, max-width 0.25s ease, width 0.25s ease;
}

/* Collapsed: zero-width sidebar, main section fills the row */
body.bt-sidebar-collapsed .layout-side-section {
    flex:       0 0 0   !important;
    max-width:  0       !important;
    min-width:  0       !important;
    width:      0       !important;
    overflow:   hidden  !important;
    padding:    0       !important;
    margin:     0       !important;
}

body.bt-sidebar-collapsed .layout-main-section-wrapper {
    flex:       0 0 100% !important;
    max-width:  100%     !important;
    width:      100%     !important;
}

/* ── Sidebar Edge Toggle Button ── */
#bt-sidebar-edge-btn {
    position:   fixed;
    top:        50vh;
    transform:  translateY(-50%);
    z-index:    1001;

    width:      32px;
    height:     72px;
    padding:    0;
    border:     none;
    outline:    none;
    border-radius: 12px;
    cursor:     pointer;

    background: var(--fg-color, #ffffff);
    color:      var(--text-color, #4a5568);
    border:     1px solid var(--border-color, #d1d5db);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);

    display:        flex;
    align-items:    center;
    justify-content: center;

    transition: background 0.15s ease, color 0.15s ease,
                box-shadow 0.15s ease, width 0.15s ease;
}

#bt-sidebar-edge-btn:hover {
    background: #0078D7;
    color:      #ffffff;
    width:      38px;
    box-shadow: 0 2px 14px rgba(0, 120, 215, 0.38);
}

#bt-sidebar-edge-btn:active {
    background: #005fa3;
    transform:  translateY(-50%) scale(0.93);
}

#bt-sidebar-edge-btn .bt-seb-ico {
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
    flex-shrink:     0;
}

[data-theme="dark"] #bt-sidebar-edge-btn,
body[data-theme="dark"] #bt-sidebar-edge-btn {
    background: var(--fg-color, #2d3748);
    color:      rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] #bt-sidebar-edge-btn:hover,
body[data-theme="dark"] #bt-sidebar-edge-btn:hover {
    background: #0078D7;
    color:      #ffffff;
}

@media (max-width: 767px) {
    #bt-sidebar-edge-btn { display: none !important; }
}

/* ── Page-head action button icons ── */
.page-head .primary-action .bt-pa-icon,
.page-head .btn-secondary .bt-pa-icon,
.page-head .custom-actions .btn .bt-pa-icon,
.page-head .inner-toolbar .btn .bt-pa-icon {
    display:        inline-flex;
    align-items:    center;
    vertical-align: middle;
    margin-right:   5px;
    flex-shrink:    0;
    line-height:    1;
    pointer-events: none;
}

/* ── Form-in-grid X close button (inside .grid-form-heading) ── */
.bt-grid-close-btn {
    position:    absolute;
    top:         45%;
    transform:   translateY(-50%);
    right:       10px;
    z-index:     10;
    padding:     0.35rem 0.45rem;  /* ~3px taller than btn-sm baseline */
    display:     inline-flex;
    align-items: center;
    justify-content: center;
    border:      1px solid rgba(255, 255, 255, 0.30);
    border-radius: 5px;
    background:  rgba(255, 255, 255, 0.14);
    color:       #ffffff;
    cursor:      pointer;
    line-height: 1;
    transition:  background 0.15s, border-color 0.15s;
}

.bt-grid-close-btn:hover {
    background:   rgba(239, 68, 68, 0.80);
    border-color: rgba(239, 68, 68, 0.95);
}

.bt-grid-close-btn:active {
    opacity: 0.8;
}

/* ============================================================
   §35  CONFIGURE COLUMNS — row-number badges + live sum bar
   ============================================================ */

/* Row number badge (prepended into the field-label col) */
.row-num-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 18px !important;
    padding: 0 4px !important;
    background: var(--subtle-accent) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* When sum bar is present, flatten the bottom edge of the rows container
   so the bar connects seamlessly */
.selected-fields.has-sum-bar {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* Sum bar — sits directly below .selected-fields, shares the border.
   Uses the same col-1/col-6/col-4/col-1 grid + 0 12px padding as the
   header row and each draggable row, so columns align pixel-perfectly. */
.col-width-sum-bar {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;   /* same horizontal as header & data rows */
    background: var(--subtle-accent) !important;
    border: 1px solid var(--border-color) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    margin-bottom: 14px !important;
}
/* "Total" label sits in the same col-6 slot as field names */
.col-width-sum-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
}
/* Sum display occupies the same col-4 slot as the column-width inputs */
.col-width-sum-display {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.col-width-sum-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-color) !important;
    transition: color 0.2s ease !important;
}
.col-width-sum-of {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}
/* Green when all columns fit without scrolling (≤ 10 units) */
.col-width-sum-bar.sum-ok .col-width-sum-value {
    color: var(--green-600, #16a34a) !important;
}
/* Blue when > 10 units — valid, grid will scroll horizontally */
.col-width-sum-bar.sum-scroll .col-width-sum-value {
    color: #0078D7 !important;
}
.col-width-sum-bar.sum-scroll .col-width-sum-of {
    color: #0078D7 !important;
    font-weight: 600 !important;
}

/* ============================================================
   §36  FRAPPE 16 CHILD TABLE HORIZONTAL SCROLL — BACKPORT
   ============================================================
   Mirrors the `column-limit-reached` mechanism from Frappe 16.
   JS adds that class to .form-grid-container when visible
   columns exceed 10 Bootstrap units.
   ============================================================ */

/* ── 1. Override Frappe 15's desktop "no-scroll" media query ── */
@media (min-width: 768px) {
    .form-grid-container.column-limit-reached {
        overflow-x: auto !important;
    }
    .form-grid-container.column-limit-reached .form-grid {
        position: relative !important;
    }
}

/* ── 2. Also enable native scroll on mobile (replaces the JS swipe trick) ── */
.form-grid-container.column-limit-reached {
    overflow-x: auto !important;
    width: 100%;
}

/* ── 3. While a row is open for inline editing: stop clipping pickers ──
   :has() is supported in Chrome 105+, Firefox 121+, Safari 15.4+          */
.form-grid-container.column-limit-reached:has(.grid-row.grid-row-open) {
    overflow-x: clip !important;
    overflow-y: unset !important;
}
.form-grid-container.column-limit-reached:has(.grid-row.grid-row-open) .form-grid {
    left: 0 !important;
}

/* ── 4a. Grid must expand past container width to trigger the scrollbar ── */
.column-limit-reached .form-grid {
    min-width: max-content !important;
}

/* ── 4b. Fixed pixel widths replace Bootstrap % widths in scroll mode ──
   flex: 0 0 (no grow) keeps header labels exactly above their inputs.
   Mirrors Frappe 16's col_sizes map: 1→60 2→100 3→140 4→200 … 12→600  */
.column-limit-reached .grid-static-col.col-xs-1  { flex: 0 0 60px  !important; width:  60px !important; min-width:  60px !important; }
.column-limit-reached .grid-static-col.col-xs-2  { flex: 0 0 100px !important; width: 100px !important; min-width: 100px !important; }
.column-limit-reached .grid-static-col.col-xs-3  { flex: 0 0 140px !important; width: 140px !important; min-width: 140px !important; }
.column-limit-reached .grid-static-col.col-xs-4  { flex: 0 0 200px !important; width: 200px !important; min-width: 200px !important; }
.column-limit-reached .grid-static-col.col-xs-5  { flex: 0 0 250px !important; width: 250px !important; min-width: 250px !important; }
.column-limit-reached .grid-static-col.col-xs-6  { flex: 0 0 300px !important; width: 300px !important; min-width: 300px !important; }
.column-limit-reached .grid-static-col.col-xs-7  { flex: 0 0 350px !important; width: 350px !important; min-width: 350px !important; }
.column-limit-reached .grid-static-col.col-xs-8  { flex: 0 0 400px !important; width: 400px !important; min-width: 400px !important; }
.column-limit-reached .grid-static-col.col-xs-9  { flex: 0 0 450px !important; width: 450px !important; min-width: 450px !important; }
.column-limit-reached .grid-static-col.col-xs-10 { flex: 0 0 500px !important; width: 500px !important; min-width: 500px !important; }
.column-limit-reached .grid-static-col.col-xs-11 { flex: 0 0 550px !important; width: 550px !important; min-width: 550px !important; }
.column-limit-reached .grid-static-col.col-xs-12 { flex: 0 0 600px !important; width: 600px !important; min-width: 600px !important; }

/* ── 5. Checkbox + row-index: fixed widths (same in heading & data rows)
   Without explicit sizes these auto-flex columns grow into all remaining
   space inside the heading row, making the checkbox area huge.         */
.column-limit-reached .grid-heading-row .data-row .row-check,
.column-limit-reached .grid-body .data-row .row-check {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    position: sticky !important;
    left: 0 !important;
    z-index: 2 !important;
}
.column-limit-reached .grid-heading-row .data-row .row-index,
.column-limit-reached .grid-body .data-row .row-index {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    position: sticky !important;
    left: 30px !important;
    z-index: 2 !important;
}
.column-limit-reached .grid-body .data-row .row-check,
.column-limit-reached .grid-body .data-row .row-index {
    background: var(--fg-color) !important;
}
.column-limit-reached .grid-heading-row .data-row .row-check,
.column-limit-reached .grid-heading-row .data-row .row-index {
    background: var(--subtle-accent, var(--subtle-fg)) !important;
}

/* ── 6. Edit / configure button: sticky on the right ──
   Only targets action cols — those WITHOUT a col-xs-* class
   (data cols always have col-xs-N; gear/pencil cols don't)  */
.column-limit-reached .data-row.row > .col.grid-static-col:last-child:not([class*="col-xs-"]) {
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    min-width: 30px !important;
    max-width: 30px !important;
    background: var(--fg-color) !important;
}
.column-limit-reached .grid-heading-row .data-row.row > .col.grid-static-col:last-child:not([class*="col-xs-"]) {
    background: var(--subtle-accent) !important;
}

/* ── 7. Row alignment in scroll mode ──
   Bootstrap 3 .row has margin-left/right: -15px so that col padding
   cancels it out.  Frappe overrides col padding to var(--grid-padding)
   (8px), so the cancellation no longer works: the row sticks out 15px
   to the left of its parent, hiding the first 15px of every data column
   under the sticky row-index column.  Zeroing the margins fixes it.   */
.column-limit-reached .grid-heading-row .data-row.row,
.column-limit-reached .grid-body .data-row.row {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ── 8. Prominent scrollbar — visible below child table ── */
.form-grid-container.column-limit-reached {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400, #aaa) transparent;
}
.form-grid-container.column-limit-reached::-webkit-scrollbar {
    height: 8px !important;
}
.form-grid-container.column-limit-reached::-webkit-scrollbar-track {
    background: var(--gray-100, #f0f0f0) !important;
    border-radius: 4px !important;
}
.form-grid-container.column-limit-reached::-webkit-scrollbar-thumb {
    background: var(--gray-500, #888) !important;
    border-radius: 4px !important;
}
.form-grid-container.column-limit-reached::-webkit-scrollbar-thumb:hover {
    background: var(--gray-700, #555) !important;
}

/* ── 9. Link / autocomplete dropdowns ──
   While the dropdown is open JS adds .grid-has-open-dropdown to the
   container, temporarily removing the clip so the list is visible.   */
.form-grid-container.column-limit-reached.grid-has-open-dropdown {
    overflow: visible !important;
}
.form-grid-container .awesomplete > ul {
    z-index: 1060 !important;
}
.form-grid-container .dropdown-menu {
    z-index: 1060 !important;
}

/* ── 10. Header / input column alignment ──
   --padding-md (15px) on .grid-row and Bootstrap .row { margin-left:-15px }
   cancel out for data rows but NOT for the heading row (padding=0), so data
   cols start 15px to the right of heading cols.  Zeroing .grid-row's
   horizontal padding makes both rows start at the same x-position.

   Also fix .form-in-grid: its margin:-15px trick was counteracting the
   grid-row padding we just removed — reset it to 0 in scroll mode.     */
.column-limit-reached .grid-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.column-limit-reached .grid-row-open .form-in-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   §37  MULTICHECK FIELD SEARCH  (Add / Remove Columns dialog)
   ============================================================ */

.mcs-search-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 14px !important;
    background: var(--control-bg) !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 0 10px !important;
    transition: border-color 0.15s ease !important;
}
.mcs-search-wrap:focus-within {
    border-color: #0078D7 !important;
    box-shadow: 0 0 0 3px rgba(0,120,215,0.12) !important;
}

.mcs-search-icon {
    display: flex !important;
    align-items: center !important;
    color: var(--text-muted) !important;
    flex-shrink: 0 !important;
}

.mcs-search-input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
}
.mcs-search-input::placeholder {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}

.mcs-clear-btn {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transition: opacity 0.15s ease !important;
}
.mcs-clear-btn:hover { opacity: 1 !important; }