/* =========================================================================
   ERP UI Redesign — Odoo 19 design language, Blue & White edition
   Modeled on the real Odoo 19 web client (addons/web/static/src):
     - Solid flat brand navbar (46-50px), white text @ .9, darker hover
     - Workspace bg #f8f9fa, white views, hairline #dee2e6 borders
     - 4px radius, flat surfaces (shadows only on overlays)
     - Control-panel strip with breadcrumb under the navbar
     - Bold compact buttons, list headers on gray-100
   Purely additive: layered over the existing AdminLTE 2 + Bootstrap 3 markup.
   No markup, PHP logic, IDs, workflows or JS changed. Loaded LAST to win the
   cascade; remove the <link> to fully revert.
   ========================================================================= */

:root {
    /* Brand (Odoo's $o-brand-primary equivalent, in blue) */
    --erp-primary: #2563eb;
    --erp-primary-rgb: 37, 99, 235;
    --erp-primary-dark: #1d4ed8;   /* darken ~8% — navbar border/hover     */
    --erp-primary-darker: #1e40af;
    --erp-primary-tint: rgba(37, 99, 235, .08);
    --erp-primary-tint-2: rgba(37, 99, 235, .14);

    /* Odoo grays (Bootstrap scale used verbatim by Odoo 19) */
    --erp-gray-100: #f8f9fa;
    --erp-gray-200: #e9ecef;
    --erp-gray-300: #dee2e6;
    --erp-gray-400: #ced4da;
    --erp-gray-500: #adb5bd;
    --erp-gray-600: #6c757d;
    --erp-gray-700: #495057;
    --erp-gray-800: #343a40;
    --erp-gray-900: #212529;

    /* Surfaces */
    --erp-app-bg: #eef1f5;                  /* cooler workspace gray */
    --erp-view-bg: #ffffff;                 /* $o-view-background-color      */
    --erp-border: var(--erp-gray-300);

    /* Text */
    --erp-text: var(--erp-gray-900);
    --erp-muted: var(--erp-gray-600);
    --erp-heading: #111827;

    /* Feedback */
    --erp-success: #2563eb; /* de-greened: success maps to brand indigo */
    --erp-danger: #dc3545;
    --erp-warning: #ffac00;
    --erp-info: #17a2b8;

    /* Shape — Odoo: 4px base, 3px sm, 6px lg */
    --erp-radius: 4px;
    --erp-radius-sm: 3px;
    --erp-radius-lg: 6px;
    --erp-shadow-overlay: 0 4px 18px rgba(33, 37, 41, .18);

    /* Geometry — Odoo navbar is 46px */
    --erp-header-h: 46px;
    --erp-sidebar-w: 250px;

    /* Odoo remaps $font-weight-bold to 500 — its whole UI uses medium */
    --erp-fw-bold: 500;

    /* Light icon-rail sidebar (fleetx-style relaunch) */
    --erp-sb-bg: #ffffff;
    --erp-sb-panel: #ffffff;
    --erp-sb-border: var(--erp-gray-200);
    --erp-sb-text: #3f4754;
    --erp-sb-muted: #7b8493;
    --erp-sb-hover: #f1f4f9;

    /* Brand font (relaunch identity) with system fallback */
    --erp-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
body.hold-transition,
body.sidebar-mini,
body {
    font-family: var(--erp-font);
    color: var(--erp-text);
    background-color: var(--erp-app-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
}

.content-wrapper,
.right-side {
    background-color: var(--erp-app-bg);
}

a {
    color: var(--erp-primary-dark); /* Odoo: link = brand darkened */
    text-decoration: none;
    transition: color .12s ease;
}

a:hover,
a:focus {
    color: var(--erp-primary-darker);
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--erp-heading);
    font-weight: var(--erp-fw-bold);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--erp-gray-400);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--erp-gray-500);
    background-clip: content-box;
}

/* -------------------------------------------------------------------------
   Header — white full-width bar (fleetx-style relaunch)
   ------------------------------------------------------------------------- */
.main-header {
    box-shadow: none;
}

.main-header .navbar {
    background: #fff !important;
    border-bottom: 1px solid var(--erp-gray-200);
    min-height: var(--erp-header-h);
    margin-left: var(--erp-sidebar-w);
    box-shadow: none;
    display: flex;
    align-items: center;
}

/* center the quick-links block between hamburger and the right menu */
.main-header .navbar > .top-fixed-link {
    margin: 0 auto;
}

.main-header .navbar > .navbar-custom-menu {
    margin-left: 0;
}

/* Brand cell — white, logo rendered as a monochrome wordmark */
.main-header .logo {
    background: #fff !important;
    border-bottom: 1px solid var(--erp-gray-200) !important;
}

/* Logo cell sits on the same flat blue bar */
.main-header .logo {
    height: var(--erp-header-h);
    line-height: var(--erp-header-h);
    border-bottom: none;
    border-right: none;
    transition: background .12s ease;
}

.main-header .logo:hover {
    background: var(--erp-gray-100) !important;
}

.main-header .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo asset was designed for a dark bar — render it as a black wordmark */
.main-header .logo .logo-lg img {
    max-height: 30px;
    width: auto;
    object-fit: contain;
    filter: brightness(0);
    opacity: .85;
}

.main-header .logo .logo-mini img {
    max-height: 26px;
    width: auto;
    filter: brightness(0);
    opacity: .85;
}

/* AdminLTE hides logo-lg when collapsed via display rules — restore them */
.sidebar-mini.sidebar-collapse .main-header .logo .logo-lg {
    display: none;
}

.sidebar-mini:not(.sidebar-collapse) .main-header .logo .logo-mini {
    display: none;
}

/* Hamburger — dark on white */
.main-header .sidebar-toggle {
    color: var(--erp-gray-600) !important;
    padding: 0 16px;
    height: var(--erp-header-h);
    line-height: var(--erp-header-h);
    display: flex;
    align-items: center;
    transition: background .12s ease;
}

.main-header .sidebar-toggle:hover {
    background: var(--erp-gray-100) !important;
    color: var(--erp-gray-900) !important;
}

.main-header .sidebar-toggle .pe-7s-keypad {
    font-size: 19px;
}

