/* ==========================================================================
   Modern admin theme overlay
   --------------------------------------------------------------------------
   Loaded LAST (after bootstrap, theme.css, style.css, all.css, light.css) so
   it can restyle the existing markup without any HTML/view changes. Reuses
   the accent palette already introduced in dasboard_views/mobilephone_dashboard.php
   so the dashboard and the rest of the panel feel like one product.
   See docs/knowledge/ADMIN_MODERNIZATION.md for what this does and does not
   cover, and why a CSS-only pass was chosen over rewriting every view.
   ========================================================================== */

:root {
    --mp-primary: #2f6fed;
    --mp-primary-dark: #1f56c4;
    --mp-green: #1e9e52;
    --mp-purple: #7a4ce0;
    --mp-orange: #e07b12;
    --mp-red: #d23b3b;
    --mp-teal: #13918f;
    --mp-ink: #1c2430;
    --mp-muted: #6c757d;
    --mp-border: #e4e7ec;
    --mp-bg: #f4f6f9;
    --mp-surface: #ffffff;
    --mp-radius: 12px;
    --mp-radius-sm: 8px;
    --mp-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 10px rgba(16, 24, 40, 0.06);
    --mp-shadow-hover: 0 4px 16px rgba(16, 24, 40, 0.10);
}

body {
    background: var(--mp-bg) !important;
    color: var(--mp-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------- */
/* Topbar - light, airy bar matching the white sidebar: flex layout,      */
/* rounded icon buttons, pill quick-links, round avatar, card dropdowns.  */
/* Scoped to #header so other .navbar markup (POS screen etc.) is left    */
/* alone. Height stays in sync with .sidebar-fixed's top offset below.    */
/* ---------------------------------------------------------------------- */
:root {
    --mp-topbar-h: 56px;
    --mp-topbar-icon: #5b6577;
}

#header.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border: none !important;
    border-bottom: 1px solid var(--mp-border) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    min-height: var(--mp-topbar-h);
    z-index: 1030;
}

#header > .container {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--mp-topbar-h);
    padding: 0 16px;
}

/* the fixed ("locked") layout pins the sidebar right under the topbar */
.sidebar-fixed {
    top: var(--mp-topbar-h) !important;
}

@media (min-width: 768px) {
    #header .header-nav {
        display: flex;
        align-items: center;
        background: transparent !important;
        color: var(--mp-ink) !important;
    }

    /* right-hand group: the avatar <ul> comes first in the markup but
       should sit at the far right, so reverse the row */
    #header .header-nav:last-child {
        margin-left: auto;
        flex-direction: row-reverse;
        gap: 6px;
    }
}

/* style.css forces every .hidden-* element to display:inline-block
   !important on desktop; the quick-link strip and the alert/notification
   <li>s carry hidden-sm, so they need an !important flex to lay out */
@media (min-width: 992px) {
    #header .user_menu,
    #header .navbar-nav > li.hidden-sm {
        display: flex !important;
        align-items: center;
    }
}

#header .navbar-nav {
    display: flex;
    align-items: center;
    float: none !important;
    margin: 0;
    max-height: none !important;
}

#header .navbar-nav > li {
    float: none;
    display: flex;
    align-items: center;
}

/* brand */
#header a.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 0 4px 0 0 !important;
    float: none;
}

#header a.navbar-brand .logo {
    color: var(--mp-ink) !important;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

#header a.navbar-brand .nav-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(30, 158, 82, 0.10);
    color: var(--mp-green) !important;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

#header a.navbar-brand .nav-live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-green);
    box-shadow: 0 0 0 3px rgba(30, 158, 82, 0.18);
}

/* sidebar collapse (bars) + lock buttons next to the brand */
#header .nav-sidebar-tools {
    gap: 2px;
    margin-left: 6px;
}

#header a#main-menu-act,
#header a#fixed {
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 10px;
    text-align: center;
    line-height: 36px;
    transition: background-color 0.15s ease;
}

