/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLmNzcyIsInNvdXJjZXMiOlsiY3VzdG9tLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9 */

/* Theme tokens — keep in sync with dropshipping-fe public/assets/css/custom-style.css :root */
:root {
    --light-blue: #08c;
    --dark-blue: #123851;
    --color-primary: var(--light-blue);
    --color-secondary: var(--dark-blue);
}

/*# sourceMappingURL=custom.css.map */
input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{

    -webkit-appearance: none;

}
.select2-container {
    z-index: 99999;
}

/* font size */
.fs-10 { font-size: 1rem !important; }
.fs-12 { font-size: 1.2rem !important; }
.fs-14 { font-size: 1.4rem !important; }
.fs-15 { font-size: 1.5rem !important; }
.fs-16 { font-size: 1.6rem !important; }
.fs-17 { font-size: 1.7rem !important; }
.fs-18 { font-size: 1.8rem !important; }
.fs-20 { font-size: 2rem !important; }
.fs-21 { font-size: 2.1rem !important; }
.fs-22 { font-size: 2.2rem !important; }
.fs-40 { font-size: 4.0rem !important; }
.fs-30 { font-size: 3.0rem !important; }
/* font size */

.border-primary-all{
    border: 1px solid #e7e7e7;
}
.border-primary-all-2px{
    border: 2px solid #e7e7e7;
}
.brimary-border-color{
    border-color: #e7e7e7!important;
}
.border-light-blue{
    border: 2px solid var(--light-blue);
}
.border-start {
    border-left: 1px solid #e7e7e7 !important;
}

.border-bottom{
    border-bottom: 1px solid #e7e7e7 !important;
}
.border-end {
    border-right: 1px solid #e7e7e7 !important;
}
/* borders end*/

/* borders radius*/
.rounded-10 {border-radius: 10px !important;}
.rounded-5{border-radius: 5px ;}

.rounded-left-radius {

    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.rounded-right-radius {

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* borders radius end*/

/* width */
.w-98{width: 98%;}


/* bg colors */
.bg-white{background: white;}
.gray-background{background: #f7f7f7;}
.primary-blue-bg{background-color: var(--light-blue)!important;}
.stats-section-bg {background-color: var(--dark-blue)!important;}


/* text color */
.text-light-blue{color: var(--light-blue) !important;}
.text-dark-blue{color: var(--dark-blue);}

#monitor {
    margin: auto;
    position: relative;
    width: 220px;
    height: 250px;
    border: 1px solid rgba(0, 0, 0, .1);
}

#monitor .screen {
    margin: auto;
    margin-top: 10px;
    width: 200px;
    height: 230px;
    background: transparent url('http://www.terminally-incoherent.com/blog/wp-content/uploads/2010/02/maketitle.jpg');
    background-size: cover;
    background-color: rgba(0, 0, 0, .2);
}
.startScan{
    animation:scan 1s infinite;
}
#monitor .scan {
    width: 100%;
    height: 10px;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    z-index: 9999;
    /* -moz-animation: scan 5s infinite;
    -webkit-animation: scan 5s infinite; */
    -webkit-animation-direction: alternate-reverse;
    box-shadow: 0px 0px 30px rgba(255, 204, 102, .5);
}
.modal{
    overflow-y: scroll;
}
@-webkit-keyframes scan {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(210px);
        transform: translateY(240px);
    }
}

/* -------------------------------------------------------------------------- */
/* Stisla: `.main-sidebar,.navbar,…{ transition:all }` animates navbar `left`   */
/* when the sidebar opens/closes — keep layout beside sidebar, no horizontal slide */
/* -------------------------------------------------------------------------- */
#app .main-wrapper > .navbar-bg,
#app .main-wrapper > nav.main-navbar {
    transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

/* Sidebar brand: wide logo when expanded; square mark only when collapsed */
#app .main-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.65rem;
    overflow: hidden;
}

#app .main-sidebar .sidebar-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
}

#app .main-sidebar .sidebar-brand-img--icon {
    display: none;
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

#app .main-sidebar .sidebar-brand-img--full {
    max-height: 44px;
    max-width: min(140px, 72%);
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 1;
}

#app .main-sidebar .sidebar-brand .logo-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
}