/* Quick actions — flat navbar entries, Odoo style (no pills, no borders) */
.top-fixed-link {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    height: var(--erp-header-h);
    padding: 0;
    min-width: 0;
}

.navbar .top-fixed-link .btn,
.top-fixed-link .btn-success.btn-outline {
    background: transparent !important;
    color: var(--erp-gray-700) !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 500;
    font-size: 13.5px;
    height: var(--erp-header-h);
    line-height: var(--erp-header-h);
    padding: 0 12px !important;
    margin: 0 !important;
    box-shadow: none !important;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.navbar .top-fixed-link .btn:hover,
.top-fixed-link .btn-success.btn-outline:hover {
    background: var(--erp-gray-100) !important;
    color: var(--erp-primary-dark) !important;
    transform: none;
}

/* Right-side entries — beat legacy newstyle.css (height 63 / line-height 57) */
.main-header .navbar-nav > li > a,
.navbar-nav > li > a {
    padding: 0 13px !important;
    height: var(--erp-header-h) !important;
    line-height: normal !important;
    display: flex;
    align-items: center;
    background: transparent !important;
}

/* Normalize the inline-styled header <li> (font-size:19px etc.) */
.navbar-custom-menu .nav > li[style] {
    font-size: 13.5px !important;
    margin: 0 6px 0 0 !important;
}

/* The li wrappers must stay flat on the blue bar */
.navbar-custom-menu .nav > li,
.main-header .navbar-nav > li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* CTA buttons inside the bar keep their own compact height */
.main-header .navbar-nav > li > a.pos-btn,
.main-header .navbar-nav > li > a.btn-c,
.main-header .navbar-nav > li > a.flex_center_btn {
    height: auto !important;
    align-self: center;
}

.navbar-custom-menu .navbar-nav > li > a {
    color: var(--erp-gray-700);
}

/* soft divider before the status zone (bell + user) */
.navbar-custom-menu .notifications-menu {
    position: relative;
    margin-left: 8px !important;
    padding-left: 10px;
}

.navbar-custom-menu .notifications-menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 22px;
    background: var(--erp-gray-200);
}

.navbar-custom-menu .navbar-nav > li > a .pe-7s-settings,
.navbar-custom-menu .navbar-nav > li > a .pe-7s-attention,
.navbar-custom-menu .navbar-nav > li > a > i {
    font-size: 20px;
    color: var(--erp-gray-600);
    background: transparent !important; /* legacy #f5f5f5 icon chip */
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    transition: color .12s ease;
}

.navbar-custom-menu .navbar-nav > li > a:hover {
    background: var(--erp-gray-100) !important;
}

.navbar-custom-menu .navbar-nav > li > a:hover .pe-7s-settings,
.navbar-custom-menu .navbar-nav > li > a:hover .pe-7s-attention {
    color: var(--erp-gray-900);
}

/* AI + POS header buttons — flat white-on-blue CTAs (Odoo action button).
   High-specificity + !important needed: header.php ships an inline <style>
   block in <body> that would otherwise win the cascade tie. */
.main-header .btn-c,
.main-header .navbar .flex_center_btn,
.btn-c,
.navbar li .btn-c.pos-btn,
.flex_center_btn {
    background: #fff !important;
    color: var(--erp-gray-800) !important;
    border: 1px solid var(--erp-gray-300) !important;
    border-radius: var(--erp-radius) !important;
    font-weight: var(--erp-fw-bold) !important;
    font-size: 13px !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 7px 14px !important; /* identical metrics to the POS button */
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

.main-header .btn-c:hover,
.btn-c:hover {
    background: var(--erp-gray-100) !important;
    border-color: var(--erp-gray-400) !important;
}

.main-header .navbar .pos-btn.btn-success,
.navbar .pos-btn.btn-success {
    background: var(--erp-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--erp-radius) !important;
    font-weight: var(--erp-fw-bold) !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.main-header .navbar .pos-btn.btn-success:hover,
.navbar .pos-btn.btn-success:hover {
    background: var(--erp-primary-dark) !important;
}

/* Right-side menu — one flex row, everything on the same centerline */
.navbar-custom-menu {
    display: flex;
    align-items: center;
    height: var(--erp-header-h);
    float: right;
}

.navbar-custom-menu .navbar-nav {
    display: flex;
    align-items: center;
    height: var(--erp-header-h);
    margin: 0;
    float: none;
}

.navbar-custom-menu .nav > li {
    display: flex;
    align-items: center;
    height: var(--erp-header-h);
    float: none;
}

.update-btn.btn-danger {
    background: var(--erp-warning) !important;
    color: var(--erp-gray-900) !important;
    border-radius: var(--erp-radius) !important;
    border: none !important;
    font-weight: var(--erp-fw-bold);
    padding: 6px 12px;
}

/* Notification badge — Odoo navbar badge */
.navbar .label-danger {
    background: var(--erp-danger);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    font-weight: 700;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
}

/* User menu — white pill (reference: "Admin ooo").
   Must out-rank the generic .main-header .navbar-nav > li > a entry rule. */
.main-header .navbar-nav > li > a.user-menu-toggle,
.navbar-custom-menu .user-menu-toggle {
    gap: 8px;
    background: #eff6ff !important;
    border-radius: 8px !important;
    height: 34px !important;
    align-self: center;
    padding: 0 12px 0 6px !important;
    margin-right: 10px;
}

.main-header .navbar-nav > li > a.user-menu-toggle:hover,
.navbar-custom-menu .user-menu-toggle:hover {
    background: #dbeafe !important;
}

.user-menu-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--erp-border);
}

.user-menu-name {
    color: var(--erp-primary-dark);
    font-size: 13px;
    font-weight: 600;
    max-width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.user-menu-caret {
    color: var(--erp-primary-dark);
    font-size: 12px;
}

/* Header dropdown — Odoo dropdown: white, 4px radius, overlay shadow */
.navbar-custom-menu .dropdown-menu {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-overlay);
    padding: 4px 0;
    margin-top: 2px;
}

.navbar-custom-menu .dropdown-menu > li > a {
    padding: 8px 16px;
    color: var(--erp-text);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    line-height: 1.4;
}