#header a#fixed {
    display: inline-block;
}

#header a#main-menu-act i,
#header a#fixed i {
    position: static;
    margin: 0;
    width: auto;
    height: auto;
    padding: 0;
    background: none !important;
    border: none !important;
    color: var(--mp-topbar-icon) !important;
    font-size: 18px;
    line-height: 36px;
}

#header a#fixed i {
    font-size: 15px;
}

#header a#main-menu-act:hover,
#header a#fixed:hover,
#header a#fixed.fixed {
    background: rgba(47, 111, 237, 0.10);
}

#header a#main-menu-act:hover i,
#header a#fixed:hover i,
#header a#fixed.fixed i {
    color: var(--mp-primary) !important;
}

/* quick-link pills (user-configurable custom menu) */
#header .user_menu {
    position: static !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 0 0 12px !important;
    padding-left: 12px;
    border-left: 1px solid var(--mp-border);
    overflow-x: auto;
    scrollbar-width: none;
    /* fade the last pill out when the strip overflows */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 24px;
}

#header .user_menu::-webkit-scrollbar {
    display: none;
}

#header .user_menu .user_menu_settings {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--mp-topbar-icon) !important;
    font-size: 15px;
}

#header .user_menu .user_menu_settings:hover {
    background: rgba(47, 111, 237, 0.10);
    color: var(--mp-primary) !important;
}

#header .user_menu a.quick_icons {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: 999px;
    background: var(--mp-surface) !important;
    color: #3b4454 !important;
    font-size: 12.5px !important;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#header .user_menu a.quick_icons:hover {
    background: rgba(47, 111, 237, 0.08) !important;
    border-color: rgba(47, 111, 237, 0.35) !important;
    color: var(--mp-primary) !important;
}

/* round icon buttons on the right (sync, cache, closing date, alerts...) */
#header .header-nav a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    height: 38px;
    min-width: 38px;
    margin: 0 1px;
    padding: 0 9px !important;
    border: none !important;
    border-radius: 10px;
    background: transparent !important;
    color: var(--mp-topbar-icon) !important;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#header .header-nav a.btn i,
#header .header_notification a i {
    margin: 0;
    font-size: 18px !important;
    color: inherit;
}

#header .header-nav a.btn:hover,
#header .navbar-nav > li.open > a[data-toggle="dropdown"],
#header .navbar-nav > li.dropdown.open > .dropdown-toggle,
#header .navbar-nav > li.dropdown.active > .dropdown-toggle {
    background: rgba(47, 111, 237, 0.10) !important;
    color: var(--mp-primary) !important;
}

#header .header_notification {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* closing-date chip shown next to its icon */
#header .header-nav a.btn .label {
    font-size: 10px !important;
    padding: 2px 6px;
    margin: 0 !important;
}

/* count badges (info + envelope): small red pill on the icon's corner */
#header .header-nav a.btn .number,
#header .header-nav a.btn .badge-counter {
    position: absolute !important;
    top: 3px !important;
    right: 2px !important;
    min-width: 17px;
    height: 17px;
    width: auto;
    padding: 0 4px;
    border-radius: 999px !important;
    border: 2px solid var(--mp-surface);
    background: var(--mp-red) !important;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
}

/* account button: round avatar with a soft ring */
#header .header-nav a.btn.account {
    height: 44px;
    padding: 0 4px !important;
    margin-left: 6px;
    border-radius: 999px;
}

#header .header-nav a.btn.account .mini_avatar {
    float: none;
    width: 34px;
    height: 34px;
    max-height: 34px !important;
    margin: 0 !important;
    object-fit: cover;
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px var(--mp-surface), 0 0 0 3px var(--mp-border);
}

#header .header-nav a.btn.account:hover .mini_avatar,
#header li.open > a.btn.account .mini_avatar {
    box-shadow: 0 0 0 2px var(--mp-surface), 0 0 0 3px var(--mp-primary);
}