body.sidebar-mini #app .main-sidebar .sidebar-brand-img--full,
body.sidebar-mini #app .main-sidebar .sidebar-brand .logo-name {
    display: none !important;
}

body.sidebar-mini #app .main-sidebar .sidebar-brand-img--icon {
    display: block !important;
}

body.sidebar-mini #app .main-sidebar .sidebar-brand {
    padding: 0.5rem 0.35rem;
}

/* -------------------------------------------------------------------------- */
/* CMS admin top navbar — layout & polish                                      */
/* -------------------------------------------------------------------------- */
.cms-admin-navbar.main-navbar {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    min-height: 64px;
    padding-top: 0;
    padding-bottom: 0;
    flex-wrap: nowrap;
    /* width: 100%; */
    overflow: visible !important;
}

.cms-admin-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
    box-sizing: border-box;
    overflow: visible !important;
}

.cms-admin-navbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
}

.cms-admin-toolbar {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0.15rem;
}

.cms-admin-toolbar .nav-item {
    list-style: none;
}

/* Stisla .navbar .nav-link uses height:100% and padding !important — needs higher specificity */
.cms-admin-navbar.navbar .nav-link.nav-link-lg.cms-header-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box;
    border-radius: 10px;
    color: #34395e !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.cms-admin-navbar.navbar .nav-link.nav-link-lg.cms-header-icon-btn:hover {
    background-color: rgba(103, 119, 239, 0.1);
    color: #6777ef !important;
}

.cms-admin-navbar.navbar .nav-link.nav-link-lg.cms-header-icon-btn svg,
.cms-admin-navbar.navbar .nav-link.nav-link-lg.cms-header-icon-btn .feather {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2;
    color: inherit !important;
    stroke: currentColor !important;
}

.cms-admin-navbar.navbar .nav-link.nav-link-lg.cms-header-icon-btn i {
    font-size: 18px !important;
    line-height: 1 !important;
    margin-left: 0 !important;
    vertical-align: middle;
}

.cms-admin-context {
    flex: 1 1 0%;
    min-width: 0;
    margin-left: 0.75rem;
    padding-left: 1rem;
    border-left: 1px solid #e8e8e8;
    overflow: hidden;
}

.cms-admin-context-text {
    min-width: 0;
    overflow: hidden;
}

.cms-admin-brand-mark {
    display: none;
    width: 4px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(180deg, #6777ef 0%, #95a0f5 100%);
    margin-right: 0.75rem;
}

@media (min-width: 768px) {
    .cms-admin-brand-mark {
        display: block;
    }
}

.cms-admin-context-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #98a6ad;
    line-height: 1.2;
    margin-bottom: 2px;
}

.cms-role-pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #6777ef;
    background: rgba(103, 119, 239, 0.12);
    border: 1px solid rgba(103, 119, 239, 0.25);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    line-height: 1.3;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.cms-admin-navbar-right {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    margin: 0;
    margin-left: auto;
    padding: 0;
    list-style: none;
    gap: 0.25rem;
    overflow: visible !important;
}

.cms-admin-navbar-right .nav-item {
    list-style: none;
}

.cms-admin-navbar-right > li.dropdown {
    overflow: visible !important;
}

#app .cms-admin-navbar .cms-admin-navbar-right .dropdown-menu {
    z-index: 1055 !important;
}

.cms-header-notif-trigger .far.fa-bell {
    font-size: 1.15rem;
}

.cms-header-notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.125rem;
    text-align: center;
    color: #fff;
    background: #fc544b;
    border-radius: 9px;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cms-header-notif-badge--hidden {
    display: none !important;
}

.cms-notif-dropdown {
    width: min(380px, calc(100vw - 2rem));
    max-height: min(440px, 70vh);
    padding: 0;
    margin-top: 0.5rem;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.cms-notif-dropdown-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    background: #fafbfc;
    border-bottom: 1px solid #eef0f2;
}

.cms-notif-dropdown-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
}

.cms-notif-dropdown-sub {
    margin-top: 0.15rem !important;
}

.cms-notif-dropdown-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.cms-notif-empty {
    padding: 2rem 1rem !important;
}

.cms-notif-item {
    position: relative;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    border-bottom: 1px solid #f1f3f5;
    transition: background-color 0.12s ease;
}

.cms-notif-item:last-child {
    border-bottom: none;
}

