/*
 * Keytech Theme - Custom Sidebar Styles
 * Replaces default Frappe sidebar with custom sidebar
 */

/* ============================
   1. HIDE DEFAULT FRAPPE WORKSPACE SIDEBAR
   (List/Form sidebars are kept intact)
   ============================ */

#page-Workspaces .layout-side-section,
#page-Workspaces .list-sidebar.overlay-sidebar,
#page-Workspaces .desk-sidebar,
#page-Workspaces .workspace-sidebar-skeleton {
    display: none !important;
}

/* ============================
   2. FULL WIDTH LAYOUT
   Remove Frappe container max-width constraints
   ============================ */

.main-section {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#body {
    flex: 1 !important;
}

body.kt-sidebar-expanded #body {
    margin-left: 240px !important;
}

body.kt-sidebar-collapsed #body {
    margin-left: 60px !important;
}

/* Navbar: full width */
.navbar .container {
    max-width: none !important;
    width: 100% !important;
}

/* Override Frappe's .container max-width inside #body */
#body .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.page-container,
.page-body,
.layout-main-section {
    max-width: none !important;
    width: 100% !important;
}

/* `.layout-main-section-wrapper` is a Bootstrap `.col`, so it keeps `.col`'s
   own `max-width: 100%`; stripping that cap is what broke the mobile list. */
.layout-main-section-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

/* ── Mobile: stack the two columns ──
   The side column is `col-lg-2`, which below the lg breakpoint is 100% wide,
   so the row is meant to wrap and give the content its own full-width line —
   that is exactly what Frappe does on its own (both columns measured 371px in
   a 371px viewport). With the wrapper's max-width cap removed it stopped
   wrapping: both columns shared one line, the side column took the full width,
   and the wrapper — `flex: 1 1 0` with nothing holding it open — collapsed to
   0px. The list still built all 20 rows; they were just rendering inside a
   zero-width box, which is why the list area looked blank on a phone while
   the page still scrolled.

   Stating the stack explicitly rather than relying on flex min-size subtleties:
   below lg, both columns are full width, in the order the markup declares. */
@media (max-width: 991.98px) {
    .row.layout-main > .layout-main-section-wrapper,
    .row.layout-main > .layout-side-section {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Workspace page: full width */
[data-page-route="Workspaces"] .layout-main-section-wrapper {
    margin-top: 0 !important;
}

/* Matches the drawer breakpoint below: once the sidebar stops being docked,
   the body must not keep reserving a gutter for it. */
@media (max-width: 991.98px) {
    body.kt-sidebar-expanded #body,
    body.kt-sidebar-collapsed #body {
        margin-left: 0 !important;
    }
}

/* ============================
   3. NEW SIDEBAR
   ============================ */

#kt-sidebar {
    position: fixed !important;
    top: var(--navbar-height, 48px) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 240px !important;
    height: calc(100vh - var(--navbar-height, 48px)) !important;
    background: var(--bg-color) !important;
    border-right: 1px solid var(--border-color) !important;
    z-index: 1020 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    box-shadow: var(--shadow-base) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

body.kt-sidebar-collapsed #kt-sidebar {
    width: 60px !important;
}

/* ============================
   4. SIDEBAR BODY
   ============================ */

#kt-sidebar .kt-sidebar-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 10px !important;
}

/* Top-level rows are the anchors of each group — hold them at full strength.
   :not(.active) matters: without it this selector outranks the .active rule
   and repainted the active row's label dark on the blue pill. */
#kt-sidebar > .kt-sidebar-body > .kt-sidebar-menu > .kt-sidebar-item:not(.active) > .kt-sidebar-link {
    font-weight: 500 !important;
    color: var(--bt-sidebar-color, #425466) !important;
}

/* Active row always wins, at any depth */
#kt-sidebar > .kt-sidebar-body > .kt-sidebar-menu > .kt-sidebar-item.active > .kt-sidebar-link,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-label {
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
}

/* Group that is open reads slightly stronger than the collapsed ones */
#kt-sidebar .kt-sidebar-group.expanded > .kt-sidebar-link {
    color: var(--bt-heading-color, #0A2540) !important;
    font-weight: 600 !important;
}

#kt-sidebar .kt-sidebar-body::-webkit-scrollbar {
    width: 4px !important;
}

#kt-sidebar .kt-sidebar-body::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color) !important;
    border-radius: 4px !important;
}

/* ============================
   6. SIDEBAR MENU
   ============================ */

#kt-sidebar .kt-sidebar-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

#kt-sidebar .kt-sidebar-item {
    position: relative !important;
    display: block !important;
}

#kt-sidebar .kt-sidebar-link {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 10px !important;
    color: var(--bt-sidebar-color, #425466) !important;
    text-decoration: none !important;
    /* Whole-pixel size, normal weight and a real line-height. The previous
       13.5px / w480 / line-height:1 rendered thin, cramped and sub-pixel
       blurry next to the rest of the UI, which uses 14px / 500 / 1.5. */
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    transition: all 0.15s ease !important;
    gap: 10px !important;
    border-radius: 6px !important;
    position: relative !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

#kt-sidebar .kt-sidebar-link:hover {
    background: var(--bt-sidebar-hover-bg, rgba(10, 37, 64, 0.05)) !important;
    color: var(--bt-sidebar-color, #0A2540) !important;
    text-decoration: none !important;
}

#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link {
    background: var(--bt-sidebar-active-bg, #318dd8) !important;
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--bt-primary, #318dd8) 20%, transparent) !important;
}

/* no left accent bar — the rounded blue pill is the active indicator */
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link::before {
    content: none !important;
}

/* ============================
   7. SIDEBAR ICONS
   ============================ */

#kt-sidebar .kt-sidebar-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
}

#kt-sidebar .kt-sidebar-icon i {
    font-size: 16px !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-icon {
    margin: 0 auto !important;
}

/* ============================
   COLLAPSED SIDEBAR (60px rail)
   Children kept their 34px indent, which pushed their icons past the rail
   and clipped them. Everything centres on one axis instead.
   ============================ */

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-body {
    padding: 12px 6px !important;
    overflow-x: hidden !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-link,
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-children .kt-sidebar-link,
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-children .kt-sidebar-children .kt-sidebar-link {
    padding: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    height: 40px !important;
    width: 40px !important;
    margin: 2px auto !important;
    border-radius: 8px !important;
}

/* No nesting rail in the rail */
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-children::before {
    display: none !important;
}

/* A 60px rail is top-level navigation. Showing children too flattened
   parents and children into one undifferentiated column of glyphs with no
   way to tell what belonged to what — so children are hidden here and the
   parent group carries the active state instead. */
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-children {
    display: none !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-group.expanded > .kt-sidebar-children {
    display: none !important;
}

/* Parent of the active page lights up so the rail still shows where you are */
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-item:has(.kt-sidebar-item.active) > .kt-sidebar-link {
    background: var(--bt-sidebar-active-bg, #318dd8) !important;
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent) !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-item:has(.kt-sidebar-item.active) > .kt-sidebar-link .kt-sidebar-icon svg {
    filter: brightness(0) invert(1) !important;
}

/* Icons must stay visible at their own size, never squeezed */
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-icon,
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-children .kt-sidebar-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
    margin: 0 !important;
    flex: 0 0 20px !important;
}

/* Active row becomes a centred square, not a stretched pill */
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link {
    width: 40px !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent) !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-footer {
    padding: 10px 6px !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-user {
    justify-content: center !important;
    padding: 6px 0 !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-label,
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-chevron,
body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-badge {
    display: none !important;
}

/* ============================
   8. SIDEBAR LABELS
   ============================ */

#kt-sidebar .kt-sidebar-label {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ============================
   9. SIDEBAR BADGES
   ============================ */

#kt-sidebar .kt-sidebar-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 10px !important;
    background: var(--bg-blue) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* ============================
   11. SIDEBAR CHEVRON
   ============================ */

#kt-sidebar .kt-sidebar-chevron {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s !important;
    color: inherit !important;
}

#kt-sidebar .kt-sidebar-chevron svg,
#kt-sidebar .kt-sidebar-chevron svg use {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

#kt-sidebar .kt-sidebar-group.expanded > .kt-sidebar-link .kt-sidebar-chevron {
    transform: rotate(90deg) !important;
}

/* ============================
   12. SIDEBAR CHILDREN
   ============================ */

#kt-sidebar .kt-sidebar-children {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
}

#kt-sidebar .kt-sidebar-group.expanded > .kt-sidebar-children {
    display: block !important;
}

/* Children sit against a guide rail so the nesting is visible at a glance,
   and read one tone lighter so the parent stays the anchor of the group. */
#kt-sidebar .kt-sidebar-children {
    position: relative !important;
}

#kt-sidebar .kt-sidebar-children::before {
    content: '' !important;
    position: absolute !important;
    left: 19px !important;
    top: 2px !important;
    bottom: 2px !important;
    width: 1px !important;
    background: var(--bt-sidebar-divider, rgba(10, 37, 64, 0.10)) !important;
}

#kt-sidebar .kt-sidebar-children .kt-sidebar-link {
    height: 34px !important;
    padding: 0 10px 0 34px !important;
    font-size: 13.5px !important;
    line-height: 18px !important;
    font-weight: 450 !important;
    opacity: 0.86 !important;
}

#kt-sidebar .kt-sidebar-children .kt-sidebar-link:hover,
#kt-sidebar .kt-sidebar-children .kt-sidebar-item.active > .kt-sidebar-link {
    opacity: 1 !important;
}

#kt-sidebar .kt-sidebar-children .kt-sidebar-children .kt-sidebar-link {
    padding: 0 10px 0 48px !important;
}

/* Sub-items are text-only while expanded: the parent icon already names the
   domain, and Frappe's doctype glyphs vary too much in weight to sit in a
   tidy column. The guide rail carries the hierarchy instead.
   NOTE: only in expanded mode — collapsed has no labels, so icons stay. */
body:not(.kt-sidebar-collapsed) #kt-sidebar .kt-sidebar-children .kt-sidebar-icon {
    display: none !important;
}

body:not(.kt-sidebar-collapsed) #kt-sidebar .kt-sidebar-children .kt-sidebar-link {
    padding-left: 34px !important;
}

#kt-sidebar .kt-sidebar-children .kt-sidebar-icon {
    width: 16px !important;
    height: 16px !important;
    font-size: 13px !important;
}