.navbar-custom-menu .dropdown-menu > li > a:hover {
    background: var(--erp-gray-100);
    color: var(--erp-gray-900);
}

/* -------------------------------------------------------------------------
   Sidebar v5 — white icon rail by default (fleetx-style relaunch);
   expands to a full light menu via the hamburger
   ------------------------------------------------------------------------- */
.main-sidebar,
.left-side {
    background: var(--erp-sb-bg) !important;
    border-right: 1px solid var(--erp-sb-border);
    box-shadow: none;
    padding-top: var(--erp-header-h);
}

.sidebar {
    padding-bottom: 24px;
}

/* User panel — centered mini profile card */
.user-panel {
    display: block;
    text-align: center !important;
    padding: 18px 14px 14px !important;
    margin: 0 0 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--erp-sb-border);
    border-radius: 0;
}

.user-panel > .image img,
.user-panel .image img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    box-shadow: none;
    border: 2px solid #fff;
    outline: 2px solid var(--erp-primary);
}

.user-panel .info p {
    color: var(--erp-gray-900);
    font-weight: 600;
    font-size: 13.5px;
    margin: 10px 0 4px;
}

.user-panel .info a {
    display: inline-block;
    color: var(--erp-primary-dark) !important;
    background: var(--erp-primary-tint);
    font-size: 11px;
    font-weight: var(--erp-fw-bold);
    padding: 2px 10px;
    border-radius: 999px;
}

.user-panel .info a .text-success {
    color: var(--erp-primary) !important;
    font-size: 8px;
    vertical-align: 1px;
}

/* Menu — rounded pill items inside a padded rail */
.sidebar-menu {
    padding: 8px 10px;
}

.sidebar-menu > li {
    margin: 0 0 2px;
}

.sidebar-menu > li > a {
    display: flex;
    align-items: center;
    color: var(--erp-sb-text) !important;
    border-radius: 8px;
    padding: 9px 10px !important;
    font-weight: 500;
    font-size: 13.5px;
    border-left: none;
    box-shadow: none;
    transition: background .12s ease, color .12s ease;
}

.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > [class^="pe-7s"],
.sidebar-menu > li > a > [class^="ti-"],
.sidebar-menu > li > a > .metismenu-icon {
    color: var(--erp-sb-muted);
    width: 26px;
    min-width: 26px;
    margin-right: 8px;
    font-size: 16px;
    text-align: center;
    transition: color .12s ease;
}

