/* Bundled theme styles (was 3 raw app_include_css/web_include_css entries).
   One hashed bundle -> smaller preload header + auto cache-busting.
   Order preserved: shared -> theme_chrome -> theme_silk. */

/* ===== shared.css ===== */
/* ==========================================================================
   Jey Theme — Shared Styles (theme-independent)
   ========================================================================== */

/* Override Frappe's default desk splash image (the blue "E").
   Splash markup is in templates/includes/splash_screen.html and gets removed
   by Frappe once the desk boots, so this only shows during page load. */
.splash img {
	content: url("/assets/jey_theme/images/preloader.png");
	max-width: 64px !important;
	width: 64px !important;
	height: auto;
}

/* Hide Organization desktop icon by default */
.desktop-icon[data-id="Organization"],
.desktop-icon[data-id="ERPNext"] {
	display: none !important;
}

/* Fallback hide for blocked modules (main filtering happens in access_control.py).
   Desktop Icon records use label "Quality" and "Subcontracting" — match those. */
.desktop-icon[data-id="Quality"],
.desktop-icon[data-id="Quality Management"],
.desktop-icon[data-id="Subcontracting"] {
	display: none !important;
}

/* ==========================================================================
   Toggle Switch Checkboxes
   ========================================================================== */

input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: 28px !important;
        min-width: 28px !important;
        height: 16px !important;
        background-color: var(--gray-400, #c0c6cc) !important;
        background-image: none !important;
        border-radius: 999px !important;
        border: none !important;
        position: relative !important;
        cursor: pointer !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
        transition: background-color 0.25s ease !important;
        vertical-align: middle !important;
        margin: 0 !important;
        margin-right: 8px !important;
        outline: none !important;
}

input[type="checkbox"]::after {
        content: "" !important;
        width: 12px !important;
        height: 12px !important;
        background-color: #fff !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.25s ease !important;
        border: none !important;
}

input[type="checkbox"]:checked,
input[type="checkbox"].disabled-selected {
        background-color: #2da44e !important;
        background-image: none !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

input[type="checkbox"]:checked::after,
input[type="checkbox"].disabled-selected::after {
        transform: translateX(12px) !important;
}

input[type="checkbox"]:focus {
        outline: none !important;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 2px rgba(45, 164, 78, 0.25) !important;
}

input[type="checkbox"]:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
        background-image: none !important;
}

input[type="checkbox"].disabled-selected {
        opacity: 0.7 !important;
        cursor: not-allowed !important;
}


/* ==========================================================================
   Table Grid — restore Frappe default checkboxes
   ========================================================================== */

.row-check input[type="checkbox"],
.grid-row-check {
        width: var(--checkbox-size, 14px) !important;
        min-width: var(--checkbox-size, 14px) !important;
        height: var(--checkbox-size, 14px) !important;
        border-radius: 4px !important;
        border: 1px solid var(--gray-500) !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        margin-right: 0 !important;
        transition: none !important;
}

.row-check input[type="checkbox"]::after,
.grid-row-check::after {
        content: "" !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        border-radius: 0 !important;
        position: absolute !important;
        top: auto !important;
        left: auto !important;
        box-shadow: none !important;
        transition: none !important;
        transform: none !important;
        inset: -8px !important;
        opacity: 0 !important;
}

.row-check input[type="checkbox"]:checked,
.grid-row-check:checked {
        background-color: var(--primary) !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>"), var(--checkbox-gradient) !important;
        background-size: 57%, 100% !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border: none !important;
        box-shadow: none !important;
}

.row-check input[type="checkbox"]:checked::after,
.grid-row-check:checked::after {
        transform: none !important;
}

/* ==========================================================================
   Report View (frappe-datatable) — compact themed checkboxes
   The global toggle-switch styling (28×16) doesn't fit the 32px select
   column or the 37px row-number column, so content gets clipped. Use the
   same compact square style as child-table grids (.row-check) — themed,
   not native.
   ========================================================================== */

.datatable input[type="checkbox"] {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        width: var(--checkbox-size, 14px) !important;
        min-width: var(--checkbox-size, 14px) !important;
        height: var(--checkbox-size, 14px) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--gray-500) !important;
        border-radius: 4px !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        vertical-align: middle !important;
        transition: none !important;
}

.datatable input[type="checkbox"]::after {
        content: none !important;
        display: none !important;
}

.datatable input[type="checkbox"]:checked {
        background-color: var(--primary) !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-size: 57% !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        border: none !important;
}

.datatable input[type="checkbox"]:disabled {
        opacity: 0.5 !important;
        cursor: not-allowed !important;
}

/* Centre the checkbox vertically in its cell — vertical-align:middle on the
   input alone isn't enough because datatable cells have their own line-box
   rules that anchor the box to the baseline. */
.datatable .dt-cell__content:has(> input[type="checkbox"]:only-child) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
}

/* Filter row: input + help-icon squash each other in narrow columns. Let
   the input flex-shrink instead of overflowing its siblings. */
.datatable .dt-row-filter .dt-cell__content {
        display: flex !important;
        align-items: center !important;
        gap: 2px;
}

.datatable .dt-row-filter .dt-filter.dt-input {
        flex: 1 1 0 !important;
        min-width: 0 !important;
}

.datatable .dt-row-filter .comparison-help-icon {
        flex: 0 0 auto;
}

/* ==========================================================================
   List View — restore toggle knob
   ========================================================================== */

input.list-row-checkbox::after,
input.list-header-checkbox::after {
        inset: auto !important;
        width: 12px !important;
        height: 12px !important;
        background-color: #fff !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
        transition: transform 0.25s ease !important;
        opacity: 1 !important;
}

input.list-row-checkbox:checked::after,
input.list-header-checkbox:checked::after {
        transform: translateX(12px) !important;
}


.frappe-control[data-fieldtype="Check"] .checkbox label {
        align-items: center !important;
}

.frappe-control[data-fieldtype="Check"] .checkbox .input-area:not(.hide) {
        padding-top: 0 !important;
        display: flex !important;
        align-items: center !important;
}

/* ==========================================================================
   List View — swap filter and sort order
   ========================================================================== */

.filter-section {
        display: flex !important;
}

.filter-section .sort-selector {
        order: -1 !important;
        margin-right: 8px !important;
}

/* ==========================================================================
   Table Horizontal Scrollbar — thicker & easier to grab
   ========================================================================== */

/* Force scrollbar always visible & push it below table content */
.form-grid {
        overflow-x: scroll !important;
        padding-bottom: 12px !important;
        scrollbar-width: auto !important;
}

.form-grid::-webkit-scrollbar {
        height: 10px !important;
}