.cms-notif-item:hover {
    background-color: #fafbfc;
}

.cms-notif-item-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-right: 1.5rem;
}

.cms-notif-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0f2f5;
    font-size: 0.9rem;
}

.cms-notif-title {
    display: block;
    font-size: 0.875rem;
    color: #34395e;
    margin-bottom: 0.2rem;
}

.cms-notif-message {
    line-height: 1.4;
}

.cms-notif-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-weight: 500;
    color: #6777ef;
}

.cms-notif-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.cms-notif-dismiss {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: #98a6ad;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.cms-notif-dismiss:hover {
    background: #e9ecef;
    color: #34395e;
}

.cms-header-user {
    display: inline-flex !important;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.5rem 0.35rem 0.35rem !important;
    border-radius: 10px;
    max-width: min(240px, 42vw);
    min-width: 0;
    transition: background-color 0.15s ease;
}

.cms-header-user:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.cms-header-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.cms-header-user-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #34395e;
    line-height: 1.2;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-header-user-role {
    line-height: 1.2;
    text-transform: capitalize;
}

.cms-user-dropdown {
    min-width: 240px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0;
    overflow: hidden;
    margin-top: 0.5rem;
}

.cms-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.85rem;
    background: linear-gradient(135deg, #fafbfc 0%, #f4f6f8 100%);
    border-bottom: 1px solid #eef0f2;
}

.cms-user-dropdown-avatar {
    border-radius: 12px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cms-user-dropdown .dropdown-item {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
}

.cms-user-dropdown .dropdown-item.has-icon i {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.5rem;
}

/* --- Sidebar count badges (.badge.headerBadge1) — replaces legacy inline styles --- */
#app .main-sidebar .sidebar-menu a.nav-link {
    position: relative;
}

#app .main-sidebar .badge.headerBadge1 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff !important;
    background: linear-gradient(145deg, #5a67d8 0%, #6777ef 48%, #7c8ef0 100%) !important;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(55, 65, 150, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Dashboard "Published catalog" counts — match sidebar .headerBadge1; keep clear space on the right */
#app .admin-dashboard .dashboard-catalog-list .badge.headerBadge1 {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0.12rem 0.42rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    color: #fff !important;
    background: linear-gradient(145deg, #5a67d8 0%, #6777ef 48%, #7c8ef0 100%) !important;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(55, 65, 150, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 10px;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > .badge.headerBadge1,
#app .main-sidebar.sidebar-nav--professional .sidebar-menu .dropdown-menu li > a.nav-link > .badge.headerBadge1 {
    margin-left: auto;
}

/* Stisla: `.main-sidebar .sidebar-menu li a span { width:100% }` breaks flex rows (pushes badges, chevrons). */
#app .main-sidebar .sidebar-menu li a span {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
    box-sizing: border-box;
    margin-right: 10px;
}

/* --- Sidebar: aligned icons (flex: works with has-dropdown ::after + mini mode) --- */
#app .main-sidebar.sidebar-nav--professional .sidebar-menu li a.nav-link i {
    margin-right: 0 !important;
}

/* Top-level rows: fixed icon column + label + badges (grid broke chevrons / mini layout) */
#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.75rem;
    position: relative;
    min-height: 42px;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > i:first-child,
#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > svg:first-child {
    flex: 0 0 1.375rem;
    width: 1.375rem !important;
    min-width: 1.375rem !important;
    max-width: 1.375rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > svg:first-child {
    height: 1.125rem !important;
    width: 1.125rem !important;
    min-width: 1.125rem !important;
    max-width: 1.125rem !important;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span:not(.badge):not(.headerBadge1) {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span.badge,
#app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span.headerBadge1 {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Submenu rows: flex so bare text + badges still align */
#app .main-sidebar.sidebar-nav--professional .sidebar-menu .dropdown-menu li > a.nav-link {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.65rem;
    position: relative;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu .dropdown-menu li > a.nav-link > i:first-child,
#app .main-sidebar.sidebar-nav--professional .sidebar-menu .dropdown-menu li > a.nav-link > svg:first-child {
    flex: 0 0 1.375rem;
    width: 1.375rem !important;
    min-width: 1.375rem !important;
    max-width: 1.375rem !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

#app .main-sidebar.sidebar-nav--professional .sidebar-menu .dropdown-menu li > a.nav-link > svg:first-child {
    height: 1.125rem !important;
    width: 1.125rem !important;
    min-width: 1.125rem !important;
    max-width: 1.125rem !important;
}

/*
 * Collapsed sidebar (mini): Stisla uses z-index:1 on .main-sidebar — flyouts sit under .main-content.
 * Raise the rail + menus above section content (still below modals ~9999).
 */
body.sidebar-mini #app .main-sidebar {
    z-index: 1050 !important;
}