.sidebar-menu > li > a > span {
    flex: 1;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.menu-open > a {
    background: var(--erp-sb-hover) !important;
    color: var(--erp-gray-900) !important;
}

.sidebar-menu > li:hover > a > i,
.sidebar-menu > li:hover > a > [class^="pe-7s"],
.sidebar-menu > li:hover > a > [class^="ti-"],
.sidebar-menu > li:hover > a > .metismenu-icon {
    color: var(--erp-primary);
}

/* Active app — blue tint + blue icon/text (fleetx) */
.sidebar-menu > li.active > a {
    background: #eff6ff !important;
    color: var(--erp-primary-dark) !important;
    font-weight: 600;
    box-shadow: none;
}

.sidebar-menu > li.active > a > i,
.sidebar-menu > li.active > a > [class^="pe-7s"],
.sidebar-menu > li.active > a > [class^="ti-"],
.sidebar-menu > li.active > a > .metismenu-icon {
    color: var(--erp-primary) !important;
}

/* Collapse caret */
.sidebar-menu .pull-right-container .fa-angle-left {
    color: var(--erp-sb-muted);
    transition: transform .15s ease;
    margin-top: 2px;
}

.sidebar-menu > li.active > a .pull-right-container .fa-angle-left {
    color: var(--erp-primary);
}

.sidebar-menu > li.active > a .pull-right-container .fa-angle-left,
.sidebar-menu > li.menu-open > a .pull-right-container .fa-angle-left {
    transform: rotate(-90deg);
}

/* Sub menus — clean indent, NO tree guide lines */
.sidebar-menu .treeview-menu {
    background: transparent;
    border-radius: 0;
    margin: 2px 0 4px;
    padding: 0;
    position: relative;
}

/* Kill the legacy tree guides (vertical rail + per-item ticks) */
.sidebar-menu .treeview-menu:before,
.sidebar-menu .treeview-menu:after,
.sidebar-menu .treeview-menu > li::before,
.sidebar-menu .treeview-menu > li::after,
.sidebar-menu .treeview-menu > li > a::before,
.sidebar-menu .treeview-menu > li > a::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

.sidebar-menu .treeview-menu > li > a {
    color: var(--erp-sb-muted) !important;
    padding: 7px 10px 7px 44px !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    border: none;
    box-shadow: none;
    transition: background .12s ease, color .12s ease;
}

.sidebar-menu .treeview-menu > li > a:hover {
    background: var(--erp-sb-hover) !important;
    color: var(--erp-gray-900) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    background: #eff6ff !important;
    color: var(--erp-primary-dark) !important;
    font-weight: var(--erp-fw-bold);
    box-shadow: none;
}

.sidebar-menu .treeview-menu .treeview-menu {
    background: transparent;
}

.sidebar-menu .treeview-menu .treeview-menu > li > a {
    padding-left: 58px !important;
}

/* -------------------------------------------------------------------------
   Collapsed (mini) sidebar — 50px icon rail
   AdminLTE positions the hover flyout at left:50px / top:44px RELATIVE TO
   THE <li>, so the li must start at x=0 (no rail padding) and each item must
   be exactly 44px tall, or a dead-hover gap opens and the flyout vanishes.
   ------------------------------------------------------------------------- */
/* Legacy CSS sets .sidebar-menu{overflow:hidden}, which clips the hover
   flyout to the 50px rail — the "disappearing submenu" bug. */
.sidebar-menu,
.sidebar-mini.sidebar-collapse .sidebar-menu {
    overflow: visible !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu {
    padding: 6px 0;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    margin: 0;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
    height: 44px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > i,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa,
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > [class^="pe-7s"],
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > [class^="ti-"],
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .metismenu-icon {
    margin-right: 0;
    width: auto;
    min-width: 0;
    font-size: 18px;
    color: var(--erp-sb-muted);
}

/* keep the icon column exactly 50px wide when the label flies out */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a {
    justify-content: center;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a {
    background: #eff6ff !important;
    border-radius: 0;
    box-shadow: inset 3px 0 0 var(--erp-primary);
}

/* Flyout label — solid surface, vertically centered over the 44px row */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right) {
    background: var(--erp-sb-panel) !important;
    color: var(--erp-gray-900) !important;
    border: 1px solid var(--erp-sb-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: var(--erp-shadow-overlay);
    height: 44px;
    display: flex !important;
    align-items: center;
    padding: 0 5px 0 16px !important;
    font-size: 13.5px;
    font-weight: 500;
    z-index: 900;
}

/* Active item keeps its blue identity in the flyout label */
.sidebar-mini.sidebar-collapse .sidebar-menu > li.active:hover > a > span:not(.pull-right) {
    background: #eff6ff !important;
    color: var(--erp-primary-dark) !important;
    border-color: var(--erp-sb-border);
}

/* Flyout submenu — flush against the rail and the label row above */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    background: var(--erp-sb-panel) !important;
    border: 1px solid var(--erp-sb-border);
    border-radius: 0 0 8px 8px;
    box-shadow: var(--erp-shadow-overlay);
    padding: 6px !important;
    margin: 0;
    z-index: 900;
}

.sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu > li > a {
    padding: 8px 12px !important;
    border-radius: 6px;
}

.sidebar-mini.sidebar-collapse .sidebar-menu .treeview-menu .treeview-menu > li > a {
    padding-left: 24px !important;
}

/* User panel in the rail: shrink the avatar, hide text */
.sidebar-mini.sidebar-collapse .user-panel {
    padding: 10px 4px !important;
}

.sidebar-mini.sidebar-collapse .user-panel > .image img,
.sidebar-mini.sidebar-collapse .user-panel .image img {
    width: 32px;
    height: 32px;
    outline-width: 1px;
    border-width: 1px;
}

/* -------------------------------------------------------------------------
   Control panel — breadcrumb strip under the navbar (Odoo o_control_panel)
   ------------------------------------------------------------------------- */
.content-wrapper > .content {
    padding: 0 24px 20px;
}

.breadcrumb {
    background: transparent;
    margin: 0 0 14px;
    padding: 16px 0 0;
    border-bottom: none;
    border-radius: 0;
    font-size: 13px;
    float: none !important;
    text-align: left !important;
}

.breadcrumb > li > a {
    color: var(--erp-muted);
    font-weight: 400;
}

.breadcrumb > li > a:hover {
    color: var(--erp-primary-dark);
}

.breadcrumb > li + li:before {
    content: "/";
    color: var(--erp-gray-400);
    padding: 0 7px;
}

.breadcrumb > .active {
    color: var(--erp-heading);
    font-weight: 600;
    font-size: 17px;
}

.breadcrumb .pe-7s-home {
    font-size: 14px;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Panels / Cards — flat white views with hairline borders
   ------------------------------------------------------------------------- */
.panel,
.box {
    background: var(--erp-view-bg);
    border: 1px solid var(--erp-gray-200);
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 16px;
}

.panel-bd {
    border: 1px solid var(--erp-border);
    box-shadow: none;
    overflow: hidden;
}

/* Remove legacy corner ornament */
.panel-bd:before,
.panel-bd .panel-heading:before {
    display: none !important;
}

.panel > .panel-heading,
.panel-bd > .panel-heading,
.box > .box-header {
    background: var(--erp-view-bg);
    border-bottom: 1px solid var(--erp-gray-200);
    color: var(--erp-heading);
    padding: 12px 16px;
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
}

.panel-heading .panel-title,
.box-header .box-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    font-size: 15px;
    font-weight: var(--erp-fw-bold);
    color: var(--erp-heading);
}

.panel-heading .panel-title h4,
.panel-heading h4 {
    font-size: 15px;
    font-weight: var(--erp-fw-bold);
    margin: 0;
    color: var(--erp-heading);
}

.panel-body,
.box-body {
    padding: 16px;
}

.panel-title:before,
.box-title:before {
    display: none;
}

/* -------------------------------------------------------------------------
   Dashboard stat tiles — flat white KPI cards (Odoo dashboard style)
   ------------------------------------------------------------------------- */
.small-box {
    border-radius: 10px;
    border: 1px solid var(--erp-gray-200);
    box-shadow: none;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
    background: var(--erp-view-bg) !important;
    color: var(--erp-text);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.small-box:hover {
    border-color: var(--erp-gray-400);
    box-shadow: 0 2px 8px rgba(33, 37, 41, .08);
    transform: none;
}

.small-box > .inner {
    padding: 18px 18px 14px;
}

.small-box h4,
.small-box h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--erp-heading);
    margin: 0 0 2px;
}

.small-box p {
    font-size: 13px;
    font-weight: 500;
    color: var(--erp-muted);
    margin: 0;
}

/* Icon chip — tinted rounded square, per-metric hue */
.small-box .icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    border-radius: var(--erp-radius-lg);
    transition: none;
}

.small-box:hover .icon {
    transform: none;
    font-size: 22px;
}

.small-box .icon > i {
    font-size: 22px;
    line-height: 1;
}

.small-box.bg-green .icon {
    background: rgba(37, 99, 235, .1);
    color: #2563eb;
}

.small-box.bg-pase .icon {
    background: rgba(14, 165, 233, .12);
    color: #0284c7;
}

.small-box.bg-bringal .icon {
    background: rgba(99, 102, 241, .12);
    color: #2563eb;
}

.small-box.bg-darkgreen .icon {
    background: rgba(8, 145, 178, .12);
    color: #0e7490;
}

/* Neutralise the legacy colored backgrounds */
.small-box.bg-green,
.small-box.bg-pase,
.small-box.bg-bringal,
.small-box.bg-darkgreen,
.bg-green.whitecolor,
.bg-pase.whitecolor,
.bg-bringal.whitecolor,
.bg-darkgreen.whitecolor {
    background: var(--erp-view-bg) !important;
}

/* AdminLTE ships `.small-box > .small-box-footer` — match that specificity */
.small-box > .small-box-footer,
.small-box-footer {
    background: var(--erp-view-bg);
    color: var(--erp-primary-dark) !important;
    font-weight: 600;
    font-size: 12.5px;
    padding: 8px 18px;
    text-align: left;
    border-top: 1px solid var(--erp-gray-200);
    transition: background .12s ease;
}

.small-box > .small-box-footer:hover,
.small-box-footer:hover {
    background: var(--erp-gray-100);
    color: var(--erp-primary-darker) !important;
}

/* -------------------------------------------------------------------------
   Buttons — Odoo: bold, compact, 4px radius, flat
   ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--erp-radius);
    font-weight: var(--erp-fw-bold);
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    box-shadow: none;
}

.btn:active,
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--erp-primary-rgb), .2);
}

/* The app uses .btn-success as its PRIMARY action -> Odoo primary, in blue */
.btn-success,
.btn-primary {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--erp-primary-dark) !important;
    border-color: var(--erp-primary-dark) !important;
    color: #fff !important;
}

