@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap');


/* ================= GLOBAL BRAND COLORS & TYPOGRAPHY ================= */

:root {
    --primary: #5c2578;
    --pirmary-dark: #4D2276;
    /* --primary-dark: #0369a1;   */
    --secondary: #1e293b;
    --purple: #5c2578;
    --menuhover: #6B3392;

    /* Typography */
    --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-heading: 'Outfit', var(--font-body);

    /* Override button colors  */
    --btn-primary: #4f46e5;
    --btn-default-bg: #f3f4f6;
    --btn-default-hover-bg: #e5e7eb;
    --border-radius: 4px;

    /* Login page specific    */
    /* --control-bg: #f8ecff; */
    --control-bg: #fdfaff;
    /* --border-color: #E7E7E7; */
    --border-color: #D0D5DD;
    --input-border-color: #D0D5DD;
    /* --border-color: #acaab1; */

    --text-light: #6b7280;
    --scrollbar-track-color: #3d214400;
}

body {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading) !important;
    font-weight: 600;
}

* {

    scrollbar-color: #d3d3d39e var(--scrollbar-track-color) !important;
    scrollbar-width: none;
}

.body-sidebar {
    background: #350b57 !important;
    overflow-y: auto !important;
    /* Move scrollbar to the edge while keeping content centered */
    overflow-x: visible !important;
    display: flex !important;
    flex-direction: column !important;

    /* Centered padding */
}

/* Hide scrollbar for a cleaner look but keep functionality */
.body-sidebar::-webkit-scrollbar {
    width: 0px;
}

.body-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

/* --- COLLAPSED STATE: Custom Wide-Mini Sidebar (70px) --- */
@media screen and (min-width: 768px) {
    .body-sidebar-container:not(.expanded) .body-sidebar {
        width: 70px !important;
        overflow-x: visible !important;
        /* Allow dropdowns to pop out */
    }

    .body-sidebar {
        padding: 8px 7px 0px 7px !important;
    }

}


.body-sidebar-container:not(.expanded) .body-sidebar .standard-sidebar-item .item-anchor {
    flex-direction: column !important;
    height: auto !important;
    padding: 2px 0 !important;
    /* Removed horizontal padding to ensure center */
    justify-content: center !important;
    gap: 2px !important;
    text-align: center !important;
}

.body-sidebar-container:not(.expanded) .body-sidebar .standard-sidebar-item {
    padding: 0 5px;
}

.body-sidebar-container:not(.expanded) .body-sidebar .sidebar-item-label {
    /* display: block !important; */
    font-size: 10px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    padding: 0 0px !important;
    text-align: center !important;
    color: #fff !important;
}

/* These classes are toggled via JS based on text content (Multi-word vs Single long word) */
.body-sidebar-container:not(.expanded) .label-wrap {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical !important;
    /* autoprefixer: on */
    overflow: hidden !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    width: 100% !important;
    min-width: 0 !important;
}

.body-sidebar-container:not(.expanded) .label-ellipsis {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

.body-sidebar-container:not(.expanded) .body-sidebar .sidebar-item-icon svg,
.body-sidebar-container:not(.expanded) .body-sidebar .icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
}

/* Hide shortcuts and drop-icons in collapsed mode */
.body-sidebar-container:not(.expanded) .sidebar-item-suffix,
.body-sidebar-container:not(.expanded) .drop-icon,
.body-sidebar-container:not(.expanded) .sidebar-item-control {
    display: none !important;
}

/* --- EXPANDED STATE: Standard Frappe Sidebar (220px) --- */
.body-sidebar-container.expanded .body-sidebar {
    width: 220px !important;
    /* padding: 8px 12px !important; */
    padding: 0px !important;
}

.body-sidebar-container.expanded .body-sidebar .standard-sidebar-item .item-anchor {
    flex-direction: row !important;
    height: 34px !important;
    padding: 4px 0px !important;
    justify-content: flex-start !important;
    gap: 0px !important;
    text-align: left !important;
}

.body-sidebar-container.expanded .body-sidebar .sidebar-item-label {
    font-size: 14px !important;
    text-align: left !important;
    color: #fff !important;
}

/* --- LOGO & HEADER --- */
/* Center logo in both states but style custom in collapsed */
.sidebar-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 10px 0 !important;
}