#kt-sidebar .kt-sidebar-children .kt-sidebar-children .kt-sidebar-icon {
    display: none !important;
}

/* ============================
   13. SIDEBAR FOOTER
   ============================ */

#kt-sidebar .kt-sidebar-footer {
    border-top: none !important;
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#kt-sidebar .kt-sidebar-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
}

#kt-sidebar .kt-sidebar-user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

#kt-sidebar .kt-sidebar-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#kt-sidebar .kt-sidebar-user-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-color) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#kt-sidebar .kt-sidebar-user .avatar-medium {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-user {
    justify-content: center !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-user-name {
    display: none !important;
}

/* ============================
   14. SIDEBAR TOGGLE (CHEVRON)
   ============================ */

#kt-sidebar .kt-sidebar-toggle {
    position: absolute !important;
    right: -14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--bg-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-base) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    z-index: 1022 !important;
    transition: all 0.15s !important;
    padding: 0 !important;
    overflow: visible !important;
}

#kt-sidebar .kt-sidebar-toggle .octicon {
    font-size: 12px !important;
    line-height: 1 !important;
}

#kt-sidebar .kt-sidebar-toggle:hover {
    background: var(--fg-hover-color) !important;
    color: var(--text-color) !important;
    border-color: var(--dark-border-color) !important;
}

#kt-sidebar .kt-sidebar-toggle .kt-sidebar-toggle-label {
    display: none !important;
}

body.kt-sidebar-collapsed #kt-sidebar .kt-sidebar-toggle .octicon {
    transform: rotate(180deg) !important;
}

/* ============================
   15. MOBILE
   ============================ */

.kt-sidebar-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1019 !important;
}

/* Navbar control that opens the drawer. Frappe's own .sidebar-toggle-btn in
   the page head belongs to the list/form sidebar, so the main menu needs its
   own trigger; it is hidden above the breakpoint where the sidebar is docked. */
.kt-mobile-menu-btn {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    margin-right: 2px;
    /* The fallback matters more than it looks. It used to be #FFFFFF, which is
       correct only for a dark navbar; this site sets navbar_bg_color to
       #ffffff and leaves navbar_text_color empty, so --bt-navbar-color is
       unset and the icon rendered white on white — present, sized, clickable,
       and completely invisible. The fallback now matches the breadcrumb text
       (#4E5A6B), and a DocType navbar_text_color still overrides it. */
    color: var(--bt-navbar-color, var(--text-muted, #4E5A6B));
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /* Comfortable tap target on a phone. */
    min-width: 40px;
    min-height: 40px;
}

/* Derived from the icon colour so it reads on a light or a dark navbar. */
.kt-mobile-menu-btn:hover,
.kt-mobile-menu-btn:focus-visible {
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* 991.98px, not 768px. The layout already goes single-column below lg
   (the side column is `col-lg-2`), and a phone in a browser's "desktop site"
   mode reports a ~980px layout viewport rather than ~360px — at 768px the
   drawer and its hamburger never appeared there, so the menu stayed
   unreachable exactly where it was reported broken. Below lg the sidebar is a
   drawer; at lg and above it stays docked. */
@media (max-width: 991.98px) {
    .kt-mobile-menu-btn {
        display: inline-flex;
    }

    #kt-sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.2s ease !important;
    }

    body.kt-sidebar-mobile-open #kt-sidebar {
        transform: translateX(0) !important;
    }

    body.kt-sidebar-mobile-open .kt-sidebar-overlay {
        display: block !important;
    }

    /* Frappe's own list/form sidebar is an overlay at z-index 9999 and its
       open state persists in user settings, so it can already be sitting over
       the viewport when the main menu is opened. The drawer has to clear it or
       the menu opens invisibly underneath. Mobile only — the docked desktop
       sidebar keeps its normal stacking. */
    #kt-sidebar {
        z-index: 10001 !important;
    }

    body.kt-sidebar-mobile-open .kt-sidebar-overlay {
        z-index: 10000 !important;
    }
}

/* ========================================
   CHILD TABLE — horizontal scroll on small screens
   ========================================
   Frappe gives `.form-grid` a `min-width` (738px on Purchase Order Items) and
   puts it in a `.form-grid-container` set to `overflow-x: clip`. `clip` cuts
   the content off WITHOUT creating a scroll container, so on a 375px phone the
   columns past the first ~299px are simply unreachable — no swipe, no scrollbar.
   Measured identical with the theme disabled, so this is Frappe's own
   behaviour rather than something the theme broke; switching to `auto` on
   small screens makes the same table swipeable and changes nothing on desktop. */
@media (max-width: 991.98px) {
    .form-grid-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================================
   DESIGN TOKENS — override Frappe's own variables
   Sets the base palette/scale so components inherit a coherent
   look. The --bt-* rules further below still win (they use
   !important), so DocType "Bigtech Theme" settings keep control.
   ============================================================ */

:root,
[data-theme="light"] {
    --primary: #318dd8;
    --primary-color: #318dd8;
    --brand-color: #318dd8;

    --gray-50:  #F6F9FC;
    --gray-100: #EFF3F8;
    --gray-200: #E3E8EE;
    --gray-300: #D3D9E0;
    --gray-400: #A3ACB9;
    --gray-500: #8792A2;
    --gray-600: #697386;
    --gray-700: #425466;
    --gray-800: #30313D;
    --gray-900: #0A2540;

    /* Text darkened for readability: muted/light tiers were 4.78:1 and 3.5:1
       on white — too washed out for the small type ERPNext uses everywhere. */
    --heading-color: #0A2540;
    --text-color: #2B3445;
    --text-neutral: #2B3445;
    --text-dark: #0A2540;
    --text-muted: #4E5A6B;
    --text-light: #697386;

    --bg-color: #F6F9FC;
    --fg-color: #FFFFFF;
    --card-bg: #FFFFFF;
    --subtle-accent: #F6F9FC;
    --subtle-fg: #EFF3F8;
    --control-bg: #FFFFFF;
    --control-bg-on-gray: #EFF3F8;
    --fg-hover-color: #EFF3F8;
    --modal-bg: #FFFFFF;
    --awesomplete-hover-bg: #EFF3F8;
    --disabled-control-bg: #F6F9FC;
    --disabled-text-color: #8792A2;

    --border-color: #E3E8EE;
    --dark-border-color: #D3D9E0;
    --table-border-color: #E3E8EE;
    --btn-group-border-color: #D3D9E0;

    --border-radius-tiny: 2px;
    --border-radius-sm: 4px;
    --border-radius: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;

    --btn-primary: #318dd8;
    --btn-default-bg: #FFFFFF;
    --btn-default-hover-bg: #EFF3F8;

    --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);

    --focus-default: 0 0 0 2px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent);
    --checkbox-color: #318dd8;
    --checkbox-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent);

    --scrollbar-thumb-color: #C1C8D1;
    --highlight-color: #F6F9FC;
    --progress-bar-bg: #318dd8;
    --date-active-bg: #318dd8;
    --date-active-text: #FFFFFF;
    --skeleton-bg: #EFF3F8;

    --blue-500: #318dd8;
    --blue-600: #2a78b8;
    --blue-700: #215f92;
    --bg-blue: #E0EBFF;
    --text-on-blue: #215f92;
    --bg-light-blue: #F0F5FF;
    --text-on-light-blue: #2a78b8;

    --alert-bg-info: #F0F5FF;
    --alert-text-info: #215f92;
    --alert-bg-success: #ECFDF5;
    --alert-text-success: #0B8C3E;
    --alert-bg-danger: #FFF1F3;
    --alert-text-danger: #DF1B41;
    --alert-bg-warning: #FFFBEB;
    --alert-text-warning: #B76E00;
}

/* ============================================================
   COMPONENT POLISH — squarish corners, blue focus, clear feedback
   ============================================================ */

/* Links read as normal dark text; blue is reserved for buttons and the
   active nav item, so lists/reports don't turn into a wall of blue. */