.btn-success.btn-outline {
    background: transparent !important;
    color: var(--erp-primary-dark) !important;
    border-color: var(--erp-gray-400) !important;
}

.btn-info {
    background: var(--erp-info) !important;
    border-color: var(--erp-info) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--erp-danger) !important;
    border-color: var(--erp-danger) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #bb2d3b !important;
    border-color: #bb2d3b !important;
}

.btn-warning {
    background: var(--erp-warning) !important;
    border-color: var(--erp-warning) !important;
    color: var(--erp-gray-900) !important;
}

/* Secondary — Odoo: white, gray border, dark text */
.btn-default,
.btn-secondary {
    background: var(--erp-view-bg) !important;
    border-color: var(--erp-gray-400) !important;
    color: var(--erp-gray-900) !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--erp-gray-100) !important;
    border-color: var(--erp-gray-500) !important;
    color: var(--erp-gray-900) !important;
}

.filterbutton,
.btn.filterbutton {
    background: var(--erp-primary) !important;
    color: #fff !important;
    border-color: var(--erp-primary) !important;
    border-radius: var(--erp-radius) !important;
}

.filterbutton:hover {
    background: var(--erp-primary-dark) !important;
}

.btn-group .btn {
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   Forms — clean bordered inputs (list/search contexts)
   ------------------------------------------------------------------------- */
label,
.control-label,
.col-form-label {
    color: var(--erp-gray-700);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
}

.form-control {
    border: 1px solid var(--erp-gray-400);
    border-radius: var(--erp-radius);
    color: var(--erp-text);
    font-size: 13.5px;
    box-shadow: none;
    height: 36px;
    padding: 6px 10px;
    transition: border-color .12s ease, box-shadow .12s ease;
    background-color: var(--erp-view-bg);
}

textarea.form-control {
    height: auto;
}

.form-control:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 2px rgba(var(--erp-primary-rgb), .18);
}

.form-control::placeholder {
    color: var(--erp-gray-500);
}

.form-group {
    margin-bottom: 14px;
}

.input-group-addon {
    background: var(--erp-gray-100);
    border: 1px solid var(--erp-gray-400);
    color: var(--erp-gray-700);
    border-radius: var(--erp-radius);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--erp-gray-400) !important;
    border-radius: var(--erp-radius) !important;
    min-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
    color: var(--erp-text);
    padding-left: 10px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--erp-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--erp-primary-rgb), .18);
}

.select2-dropdown {
    border-color: var(--erp-gray-400);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-overlay);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--erp-primary);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--erp-primary-tint);
    color: var(--erp-primary-dark);
}

/* jQuery UI datepicker accent */
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
    background: var(--erp-primary) !important;
    color: #fff !important;
    border-color: var(--erp-primary) !important;
}

.toggle.btn {
    border-radius: 999px;
}

/* -------------------------------------------------------------------------
   Tables — Odoo list view: gray-100 header, near-black bold labels
   ------------------------------------------------------------------------- */
.table {
    color: var(--erp-text);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--erp-gray-100);
    color: var(--erp-gray-900);
    font-weight: var(--erp-fw-bold);
    font-size: 13px;
    border-bottom: 1px solid var(--erp-border) !important;
    border-top: none;
    padding: 10px 12px;
    vertical-align: middle;
}

.table > tbody > tr > td {
    padding: 10px 12px;
    border-top: 1px solid var(--erp-gray-200);
    vertical-align: middle;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: var(--erp-gray-200) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--erp-gray-100);
}

.table-hover > tbody > tr:hover {
    background-color: #eef1f4; /* Odoo neutral hover (~.055 over white) */
}

.table > tfoot > tr > td,
.table > tfoot > tr > th {
    background: var(--erp-gray-100);
    font-weight: var(--erp-fw-bold);
    border-top: 1px solid var(--erp-border);
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--erp-gray-400);
    border-radius: var(--erp-radius);
    padding: 5px 9px;
    height: 34px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--erp-primary);
    box-shadow: 0 0 0 2px rgba(var(--erp-primary-rgb), .18);
    outline: none;
}

.dataTables_wrapper .dataTables_info {
    color: var(--erp-muted);
    padding-top: 12px;
    font-size: 13px;
}

/* Export buttons — secondary tools (Odoo: light, bordered) */
.dt-buttons .dt-button,
.dt-buttons .buttons-copy,
.dt-buttons .buttons-csv,
.dt-buttons .buttons-excel,
.dt-buttons .buttons-pdf,
.dt-buttons .buttons-print,
div.dt-buttons > .btn {
    background: var(--erp-view-bg) !important;
    background-image: none !important;
    color: var(--erp-gray-700) !important;
    border: 1px solid var(--erp-gray-400) !important;
    border-radius: var(--erp-radius) !important;
    font-weight: 600;
    font-size: 12.5px;
    padding: 5px 12px !important;
    margin-right: 4px;
    box-shadow: none;
    transition: background .12s ease, color .12s ease;
}