.body-sidebar-container .sidebar-header:not(.expanded) {
    padding: 9px 0 0 9px !important;
}

.body-sidebar-container:not(.expanded) .sidebar-header .header-logo {
    background-image: url('/assets/ui_core/images/logo_small.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 42px;
    height: 42px;
    margin: 0 auto !important;
    display: block !important;
}

/* Never centre this column. .body-sidebar is `flex-direction: column` with a
   fixed 100vh height, so justify-content:center splits any overflow across
   BOTH ends - and overflow past the start edge cannot be scrolled to, since
   scrollable overflow only extends toward the end direction. That silently
   ate the top of the sidebar (logo, Search, Notifications) with no way to
   scroll back up. Keep content packed to the top and let it scroll normally. */
.body-sidebar {
    justify-content: flex-start !important;
}

/* Collapse toggle button: styled as sleek purple circle matching brand theme */
.body-sidebar .collapse-sidebar-link,
.body-sidebar .sidebar-toggle-btn {
    position: absolute !important;
    right: 8px !important;
    bottom: 75px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: var(--purple, #5c2578) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #ffffff !important;
    z-index: 1050 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.body-sidebar-container:not(.expanded) .body-sidebar .collapse-sidebar-link,
.body-sidebar-container:not(.expanded) .body-sidebar .sidebar-toggle-btn {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}

.body-sidebar .collapse-sidebar-link:hover,
.body-sidebar .sidebar-toggle-btn:hover {
    background: var(--menuhover, #6B3392) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.body-sidebar .collapse-sidebar-link .icon,
.body-sidebar .collapse-sidebar-link svg,
.body-sidebar .collapse-sidebar-link use,
.body-sidebar .sidebar-toggle-btn .icon,
.body-sidebar .sidebar-toggle-btn svg,
.body-sidebar .sidebar-toggle-btn use {
    color: #ffffff !important;
    stroke: #ffffff !important;
    width: 12px !important;
    height: 12px !important;
}

.body-sidebar .collapse-sidebar-link .collapse-text {
    display: none !important;
}

.collapse-sidebar-link:focus,
.collapse-sidebar-link:focus-visible,
.sidebar-toggle-btn:focus,
.sidebar-toggle-btn:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

.desktop-container {
    background: url('/assets/ui_core/images/desk-bg-new.png');
    background-size: cover;
    background-position: center top;
    /* Subtract the sticky navbar. .desktop-navbar is a SIBLING of
       .desktop-container inside .desktop-wrapper, so a full-viewport container
       made the wrapper 52px taller than the screen. The page then scrolled by
       exactly that much and slid the first icon row up underneath the sticky
       search bar - which is what cut the Analytics/Assets/Bookings row in half.
       Measured on /desk: scrollHeight 984 vs clientHeight 932, a 52px delta
       equal to --desktop-navbar-height. Sizing the container to the space that
       is actually left means the wrapper fits the viewport exactly, so nothing
       scrolls underneath the bar and the grid scrolls inside itself instead.
       iOS also counts the URL bar inside 100vh, hence dvh for the visible area. */
    height: calc(100vh - var(--desktop-navbar-height, 52px));
    height: calc(100dvh - var(--desktop-navbar-height, 52px));
}

/* App-grid top row was clipped and unreachable on phones.
   Core styles .desktop-container as `display:flex; flex-direction:row;
   align-items:center`, so the icon grid is centred on the vertical (cross)
   axis. Once the grid is taller than the container - which happens on a phone,
   not on a desktop - centring pushes the excess off BOTH ends, and the part
   above the start edge can never be scrolled to, because scrollable overflow
   only extends toward the end direction. That is why the Analytics/Assets/
   Bookings row sat half cut under the search bar with no way to scroll up.
   `safe center` keeps the centred look while it fits and automatically falls
   back to start-alignment instead of overflowing; the media query is the
   fallback for engines without `safe`.
   Scoped through .desktop-wrapper on purpose: the desktop page ships its CSS
   as an inline <style>, which outranks this linked file at equal specificity. */
.desktop-wrapper .desktop-container {
    align-items: safe center;
    overflow-y: auto;
}

@media (max-width: 767.98px) {
    .desktop-wrapper .desktop-container {
        align-items: flex-start;
    }
}

/* Desktop app-grid labels: core pins .icon-title to a single nowrap line with
   an ellipsis, but the tile only gives the text ~83px, so anything longer
   truncates ("CEO Dash...", "Organizati..." - the latter overflows by 3px).
   Allow a second line instead. Clamped at 2 so a long name can't grow the
   tile: the existing 117px tile already has room for both lines, so the grid
   stays aligned and single-line tiles are unchanged.
   Scoped via .desktop-container on purpose: the desktop page ships its CSS as
   an inline <style>, which sits after every linked stylesheet in the cascade,
   so a bare .icon-title here loses the tie on document order. */
.desktop-container .icon-caption {
    height: auto;
    min-height: 35px;
    text-wrap: wrap;
}

.desktop-container .icon-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.btn.btn-ghost:focus-visible,
.btn.btn-ghost:active {
    box-shadow: none !important;
}

.sidebar-bottom-actions:focus-visible {
    outline: none !important;
}

.body-sidebar-container.expanded .body-sidebar .nav-item {
    margin-left: 0px;
    padding: 4px 4px;
}

.body-sidebar .nav-item {
    margin-left: 14px;
}

.body-sidebar-container:not(.expanded) .sidebar-header .header-logo img,
.body-sidebar-container:not(.expanded) .sidebar-header .header-logo .icon-container {
    display: none !important;
}

/* --- USER MENU (POPOVER) FIX --- */
/* Only in collapsed mode, we want the dropdown menu to pop out of the narrow sidebar */
.body-sidebar-container:not(.expanded) .body-sidebar-bottom .dropdown-navbar-user {
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
}

.body-sidebar-container:not(.expanded) .body-sidebar-bottom .avatar {
    margin: 0 auto !important;
    cursor: pointer;
}

/* Position the dropdown menu correctly outside the 70px bar */
.body-sidebar-container:not(.expanded) .body-sidebar-bottom .dropdown-navbar-user .dropdown-menu {
    position: fixed !important;
    left: 75px !important;
    bottom: 20px !important;
    top: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    display: none;
}

.body-sidebar-container:not(.expanded) .body-sidebar-bottom .dropdown-navbar-user.show .dropdown-menu {
    display: block !important;
}

.body-sidebar-container:not(.expanded) .sidebar-footer .dropdown.show .dropdown-toggle {
    background: transparent !important;
}

/* --- SHARED & FIXES --- */
.current-color {
    color: #fff !important;
}

/* Collapsible submenu / drop icons */
.body-sidebar .sidebar-item-control {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body-sidebar .drop-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    color: #ffffff !important;
}

.body-sidebar .drop-icon .icon,
.body-sidebar .drop-icon svg,
.body-sidebar .drop-icon use {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

.body-sidebar .standard-sidebar-item:not(.active-sidebar):has(a:not(.section-break)):hover {
    background-color: var(--menuhover) !important;
}

.body-sidebar .icon {
    stroke: #fff !important;
}

/* Notification sideout — offsets only apply to the desktop 70px collapsed
   sidebar (see the ":not(.expanded) .body-sidebar { width: 70px }" rule
   above, itself gated to min-width: 768px). Without this gate these rules
   also hit the top navbar's notification dropdown and the mobile sidebar
   drawer (which has no 70px rail), pushing the panel off-screen. */
@media (min-width: 768px) {
    .body-sidebar .standard-items-sections .dropdown-notifications .notifications-list {
        /* left: 7.4%; */
        left: 70px;
    }

    .notifications-list {
        position: fixed;
    }
}

/* Mobile Responsiveness: make the notifications panel a full-screen overlay
   instead of a fixed-width card offset by the desktop sidebar rail, so it
   never overflows the viewport on phones/tablets. */
@media (max-width: 767.98px) {

    .notifications-list,
    .body-sidebar .standard-items-sections .dropdown-notifications .notifications-list {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .notifications-list .notification-list-body {
        height: calc(100% - 60px) !important;
    }

    .notifications-list .recent-item,
    .notifications-list .recent-item.notification-item .notification-body .message {
        max-width: 100% !important;
    }
}

/* Ensure Search and Notifications scroll with everything else */
.body-sidebar-top,
.standard-items-sections {
    overflow: auto !important;
    height: auto !important;
    flex: none !important;
    width: 100% !important;

}

.body-sidebar-container.expanded .body-sidebar-top,
.body-sidebar-container.expanded .standard-items-sections {
    padding: 0px 8px !important;
}

.body-sidebar-container.expanded .body-sidebar-bottom {
    padding: 20px 10px 20px 15px !important;
}


.body-sidebar-bottom {
    position: sticky !important;
    bottom: 0px;
    background: #350b57 !important;
    z-index: 1000;
    margin-top: auto;
    padding: 10px 0px 10px 0px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 1. Hide the original SVG workspace icon or image */
.sidebar-header .header-logo img,
.sidebar-header .header-logo .icon-container {
    display: none !important;
}

/* 2. Insert your logo as a background in the header-logo container */
.sidebar-header .header-logo {
    background-image: url('/assets/ui_core/images/logo_small.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 32px;
    /* Adjust size based on your logo aspect ratio */
    height: 32px;

    display: inline-block;
}

.hover {
    background-color: var(--menuhover) !important;
}

.header-title,
.header-subtitle {
    color: #ffffff !important;
}

.sidebar-item-icon>.header-logo {
    background-color: #fff;
    border-radius: 4px;
    padding: 0 2px;
}

/* Navbar */
.navbar {
    /* background: var(--pirmary-dark) !important; */
    /* background: #350b57 !important; */
    background: #fff;
}

.desktop-navbar-modal-search {
    border: #582779 solid 1px;
}

.desktop-search-wrapper span {
    color: #582779 !important;
}

.search-bar svg {
    stroke: #582779;
}

.frappe-control[data-fieldtype=Select] .control-input .select-icon.xs,
.frappe-control[data-fieldtype=Select].form-group .select-icon.xs {
    top: 8px;
}

/* Sidebar */
/* .layout-side-section {
    background: #0f172a !important;
} */



.active-sidebar {
    background: var(--menuhover) !important;
}

/* Buttons */
.btn-primary {
    background: var(--primary) !important;
    border: none !important;
}


/* Links */
a {
    color: var(--primary);

}


/* ======== HEader ========= */

.page-head {
    background: #f6f5f8;
    border-bottom: none;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.page-head .page-head-content {
    height: 50px;
    /* box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14); */
    /* margin: 8px 0px 0px 0px; */
    background: #fff;
    border-radius: 8px;
}

/* ========== Mobile off-canvas sidebar ==========
   Frappe already ships a working drawer for .body-sidebar-container
   (see frappe/public/scss/desk/sidebar.scss, toggled via the .expanded class).
   These rules just make sure our custom header doesn't clip/hide the trigger
   or leave the container stuck at display:none below the 992px breakpoint. */
@media (max-width: 991.98px) {
    .body-sidebar-container {
        display: flex !important;
        z-index: 1020;
    }

    .body-sidebar-container.expanded {
        z-index: 1021;
    }

    /* Frappe's native .sidebar-toggle-btn.navbar-brand is unreliable across
       page types (list/report views rebuild the page head with hide_sidebar
       true and drop it) - ui_core.js injects a single guaranteed trigger
       instead, so hide the native one everywhere to avoid duplicates. */
    .page-title .sidebar-toggle-btn.navbar-brand {
        display: none !important;
    }

    .ui-core-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-right: 8px;
        flex-shrink: 0;
        cursor: pointer;
        color: var(--secondary);
        font-size: 20px;
        line-height: 1;
    }
}

@media (min-width: 992px) {
    .ui-core-sidebar-toggle {
        display: none !important;
    }
}


/* ====== FIXES ========== */
.attached-file .ellipsis {
    max-width: 40%;
}

/* ========== FORM PAGE LAYOUT ============ */


.std-form-layout>.form-layout>.form-page {
    border-radius: 8px;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    margin: 15px;
}

div:has(> .form-footer) {
    margin: 15px;
    padding: 10px 0px;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    border-radius: 8px;
    background: #fff;
}

/* The form's tab strip overflows once the labels are wider than the card
   (common on phones). It is already overflow-x: auto, but with no visible
   scrollbar the last tab just looks chopped off — these make the strip
   flick-scrollable and hint that there is more to the right. */
/* NB: do not set `position` here. Core makes .form-tabs-list sticky and drives
   its `top` from JS; forcing `relative` turns that into a layout offset that
   drags the bar down over the first field. Sticky is already a containing
   block, so the ::after fade below anchors to it correctly as-is. */
.form-page>.form-tabs-list>.form-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}

.form-page>.form-tabs-list>.form-tabs::-webkit-scrollbar {
    display: none;
}

.form-page>.form-tabs-list::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 24px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

@media (max-width: 767.98px) {

    /* Frappe core pins .main-section to `height: 100vh`. On mobile browsers
       100vh is the *large* viewport (as if the URL bar were hidden), so the
       scroll container's bottom sits underneath the browser chrome and the
       last fields can never be scrolled into view. dvh tracks the height
       that is actually visible. */
    .main-section {
        height: 100dvh;
    }

    /* Let the last field clear the floating chat button in the corner. */
    .std-form-layout>.form-layout>.form-page {
        padding-bottom: 72px;
    }

    /* Core renders per-row list buttons (listview_settings.button - e.g.
       "Start Inspection") inside a .list-row-col tagged hidden-xs, so on phones
       the action disappears entirely and the only way to trigger it is to open
       each record. Show that one column back.
       :has(.btn-action) is deliberate - it matches only rows where the button
       actually rendered, so rows whose show(doc) returned false (core emits an
       empty <span> there) stay hidden instead of leaving a blank gap, and the
       other hidden-xs columns are left alone.
       The button gets its OWN line. .level-left carries .ellipsis
       (white-space:nowrap; overflow:hidden; text-overflow:ellipsis) and turns
       into display:block on mobile, so every inline child is forced onto a
       single clipped line. Sharing that line, the button sat after the title
       and meta chips - so a long name ("Daily Pre-Trip (DVIR) - 21-08-2026")
       pushed "Start Inspection" past the edge and it was cut off, or vanished
       completely. A full-width block child can't be pushed off, so the action
       stays fully visible and tappable no matter how long the name is. */
    .list-row .level-left:has(.btn-action) {
        white-space: normal !important;
        overflow: visible !important;
    }

    .list-row-col.hidden-xs:has(.btn-action) {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        margin-top: 6px;
    }

    /* The button hugs its label instead of stretching the whole line. */
    .list-row-col.hidden-xs:has(.btn-action) .btn-action {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .list-row-col .btn-action {
        white-space: nowrap;
    }
}


/* ======== workspace background ========== */
[data-page-route=Workspaces] .layout-main-section {
    /* background: #f4f3f6; */
    background: #f7f6f9;
}

/* ======= Content Area list view ========= */

.layout-main-section-wrapper {
    background: #f8f7fa;
}

.no-breadcrumbs .main-section {
    background: #f7f6f9;
}

.main-section {
    background: #f8f7fa;
    /* background: #eae9f9; */
}

.page-form {
    margin: 15px 15px 0px 15px;
    border-radius: 8px;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
}

.frappe-list {
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    margin-bottom: 15px;
    margin-top: 15px;
}

.list-row-head {
    background-color: #3d3d3d;
}



.datatable .dt-header .dt-row-header {
    background-color: #3d3d3d;
}

.dt-cell--header {
    background-color: #3d3d3d;
}

.datatable .dt-row-filter .dt-filter.dt-input {
    background: #ebebeb;
}

.datatable .dt-header .dt-cell--header .dt-cell__content {
    background-color: #3d3d3d;
    color: #fff;
}

.dt-dropdown__toggle {
    background-color: #3d3d3d;
}

.datatable {
    border-radius: 8px;
}

.list-row-head .level-right {
    background-color: #3d3d3d;
}

.list-row-head {
    color: #fff !important;
    height: 38px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.list-row-head,
.level-item {
    color: #fff !important;
}

.frappe-timestamp {
    color: #111111 !important;
}

.list-row-head:hover .level-right {
    background-color: #524f4f;
}

.list-row-head .icon {
    color: #fff !important;
}

.list-paging-area {
    padding: 10px 10px !important
}

/* =========FORMS========== */

#navbar-search {
    background-color: #ffd4d400 !important;
    border: transparent !important;
    color: var(--text-light) !important;
    height: 24px;
}

.form-control {
    background-color: #fff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-light) !important;
    height: 40px;
}

.btn-xs {
    border: var(--border-color) solid 1px !important;
}

.custom-actions .btn {
    border: #ddd solid 1px !important;
}

.standard-actions .text-muted,
.standard-actions .menu-more-button {
    border: #ddd solid 1px !important;
}

.filter-section .btn,
.input-group .btn {
    border: #ddd solid 1px !important;
}

.input-group .btn {
    height: 40px;
}

.btn-new-doc {
    border: #ddd solid 1px !important;
}


.body-sidebar-bottom .avatar-name-email {
    color: #fff !important;
}

.body-sidebar-container.expanded .body-sidebar .dropdown-navbar-user:hover {
    background-color: var(--menuhover) !important;
    /* padding: 0 4px; */
    /* background-color: #3e254f !important; */
}


.page-form .form-control,
.page-form .input-group .btn {
    height: 32px !important;
}

.page-form .form-control,
.page-form .input-group {
    border-radius: 4px !important;
}

.page-form .checkbox {
    line-height: 20px !important;
}

.input-group>.form-control:not(:last-child) {
    margin-right: -1px !important;
}

.frappe-control[data-fieldtype=Select] .control-input .select-icon {
    top: 8px;
}

.frappe-control[data-fieldtype=Color] .selected-color {
    top: 11px;
}

/* Fix Input Alignment at 40px height */
/* .btn:not(.btn-sm):not(.btn-xs):not(.btn-link) {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.input-group .btn {
    height: 40px !important;
}

.input-group-append .btn,
.input-group-prepend .btn {
    margin-top: 0 !important;
} */

/* Ensure filter buttons and other desk elements align */
/* .filter-selector .btn,
.sort-selector .btn,
.list-filters .btn,
.input-group .btn {
    height: 40px !important;
} */



/* ================= SIDEBAR ================= */

/* .layout-side-section {
    background: linear-gradient(180deg, #5b2a86, #4c1d95); 
    width: 68px;
} */

/* Sidebar icons */
.standard-sidebar-item {
    color: #d6bcfa !important;
}

/* Active icon */
.standard-sidebar-item.selected,
.standard-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
}


/* ===== LOGIN ===== */
/* Layout Container */
.kof-login {
    display: flex;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid #ffffff70;
    flex-flow: wrap;
    padding: 80px 20px;
    height: 100vh;
    /* width: 100vw; */
    margin: 0;

}

/* Left Side (Branding) */
.kof-left {
    flex: 1;
    background-color: #5c2578;
    /* Your brand purple */
    background: url(/assets/ui_core/images/login-bg.jpg) no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kof-logo {
    width: 250px;
    /* Adjust size as needed */
}

/* Right Side (Form) */
.kof-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.login-card {
    width: 100%;
    max-width: 400px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .kof-left {
        display: none;
    }
}

/* Login page: kill the sideways drag on mobile.
   ui_core/www/login.html hides the Email/Password labels with Bootstrap's
   .sr-only, which is supposed to collapse them to a clipped 1x1 box. But
   Frappe's login stylesheet sets
     .for-login .page-card .page-card-body .form-label { width: 100%; }
   at (0,4,1) specificity, which outranks .sr-only (0,1,0) - so the labels keep
   position:absolute at full container width and stick out ~71px past a 430px
   viewport. That overhang is the only thing making the page horizontally
   scrollable (measured: scrollWidth 501 vs clientWidth 430).
   Restore the visually-hidden box. :not(:focus):not(:active) leaves
   .sr-only-focusable able to reveal itself for keyboard users. */
.sr-only:not(:focus):not(:active) {
    width: 1px !important;
    max-width: 1px !important;
}

.navbar-home {
    background: #fff;
    border-radius: 8px;
    padding: 3px;
}

.navbar-home img {
    content: url("/assets/ui_core/images/logo_small.svg");
    width: 34px;

}

/* Remove Frappe footer branding */
.footer-powered,
.powered-by {
    display: none !important;
}

/* ================= DASHBOARD CUSTOM STYLES ================= */

/* ================= DASHBOARD CUSTOM STYLES ================= */

.dashboard-section-header {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--secondary);
    margin-bottom: 2rem;
    margin-top: 3rem;
    position: relative;
    padding-left: 1rem;
}

.dashboard-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: var(--primary);
    border-radius: 2px;
}

.kof-metric-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.kof-metric-card {
    background: #fff;
    border: 1px solid rgba(8c, 37, 120, 0.08);
    /* Subtle brand border */
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

.kof-metric-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #a855f7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kof-metric-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);
}

.kof-metric-card:hover::after {
    opacity: 1;
}

.kof-metric-title {
    font-weight: 700;
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: #1f2937;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kof-metric-stats {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.kof-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.kof-stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.kof-stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: #6b7280;
    margin-top: 0.5rem;
}

/* Color Variants */
.text-total {
    background: linear-gradient(45deg, #059669, #10b981);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-due {
    background: linear-gradient(45deg, #d97706, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-overdue {
    background: linear-gradient(45deg, #dc2626, #ef4444);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-finance {
    background: linear-gradient(45deg, var(--primary), #9333ea);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kof-finance-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kof-finance-info {
    flex: 1;
}

.kof-finance-value {
    font-size: 2.25rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
    font-family: var(--font-heading);
}

.kof-finance-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 1.25rem;
}

.kof-finance-trend {
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.kof-trend-up {
    background-color: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.kof-trend-down {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.kof-metric-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(92, 37, 120, 0.05);
    border-radius: 16px;
    padding: 12px;
}

.kof-metric-icon .icon {
    width: 100% !important;
    height: 100% !important;
    stroke: var(--primary) !important;
}

/* Table Style Widgets */
.kof-list-widget {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.kof-list-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(92, 37, 120, 0.02);
}

.kof-list-header span:first-child {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: #111827;
}

.kof-list-item {
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    border-bottom: 1px solid #f9fafb;
    transition: background-color 0.2s;
    cursor: pointer;
}

.kof-list-item:hover {
    background-color: #f9fafb;
}

.kof-list-item:last-child {
    border-bottom: none;
}

.kof-item-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary), #a855f7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(92, 37, 120, 0.2);
}

.kof-item-details {
    flex: 1;
}

.kof-item-title {
    font-weight: 700;
    font-size: 1rem;
    color: #111827;
}

.kof-item-subtitle {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

.kof-item-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary);
}

/* Glassmorphism Effect for certain elements */
.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}








/* Main Card */
.ui-core-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.ui-core-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Title */
.ui-core-card .card-title,
.ui-core-card .number-card-title {
    font-size: 13px;
    color: #6b7280;
}

/* Number */
.ui-core-card .card-number,
.ui-core-card .number-card-value {
    font-size: 26px;
    font-weight: 600;
    margin-top: 6px;
}

/* Icon */
.ui-core-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    height: 42px;
    width: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Wave */
.ui-core-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    opacity: 0.9;
}

.ui-core-wave svg {
    width: 100%;
    height: 100%;
}

/* Premium Card Layouts */
.ko-card-wrapper.ko-premium-right,
.ko-card-wrapper.ko-premium-left {
    height: 100%;
    min-height: 120px;
    padding: 20px !important;
    position: relative;
    overflow: hidden;
}

.ko-premium-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.ko-card-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    font-family: var(--font-heading);
}

.ko-metric-value-lg {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    display: block;
}

.ko-premium-body {
    flex: 1;
    display: flex;
    align-items: center;
}

.ko-premium-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
}

.ko-premium-icon-top {
    margin-bottom: 15px;
}

.ko-card-icon {
    min-width: 44px;
    min-height: 44px;
    width: fit-content;
    height: fit-content;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.ko-card-icon img {
    object-fit: contain;
}

.ko-premium-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Align with top of title */
    width: 100%;
    margin-bottom: 5px;
}

/* Specific alignments for Premium Left */
.ko-premium-left .ko-metric-value-lg {
    margin-bottom: 5px;
}

.ko-premium-left .ko-premium-footer {
    align-items: center;
}

.ko-trend {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ko-trend.text-green {
    color: #10b981;
    /* background: rgba(16, 185, 129, 0.1); */
}

.ko-trend.text-red {
    color: #ef4444;
    /* background: rgba(239, 68, 68, 0.1); */
}