#header .header-nav a.btn.account:hover {
    background: transparent !important;
}

/* dropdowns: floating card instead of the square Bootstrap 3 menu */
#header .dropdown-menu {
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    min-width: 220px;
}

#header .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--mp-radius-sm);
    color: var(--mp-ink);
    font-size: 13px;
    white-space: nowrap;
}

#header .dropdown-menu > li > a > span[style*="padding-right"] {
    order: -1;
    flex: 1;
}

#header .dropdown-menu > li > a .label {
    margin: 0 0 0 auto !important;
    float: none !important;
    order: 2;
    border-radius: 999px;
}

#header .dropdown-menu > li > a i {
    width: 18px;
    color: var(--mp-muted);
}

#header .dropdown-menu > li > a:hover,
#header .dropdown-menu > li > a:focus {
    background: rgba(47, 111, 237, 0.08);
    color: var(--mp-primary);
}

#header .dropdown-menu > li > a:hover i {
    color: var(--mp-primary);
}

#header .dropdown-menu .divider {
    margin: 6px 4px;
    background: var(--mp-border);
}

#header .dropdown-menu .dropdown-header {
    padding: 6px 10px;
    color: var(--mp-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* notifications panel (login / other tabs) */
#header .notification_head {
    padding: 10px !important;
}

#header .notification_head .tab-btn {
    border-radius: var(--mp-radius-sm);
}

#header .notification_head .tab-btn.btn-primary {
    background: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
}

#header .notification_head .tab-btn.btn-secondary {
    background: #eef1f5 !important;
    border-color: #eef1f5 !important;
    color: #3b4454 !important;
}

#header .notification_head .login-item,
#header .notification_head #other-section > div {
    border-bottom-color: var(--mp-border) !important;
}

/* phones: the brand/right groups are hidden, only the compact button row
   shows - give it the same icon-button look on the light bar */
@media (max-width: 767px) {
    #header > .container {
        padding: 0 8px;
    }

    #header .btn-group.visible-xs.btn-visible-sm {
        position: static;
        display: flex !important;
        gap: 2px;
        width: 100%;
    }

    #header .btn-group.visible-xs.btn-visible-sm .btn,
    #header .btn-group.visible-xs.btn-visible-sm .navbar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none !important;
        width: 40px !important;
        height: 40px;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    #header .btn-group.visible-xs.btn-visible-sm .navbar-toggle {
        margin-right: auto !important;
    }

    #header .btn-group.visible-xs.btn-visible-sm .fal {
        color: var(--mp-topbar-icon) !important;
        font-size: 18px;
    }

    #header .btn-group.visible-xs.btn-visible-sm .btn:active {
        background: rgba(47, 111, 237, 0.10) !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Sidebar - clean white rail, monochrome: gray icons, one accent blue   */
/* for hover/active, soft gray row hover, accent bar on the active        */
/* section. footer.php's hover JS adds the module's .cloudpos-* gradient  */
/* class to the <a> on hover/active - background-image:none below         */
/* neutralizes it on rows and icons. See ADMIN_MODERNIZATION.md.          */
/* ---------------------------------------------------------------------- */
.lt td.sidebar-con {
    background-color: var(--mp-surface) !important;
    box-shadow: inset -1px 0 0 var(--mp-border);
}

#sidebar-left {
    background: var(--mp-surface) !important;
    padding: 6px 10px 16px !important;
}

/* search + POS shortcut row above the menu */
.lt td.sidebar-con .search_menu {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 10px 6px;
}

.lt td.sidebar-con .search_menu > div {
    float: none;
    padding: 0 !important;
}

.lt td.sidebar-con .search_menu > div:first-child {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none;
}

.lt td.sidebar-con .menu_search_input {
    height: 38px;
    width: 100%;
    padding: 0 12px 0 34px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: #f2f4f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2398a2b3' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center !important;
    box-shadow: none !important;
    color: var(--mp-ink);
    font-size: 13px;
    box-sizing: border-box;
}