.dt-buttons .dt-button:hover,
div.dt-buttons > .btn:hover {
    background: var(--erp-gray-100) !important;
    color: var(--erp-gray-900) !important;
    transform: none;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--erp-radius) !important;
    border: 1px solid transparent !important;
    color: var(--erp-gray-700) !important;
    padding: 5px 10px !important;
    margin: 0 1px;
    background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--erp-gray-200) !important;
    border-color: transparent !important;
    color: var(--erp-gray-900) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45;
}

/* Bootstrap pagination */
.pagination > li > a,
.pagination > li > span {
    color: var(--erp-primary-dark);
    border-color: var(--erp-gray-300);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--erp-primary);
    border-color: var(--erp-primary);
}

/* -------------------------------------------------------------------------
   Alerts / badges / labels
   ------------------------------------------------------------------------- */
.alert {
    border-radius: var(--erp-radius);
    border: 1px solid transparent;
    padding: 11px 14px;
    font-size: 13.5px;
    box-shadow: none;
}

.alert-success {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.alert-info {
    background: #cfe2ff;
    border-color: #9ec5fe;
    color: #052c65;
}

.alert-danger {
    background: #f8d7da;
    border-color: #f1aeb5;
    color: #58151c;
}

.alert-warning {
    background: #fff3cd;
    border-color: #ffe69c;
    color: #664d03;
}

.label,
.badge {
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
}

.badge {
    background: var(--erp-primary);
    border-radius: 999px;
}

/* soft pastel chips: tinted bg + dark colored text */
.label-success {
    background: #dbeafe;
    color: #1d4ed8;
}

.label-danger {
    background: #fde2e1;
    color: #b3261e;
}

.label-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.label-warning {
    background: #fdf0cd;
    color: #8a6400;
}

/* Text helpers remap (app used green text-success as accent) */
.text-success {
    color: var(--erp-primary-dark) !important;
}

.text-primary {
    color: var(--erp-primary-dark) !important;
}

/* -------------------------------------------------------------------------
   Modals — Odoo: white header, dark title, 4px radius, overlay shadow
   ------------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-overlay);
    overflow: hidden;
}

.modal-header {
    background: var(--erp-view-bg);
    color: var(--erp-heading);
    border-bottom: 1px solid var(--erp-gray-200);
    padding: 14px 18px;
}

.modal-header .modal-title,
.modal-header h3,
.modal-header h4,
.modal-header .title {
    color: var(--erp-heading);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

.modal-header .close,
.modal-header .btn_close,
.modal-header a.close {
    color: var(--erp-gray-600);
    opacity: 1;
    text-shadow: none;
    font-size: 22px;
    line-height: 1;
}

.modal-header .close:hover,
.modal-header .btn_close:hover {
    color: var(--erp-gray-900);
}

.modal-body {
    padding: 18px;
}

.modal-footer {
    border-top: 1px solid var(--erp-gray-200);
    padding: 12px 18px;
}

.modal-success .modal-header {
    background: var(--erp-view-bg);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.main-footer {
    background: var(--erp-view-bg);
    border-top: 1px solid var(--erp-border);
    color: var(--erp-muted);
    padding: 12px 24px;
    font-size: 12.5px;
}

.main-footer a {
    color: var(--erp-primary-dark);
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Loader / toastr
   ------------------------------------------------------------------------- */
.spinner-layer.pl-green {
    border-color: var(--erp-primary);
}

.se-pre-con {
    background-color: transparent;
}

/* Page preloader — animated Infinity Loader SVG on a clean white overlay */
.page-loader-wrapper {
    background: var(--erp-view-bg);
}

.page-loader-wrapper .loader {
    top: calc(50% - 55px);
}

.page-loader-wrapper .infinity-loader {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
}

.page-loader-wrapper p {
    color: var(--erp-muted);
    font-weight: var(--erp-fw-bold);
    font-size: 13px;
    margin-top: 0;
}

#toast-container > .toast-success {
    background-color: var(--erp-success);
}

#toast-container > .toast-info {
    background-color: var(--erp-primary);
}

#toast-container > .toast {
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-overlay);
}

/* -------------------------------------------------------------------------
   Calculator modal
   ------------------------------------------------------------------------- */
.cal-btn {
    border-radius: var(--erp-radius);
    border: 1px solid var(--erp-gray-300);
    background: var(--erp-view-bg);
    transition: background .1s ease;
}

.cal-btn:hover {
    background: var(--erp-gray-100);
    color: var(--erp-primary-dark);
}

.cal-btn-danger {
    background: var(--erp-danger);
    color: #fff;
    border-radius: var(--erp-radius);
    border: none;
}

/* -------------------------------------------------------------------------
   Login page — flat centered card on light-gray canvas (Odoo login)
   ------------------------------------------------------------------------- */
body .container-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

html body:has(.login_wrapper) {
    background-image: none !important;
    background-color: var(--erp-gray-100) !important;
}

.container-center + input,
.login_wrapper {
    width: 100%;
    max-width: 420px;
}

.login_wrapper {
    box-shadow: 0 2px 10px rgba(33, 37, 41, .08) !important;
    border-radius: var(--erp-radius-lg) !important;
    padding: 28px 28px 24px !important;
    border: 1px solid var(--erp-border);
    background: var(--erp-view-bg) !important;
}

.login_wrapper .panel-heading {
    border: none;
    background: transparent;
    padding: 0 0 6px;
}

.login_wrapper .view_header i.pe-7s-unlock {
    color: var(--erp-primary) !important;
}

.login_wrapper .view_header h3 {
    color: var(--erp-heading);
    margin: 2px 0;
}

.login_wrapper .btn-success {
    width: 100%;
    padding: 9px;
    font-size: 14px;
    font-weight: var(--erp-fw-bold);
    border-radius: var(--erp-radius);
    margin-top: 4px;
}

.login_wrapper a .text-right {
    color: var(--erp-primary-dark);
}

/* -------------------------------------------------------------------------
   POS surface
   ------------------------------------------------------------------------- */
.pos-btn {
    border-radius: var(--erp-radius);
}

.content.p-0 {
    background: var(--erp-app-bg);
}

/* -------------------------------------------------------------------------
   Misc surfaces
   ------------------------------------------------------------------------- */