a,
.list-row a,
.list-subject a,
.level-item.bold.ellipsis a,
.datatable .dt-cell__content a,
.frappe-list a {
    color: var(--bt-link-color, var(--bt-text-color, #1F2A3C)) !important;
}

a:hover,
.list-row a:hover,
.frappe-list a:hover,
.datatable .dt-cell__content a:hover {
    color: var(--bt-heading-color, #0A2540) !important;
    text-decoration: underline;
}

/* --- Buttons — every colour comes from the DocType, never hardcoded --- */
.btn {
    border-radius: 6px !important;
    font-weight: 500;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.btn-primary,
.btn-primary-dark {
    background-color: var(--bt-btn-primary-bg, var(--bt-primary, #318dd8)) !important;
    border: 1px solid var(--bt-btn-primary-border, var(--bt-btn-primary-bg, var(--bt-primary, #318dd8))) !important;
    color: var(--bt-btn-primary-color, #FFFFFF) !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
    background-color: var(--bt-btn-primary-hover-bg, var(--bt-primary, #2a78b8)) !important;
    color: var(--bt-btn-primary-hover-color, #FFFFFF) !important;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 2px var(--bt-focus-ring, color-mix(in srgb, var(--bt-primary, #318dd8) 30%, transparent)) !important;
}

/* Secondary / toolbar buttons: one quiet border, no muddy mixed greys */
.btn-default,
.page-actions .btn-default,
.page-actions .btn:not(.btn-primary):not(.btn-primary-dark),
.standard-actions .btn-default,
.custom-actions .btn-default {
    background-color: var(--bt-btn-secondary-bg, #FFFFFF) !important;
    border: 1px solid var(--bt-btn-secondary-border, var(--bt-card-border-color, #E3E8EE)) !important;
    color: var(--bt-btn-secondary-color, var(--bt-text-color, #2B3445)) !important;
    font-weight: 500;
    box-shadow: none !important;
}

.btn-default:hover,
.page-actions .btn-default:hover,
.standard-actions .btn-default:hover,
.custom-actions .btn-default:hover {
    background-color: var(--bt-btn-secondary-hover-bg, #F6F9FC) !important;
    border-color: var(--bt-btn-secondary-border, var(--bt-card-border-color, #D3D9E0)) !important;
    color: var(--bt-btn-secondary-hover-color, var(--bt-heading-color, #0A2540)) !important;
}

/* The primary action in the toolbar keeps the brand fill */
.page-actions .btn-primary,
.page-actions .btn-primary-dark,
.standard-actions .btn-primary {
    background-color: var(--bt-btn-primary-bg, var(--bt-primary, #318dd8)) !important;
    border-color: var(--bt-btn-primary-bg, var(--bt-primary, #318dd8)) !important;
    color: var(--bt-btn-primary-color, #FFFFFF) !important;
}

.page-actions .btn-primary span,
.page-actions .btn-primary-dark span,
.standard-actions .btn-primary span {
    color: var(--bt-btn-primary-color, #FFFFFF) !important;
}

/* --- Inputs: white, light border, blue focus ring --- */
.form-control:focus,
.form-control:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent) !important;
    border-color: #318dd8 !important;
    outline: none;
}

.frappe-control.has-error .form-control:focus {
    box-shadow: 0 0 0 2px rgba(223, 27, 65, 0.25) !important;
    border-color: #DF1B41 !important;
}

/* Roomier, softer fields inside forms/modals — filled, not outlined */
.form-page .form-control:not([type="checkbox"]):not([type="radio"]),
.form-layout .form-control:not([type="checkbox"]):not([type="radio"]),
.modal-dialog .form-control:not([type="checkbox"]):not([type="radio"]) {
    height: 44px !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-page textarea.form-control,
.form-layout textarea.form-control,
.modal-dialog textarea.form-control {
    height: auto !important;
    min-height: 88px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

.form-page .like-disabled-input,
.form-layout .like-disabled-input,
.modal-dialog .like-disabled-input {
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
}

/* ── Inputs that carry an icon or swatch inside them ──
   The blanket 14px left padding above sits on top of anything Frappe
   absolutely-positions inside the field. Each of these needs its own
   allowance, or the glyph lands on the text. */

/* Color control: .selected-color swatch is 16px at left:8px.
   Selectors are deliberately long — they must out-specify the
   `.form-layout .form-control:not(...)` padding rule above. */
.form-layout .frappe-control[data-fieldtype="Color"] input.form-control,
.form-page .frappe-control[data-fieldtype="Color"] input.form-control,
.modal-dialog .frappe-control[data-fieldtype="Color"] input.form-control,
.frappe-control[data-fieldtype="Color"] input.form-control {
    padding-left: 34px !important;
}

/* Frappe pins the swatch at a fixed top:6px, which was sized for a shorter
   field — centre it against the theme's taller input instead. */
.frappe-control[data-fieldtype="Color"] .control-input {
    position: relative !important;
}

.frappe-control[data-fieldtype="Color"] .selected-color {
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 10px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
}

/* Global search dialog.
   Frappe designs this as a flat, full-width header field (no border, no
   radius, just a bottom rule). The theme's filled+rounded+focus-ring
   treatment fought that and left the magnifier sitting on the box edge, so
   this input opts out and keeps Frappe's own shape. */
.search-dialog .search-header input.search-input.form-control,
.search-dialog .search-header input.form-control,
.search-dialog input.search-input {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 48px !important;
    font-size: 15px !important;
    padding: 12px 12px 12px 34px !important;
}

.search-dialog .search-header input.search-input:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-dialog .search-header .input-group {
    background: transparent !important;
    border: none !important;
}

.search-dialog .search-header .search-icon {
    left: 0 !important;
    padding-left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-muted, #4E5A6B) !important;
}

/* Text clears the icon's new position */
.search-dialog .search-header input.search-input.form-control,
.search-dialog .search-header input.form-control,
.search-dialog input.search-input {
    padding-left: 48px !important;
}

.search-dialog .search-header {
    border-bottom: 1px solid var(--bt-card-border-color, #EFF3F8) !important;
}

/* Minimise / close controls were pinned flush to the top edge */
.search-dialog .modal-actions {
    top: 14px !important;
    right: 12px !important;
}

.search-dialog .modal-actions .btn-link {
    padding: 4px 6px !important;
}

/* Navbar quick-search keeps its own icon allowance too */
.navbar .search-bar .form-control,
#navbar-search {
    padding-left: 34px !important;
}

/* Filled fields need a fill change + ring on focus, since there is no border */
.form-layout .form-control:focus,
.form-page .form-control:focus,
.modal-dialog .form-control:focus {
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent) !important;
}

/* --- Cards --- */
.frappe-card {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
}

/* --- List rows: hover feedback --- */
.list-row-container:hover {
    background-color: var(--bt-row-hover-bg, #F6F9FC) !important;
}

/* --- Readability: darker labels and secondary text --- */
.control-label,
label.control-label,
.form-group .control-label {
    color: #425466 !important;
    font-weight: 500;
}

.text-muted,
.list-row-head .level-item,
.list-subject .level-item,
.frappe-list .list-row-head span {
    color: var(--text-muted, #4E5A6B) !important;
}

/* Column headers in list views: darker + clearer */
.list-row-head .level-left,
.list-row-head .level-right,
.list-row-head .list-subject {
    color: var(--bt-text-color, #2B3445) !important;
    font-weight: 600 !important;
}

/* Field VALUES are the data people came to read — keep them the darkest tier */
.form-layout .form-control,
.form-page .form-control,
.modal-dialog .form-control,
.form-control:disabled,
.form-control[readonly],
.like-disabled-input {
    color: #1F2A3C !important;
    -webkit-text-fill-color: #1F2A3C !important;
    opacity: 1 !important;
}

/* --- Checkboxes: always a small square, brand blue when checked --- */
input[type="checkbox"],
input[type="checkbox"].input-with-feedback,
.frappe-control input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    border: 1px solid var(--bt-input-border, #C7CFD9) !important;
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    accent-color: var(--bt-primary, #318dd8);
    cursor: pointer;
}

/* Checked state. Frappe marks the READ-ONLY copy with .disabled-selected
   instead of the :checked property, so it must be styled explicitly —
   otherwise a ticked box renders blank on a saved/read-only document. */
input[type="checkbox"]:checked,
input[type="checkbox"].input-with-feedback:checked,
.frappe-control input[type="checkbox"]:checked,
input[type="checkbox"].disabled-selected,
.frappe-control input[type="checkbox"].disabled-selected {
    background-color: var(--bt-primary, #318dd8) !important;
    border-color: var(--bt-primary, #318dd8) !important;
    background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 9px !important;
}

/* Read-only unchecked copy stays a plain empty box */
input[type="checkbox"].disabled-deselected {
    background-color: #FFFFFF !important;
    border-color: #C7CFD9 !important;
    background-image: none !important;
}

input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent) !important;
    outline: none !important;
}

/* --- Modals: soft corners, clean header/footer separators --- */
.modal-dialog .modal-content {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.16), 0 0 0 1px rgba(10, 37, 64, 0.05) !important;
}

.modal-dialog .modal-header,
.modal-dialog .modal-footer {
    border-color: var(--bt-card-border-color, #EFF3F8) !important;
}

.modal-dialog .modal-title {
    color: var(--bt-heading-color, #0A2540) !important;
    font-weight: 600 !important;
}

/* --- Dropdowns / autocomplete --- */
.dropdown-menu,
.awesomplete > ul {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(10, 37, 64, 0.12), 0 0 0 1px rgba(10, 37, 64, 0.05) !important;
    padding: 4px !important;
}

/* :not(.active) matters — this colour rule was overriding the white text on
   the selected dropdown row (e.g. the language switcher), leaving dark text
   on a dark blue fill that could not be read. */
.dropdown-item:not(.active):not(.selected),
.awesomplete > ul > li:not([aria-selected="true"]) {
    border-radius: 6px !important;
    color: var(--bt-text-color, #2B3445) !important;
}

.dropdown-item:not(.active):hover,
.awesomplete > ul > li:not([aria-selected="true"]):hover {
    background-color: var(--bt-menu-hover-bg, #F0F5FF) !important;
    color: var(--bt-menu-hover-color, #215f92) !important;
}

/* Selected row: background AND text both come from the theme's active pair,
   so they can never end up the same tone. */
.dropdown-item.active,
.dropdown-item.selected,
.dropdown-item.active:hover,
.language-submenu .dropdown-item.active,
.language-submenu .dropdown-item.active:hover,
.awesomplete > ul > li[aria-selected="true"] {
    background-color: var(--bt-sidebar-active-bg, var(--bt-primary, #318dd8)) !important;
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
    border-radius: 6px !important;
}

.dropdown-item.active *,
.language-submenu .dropdown-item.active *,
.awesomplete > ul > li[aria-selected="true"] * {
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
}

/* Search highlights.
   On a normal row the yellow <mark> is fine (dark text on yellow). On the
   SELECTED row the text is white, and white-on-yellow is unreadable — so
   there the highlight drops the fill and marks the match with weight and an
   underline instead, which stays legible whatever the active colour is. */
.awesomplete mark,
.awesomplete > ul > li mark {
    background-color: var(--bt-search-highlight-bg, #FFF3B0) !important;
    color: var(--bt-heading-color, #0A2540) !important;
    padding: 0 1px !important;
    border-radius: 2px !important;
}

.awesomplete > ul > li[aria-selected="true"] mark,
.dropdown-item.active mark {
    background-color: transparent !important;
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* --- Navbar: hide the Help dropdown --- */
.navbar .dropdown-help,
.navbar #toolbar-help,
.navbar [aria-controls="toolbar-help"],
.navbar .vertical-bar + .dropdown:has([aria-controls="toolbar-help"]) {
    display: none !important;
}

/* --- Filter button with active filters --- */
.btn.filter-button.btn-primary-light,
.filter-selector .btn-primary-light {
    background-color: var(--bt-filter-active-bg, color-mix(in srgb, var(--bt-primary, #318dd8) 8%, transparent)) !important;
    color: var(--bt-primary, #318dd8) !important;
    border: 1px solid var(--bt-filter-active-border, color-mix(in srgb, var(--bt-primary, #318dd8) 22%, transparent)) !important;
    font-weight: 500 !important;
}

.btn.filter-button.btn-primary-light:hover {
    background-color: var(--bt-filter-active-hover-bg, color-mix(in srgb, var(--bt-primary, #318dd8) 14%, transparent)) !important;
}

.btn.filter-button .filter-icon.active svg,
.btn.filter-button .filter-icon.active use {
    stroke: var(--bt-primary, #318dd8) !important;
    color: var(--bt-primary, #318dd8) !important;
}

/* The count reads as a solid chip instead of a pale hollow circle */
.btn.filter-button .filter-label {
    background-color: var(--bt-primary, #318dd8) !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    text-align: center !important;
    margin-left: 6px !important;
}

/* --- Status pills: readable weight --- */
.indicator-pill {
    font-weight: 500 !important;
    border-radius: 4px !important;
}

/* --- Page title: trimmed down; 20px/650 sat too tall in its bar --- */
.page-head .title-text,
.page-title h1, .page-title .title-text {
    color: var(--bt-heading-color, #0A2540) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    letter-spacing: -0.01em !important;
}

/* Slimmer title bar to match the smaller type */
.page-head .page-head-content {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.page-head .page-title,
.page-head .title-area {
    line-height: 22px !important;
}

/* --- Report DataTable: hairline grid, readable header, blue links --- */

/* The DataTable container inherited the page's grey, so whenever the columns
   did not reach the full card width the leftover space read as a grey block
   sitting inside a white card. */
.datatable,
.datatable .dt-scrollable,
.datatable .dt-body,
.dt-container {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
}

/* Vertical column separators: numeric report columns are much easier to
   follow down the page when each one is bounded. */
.datatable .dt-cell,
.datatable .dt-cell--header {
    border-color: var(--bt-table-border, #EFF3F8) !important;
    border-right: 1px solid var(--bt-table-border, #EFF3F8) !important;
}

/* No trailing rule hanging off the last column */
.datatable .dt-row .dt-cell:last-child,
.datatable .dt-row-header .dt-cell:last-child {
    border-right: none !important;
}

.datatable .dt-row-header,
.datatable .dt-cell--header,
.datatable .dt-cell--header-highlight {
    background-color: #FBFCFD !important;
}

.datatable .dt-cell--header .dt-cell__content {
    color: var(--bt-text-color, #2B3445) !important;
    font-weight: 600 !important;
}

.datatable .dt-cell__content {
    color: var(--bt-text-color, #2B3445) !important;
}

/* Report View links stay neutral like the rest of the tables — a grid full
   of blue anchors reads as noise. Blue is kept for buttons and active nav. */
.datatable a,
.datatable .dt-cell__content a,
.datatable .dt-cell__content .link {
    color: var(--bt-link-color, var(--bt-text-color, #1F2A3C)) !important;
    text-decoration: none !important;
}

.datatable a:hover,
.datatable .dt-cell__content a:hover {
    color: var(--bt-heading-color, #0A2540) !important;
    text-decoration: underline !important;
}

.datatable .dt-row:hover .dt-cell {
    background-color: var(--bt-row-hover-bg, #F6F9FC) !important;
}

/* Totals / closing rows read as summary, not as data */
.datatable .dt-row-totalRow .dt-cell__content,
.datatable .dt-cell--tree-close .dt-cell__content {
    font-weight: 600 !important;
    color: var(--bt-heading-color, #0A2540) !important;
}

/* --- Comments / Activity block --- */

/* The grey "Activity" band had no inset, so its heading sat flush against
   the edge of its own background. Pad it and round it into a proper chip. */
.timeline-item.activity-title {
    padding: 6px 16px !important;
    border-radius: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 10px !important;
}

.timeline-item.activity-title h4 {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 20px !important;
    color: var(--bt-heading-color, #0A2540) !important;
}

/* The action row inside the band was adding most of the extra height */
.timeline-item.activity-title .timeline-items,
.timeline-item.activity-title .timeline-item,
.timeline-item.activity-title .timeline-content {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.timeline-item.activity-title .btn {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Comment composer: breathing room between avatar and input */
.comment-input-wrapper,
.form-comments .comment-input-container {
    gap: 10px !important;
}

.form-comments .avatar,
.comment-input-header .avatar {
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

/* --- Hairline dividers between form sections --- */
.form-section,
.row.form-section,
.form-page .section-body + .form-section,
.form-dashboard-section {
    border-color: var(--bt-card-border-color, #EFF3F8) !important;
}

.form-section .section-head,
.form-section-heading {
    color: #0A2540;
    font-weight: 600;
}

/* NAVBAR */
.navbar { background-color: var(--bt-navbar-bg) !important; }
.navbar.container, .navbar-brand,
#navbar-breadcrumbs li a, #navbar-breadcrumbs li.disabled a,
.btn-reset.nav-link span { color: var(--bt-navbar-color) !important; }
.navbar-toggler, .navbar-toggler span svg,
.navbar svg.es-icon.icon-sm use { fill: var(--bt-navbar-color) !important; stroke-width: 0; }
button.navbar-toggler { border-color: var(--bt-navbar-color) !important; }
.btn-reset.nav-link span svg, .btn-reset.nav-link span svg use {
    stroke: var(--bt-navbar-color) !important; fill: var(--bt-navbar-color) !important;
}
.input-group.search-bar .form-control, .input-group.search-bar input,
.awesomplete input, .navbar .search-bar input,
#navbar-search {
    color: var(--bt-navbar-color) !important;
    border: 1px solid var(--bt-input-border, #888) !important;
    background-color: var(--bt-input-bg) !important;
}
.navbar .search-bar .icon { color: var(--bt-navbar-color) !important; }

/* BODY & CARDS */
body { background-color: var(--bt-body-bg, #F6F9FC) !important; }
.content.page-container { background-color: var(--bt-body-bg, #F6F9FC) !important; }

/* Page title bar rendered as its own card, matching the content card below */
.page-head {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.page-head .page-head-content {
    background-color: var(--bt-card-bg, #fff) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
    /* 20px matches the field inset inside the content card below,
       so hamburger, tabs, labels and inputs all share one left edge */
    padding: 8px 20px !important;
    margin: 10px 0 0 0 !important;
    min-height: 0 !important;
}

/* Breathing room between the title card and the content below it */
.row.layout-main {
    margin-top: 12px !important;
}

/* No stray gray outline on the content wrapper */
.col.layout-main-section-wrapper,
.layout-main-section-wrapper {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* With the row gutter zeroed, drop the columns' own 15px padding too —
   otherwise the content card sits 15px right of the title card. The gap
   between the side column and the form is handled explicitly below. */
.row.layout-main > [class*="col-"],
.row.layout-main > .col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row.layout-main > .layout-side-section {
    padding-right: 14px !important;
}
/* Only the content section is a card. .layout-main / the wrapper are just
   layout rows — giving them a fill produced a doubled panel behind the card. */
.layout-main-section, .form-layout, .form-page,
.row.form-section.card-section.visible-section {
    background-color: var(--bt-card-bg, #fff) !important; color: var(--bt-text-color) !important;
    border: none !important;
    border-radius: 8px !important;
    /* same elevation as the title card so the two read as one system */
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
}

/* ── ONE card treatment for every surface: title, content, side, footer,
   list/report. Single radius + single shadow so nothing looks off-system. ── */
/* Only OUTERMOST surfaces carry the elevation. .form-layout sits inside
   .layout-main-section, so shadowing both stacked two edges on top of each
   other and read as a heavier, mismatched border. */
.page-head .page-head-content,
.layout-main-section,
.layout-side-section .form-sidebar,
.form-footer,
.frappe-card,
.widget.number-widget-box,
.widget.dashboard-widget-box {
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
}

/* Inner wrappers inherit the card — no second edge of their own */
.form-layout,
.form-page,
.row.form-section.card-section.visible-section {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* Footer is its own card, aligned with the content above it */
.form-footer {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    padding: 16px 20px !important;
    margin-top: 12px !important;
}

/* ── Horizontal alignment: title, tabs and content share one left edge ── */

/* Title block was pushed right by Bootstrap column padding */
.col-md-4.col-sm-6.col-xs-7.page-title,
.page-head-content .page-title {
    padding-left: 0 !important;
}

/* Form side section: ONE card for the whole column — styling each
   .sidebar-menu separately fragmented it into a stack of tiny boxes.
   Left edge is flush with the title card; the gap goes on the right. */
.col-lg-2.layout-side-section,
.layout-side-section {
    padding-left: 0 !important;
    padding-right: 6px !important;
}

/* Tighter padding fits more in the narrow column; small left margin lines the
   card up with the title card, and the right gap to the form stays small. */
.layout-side-section .form-sidebar,
.form-sidebar.overlay-sidebar {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
    padding: 12px 14px !important;
    /* no margin — the column's own edge already lines up with the title card */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.layout-side-section .sidebar-menu {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* List view "Filter By" column had no card at all — the transparent column
   let the grey page show through, which read as a dimmer, hazier panel
   next to the white content card. Give it the same card as everything else. */
.list-sidebar,
.list-sidebar.overlay-sidebar {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
    padding: 14px !important;
    margin: 0 !important;
}

.list-sidebar .sidebar-section,
.list-sidebar .list-tags,
.list-sidebar .list-stats {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* "Filter By" / "Save Filter" group headings */
.list-sidebar .sidebar-label,
.list-sidebar h6,
.list-sidebar .list-sidebar-label {
    color: var(--bt-heading-color, #0A2540) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em;
    margin-bottom: 8px !important;
}

/* Links inside the filter panel stay quiet until hovered */
.list-sidebar a,
.list-sidebar .edit-filters,
.list-sidebar .list-link {
    color: var(--bt-text-color, #2B3445) !important;
}

.list-sidebar a:hover {
    color: var(--bt-primary, #318dd8) !important;
}

/* Select/inputs in the filter panel match desk fields */
.list-sidebar select.form-control,
.list-sidebar input.form-control {
    height: 36px !important;
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--bt-input-bg, #F1F3F5) !important;
    padding: 8px 12px !important;
}

.row.layout-main,
.layout-main {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Bootstrap's -15px row gutter pulled the side column left of the title
       card. Zero it so the sidebar shares the title's left edge. */
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.page-card-head h4 { color: var(--bt-heading-color) !important; }

/* FORM TABS — bar is plain white like the card; the active tab is the only
   thing that carries colour, using the same accent as the active sidebar
   item so it follows the DocType "Bigtech Theme" settings. */
.form-tabs-list,
.form-tabs-list.form-tabs-sticky-down,
.form-tabs-list.form-tabs-sticky-up {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border-bottom: 1px solid var(--bt-table-border, #EFF3F8) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 !important;
}

.nav.form-tabs {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 6px 20px 0 20px !important;
    gap: 2px !important;
    /* Doctypes with many tabs (Bigtech Theme has 10) were clipping the last
       one at the card edge — let the strip scroll instead of truncating. */
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

.nav.form-tabs::-webkit-scrollbar { height: 4px !important; }
.nav.form-tabs::-webkit-scrollbar-thumb {
    background: var(--bt-table-border, #D3D9E0) !important;
    border-radius: 4px !important;
}

.nav.form-tabs .nav-item { flex: 0 0 auto !important; }

/* kill the inherited left offset so tab #1 lines up with the fields below */
.nav.form-tabs .nav-item:first-child .nav-link { margin-left: 0 !important; }
.nav.form-tabs .nav-item + .nav-item { border-left: none !important; }
.nav.form-tabs .nav-item { margin: 0 !important; }

/* Inactive: no fill at all — same as the bar behind it */
.nav.form-tabs .nav-link {
    display: block !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    color: var(--text-muted, #4E5A6B) !important;
    font-weight: 500 !important;
    padding: 11px 18px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.nav.form-tabs .nav-link:hover:not(.active) {
    background: transparent !important;
    color: var(--bt-heading-color, #0A2540) !important;
}

/* Active: light tint + strong underline. Tabs are navigation, so they must
   not carry the same visual weight as an action button. */
.nav.form-tabs .nav-link.active {
    background-color: var(--bt-tab-active-bg, #F1F4F9) !important;
    color: var(--bt-heading-color, #0A2540) !important;
    font-weight: 600 !important;
    border: none !important;
    border-bottom: 2px solid var(--bt-primary, #318dd8) !important;
    border-radius: 6px 6px 0 0 !important;
    box-shadow: none !important;
}
.nav.form-tabs.sticky-up, .nav.form-tabs.sticky-down { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important; }

/* SIDEBAR - Frappe default */
.body-sidebar { background-color: var(--bt-sidebar-bg) !important; color: var(--bt-sidebar-color) !important; }
.standard-sidebar-item, .item-anchor, .sidebar-item-label, .sidebar-item-icon,
.sidebar-item-icon svg, .sidebar-item-control button { color: var(--bt-sidebar-color) !important; }
.sidebar-item-icon svg { fill: var(--bt-sidebar-bg) !important; stroke: var(--bt-sidebar-color) !important; }
.standard-sidebar-item.active > .item-anchor, .sidebar-item.active > .item-anchor {
    background-color: var(--bt-sidebar-active-bg) !important; color: var(--bt-sidebar-active-color) !important;
}
.sidebar-item-icon, .standard-sidebar-item .sidebar-item-icon svg, .sidebar-item-icon svg {
    color: var(--bt-sidebar-color) !important; fill: none !important; stroke: var(--bt-sidebar-color) !important;
}
.sidebar-label, .sidebar-menu-label { color: var(--bt-sidebar-color) !important; }
.sidebar-user .avatar, .sidebar-user-avatar { border-color: var(--bt-sidebar-color) !important; }
.sidebar-footer, .body-sidebar .sidebar-footer { background-color: var(--bt-sidebar-bg) !important; }
.sidebar-footer .sidebar-user-name, .sidebar-footer .user-information { color: var(--bt-sidebar-color) !important; }
.sidebar-sidebar-toggle-icon, .collapse-sidebar-link { color: var(--bt-sidebar-color) !important; }

/* SIDEBAR - Bigtech custom #kt-sidebar */
#kt-sidebar { background: var(--bt-sidebar-bg) !important; }
#kt-sidebar .kt-sidebar-link { color: var(--bt-sidebar-color) !important; }
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link {
    background: var(--bt-sidebar-active-bg) !important; color: var(--bt-sidebar-active-color) !important;
}
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link::before { content: none !important; }

/* Count badge: subtle chip, not loud blue text */
/* Counts are reference data, not navigation. Plain muted numerals stop them
   forming a loud pill column down the right edge; the pill returns on hover
   and on the active row where the count actually matters. */
#kt-sidebar .kt-sidebar-badge {
    background: transparent !important;
    color: var(--bt-sidebar-color, #697386) !important;
    opacity: 0.55 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
    min-width: 0 !important;
    height: 18px !important;
    padding: 0 2px !important;
    border-radius: 6px !important;
    transition: background 0.15s ease, opacity 0.15s ease !important;
}

#kt-sidebar .kt-sidebar-link:hover .kt-sidebar-badge {
    background: var(--bt-sidebar-badge-bg, rgba(10, 37, 64, 0.06)) !important;
    opacity: 1 !important;
    padding: 0 7px !important;
}

/* Icons: outlined and muted — never solid-filled blobs */
#kt-sidebar .kt-sidebar-icon, #kt-sidebar .kt-sidebar-icon i,
#kt-sidebar .kt-sidebar-icon svg, #kt-sidebar .kt-sidebar-icon svg use {
    color: var(--bt-sidebar-color, #697386) !important;
    fill: none !important;
    stroke: var(--bt-sidebar-color, #697386) !important;
}

/* Active row: icon, label and badge all read on the blue pill */
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon i,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon svg,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon svg use,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-chevron {
    color: var(--bt-sidebar-active-color, #FFFFFF) !important;
    fill: none !important;
    stroke: var(--bt-sidebar-active-color, #FFFFFF) !important;
}

/* Frappe's sprite symbols carry their own fill inside <use>'s shadow tree,
   which CSS colour rules cannot reach — so a dark glyph stayed dark on the
   blue pill. Forcing it to pure white is the only reliable CSS route. */
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon svg,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-icon i {
    filter: brightness(0) invert(1) !important;
}

#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link .kt-sidebar-badge,
#kt-sidebar .kt-sidebar-item.active > .kt-sidebar-link:hover .kt-sidebar-badge {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    padding: 0 7px !important;
}

/* Chevrons are a hint, not content — keep them quiet */
#kt-sidebar .kt-sidebar-chevron {
    color: var(--bt-sidebar-color, #8792A2) !important;
    opacity: 0.45 !important;
    transition: opacity 0.15s ease !important;
}
#kt-sidebar .kt-sidebar-link:hover .kt-sidebar-chevron,
#kt-sidebar .kt-sidebar-group.expanded > .kt-sidebar-link .kt-sidebar-chevron {
    opacity: 0.9 !important;
}

/* Footer reads as its own zone, not a stray row at the bottom */
#kt-sidebar .kt-sidebar-user-name {
    color: var(--bt-heading-color, #0A2540) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

#kt-sidebar .kt-sidebar-footer {
    border-top: 1px solid var(--bt-sidebar-divider, rgba(10, 37, 64, 0.10)) !important;
    padding: 12px 14px !important;
    background: var(--bt-sidebar-footer-bg, rgba(10, 37, 64, 0.02)) !important;
}

#kt-sidebar .kt-sidebar-user {
    padding: 6px 8px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
}

#kt-sidebar .kt-sidebar-user:hover {
    background: var(--bt-sidebar-hover-bg, rgba(10, 37, 64, 0.05)) !important;
}
#kt-sidebar { border-right: 1px solid var(--bt-sidebar-divider, rgba(10, 37, 64, 0.08)) !important; }

/* BUTTONS - PRIMARY */
.btn-primary, .btn-primary:active { background-color: var(--bt-btn-primary-bg) !important; }
.btn-primary span, .btn-primary:active span { color: var(--bt-btn-primary-color) !important; }
.btn-primary:hover { background-color: var(--bt-btn-primary-hover-bg) !important; }
.btn-primary:hover span { color: var(--bt-btn-primary-hover-color) !important; }

/* BUTTONS - SECONDARY */
.btn.btn-default.ellipsis, .btn-default, .btn-default:active {
    background-color: var(--bt-btn-secondary-bg) !important; color: var(--bt-btn-secondary-color) !important;
}
.btn.btn-default.ellipsis:hover, .btn-default:hover {
    background-color: var(--bt-btn-secondary-hover-bg) !important; color: var(--bt-btn-secondary-hover-color) !important;
}

/* TABLES — hairline separators only; no boxed outline */
.list-view .list-table,
.frappe-list .list-table { border: none !important; }
.list-row-border { border-bottom-color: var(--bt-table-border, #F0F2F5) !important; }

/* Thin column separators in the standard list view too, matching Report View.
   align-self:stretch + min-height matter: an empty cell collapses to zero
   height, so its border simply would not draw and the column line looked
   broken on rows where that field was blank.

   DESKTOP ONLY, and the media query is load-bearing. Frappe collapses the
   list to a single readable column on phones by marking the other columns
   `.hidden-xs` / `.hidden-sm`, which Bootstrap hides with
   `display: none !important` at (0,1,0). The `display: flex !important`
   below scores (0,2,0) and outranked it, so on a phone every column stayed
   in the row, each squeezed to a few pixels — the list still occupied space
   but rendered as a blank area. Frappe's hidden-xs/sm range ends at 767.98px,
   so 768px is exactly its complement: below it, mobile is left alone. */
@media (min-width: 768px) {
    .frappe-list .list-row-col,
    .frappe-list .list-row-head .list-row-col {
        border-right: 1px solid var(--bt-table-border, #F0F2F5) !important;
        padding-right: 10px !important;
        align-self: stretch !important;
        min-height: 22px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* No rule dangling at the end of each half of the row */
    .frappe-list .level-left .list-row-col:last-child,
    .frappe-list .level-right .list-row-col:last-child,
    .frappe-list .list-row-col:last-child {
        border-right: none !important;
    }
}
.level.list-row-head.text-muted {
    background-color: var(--bt-table-head-bg, #FBFCFD) !important;
    border-bottom: 1px solid var(--bt-table-border, #EFF3F8) !important;
}
.level-left.list-header-subject, span.level-item, div.level-right { color: var(--bt-table-head-color) !important; }
.level.list-row, .level-item.bold.ellipsis a, .filterable.ellipsis {
    background-color: var(--bt-table-body-bg) !important; color: var(--bt-table-body-color) !important;
}

/* WIDGETS / NUMBER CARDS — modern stat tiles */
.widget.number-widget-box, .widget.dashboard-widget-box {
    background-color: var(--bt-widget-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.05), 0 0 0 1px rgba(10, 37, 64, 0.05) !important;
    padding: 18px 20px !important;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
}

.widget.number-widget-box:hover, .widget.dashboard-widget-box:hover {
    box-shadow: 0 4px 12px rgba(10, 37, 64, 0.08), 0 0 0 1px rgba(10, 37, 64, 0.06) !important;
    transform: translateY(-1px);
}

/* Label above the number: small, uppercase, readable */
.widget .widget-label, .widget .widget-title {
    color: var(--text-muted, #4E5A6B) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
}

/* The number itself: big and high-contrast — the thing people actually read */
.widget-content div.number,
.widget .number {
    color: var(--bt-heading-color, #0A2540) !important;
    font-size: 28px !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em;
    line-height: 1.2 !important;
}

.widget-head { color: var(--text-muted, #4E5A6B) !important; }

/* Trend line under the number */
.widget .widget-footer, .widget .number-card-percentage {
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Dashboard/workspace section headings */
.widget-group-head .widget-group-title,
.layout-main-section h4.widget-title {
    color: var(--bt-heading-color, #0A2540) !important;
    font-weight: 650 !important;
}

/* INPUTS (checkboxes/radios excluded — must keep their native square/round control) */
input.form-control:not([type="checkbox"]):not([type="radio"]),
textarea.form-control, select.form-control,
.frappe-control input:not([type="checkbox"]):not([type="radio"]),
.frappe-control textarea, .frappe-control select,
input[type="text"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="email"],
input[type="password"], input[type="search"], input[type="url"],
input.input-with-feedback:not([type="checkbox"]):not([type="radio"]),
.input-with-feedback > input:not([type="checkbox"]):not([type="radio"]),
.awesomplete input, .link-field input, .sidebar-search input,
input.form-control:disabled:not([type="checkbox"]):not([type="radio"]), input.form-control[readonly],
textarea.form-control:disabled, textarea.form-control[readonly],
select.form-control:disabled, select.form-control[readonly],
input:not([type="checkbox"]):not([type="radio"])[disabled], textarea[disabled], select[disabled] {
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--bt-input-bg, #F1F3F5) !important;
    color: var(--bt-input-color) !important;
}
label.control-label { color: var(--bt-input-label-color) !important; }
.like-disabled-input {
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--bt-input-bg, #F1F3F5) !important;
}
.btn-attach { border-color: var(--bt-input-border) !important; }

/* TOGGLES */
.d-lg-block, .d-sm-block { display: var(--bt-hide-help, block) !important; }
.sidebar-item-control { display: var(--bt-hide-app-switcher, flex) !important; }

/* TABLE OPTIONS */
.like-icon, .comment-count, .level-item.list-row-activity .mx-2 { display: var(--bt-hide-like-comment, block) !important; }

/* STATUS INDICATOR BADGES - preserve Frappe default colors
   Must use !important to override the broad table color rules above
   Only apply base green to pills that have a color class (not empty pills) */
.indicator-pill:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black),
.indicator-pill-right:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black) {
	background: var(--bg-green) !important;
	color: var(--text-on-green) !important;
}
.indicator-pill:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black)::before,
.indicator-pill:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black)::after,
.indicator-pill-right:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black)::before,
.indicator-pill-right:is(.green, .cyan, .blue, .orange, .yellow, .gray, .grey, .red, .pink, .darkgrey, .purple, .light-blue, .black)::after {
	background: var(--text-on-green) !important;
}
.indicator-pill.green, .indicator-pill-right.green { background: var(--bg-green) !important; color: var(--text-on-green) !important; }
.indicator-pill.green::before, .indicator-pill.green::after, .indicator-pill-right.green::before, .indicator-pill-right.green::after { background: var(--text-on-green) !important; }
.indicator-pill.cyan, .indicator-pill-right.cyan { background: var(--bg-cyan) !important; color: var(--text-on-cyan) !important; }
.indicator-pill.cyan::before, .indicator-pill.cyan::after, .indicator-pill-right.cyan::before, .indicator-pill-right.cyan::after { background: var(--text-on-cyan) !important; }
.indicator-pill.blue, .indicator-pill-right.blue { background: var(--bg-blue) !important; color: var(--text-on-blue) !important; }
.indicator-pill.blue::before, .indicator-pill.blue::after, .indicator-pill-right.blue::before, .indicator-pill-right.blue::after { background: var(--text-on-blue) !important; }
.indicator-pill.orange, .indicator-pill-right.orange { background: var(--bg-orange) !important; color: var(--text-on-orange) !important; }
.indicator-pill.orange::before, .indicator-pill.orange::after, .indicator-pill-right.orange::before, .indicator-pill-right.orange::after { background: var(--text-on-orange) !important; }
.indicator-pill.yellow, .indicator-pill-right.yellow { background: var(--bg-yellow) !important; color: var(--text-on-yellow) !important; }
.indicator-pill.yellow::before, .indicator-pill.yellow::after, .indicator-pill-right.yellow::before, .indicator-pill-right.yellow::after { background: var(--text-on-yellow) !important; }
.indicator-pill.gray, .indicator-pill-right.gray { background: var(--bg-gray) !important; color: var(--text-on-gray) !important; }
.indicator-pill.gray::before, .indicator-pill.gray::after, .indicator-pill-right.gray::before, .indicator-pill-right.gray::after { background: var(--text-on-gray) !important; }
.indicator-pill.grey, .indicator-pill-right.grey { background: var(--bg-grey) !important; color: var(--text-on-grey) !important; }
.indicator-pill.grey::before, .indicator-pill.grey::after, .indicator-pill-right.grey::before, .indicator-pill-right.grey::after { background: var(--text-on-grey) !important; }
.indicator-pill.red, .indicator-pill-right.red { background: var(--bg-red) !important; color: var(--text-on-red) !important; }
.indicator-pill.red::before, .indicator-pill.red::after, .indicator-pill-right.red::before, .indicator-pill-right.red::after { background: var(--text-on-red) !important; }
.indicator-pill.pink, .indicator-pill-right.pink { background: var(--bg-pink) !important; color: var(--text-on-pink) !important; }
.indicator-pill.pink::before, .indicator-pill.pink::after, .indicator-pill-right.pink::before, .indicator-pill-right.pink::after { background: var(--text-on-pink) !important; }
.indicator-pill.darkgrey, .indicator-pill-right.darkgrey { background: var(--bg-darkgrey) !important; color: var(--text-on-darkgrey) !important; }
.indicator-pill.darkgrey::before, .indicator-pill.darkgrey::after, .indicator-pill-right.darkgrey::before, .indicator-pill-right.darkgrey::after { background: var(--text-on-darkgrey) !important; }
.indicator-pill.purple, .indicator-pill-right.purple { background: var(--bg-purple) !important; color: var(--text-on-purple) !important; }
.indicator-pill.purple::before, .indicator-pill.purple::after, .indicator-pill-right.purple::before, .indicator-pill-right.purple::after { background: var(--text-on-purple) !important; }
.indicator-pill.light-blue, .indicator-pill-right.light-blue { background: var(--bg-light-blue) !important; color: var(--text-on-light-blue) !important; }
.indicator-pill.light-blue::before, .indicator-pill.light-blue::after, .indicator-pill-right.light-blue::before, .indicator-pill-right.light-blue::after { background: var(--text-on-light-blue) !important; }
.indicator-pill.black, .indicator-pill-right.black { background: var(--bg-dark) !important; color: var(--text-on-dark) !important; }
.indicator-pill.black::before, .indicator-pill.black::after, .indicator-pill-right.black::before, .indicator-pill-right.black::after { background: var(--text-on-dark) !important; }

/* BUTTON BORDERS */
.btn-primary, .btn-primary:active { border: 1px solid var(--bt-btn-primary-border, transparent) !important; }
.btn.btn-default.ellipsis, .btn-default, .btn-default:active { border: 1px solid var(--bt-btn-secondary-border, transparent) !important; }

/* ========================================
   LOGIN PAGE
   ======================================== */
/* Split-screen login: artwork owns the left half, the form sits on a plain
   surface on the right. The image is painted by the ::before layer below so
   it can be clamped to 50% width without distorting. */
#page-login {
    background-color: var(--bt-login-bg-color, #FFFFFF) !important;
    background-image: none !important;
    min-height: 100vh !important;
    position: relative !important;
    margin: 0;
}

/* Nothing between the photo and the card may paint its own surface */
#page-login .page-content-wrapper,
#page-login main.container,
#page-login .page_content,
#page-login .page-header-wrapper {
    background: transparent !important;
}

#page-login::before {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /* Artwork panel — left half only, so the form keeps a calm surface */
    width: var(--bt-login-art-width, 50%);
    z-index: 0;
    pointer-events: none;
    background-image: var(--bt-carousel-bg-image, var(--bt-login-bg-image, none));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: var(--bt-carousel-fade-opacity, 1);
    transition: opacity 0.7s;
}

/* Keep the card above the artwork layer */
.for-login, .for-signup, .for-forgot, .for-login-with-email-link {
    position: relative;
    z-index: 1;
}

/* Centre the form within the right-hand half.
   NOTE: never set `display` here — Frappe toggles these panels with an
   inline display:none, and an !important display would force the signup /
   forgot-password panels visible all at once. Centre with margins only. */
@media (min-width: 769px) {
    .for-login, .for-signup, .for-forgot, .for-login-with-email-link {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        width: 50% !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        text-align: center !important;
        padding: 0 24px !important;
    }

    .login-content.page-card, .signup-content.page-card {
        margin: 0 auto !important;
        text-align: left !important;
    }

    /* "Login Box Position = Left" in the DocType flips the whole split:
       artwork moves to the right half, the form to the left. */
    #page-login[data-box-side="left"]::before {
        left: auto !important;
        right: 0 !important;
    }

    #page-login[data-box-side="left"] .for-login,
    #page-login[data-box-side="left"] .for-signup,
    #page-login[data-box-side="left"] .for-forgot,
    #page-login[data-box-side="left"] .for-login-with-email-link {
        right: auto !important;
        left: 0 !important;
    }
}

.btn-primary.btn-login, .btn-primary.btn-forgot {
    background-color: var(--bt-login-btn-bg, #171717) !important;
    color: var(--bt-login-btn-color, #fff) !important;
}
.btn-primary.btn-login:hover, .btn-primary.btn-forgot:hover {
    background-color: var(--bt-login-btn-hover-bg, #171717) !important;
    color: var(--bt-login-btn-hover-color, #fff) !important;
}

.for-login, .for-signup, .for-forgot, .for-login-with-email-link {
    position: var(--bt-login-box-position, static);
    right: var(--bt-login-box-right, auto);
    left: var(--bt-login-box-left, auto);
    top: var(--bt-login-box-top, 18%);
    background-color: var(--bt-login-box-bg-override, transparent) !important;
    border-radius: var(--bt-login-box-border-radius, 0) !important;
    border: var(--bt-login-box-border, none) !important;
}

/* Safety net: .hide is how Frappe switches between the login / signup /
   forgot-password / email-link panels. Nothing in this theme may ever
   reveal a panel the app intends to keep hidden. */
#page-login .hide,
#page-login .hidden {
    display: none !important;
}

.login-content.page-card, .signup-content.page-card {
    background-color: var(--bt-login-box-bg, #fff) !important;
    /* No hard 2px outline — a soft elevation reads cleaner over a photo
       background and matches the card system used across the desk. */
    border: var(--bt-login-card-border, none) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(10, 37, 64, 0.14), 0 0 0 1px rgba(10, 37, 64, 0.04) !important;
    width: var(--bt-login-box-width, 380px) !important;
    max-width: calc(100vw - 40px) !important;
    padding: var(--bt-login-box-padding, 28px 28px) !important;
    margin: 0 auto !important;
}

/* ── Login form controls: same language as the desk ── */
.login-content .form-control,
.signup-content .form-control {
    height: 46px !important;
    border: none !important;
    border-radius: 8px !important;
    background-color: var(--bt-input-bg, #F1F3F5) !important;
    color: var(--bt-input-color, #1F2A3C) !important;
    font-size: 14px !important;
    /* 42px left leaves room for the absolutely-positioned .field-icon that
       Frappe renders inside .email-field / .password-field — a flat 14px
       made the icon sit on top of the placeholder text. */
    padding: 12px 14px 12px 42px !important;
}

/* Password field also has a "Show" toggle pinned to its right */
.login-content .password-field .form-control {
    padding-right: 62px !important;
}

.login-content .email-field,
.login-content .password-field {
    position: relative !important;
}

.login-content .field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    color: var(--bt-text-light, #8792A2) !important;
    pointer-events: none !important;
}

.login-content .toggle-password {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    cursor: pointer !important;
    font-size: 13px !important;
}

.login-content .form-control:focus,
.signup-content .form-control:focus {
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 2px var(--bt-focus-ring, color-mix(in srgb, var(--bt-primary, #318dd8) 25%, transparent)) !important;
    outline: none !important;
}

/* Logo + heading block sits above the card */
.for-login .page-card-head,
.for-signup .page-card-head {
    text-align: center !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
    background: transparent !important;
}

.for-login .page-card-head .app-logo {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
}

.for-login .page-card-head h4,
.login-content .page-card-head h4,
.login-content .page-card-head .indicator {
    color: var(--bt-heading-color, #0A2540) !important;
    font-size: 19px !important;
    font-weight: 650 !important;
    line-height: 26px !important;
    margin: 0 !important;
}

/* Tighter, better-proportioned card */
.login-content.page-card .page-card-body {
    padding: 0 !important;
}

.login-content.page-card .page-card-actions {
    padding: 0 !important;
    margin-top: 18px !important;
}

.login-content .form-group {
    margin-bottom: 12px !important;
}

.login-content .forgot-password-message {
    margin: 10px 0 0 0 !important;
    text-align: right !important;
    font-size: 13px !important;
}

.login-content label,
.login-content .control-label {
    color: var(--bt-input-label-color, #425466) !important;
    font-weight: 500 !important;
}

/* Login button follows the theme: its own setting first, then the shared
   primary button colour, then the accent — so it can never drift out of
   sync with the buttons in the desk. */
.btn-primary.btn-login,
.btn-primary.btn-forgot,
.btn-primary.btn-login-with-email-link {
    height: 46px !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background-color: var(--bt-login-btn-bg, var(--bt-btn-primary-bg, var(--bt-primary, #318dd8))) !important;
    color: var(--bt-login-btn-color, var(--bt-btn-primary-color, #FFFFFF)) !important;
}

.btn-primary.btn-login:hover,
.btn-primary.btn-forgot:hover,
.btn-primary.btn-login-with-email-link:hover {
    background-color: var(--bt-login-btn-hover-bg, var(--bt-btn-primary-hover-bg, var(--bt-primary, #2a78b8))) !important;
    color: var(--bt-login-btn-hover-color, var(--bt-btn-primary-hover-color, #FFFFFF)) !important;
}

/* ── Login page chrome: no navbar/breadcrumbs, just the card ── */
#page-login .navbar,
body[data-path="login"] .navbar,
#page-login .page-breadcrumbs,
#page-login .page-header-wrapper,
#page-login .web-footer,
#page-login footer {
    display: none !important;
}

/* ── Mobile: drop the photo, keep a clean flat surface ──
   The illustration is wide-format art; on a phone it crops to an
   unreadable slice and fights the form for attention. */
@media (max-width: 768px) {
    #page-login {
        background-image: none !important;
        background-color: var(--bt-login-bg-color, #F6F9FC) !important;
    }

    #page-login::before {
        display: none !important;
    }

    /* Centre by auto margins only — never by overriding `display`.
       Frappe toggles these panels with jQuery, which writes an inline
       `display: none`; a `display: flex !important` here outranked that and
       forced signup / forgot-password / email-link all visible at once. */
    .for-login,
    .for-signup,
    .for-forgot,
    .for-login-with-email-link {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        padding: 8vh 20px 40px 20px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .login-content.page-card, .signup-content.page-card {
        width: 100% !important;
        max-width: 420px !important;
        box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
        padding: 24px 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /* The container Bootstrap wraps this in must not re-offset it */
    #page-login main.container,
    #page-login .page_content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .for-login .page-card-head {
        width: 100% !important;
        max-width: 420px !important;
    }
}

.login-content a,
.login-content .forgot-password-message a {
    color: var(--bt-primary, #318dd8) !important;
}

.sign-up-message {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 20px;
    padding: 0 !important;
    color: inherit;
}

.page-card-head h4 {
    color: var(--bt-heading-color) !important;
}

.for-login .page-card-head:after {
    display: var(--bt-login-title-after-display, none);
    justify-content: var(--bt-login-title-after-justify, center);
    margin-top: var(--bt-login-title-after-margin, 10px);
    content: var(--bt-login-title-after-content, "");
    color: var(--bt-login-title-after-color);
}

.carousel-nav {
    background: var(--bt-carousel-nav-bg, rgba(0,0,0,0.3));
    color: var(--bt-carousel-nav-color, #fff);
    border: none;
    font-size: var(--bt-carousel-nav-size, 2rem);
    cursor: pointer;
    border-radius: var(--bt-carousel-nav-radius, 50%);
    width: var(--bt-carousel-nav-size, 2rem);
    height: var(--bt-carousel-nav-size, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--bt-carousel-nav-z, 2);
    pointer-events: auto;
}
.carousel-nav-left { left: 20px; }
.carousel-nav-right { right: 20px; }

@media (max-width: 768px) {
    .for-login { position: static; }
    .login-content.page-card { width: auto; }
}

/* ========================================
   FOOTER
   ======================================== */
.desk-footer {
    background-color: var(--bt-footer-bg, #f8f9fa);
    color: var(--bt-footer-color, #495057);
    padding: 15px 20px;
    border-top: 1px solid var(--bt-footer-border, #dee2e6);
    font-size: 14px;
    display: var(--bt-footer-display, flex);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    min-height: 50px;
    flex-shrink: 0;
}
.desk-footer.sticky {
    position: fixed;
    bottom: 0;
    left: 50px;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    margin-left: 0;
    transition: left 200ms ease-in-out;
    height: 50px;
    box-sizing: border-box;
}
.desk-footer-left { display: flex; align-items: center; gap: 5px; }
.desk-footer-right { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.desk-footer a { color: var(--bt-footer-link-color, #007bff); text-decoration: none; }
.desk-footer a:hover { color: var(--bt-footer-link-hover-color, #0056b3); text-decoration: underline; }

@media (max-width: 992px) {
    .desk-footer { margin-left: 0 !important; }
    .desk-footer.sticky { left: 0 !important; }
}
@media (max-width: 768px) {
    .desk-footer { flex-direction: column; text-align: center; padding: 12px 15px; gap: 8px; }
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */
[data-theme-mode="dark"] .navbar {
    background-color: var(--gray-900) !important;
}
[data-theme-mode="dark"] .page-head {
    background-color: var(--gray-900) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme-mode="dark"] .nav.form-tabs.sticky-up,
[data-theme-mode="dark"] .nav.form-tabs.sticky-down {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}


/* ========================================
   DARK MODE LOCK
   ========================================
   Dark mode is disabled (see BigtechDarkModeLock in bigtech_theme.js): the
   --bt-* palette is cleared in dark mode, leaving a half-themed, unreadable
   desk. The JS pins the theme to light; this hides the navbar entry that
   offers it, so nobody is shown a control that no longer does anything.

   The button carries no id or data-label, so the onclick handler is the only
   stable hook. Hide the button and nothing above it: the entries in
   #toolbar-user are direct children of .dropdown-menu with no <li> wrapper, so
   anything that climbs to the nearest <li> takes out the entire user menu. */
html[data-bt-dark-lock] .dropdown-item[onclick*="ThemeSwitcher"] {
    display: none !important;
}

/* ========================================
   FORM BUILDER (Customize Form / DocType editor)
   ========================================
   The builder draws a preview of each field as a real read-only
   <input class="form-control"> sitting inside a .field card that Frappe
   paints with --bg-light-gray. Customize Form is itself a normal form, so
   the whole builder lives inside .form-layout and inherited the theme's
   filled-input treatment: 44px tall, 12px/14px padding, no border and a
   #F1F3F5 fill. Grey input on a grey card reads as a blank block, and every
   field grew to ~83px, turning the builder into a wall of empty rectangles.

   Here the previews opt out and become compact outlined placeholders: white
   so they separate from the card, bordered so their extent is legible, and
   short enough that a column of fields stays scannable. Selectors carry the
   container class so they out-specify the .form-layout rules above; the
   builder is the only place these apply, so real forms are untouched. */
.form-builder-container input.form-control:not([type="checkbox"]):not([type="radio"]),
.form-builder-container select.form-control,
.form-builder-container .frappe-control input:not([type="checkbox"]):not([type="radio"]),
.form-builder-container .frappe-control select {
    height: 30px !important;
    min-height: 30px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: 1px solid #DDE3EA !important;
    box-shadow: none !important;
}

.form-builder-container textarea.form-control,
.form-builder-container .frappe-control textarea {
    height: auto !important;
    min-height: 48px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: 1px solid #DDE3EA !important;
    box-shadow: none !important;
}

/* Read-only previews (Link, Select, Table…) render as a div, not an input,
   and picked up the same 44px min-height. */
.form-builder-container .like-disabled-input {
    min-height: 30px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: 1px solid #DDE3EA !important;
}

/* The Color control's swatch allowance is measured against the roomy padding
   of a real form; at 30px it would push the text off the field. */
.form-builder-container .frappe-control[data-fieldtype="Color"] input.form-control {
    padding-left: 28px !important;
}

/* ========================================
   PRINT FORMAT BUILDER — section title
   ========================================
   PrintFormatSection.vue renders the section heading as a bare
   <input class="input-section-label">, deliberately styled as text:
   `border: 1px solid transparent` with no fill, gaining a background and
   border only on :focus. It carries no .form-control class, so the only
   theme rule reaching it was the blanket input[type="text"] fill — which
   painted a permanent grey bar across the mock printed page where a plain
   heading belongs.

   Restore Frappe's intent: transparent until focused, then filled. */
input.input-section-label[type="text"] {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    padding: 1px 2px !important;
}

input.input-section-label[type="text"]:focus {
    background-color: var(--bt-input-bg, #F1F3F5) !important;
    border-color: var(--bt-input-border, #E3E8EE) !important;
    box-shadow: none !important;
}

/* ========================================
   CHILD-TABLE GRID — search row and in-row inputs
   ========================================
   Grid rows are 32–38px and Frappe sizes their inputs to fill the cell
   (`padding: 3px 7px`, height fills the 7px-padded cell). The theme's form
   rule — .form-layout .form-control → 44px tall with 12px/14px padding —
   also reached them, so every input in the filter row grew taller than the
   row that contains it and spilled upward as a floating grey capsule
   overlapping the column headers. Most visible on Customize Form → Fields,
   but it affects every child table in the product.

   The :not() pairs are not decoration: without them these selectors score
   below `.form-layout .form-control:not([type=checkbox]):not([type=radio])`
   and lose the cascade despite being more specific in intent. */
.form-grid .grid-heading-row input.form-control:not([type="checkbox"]):not([type="radio"]),
.form-grid .grid-static-col.search input:not([type="checkbox"]):not([type="radio"]),
.form-grid .row-index.search input:not([type="checkbox"]):not([type="radio"]),
.form-grid .grid-body input.form-control:not([type="checkbox"]):not([type="radio"]),
.form-grid .grid-row input.form-control:not([type="checkbox"]):not([type="radio"]),
.form-grid .grid-body select.form-control:not([type="checkbox"]):not([type="radio"]),
.form-grid .grid-row select.form-control:not([type="checkbox"]):not([type="radio"]) {
    height: 24px !important;
    min-height: 24px !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.form-grid .grid-body textarea.form-control,
.form-grid .grid-row textarea.form-control {
    height: auto !important;
    min-height: 24px !important;
    padding: 3px 7px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
}

/* ========================================
   USER PROFILE — side column
   ========================================
   The card treatment is keyed on .form-sidebar, but this page renders
   .user-profile-sidebar instead, so the column sat bare on the page
   background while every other side column reads as a card. */
.layout-side-section .user-profile-sidebar {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
    padding: 16px 14px !important;
}

/* ========================================
   PRINT VIEW — side column
   ========================================
   Same gap as the user profile: the card treatment keys on .form-sidebar,
   but this column holds its controls directly with no inner wrapper, so it
   sat bare against the page while the preview beside it read as a card.
   The card goes on the column itself; height is capped to its content so it
   does not stretch down the full length of a long print preview, and the
   gap to the preview moves from padding to margin. */
.row.layout-main > .layout-side-section.print-preview-sidebar,
.layout-side-section.print-preview-sidebar {
    background-color: var(--bt-card-bg, #FFFFFF) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06) !important;
    /* `.row.layout-main > [class*="col-"]` zeroes the column padding with
       !important and outranks a bare `.layout-side-section.x` selector, so the
       left padding has to be restated at matching weight — hence the longer
       selector above and the explicit longhand here. */
    padding: 16px 14px !important;
    padding-left: 14px !important;
    margin-right: 8px !important;
    height: fit-content !important;
    align-self: flex-start !important;
}

/* ========================================
   SEARCH BOX (Form Builder panels, and any .search-box component)
   ========================================
   The component puts its magnifier in an absolutely-positioned
   <span class="search-icon"> at left:7px inside a 16px box, and relies on the
   input carrying enough left padding to clear it. The theme's input padding
   overwrote that allowance, so the glyph landed on top of the placeholder —
   "Search properties..." rendered with the magnifier sitting on the S.

   30px leaves the icon's 23px right edge clear with a 7px gap. The icon's own
   top:7px was tuned to Frappe's shorter input; centring it keeps it right at
   whatever height the field ends up.

   The :not() pairs are load-bearing: without them this scores (0,3,1) and
   loses to the .form-builder-container input rule above at (0,4,1), which is
   exactly how the first attempt at this fix silently did nothing. */
.search-box input.search-input:not([type="checkbox"]):not([type="radio"]),
.search-box input.search-input.form-control:not([type="checkbox"]):not([type="radio"]) {
    padding-left: 30px !important;
}

.search-box > span.search-icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
}

/* ========================================
   USER PROFILE — Recent Activity alignment
   ========================================
   Every other block on this page sits at 471px (Bootstrap's 15px column
   padding); Recent Activity is rendered outside that column and started at
   456px, so its heading hung 15px left of "Overview" and "Energy Points". */
.recent-activity {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ========================================
   BACKUPS — download cards
   ========================================
   6px of padding left the date and the file size almost touching the card
   edge. Match the breathing room the other cards in the product use, and
   space the cards from each other when they wrap onto a second row. */
.download-backup-card {
    padding: 16px !important;
    /* These tiles sit on the white content panel, so the standard card shadow
       alone left them as invisible white-on-white blocks. A hairline border
       gives each one an edge without adding a second elevation. */
    border: 1px solid var(--bt-card-border-color, #E8EDF3) !important;
}

.row.download-backups > [class*="col-"] {
    margin-bottom: 12px !important;
}

/* Bootstrap pulls the row out by -15px so its columns' own 15px padding lands
   flush with the container. Inside our padded card that cancellation puts the
   tiles hard against the panel edge, out of line with every other page. Zero
   the negative gutter and the columns' padding becomes the inset. */
.layout-main-section .row.download-backups {
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* 5px + the column's own 15px = the 20px inset every other page uses, so
       the tiles line up with the "Download Backups" title above them.
       Top is 20px to match that inset; bottom is 8px because each column
       already carries a 12px margin-bottom, which together make 20px too. */
    padding: 20px 5px 8px !important;
}

/* ========================================
   ICON AND PHONE CONTROLS — adornment allowance
   ========================================
   Both controls park an absolutely-positioned element inside the input and
   rely on the field's left padding to keep the text clear of it. The theme's
   blanket 14px overwrote that allowance, so the glyph landed on the value —
   "arrow-right" rendered with the arrow struck through the first letter.

   Measured, not guessed: .selected-icon is 22px wide at left:8px, so its
   right edge is 30px in; .selected-phone (flag + dial code) reaches 34px,
   which is why Frappe's own 30px allowance still clipped it by 4px. Both get
   an 8px gap on top of that.

   The long selectors are required to outrank
   `.form-layout .form-control:not([type=checkbox]):not([type=radio])`. */
.form-layout .frappe-control[data-fieldtype="Icon"] input.form-control,
.form-page .frappe-control[data-fieldtype="Icon"] input.form-control,
.modal-dialog .frappe-control[data-fieldtype="Icon"] input.form-control,
.frappe-control[data-fieldtype="Icon"] input.form-control {
    padding-left: 38px !important;
}

.form-layout .frappe-control[data-fieldtype="Phone"] input.form-control,
.form-page .frappe-control[data-fieldtype="Phone"] input.form-control,
.modal-dialog .frappe-control[data-fieldtype="Phone"] input.form-control,
.frappe-control[data-fieldtype="Phone"] input.form-control {
    padding-left: 42px !important;
}

/* Keep the adornments centred against whatever height the field ends up.
   `.control-input` wraps the input exactly but ships as position:static, so
   without this the nearest positioned ancestor is `.frappe-control` — which
   includes the label, making `top: 50%` resolve against a 71px box instead of
   the 44px input and leaving the glyph sitting ~12px high. */
.frappe-control[data-fieldtype="Icon"] .control-input,
.frappe-control[data-fieldtype="Phone"] .control-input,
.frappe-control[data-fieldtype="Color"] .control-input {
    position: relative !important;
}

.frappe-control[data-fieldtype="Icon"] .selected-icon,
.frappe-control[data-fieldtype="Phone"] .selected-phone {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ========================================
   LIST VIEW — swipeable table on small screens
   ========================================
   Frappe's mobile list is not a table you can scroll: it marks every column
   except the subject `.hidden-xs` / `.hidden-sm` and drops them, so Doc No,
   Status, Delivery Date and Grand Total are simply unavailable on a phone —
   there is nothing to swipe because the columns are not rendered at all.

   Here the row keeps all its columns and gets a real horizontal scroll
   container instead. The min-width is what makes this safe: an earlier attempt
   at showing these columns (without one) let them collapse toward zero width
   inside a 371px row, which is how the list ended up looking blank. 900px
   leaves the customer name ~131px — still the widest column and readable.

   The scroll lives on `.frappe-list`, the shared ancestor of the header row
   and the results, so both move together; putting it on each separately would
   let the headers drift out of line with the data under them. */
@media (max-width: 991.98px) {
    .layout-main-section .frappe-list {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .frappe-list > .list-row-head,
    .frappe-list .result {
        min-width: 900px !important;
        overflow: visible !important;
    }

    .frappe-list .list-row-col.hidden-xs,
    .frappe-list .list-row-col.hidden-sm {
        display: flex !important;
    }
}