.lt td.sidebar-con .menu_search_input:focus {
    background-color: var(--mp-surface) !important;
    border-color: var(--mp-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15) !important;
}

.lt td.sidebar-con .point-of-sale {
    flex: none;
    width: 38px !important;
    height: 38px;
    border-radius: 10px;
    background: var(--mp-primary) !important;
    box-shadow: 0 4px 10px -2px rgba(47, 111, 237, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lt td.sidebar-con .point-of-sale:hover {
    transform: translateY(-1px);
    background: var(--mp-primary-dark) !important;
    box-shadow: 0 6px 14px -2px rgba(47, 111, 237, 0.55);
}

.lt td.sidebar-con .point-of-sale a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    color: #fff !important;
    background: none !important;
    border: none !important;
}

.lt td.sidebar-con .point-of-sale a i {
    color: #fff !important;
    font-size: 16px;
}

/* every row, every level: neutral, rounded, no full-width module color */
#sidebar-left .main-menu li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 10px 0 5px !important;
    border: none !important;
    border-radius: 10px !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    color: #344054 !important;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar-left .main-menu li > a > .text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#sidebar-left .main-menu li > a:hover {
    background-color: #f2f4f7 !important;
    color: var(--mp-ink) !important;
}

/* top-level icon chip: monochrome. The .cloudpos-* module gradients from
   menu_adjust.css are switched off (background-image:none) - gray icon on
   a soft tile, which turns accent blue on hover and solid blue when active */
#sidebar-left .main-menu > li > a > i {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px !important;
    height: 26px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 7px;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #7a8496 !important;
    font-size: 15px !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#sidebar-left .main-menu > li > a:hover > i {
    background-color: rgba(47, 111, 237, 0.10) !important;
    color: var(--mp-primary) !important;
}

#sidebar-left .main-menu > li.active > a > i {
    background-color: var(--mp-primary) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px -2px rgba(47, 111, 237, 0.55) !important;
}

/* last item (File Manager utility link) sits apart under a divider */
#sidebar-left .main-menu > li:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mp-border);
}

/* active section: tinted row + accent bar on the rail's edge */
#sidebar-left .main-menu > li.active > a {
    background-color: rgba(47, 111, 237, 0.08) !important;
    color: var(--mp-primary) !important;
    font-weight: 600;
}

#sidebar-left .main-menu > li.active > a::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--mp-primary);
}

/* chevron: inline at the row's end, rotates when the section opens */
#sidebar-left .main-menu li > a .chevron {
    position: static !important;
    flex: none;
    width: 16px !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 9px !important;
    color: #98a2b3 !important;
    transition: transform 0.2s ease;
}

#sidebar-left .main-menu li > a .chevron.opened:after {
    content: "\f078" !important;
}

#sidebar-left .main-menu li > a .chevron.opened {
    transform: rotate(180deg);
}

#sidebar-left .main-menu li.active > a .chevron,
#sidebar-left .main-menu li > a:hover .chevron {
    color: var(--mp-primary) !important;
}

/* submenus: indented under the chip with a thin guide line instead of
   the old tree.png connector image */
#sidebar-left .tree_menu {
    background: none !important;
    margin: 0 0 4px 17px !important;
    padding: 2px 0 2px 10px !important;
    border-left: 1px solid #d9dee5 !important;
    list-style: none;
}

#sidebar-left .tree_menu > li,
#sidebar-left .tree_menu > li:first-child,
#sidebar-left .tree_menu > li:last-child {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

#sidebar-left .tree_menu > li > a {
    gap: 8px;
    height: 28px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    color: #475467 !important;
    font-size: 13px;
    font-weight: 400;
}

/* the row's own icon class may carry menu_adjust.css's height:100% and
   style.css's 9px padding, which pushed the glyph to the top - pin it */