hr {
    border-top: 1px solid var(--erp-gray-200);
    margin: 16px 0;
}

.nav-tabs {
    border-bottom: 1px solid var(--erp-border);
}

.nav-tabs > li > a {
    border-radius: 0;
    color: var(--erp-muted);
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    margin-right: 2px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--erp-primary-dark);
    border: none;
    border-bottom: 2px solid var(--erp-primary);
    background: transparent;
}

.nav-tabs > li > a:hover {
    background: var(--erp-gray-100);
    border-color: transparent;
    border-bottom: 2px solid var(--erp-gray-400);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--erp-primary);
}

.progress-bar {
    background-color: var(--erp-primary);
}

.well {
    background: var(--erp-gray-100);
    border-color: var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: none;
}

.dropdown-menu {
    border-radius: var(--erp-radius);
    border-color: var(--erp-border);
    box-shadow: var(--erp-shadow-overlay);
}

/* jsTree (chart of accounts) */
.jstree-default .jstree-clicked,
.jstree-default .jstree-wholerow-clicked {
    background: var(--erp-primary-tint-2) !important;
    box-shadow: none;
    border-radius: var(--erp-radius-sm);
}

.jstree-default .jstree-hovered,
.jstree-default .jstree-wholerow-hovered {
    background: var(--erp-gray-100) !important;
    box-shadow: none;
    border-radius: var(--erp-radius-sm);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* Collapsed mini-sidebar geometry stays AdminLTE's 50px */
    .sidebar-mini.sidebar-collapse .main-header .navbar {
        margin-left: 50px;
    }
}

@media (max-width: 991px) {
    .top-fixed-link {
        display: none;
    }
}

@media (max-width: 767px) {
    /* Header stacks: logo row + nav row */
    .main-header .logo {
        width: 100%;
        height: var(--erp-header-h);
    }

    .main-header .navbar {
        margin-left: 0;
    }

    .main-sidebar,
    .left-side {
        padding-top: calc(var(--erp-header-h) * 2);
    }

    .content-wrapper > .content {
        padding: 0 12px 14px;
    }

    .breadcrumb {
        margin: 0 -12px 14px;
        padding: 9px 12px;
    }

    .small-box h4,
    .small-box h3 {
        font-size: 24px;
    }

    .panel-body,
    .box-body {
        padding: 12px;
    }

    body.sidebar-open .main-sidebar {
        box-shadow: var(--erp-shadow-overlay);
    }
}

@media (max-width: 480px) {
    .dt-buttons .dt-button {
        margin-bottom: 5px;
    }

    .modal-dialog {
        margin: 10px;
    }
}

/* =========================================================================
   LAYOUT REVAMP — horizontal navigation chassis
   The left sidebar becomes a full-width nav strip under the header with
   hover dropdown panels. Same markup, same permission logic, same JS —
   only repositioned. Appended last so it wins the cascade.
   ========================================================================= */

/* AdminLTE clips the page at .wrapper — dropdowns need to escape it */
.wrapper {
    overflow: visible;
}

/* Header becomes a single flex row; brand cell shrinks to fit */
.main-header {
    display: flex;
    align-items: stretch;
}

.main-header .logo {
    width: auto !important;
    min-width: 0;
    padding: 0 20px !important;
}

.main-header .navbar {
    flex: 1;
    margin-left: 0 !important;
}

/* No sidebar to toggle anymore */
.main-header .sidebar-toggle {
    display: none !important;
}

/* The old sidebar container → full-width nav strip in normal flow */
.main-sidebar,
.left-side {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--erp-gray-200);
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    z-index: 990;
    overflow: visible !important;
}

.main-sidebar .sidebar {
    padding-bottom: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* User identity lives in the header now */
.main-sidebar .user-panel {
    display: none !important;
}

/* Content spans the full width */
.content-wrapper,
.right-side,
.main-footer {
    margin-left: 0 !important;
}

/* ---- menu bar ---- */
.sidebar-menu {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 0 16px !important;
    overflow: visible !important;
}

.sidebar-menu > li {
    margin: 0 !important;
    position: relative;
}

.sidebar-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    height: auto !important;
    padding: 12px 13px !important;
    border-radius: 0 !important;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--erp-gray-700) !important;
    white-space: nowrap;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 transparent !important;
    transition: color .12s ease, box-shadow .12s ease;
}

.sidebar-menu > li > a > i,
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > [class^="pe-7s"],
.sidebar-menu > li > a > [class^="ti-"],
.sidebar-menu > li > a > .metismenu-icon {
    width: auto !important;
    min-width: 0 !important;
    margin-right: 7px !important;
    font-size: 15px !important;
    color: var(--erp-gray-500);
}

.sidebar-menu > li > a > span {
    flex: none !important;
}

/* caret sits inline after the label, pointing down */
.sidebar-menu > li > a .pull-right-container {
    position: static !important;
    margin-left: 5px;
}

.sidebar-menu .pull-right-container .fa-angle-left {
    transform: rotate(-90deg);
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.menu-open > a,
.sidebar-menu > li.active > a {
    background: transparent !important;
    color: var(--erp-primary-dark) !important;
    box-shadow: inset 0 -2px 0 var(--erp-primary) !important;
}

.sidebar-menu > li:hover > a > i,
.sidebar-menu > li:hover > a > [class^="pe-7s"],
.sidebar-menu > li:hover > a > [class^="ti-"],
.sidebar-menu > li.active > a > i,
.sidebar-menu > li.active > a > [class^="pe-7s"],
.sidebar-menu > li.active > a > [class^="ti-"],
.sidebar-menu > li.active > a > .metismenu-icon {
    color: var(--erp-primary) !important;
}

/* ---- dropdown panels ---- */
.sidebar-menu > li > .treeview-menu {
    position: absolute !important;
    left: 0;
    top: 100%;
    min-width: 250px;
    max-width: min(340px, 92vw);
    margin: 0 !important;
    padding: 6px !important;
    background: #fff !important;
    border: 1px solid var(--erp-gray-200) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16) !important;
    z-index: 995;
}

.sidebar-menu > li:hover > .treeview-menu {
    display: block;
}