.form-grid::-webkit-scrollbar-track {
        background: var(--gray-100, #f5f5f5) !important;
}

.form-grid::-webkit-scrollbar-thumb {
        background: var(--gray-400, #c0c6cc) !important;
        border-radius: 5px !important;
        border: 2px solid var(--gray-100, #f5f5f5) !important;
}

.form-grid::-webkit-scrollbar-thumb:hover {
        background: var(--gray-500, #98a2ab) !important;
}


/* ==========================================================================
   Grid Column Resize Handles
   ========================================================================== */

.jey-col-resize {
        position: absolute;
        top: 0;
        right: -2px;
        width: 5px;
        height: 100%;
        cursor: col-resize;
        z-index: 2;
        background: transparent;
        transition: background 0.15s;
}

.jey-col-resize:hover,
.jey-col-resize:active {
        background: var(--primary, #2490ef);
        opacity: 0.5;
}

/* Column drag & drop */
.grid-heading-row .grid-static-col[data-jey-draggable] {
        cursor: grab;
}

.grid-heading-row .grid-static-col.jey-drop-target.jey-drop-left {
        box-shadow: inset 3px 0 0 var(--primary, #2490ef);
        background: rgba(36, 144, 239, 0.05);
}

.grid-heading-row .grid-static-col.jey-drop-target.jey-drop-right {
        box-shadow: inset -3px 0 0 var(--primary, #2490ef);
        background: rgba(36, 144, 239, 0.05);
}

/* ==========================================================================
   List View Column Resize + Reorder
   ========================================================================== */

.list-row-head .list-row-col {
        position: relative;
}

/* Column dividers — hint that headers can be resized / reordered. */
.list-row-head .list-row-col:not(:last-child) {
        border-right: 1px solid var(--border-color, #e2e6e9);
}

.list-row-head .jey-col-resize {
        position: absolute;
        top: 0;
        right: -2px;
        width: 5px;
        height: 100%;
        cursor: col-resize;
        z-index: 3;
        background: transparent;
        transition: background 0.15s;
}

.list-row-head .jey-col-resize:hover,
.list-row-head .jey-col-resize:active {
        background: var(--primary, #2490ef);
        opacity: 0.5;
}

.list-row-head .list-row-col[data-jey-draggable]:not(.list-subject) {
        cursor: grab;
}

.list-row-head .list-row-col.jey-drop-target.jey-drop-left {
        box-shadow: inset 3px 0 0 var(--primary, #2490ef);
        background: rgba(36, 144, 239, 0.05);
}

.list-row-head .list-row-col.jey-drop-target.jey-drop-right {
        box-shadow: inset -3px 0 0 var(--primary, #2490ef);
        background: rgba(36, 144, 239, 0.05);
}

/* ==========================================================================
   Sidebar — Full Width button
   ========================================================================== */

/* .body-sidebar-bottom is a flex item of .body-sidebar (column flex).
   By default min-width:auto resolves to min-content, so it refuses to
   shrink below the natural width of its widest text — and our buttons'
   labels poke past the collapsed sidebar's right edge. Force min-width:0
   so it can match the cross-axis (50px collapsed) and clip properly. */
.body-sidebar .body-sidebar-bottom {
        min-width: 0;
}

.jey-fullwidth-link,
.jey-theme-switch-link,
.jey-collapse-link {
        text-decoration: none;
        font-size: var(--text-sm);
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 8px;
        width: 100%;
        overflow: hidden;
}

.jey-fullwidth-link svg,
.jey-theme-switch-link svg,
.jey-collapse-link svg {
        margin: 0;
        flex: 0 0 auto;
}

.jey-fullwidth-link span,
.jey-theme-switch-link span,
.jey-collapse-link span {
        margin-left: 10px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When sidebar is collapsed, animate the label to zero width + zero
   margin so it smoothly slides under the icon instead of leaving a
   single ellipsized letter at the edge. */
.body-sidebar-container:not(.expanded) .jey-fullwidth-link span,
.body-sidebar-container:not(.expanded) .jey-theme-switch-link span,
.body-sidebar-container:not(.expanded) .jey-collapse-link span {
        max-width: 0;
        margin-left: 0;
}

/* Hide the v16.17 native bottom row (about + collapse icon-buttons).
   Our labeled .jey-collapse-link replaces it. */
.body-sidebar .sidebar-bottom-actions {
        display: none !important;
}

/* Frappe v16 toggles .nav-item padding 0→8px instantly between
   collapsed/expanded, while the sidebar width itself transitions over
   0.3s — making the user/account button visibly jump 8px. Animate the
   padding so it stays in sync with the width. */
.body-sidebar .nav-item {
        transition: padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Modal / Dialog — Smooth Entrance
   ========================================================================== */

.modal.fade .modal-dialog {
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
        transform: translateY(-24px) scale(0.97);
        opacity: 0;
}

.modal.show .modal-dialog {
        transform: none;
        opacity: 1;
}


/* ==========================================================================
   Form Sections — Cascade Entrance
   ========================================================================== */

@keyframes jey-section-in {
        from { top: -12px; }
        to   { top: 0; }
}

/* Slide-only entrance — animating `opacity` here would create a persistent
   stacking context on .section-body (Firefox keeps the compositing layer
   alive after the animation completes when `fill-mode: both` keeps opacity
   fill-forward, even though opacity reaches 1). That stacking context traps
   Frappe's child-table row form (.form-in-grid, z-index 1021) under the
   freeze backdrop (#freeze.modal-backdrop, z-index 1020): the row form
   visually disappears behind the backdrop, every mouse click is captured by
   #freeze (whose handler closes the row form), and only keyboard nav works.
   Same reason we slide via `top` instead of `transform: translateY()` —
   `transform` would also leave behind a stacking context.
   `position: relative` alone (without z-index) does NOT create one. */
.form-layout .form-section .section-head,
.form-layout .form-section .section-body {
        position: relative;
        animation: jey-section-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.form-layout .form-section:nth-child(1) .section-head,
.form-layout .form-section:nth-child(1) .section-body  { animation-delay: 0.04s; }
.form-layout .form-section:nth-child(2) .section-head,
.form-layout .form-section:nth-child(2) .section-body  { animation-delay: 0.10s; }
.form-layout .form-section:nth-child(3) .section-head,
.form-layout .form-section:nth-child(3) .section-body  { animation-delay: 0.16s; }
.form-layout .form-section:nth-child(4) .section-head,
.form-layout .form-section:nth-child(4) .section-body  { animation-delay: 0.22s; }
.form-layout .form-section:nth-child(5) .section-head,
.form-layout .form-section:nth-child(5) .section-body  { animation-delay: 0.28s; }
.form-layout .form-section:nth-child(6) .section-head,
.form-layout .form-section:nth-child(6) .section-body  { animation-delay: 0.34s; }
.form-layout .form-section:nth-child(7) .section-head,
.form-layout .form-section:nth-child(7) .section-body  { animation-delay: 0.40s; }
.form-layout .form-section:nth-child(8) .section-head,
.form-layout .form-section:nth-child(8) .section-body  { animation-delay: 0.46s; }
.form-layout .form-section:nth-child(9) .section-head,
.form-layout .form-section:nth-child(9) .section-body  { animation-delay: 0.52s; }
.form-layout .form-section:nth-child(10) .section-head,
.form-layout .form-section:nth-child(10) .section-body { animation-delay: 0.58s; }
.form-layout .form-section:nth-child(11) .section-head,
.form-layout .form-section:nth-child(11) .section-body { animation-delay: 0.64s; }
.form-layout .form-section:nth-child(12) .section-head,
.form-layout .form-section:nth-child(12) .section-body { animation-delay: 0.70s; }


/* ==========================================================================
   Form Tabs — Sliding Active Indicator
   ========================================================================== */

.form-tabs .nav-link {
        position: relative;
        border-bottom: none !important;
        transition: color 0.3s ease;
}

.form-tabs .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--text-color);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-tabs .nav-link.active::after {
        transform: scaleX(1);
}


/* ==========================================================================
   Dropdown Animations
   ========================================================================== */

.dropdown-menu {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
}

.dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        animation: jey-dropdown-in 0.2s ease;
}

/* Applied by JS during Bootstrap hide so Popper's transform reset
   doesn't move the menu mid-fade. See "Dropdown fade-out" in jey_theme.js. */
.dropdown-menu.jey-dropdown-hiding {
        visibility: visible !important;
        pointer-events: none;
        animation: jey-dropdown-out 0.2s ease forwards;
}

@keyframes jey-dropdown-in {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@keyframes jey-dropdown-out {
        from { opacity: 1; }
        to   { opacity: 0; }
}

/* ==========================================================================
   Sidebar — Smooth Collapse / Expand
   Frappe toggles .body-sidebar-placeholder between display:none and display:flex,
   so the container's fit-content width snaps on expand (the inner sidebar goes
   position:absolute, placeholder appears at 220px instantly). The collapse path
   keeps the sidebar in flow, so its width transition is already smooth.
   Override the container with an explicit width transition to make expand
   symmetric with collapse.
   ========================================================================== */

@media (min-width: 576px) {
        .body-sidebar-container {
                width: 50px;
                transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .body-sidebar-container.expanded {
                width: var(--sidebar-width);
        }
}

/* ==========================================================================
   Sidebar — No Alignment Shift Between States
   Regular items land at 15px from the sidebar's left edge (sidebar padding 8
   + icon padding 7). Two state-dependent paddings break that alignment in
   expanded mode:
     1. Frappe's sidebar_header.js sets inline padding-left/right: 8px on
        .sidebar-header when expanded, 0 when collapsed — pushes the logo to
        23px in expanded. Override inline style with !important.
     2. SCSS mixin body-sidebar-expanded gives .sidebar-user-button
        padding: var(--padding-sm) only when .expanded — pushes the avatar
        to 23px and makes the button taller, which shifts the Jey buttons
        above it vertically. Zero out the padding.
   Zeroing both keeps every icon/avatar at 15px and button heights constant
   across expand/collapse, so nothing jumps on toggle.
   ========================================================================== */

.body-sidebar .sidebar-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
}

.body-sidebar-container.expanded .sidebar-user-button {
        padding: 0 !important;
}

/* ==========================================================================
   Sidebar — Hover Effects
   ========================================================================== */

.body-sidebar .standard-sidebar-item .item-anchor {
        transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                    background 0.4s ease;
}

.body-sidebar .standard-sidebar-item .item-anchor:hover {
        padding-left: calc(var(--padding-xs, 8px) + 4px);
}

.body-sidebar .standard-sidebar-item .sidebar-item-icon {
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.body-sidebar .standard-sidebar-item .item-anchor:hover .sidebar-item-icon {
        transform: scale(1.15);
}

/* Active item — subtle left accent bar */
.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
        position: relative;
}

.body-sidebar .standard-sidebar-item.active-sidebar .item-anchor::before {
        content: "";
        position: absolute;
        left: 0;
        top: 20%;
        bottom: 20%;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--primary, #2490ef);
        opacity: 0.8;
}


/* ==========================================================================
   List View — Row Entrance Animation
   ========================================================================== */

@keyframes jey-list-row-in {
        from {
                opacity: 0;
                transform: translateX(-16px);
        }
        to {
                opacity: 1;
                transform: translateX(0);
        }
}

.frappe-list .result .list-row-container:not(:first-child) {
        animation: jey-list-row-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.frappe-list .result .list-row-container:nth-child(2)  { animation-delay: 0.03s; }
.frappe-list .result .list-row-container:nth-child(3)  { animation-delay: 0.05s; }
.frappe-list .result .list-row-container:nth-child(4)  { animation-delay: 0.07s; }
.frappe-list .result .list-row-container:nth-child(5)  { animation-delay: 0.09s; }
.frappe-list .result .list-row-container:nth-child(6)  { animation-delay: 0.11s; }
.frappe-list .result .list-row-container:nth-child(7)  { animation-delay: 0.13s; }
.frappe-list .result .list-row-container:nth-child(8)  { animation-delay: 0.15s; }
.frappe-list .result .list-row-container:nth-child(9)  { animation-delay: 0.17s; }
.frappe-list .result .list-row-container:nth-child(10) { animation-delay: 0.19s; }
.frappe-list .result .list-row-container:nth-child(11) { animation-delay: 0.21s; }
.frappe-list .result .list-row-container:nth-child(12) { animation-delay: 0.23s; }
.frappe-list .result .list-row-container:nth-child(13) { animation-delay: 0.25s; }
.frappe-list .result .list-row-container:nth-child(14) { animation-delay: 0.27s; }
.frappe-list .result .list-row-container:nth-child(15) { animation-delay: 0.29s; }
.frappe-list .result .list-row-container:nth-child(16) { animation-delay: 0.31s; }
.frappe-list .result .list-row-container:nth-child(17) { animation-delay: 0.33s; }
.frappe-list .result .list-row-container:nth-child(18) { animation-delay: 0.35s; }
.frappe-list .result .list-row-container:nth-child(19) { animation-delay: 0.37s; }
.frappe-list .result .list-row-container:nth-child(20) { animation-delay: 0.39s; }
.frappe-list .result .list-row-container:nth-child(21) { animation-delay: 0.41s; }


/* ==========================================================================
   Search Dialog — Fade In / Out
   ========================================================================== */

.modal:has(.cool-awesomebar-modal-footer) {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0.5s;
}

.modal:has(.cool-awesomebar-modal-footer) .modal-dialog {
        transform: translateY(-30px);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal.show:has(.cool-awesomebar-modal-footer) {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
}

.modal.show:has(.cool-awesomebar-modal-footer) .modal-dialog {
        transform: none;
}


/* ==========================================================================
   Report Summary — Card Cascade
   ========================================================================== */

@keyframes jey-summary-in {
        from {
                opacity: 0;
                transform: translateY(10px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}

.report-summary .summary-item {
        animation: jey-summary-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.report-summary .summary-item:nth-child(1) { animation-delay: 0.05s; }
.report-summary .summary-item:nth-child(2) { animation-delay: 0.10s; }
.report-summary .summary-item:nth-child(3) { animation-delay: 0.15s; }
.report-summary .summary-item:nth-child(4) { animation-delay: 0.20s; }
.report-summary .summary-item:nth-child(5) { animation-delay: 0.25s; }
.report-summary .summary-item:nth-child(6) { animation-delay: 0.30s; }


/* ==========================================================================
   Form Section Collapse / Expand — Smooth
   ========================================================================== */

.form-section .collapse-indicator {
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        display: inline-block;
}

.form-section .section-head.collapsed .collapse-indicator {
        transform: rotate(-90deg);
}

/* Expanded section-body has no `overflow: hidden` — so Link-field autocomplete
   dropdowns (and any other overflow) are not clipped by the section boundary.
   `overflow: hidden` is applied via JS only during the collapse/expand
   transition (see jey_theme.js), then removed once the animation finishes. */
.form-section .section-head.collapsible + .section-body {
        display: flex !important;
        flex-wrap: wrap;
        transition: max-height 0.5s ease-in-out,
                    padding 0.5s ease-in-out;
}

.form-section .section-head.collapsed + .section-body {
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out,
                    padding 0.5s ease-in-out;
}



/* ==========================================================================
   Link Field — Awesomplete Dropdown Fade
   ========================================================================== */

.awesomplete > [role="listbox"] {
        animation: jey-awesomplete-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Applied by JS on awesomplete-close so the listbox fades instead of
   vanishing when [hidden] is set. See "Awesomplete fade-out" in jey_theme.js. */
.awesomplete > [role="listbox"].jey-awesomplete-hiding {
        display: block !important;
        pointer-events: none;
        animation: jey-awesomplete-out 0.2s ease forwards;
}

@keyframes jey-awesomplete-in {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@keyframes jey-awesomplete-out {
        from { opacity: 1; }
        to   { opacity: 0; }
}

/* Lift the open autocomplete listbox above its siblings so the dropdown can
   spill past the section boundary without being painted over by later
   sections (which naturally paint above earlier ones in DOM order).
   Lift only the listbox itself, NOT the surrounding .form-section, because a
   z-index on the section creates a stacking context that traps Frappe's
   child-table row form (.form-in-grid, z-index 1021) below the freeze
   backdrop (#freeze.modal-backdrop, z-index 1020), leaving the screen
   unclickable when editing a row. */
.awesomplete > ul[role="listbox"]:not([hidden]) {
        z-index: 10;
}


/* ==========================================================================
   Input Focus — Inset Press
   ========================================================================== */

input.form-control:not([type="checkbox"]):not([type="radio"]),
textarea.form-control,
.frappe-control input:not([type="checkbox"]):not([type="radio"]),
.frappe-control textarea {
        transition:
                background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
textarea.form-control:focus,
.frappe-control input:not([type="checkbox"]):not([type="radio"]):focus,
.frappe-control textarea:focus {
        border-color: var(--gray-500, #a8b0b8) !important;
        outline: none;
}


/* ==========================================================================
   Buttons — Shine on Hover, Press on Click
   ========================================================================== */

.btn {
        position: relative;
        overflow: hidden;
        transition: box-shadow 0.4s ease, background-color 0.3s ease, color 0.3s ease;
}

.btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg,
                transparent 35%,
                rgba(255, 255, 255, 0.25) 45%,
                rgba(255, 255, 255, 0.25) 55%,
                transparent 65%);
        transform: translateX(-110%);
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
}

.btn:hover::after {
        transform: translateX(110%);
}

.btn:active {
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}


/* Hide dropdown items now surfaced as sidebar buttons */
.dropdown-menu-item[onclick*="toggle_full_width"],
.dropdown-menu-item[onclick*="clear_cache"],
.dropdown-menu-item[onclick*="ThemeSwitcher"],
.dropdown-menu-item[data-name="website"],
.dropdown-menu-item.jey-hidden-item {
        display: none !important;
}


/* ==========================================================================
   Desktop Icons — Shared base (all themes)
   ========================================================================== */

.desktop-icon:hover {
        transform: translateY(-2px) !important;
}

.desktop-icon:active {
        transform: scale(0.97) !important;
}

.icon-container.jey-chrome-done {
        width: 72px !important;
        height: 72px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: none !important;
        overflow: visible !important;
        position: relative !important;
}

.icon-container.jey-chrome-done:hover {
        transform: none !important;
}

.icon-container.folder-icon.jey-chrome-done {
        box-shadow: none !important;
}

/* ==========================================================================
   Desktop Modal (module icons picker) — caption overflow + clean heading
   ========================================================================== */

/* Give the 4-col icon grid room between cells so captions don't collide */
#desktop-modal .icons-container .icons {
        gap: 12px 8px !important;
        padding: 12px 0 !important;
}

/* Each icon: constrain to its grid track and center contents */
#desktop-modal .desktop-icon {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
}

/* Caption wraps to 2 lines max, truncates with ellipsis, never overflows column */
#desktop-modal .desktop-icon .icon-caption {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
        margin-top: 14px !important;
}

#desktop-modal .desktop-icon .icon-title {
        width: 100% !important;
        max-width: 100% !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
        white-space: normal !important;
}

/* Strip the themed gradient/border off the desktop-modal header — title only, no bar */
#desktop-modal .modal-header.desktop-modal-heading {
        background: transparent !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
}

#desktop-modal .modal-header.desktop-modal-heading .modal-title,
#desktop-modal .modal-header.desktop-modal-heading .title-input-label span {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
}

/* Everything inside the desktop-modal renders text crisply — no inherited blur */
#desktop-modal .icon-title,
#desktop-modal .icon-caption {
        text-shadow: none !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

/* Grow to content: no inner scrollbar when icons fit */
#desktop-modal .modal-body.desktop-modal-body {
        overflow: visible !important;
        max-height: none !important;
}

#desktop-modal .icons-container {
        overflow: visible !important;
        max-height: none !important;
}

/* ==========================================================================
   Icon Animations — Shared (all themes)
   ========================================================================== */

/* Framework — gentle float */
.ico-framework { animation: ico-float 5s ease-in-out infinite; transform-origin: center; }
@keyframes ico-float {
        0%,100% { transform: translateY(0) rotate(0deg); opacity: 0.85; }
        30% { transform: translateY(-2px) rotate(0.8deg); opacity: 1; }
        70% { transform: translateY(0.5px) rotate(-0.4deg); opacity: 0.9; }
}

.ico-org { animation: ico-org 6s ease-in-out infinite; transform-origin: center bottom; }
@keyframes ico-org {
        0%,100% { transform: scaleY(1) scaleX(1); }
        25% { transform: scaleY(1.03) scaleX(0.99); }
        50% { transform: scaleY(1.05) scaleX(0.98); }
        75% { transform: scaleY(1.02) scaleX(1); }
}

.ico-acc .acc-btn { animation: ico-press 3s ease-in-out infinite; }
@keyframes ico-press { 0%,25%,100% { opacity: 0.5; stroke-width: 2.5; } 12% { opacity: 1; stroke-width: 3.2; } }

.ico-assets { animation: ico-safe 6s ease-in-out infinite; transform-origin: center; }
.ico-assets .lock-dot { animation: ico-blink 5s ease-in-out infinite; }
@keyframes ico-safe { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-0.6px); } 60% { transform: translateY(0.3px); } }
@keyframes ico-blink { 0%,35%,65%,100% { opacity: 1; } 50% { opacity: 0.15; } }

.ico-buying { animation: ico-cart 6s ease-in-out infinite; transform-origin: 12px 21px; }
@keyframes ico-cart { 0%,100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(1.5px) rotate(0.8deg); } 50% { transform: translateX(-0.5px) rotate(-0.3deg); } 80% { transform: translateX(0.8px) rotate(0.4deg); } }

.ico-mfg .gear1 { animation: ico-spin 9s linear infinite; transform-origin: 9px 12px; }
.ico-mfg .gear2 { animation: ico-spin-r 7s linear infinite; transform-origin: 17px 8px; }
@keyframes ico-spin { to { transform: rotate(360deg); } }
@keyframes ico-spin-r { to { transform: rotate(-360deg); } }

.ico-proj .col1 { animation: ico-g1 5s ease-in-out infinite; transform-origin: 5.5px 21px; }
.ico-proj .col2 { animation: ico-g2 5s ease-in-out infinite 0.5s; transform-origin: 12.5px 15px; }
.ico-proj .col3 { animation: ico-g3 5s ease-in-out infinite 1s; transform-origin: 19.5px 18px; }
@keyframes ico-g1 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(0.85); opacity: 1; } }
@keyframes ico-g2 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(1.15); opacity: 1; } }
@keyframes ico-g3 { 0%,100% { transform: scaleY(1); opacity: 0.75; } 50% { transform: scaleY(0.88); opacity: 1; } }

.ico-quality { animation: ico-shield 6s ease-in-out infinite; transform-origin: 12px 14px; }
@keyframes ico-shield { 0%,100% { transform: rotate(0deg) scale(1); } 15% { transform: rotate(1.5deg) scale(1.03); } 35% { transform: rotate(-0.5deg) scale(1.01); } 55% { transform: rotate(-1.5deg) scale(1.03); } 75% { transform: rotate(0.5deg) scale(1.01); } }

.ico-selling { animation: ico-sell 4s ease-in-out infinite; transform-origin: center; }
.ico-selling .arrow-head { animation: ico-up 4s ease-in-out infinite; }
@keyframes ico-sell { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes ico-up { 0%,100% { transform: translate(0,0); } 30% { transform: translate(1px, -1.5px); } 60% { transform: translate(2px, -2.5px); } }

.ico-stock { animation: ico-bob 5s ease-in-out infinite; transform-origin: center; }
@keyframes ico-bob { 0%,100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(2deg) translateY(-0.7px); } 50% { transform: rotate(-1deg) translateY(0.3px); } 80% { transform: rotate(1.5deg) translateY(-0.4px); } }

.ico-sub .person-l { animation: ico-rl 6s ease-in-out infinite; transform-origin: 8px 12px; }
.ico-sub .person-r { animation: ico-rr 6s ease-in-out infinite; transform-origin: 16px 12px; }
@keyframes ico-rl { 0%,100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(1px) rotate(1deg); } 60% { transform: translateX(1.5px) rotate(0.5deg); } }
@keyframes ico-rr { 0%,100% { transform: translateX(0) rotate(0deg); } 30% { transform: translateX(-1px) rotate(-1deg); } 60% { transform: translateX(-1.5px) rotate(-0.5deg); } }

.ico-settings { animation: ico-gear-main 12s linear infinite; transform-origin: center; }
@keyframes ico-gear-main { to { transform: rotate(360deg); } }

/* HR — plus sign pulsing */
.ico-hr .plus-v { animation: ico-pv 4s ease-in-out infinite; transform-origin: center; }
.ico-hr .plus-h { animation: ico-ph 4s ease-in-out infinite 0.3s; transform-origin: center; }
@keyframes ico-pv { 0%,100% { opacity: 0.4; stroke-width: 1.8; } 50% { opacity: 1; stroke-width: 2.4; } }
@keyframes ico-ph { 0%,100% { opacity: 0.4; stroke-width: 1.8; } 50% { opacity: 1; stroke-width: 2.4; } }

/* ==========================================================================
   Theme Switcher Dialog
   ========================================================================== */

.jey-theme-grid {
        display: flex;
        gap: 20px;
        padding: 20px;
        justify-content: center;
}

.jey-theme-card {
        cursor: pointer;
        text-align: center;
        padding: 16px;
        border-radius: 12px;
        border: 2px solid transparent;
        transition: border-color 0.2s, background 0.2s;
        min-width: 140px;
}

.jey-theme-card:hover {
        background: var(--subtle-fg, #f5f5f5);
}

.jey-theme-card.selected {
        border-color: var(--primary, #2490ef);
        background: var(--subtle-fg, #f5f5f5);
}

.jey-theme-preview {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin: 0 auto 12px;
        position: relative;
        overflow: hidden;
}

.jey-theme-preview--chrome {
        background: conic-gradient(from 140deg, #a0a0a0 0deg, #f2f2f2 40deg, #777 80deg, #e5e5e5 120deg, #959595 170deg, #ededed 210deg, #808080 260deg, #d8d8d8 310deg, #a0a0a0 360deg);
        box-shadow: 0 3px 8px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.5);
}

.jey-theme-preview--chrome .jey-theme-preview-icon {
        position: absolute;
        inset: 9px;
        border-radius: 50%;
        background: linear-gradient(168deg, #f4f4f4 0%, #e0e0e0 45%, #d4d4d4 100%);
}

.jey-theme-preview--silk {
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.jey-theme-preview--silk .jey-theme-preview-icon {
        position: absolute;
        inset: 22px;
        border-radius: 6px;
        background: #4f46e5;
        opacity: 0.25;
}

.jey-theme-label {
        font-weight: 600;
        font-size: var(--text-base);
        margin-bottom: 2px;
}

.jey-theme-info {
        font-size: var(--text-sm);
        color: var(--text-muted);
}

/* ==========================================================================
   Module Widget Cards — Entrance & Hover Animations
   ========================================================================== */

/* --- Animation variant #2 (final): Slide-up entrance + Accent Bar hover --- */

/* Entrance: fade-in slide-up (from variant #1) */
.ce-block .links-widget-box,
.ce-block .number-widget-box {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
        animation: jey-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        border-radius: var(--border-radius-lg, 12px);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.35s ease;
        position: relative;
}

/* Number card value — delayed fade-in after card entrance */
@keyframes jey-number-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
}

.number-widget-box .widget-content .number {
        animation: jey-number-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Allow dropdown menus (card actions) to escape the widget box.
   Without this, .widget-control .dropdown-menu is clipped/hidden behind
   the widget because Popper renders it as a sibling inside the box. */
.ce-block .links-widget-box .widget-control .dropdown-menu,
.ce-block .number-widget-box .widget-control .dropdown-menu {
        z-index: 1050;
}

/* Stagger delays */
.ce-block:nth-child(1) .links-widget-box,
.ce-block:nth-child(1) .number-widget-box  { animation-delay: 0.00s; }
.ce-block:nth-child(2) .links-widget-box,
.ce-block:nth-child(2) .number-widget-box  { animation-delay: 0.06s; }
.ce-block:nth-child(3) .links-widget-box,
.ce-block:nth-child(3) .number-widget-box  { animation-delay: 0.12s; }
.ce-block:nth-child(4) .links-widget-box,
.ce-block:nth-child(4) .number-widget-box  { animation-delay: 0.18s; }
.ce-block:nth-child(5) .links-widget-box,
.ce-block:nth-child(5) .number-widget-box  { animation-delay: 0.24s; }
.ce-block:nth-child(6) .links-widget-box,
.ce-block:nth-child(6) .number-widget-box  { animation-delay: 0.30s; }
.ce-block:nth-child(7) .links-widget-box,
.ce-block:nth-child(7) .number-widget-box  { animation-delay: 0.36s; }
.ce-block:nth-child(8) .links-widget-box,
.ce-block:nth-child(8) .number-widget-box  { animation-delay: 0.42s; }
.ce-block:nth-child(9) .links-widget-box,
.ce-block:nth-child(9) .number-widget-box  { animation-delay: 0.48s; }
.ce-block:nth-child(10) .links-widget-box,
.ce-block:nth-child(10) .number-widget-box { animation-delay: 0.54s; }
.ce-block:nth-child(11) .links-widget-box,
.ce-block:nth-child(11) .number-widget-box { animation-delay: 0.60s; }
.ce-block:nth-child(12) .links-widget-box,
.ce-block:nth-child(12) .number-widget-box { animation-delay: 0.66s; }

@keyframes jey-card-in {
        from {
                opacity: 0;
                transform: translateY(24px) scale(0.97);
        }
        to {
                opacity: 1;
                transform: none;
        }
}

/* Hover: soft bottom accent line + lift */
.ce-block .links-widget-box::after,
.ce-block .number-widget-box::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 2.5px;
        border-radius: 2px 2px 0 0;
        background: var(--primary, #2490ef);
        transform: scaleX(0);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center;
}

.ce-block .links-widget-box:hover::after,
.ce-block .number-widget-box:hover::after {
        transform: scaleX(1);
}

.ce-block .links-widget-box:hover,
.ce-block .number-widget-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
                    0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Lift widget above its siblings while hovered or while its card-actions
   dropdown is open, so the dropdown menu (which lives inside the widget's
   own stacking context due to transform) is not covered by neighbours. */
.ce-block .links-widget-box:hover,
.ce-block .number-widget-box:hover,
.ce-block .links-widget-box:focus-within,
.ce-block .number-widget-box:focus-within {
        z-index: 100;
}

.ce-block .links-widget-box:has(.dropdown-menu.show),
.ce-block .number-widget-box:has(.dropdown-menu.show) {
        z-index: 200;
}


/* Link items: colored left accent bar slides in */
.links-widget-box .link-item {
        position: relative;
        transition: background 0.25s ease, transform 0.25s ease;
        border-radius: var(--border-radius, 8px);
        overflow: hidden;
}

.links-widget-box .link-item:hover {
        transform: translateX(6px);
        background: var(--subtle-fg, rgba(0, 0, 0, 0.02));
}

.links-widget-box .link-item .es-icon {
        display: none !important;
}


/* ==========================================================================
   Select Field — Custom chevron icon
   ========================================================================== */

.select-icon svg {
        display: none !important;
}

.select-icon {
        top: 0 !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
}

.select-icon::after {
        content: "" !important;
        display: block;
        width: 12px;
        height: 12px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636e72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
}

/* ==========================================================================
   Empty State — Custom folder icon
   ========================================================================== */

.msg-box .icon-xl {
        display: none !important;
}

.msg-box .mb-4 {
        display: flex;
        justify-content: center;
}

.msg-box .mb-4::after {
        content: "" !important;
        display: block;
        width: 48px;
        height: 48px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b8c0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
}

/* ==========================================================================
   Hide "Getting Started" onboarding panels
   ========================================================================== */

.user-onboarding {
        display: none !important;
}

/* ==========================================================================
   Comment-count icon override
   jey_theme.js swaps the sprite href from #es-line-chat-alt (filled)
   to a lucide stroke-based icon. The SVG element still carries .es-icon
   (fill: currentColor; stroke-width: 0), which would render the new
   icon as a solid black shape — force stroke rendering here.
   ========================================================================== */
.comment-count svg {
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.5 !important;
        stroke-linecap: round;
        stroke-linejoin: round;
}

/* ==========================================================================
   Activity panel & comment input — transparent background
   Frappe core paints .activity-title / .timeline-actions with var(--bg-color),
   .frappe-control .ql-editor with var(--control-bg), and the form footer's
   .comment-box wraps the input area; strip them all so the activity panel
   and comment composer blend with the form background.
   ========================================================================== */
.new-timeline .activity-title,
.new-timeline .timeline-actions,
.comment-box,
.comment-input-wrapper,
.comment-input-wrapper .ql-container,
.comment-input-wrapper .frappe-control .ql-editor {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
}

/* List view — period (Between) filter sized to fit "DD/MM/YYYY to DD/MM/YYYY". */
.standard-filter-section .frappe-control.jey-period-filter {
        flex: 0 0 auto;
        min-width: 200px;
}
.standard-filter-section .frappe-control.jey-period-filter input {
        min-width: 200px;
}

/* Grid "Configure Columns" dialog — let rows grow when label wraps.
   Frappe hardcodes height:32px inline on each .fields_order row in
   grid_row.js, which clips long translated labels (eg. Azerbaijani
   "Əsas Tarif (Anbar Ölçü Vahidinə görə)") so the wrapped portion
   overflows into the next row and into the help text below. Switch
   to flex centering with min-height so rows grow with content. */
.control-input.fields_order {
        height: auto !important;
        min-height: 32px;
        display: flex;
        align-items: center;
}
.control-input.fields_order > .row {
        width: 100%;
        align-items: center;
        margin: 0;
}
.control-input.fields_order > .row > [class*="col-"] {
        padding-top: 0 !important;
        margin-top: 0 !important;
}

/* ===== theme_chrome.css ===== */
/* ==========================================================================
   THEME: Chrome  [data-jey-theme="chrome"]
   Metallic chrome button with conic-gradient rings and rotating glow.
   ========================================================================== */

@keyframes jey-chrome-rotate-glow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
}

@keyframes jey-chrome-face-light {
        0%   { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5) 0%, transparent 55%); }
        25%  { background: radial-gradient(circle at 75% 25%, rgba(255,255,255,0.5) 0%, transparent 55%); }
        50%  { background: radial-gradient(circle at 70% 75%, rgba(255,255,255,0.35) 0%, transparent 55%); }
        75%  { background: radial-gradient(circle at 25% 70%, rgba(255,255,255,0.35) 0%, transparent 55%); }
        100% { background: radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5) 0%, transparent 55%); }
}

@keyframes jey-chrome-refl-drift {
        0%, 100% { top: 12%; opacity: 0.7; }
        50%      { top: 18%; opacity: 0.5; }
}

[data-jey-theme="chrome"] .jey-chrome {
        width: 72px; height: 72px; border-radius: 50%; position: relative;
        background: radial-gradient(ellipse at 35% 20%, rgba(255,255,255,0.7) 0%, transparent 55%), linear-gradient(180deg, #e0e0e0 0%, #b8b8b8 100%);
        box-shadow: 0 4px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.7);
        transition: box-shadow 0.3s ease;
}

[data-jey-theme="chrome"] .desktop-icon:hover .jey-chrome {
        box-shadow: 0 6px 16px rgba(0,0,0,0.22), 0 1px 3px rgba(0,0,0,0.12), 0 0 14px rgba(255,255,255,0.2), inset 0 1px 1px rgba(255,255,255,0.7);
}

[data-jey-theme="chrome"] .jey-chrome-ring {
        position: absolute; inset: 2px; border-radius: 50%;
        background: conic-gradient(from 140deg, #a0a0a0 0deg, #f2f2f2 40deg, #777 80deg, #e5e5e5 120deg, #959595 170deg, #ededed 210deg, #808080 260deg, #d8d8d8 310deg, #a0a0a0 360deg);
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); overflow: hidden;
}

[data-jey-theme="chrome"] .jey-ring-glow {
        position: absolute; inset: -10px; border-radius: 50%;
        background: conic-gradient(from 0deg, transparent 0deg, transparent 140deg, rgba(255,255,255,0.55) 165deg, rgba(255,255,255,0.8) 180deg, rgba(255,255,255,0.55) 195deg, transparent 220deg, transparent 360deg);
        animation: jey-chrome-rotate-glow 8s linear infinite; pointer-events: none;
}

[data-jey-theme="chrome"] .jey-chrome-gap {
        position: absolute; inset: 5px; border-radius: 50%;
        background: linear-gradient(180deg, #888 0%, #aaa 50%, #999 100%);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), inset 0 -1px 1px rgba(255,255,255,0.2);
}

[data-jey-theme="chrome"] .jey-chrome-ring-inner {
        position: absolute; inset: 6px; border-radius: 50%;
        background: conic-gradient(from 200deg, #b0b0b0 0deg, #eee 30deg, #999 70deg, #ddd 110deg, #aaa 160deg, #f0f0f0 200deg, #909090 250deg, #ccc 300deg, #b0b0b0 360deg);
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.15);
}

[data-jey-theme="chrome"] .jey-chrome-face {
        position: absolute; inset: 9px; border-radius: 50%; overflow: hidden;
        background: linear-gradient(168deg, #f4f4f4 0%, #e0e0e0 45%, #d4d4d4 100%);
        box-shadow: inset 0 3px 7px rgba(255,255,255,0.7), inset 0 -3px 6px rgba(0,0,0,0.06);
        display: flex; align-items: center; justify-content: center;
}

[data-jey-theme="chrome"] .jey-face-glow {
        position: absolute; inset: 0; border-radius: 50%;
        animation: jey-chrome-face-light 8s ease-in-out infinite;
        pointer-events: none; z-index: 1;
}

[data-jey-theme="chrome"] .jey-face-reflection {
        position: absolute; top: 15%; left: 10%; width: 80%; height: 30%;
        background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 60%, transparent 100%);
        border-radius: 50%; pointer-events: none; z-index: 1;
        animation: jey-chrome-refl-drift 10s ease-in-out infinite;
}

[data-jey-theme="chrome"] .jey-chrome-face .jey-icon {
        width: 24px !important; height: 24px !important;
        stroke: #505050 !important; fill: none !important;
        stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) !important;
        position: relative; z-index: 2;
}


/* ==========================================================================
   FULL APP CHROME THEME
   Real metallic chrome with 45° multi-stop reflective gradients,
   brushed metal textures, beveled edges, and conic-gradient accents.
   ========================================================================== */

/* --- Shine sweep animation for interactive elements --- */
@keyframes jey-chrome-shine {
        0%   { transform: translateX(-100%) skewX(-15deg); }
        100% { transform: translateX(200%) skewX(-15deg); }
}

/* ==========================================================================
   CSS Variable Overrides
   ========================================================================== */

[data-jey-theme="chrome"] {
        /* --- Surfaces --- */
        --bg-color: #d8d8d8;
        --fg-color: #e8e8e8;
        --card-bg: #e0e0e0;
        --subtle-accent: #d4d4d4;
        --subtle-fg: #d0d0d0;
        --fg-hover-color: #ccc;
        --highlight-color: #d4d4d4;
        --navbar-bg: #d0d0d0;
        --modal-bg: #ddd;
        --toast-bg: #ddd;
        --popover-bg: #e0e0e0;
        --control-bg: #d5d5d5;
        --control-bg-on-gray: #ccc;
        --awesomebar-focus-bg: #e8e8e8;
        --disabled-control-bg: #d0d0d0;
        --skeleton-bg: #c8c8c8;
        --surface-menu-bar: #d4d4d4;
        --surface-white: #e0e0e0;
        --surface-gray-1: #d8d8d8;
        --surface-gray-2: #d0d0d0;
        --surface-gray-3: #c8c8c8;
        --surface-gray-4: #bbb;
        --surface-modal: #ddd;
        --placeholder-color: #ccc;

        /* --- Sidebar --- */
        --sidebar-hover-color: #c8c8c8;
        --sidebar-active-color: #d8d8d8;
        --sidebar-border-color: #aaa;
        --divider-color: #b0b0b0;

        /* --- Text --- */
        --heading-color: #333;
        --text-color: #404040;
        --text-neutral: #333;
        --text-muted: #666;
        --text-light: #888;
        --text-dark: #f0f0f0;
        --disabled-text-color: #888;
        --ink-gray-7: #555;
        --ink-gray-8: #404040;
        --ink-gray-9: #333;

        /* --- Borders --- */
        --border-color: #aaa;
        --dark-border-color: #999;
        --table-border-color: #aaa;
        --btn-group-border-color: #999;
        --outline-gray-1: #b0b0b0;
        --outline-gray-2: #999;
        --outline-gray-modals: #aaa;

        /* --- Primary / Buttons --- */
        --primary: #555;
        --brand-color: #555;
        --btn-primary: #777;
        --btn-default-bg: #ccc;
        --btn-default-hover-bg: #bbb;
        --btn-ghost-hover-bg: #c0c0c0;
        --border-primary: #777;

        /* --- Shadows (beveled metallic) --- */
        --shadow-xs: 1px 1px 2px rgba(0,0,0,0.15), -1px -1px 1px rgba(255,255,255,0.5);
        --shadow-sm: 1px 1px 3px rgba(0,0,0,0.18), -1px -1px 2px rgba(255,255,255,0.45);
        --shadow-base: 2px 2px 4px rgba(0,0,0,0.15), -1px -1px 2px rgba(255,255,255,0.4);
        --shadow-md: 2px 2px 6px rgba(0,0,0,0.18), -1px -1px 3px rgba(255,255,255,0.35);
        --shadow-lg: 3px 3px 10px rgba(0,0,0,0.15), -2px -2px 5px rgba(255,255,255,0.3);
        --shadow-xl: 4px 4px 16px rgba(0,0,0,0.18), -2px -2px 6px rgba(255,255,255,0.25);
        --shadow-2xl: 6px 6px 24px rgba(0,0,0,0.2), -3px -3px 8px rgba(255,255,255,0.2);
        --shadow-inset: inset 0px -1px 0px #999;
        --btn-shadow: 1px 1px 2px rgba(0,0,0,0.15), -1px -1px 1px rgba(255,255,255,0.4);
        --card-shadow: 2px 2px 6px rgba(0,0,0,0.12), -1px -1px 3px rgba(255,255,255,0.4);
        --modal-shadow: 6px 6px 30px rgba(0,0,0,0.3), -3px -3px 10px rgba(255,255,255,0.15);
        --awesomebar-shadow: 3px 3px 12px rgba(0,0,0,0.15), -2px -2px 6px rgba(255,255,255,0.3);

        /* --- Focus rings --- */
        --focus-default: 0 0 0 2px rgba(150,150,150,0.5);

        /* --- Scrollbar --- */
        --scrollbar-thumb-color: #999;
        --scrollbar-track-color: #c8c8c8;

        /* --- Checkbox / Switch --- */
        --switch-bg: #aaa;
        --checkbox-color: #555;
        --checkbox-gradient: linear-gradient(180deg, #777 0%, #666 100%);

        /* --- Timeline --- */
        --timeline-badge-color: #555;
        --timeline-badge-bg: #ccc;

        /* --- Date picker --- */
        --date-active-bg: #777;
        --date-active-text: #f0f0f0;
        --date-range-bg: #ccc;

        /* --- Progress / Misc --- */
        --progress-bar-bg: #777;
        --code-block-bg: #444;
        --code-block-text: #ccc;
}


/* ==========================================================================
   Body — Brushed Metal Background
   3 layered repeating-gradients at different lengths = realistic grain
   ========================================================================== */

[data-jey-theme="chrome"] body {
        background:
                radial-gradient(ellipse at 25% 15%, rgba(255,255,255,0.45) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(255,255,255,0.2) 0%, transparent 45%),
                radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.03) 0%, transparent 70%),
                linear-gradient(168deg, #d8d8d8 0%, #c4c4c4 40%, #b8b8b8 70%, #c8c8c8 100%) !important;
        background-attachment: fixed !important;
}

[data-jey-theme="chrome"] .page-container {
        background: transparent !important;
}


/* ==========================================================================
   Navbar — Reflective Chrome Bar
   45° multi-stop gradient simulating polished metal reflection
   ========================================================================== */

[data-jey-theme="chrome"] .navbar {
        background:
                linear-gradient(45deg, #aaa 2%, #ddd 8%, #bbb 18%, #e8e8e8 30%, #ccc 45%, #eee 55%, #bbb 68%, #ddd 80%, #aaa 95%) !important;
        border-bottom: 1px solid #888 !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -1px 0 rgba(0,0,0,0.08),
                0 2px 4px rgba(0,0,0,0.15) !important;
}

[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link {
        color: #444 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

[data-jey-theme="chrome"] .navbar .navbar-nav .nav-link:hover {
        color: #222 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.1) 100%) !important;
        border-radius: 6px;
}


/* ==========================================================================
   Awesomebar — Sunken Metal Slot
   ========================================================================== */

[data-jey-theme="chrome"] .search-bar input {
        background: linear-gradient(180deg, #c0c0c0 0%, #d0d0d0 100%) !important;
        border: 1px solid #999 !important;
        box-shadow:
                inset 0 2px 4px rgba(0,0,0,0.15),
                inset 0 0 0 1px rgba(0,0,0,0.05),
                0 1px 0 rgba(255,255,255,0.5) !important;
        color: #333 !important;
        border-radius: 6px !important;
}

[data-jey-theme="chrome"] .search-bar input:focus {
        background: linear-gradient(180deg, #d5d5d5 0%, #e0e0e0 100%) !important;
        border-color: #888 !important;
        box-shadow:
                inset 0 1px 3px rgba(0,0,0,0.1),
                0 0 0 2px rgba(150,150,150,0.3),
                0 1px 0 rgba(255,255,255,0.4) !important;
}

[data-jey-theme="chrome"] .search-bar .search-icon {
        color: #777 !important;
}


/* ==========================================================================
   Sidebar — Brushed Metal Panel
   ========================================================================== */

[data-jey-theme="chrome"] .body-sidebar-container {
        background: linear-gradient(160deg, #b8b8b8 0%, #f0f0f0 12%, #c0c0c0 28%, #f4f4f4 42%, #b8b8b8 58%, #ededed 72%, #aaa 88%, #ddd 100%) !important;
        border-right: 1px solid #888 !important;
        box-shadow:
                inset -1px 0 0 rgba(255,255,255,0.6),
                inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -1px 0 rgba(0,0,0,0.1),
                2px 0 8px rgba(0,0,0,0.12) !important;
}

[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar,
[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-top,
[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-bottom,
[data-jey-theme="chrome"] .body-sidebar-container .body-sidebar-cards {
        background: transparent !important;
}

[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item .item-anchor:hover {
        background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%) !important;
}

[data-jey-theme="chrome"] .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor {
        background: linear-gradient(45deg, #bbb 5%, #ddd 30%, #ccc 60%, #ddd 90%) !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.08),
                1px 1px 2px rgba(0,0,0,0.1),
                -1px -1px 1px rgba(255,255,255,0.3) !important;
        border-radius: 8px;
}

[data-jey-theme="chrome"] .body-sidebar .sidebar-item-icon {
        color: #666 !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5));
}


/* ==========================================================================
   Context Menu — Themed icons
   ========================================================================== */

[data-jey-theme="chrome"] .frappe-menu .menu-item-icon .jey-icon {
        width: 20px !important;
        height: 20px !important;
        stroke: #555 !important;
        fill: none !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) !important;
}


/* ==========================================================================
   Sidebar Header — Themed icon
   ========================================================================== */

[data-jey-theme="chrome"] .sidebar-header .header-logo .jey-icon {
        width: 22px !important;
        height: 22px !important;
        stroke: #555 !important;
        fill: none !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4)) !important;
}


/* ==========================================================================
   Primary Buttons — Polished Chrome with Shine
   ========================================================================== */

[data-jey-theme="chrome"] .btn-primary {
        background: linear-gradient(45deg, #666 5%, #aaa 10%, #888 30%, #999 50%, #888 70%, #aaa 85%, #666 95%) !important;
        color: #f0f0f0 !important;
        border: 1px solid #555 !important;
        box-shadow:
                2px 2px 4px rgba(0,0,0,0.2),
                -1px -1px 2px rgba(255,255,255,0.15),
                inset 0 1px 0 rgba(255,255,255,0.3),
                inset 0 -1px 0 rgba(0,0,0,0.15),
                inset 2px 2px 5px rgba(0,0,0,0),
                inset -1px -1px 2px rgba(255,255,255,0) !important;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        position: relative;
        overflow: hidden;
        transition:
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-jey-theme="chrome"] .btn-primary::before {
        content: "";
        position: absolute;
        top: 0; left: -50%; width: 30%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
        transform: skewX(-15deg);
        transition: left 0.4s ease;
        pointer-events: none;
}

[data-jey-theme="chrome"] .btn-primary:hover::before {
        left: 120%;
}

[data-jey-theme="chrome"] .btn-primary:hover {
        background: linear-gradient(45deg, #777 5%, #bbb 10%, #999 30%, #aaa 50%, #999 70%, #bbb 85%, #777 95%) !important;
        box-shadow:
                2px 2px 6px rgba(0,0,0,0.25),
                -1px -1px 3px rgba(255,255,255,0.2),
                inset 0 1px 0 rgba(255,255,255,0.35),
                inset 0 -1px 0 rgba(0,0,0,0.15),
                inset 2px 2px 5px rgba(0,0,0,0),
                inset -1px -1px 2px rgba(255,255,255,0) !important;
}

[data-jey-theme="chrome"] .btn-primary:active {
        background: linear-gradient(45deg, #555 5%, #888 10%, #777 30%, #888 50%, #777 70%, #888 85%, #555 95%) !important;
        box-shadow:
                2px 2px 4px rgba(0,0,0,0),
                -1px -1px 2px rgba(255,255,255,0),
                inset 0 1px 0 rgba(255,255,255,0),
                inset 0 -1px 0 rgba(0,0,0,0.05),
                inset 3px 3px 7px rgba(0,0,0,0.35),
                inset -1px -1px 2px rgba(255,255,255,0.12) !important;
        transition: box-shadow 0.08s ease-out !important;
}


/* ==========================================================================
   Default/Secondary Buttons — Brushed Metal
   ========================================================================== */

[data-jey-theme="chrome"] .btn-default,
[data-jey-theme="chrome"] .btn-secondary {
        background: linear-gradient(45deg, #bbb 5%, #eee 10%, #ccc 30%, #e0e0e0 50%, #ccc 70%, #eee 85%, #bbb 95%) !important;
        border: 1px solid #999 !important;
        color: #444 !important;
        box-shadow:
                1px 1px 3px rgba(0,0,0,0.12),
                -1px -1px 2px rgba(255,255,255,0.4),
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.06),
                inset 2px 2px 4px rgba(0,0,0,0),
                inset -1px -1px 1px rgba(255,255,255,0) !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        transition:
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-jey-theme="chrome"] .btn-default:hover,
[data-jey-theme="chrome"] .btn-secondary:hover {
        background: linear-gradient(45deg, #c0c0c0 5%, #f2f2f2 10%, #d4d4d4 30%, #e8e8e8 50%, #d4d4d4 70%, #f2f2f2 85%, #c0c0c0 95%) !important;
        border-color: #888 !important;
        box-shadow:
                2px 2px 4px rgba(0,0,0,0.15),
                -1px -1px 2px rgba(255,255,255,0.4),
                inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -1px 0 rgba(0,0,0,0.06),
                inset 2px 2px 4px rgba(0,0,0,0),
                inset -1px -1px 1px rgba(255,255,255,0) !important;
}

[data-jey-theme="chrome"] .btn-default:active,
[data-jey-theme="chrome"] .btn-secondary:active {
        background: linear-gradient(45deg, #aaa 5%, #d8d8d8 10%, #bbb 30%, #ccc 50%, #bbb 70%, #d8d8d8 85%, #aaa 95%) !important;
        box-shadow:
                1px 1px 3px rgba(0,0,0,0),
                -1px -1px 2px rgba(255,255,255,0),
                inset 0 1px 0 rgba(255,255,255,0),
                inset 0 -1px 0 rgba(0,0,0,0.05),
                inset 3px 3px 6px rgba(0,0,0,0.3),
                inset -1px -1px 1px rgba(255,255,255,0.15) !important;
        transition: box-shadow 0.08s ease-out !important;
}

/* Danger */
[data-jey-theme="chrome"] .btn-danger {
        background: linear-gradient(45deg, #b33 5%, #e88 10%, #c55 30%, #d77 50%, #c55 70%, #e88 85%, #b33 95%) !important;
        color: #fff !important;
        border: 1px solid #944 !important;
        box-shadow:
                2px 2px 4px rgba(0,0,0,0.2),
                -1px -1px 2px rgba(255,255,255,0.1),
                inset 0 1px 0 rgba(255,255,255,0.25) !important;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

[data-jey-theme="chrome"] .btn-danger:hover {
        background: linear-gradient(45deg, #c44 5%, #f99 10%, #d66 30%, #e88 50%, #d66 70%, #f99 85%, #c44 95%) !important;
}

/* Ghost */
[data-jey-theme="chrome"] .btn-ghost:hover {
        background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
}


/* ==========================================================================
   Input Fields — Sunken Metal Inset
   ========================================================================== */

[data-jey-theme="chrome"] input.form-control:not([type="checkbox"]):not([type="radio"]),
[data-jey-theme="chrome"] textarea.form-control {
        background: #d0d0d0 !important;
        border: 1px solid #999 !important;
        color: #333 !important;
        box-shadow:
                inset 1px 1px 2px rgba(0,0,0,0.10),
                inset -1px -1px 1px rgba(255,255,255,0.25),
                inset 0 1px 1px rgba(0,0,0,0.04) !important;
        transition:
                background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

[data-jey-theme="chrome"] input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
[data-jey-theme="chrome"] textarea.form-control:focus {
        background: #cbcbcb !important;
        border-color: #777 !important;
        box-shadow:
                inset 4px 4px 8px rgba(0,0,0,0.28),
                inset -1px -1px 1px rgba(255,255,255,0.15),
                inset 0 3px 5px rgba(0,0,0,0.18) !important;
}

[data-jey-theme="chrome"] .form-control:disabled,
[data-jey-theme="chrome"] .form-control[disabled] {
        background: #d8d8d8 !important;
        color: #888 !important;
        box-shadow: inset 1px 1px 2px rgba(0,0,0,0.06) !important;
}

[data-jey-theme="chrome"] .frappe-control .control-label,
[data-jey-theme="chrome"] .frappe-control label {
        color: #444 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

[data-jey-theme="chrome"] select.form-control,
[data-jey-theme="chrome"] select.input-with-feedback {
        background: #d0d0d0 !important;
}


/* ==========================================================================
   Forms / Cards — Raised Metal Panels
   ========================================================================== */

[data-jey-theme="chrome"] .form-page {
        background:
                linear-gradient(45deg, #ccc 3%, #e8e8e8 10%, #d5d5d5 25%, #eee 45%, #d8d8d8 60%, #e8e8e8 80%, #ccc 97%) !important;
        border: 1px solid #aaa !important;
        box-shadow:
                3px 3px 8px rgba(0,0,0,0.12),
                -2px -2px 4px rgba(255,255,255,0.4),
                inset 0 1px 0 rgba(255,255,255,0.7),
                inset 0 -1px 0 rgba(0,0,0,0.05) !important;
        border-radius: var(--border-radius-lg) !important;
}

[data-jey-theme="chrome"] .form-section .section-head {
        color: #444 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
        border-bottom: 1px solid #b0b0b0 !important;
        position: relative;
}

[data-jey-theme="chrome"] .frappe-card {
        background: linear-gradient(45deg, #c8c8c8 3%, #e5e5e5 12%, #d4d4d4 30%, #eaeaea 50%, #d4d4d4 70%, #e5e5e5 88%, #c8c8c8 97%) !important;
        border: 1px solid #aaa !important;
        box-shadow:
                2px 2px 6px rgba(0,0,0,0.1),
                -1px -1px 3px rgba(255,255,255,0.4),
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

/* Form sidebar */
[data-jey-theme="chrome"] .form-sidebar {
        border-left: 1px solid #aaa !important;
}

[data-jey-theme="chrome"] .form-sidebar .sidebar-section {
        border-bottom: 1px solid #b0b0b0 !important;
}


/* ==========================================================================
   Modals / Dialogs — Chrome Frame with Conic-Gradient Border
   ========================================================================== */

[data-jey-theme="chrome"] .modal-content {
        background: linear-gradient(45deg, #ccc 3%, #e8e8e8 12%, #d5d5d5 30%, #eee 50%, #d5d5d5 70%, #e8e8e8 88%, #ccc 97%) !important;
        border: 1px solid #999 !important;
        box-shadow:
                6px 6px 24px rgba(0,0,0,0.25),
                -3px -3px 8px rgba(255,255,255,0.15),
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 0 0 1px rgba(255,255,255,0.35) !important;
}

[data-jey-theme="chrome"] .modal-header {
        background: linear-gradient(45deg, #b0b0b0 5%, #ddd 12%, #c0c0c0 30%, #e5e5e5 50%, #c0c0c0 70%, #ddd 88%, #b0b0b0 95%) !important;
        border-bottom: 1px solid #999 !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.06) !important;
}

[data-jey-theme="chrome"] .modal-header .modal-title {
        color: #333 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

[data-jey-theme="chrome"] .modal-footer {
        background: linear-gradient(45deg, #b8b8b8 5%, #d8d8d8 20%, #c0c0c0 50%, #d8d8d8 80%, #b8b8b8 95%) !important;
        border-top: 1px solid #999 !important;
}

[data-jey-theme="chrome"] .modal-backdrop {
        background-color: rgba(40,40,40,0.55) !important;
}


/* ==========================================================================
   Page Head — Chrome Title Bar
   ========================================================================== */

[data-jey-theme="chrome"] .page-head {
        background: linear-gradient(45deg, #b8b8b8 3%, #e0e0e0 10%, #c8c8c8 25%, #eaeaea 45%, #ccc 60%, #e0e0e0 80%, #b8b8b8 97%) !important;
        border-bottom: 1px solid #999 !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.06),
                0 2px 4px rgba(0,0,0,0.08) !important;
}

[data-jey-theme="chrome"] .page-head .title-text {
        color: #333 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}


/* ==========================================================================
   List View — Metal Table
   ========================================================================== */

[data-jey-theme="chrome"] .list-row-head {
        background: linear-gradient(45deg, #aaa 3%, #d8d8d8 10%, #bbb 25%, #e0e0e0 45%, #bbb 60%, #d8d8d8 80%, #aaa 97%) !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.06) !important;
}

[data-jey-theme="chrome"] .list-row-container .list-row {
        border-bottom: 1px solid #b8b8b8 !important;
}

[data-jey-theme="chrome"] .list-row-container:hover {
        background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
}

[data-jey-theme="chrome"] .result .list-row-container .level-left .list-row--col .level-left .ellipsis {
        color: #404040 !important;
}

/* Sticky right column: blend with metallic body + visible separator.
   Uses a translucent bg so it reads continuous with body gradient while
   still covering horizontally-overflowing columns under it. */
[data-jey-theme="chrome"] .frappe-list .list-row .level-right,
[data-jey-theme="chrome"] .frappe-list .list-row-head .level-right {
        background: linear-gradient(90deg,
                rgba(216,216,216,0.85) 0%,
                rgba(208,208,208,0.88) 100%) !important;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        border-left: 1px solid #a0a0a0 !important;
        box-shadow: inset 1px 0 0 rgba(255,255,255,0.5) !important;
}

[data-jey-theme="chrome"] .frappe-list .list-row-container:hover .level-right {
        background: linear-gradient(90deg,
                rgba(224,224,224,0.9) 0%,
                rgba(216,216,216,0.92) 100%) !important;
        box-shadow:
                inset 1px 0 0 rgba(255,255,255,0.55),
                -6px 0 10px rgba(0,0,0,0.05) !important;
}

/* List sidebar */
[data-jey-theme="chrome"] .layout-side-section {
        border-right: 1px solid #aaa !important;
}


/* ==========================================================================
   Tables / Grids — Metallic Header & Rows
   ========================================================================== */

[data-jey-theme="chrome"] .frappe-control[data-fieldtype="Table"] .form-grid {
        border: 1px solid #999 !important;
}

[data-jey-theme="chrome"] .grid-heading-row {
        background: linear-gradient(45deg, #aaa 3%, #d5d5d5 10%, #bbb 30%, #ddd 50%, #bbb 70%, #d5d5d5 90%, #aaa 97%) !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.6),
                inset 0 -1px 0 rgba(0,0,0,0.06) !important;
}

[data-jey-theme="chrome"] .grid-heading-row .static-area {
        color: #444 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

[data-jey-theme="chrome"] .rows .grid-row:hover {
        background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%) !important;
}

[data-jey-theme="chrome"] .rows .grid-row {
        border-bottom: 1px solid #b8b8b8 !important;
}

[data-jey-theme="chrome"] .grid-footer {
        background: transparent !important;
        border-top: 1px solid #999 !important;
}

/* --- Active (edit-mode) grid cells: identical look to the static row --- */
/* Keep the row's bottom border visible even when in edit mode */
[data-jey-theme="chrome"] .rows .grid-row.editable-row,
[data-jey-theme="chrome"] .rows .grid-row:has(.editable-row) {
        border-bottom: 1px solid #b8b8b8 !important;
}

/* Flatten every form control inside a grid row — no bg, no border, no shadow.
   Scoped to .data-row so the row-edit modal (`.form-in-grid`, which is a
   sibling of .data-row inside .grid-row) keeps its normal field styling. */
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]),
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback,
[data-jey-theme="chrome"] .grid-row > .data-row .awesomplete input,
[data-jey-theme="chrome"] .grid-row > .data-row .like-disabled-input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        color: #333 !important;
        transition:
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Focused cell: pressed-in look — same shadow pattern as .btn-default:active */
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback:focus,
[data-jey-theme="chrome"] .grid-row > .data-row .awesomplete input:focus {
        background: linear-gradient(45deg, #bbb 5%, #d8d8d8 10%, #c4c4c4 30%, #d0d0d0 50%, #c4c4c4 70%, #d8d8d8 85%, #bbb 95%) !important;
        border: 0 !important;
        outline: none !important;
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0),
                inset 0 -1px 0 rgba(0,0,0,0.05),
                inset 3px 3px 6px rgba(0,0,0,0.3),
                inset -1px -1px 1px rgba(255,255,255,0.15) !important;
        transition:
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Read-only cells — darker grey bg. Specificity matches the "flatten" rule above
   (tag.class + two :not()), so it wins over `background: transparent`. Frappe hides
   .field-area on inactive rows, so the tint only shows on the currently-active row. */
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled],
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly],
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:disabled,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control[readonly],
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:disabled,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback:disabled {
        background: #d8d8d8 !important;
        box-shadow: none !important;
        color: #666 !important;
}

/* No pressed-in effect on focus for read-only cells */
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled:focus,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:disabled:focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control[readonly]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:disabled:focus {
        background: #d8d8d8 !important;
        box-shadow: none !important;
}

/* Match static-row cell height: static cells use padding 10px 8px; form-control in
   Frappe uses padding-top:10px, padding-bottom: calc(--padding-md - 3px). Equalise so
   the active row doesn't grow or shrink compared to an idle row. */
[data-jey-theme="chrome"] .grid-row .editable-row .form-control {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        height: auto !important;
}


/* ==========================================================================
   Tabs — Metallic Tab Strip
   ========================================================================== */

[data-jey-theme="chrome"] .form-tabs .nav-link {
        color: #666 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

[data-jey-theme="chrome"] .form-tabs .nav-link:hover {
        color: #444 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%) !important;
}

[data-jey-theme="chrome"] .form-tabs .nav-link.active {
        color: #333 !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%) !important;
}

[data-jey-theme="chrome"] .form-tabs .nav-link::after {
        background: #777;
}


/* ==========================================================================
   Dropdowns — Chrome Panel
   ========================================================================== */

[data-jey-theme="chrome"] .dropdown-menu {
        background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 10%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 90%, #c0c0c0 97%) !important;
        border: 1px solid #999 !important;
        box-shadow:
                4px 4px 12px rgba(0,0,0,0.18),
                -2px -2px 4px rgba(255,255,255,0.15),
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

[data-jey-theme="chrome"] .dropdown-item {
        color: #444 !important;
}

[data-jey-theme="chrome"] .dropdown-item:hover,
[data-jey-theme="chrome"] .dropdown-item:focus {
        background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%) !important;
        color: #222 !important;
}

[data-jey-theme="chrome"] .dropdown-divider {
        border-top-color: #aaa !important;
}


/* ==========================================================================
   Alerts / Toasts
   ========================================================================== */

[data-jey-theme="chrome"] .desk-alert {
        background: linear-gradient(45deg, #c0c0c0 5%, #e5e5e5 15%, #d0d0d0 40%, #e8e8e8 60%, #d0d0d0 85%, #c0c0c0 95%) !important;
        border: 1px solid #999 !important;
        box-shadow:
                3px 3px 8px rgba(0,0,0,0.12),
                -1px -1px 3px rgba(255,255,255,0.3),
                inset 0 1px 0 rgba(255,255,255,0.5) !important;
}


/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

[data-jey-theme="chrome"] .breadcrumb-container a {
        color: #666 !important;
        text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

[data-jey-theme="chrome"] .breadcrumb-container a:hover {
        color: #333 !important;
}


/* ==========================================================================
   Timeline
   ========================================================================== */

[data-jey-theme="chrome"] .new-timeline::before {
        border-left-color: #aaa !important;
}

[data-jey-theme="chrome"] .timeline-dot {
        background: linear-gradient(45deg, #bbb, #ddd, #bbb) !important;
        border: 1px solid #999 !important;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.3);
}


/* ==========================================================================
   Badges / Indicators
   ========================================================================== */

[data-jey-theme="chrome"] .indicator-pill {
        box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.3),
                1px 1px 1px rgba(0,0,0,0.08);
}


/* ==========================================================================
   Popovers
   ========================================================================== */

[data-jey-theme="chrome"] .popover {
        background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 10%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 90%, #c0c0c0 97%) !important;
        border: 1px solid #999 !important;
        box-shadow:
                4px 4px 12px rgba(0,0,0,0.15),
                -2px -2px 4px rgba(255,255,255,0.2),
                inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

[data-jey-theme="chrome"] .popover .popover-body {
        color: #404040 !important;
}


/* ==========================================================================
   Module Widget Cards — Chrome Panels with Conic Border Accent
   ========================================================================== */

[data-jey-theme="chrome"] .ce-block .links-widget-box,
[data-jey-theme="chrome"] .ce-block .number-widget-box {
        background: linear-gradient(45deg, #c0c0c0 3%, #e5e5e5 12%, #d0d0d0 30%, #eaeaea 50%, #d0d0d0 70%, #e5e5e5 88%, #c0c0c0 97%) !important;
        border: 1px solid #aaa !important;
        box-shadow:
                2px 2px 6px rgba(0,0,0,0.1),
                -1px -1px 3px rgba(255,255,255,0.35),
                inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

[data-jey-theme="chrome"] .ce-block .links-widget-box::after,
[data-jey-theme="chrome"] .ce-block .number-widget-box::after {
        background: conic-gradient(from 140deg, #a0a0a0, #e0e0e0, #888, #d0d0d0, #a0a0a0) !important;
}

[data-jey-theme="chrome"] .ce-block .links-widget-box:hover,
[data-jey-theme="chrome"] .ce-block .number-widget-box:hover {
        box-shadow:
                3px 3px 10px rgba(0,0,0,0.14),
                -2px -2px 5px rgba(255,255,255,0.3),
                inset 0 1px 0 rgba(255,255,255,0.7) !important;
}


/* ==========================================================================
   Scrollbars — Metal Cylinder
   ========================================================================== */

[data-jey-theme="chrome"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}

[data-jey-theme="chrome"] ::-webkit-scrollbar-track {
        background: linear-gradient(90deg, #c0c0c0, #d0d0d0, #c0c0c0);
}

[data-jey-theme="chrome"] ::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #888, #bbb, #999, #bbb, #888);
        border-radius: 5px;
        border: 1px solid #999;
}

[data-jey-theme="chrome"] ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(90deg, #777, #aaa, #888, #aaa, #777);
}


/* ==========================================================================
   Link Colors
   ========================================================================== */

[data-jey-theme="chrome"] a {
        color: #555;
}

[data-jey-theme="chrome"] a:hover {
        color: #333;
}


/* ==========================================================================
   Print — Reset
   ========================================================================== */

@media print {
        [data-jey-theme="chrome"] body,
        [data-jey-theme="chrome"] .page-container,
        [data-jey-theme="chrome"] .form-page,
        [data-jey-theme="chrome"] .frappe-card,
        [data-jey-theme="chrome"] .modal-content,
        [data-jey-theme="chrome"] .navbar {
                background: white !important;
                box-shadow: none !important;
                border-color: #ddd !important;
                text-shadow: none !important;
        }
        [data-jey-theme="chrome"] .btn-primary {
                background: #333 !important;
                text-shadow: none !important;
        }
}

/* ===== theme_silk.css ===== */
/* ==========================================================================
   THEME: Silk  [data-jey-theme="silk"]
   Warm ivory & champagne-gold. Soft frosted cards, generous rounding,
   diffuse shadows. Full-desk skin (see theme_chrome.css for the pattern).

   Background: pure CSS silk sheen for now, exposed via --jey-silk-bg so it
   can later be swapped for an image with a single edit, e.g.
       --jey-silk-bg: url("/assets/jey_theme/images/silk.jpg") center/cover;
   ========================================================================== */

@keyframes jey-silk-glow {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 0.6; }
}

/* ==========================================================================
   Palette + CSS Variable Overrides
   ========================================================================== */

[data-jey-theme="silk"] {
        /* --- Silk tokens --- */
        --jey-gold: #c39a54;
        --jey-gold-deep: #a67f3b;
        --jey-gold-soft: #e6d3a8;
        --jey-gold-tint: rgba(196, 160, 84, 0.12);
        --jey-cream: #f4ecde;
        --jey-card: #fbf8f2;
        --jey-ink: #453d31;
        --jey-ink-soft: #6d6252;
        --jey-line: #ebe0cd;

        --jey-shadow-card: 0 6px 24px rgba(120, 100, 60, 0.11), 0 1px 4px rgba(120, 100, 60, 0.06);
        --jey-shadow-hover: 0 12px 34px rgba(120, 100, 60, 0.16), 0 2px 8px rgba(120, 100, 60, 0.08);

        /* Silk background — real fabric photo with a soft warm champagne wash on
           top so the near-white centre stays tinted and frosted cards separate.
           The CSS-gradient fallback below is kept commented for reference. */
        --jey-silk-bg:
                linear-gradient(135deg, rgba(230, 213, 182, 0.30) 0%, rgba(244, 236, 222, 0.10) 45%, rgba(226, 208, 178, 0.34) 100%),
                url("/assets/jey_theme/images/silk-bg.jpg") center center / cover no-repeat;
        /* --jey-silk-bg (pure-CSS fallback):
                radial-gradient(ellipse 80% 65% at 12% -5%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
                radial-gradient(ellipse 70% 55% at 88% 15%, rgba(246, 236, 216, 0.55) 0%, transparent 50%),
                radial-gradient(ellipse 95% 75% at 75% 105%, rgba(230, 213, 182, 0.45) 0%, transparent 55%),
                linear-gradient(135deg, #f2e9da 0%, #e9ddc7 45%, #e4d6bc 72%, #eee3d0 100%); */

        /* --- Surfaces --- */
        --bg-color: #f1e8d8;
        --fg-color: #fbf8f2;
        --card-bg: #fbf8f2;
        --subtle-accent: #f4ecde;
        --subtle-fg: #efe6d5;
        --fg-hover-color: #f6efe3;
        --highlight-color: #f4ecde;
        --navbar-bg: transparent;
        --modal-bg: #fbf8f2;
        --toast-bg: #fbf8f2;
        --popover-bg: #fbf8f2;
        --control-bg: #fbf8f2;
        --control-bg-on-gray: #f1e8d8;
        --awesomebar-focus-bg: #ffffff;
        --disabled-control-bg: #efe6d5;
        --skeleton-bg: #ece1cd;
        --surface-menu-bar: #f4ecde;
        --surface-white: #fbf8f2;
        --surface-gray-1: #f4ecde;
        --surface-gray-2: #efe6d5;
        --surface-gray-3: #e9dcc6;
        --surface-gray-4: #ddceb2;
        --surface-modal: #fbf8f2;
        --placeholder-color: #b3a58c;

        /* --- Sidebar --- */
        --sidebar-hover-color: #efe6d5;
        --sidebar-active-color: #ffffff;
        --sidebar-border-color: transparent;
        --divider-color: #e6dcc6;

        /* --- Text --- */
        --heading-color: #453d31;
        --text-color: #5a5040;
        --text-neutral: #453d31;
        --text-muted: #8a7d68;
        --text-light: #a4977f;
        --text-dark: #453d31;
        --disabled-text-color: #a4977f;
        --ink-gray-6: #8a7d68;
        --ink-gray-7: #6d6252;
        --ink-gray-8: #504733;
        --ink-gray-9: #453d31;

        /* --- Borders --- */
        --border-color: #ebe0cd;
        --dark-border-color: #ddceb2;
        --table-border-color: #ebe0cd;
        --btn-group-border-color: #ddceb2;
        --outline-gray-1: #ebe0cd;
        --outline-gray-2: #ddceb2;
        --outline-gray-modals: #e6dcc6;

        /* --- Primary / Buttons --- */
        --primary: #c39a54;
        --primary-color: #c39a54;
        --brand-color: #c39a54;
        --btn-primary: #c39a54;
        --btn-default-bg: #fbf8f2;
        --btn-default-hover-bg: #f1e8d8;
        --btn-ghost-hover-bg: #efe6d5;
        --border-primary: #c39a54;

        /* --- Rounding (silk = soft, generous) --- */
        --border-radius: 8px;
        --border-radius-sm: 6px;
        --border-radius-md: 12px;
        --border-radius-lg: 16px;
        --border-radius-full: 999px;

        /* --- Shadows (soft, diffuse, warm) --- */
        --shadow-xs: 0 1px 2px rgba(120, 100, 60, 0.06);
        --shadow-sm: 0 2px 6px rgba(120, 100, 60, 0.07);
        --shadow-base: 0 3px 10px rgba(120, 100, 60, 0.08);
        --shadow-md: 0 4px 16px rgba(120, 100, 60, 0.09);
        --shadow-lg: 0 8px 24px rgba(120, 100, 60, 0.11);
        --shadow-xl: 0 12px 32px rgba(120, 100, 60, 0.13);
        --shadow-2xl: 0 18px 44px rgba(120, 100, 60, 0.16);
        --card-shadow: 0 4px 20px rgba(120, 100, 60, 0.08), 0 1px 3px rgba(120, 100, 60, 0.05);
        --btn-shadow: 0 1px 2px rgba(120, 100, 60, 0.08);
        --modal-shadow: 0 20px 48px rgba(90, 70, 40, 0.22);
        --awesomebar-shadow: 0 4px 16px rgba(120, 100, 60, 0.1);

        /* --- Focus rings --- */
        --focus-default: 0 0 0 3px rgba(196, 160, 84, 0.25);

        /* --- Scrollbar --- */
        --scrollbar-thumb-color: #d8c8a6;
        --scrollbar-track-color: #f1e8d8;

        /* --- Checkbox / Switch --- */
        --switch-bg: #d8c8a6;
        --checkbox-color: #c39a54;
        --checkbox-gradient: linear-gradient(180deg, #cfa863 0%, #b98f45 100%);

        /* --- Timeline --- */
        --timeline-badge-color: #c39a54;
        --timeline-badge-bg: #f1e8d8;

        /* --- Date picker --- */
        --date-active-bg: #c39a54;
        --date-active-text: #ffffff;
        --date-range-bg: #f1e4cb;

        /* --- Progress / Misc --- */
        --progress-bar-bg: #c39a54;
}

/* ==========================================================================
   Body — Silk sheen background
   ========================================================================== */

[data-jey-theme="silk"] body {
        background: var(--jey-silk-bg) !important;
        background-attachment: fixed !important;
        color: var(--text-color);
}

[data-jey-theme="silk"] .page-container,
[data-jey-theme="silk"] .layout-main-section-wrapper,
[data-jey-theme="silk"] .layout-main-section {
        background: transparent !important;
}

/* ==========================================================================
   Navbar — Light, borderless, blends into silk
   ========================================================================== */

[data-jey-theme="silk"] .navbar {
        background: rgba(251, 248, 242, 0.72) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(235, 224, 205, 0.6) !important;
        box-shadow: 0 1px 8px rgba(120, 100, 60, 0.05) !important;
}

[data-jey-theme="silk"] .navbar .navbar-nav .nav-link {
        color: var(--jey-ink-soft) !important;
}

[data-jey-theme="silk"] .navbar .navbar-nav .nav-link:hover {
        color: var(--jey-ink) !important;
        background: var(--jey-gold-tint) !important;
        border-radius: 10px;
}

/* ==========================================================================
   Awesomebar — Soft pill slot
   ========================================================================== */

[data-jey-theme="silk"] .search-bar input,
[data-jey-theme="silk"] .navbar .search-bar .form-control {
        background: rgba(255, 255, 255, 0.75) !important;
        border: 1px solid var(--jey-line) !important;
        box-shadow: inset 0 1px 2px rgba(120, 100, 60, 0.05) !important;
        color: var(--jey-ink) !important;
        border-radius: 999px !important;
}

[data-jey-theme="silk"] .search-bar input:focus {
        background: #ffffff !important;
        border-color: var(--jey-gold-soft) !important;
        box-shadow: 0 0 0 3px rgba(196, 160, 84, 0.18) !important;
}

[data-jey-theme="silk"] .search-bar .search-icon {
        color: var(--jey-gold-deep) !important;
}

/* ==========================================================================
   Sidebar — Cream panel, rounded white active pill
   ========================================================================== */

[data-jey-theme="silk"] .body-sidebar-container {
        background: rgba(247, 240, 227, 0.6) !important;
        border-right: 1px solid rgba(235, 224, 205, 0.7) !important;
        box-shadow: none !important;
}

[data-jey-theme="silk"] .body-sidebar-container .body-sidebar,
[data-jey-theme="silk"] .body-sidebar-container .body-sidebar-top,
[data-jey-theme="silk"] .body-sidebar-container .body-sidebar-bottom,
[data-jey-theme="silk"] .body-sidebar-container .body-sidebar-cards {
        background: transparent !important;
}

[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item .item-anchor {
        border-radius: 12px;
        transition: background 0.2s ease, box-shadow 0.2s ease;
}

[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item .item-anchor:hover {
        background: rgba(255, 255, 255, 0.55) !important;
}

[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item.selected .item-anchor {
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(120, 100, 60, 0.1) !important;
        border-radius: 12px;
}

[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item.selected .sidebar-item-label {
        color: var(--jey-ink) !important;
        font-weight: 600;
}

[data-jey-theme="silk"] .body-sidebar .sidebar-item-icon,
[data-jey-theme="silk"] .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-icon {
        color: var(--jey-gold-deep) !important;
}

/* Keep sidebar text neutral — gold is reserved for active/icons/accents,
   not every anchor (the global `a` gold rule would otherwise bleed here). */
[data-jey-theme="silk"] .body-sidebar-container a,
[data-jey-theme="silk"] .body-sidebar-container .sidebar-item-label,
[data-jey-theme="silk"] .body-sidebar-container .sidebar-item-control {
        color: var(--text-color) !important;
}

/* Sidebar header + context menu themed icons */
[data-jey-theme="silk"] .sidebar-header .header-logo .jey-icon,
[data-jey-theme="silk"] .frappe-menu .menu-item-icon .jey-icon {
        stroke: var(--jey-gold-deep) !important;
        fill: none !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

[data-jey-theme="silk"] .btn-primary {
        background: linear-gradient(180deg, #cfa863 0%, #bd9146 100%) !important;
        color: #fffdf8 !important;
        border: 1px solid #b0873f !important;
        box-shadow: 0 2px 8px rgba(180, 140, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
        text-shadow: 0 -1px 0 rgba(120, 90, 30, 0.2);
        border-radius: 10px !important;
        transition: box-shadow 0.2s ease, transform 0.1s ease, background 0.2s ease !important;
}

[data-jey-theme="silk"] .btn-primary:hover {
        background: linear-gradient(180deg, #d6b170 0%, #c59a4f 100%) !important;
        box-shadow: 0 4px 14px rgba(180, 140, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

[data-jey-theme="silk"] .btn-primary:active {
        transform: translateY(1px);
        box-shadow: 0 1px 4px rgba(180, 140, 60, 0.2), inset 0 2px 4px rgba(120, 90, 30, 0.18) !important;
}

[data-jey-theme="silk"] .btn-default,
[data-jey-theme="silk"] .btn-secondary {
        background: rgba(255, 255, 255, 0.85) !important;
        border: 1px solid var(--jey-line) !important;
        color: var(--jey-ink) !important;
        box-shadow: 0 1px 3px rgba(120, 100, 60, 0.06) !important;
        border-radius: 10px !important;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-jey-theme="silk"] .btn-default:hover,
[data-jey-theme="silk"] .btn-secondary:hover {
        background: #ffffff !important;
        border-color: var(--jey-gold-soft) !important;
        box-shadow: 0 3px 10px rgba(120, 100, 60, 0.1) !important;
}

[data-jey-theme="silk"] .btn-ghost:hover {
        background: var(--jey-gold-tint) !important;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

[data-jey-theme="silk"] input.form-control:not([type="checkbox"]):not([type="radio"]),
[data-jey-theme="silk"] textarea.form-control,
[data-jey-theme="silk"] select.form-control,
[data-jey-theme="silk"] select.input-with-feedback {
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid var(--jey-line) !important;
        color: var(--jey-ink) !important;
        box-shadow: inset 0 1px 2px rgba(120, 100, 60, 0.04) !important;
        border-radius: 10px !important;
        transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

[data-jey-theme="silk"] input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
[data-jey-theme="silk"] textarea.form-control:focus,
[data-jey-theme="silk"] select.form-control:focus {
        background: #ffffff !important;
        border-color: var(--jey-gold-soft) !important;
        box-shadow: 0 0 0 3px rgba(196, 160, 84, 0.18) !important;
}

[data-jey-theme="silk"] .form-control:disabled,
[data-jey-theme="silk"] .form-control[disabled] {
        background: #efe6d5 !important;
        color: var(--text-light) !important;
        box-shadow: none !important;
}

[data-jey-theme="silk"] .frappe-control .control-label,
[data-jey-theme="silk"] .frappe-control label {
        color: var(--jey-ink-soft) !important;
}

/* ==========================================================================
   Cards / Widgets — Soft frosted panels, generous rounding
   ========================================================================== */

[data-jey-theme="silk"] .widget,
[data-jey-theme="silk"] .ce-block .links-widget-box,
[data-jey-theme="silk"] .ce-block .number-widget-box,
[data-jey-theme="silk"] .ce-block .chart-widget-box,
[data-jey-theme="silk"] .ce-block .shortcut-widget-box,
[data-jey-theme="silk"] .ce-block .onboarding-widget-box,
[data-jey-theme="silk"] .frappe-card {
        /* Frosted glass: the "glassy" read comes from a bright, thin, CONTINUOUS
           light rim around the whole perimeter (like light on the edge of a glass
           pane) — not a top-only highlight. Strong blur + a milky fill keep the
           surface even; the silk still whispers through. */
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 252, 245, 0.34) 55%, rgba(252, 246, 236, 0.40) 100%) !important;
        backdrop-filter: blur(22px) saturate(1.2);
        -webkit-backdrop-filter: blur(22px) saturate(1.2);
        border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
        box-shadow:
                0 14px 34px rgba(74, 57, 35, 0.18),
                0 4px 10px rgba(74, 57, 35, 0.10),
                inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
        border-radius: 22px !important;
        transition: box-shadow 0.25s ease, transform 0.2s ease !important;
}

[data-jey-theme="silk"] .widget.onboarding-widget-box {
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 252, 245, 0.34) 55%, rgba(252, 246, 236, 0.40) 100%) !important;
}

[data-jey-theme="silk"] .ce-block .links-widget-box:hover,
[data-jey-theme="silk"] .ce-block .number-widget-box:hover,
[data-jey-theme="silk"] .ce-block .shortcut-widget-box:hover {
        border-color: rgba(255, 255, 255, 1) !important;
        box-shadow:
                0 22px 48px rgba(74, 57, 35, 0.24),
                0 6px 14px rgba(74, 57, 35, 0.13),
                inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
        transform: translateY(-3px);
}

/* Widget titles */
[data-jey-theme="silk"] .widget .widget-head .widget-title,
[data-jey-theme="silk"] .widget-group .widget-group-head .widget-group-title {
        color: var(--jey-ink) !important;
        font-weight: 600;
}

/* Number card — big number in warm ink */
[data-jey-theme="silk"] .number-widget-box .widget-content .number {
        color: var(--jey-ink) !important;
}

/* Shortcut icon chips — soft gold */
[data-jey-theme="silk"] .shortcut-widget-box .indicator-pill,
[data-jey-theme="silk"] .widget .shortcut-icon {
        color: var(--jey-gold-deep) !important;
}

/* Form page + sections */
[data-jey-theme="silk"] .form-page {
        background: rgba(251, 248, 242, 0.9) !important;
        border: 1px solid rgba(235, 224, 205, 0.8) !important;
        box-shadow: var(--jey-shadow-card) !important;
        border-radius: 16px !important;
}

[data-jey-theme="silk"] .form-section .section-head {
        color: var(--jey-ink) !important;
        border-bottom: 1px solid var(--jey-line) !important;
}

/* ==========================================================================
   Charts — champagne gold line/area
   ========================================================================== */

[data-jey-theme="silk"] .chart-container .line-chart-rect,
[data-jey-theme="silk"] .chart-container path.line-graph-path,
[data-jey-theme="silk"] .chart-container path.dataset-path {
        stroke: var(--jey-gold) !important;
}

[data-jey-theme="silk"] .chart-container .dataset-circle,
[data-jey-theme="silk"] .chart-container circle.fill {
        fill: var(--jey-gold) !important;
        stroke: var(--jey-gold) !important;
}

[data-jey-theme="silk"] .chart-container path.region-fill {
        fill: rgba(196, 160, 84, 0.12) !important;
        stroke: none !important;
}

/* ==========================================================================
   Page Head
   ========================================================================== */

[data-jey-theme="silk"] .page-head {
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
}

[data-jey-theme="silk"] .page-head .title-text,
[data-jey-theme="silk"] .page-title .title-text {
        color: var(--jey-ink) !important;
}

/* ==========================================================================
   List View
   ========================================================================== */

[data-jey-theme="silk"] .list-row-head {
        background: rgba(244, 236, 222, 0.85) !important;
        border-bottom: 1px solid var(--jey-line) !important;
        box-shadow: none !important;
        border-radius: 12px 12px 0 0;
}

[data-jey-theme="silk"] .list-row-container .list-row {
        border-bottom: 1px solid rgba(235, 224, 205, 0.7) !important;
}

[data-jey-theme="silk"] .list-row-container:hover {
        background: var(--jey-gold-tint) !important;
}

[data-jey-theme="silk"] .layout-side-section {
        border-right: 1px solid var(--jey-line) !important;
}

/* ==========================================================================
   Modals / Dialogs
   ========================================================================== */

[data-jey-theme="silk"] .modal-content {
        background: #fbf8f2 !important;
        border: 1px solid var(--jey-line) !important;
        box-shadow: 0 20px 48px rgba(90, 70, 40, 0.22) !important;
        border-radius: 18px !important;
}

[data-jey-theme="silk"] .modal-header {
        background: transparent !important;
        border-bottom: 1px solid var(--jey-line) !important;
}

[data-jey-theme="silk"] .modal-header .modal-title {
        color: var(--jey-ink) !important;
}

[data-jey-theme="silk"] .modal-footer {
        background: transparent !important;
        border-top: 1px solid var(--jey-line) !important;
}

[data-jey-theme="silk"] .modal-backdrop {
        background-color: rgba(70, 55, 35, 0.4) !important;
}

/* ==========================================================================
   Dropdowns / Popovers
   ========================================================================== */

[data-jey-theme="silk"] .dropdown-menu,
[data-jey-theme="silk"] .popover {
        background: #fbf8f2 !important;
        border: 1px solid var(--jey-line) !important;
        box-shadow: 0 8px 24px rgba(120, 100, 60, 0.14) !important;
        border-radius: 14px !important;
}

[data-jey-theme="silk"] .dropdown-item {
        color: var(--jey-ink-soft) !important;
        border-radius: 8px;
}

[data-jey-theme="silk"] .dropdown-item:hover,
[data-jey-theme="silk"] .dropdown-item:focus {
        background: var(--jey-gold-tint) !important;
        color: var(--jey-ink) !important;
}

[data-jey-theme="silk"] .dropdown-divider {
        border-top-color: var(--jey-line) !important;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

[data-jey-theme="silk"] .form-tabs .nav-link {
        color: var(--jey-ink-soft) !important;
}

[data-jey-theme="silk"] .form-tabs .nav-link:hover {
        color: var(--jey-ink) !important;
        background: var(--jey-gold-tint) !important;
        border-radius: 8px;
}

[data-jey-theme="silk"] .form-tabs .nav-link.active {
        color: var(--jey-gold-deep) !important;
}

[data-jey-theme="silk"] .form-tabs .nav-link::after {
        background: var(--jey-gold) !important;
}

/* ==========================================================================
   Links / Scrollbars
   ========================================================================== */

[data-jey-theme="silk"] a {
        color: var(--jey-gold-deep);
}

[data-jey-theme="silk"] a:hover {
        color: #8c6b2c;
}

[data-jey-theme="silk"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}

[data-jey-theme="silk"] ::-webkit-scrollbar-track {
        background: #f1e8d8;
}

[data-jey-theme="silk"] ::-webkit-scrollbar-thumb {
        background: #dccba4;
        border-radius: 5px;
        border: 2px solid #f1e8d8;
}

[data-jey-theme="silk"] ::-webkit-scrollbar-thumb:hover {
        background: #cdb885;
}

/* ==========================================================================
   Desktop workspace icons — frosted glass square, gold icon
   ========================================================================== */

[data-jey-theme="silk"] .jey-chrome {
        width: 72px; height: 72px; border-radius: 22px; position: relative;
        background: rgba(255, 255, 255, 0.55);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow: 0 4px 16px rgba(120, 100, 60, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        transition: all 0.3s ease;
}

[data-jey-theme="silk"] .desktop-icon:hover .jey-chrome {
        box-shadow: 0 8px 24px rgba(120, 100, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
}

[data-jey-theme="silk"] .jey-chrome-ring,
[data-jey-theme="silk"] .jey-chrome-gap,
[data-jey-theme="silk"] .jey-chrome-ring-inner {
        display: none;
}

[data-jey-theme="silk"] .jey-chrome-face {
        position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
        background: transparent; box-shadow: none;
        display: flex; align-items: center; justify-content: center;
}

[data-jey-theme="silk"] .jey-face-glow {
        position: absolute; bottom: -4px; left: 16px; right: 16px; height: 20px;
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(196, 160, 84, 0.4) 0%, transparent 70%);
        animation: jey-silk-glow 4s ease-in-out infinite;
        pointer-events: none; z-index: 0;
}

[data-jey-theme="silk"] .jey-face-reflection {
        position: absolute; top: 0; left: 0; right: 0; height: 50%;
        border-radius: 22px 22px 0 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 100%);
        pointer-events: none; z-index: 1; animation: none;
}

[data-jey-theme="silk"] .jey-chrome-face .jey-icon {
        width: 26px !important; height: 26px !important;
        stroke: #b58f47 !important; fill: none !important;
        stroke-width: 1.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
        filter: drop-shadow(0 1px 2px rgba(180, 140, 60, 0.25)) !important;
        position: relative; z-index: 2;
}

[data-jey-theme="silk"] .icon-container.jey-chrome-done {
        border-radius: 22px !important;
}