#sidebar-left .tree_menu > li > a > i {
    position: static !important;
    float: none !important;
    flex: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #98a2b3 !important;
    font-size: 12px !important;
    text-align: center;
}

#sidebar-left .tree_menu > li > a:hover > i,
#sidebar-left .tree_menu > li.active > a > i {
    color: var(--mp-primary) !important;
}

#sidebar-left .tree_menu > li.active > a {
    background-color: rgba(47, 111, 237, 0.08) !important;
    color: var(--mp-primary) !important;
    font-weight: 600;
}

/* the guide line lights up next to the current page */
#sidebar-left .tree_menu > li.active > a::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--mp-primary);
}

#sidebar-left .sub_tree_menu {
    margin: 0 0 2px 15px !important;
}

/* collapsed (icon-only) sidebar */
#sidebar-left.minified {
    padding: 8px 4px !important;
}

#sidebar-left.minified .sidebar-nav > ul > li > a {
    width: 32px !important;
    padding: 0 1px !important;
    justify-content: center;
}

#sidebar-left.minified .main-menu > li.active > a::before {
    left: -4px;
}

#sidebar-left.minified .sidebar-nav > ul > li > a .chevron {
    display: none !important;
}

/* inside the hover flyout the submenu needs no indent/guide line */
#sidebar-left.minified .sidebar-nav > ul > li > ul.tree_menu {
    border-left: none !important;
}

#sidebar-left.minified .tree_menu > li.active > a::before {
    display: none;
}

#sidebar-left.minified .sidebar-nav > ul > li > a .text {
    left: 38px !important;
    font-weight: 600 !important;
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow-hover);
    color: var(--mp-ink) !important;
}

#sidebar-left.minified .sidebar-nav > ul > li:hover > a .text {
    display: flex !important;
    align-items: center;
    background: var(--mp-primary) !important;
    border-color: var(--mp-primary) !important;
    color: #fff !important;
}

#sidebar-left.minified .sidebar-nav > ul > li:hover > ul {
    left: 38px !important;
    margin: 0 !important;
    padding: 4px !important;
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm);
    box-shadow: var(--mp-shadow-hover);
}

/* ---------------------------------------------------------------------- */
/* Panels ("box") used by every list/form page in the app                 */
/* ---------------------------------------------------------------------- */
.box {
    border: none !important;
    border-radius: var(--mp-radius);
    box-shadow: var(--mp-shadow);
    background: var(--mp-surface);
    overflow: hidden;
}

.box .box-header {
    background: var(--mp-surface) !important;
    border-bottom: 1px solid var(--mp-border);
    height: auto;
    min-height: 48px;
    padding: 4px 4px;
}

.box .box-header h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--mp-ink);
}

.box .box-header .box-icon i.icon {
    border-left: 1px solid var(--mp-border);
    color: var(--mp-muted);
}

.box .box-header .box-icon i.icon:hover {
    color: var(--mp-primary);
}

/* The modern dashboard/report cards (.card / .card-body) that already use
   Bootstrap 5 utility classes - keep them visually consistent with .box. */
.card {
    border: none !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow);
    transition: box-shadow 0.15s ease;
}

.card:hover {
    box-shadow: var(--mp-shadow-hover);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--mp-border) !important;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
/* style.css has ".btn, .form-control { border-radius: 0 !important }" -
   everything here needs !important to win back the rounded, soft look */
.btn {
    border-radius: var(--mp-radius-sm) !important;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: transform 0.05s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.btn:hover {
    box-shadow: 0 3px 8px -2px rgba(16, 24, 40, 0.18);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18) !important;
}

.btn-lg { border-radius: 10px !important; }
.btn-xs { border-radius: 6px !important; }

/* neutral button: white with a hairline border instead of the gray box */
.btn-default {
    background: var(--mp-surface) !important;
    border: 1px solid var(--mp-border) !important;
    color: #344054 !important;
}