.sidebar-menu .treeview-menu > li > a {
    display: flex !important;
    align-items: center;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--erp-gray-700) !important;
    box-shadow: none !important;
}

.sidebar-menu .treeview-menu > li > a:hover {
    background: var(--erp-gray-100) !important;
    color: var(--erp-gray-900) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
    background: #eff6ff !important;
    color: var(--erp-primary-dark) !important;
    font-weight: 500;
}

/* nested groups fly out to the side */
.sidebar-menu .treeview-menu .treeview {
    position: relative;
}

.sidebar-menu .treeview-menu .treeview > a .pull-right-container {
    position: static !important;
    margin-left: auto;
}

.sidebar-menu .treeview-menu .treeview > .treeview-menu {
    position: absolute !important;
    left: 100% !important;
    right: auto !important;
    top: -7px !important;
    min-width: 240px;
    margin: 0 !important;
    padding: 6px !important;
    background: #fff !important;
    border: 1px solid var(--erp-gray-200) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16) !important;
}

.sidebar-menu .treeview-menu .treeview:hover > .treeview-menu {
    display: block;
}

.sidebar-menu .treeview-menu .treeview-menu > li > a {
    padding: 8px 12px !important;
}

/* dropdowns near the right edge open leftwards */
.sidebar-menu > li:nth-last-child(-n+4) > .treeview-menu {
    left: auto;
    right: 0;
}

.sidebar-menu > li:nth-last-child(-n+4) .treeview-menu .treeview > .treeview-menu {
    left: auto !important;
    right: 100% !important;
}

/* ---- small screens: menu wraps; panels open on tap (AdminLTE JS) ---- */
@media (max-width: 767px) {
    .main-header {
        display: block;
    }

    .main-header .logo {
        width: 100% !important;
        justify-content: center;
    }

    .main-sidebar,
    .left-side {
        transform: none !important;
    }

    .sidebar-menu {
        padding: 0 6px !important;
    }

    .sidebar-menu > li > a {
        padding: 10px 10px !important;
        font-size: 13px;
    }

    .sidebar-menu > li > .treeview-menu {
        max-width: 94vw;
    }
}

/* =========================================================================
   LOGIN — split-screen brand panel
   ========================================================================= */
@media (min-width: 992px) {
    body:has(#loginForm) {
        background: #fff !important;
    }

    body:has(#loginForm)::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 45vw;
        background:
            radial-gradient(620px 420px at 18% 22%, rgba(255, 255, 255, .16), transparent 60%),
            radial-gradient(520px 520px at 85% 88%, rgba(255, 255, 255, .12), transparent 60%),
            linear-gradient(155deg, #2563eb 0%, #1d4ed8 55%, #1e3a8a 100%);
    }

    body:has(#loginForm) .container-center {
        margin: 0 0 0 45vw !important;
        width: 55vw;
        max-width: none !important;
        padding: 24px 4vw;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body:has(#loginForm) .login_wrapper {
        border: none;
        box-shadow: none !important;
        max-width: 400px;
    }
}


/* =========================================================================
   DE-GREEN — neutralize every legacy green remnant
   ========================================================================= */
.bg-success,
.bg-green:not(.small-box) {
    background-color: #eff6ff !important;
    color: #1e40af !important;
}

.text-green {
    color: var(--erp-primary-dark) !important;
}

/* chart-of-accounts tree */
.tree li a:hover,
.tree li a:hover i,
.tree li button:hover {
    color: var(--erp-primary-dark) !important;
}

.tree ul:before,
.tree ul li:before {
    border-color: var(--erp-gray-300) !important;
}

/* SweetAlert success dialogs */
.sweet-alert .sa-icon.sa-success {
    border-color: rgba(37, 99, 235, .35) !important;
}

.sweet-alert .sa-icon.sa-success .sa-line {
    background-color: var(--erp-primary) !important;
}

.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-placeholder {
    border-color: rgba(37, 99, 235, .2) !important;
}

.sweet-alert button.confirm {
    background-color: var(--erp-primary) !important;
    box-shadow: none !important;
}

/* toastr success */
#toast-container > .toast-success {
    background-color: var(--erp-primary) !important;
}

/* login page: kill the legacy greenish body gradient at every width */
body:has(#loginForm),
body:has(.login_wrapper) {
    background-image: none !important;
    background-color: var(--erp-gray-100);
}

/* bootstrap-toggle "on" state */
.toggle.btn-success,
.toggle .toggle-on.btn-success {
    background: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}

/* =========================================================================
   PRIORITY NAV — compact single-row module bar + "More" overflow
   ========================================================================= */
/* tighter items on smaller laptops so more fit before overflowing */
@media (max-width: 1680px) {
    .sidebar-menu > li > a {
        padding: 12px 10px !important;
        font-size: 13px;
    }

    .sidebar-menu > li > a > i,
    .sidebar-menu > li > a > [class^="pe-7s"],
    .sidebar-menu > li > a > [class^="ti-"],
    .sidebar-menu > li > a > .metismenu-icon {
        margin-right: 6px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 1440px) {
    .sidebar-menu > li > a {
        padding: 12px 8px !important;
        font-size: 12.5px;
    }

    .sidebar-menu > li > a .pull-right-container {
        margin-left: 3px;
    }
}

/* the generated "More" entry looks like every other module entry */
.sidebar-menu > li.nav-more > a {
    color: var(--erp-gray-700) !important;
}

.sidebar-menu > li.nav-more > .treeview-menu {
    left: auto;
    right: 0;
    min-width: 240px;
}

/* module items that were moved into "More": give their icons a column */
.sidebar-menu .treeview-menu > li > a > i,
.sidebar-menu .treeview-menu > li > a > [class^="pe-7s"],
.sidebar-menu .treeview-menu > li > a > [class^="ti-"],
.sidebar-menu .treeview-menu > li > a > .metismenu-icon {
    width: 22px;
    min-width: 22px;
    margin-right: 8px;
    font-size: 14px;
    text-align: center;
    color: var(--erp-gray-500);
}

/* their submenus fly out to the LEFT (More sits at the right edge) */
.sidebar-menu > li.nav-more .treeview-menu .treeview > .treeview-menu {
    left: auto !important;
    right: 100% !important;
}