body.sidebar-mini #app .main-sidebar .sidebar-menu > li,
body.sidebar-mini #app .main-sidebar .sidebar-menu li.dropdown {
    position: relative;
}

body.sidebar-mini #app .main-sidebar .sidebar-menu ul.dropdown-menu {
    z-index: 1100 !important;
}

body.sidebar-mini #app .main-sidebar .sidebar-menu ul.dropdown-menu ul.dropdown-menu {
    z-index: 1110 !important;
}

/* Mini rail: center icons, hide labels we style (theme also hides some via .hide-sidebar-mini) */
body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link {
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
    min-height: 44px;
}

body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span:not(.badge):not(.headerBadge1) {
    display: none !important;
}

body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > i:first-child,
body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > svg:first-child {
    flex: 0 0 auto !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    max-width: 1.25rem !important;
    font-size: 1.1rem !important;
}

body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span.badge,
body.sidebar-mini #app .main-sidebar.sidebar-nav--professional .sidebar-menu > li > a.nav-link > span.headerBadge1 {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    margin-left: 0 !important;
    min-width: 1.05rem;
    min-height: 1.05rem;
    padding: 0.08rem 0.3rem;
    font-size: 0.5625rem;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(40, 50, 120, 0.35);
}

/* --------------------------------------------------------------------------
   Full-page boot loader (Stisla): CSS spinner + top strip, no GIF
   -------------------------------------------------------------------------- */
body > .loader {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999998 !important;
    margin: 0 !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
    background-image: none !important;
}

body > .loader::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 3px solid #e2e8f0;
    border-top-color: var(--light-blue);
    border-radius: 50%;
    animation: huma-cms-loader-spin 0.7s linear infinite;
}

body > .loader::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--light-blue), var(--dark-blue), transparent);
    background-size: 200% 100%;
    animation: huma-cms-loader-topstrip 1.2s linear infinite;
}

@keyframes huma-cms-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes huma-cms-loader-topstrip {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Axios pending requests (see resources/js/helpers/humaRequestProgress.js) */
body.huma-request-loading::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    z-index: 999999;
    pointer-events: none;
    background: linear-gradient(90deg, var(--dark-blue), var(--light-blue), var(--dark-blue));
    background-size: 200% 100%;
    animation: huma-cms-loader-topstrip 1s linear infinite;
}

/* Vue: fixed top progress (non-blocking; pair with is-active) */
.huma-top-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 999997;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.huma-top-progress.is-active {
    opacity: 1;
    visibility: visible;
}

.huma-top-progress__bar {
    height: 100%;
    width: 32%;
    max-width: 280px;
    background: linear-gradient(90deg, var(--light-blue), #3db8ff);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(0, 136, 204, 0.4);
    animation: huma-top-progress-slide 1.05s ease-in-out infinite;
}

@keyframes huma-top-progress-slide {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(420%);
    }
}

/* CSS skeleton lists (replaces vue-content-loader) */
.huma-skeleton--list {
    padding: 0.5rem 0;
    min-height: 3.5rem;
}

.huma-skeleton__line {
    height: 0.65rem;
    border-radius: 4px;
    margin-bottom: 0.7rem;
    max-width: 100%;
    background: linear-gradient(90deg, #e8e8e8 0%, #f4f4f4 45%, #e8e8e8 90%);
    background-size: 220% 100%;
    animation: huma-skeleton-shimmer 1.15s ease-in-out infinite;
}

.huma-skeleton__line--medium {
    max-width: 72%;
}

.huma-skeleton__line--short {
    max-width: 42%;
    margin-bottom: 0;
}

@keyframes huma-skeleton-shimmer {
    0% {
        background-position: 220% 0;
    }
    100% {
        background-position: -220% 0;
    }
}

.huma-page-loading-dim {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}