.btn-default:hover,
.btn-default:focus {
    background: #f8fafc !important;
    color: var(--mp-ink) !important;
}

.btn-link {
    box-shadow: none !important;
}

/* joined buttons keep square inner seams */
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
    border-radius: 0 !important;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group > .dropdown-toggle:first-child:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child),
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-primary {
    background: linear-gradient(180deg, #4f86f7 0%, var(--mp-primary) 100%) !important;
    border-color: var(--mp-primary) !important;
}

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

.btn-success { background: linear-gradient(180deg, #2bb466 0%, var(--mp-green) 100%) !important; border-color: var(--mp-green) !important; }
.btn-danger  { background: linear-gradient(180deg, #e25454 0%, var(--mp-red) 100%) !important; border-color: var(--mp-red) !important; }
.btn-warning { background: linear-gradient(180deg, #f08d2a 0%, var(--mp-orange) 100%) !important; border-color: var(--mp-orange) !important; }
.btn-info    { background: linear-gradient(180deg, #1ea8a6 0%, var(--mp-teal) 100%) !important; border-color: var(--mp-teal) !important; }

/* filled buttons always get white text/icons - many rows combine
   "btn-default btn-primary" (Actions dropdown) or wrap an <a> inside
   (FBR Retry), which otherwise inherits a dark text color */
.btn-primary, .btn-primary:hover, .btn-primary:focus,
.btn-success, .btn-success:hover, .btn-success:focus,
.btn-danger,  .btn-danger:hover,  .btn-danger:focus,
.btn-warning, .btn-warning:hover, .btn-warning:focus,
.btn-info,    .btn-info:hover,    .btn-info:focus,
.btn-primary a, .btn-success a, .btn-danger a, .btn-warning a, .btn-info a,
.btn-primary i, .btn-success i, .btn-danger i, .btn-warning i, .btn-info i,
.btn-primary .caret, .btn-success .caret, .btn-danger .caret {
    color: #fff !important;
    text-decoration: none;
}

.btn-primary .caret, .btn-success .caret, .btn-danger .caret {
    border-top-color: #fff !important;
}

/* a lone button whose next sibling is its dropdown <ul> (the Actions
   toggle) is first-child but not last-child - keep it fully round */
.btn-group > .btn:only-of-type {
    border-radius: var(--mp-radius-sm) !important;
}

.btn-group > .btn.btn-xs:only-of-type {
    border-radius: 6px !important;
}

/* row buttons inside tables (Actions, FBR Retry, view/edit...): soft
   tinted "tonal" style instead of heavy solid blocks; they fill on hover */
.table .btn-primary,
.table .btn-success,
.table .btn-danger,
.table .btn-warning,
.table .btn-info {
    padding: 4px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}

.table .btn-primary { background: #ebf1fe !important; border: 1px solid #d4e1fc !important; }
.table .btn-success { background: #e6f6ec !important; border: 1px solid #c8ebd5 !important; }
.table .btn-danger  { background: #fdeaea !important; border: 1px solid #f8d0d0 !important; }
.table .btn-warning { background: #fff1e0 !important; border: 1px solid #fbdcb6 !important; }
.table .btn-info    { background: #e3f4f4 !important; border: 1px solid #c3e6e5 !important; }

.table .btn-primary, .table .btn-primary a, .table .btn-primary i { color: #1f56c4 !important; }
.table .btn-success, .table .btn-success a, .table .btn-success i { color: #157a3f !important; }
.table .btn-danger,  .table .btn-danger a,  .table .btn-danger i  { color: #b42323 !important; }
.table .btn-warning, .table .btn-warning a, .table .btn-warning i { color: #b35c00 !important; }
.table .btn-info,    .table .btn-info a,    .table .btn-info i    { color: #0e7271 !important; }

.table .btn-primary .caret { border-top-color: #1f56c4 !important; }
.table .btn-success .caret { border-top-color: #157a3f !important; }
.table .btn-danger .caret  { border-top-color: #b42323 !important; }

.table .btn-primary:hover, .table .open > .btn-primary { background: var(--mp-primary) !important; border-color: var(--mp-primary) !important; }
.table .btn-success:hover { background: var(--mp-green) !important; border-color: var(--mp-green) !important; }
.table .btn-danger:hover  { background: var(--mp-red) !important; border-color: var(--mp-red) !important; }
.table .btn-warning:hover { background: var(--mp-orange) !important; border-color: var(--mp-orange) !important; }
.table .btn-info:hover    { background: var(--mp-teal) !important; border-color: var(--mp-teal) !important; }

.table .btn-primary:hover, .table .btn-primary:hover a, .table .btn-primary:hover i,
.table .open > .btn-primary, .table .open > .btn-primary i,
.table .btn-success:hover, .table .btn-success:hover a, .table .btn-success:hover i,
.table .btn-danger:hover,  .table .btn-danger:hover a,  .table .btn-danger:hover i,
.table .btn-warning:hover, .table .btn-warning:hover a, .table .btn-warning:hover i,
.table .btn-info:hover,    .table .btn-info:hover a,    .table .btn-info:hover i {
    color: #fff !important;
}

.table .btn-primary:hover .caret,
.table .open > .btn-primary .caret,
.table .btn-success:hover .caret,
.table .btn-danger:hover .caret {
    border-top-color: #fff !important;
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--mp-radius-sm) !important;
    border: 1px solid var(--mp-border) !important;
}

.form-control:focus {
    border-color: var(--mp-primary) !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.15) !important;
}

label.control-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mp-muted);
}

/* input groups: one soft rounded field instead of separate gray boxes
   (addon icon + input/select2 + trailing remove button) */
.input-group-addon {
    background: #f5f7fa !important;
    border: 1px solid var(--mp-border) !important;
    color: var(--mp-muted) !important;
    padding: 6px 10px !important;
}

.input-group-addon:first-child,
.input-group .form-control:first-child,
.input-group-btn:first-child > .btn,
.input-group > .select2-container:first-child .select2-selection {
    border-radius: var(--mp-radius-sm) 0 0 var(--mp-radius-sm) !important;
}

.input-group-addon:last-child,
.input-group .form-control:last-child,
.input-group-btn:last-child > .btn,
.input-group > .select2-container:last-child .select2-selection {
    border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0 !important;
}

.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child),
.input-group > .select2-container:not(:first-child):not(:last-child) .select2-selection {
    border-radius: 0 !important;
}

.input-group .form-control:only-child,
.input-group > .select2-container:only-child .select2-selection {
    border-radius: var(--mp-radius-sm) !important;
}

.input-group-addon:first-child { border-right: 0 !important; }
.input-group-addon:last-child  { border-left: 0 !important; }

/* select2: same height/feel as .form-control, soft disabled state */
.select2-container--default .select2-selection--single {
    height: 34px;
    background: var(--mp-surface);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.form-control[disabled],
.form-control[readonly] {
    background: #f8fafc !important;
    color: #667085;
}

.select2-dropdown {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(47, 111, 237, 0.10) !important;
    color: var(--mp-primary) !important;
}

/* topbar icon buttons have their own hover tile - no focus ring/shadow */
#header .btn,
#header .btn:hover,
#header .btn:focus {
    box-shadow: none !important;
}

/* other square Bootstrap 3 surfaces */
.panel {
    border: none !important;
    border-radius: var(--mp-radius) !important;
    box-shadow: var(--mp-shadow) !important;
    overflow: hidden;
}

.panel-heading {
    border-radius: 0 !important;
}

.alert {
    border-radius: var(--mp-radius-sm) !important;
}

.well {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius) !important;
    background: #f8fafc !important;
}

.popover {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14) !important;
}

.tooltip-inner {
    border-radius: 6px !important;
    padding: 5px 9px;
}

.dropdown-menu {
    border: 1px solid var(--mp-border) !important;
    border-radius: var(--mp-radius-sm) !important;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14) !important;
    padding: 4px !important;
}

.dropdown-menu > li > a {
    border-radius: 6px;
    padding: 6px 10px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: rgba(47, 111, 237, 0.08) !important;
    color: var(--mp-primary) !important;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 6px !important;
    margin: 0 2px;
    border-color: var(--mp-border) !important;
}

.img-thumbnail {
    border-radius: var(--mp-radius-sm) !important;
}

.modal-content {
    border-radius: 16px !important;
    overflow: hidden;
}

.modal-title {
    text-transform: none !important;
    font-weight: 600 !important;
}

.modal-header .close {
    opacity: 0.5;
}

/* ---------------------------------------------------------------------- */
/* Tables / DataTables                                                     */
/* ---------------------------------------------------------------------- */
.table > thead > tr > th {
    border-bottom: 2px solid var(--mp-border) !important;
    color: var(--mp-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--mp-border) !important;
}

/* style.css paints every table's first header row solid black with white
   text - replace with a light header that matches the cards */
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table-striped thead tr.primary:nth-child(odd) th {
    background-color: #f5f7fa !important;
    color: #475467 !important;
    border-color: var(--mp-border) !important;
}

.table > thead:first-child > tr:first-child > th a,
.table > thead:first-child > tr:first-child > th label {
    color: #475467 !important;
}

/* softer row hover than the old #D9EDF7 blue block */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #f3f7ff !important;
    border-color: var(--mp-border) !important;
}

.table-hover > tbody > tr:hover {
    background-color: rgba(47, 111, 237, 0.05) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--mp-radius-sm);
}

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

/* ---------------------------------------------------------------------- */
/* Badges / labels used throughout for status columns                     */
/* ---------------------------------------------------------------------- */
/* soft "pill" badges: tinted background + strong text of the same hue.
   The status columns render "label label-x badge bg-x-transparent", so
   both the .label-* and .bg-*-transparent forms are covered. */
.label,
.badge[class*="-transparent"] {
    display: inline-block;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.2px;
    text-shadow: none !important;
    white-space: nowrap;
}

.row_status,
.payment_status {
    min-width: 72px;
    text-align: center;
}

.label-success, .badge.bg-success-transparent { background: #e6f6ec !important; color: #157a3f !important; }
.label-danger,  .badge.bg-danger-transparent  { background: #fdeaea !important; color: #b42323 !important; }
.label-warning, .badge.bg-warning-transparent { background: #fff1e0 !important; color: #b35c00 !important; }
.label-info,    .badge.bg-info-transparent    { background: #e3f4f4 !important; color: #0e7271 !important; }
.label-primary, .badge.bg-primary-transparent { background: #e8effd !important; color: #1f56c4 !important; }
.label-default, .badge.bg-secondary-transparent { background: #eef1f5 !important; color: #475467 !important; }

/* ---------------------------------------------------------------------- */
/* Modals                                                                  */
/* ---------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--mp-radius);
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.25);
}

.modal-header {
    border-bottom: 1px solid var(--mp-border);
}

.modal-footer {
    border-top: 1px solid var(--mp-border);
}

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */
.login-page .login-content,
.login-page .reg-content {
    background-color: var(--mp-surface) !important;
    border-radius: var(--mp-radius);
    box-shadow: 0 10px 40px rgba(16, 24, 40, 0.18);
    padding: 28px 24px 20px;
}

.login-page .div-title {
    font-weight: 700;
    color: var(--mp-ink);
}

.login-page .btn-primary {
    width: 100%;
}

/* ---------------------------------------------------------------------- */
/* Scrollbars (webkit) - small polish, no effect if unsupported           */
/* ---------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #c7cdd6;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a9b1bd;
}