@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


* {
    box-sizing: border-box;
    scrollbar-width: none;

    -ms-overflow-style: none;

}


*::-webkit-scrollbar {
    display: none;
}

/* --- Browser Autofill Fixes --- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.auth-wrapper input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    border-radius: var(--radius-md) !important;
}

.row {
    margin: 0 !important;
}


:root {
    --primary-color: #161E54;
    --primary-hover: #0d1232;
    --secondary-color: #F16D34;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #FF986A;
    --info-color: #161E54;
    --dark-bg: #090d24;
    --light-bg: #ffffff;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #475569;
    --border-color: #e2e8f0;
    --sidebar-width: 260px;
    --header-height: 64px;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-main);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    min-height: 100vh;
    min-height: 100dvh;
    /* Dynamic viewport height for mobile */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

html.modal-open,
html.sb-modal-open,
body.modal-open,
body.sb-modal-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none;
}

.modal {
    touch-action: auto !important;
}

body.auth-page,
html.auth-page {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    width: 100vw !important;
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE/Edge */
}

body.auth-page * {
    scrollbar-width: none !important;
}

body.auth-page::-webkit-scrollbar,
body.auth-page *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

a {
    text-decoration: none;
}

.navbar {
    background-color: var(--primary-color);
}


.navbar .user-name,
.navbar .username,
.navbar a,
.navbar .nav-link {
    color: white !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Utilities */
.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.text-primary-custom {
    color: var(--primary-color);
}

.bg-primary-custom {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary-custom {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-primary-custom:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* =========================================
   LAYOUT (Sidebar & Header)
   ========================================= */
#app {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    overflow: visible;
    /* Allow overflow for body scroll */
    background-color: #ffffff;
}


/* =========================================
   SIDEBAR & HEADER (Clean White Theme)
   ========================================= */
#sidebar {
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    /* Sticky for desktop, overridden to fixed on mobile */
    background: #ffffff;
    /* Reverted to White */
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
    /* Specialized Sidebar Font */
    /* transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); */
    z-index: 1030;
    /* Ensure it's above the backdrop */
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #f1f5f9;
    overflow-y: auto;
    overflow-x: hidden;
    will-change: width, transform;
    backface-visibility: hidden;
}

#sidebar .sidebar-header {
    padding: 24px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
}

#sidebar .logo-wrapper {
    width: 40px;
    height: 40px;
    background: rgba(239, 119, 34, 0.1);
    /* Primary color light */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

#sidebar .sidebar-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

#sidebar .sidebar-header small {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#sidebar ul.components {
    padding: 16px 12px;
}

#sidebar ul li {
    margin-bottom: 4px;
}

#sidebar ul li a {
    padding: 12px 16px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    color: #475569;
    /* New specialized link color */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

#sidebar ul li a span {
    transition: opacity 0.2s;
}

#sidebar ul li a i:not(.chevron-icon) {
    margin-right: 12px;
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    transition: all 0.2s;
}

#sidebar ul li a:hover {
    color: var(--primary-color);
    background: #ffffff;
    transform: translateX(4px);
}

#sidebar ul li a:hover i:not(.chevron-icon) {
    transform: scale(1.1);
}

#sidebar ul li a.active {
    color: var(--primary-color);
    background: rgba(239, 119, 34, 0.08);
    /* Reverted to highlight brand active state */
    font-weight: 600;
}

/* Permission Locked Features */
#sidebar ul li a.feature-locked {
    opacity: 0.6;
    cursor: not-allowed;
    filter: grayscale(0.8);
    position: relative;
    pointer-events: auto;
    /* Allow click so router can show alert */
}

#sidebar ul li a.feature-locked:hover {
    transform: none;
    background: transparent !important;
    color: #64748b !important;
}

#sidebar ul li a.feature-locked i:not(.fa-lock-lock) {
    opacity: 0.5;
}

#sidebar .fa-lock-lock {
    color: #94a3b8;
    margin-left: auto;
}

#sidebar .chevron-icon {
    font-size: 0.82rem;
    transition: transform 0.3s ease;
    opacity: 0.6;
}

#sidebar a[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

/* Dropdowns */
#sidebar .dropdown-toggle::after {
    display: none;
}

#sidebar ul.collapse {
    background: transparent;
    border-left: 2px solid #f1f5f9;
    margin-left: 15px;
    padding-left: 4px;
}

#sidebar ul.collapse li a {
    font-size: 0.9rem;
    color: #64748b;
    padding: 10px 16px;
}

#sidebar ul.collapse li a:hover {
    color: var(--primary-color);
    background: transparent;
    padding-left: 20px;
}

/* Logout Link */
#sidebar .logout-link {
    background: #fef2f2;
    color: #ef4444;
    margin-top: 20px;
}

#sidebar .logout-link:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-100%);
        position: fixed;
        height: 100%;
        margin-left: 0;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform;
    }

    #sidebar.sb-reveal-drawer {
        transform: translateX(0);
    }

    /* Custom Unique Portal Backdrop */
    .sb-portal-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.4);
        backdrop-filter: blur(8px) saturate(180%);
        -webkit-backdrop-filter: blur(8px) saturate(180%);
        z-index: 1020;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0.4s step-end;
    }

    .sb-portal-backdrop.sb-portal-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1),
            visibility 0s step-start;
    }

    /* Unique Navigation Lock State */
    body.sb-nav-lock-state {
        overflow: hidden !important;
        touch-action: none;
    }

    body.sb-nav-lock-state #content {
        filter: blur(2px);
        transform: scale(0.98);
        pointer-events: none !important;
        user-select: none;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
            filter 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform, filter;
    }

    /* Edge Swiper Elements */
    .sb-edge-swiper {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 30px;
        z-index: 1010;
        /* Higher than content, lower than backdrop */
        background: transparent;
        touch-action: pan-y;
    }

    #sb-edge-open-handler {
        left: 0;
    }

    /* Close handler is inside #sidebar */
    #sidebar #sb-edge-close-handler {
        position: absolute;
        top: 0;
        bottom: 0;
        right: -10px;
        /* Slight overflow to make it easier to grab */
        width: 40px;
        z-index: 100;
        cursor: ew-resize;
    }

    /* Hide drawer edge when sidebar is open to avoid blocking content clicks */
    body.sb-nav-lock-state #sb-edge-open-handler {
        display: none;
    }

    /* Extra safety: Full screen transparent click catcher */
    body.sb-nav-lock-state::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 1015;
        /* Just below the backdrop layer */
        background: transparent;
        pointer-events: auto;
    }
}

#content {
    flex: 1;
    width: 0;
    /* Important for flex-grow to work without being influenced by content width */
    min-width: 0;
    height: auto;
    /* Changed from 100vh for native body scroll */
    min-height: 100vh;
    /* overflow-y: auto; <-- Removed to allow body scroll */
    transition: all 0.3s;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* =========================================
   DASHBOARD PAGE
   ========================================= */
.dashboard-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.2s;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* =========================================
   LOGIN PAGE
   ========================================= */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-bg);
}

.login-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 400px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header h2 {
    font-weight: 700;
    color: var(--text-main);
}

/* =========================================
   PRODUCTS PAGE
   ========================================= */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.table-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.custom-table th {
    background-color: #f1f5f9;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.custom-table td {
    padding: 16px 24px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

.product-img-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background-color: #f1f5f9;
}

/* =========================================
   INVOICE PAGE
   ========================================= */
.invoice-container {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--card-bg);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.invoice-header {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 30px;
}



.invoice-total-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

/* =========================================
   UTILITIES & ANIMATIONS
   ========================================= */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   COMPACT FORM & TABS
   ========================================= */
:root {
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
}



.btn,
.card,
.nav-link {
    /* border-radius: var(--border-radius-sm) !important; */
}

.compact-form .form-label {
    font-weight: 500;
    font-size: 0.8rem;
    color: #64748b;
}

.compact-form .form-control-sm,
.compact-form .form-select-sm {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    border-color: #cbd5e1;
}

.compact-form .form-control:focus,
.compact-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.custom-tabs {
    border-bottom: 2px solid #cbd5e1;
}

.custom-tabs .nav-link {
    border: none;
    color: #64748b;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.custom-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    background: transparent;
}

.custom-tabs .nav-link:hover {
    color: var(--primary-color);
}

.card {
    border: 1px solid #f1f5f9 !important;
}

.page-header {
    background: #fff;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #cbd5e1;
}

/* =========================================
   MOBILE RESPONSIVENESS & CARDS
   ========================================= */
/* Mobile styles moved to module-specific CSS files */
@media (max-width: 768px) {
    /* Global mobile styles only - module-specific styles in respective CSS files */
}

/* =========================================
   PREMIUM SPECTRAL DIALOGS
   ========================================= */
.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-alert-overlay.active {
    opacity: 1;
    visibility: visible;
}

.custom-alert-box {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: 90%;
    max-width: 420px;
    padding: 2.5rem 2rem;
    border-radius: 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9) translateY(20px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-alert-overlay.active .custom-alert-box {
    transform: scale(1) translateY(0);
}

.custom-alert-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    transform: rotate(-5deg);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-alert-overlay.active .custom-alert-icon-wrapper {
    transform: rotate(0deg);
}

.custom-alert-icon-wrapper.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
    color: #10b981;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.1);
}

.custom-alert-icon-wrapper.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.2));
    color: #ef4444;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.1);
}

.custom-alert-icon-wrapper.warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.2));
    color: #f59e0b;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.1);
}

.custom-alert-title {
    font-weight: 850;
    color: #0f172a;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}

.custom-alert-message {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #64748b;
    font-weight: 600;
}

.custom-alert-actions .btn {
    border-radius: 50px;
    font-weight: 800;
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.custom-alert-actions .btn-primary {
    background: #EF7722;
    border: none;
    box-shadow: 0 10px 20px rgba(239, 119, 34, 0.2);
}

.custom-alert-actions .btn-primary:hover {
    background: #FAA533;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(239, 119, 34, 0.3);
}

.custom-alert-actions .btn-secondary {
    background: #f1f5f9;
    color: #64748b;
    border: none;
}

.custom-alert-actions .btn-secondary:hover {
    background: #cbd5e1;
    color: #1e293b;
}


/* =========================================
   ADD ITEM PAGE REDESIGN (PREMIUM)
   ========================================= */

/* Premium Card Style */
.card-premium {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.01) !important;
    transition: all 0.3s ease;
    overflow: hidden;
}

.card-premium:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.01) !important;
    border-color: rgba(79, 70, 229, 0.1) !important;
}

/* Premium Header with Gradient */
.card-header-premium {
    background: linear-gradient(to right, #ffffff, #ffffff);
    border-bottom: 1px solid #f1f5f9;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    /* Indicate clickable for collapse */
}

.card-header-premium h6 {
    font-weight: 600;
    color: #334155;
    margin: 0;
    display: flex;
    align-items: center;
}

.card-header-premium h6 i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--primary-color);
    border-radius: 8px;
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Premium Inputs */
.form-control-premium {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px !important;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.form-control-premium:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

.form-label-premium {
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.4rem;
}

/* Premium Tabs */
.nav-pills-custom {
    background: #f1f5f9;
    padding: 0.35rem;
    border-radius: 12px;
    display: inline-flex;
    gap: 0.5rem;
}

.nav-pills-custom .nav-link {
    border-radius: 10px !important;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s ease;
}

.nav-pills-custom .nav-link.active {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-pills-custom .nav-link i {
    margin-right: 6px;
}

/* Image Upload Area */
.image-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    background: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.image-upload-area:hover {
    border-color: var(--primary-color);
    background: #ffffff;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .card-premium {
        border-radius: 12px !important;
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem !important;
    }

    .nav-pills-custom {
        /* width: 100%; */
        display: flex;
    }

    .nav-pills-custom .nav-link {
        flex: 1;
        text-align: center;
        justify-content: center;
    }
}

/* Custom Notification Styles */
.custom-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 99999;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease-in-out;
    min-width: 300px;
    max-width: 400px;
}

.custom-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.custom-notification i {
    font-size: 1.5rem;
}

.custom-notification.success {
    border-left: 4px solid #10b981;
}

.custom-notification.success i {
    color: #10b981;
}

.custom-notification.error {
    border-left: 4px solid #ef4444;
}

.custom-notification.error i {
    color: #ef4444;
}

.custom-notification.info {
    border-left: 4px solid rgb(11, 166, 223);
}

.custom-notification.info i {
    color: rgb(11, 166, 223);
}

.custom-notification span {
    flex: 1;
    font-weight: 500;
    color: var(--text-dark);
}

#sidebar.collapsed {
    width: 70px;
    min-width: 70px;
    max-width: 70px;
    overflow: visible !important;
}

#sidebar.collapsed .sidebar-header {
    padding: 15px 0;
    justify-content: center;
}

#sidebar.collapsed .sidebar-header .logo-wrapper {
    margin: 0;
}

#sidebar.collapsed .sidebar-header h3,
#sidebar.collapsed .sidebar-header small {
    display: none;
}

/* Logo Toggling Logic */
.sidebar-header .logo-full {
    display: block;
}

.sidebar-header .logo-collapsed {
    display: none;
}

#sidebar.collapsed .sidebar-header .logo-full {
    display: none !important;
}

#sidebar.collapsed .sidebar-header .logo-collapsed {
    display: block !important;
}

/* Ensure full logo in mobile drawer even if collapsed on desktop */
#sidebar.sb-reveal-drawer .sidebar-header .logo-full {
    display: block !important;
}

#sidebar.sb-reveal-drawer .sidebar-header .logo-collapsed {
    display: none !important;
}

#sidebar.collapsed ul li a {
    justify-content: center;
    padding: 12px 0;
}

#sidebar.collapsed ul li a span,
#sidebar.collapsed .chevron-icon {
    display: none;
}

#sidebar.collapsed ul li a i {
    margin-right: 0 !important;
    font-size: 1.25rem;
}

#sidebar.collapsed ul.collapse {
    display: none !important;
}

/* Floating Submenu on Hover (Collapsed Mode) */
#sidebar.collapsed ul.components li {
    position: relative;
}

#sidebar.collapsed ul.components li.hover-open>ul.collapse {
    display: block !important;
    position: absolute;
    left: 25px;
    /* Sidebar width */
    top: 0;
    min-width: 220px;
    background: #ffffff;
    box-shadow: 8px 8px 15px -5px rgba(0, 0, 0, 0.1);
    border-radius: 0 8px 8px 0;
    padding: 8px 0;
    z-index: 9999;
    border: 0px solid #f1f5f9;
}

/* Restore link styles inside the floating menu */
#sidebar.collapsed ul.components li.hover-open>ul.collapse li a {
    justify-content: flex-start;
    /* Left align text */
    padding: 10px 20px;
    font-size: 0.9rem;
    color: #475569;
}

/* IMPORTANT: Restore span/text visibility inside floating menus */
#sidebar.collapsed ul.components li.hover-open>ul.collapse li a span,
#sidebar.collapsed ul.components li.hover-open>ul.collapse li a .flex-grow-1,
#sidebar.collapsed ul.components li.hover-open>ul.collapse li a .chevron-icon {
    display: inline !important;
}

#sidebar.collapsed ul.components li.hover-open>ul.collapse li a:hover {
    background: #ffffff;
    color: var(--primary-color);
    padding-left: 24px;
    /* Slight movement effect */
}

/* Restore icon spacing inside floating menu */
#sidebar.collapsed ul.components li.hover-open>ul.collapse li a i {
    margin-right: 12px !important;
    font-size: 1rem;
    width: auto;
}

/* Nested Sub-submenu Flyout (e.g. Payment Reports inside Reports) */
#sidebar.collapsed ul.components li.hover-open>ul.collapse li {
    position: relative;
}

#sidebar.collapsed ul.components li.hover-open>ul.collapse li.sub-hover-open>ul.collapse {
    display: block !important;
    position: absolute;
    left: 88%;
    top: 0;
    min-width: 200px;
    background: #ffffff;
    box-shadow: 8px 4px 15px -5px rgba(0, 0, 0, 0.1);
    border-radius: 0 8px 8px 0;
    padding: 8px 0;
    z-index: 10000;
    border: 1px solid #f1f5f9;
    border-left: none;
}

/* Restore span/text in nested flyout */
#sidebar.collapsed ul.components li.hover-open>ul.collapse li.sub-hover-open>ul.collapse li a span,
#sidebar.collapsed ul.components li.hover-open>ul.collapse li.sub-hover-open>ul.collapse li a .flex-grow-1 {
    display: inline !important;
}

#sidebar.collapsed ul.components li.hover-open>ul.collapse li.sub-hover-open>ul.collapse li a {
    justify-content: flex-start;
    padding: 10px 20px;
    font-size: 0.85rem;
    color: #475569;
}

#sidebar.collapsed ul.components li.hover-open>ul.collapse li.sub-hover-open>ul.collapse li a:hover {
    background: #ffffff;
    color: var(--primary-color);
}

/* Add a small header/title to the floating menu for better UX (Optional, but nice) */
/* Safety: Hide inline expansion in collapsed mode */
#sidebar.collapsed .collapsing {
    display: none !important;
}

#sidebar.collapsed ul.components .collapse.show {
    display: none !important;
}

/* Professional Menu Button - Enterprise Style */
.modern-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    margin-right: 12px;
    transition: all 0.2s ease;
}

/* Hide FontAwesome icon */
.modern-toggle i {
    display: none;
}

/* Create 3 clean hamburger bars */
.modern-toggle::before,
.modern-toggle::after {
    content: '';
    width: 18px;
    height: 2px;
    background: #374151;
    border-radius: 1px;
    transition: all 0.25s ease;
}

/* Middle bar using box-shadow */
.modern-toggle::before {
    box-shadow: 0 6px 0 #374151;
}

/* Hover effect - subtle lift and color change */
.modern-toggle:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.modern-toggle:hover::before,
.modern-toggle:hover::after {
    background: var(--primary-color);
}

.modern-toggle:hover::before {
    box-shadow: 0 6px 0 var(--primary-color);
}

/* Active/Click state */
.modern-toggle:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    background: #f3f4f6;
}

/* Responsive */
@media (max-width: 768px) {
    .modern-toggle {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }

    .modern-toggle::before,
    .modern-toggle::after {
        width: 16px;
    }
}

/* Draggable Sidebar Toggle Button */
.sidebar-toggle-draggable {
    position: fixed;
    left: 260px;
    top: 0px;
    width: 32px;
    height: 60px;
    background: #fa8c16;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0 15px rgba(239, 119, 34, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    z-index: 1035;
    transition: left 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.1s linear;
    user-select: none;
    touch-action: none;
    will-change: left, transform;
}

.sidebar-toggle-draggable i {
    color: #ffffff;
    font-size: 14px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.sidebar-toggle-draggable:hover {
    box-shadow: 6px 0 20px rgba(239, 119, 34, 0.3);
    background: #fa8c16;
}

.sidebar-toggle-draggable:hover i {
    transform: scale(1.1);
}

/* When sidebar is collapsed */
#sidebar.collapsed~.sidebar-toggle-draggable {
    left: 70px;
    /* Collapsed sidebar width */
}

/* Active/dragging state */
.sidebar-toggle-draggable:active {
    cursor: grabbing;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .sidebar-toggle-draggable {
        width: 32px;
        height: 55px;
        left: 0;
        /* Move away from edge for easier dragging */
        border-radius: 0 12px 12px 0;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    /* When sidebar is visible/active on mobile */
    #sidebar.sb-reveal-drawer~.sidebar-toggle-draggable {
        left: 260px;
    }

    /* When sidebar is collapsed on mobile */
    #sidebar.sb-reveal-drawer.collapsed~.sidebar-toggle-draggable {
        left: 70px;
    }
}

/* Hide draggable button on login page */
body.login-page .sidebar-toggle-draggable {
    display: none !important;
}

/* Update input group styling for mobile */
@media (max-width: 768px) {
    .small-mobile {
        font-size: 0.82rem !important;
        /* Smaller font for inputs/labels */
        padding: 0.4rem 0.5rem !important;
    }

    .form-label.small-mobile {
        margin-bottom: 0.2rem !important;
        padding: 0 !important;
    }

    .input-group-sm-mobile .input-group-text,
    .input-group-sm-mobile .form-control,
    .input-group-sm-mobile .form-select {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.82rem !important;
    }
}


/* --- Global Empty State Design --- */
.no-data-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 1rem;
    text-align: center;
}

.no-data-message .empty-icon-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.no-data-message i.main-icon {
    font-size: 6rem;
    background: linear-gradient(135deg, #EF7722, #FAA533);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.15;
}

.no-data-message .icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    color: #EF7722;
}

.no-data-message h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.no-data-message p {
    color: #64748b;
    font-size: 1rem;
    max-width: 400px;
    margin: 0 auto 2.5rem auto;
    line-height: 1.6;
}

/* Premium Button Styling */
.btn-premium {
    background: #EF7722;
    color: white !important;
    border: none;
    padding: 0.8rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(239, 119, 34, 0.2);
    text-decoration: none;
}

.btn-premium:hover {
    background: #FAA533;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(239, 119, 34, 0.3);
}

/* Premium Toast Notifications */
#spectral-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    width: 320px;
}

.spectral-toast {
    position: relative;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    transform: translateX(120%);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), opacity 0.3s, background 0.3s;
    user-select: none;
    cursor: grab;
    overflow: hidden;
}

.spectral-toast.active {
    transform: translateX(0);
}

.spectral-toast:active {
    cursor: grabbing;
}

.spectral-toast .toast-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.spectral-toast.success .toast-icon-wrapper {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.spectral-toast.error .toast-icon-wrapper {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.spectral-toast.warning .toast-icon-wrapper {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.spectral-toast.info .toast-icon-wrapper {
    background: rgba(11, 166, 223, 0.15);
    color: #0ba6df;
}

.spectral-toast .toast-content {
    flex-grow: 1;
}

.spectral-toast .toast-title {
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 2px;
    color: #1e293b;
    text-transform: capitalize;
}

.spectral-toast .toast-message {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    line-height: 1.4;
}

.spectral-toast .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.05);
    width: 100%;
}

.spectral-toast .toast-progress-bar {
    height: 100%;
    width: 100%;
    transition: width linear;
}

.spectral-toast.success .toast-progress-bar {
    background: #10b981;
}

.spectral-toast.error .toast-progress-bar {
    background: #ef4444;
}

.spectral-toast.warning .toast-progress-bar {
    background: #f59e0b;
}

.spectral-toast.info .toast-progress-bar {
    background: #0ba6df;
}

/* Swiping State */
.spectral-toast.swiping {
    transition: none !important;
}

.spectral-toast.dismissed {
    transform: translateX(120%) !important;
    opacity: 0;
}

@media (max-width: 768px) {
    #spectral-toast-container {
        top: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%;
        max-width: 350px;
    }

    .spectral-toast {
        transform: translateY(-120%);
    }

    .spectral-toast.active {
        transform: translateY(0);
    }

    .spectral-toast.dismissed {
        transform: translateY(-120%) !important;
        opacity: 0;
    }
}

@media print {
    .sidebar-toggle-draggable {
        display: none !important;
    }
}

/* Prevent automatic scroll jumps on input focus */
html,
body,
input,
textarea,
select {
    scroll-behavior: auto !important;
    overflow-anchor: none;
}

/* Custom Action Buttons */
.action-btn-custom {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 0;
}

.action-btn-custom:hover {
    background: #ffffff;
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 119, 34, 0.15);
}

.action-btn-custom i {
    font-size: 0.85rem;
}

/* Custom Dropdown Styling */
.custom-dropdown-menu {
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    padding: 8px;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index: 1060;
}

.dropdown {
    position: relative;
}

.custom-dropdown-menu .dropdown-header {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0.5rem 0.85rem;
    letter-spacing: 0.05em;
}

.custom-dropdown-item.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(1);
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
}

.custom-dropdown-item:hover {
    background: rgba(239, 119, 34, 0.08);
    color: var(--primary-color);
    transform: translateX(4px);
}

.custom-dropdown-item i {
    font-size: 1rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #ffffff;
    transition: all 0.2s;
}

.custom-dropdown-item:hover i {
    /* background: var(--primary-color); */
    color: white;
}

.custom-dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}

.custom-dropdown-item.text-danger:hover i {
    background: #ef4444;
    color: white;
}

/* Swal Action Items */
.swal-action-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 8px;
    width: 100%;
    text-align: left;
}

.swal-action-item:hover {
    background: #ffffff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 119, 34, 0.1);
}

.swal-action-item i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    transition: transform 0.3s;
}

.swal-action-item:hover i {
    transform: scale(1.1);
}

.swal-action-item.text-danger:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Processed from assets/css/items-style.css */
.items-wrapper {
    padding: 1rem;
    background: #EBEBEB;
    min-height: 100vh;
}

.items-wrapper .sale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.items-wrapper .sale-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.items-wrapper .sale-subtitle {
    color: #64748b;
    margin: 0;
    font-size: 0.8rem;
}

.items-wrapper .btn-sale-primary {
    background: #EF7722;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(239, 119, 34, 0.25);
}

.items-wrapper .btn-sale-primary:hover {
    background: #FAA533;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 119, 34, 0.35);
}

.items-wrapper .sale-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.items-wrapper .stat-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.items-wrapper .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.items-wrapper .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.items-wrapper .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.items-wrapper .stat-primary .stat-icon {
    background: linear-gradient(135deg, #FF6B35, #FF8C42);
    color: white;
}

.items-wrapper .stat-success .stat-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.items-wrapper .stat-warning .stat-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
}

.items-wrapper .stat-info .stat-icon {
    background: linear-gradient(135deg, #0EA5E9, #38bdf8);
    color: white;
}

.items-wrapper .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.15rem;
}

.items-wrapper .stat-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
}

.items-wrapper .sale-filter-card {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.items-wrapper .filter-grid-custom {

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    align-items: end;
}

.items-wrapper .filter-grid-custom .filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.items-wrapper .filter-grid-custom .search-wrapper {
    grid-column: span 2;
}

.items-wrapper .filter-grid-custom .form-control,
.items-wrapper .filter-grid-custom .form-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
}

.items-wrapper .filter-grid-custom .form-control:focus,
.items-wrapper .filter-grid-custom .form-select:focus {
    background-color: #fff;
    border-color: #EF7722;
    box-shadow: 0 0 0 3px rgba(239, 119, 34, 0.1);
}

.items-wrapper .filter-grid-custom .input-group-text {
    border-radius: 8px 0 0 8px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
}

.items-wrapper .filter-grid-custom .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

.items-wrapper .filter-grid-custom .filter-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.items-wrapper .filter-grid-custom .filter-item:hover .filter-label {
    color: #1e293b;
}

.items-wrapper .filter-grid-custom .filter-label i {
    width: 20px;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-right: 4px;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(1) .filter-label i {
    color: #BBE0EF !important;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(2) .filter-label i {
    color: #8b5cf6 !important;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(3) .filter-label i {
    color: #f59e0b !important;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(4) .filter-label i {
    color: #10b981 !important;
}

.items-wrapper .action-btns-group .btn {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}

.items-wrapper .action-btns-group .btn-light {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.items-wrapper .action-btns-group .btn-light:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

.items-wrapper .sale-table {
    width: 100%;
    border-collapse: collapse;
}

.items-wrapper .sale-table thead {
    background: #ffffff;
}

.items-wrapper .sale-table th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 0.82rem;
    text-transform: uppercase;
    border-bottom: 1px solid #cbd5e1;
}

.items-wrapper .sale-table td {
    background: white;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #ff8949;
    color: #1e293b;
    font-size: 0.8rem;
}

.items-wrapper .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #cbd5e1;
}

.items-wrapper .pagination-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    color: #64748b;
}

.items-wrapper .pagination-btn:hover {
    border-color: #EF7722;
    color: #EF7722;
}

.items-wrapper .pagination-btn.active {
    background: #EF7722;
    border-color: #EF7722;
    color: white;
}

@media (max-width: 768px) {
    .items-wrapper {
        padding: 10px;
        background: #ffffff;
        padding-bottom: 80px;
    }

    .items-wrapper .sale-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .items-wrapper .sale-title {
        font-size: 1.25rem;
        color: #334155;
    }

    .items-wrapper .sale-subtitle {
        font-size: 0.82rem;
    }

    .items-wrapper .sale-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 0.75rem;
    }

    .items-wrapper .stat-card {
        padding: 8px 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        border: 1px solid #f1f5f9;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: auto;
        min-height: 54px;
    }

    .items-wrapper .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .items-wrapper .stat-value {
        font-size: 1rem;
        margin-bottom: -2px;
        line-height: 1.1;
    }

    .items-wrapper .stat-label {
        font-size: 0.82rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .items-wrapper .sale-filter-card {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #f1f5f9;
        margin-bottom: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    .items-wrapper .filter-grid-custom {
        display: flex;
        flex-wrap: wrap;


        padding-top: 1rem !important;
    }

    .items-wrapper .filter-grid-custom .search-wrapper {
        flex: 0 0 100%;
        width: 100%;
    }

    .items-wrapper .filter-grid-custom .filter-item:not(.search-wrapper):not(.action-btns-group) {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
        width: 100%;
    }

    .items-wrapper .filter-grid-custom .form-control,
    .items-wrapper .filter-grid-custom .form-select {
        font-size: 0.8rem;
        padding: 8px 10px;
        height: 40px;
    }

    .items-wrapper .filter-label {
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        color: #475569 !important;
        margin-bottom: 6px !important;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        letter-spacing: 0.5px;
    }

    .items-wrapper .filter-label i {
        margin-right: 8px;
        font-size: 0.85rem;
    }

    .items-wrapper .action-btns-group {
        display: flex;
        flex-direction: row !important;

        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        width: 100% !important;
        flex: 0 0 100%;
    }

    .items-wrapper .action-btns-group .btn {
        flex: 1;

        width: auto !important;
        height: 38px;
        font-size: 0.82rem;
        padding: 0 8px;
        justify-content: center;

        border-radius: 8px;
    }

    .items-wrapper .action-btns-group .btn-primary-custom {
        flex: 1.2;

        background-color: #EF7722 !important;
        border-color: #EF7722 !important;
    }
}

.items-wrapper {
    --primary-color1: #161E54;
    --primary-hover1: rgb(250, 165, 51);
    --secondary-color1: rgb(11, 166, 223);
    --danger-color1: #ef4444;
    --text-dark1: #1e293b;
    --text-muted1: #64748b;
    --border-color1: #cbd5e1;

    --bg-white1: #ffffff;
    --bg-light1: rgb(235, 235, 235);
    --shadow-sm1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);


    --primary-orange: #161E54;
    --light-orange: rgb(250, 165, 51);
    --bg-gray: rgb(235, 235, 235);
    --accent-blue: rgb(11, 166, 223);
    --text-dark: #1e293b;
    --text-muted: #64748b;
}

.items-wrapper .page-header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-light1);
    border-bottom: 1px solid var(--border-color1);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.items-wrapper .header-content1 {
    display: flex;
    flex-direction: column;
}

.items-wrapper .page-title1 {
    margin: 0 0 0.25rem 0;
    font-weight: 700;
    color: var(--text-dark1);
    font-size: 1.5rem;
}

.items-wrapper .breadcrumb1 {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--text-muted1);
}

.items-wrapper .breadcrumb-item1+.breadcrumb-item1::before {
    float: left;
    padding-right: 0.5rem;
    color: var(--text-muted1);
    content: "/";
    padding-left: 0.5rem;
}

.items-wrapper .breadcrumb-link1 {
    text-decoration: none;
    color: var(--text-muted1);
}

.items-wrapper .breadcrumb-item1.active1 {
    color: var(--text-muted1);
    opacity: 0.8;
}

.items-wrapper .header-actions1 {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.items-wrapper .btn1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.items-wrapper .btn-light1 {
    background-color: var(--bg-white1);
    border-color: var(--border-color1);
    color: var(--text-muted1);
}

.items-wrapper .btn-light1:hover {
    background-color: var(--bg-light1);
}

.items-wrapper .btn-white1 {
    background-color: var(--bg-white1);
    border-color: var(--border-color1);
    color: var(--text-dark1);
    box-shadow: var(--shadow-sm1);
}

.items-wrapper .btn-primary1 {
    background-color: var(--primary-color1);
    color: white;
    box-shadow: var(--shadow-sm1);
}

.items-wrapper .btn-primary1:hover {
    background-color: var(--primary-hover1);
}

.items-wrapper .btn-danger1 {
    background-color: var(--danger-color1);
    color: white;
}

.items-wrapper .d-none1 {
    display: none !important;
}

.items-wrapper .me-21 {
    margin-right: 0.5rem;
}

.items-wrapper .text-muted1 {
    color: var(--text-muted1);
}

.items-wrapper .mobile-filter-btn1 {
    display: none;
}

.items-wrapper .items-card-container1 {
    padding: 0 1.5rem;
}

.items-wrapper .items-card1 {
    background-color: var(--bg-white1);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    border: 1px solid var(--border-color1);
}

.items-wrapper .filter-section1 {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color1);
    background-color: var(--bg-white1);
}

.items-wrapper .filter-row1 {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.items-wrapper .filter-col-large1 {
    flex: 1 1 300px;
}

.items-wrapper .filter-col-small1 {
    flex: 1 1 150px;
}

.items-wrapper .input-group1 {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.items-wrapper .input-group-text1 {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted1);
    text-align: center;
    white-space: nowrap;
    background-color: var(--bg-white1);
    border: 1px solid var(--border-color1);
    border-right: none;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.items-wrapper .form-control1 {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    padding-left: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark1);
    background-color: var(--bg-white1);
    background-clip: padding-box;
    border: 1px solid var(--border-color1);
    border-left: none;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.items-wrapper .form-control1:focus {
    outline: none;
    border-color: var(--primary-color1);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.items-wrapper .form-select1 {
    display: block;
    width: 100%;
    padding: 0.625rem 2.25rem 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dark1);
    background-color: var(--bg-white1);
    border: 1px solid var(--border-color1);
    border-radius: 0.5rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.items-wrapper .form-select1:focus {
    outline: none;
    border-color: var(--primary-color1);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}



.items-wrapper .table1 {
    width: 100%;
    margin-bottom: 0;
    color: var(--text-dark1);
    vertical-align: middle;
    border-color: var(--border-color1);
    border-collapse: collapse;
}

.items-wrapper .table1 th.th1 {
    padding: 1rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color1);
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted1);
}

.items-wrapper .table1 td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color1);
    vertical-align: middle;
}

.items-wrapper .text-end1 {
    text-align: right !important;
}

.items-wrapper .check-col1 {
    width: 40px;
    padding-right: 0.5rem;
}

.items-wrapper .sr-col1 {
    width: 60px;
}

.items-wrapper .img-col1 {
    width: 80px;
}

.items-wrapper .action-col1 {
    padding-right: 1.5rem;
}

.items-wrapper .pagination-footer1 {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color1);
    display: flex;
    justify-content: flex-end;
    background-color: var(--bg-white1);
}

.items-wrapper .pagination1 {
    display: flex;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

.items-wrapper .btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    margin: 0 2px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.items-wrapper .btn-action:nth-child(1) {
    background: rgba(11, 166, 223, 0.1);
    color: var(--secondary-color1);
}

.items-wrapper .btn-action:nth-child(1):hover {
    background: rgba(11, 166, 223, 0.2);
    transform: translateY(-2px);
}

.items-wrapper .btn-action:nth-child(2) {
    background: rgba(239, 119, 34, 0.1);
    color: var(--primary-color1);
}

.items-wrapper .btn-action:nth-child(2):hover {
    background: rgba(239, 119, 34, 0.2);
    transform: translateY(-2px);
}

.items-wrapper .btn-action:nth-child(3) {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color1);
}

.items-wrapper .filter-grid-custom {

    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
}

.items-wrapper .filter-grid-custom .search-wrapper {
    grid-column: span 3;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(2) {

    grid-column: span 2;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(3) {

    grid-column: span 2;
}

.items-wrapper .filter-grid-custom .filter-item:nth-child(4) {

    grid-column: span 1;
}

.items-wrapper .filter-grid-custom .action-btns-group {
    grid-column: span 4;
}

@media (max-width: 1200px) {
    .items-wrapper .filter-grid-custom .search-wrapper {
        grid-column: span 5;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(2) {
        grid-column: span 3;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(3) {
        grid-column: span 3;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(4) {
        grid-column: span 1;
    }

    .items-wrapper .filter-grid-custom .action-btns-group {
        grid-column: span 12;
        margin-top: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    .items-wrapper .filter-grid-custom .search-wrapper {
        grid-column: span 12;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(2) {
        grid-column: span 6;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(3) {
        grid-column: span 6;
    }

    .items-wrapper .filter-grid-custom .filter-item:nth-child(4) {
        grid-column: span 12;
    }

    .items-wrapper .filter-grid-custom .action-btns-group {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .items-wrapper .filter-grid-custom {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .items-wrapper .filter-grid-custom .search-wrapper {
        grid-column: span 2;
    }

    .items-wrapper .filter-grid-custom .filter-item {
        grid-column: span 1;
    }

    .items-wrapper .filter-grid-custom .action-btns-group {
        grid-column: span 2;
    }
}

.items-wrapper .transition-transform {
    transition: transform 0.3s ease;
}

.items-wrapper [aria-expanded="false"] .transition-transform {
    transform: rotate(-180deg);
}

.items-wrapper .cursor-pointer {
    cursor: pointer;
}

.items-wrapper .btn-action:nth-child(3):hover {
    background: rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.items-wrapper .btn-action:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {

    .items-wrapper .items-table,
    .items-wrapper .items-table tbody,
    .items-wrapper .items-table tr,
    .items-wrapper .items-table td {
        display: block;
        width: 100%;
    }

    .items-wrapper .items-table thead {
        display: none;
    }

    .items-wrapper .items-table tbody tr {
        background: #fff;
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 14px 14px 14px 20px;
        position: relative;
        border: 1px solid #f0f4f8;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        display: grid;
        grid-template-columns: 50px 1fr auto;
        gap: 8px 14px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .items-wrapper .items-table tbody tr::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: #e89941cc;
    }

    .items-wrapper .items-table tr:has(.bg-success-subtle) ::before {
        background: transparent;
    }

    .items-wrapper .items-table tr:has(.bg-danger-subtle) ::before {
        background: #ef4444;
    }

    .items-wrapper .items-table tr:has(.bg-warning-subtle) ::before {
        background: #f59e0b;
    }

    .items-wrapper .items-table tbody tr:active {
        transform: scale(0.985);
        background-color: #fafbfc;
    }

    .items-wrapper .items-table td:nth-child(3) {
        grid-column: 1;
        grid-row: 1 / 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .items-wrapper .items-table td:nth-child(3) img,
    .items-wrapper .items-table td:nth-child(3) .product-img-thumb {
        width: 50px !important;
        height: 50px !important;
        border-radius: 8px;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .items-wrapper .items-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

    .items-wrapper .items-table td:nth-child(4) .fw-600 {
        font-size: 0.9rem;
        color: #1e293b;
        font-weight: 700 !important;
        margin-bottom: 1px;
        line-height: 1.2;
    }

    .items-wrapper .items-table td:nth-child(4) .item-desc {
        font-size: 0.82rem !important;
        color: #64748b !important;
        margin-top: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.3;
    }

    .items-wrapper .items-table td {
        padding: 0;
        border: none;
    }

    .items-wrapper .items-table td:nth-child(1),
    .items-wrapper .items-table td:nth-child(2),
    .items-wrapper .items-table td:nth-child(5),
    .items-wrapper .items-table td:nth-child(6),
    .items-wrapper .items-table td:nth-child(7),
    .items-wrapper .items-table td:nth-child(9) {
        display: none !important;
    }

    .items-wrapper .items-table td:nth-child(4) .d-md-none {
        display: flex !important;
        gap: 4px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

    .items-wrapper .items-table td:nth-child(4) .badge {
        font-size: 0.82rem !important;
        padding: 2px 6px;
        font-weight: 600;
        border-radius: 4px;
    }

    .items-wrapper .items-table td:nth-child(8) {
        display: block !important;
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        align-self: center;
    }

    .items-wrapper .items-table td:nth-child(8) {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .items-wrapper .items-table td:nth-child(10) {
        grid-column: 1 / -1;
        grid-row: 3;
        padding-top: 10px;
        border-top: 1px solid #ffffff;
        margin-top: 2px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .items-wrapper .items-table .btn-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #cbd5e1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .items-wrapper .items-table .btn-action:hover {
        background: #ffffff;
        border-color: #cbd5e1;
    }

    .items-wrapper .items-table .btn-action i {
        font-size: 0.85rem;
    }
}

.items-wrapper .mobile-bottom-actions1 {
    display: none;
}

.items-wrapper .fancybox__toolbar {
    padding: 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.items-wrapper .mobile-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 997;
    background-color: white;
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
}

.items-wrapper .mobile-sticky-footer .w-45 {
    width: 45% !important;
}

@media (max-width: 767.98px) {
    .items-wrapper .container-fluid.fade-in {
        padding-bottom: 80px !important;
    }
}

.items-wrapper .row {

    margin-left: calc(-0 * var(--bs-gutter-x));
    margin-right: calc(-0 * var(--bs-gutter-x));
}

.items-wrapper #item-view-content {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.items-wrapper .view-container2 {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.items-wrapper .premium-card2 {
    background: #fff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
}

.items-wrapper .premium-card2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.items-wrapper .card-header-custom2 {
    background: rgba(239, 119, 34, 0.05);
    padding: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.items-wrapper .section-title2 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-orange);
    margin: 0;
    display: flex;
    align-items: center;
}

.items-wrapper .section-title2::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--primary-orange);
    margin-right: 8px;
    border-radius: 2px;
}

.items-wrapper .data-group2 {
    margin-bottom: 0.5rem;
}

.items-wrapper .view-label2 {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.items-wrapper .view-value2 {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 600;
    word-break: break-word;
    line-height: 1.2;
}

.items-wrapper .view-value2.large {
    font-size: 1.1rem;
}

.items-wrapper .item-image-container2 {
    background: #fff;
    border-radius: 12px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 140px;
    border: 1px solid #f1f5f9;
}

.items-wrapper .item-image2 {
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease;
}

.items-wrapper .item-image2:hover {
    transform: scale(1.05);
}

.items-wrapper .badge-premium2 {
    background: rgba(11, 166, 223, 0.1);
    color: var(--accent-blue);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.82rem;
    border: 1px solid rgba(11, 166, 223, 0.2);
}

.items-wrapper .price-tag2 {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary-orange);
    line-height: 1;
}

.items-wrapper .price-label2 {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
}

.items-wrapper .stock-indicator2 {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.items-wrapper .stock-dot2 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.items-wrapper .stock-dot2.in-stock {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.items-wrapper .stock-dot2.low-stock {
    background: var(--light-orange);
    box-shadow: 0 0 0 2px rgba(250, 165, 51, 0.2);
}

.items-wrapper .stock-dot2.out-stock {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.items-wrapper .btn-back2 {
    background: white;
    border: 1px solid #cbd5e1;
    color: var(--text-muted);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.items-wrapper .btn-back2:hover {
    background: var(--bg-gray);
    color: var(--text-dark);
    transform: translateX(-3px);
}

.items-wrapper .btn-edit-premium2 {
    background: var(--primary-orange);
    border: none;
    color: white;
    border-radius: 10px;
    padding: 0.5rem 1.2rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 15px rgba(239, 119, 34, 0.2);
    transition: all 0.3s;
}

.items-wrapper .btn-edit-premium2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 119, 34, 0.3);
    color: white;
    color: white;
}

.items-wrapper .custom-field-box2 {
    background: #ffffff;
    border-radius: 10px;
    padding: 0.8rem;
    border: 1px dashed #cbd5e1;
    height: 100%;
}

@media (max-width: 768px) {
    .items-wrapper .header-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        padding: 0.8rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        justify-content: space-between;
        gap: 0.8rem;
    }

    .items-wrapper .header-actions .btn-back2,
    .items-wrapper .header-actions .btn-edit-premium2 {
        flex: 1;
        text-align: center;
        margin: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .items-wrapper #item-view-content {
        padding-bottom: 70px;
    }

    .items-wrapper .page-header {
        margin-bottom: 0.8rem !important;
        flex-direction: column;
        align-items: flex-start;
    }

    .items-wrapper .header-content {
        width: 100%;
    }

    .items-wrapper html,
    .items-wrapper body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        position: relative;
    }

    .items-wrapper .container-fluid {
        padding: 0 10px;
    }

    .items-wrapper .premium-card2 {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 15px;
    }

    .items-wrapper .card-header-custom2 {
        padding: 12px;
    }

    .items-wrapper .p-3 {
        padding: 12px !important;
    }

    .items-wrapper .view-label2 {
        font-size: 0.82rem;
        margin-bottom: 1px;
    }

    .items-wrapper .view-value2 {
        font-size: 0.85rem;
    }

    .items-wrapper .section-title2 {
        font-size: 0.8rem;
        margin-bottom: 10px !important;
    }

    .items-wrapper .col-6.col-md-3.data-group2,
    .items-wrapper .col-6.col-md-3 {
        padding-right: 5px;
        padding-left: 5px;
    }

    .items-wrapper .price-tag2 {
        font-size: 1.4rem;
    }

    .items-wrapper .item-image-container2 {
        min-height: 120px;
    }

    .items-wrapper .item-image2 {
        max-height: 100px;
    }

    .items-wrapper .table1 tbody tr {
        max-width: 100%;
        overflow: hidden;
    }

    .items-wrapper .fw-500,
    .items-wrapper .view-value2,
    .items-wrapper .page-title1 {
        word-break: break-word;
        white-space: normal;
    }
}

.items-wrapper .sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.items-wrapper .sortable:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

.items-wrapper .sort-icon {
    font-size: 0.82rem;
    color: #cbd5e1;
    transition: all 0.2s;
}

.items-wrapper .sortable:hover .sort-icon {
    color: #94a3b8;
}

.items-wrapper .sort-icon.active {
    color: #EF7722 !important;
}

.items-wrapper .card-premium {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.items-wrapper .card-header-premium {
    background: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 0.75rem 1rem !important;
}

.items-wrapper .card-header-premium h6 {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: #475569;
}

.items-wrapper .form-label-premium {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 0.35rem !important;
    display: block;
}

.items-wrapper .form-control-premium {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    transition: all 0.2s !important;
    background-color: #ffffff !important;
}

.items-wrapper .form-control-premium:focus {
    border-color: #EF7722 !important;
    box-shadow: 0 0 0 3px rgba(239, 119, 34, 0.1) !important;
    background-color: #fff !important;
}

.items-wrapper .image-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s;
}

.items-wrapper .image-upload-area:hover {
    border-color: #EF7722;
    background: #fff;
}

.items-wrapper .nav-pills-custom .nav-link {
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.25rem;
    color: #64748b;
    transition: all 0.2s;
}

.items-wrapper .nav-pills-custom .nav-link.active {
    background-color: #EF7722 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 119, 34, 0.3);
}

.items-wrapper .nav-pills-custom .nav-link i {
    margin-right: 8px;
}

@media (max-width: 768px) {
    .items-wrapper .container-fluid.p-0.fade-in {
        padding: 5px !important;
    }

    .items-wrapper .card-premium {
        margin-bottom: 1rem;
    }

    .items-wrapper .card-body {
        padding: 10px !important;
    }

    .items-wrapper .form-label-premium {
        font-size: 0.82rem !important;
    }

    .items-wrapper .form-control-premium {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.6rem !important;
    }
}

/* Processed from assets/css/items.css */
.items-wrapper .swal2-popup-custom {
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

.items-wrapper .swal2-close-custom {
    color: #94a3b8 !important;
    font-size: 1.5rem !important;
}

.items-wrapper .swal2-close-custom:hover {
    color: #64748b !important;
}

/* Processed from assets/css/subscriptions.css */
/* assets/css/subscriptions.css */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

.sp-wrapper {
    min-height: 100vh;
    background: #ffffff;
    padding: 120px 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    overflow-x: hidden;
}

/* Prismatic Background */
.sp-wrapper::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
    filter: blur(100px);
    z-index: 0;
}

.sp-wrapper::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
    filter: blur(100px);
    z-index: 0;
}

.sp-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* Editorial Perspective Header */
.sp-page-header {
    text-align: left;
    margin-bottom: 120px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    padding-top: 40px;
}

.sp-header-left {
    position: relative;
}

.sp-header-right {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sp-watermark {
    position: absolute;
    top: -60px;
    left: -40px;
    font-size: 12rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: rgba(99, 102, 241, 0.03);
    line-height: 1;
    z-index: -1;
    user-select: none;
}

.sp-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: #0f172a;
    color: #fff;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.15);
}

.sp-header-badge i {
    color: #6366f1;
}

.sp-page-header h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 5.5rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -4px;
    line-height: 0.85;
    margin-bottom: 30px;
}

.sp-text-stroke {
    -webkit-text-stroke: 1.5px #0f172a;
    -webkit-text-fill-color: transparent;
    opacity: 0.4;
}

.sp-header-desc {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 500px;
    line-height: 1.5;
    font-weight: 500;
    border-left: 3px solid #6366f1;
    padding-left: 20px;
}

/* Floating Sticker Visual */
.sp-sticker-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}

.sp-sticker {
    position: absolute;
    background: white;
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: sp-float 6s ease-in-out infinite alternate;
}

.sp-sticker-1 {
    top: 0;
    left: 0;
    transform: rotate(-5deg);
    z-index: 2;
    width: 180px;
}

.sp-sticker-2 {
    bottom: 20px;
    right: 0;
    transform: rotate(8deg);
    z-index: 1;
    width: 220px;
    background: #6366f1;
    color: white;
    border: none;
}

.sp-st-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #6366f1;
}

.sp-sticker-2 .sp-st-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.sp-st-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes sp-float {
    0% {
        transform: translateY(0) rotate(-5deg);
    }

    100% {
        transform: translateY(-20px) rotate(-2deg);
    }
}

/* Active Subscription Banner */
.sp-active-subscription-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 20px 30px;
    border-radius: 24px;
    margin-bottom: 60px;
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.1);
    animation: reveal 0.8s ease forwards;
}

.sp-sub-icon {
    width: 48px;
    height: 48px;
    background: #dcfce7;
    color: #22c55e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.sp-sub-details {
    flex-grow: 1;
}

.sp-sub-title {
    font-size: 1rem;
    color: #14532d;
    font-weight: 500;
}

.sp-sub-title strong {
    font-weight: 800;
}

.sp-sub-date {
    font-size: 0.85rem;
    color: #166534;
    opacity: 0.8;
}

.sp-sub-status {
    background: #22c55e;
    color: white;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.sp-plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 80px;
}

@media (min-width: 768px) {
    .sp-plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .sp-plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sp-plan-card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 48px;
    padding: 50px 40px;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.05);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 800px;
}

.sp-content-scroller {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 30px;
    padding-right: 10px;
}

.sp-content-scroller::-webkit-scrollbar {
    width: 4px;
}

.sp-content-scroller::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.sp-theme-section {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px dashed #cbd5e1;
}

.sp-section-label {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.sp-theme-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-chip {
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-chip i {
    font-size: 0.82rem;
    color: #6366f1;
}

.sp-chip:hover {
    background: #6366f1;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
}

.sp-chip:hover i {
    color: white;
}

.sp-plan-card:hover {
    transform: translateY(-20px);
    box-shadow: 0 40px 80px -20px rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.2);
}

.sp-plan-card.sp-featured {
    border: 2px solid #6366f1;
    background: #ffffff;
}

.sp-popular-badge {
    position: absolute;
    top: 30px;
    right: 40px;
    background: #fdf2f8;
    color: #db2777;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sp-plan-name {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.sp-price-box {
    margin-bottom: 40px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sp-price-symbol {
    font-size: 1.75rem;
    font-weight: 600;
    color: #0f172a;
}

.sp-price-amount {
    font-size: 4.5rem;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -4px;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
}

.sp-price-period {
    font-size: 1rem;
    color: #94a3b8;
    font-weight: 600;
}

.sp-features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 0;
    flex-grow: 1;
}

.sp-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    color: #475569;
    font-weight: 500;
    font-size: 1rem;
}

.sp-feature-icon {
    width: 26px;
    height: 26px;
    background: #f0fdf4;
    color: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.1);
}

.sp-plan-btn {
    width: 100%;
    padding: 20px;
    border-radius: 22px;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s;
    border: none;
    cursor: pointer;
}

.sp-btn-outline {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.sp-btn-outline:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.sp-btn-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 15px 30px -5px rgba(99, 102, 241, 0.3);
}

.sp-btn-gradient:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 40px -10px rgba(99, 102, 241, 0.4);
}

/* Animations */
.sp-stagger-item {
    opacity: 0;
    transform: translateY(40px);
    animation: sp-reveal 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes sp-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .sp-page-header h1 {
        font-size: 3rem;
    }
}

/* Dashboard Upgrade Notice */
.sp-dashboard-notice {
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    padding: 16px 24px;
    border-radius: 20px;
    margin-bottom: 25px;
    color: white;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.2);
    animation: sp-reveal-banner 0.8s ease forwards;
}

.sp-notice-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.sp-notice-content {
    flex-grow: 1;
}

.sp-notice-title {
    font-size: 0.95rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.sp-notice-text {
    font-size: 0.82rem;
    opacity: 0.9;
    font-weight: 500;
}

.sp-notice-btn {
    background: white;
    color: #6366f1;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none !important;
    transition: all 0.3s;
}

.sp-notice-btn:hover {
    transform: scale(1.05);
    background: #fdf2f8;
    color: #4f46e5;
}

@keyframes sp-reveal-banner {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* History Section */
.sp-history-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.03);
    margin-top: 60px;
    animation-delay: 0.5s;
}

.sp-history-header {
    margin-bottom: 30px;
}

.sp-history-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.sp-history-desc {
    color: #64748b;
    font-size: 0.9rem;
}

.sp-history-table-wrapper {
    overflow-x: auto;
}

.sp-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

.sp-history-table th {
    text-align: left;
    padding: 0 20px 15px 20px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    font-weight: 800;
}

.sp-history-table tr {
    transition: transform 0.2s;
}

.sp-history-table tbody tr:hover {
    transform: scale(1.01);
}

.sp-history-table td {
    background: white;
    padding: 20px;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-weight: 600;
    font-size: 0.95rem;
}

.sp-history-table td:first-child {
    border-left: 1px solid #f1f5f9;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.sp-history-table td:last-child {
    border-right: 1px solid #f1f5f9;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.sp-status-badge {
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-status-active {
    background: #dcfce7;
    color: #15803d;
}

.sp-status-expired {
    background: #f1f5f9;
    color: #64748b;
}

.sp-mono {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: #6366f1;
    font-size: 0.85rem;
    background: #eef2ff;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .sp-page-header {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        margin-bottom: 80px;
    }

    .sp-header-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sp-header-desc {
        border-left: none;
        padding-left: 0;
        max-width: 100%;
        border-bottom: 3px solid #6366f1;
        padding-bottom: 15px;
    }

    .sp-plans-grid {
        grid-template-columns: 1fr;
        padding: 0 10px;
    }

    .sp-header-right {
        display: none;
    }

    .sp-sticker-wrap {
        display: none;
    }

    .sp-wrapper {
        padding: 80px 15px;
    }
}

@media (max-width: 768px) {
    .sp-page-header h1 {
        font-size: 3.5rem;
        letter-spacing: -2px;
    }

    .sp-watermark {
        font-size: 8rem;
        top: -40px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .sp-plan-card {
        padding: 30px 20px;
        max-width: 100%;
    }

    .sp-plan-name {
        font-size: 2rem;
    }

    .sp-plan-price {
        font-size: 3rem;
    }

    .sp-history-table th,
    .sp-history-table td {
        white-space: nowrap;
        padding: 15px;
    }

    .sp-history-table-wrapper {
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .sp-page-header h1 {
        font-size: 2.8rem;
    }

    .sp-plan-features li {
        font-size: 0.9rem;
    }

    .sp-header-badge {
        margin-bottom: 20px;
    }
}

/* Processed from assets/css/client_style.css */
.clients-wrapper .sale-invoice-wrapper {
    padding: 1rem;
    background: #EBEBEB;
    min-height: 100vh;
}

.clients-wrapper .sale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.clients-wrapper .sale-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.clients-wrapper .sale-subtitle {
    color: #64748b;
    margin: 0;
    font-size: 0.8rem;
}

.clients-wrapper .btn-sale-primary {
    background: #EF7722;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(239, 119, 34, 0.25);
}

.clients-wrapper .btn-sale-primary:hover {
    background: #FAA533;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 119, 34, 0.35);
}

.clients-wrapper .sale-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.clients-wrapper .stat-card {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.clients-wrapper .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.clients-wrapper .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.clients-wrapper .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.clients-wrapper .stat-primary .stat-icon {
    background: linear-gradient(135deg, #FF6B35, #FF8C42);
    color: white;
}

.clients-wrapper .stat-success .stat-icon {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.clients-wrapper .stat-warning .stat-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: white;
}

.clients-wrapper .stat-info .stat-icon {
    background: linear-gradient(135deg, #0EA5E9, #38bdf8);
    color: white;
}

.clients-wrapper .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.15rem;
}

.clients-wrapper .stat-label {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
}

.clients-wrapper .sale-filter-card {
    background: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.clients-wrapper .filter-grid-custom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    align-items: end;
}

.clients-wrapper .filter-grid-custom .filter-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.clients-wrapper .filter-grid-custom .search-wrapper {
    grid-column: span 2;
}

.clients-wrapper .filter-grid-custom .form-control,
.clients-wrapper .filter-grid-custom .form-select {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #ffffff;
}

.clients-wrapper .filter-grid-custom .form-control:focus,
.clients-wrapper .filter-grid-custom .form-select:focus {
    background-color: #fff;
    border-color: #EF7722;
    box-shadow: 0 0 0 3px rgba(239, 119, 34, 0.1);
}

.clients-wrapper .filter-grid-custom .input-group-text {
    border-radius: 8px 0 0 8px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
}

.clients-wrapper .filter-grid-custom .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

.clients-wrapper .filter-grid-custom .filter-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.clients-wrapper .filter-grid-custom .filter-item:hover .filter-label {
    color: #1e293b;
}

.clients-wrapper .filter-grid-custom .filter-label i {
    width: 20px;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-right: 4px;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(1) .filter-label i {
    color: #BBE0EF !important;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(2) .filter-label i {
    color: #8b5cf6 !important;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(3) .filter-label i {
    color: #f59e0b !important;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(4) .filter-label i {
    color: #10b981 !important;
}

.clients-wrapper .action-btns-group .btn {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
}

.clients-wrapper .action-btns-group .btn-light {
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.clients-wrapper .action-btns-group .btn-light:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

.clients-wrapper .sale-table {
    width: 100%;
    border-collapse: collapse;
}

.clients-wrapper .sale-table thead {
    background: #ffffff;
}

.clients-wrapper .sale-table th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 0.82rem;
    text-transform: uppercase;
    border-bottom: 1px solid #cbd5e1;
}

.clients-wrapper .sale-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    font-size: 0.8rem;
}

.clients-wrapper .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #cbd5e1;
}

.clients-wrapper .pagination-btn {
    padding: 0.5rem 0.75rem;
    border: 2px solid #cbd5e1;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
    color: #64748b;
}

.clients-wrapper .pagination-btn:hover {
    border-color: #EF7722;
    color: #EF7722;
}

.clients-wrapper .pagination-btn.active {
    background: #EF7722;
    border-color: #EF7722;
    color: white;
}

@media (max-width: 768px) {
    .clients-wrapper .sale-invoice-wrapper {
        padding: 10px;
        background: #ffffff;
        padding-bottom: 80px;
    }

    .clients-wrapper .sale-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .clients-wrapper .sale-title {
        font-size: 1.25rem;
        color: #334155;
    }

    .clients-wrapper .sale-subtitle {
        font-size: 0.82rem;
    }

    .clients-wrapper .sale-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 0.75rem;
    }

    .clients-wrapper .stat-card {
        padding: 8px 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        border: 1px solid #f1f5f9;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: auto;
        min-height: 54px;
    }

    .clients-wrapper .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .clients-wrapper .stat-value {
        font-size: 1rem;
        margin-bottom: -2px;
        line-height: 1.1;
    }

    .clients-wrapper .stat-label {
        font-size: 0.82rem;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clients-wrapper .sale-filter-card {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #f1f5f9;
        margin-bottom: 1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    }

    .clients-wrapper .filter-grid-custom {
        display: flex;
        flex-wrap: wrap;

        gap: 12px;
        padding-top: 1rem !important;
    }

    .clients-wrapper .filter-grid-custom .search-wrapper {
        flex: 0 0 100%;
        width: 100%;
    }

    .clients-wrapper .filter-grid-custom .filter-item:not(.search-wrapper):not(.action-btns-group) {
        flex: 0 0 calc(50% - 6px);
        width: calc(50% - 6px);
    }

    .clients-wrapper .filter-grid-custom .form-control,
    .clients-wrapper .filter-grid-custom .form-select {
        font-size: 0.8rem;
        padding: 8px 10px;
        height: 40px;
    }

    .clients-wrapper .filter-label {
        font-size: 0.82rem !important;
        font-weight: 800 !important;
        color: #475569 !important;
        margin-bottom: 6px !important;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        letter-spacing: 0.5px;
    }

    .clients-wrapper .filter-label i {
        margin-right: 8px;
        font-size: 0.85rem;
    }

    .clients-wrapper .action-btns-group {
        display: flex;
        flex-direction: row !important;

        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 8px;
        width: 100% !important;
        flex: 0 0 100%;
    }

    .clients-wrapper .action-btns-group .btn {
        flex: 1;

        width: auto !important;
        height: 38px;
        font-size: 0.82rem;
        padding: 0 8px;
        justify-content: center;

        border-radius: 8px;
    }

    .clients-wrapper .action-btns-group .btn-primary-custom {
        flex: 1.2;

        background-color: #EF7722 !important;
        border-color: #EF7722 !important;
    }
}

.clients-wrapper .client-form .card {
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
}

.clients-wrapper .client-form .form-label {
    font-weight: 500;
    font-size: 0.8rem;
    color: #64748b;
}

.clients-wrapper .client-form .form-control,
.clients-wrapper .client-form .form-select {
    border-color: #cbd5e1;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

.clients-wrapper .client-form .form-control:focus,
.clients-wrapper .client-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.clients-wrapper .client-form .nav-tabs .nav-link {
    color: #64748b;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.75rem 1rem;
    font-weight: 500;
}

.clients-wrapper .client-form .nav-tabs .nav-link:hover {
    color: var(--primary-color);
}

.clients-wrapper .client-form .nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: none;
}

.clients-wrapper .btn-primary-custom {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s;
}

.clients-wrapper .btn-primary-custom:hover {
    background-color: #4338ca;

    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .clients-wrapper .page-header {

        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .clients-wrapper .page-header .actions {
        width: 100%;
        display: flex;
        gap: 0.5rem;
    }

    .clients-wrapper .page-header .actions .btn {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .clients-wrapper .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }

    .clients-wrapper .page-header h4 {
        font-size: 1.25rem;
        width: 100%;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .clients-wrapper .page-header .d-flex.gap-2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
        width: 100%;
    }

    .clients-wrapper .page-header .btn {
        width: 100%;
        justify-content: center;
        font-size: 0.85rem;
    }

    .clients-wrapper .clients-table,
    .clients-wrapper .clients-table tbody,
    .clients-wrapper .clients-table tr,
    .clients-wrapper .clients-table td {
        display: block;
        width: 100%;
    }

    .clients-wrapper .clients-table thead {
        display: none;
    }

    .clients-wrapper .clients-table tbody tr {
        background: #fff;
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 14px 14px 14px 20px;
        position: relative;
        border: 1px solid #f0f4f8;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px 12px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .clients-wrapper .clients-table tbody tr::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: #e89941cc;
    }

    .clients-wrapper .clients-table tr:has(.text-success) ::before {
        background: transparent;
    }

    .clients-wrapper .clients-table tr:has(.text-danger) ::before {
        background: transparent;
    }

    .clients-wrapper .clients-table tbody tr:active {
        transform: scale(0.985);
        background-color: #fafbfc;
    }

    .clients-wrapper .clients-table td {
        padding: 0;
        border: none;
    }

    .clients-wrapper .clients-table td:nth-child(1),
    .clients-wrapper .clients-table td:nth-child(2) {
        display: none;
    }

    .clients-wrapper .clients-table td:nth-child(3) {
        grid-column: 1;
        grid-row: 1;
    }

    .clients-wrapper .clients-table td:nth-child(3) .fw-600 {
        font-size: 0.95rem;
        color: #0f172a;
        font-weight: 700 !important;
        margin-bottom: 1px;
        line-height: 1.2;
    }

    .clients-wrapper .clients-table td:nth-child(3) .small {
        font-size: 0.82rem !important;
        color: #64748b !important;
        letter-spacing: -0.01em;
    }

    .clients-wrapper .clients-table td:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        background: #ffffff;
        padding: 6px 10px;
        border-radius: 10px;
        border: 1px solid #edf2f7;
        min-width: 90px;
    }

    .clients-wrapper .clients-table td:nth-child(6) .fw-bold {
        font-size: 0.9rem;
        letter-spacing: -0.01em;
        color: #1e293b;
    }

    .clients-wrapper .clients-table td:nth-child(6) small {
        font-size: 0.82rem !important;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 0.03em;
        margin-top: 1px;
        opacity: 0.8;
    }

    .clients-wrapper .clients-table td:nth-child(6) .text-success {
        color: #059669 !important;
    }

    .clients-wrapper .clients-table td:nth-child(6) .text-danger {
        color: #dc2626 !important;
    }

    .clients-wrapper .clients-table td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 8px 0;
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
        margin: 2px 0;
    }

    .clients-wrapper .clients-table td:nth-child(4) .contact-info-mobile {
        display: flex;
        flex-direction: row;
        gap: 12px;
        flex-wrap: wrap;
    }

    .clients-wrapper .clients-table td:nth-child(4) div {
        font-size: 0.82rem;
        color: #475569;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .clients-wrapper .clients-table td:nth-child(4) i {
        font-size: 0.82rem;
        color: #94a3b8;
        width: 12px;
        text-align: center;
    }

    .clients-wrapper .clients-table td:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
    }

    .clients-wrapper .clients-table td:nth-child(5) .badge {
        font-size: 0.82rem;
        padding: 4px 8px;
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1;
        font-weight: 600;
        border-radius: 6px;
    }

    .clients-wrapper .clients-table td:nth-child(7) {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }

    .clients-wrapper .clients-table .btn-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #cbd5e1;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .clients-wrapper .clients-table .btn-action:hover {
        background: #ffffff;
        border-color: #cbd5e1;
    }

    .clients-wrapper .clients-table .btn-action i {
        font-size: 0.85rem;
    }
}

.clients-wrapper .custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.clients-wrapper .custom-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.clients-wrapper .custom-modal-container {
    width: 100%;
    max-width: 500px;
    margin: 1.75rem auto;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.clients-wrapper .custom-modal-overlay.active .custom-modal-container {
    transform: translateY(0);
}

.clients-wrapper .custom-modal-content {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: none;
    overflow: hidden;
}

.clients-wrapper .custom-modal-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.clients-wrapper .custom-modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.clients-wrapper .custom-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.clients-wrapper .custom-modal-close:hover {
    color: #64748b;
}

.clients-wrapper .custom-modal-body {
    padding: 1.5rem;
}

.clients-wrapper .custom-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #cbd5e1;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #ffffff;
}

.clients-wrapper .filter-grid-custom .search-wrapper {
    grid-column: span 5;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(2) {
    grid-column: span 2;
}

.clients-wrapper .filter-grid-custom .filter-item:nth-child(3) {
    grid-column: span 2;
}

.clients-wrapper .filter-grid-custom .action-btns-group {
    grid-column: span 3;
}

@media (max-width: 991.98px) {
    .clients-wrapper .filter-grid-custom .search-wrapper {
        grid-column: span 6;
    }

    .clients-wrapper .filter-grid-custom .filter-item:nth-child(2) {
        grid-column: span 3;
    }

    .clients-wrapper .filter-grid-custom .filter-item:nth-child(3) {
        grid-column: span 3;
    }

    .clients-wrapper .filter-grid-custom .action-btns-group {
        grid-column: span 12;
        margin-top: 0.5rem;
    }
}

@media (max-width: 768px) {
    .clients-wrapper .filter-grid-custom {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .clients-wrapper .filter-grid-custom .search-wrapper {
        grid-column: span 2;
    }

    .clients-wrapper .filter-grid-custom .filter-item {
        grid-column: span 1;
    }

    .clients-wrapper .filter-grid-custom .action-btns-group {
        grid-column: span 2;
    }
}

.clients-wrapper .transition-transform {
    transition: transform 0.3s ease;
}

.clients-wrapper [aria-expanded="false"] .transition-transform {
    transform: rotate(-180deg);
}

.clients-wrapper .cursor-pointer {
    cursor: pointer;
}

.clients-wrapper .custom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.clients-wrapper .custom-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
}

.clients-wrapper .custom-modal-close {
    padding: 0.5rem;
    margin: -0.5rem -0.5rem -0.5rem auto;
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.clients-wrapper .custom-modal-close:hover {
    color: #0f172a;
}

.clients-wrapper .custom-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: 70vh;
}

.clients-wrapper .custom-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    background-color: #ffffff;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .clients-wrapper .custom-modal-container {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
}

.clients-wrapper .card-premium {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.clients-wrapper .card-header-premium {
    background: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    padding: 0.75rem 1rem !important;
}

.clients-wrapper .card-header-premium h6 {
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: #475569;
}

.clients-wrapper .form-label-premium {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin-bottom: 0.35rem !important;
    display: block;
}

.clients-wrapper .form-control-premium {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
    transition: all 0.2s !important;
    background-color: #ffffff !important;
}

.clients-wrapper .form-control-premium:focus {
    border-color: #EF7722 !important;
    box-shadow: 0 0 0 3px rgba(239, 119, 34, 0.1) !important;
    background-color: #fff !important;
}

@media (max-width: 768px) {
    .clients-wrapper .container-fluid.p-0.fade-in {
        padding: 5px !important;
    }

    .clients-wrapper .card-premium {
        padding: 0.4rem 0.6rem !important;
    }
}

.clients-wrapper .mobile-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    border-top: 1px solid #cbd5e1;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.clients-wrapper .mobile-sticky-footer .w-45 {
    width: 45% !important;
}

@media (max-width: 767.98px) {
    .clients-wrapper .container-fluid.fade-in {
        padding-bottom: 80px !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.clients-wrapper .fade-in {
    animation: fadeIn 0.3s ease-out;
}

.clients-wrapper .card {
    transition: all 0.2s;
}

.clients-wrapper .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.clients-wrapper .form-control:focus,
.clients-wrapper .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(239, 119, 34, 0.1);
}

.clients-wrapper .nav-tabs .nav-link {
    border: none;
    color: #64748b;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.clients-wrapper .nav-tabs .nav-link:hover {
    color: var(--primary-color);
    border-bottom-color: rgba(239, 119, 34, 0.2);
}

.clients-wrapper .nav-tabs .nav-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: transparent;
}

.clients-wrapper .form-label {
    font-weight: 500;
    color: #475569;
}

.clients-wrapper .card-title i {
    color: var(--primary-color);
}

.clients-wrapper .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.clients-wrapper .input-group-text {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: var(--primary-color);
    font-weight: 600;
}

.clients-wrapper .cursor-pointer {
    cursor: pointer;
    transition: background-color 0.2s;
}

.clients-wrapper .cursor-pointer:hover {
    background-color: #ffffff !important;
}

.clients-wrapper .collapse-icon {
    transition: transform 0.3s;
    font-size: 0.875rem;
}

.clients-wrapper [aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

.clients-wrapper .hidden {
    display: none;
}

.clients-wrapper .credit-limit-options {
    background: #ffffff;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
}

.clients-wrapper .credit-limit-options .form-check {
    margin-bottom: 0;
}

.clients-wrapper .credit-limit-options .form-check-input:checked~.form-check-label {
    color: var(--primary-color);
    font-weight: 600;
}

.clients-wrapper .collapse {
    transition: height 0.3s ease;
}

.clients-wrapper .collapse.show {
    animation: slideDown 0.3s ease-out;
}

@media (max-width: 767.98px) {
    .clients-wrapper .page-header .actions {
        display: none !important;
    }

    .clients-wrapper .page-header {
        padding: 1rem !important;
        flex-direction: column;
        align-items: flex-start !important;
    }

    .clients-wrapper .page-header h4 {
        font-size: 1.25rem;
    }

    .clients-wrapper .card-body {
        padding: 1rem !important;
    }

    .clients-wrapper .row.g-3 {}

    @media (max-width: 400px) {
        .clients-wrapper .credit-limit-options .form-check-inline {
            display: block;
            margin-bottom: 0.5rem;
        }
    }

    .clients-wrapper .nav-tabs .nav-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }

    .clients-wrapper .card-title {
        font-size: 0.82rem !important;
    }

    .clients-wrapper .form-label {
        margin-bottom: 0.25rem !important;
        font-size: 0.82rem;
    }

    .clients-wrapper .input-group {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border-radius: 6px;
        overflow: hidden;
    }
}

/* Processed from assets/css/vendor_style.css */
.vendors-wrapper {
    --vendor-primary: #EF7722;
    --vendor-secondary: #FAA533;
    --vendor-bg: #EBEBEB;
    --vendor-card-bg: #ffffff;
    --vendor-text: #1e293b;
    --vendor-muted: #64748b;
    --vendor-border: #cbd5e1;
    --vendor-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vendor-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);


    --fs-xs: 0.65rem;
    --fs-sm: 0.75rem;
    --fs-base: 0.85rem;
}

.vendors-wrapper .sale-invoice-wrapper {
    padding: 1rem;
    background: var(--vendor-bg);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.vendors-wrapper .sale-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.vendors-wrapper .sale-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--vendor-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.vendors-wrapper .sale-subtitle {
    font-size: var(--fs-xs);
    color: var(--vendor-muted);
}

.vendors-wrapper .btn-sale-primary {
    background: var(--vendor-primary);
    color: white;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: var(--fs-xs);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--vendor-shadow-sm);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vendors-wrapper .btn-sale-primary:hover {
    background: var(--vendor-secondary);
    transform: translateY(-1px);
}

.vendors-wrapper .sale-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vendors-wrapper .stat-card {
    background: white;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vendors-wrapper .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.vendors-wrapper .stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    opacity: 0.8;
}

.vendors-wrapper .stat-primary {
    background: rgba(59, 130, 246, 0.02);
    border-color: rgba(59, 130, 246, 0.1);
}

.vendors-wrapper .stat-primary::before {
    background: #BBE0EF;
}

.vendors-wrapper .stat-warning {
    background: rgba(239, 119, 34, 0.02);
    border-color: rgba(239, 119, 34, 0.1);
}

.vendors-wrapper .stat-warning::before {
    background: #EF7722;
}

.vendors-wrapper .stat-success {
    background: rgba(16, 185, 129, 0.02);
    border-color: rgba(16, 185, 129, 0.1);
}

.vendors-wrapper .stat-success::before {
    background: #10b981;
}

.vendors-wrapper .stat-info {
    background: rgba(14, 165, 233, 0.02);
    border-color: rgba(14, 165, 233, 0.1);
}

.vendors-wrapper .stat-info::before {
    background: #0ea5e9;
}

.vendors-wrapper .sale-filter-card {
    background: white;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    margin-bottom: 1rem;
}

.vendors-wrapper .search-box-premium {
    position: relative;
    flex: 1;
}

.vendors-wrapper .search-box-premium i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--vendor-muted);
}

.vendors-wrapper .search-box-premium input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2.25rem;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: var(--fs-sm);
    background: #ffffff;
}

.vendors-wrapper .custom-checkbox {
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    background: white;
    margin: auto;
}

.vendors-wrapper .custom-checkbox i {
    font-size: 13px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vendors-wrapper .custom-checkbox.checked {
    background: var(--vendor-primary);
    border-color: var(--vendor-primary);
}

.vendors-wrapper .custom-checkbox.checked i {
    opacity: 1;
    transform: scale(1);
}

.vendors-wrapper .transactions-section {
    background: white;
    border-radius: 10px;
    box-shadow: var(--vendor-shadow-sm);

    overflow: visible;
}

.vendors-wrapper .table-container {
    overflow: visible;

}

.vendors-wrapper .sale-table {
    width: 100%;
    border-collapse: collapse;
}

.vendors-wrapper .sale-table thead th {
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    color: var(--vendor-muted);
    font-weight: 700;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    border-bottom: 1px solid #f1f5f9;
}

.vendors-wrapper .sale-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #ffffff;
    font-size: var(--fs-sm);
}

.vendors-wrapper .vendor-logo-box {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vendors-wrapper #bulk-actions-bar {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #1e293b;
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: var(--fs-xs);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.vendors-wrapper #bulk-actions-bar.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.vendors-wrapper .dropdown-menu {
    z-index: 1100 !important;
}

.vendors-wrapper .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.vendors-wrapper .stat-primary .stat-icon {
    background: #ffffff;
    color: #BBE0EF;
}

.vendors-wrapper .stat-warning .stat-icon {
    background: #fff7ed;
    color: #EF7722;
}

.vendors-wrapper .stat-success .stat-icon {
    background: #ecfdf5;
    color: #10b981;
}

.vendors-wrapper .stat-info .stat-icon {
    background: #f0f9ff;
    color: #0ea5e9;
}

.vendors-wrapper .stat-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--vendor-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.vendors-wrapper .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vendor-text);
    letter-spacing: -0.02em;
    margin-top: 0.1rem;
}

.vendors-wrapper .active-tab {
    background: white !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--vendor-primary) !important;
}

.vendors-wrapper .stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.vendors-wrapper .btn-action-premium {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    background: white;
    font-size: 0.82rem;
}

.vendors-wrapper .badge-premium {
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 700;
}

.vendors-wrapper .badge-gst {
    background: #ffffff;
    color: #BBE0EF;
}

.vendors-wrapper .badge-unreg {
    background: #f1f5f9;
    color: #64748b;
}

@media (max-width: 768px) {
    .vendors-wrapper .sale-invoice-wrapper {
        padding: 0.6rem;
        padding-bottom: 120px;

        background: #f1f5f9;
    }

    .vendors-wrapper .sale-header {
        margin-bottom: 0.6rem;
        text-align: left;
        padding-left: 0.15rem;
    }

    .vendors-wrapper .sale-title {
        font-size: 0.95rem;
    }

    .vendors-wrapper .sale-subtitle {
        font-size: 0.82rem;
    }

    .vendors-wrapper .sale-header-right {
        position: fixed;
        bottom: 15px;
        right: 15px;
        z-index: 1010;
    }

    .vendors-wrapper .btn-sale-primary {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
        box-shadow: 0 8px 16px rgba(239, 119, 34, 0.3);
    }

    .vendors-wrapper .btn-sale-primary span {
        display: none;
    }

    .vendors-wrapper .btn-sale-primary i {
        margin: 0;
        font-size: 1.2rem;
    }

    .vendors-wrapper .sale-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
        margin-bottom: 0.6rem;
    }

    .vendors-wrapper .stat-card {
        padding: 0.65rem 0.75rem;
        border-radius: 14px;
    }

    .vendors-wrapper .stat-value {
        font-size: 0.95rem;
    }

    .vendors-wrapper .stat-icon {
        width: 26px;
        height: 26px;
        font-size: 0.82rem;
    }

    .vendors-wrapper .stat-label {
        font-size: 0.82rem;
    }

    .vendors-wrapper .sale-table thead {
        display: none;
    }

    .vendors-wrapper .sale-table tbody tr {
        display: block;
        background: white;
        margin-bottom: 0.4rem;

        border-radius: 12px;
        padding: 0.5rem 0.75rem;

        border: 1px solid rgba(0, 0, 0, 0.02);
        border-left: 3px solid var(--vendor-primary);

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        position: relative;
    }

    .vendors-wrapper .sale-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.2rem 0;
        border: none;
        width: 100%;
        min-height: 20px;
    }

    .vendors-wrapper .sale-table td:first-child {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: auto;
        padding: 0;
    }

    .vendors-wrapper .sale-table td:before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--vendor-muted);
        font-size: 0.82rem;
        text-transform: uppercase;
        opacity: 0.7;
    }

    .vendors-wrapper .sale-table td div {
        font-size: 0.82rem !important;
    }

    .vendors-wrapper .vendor-logo-box {
        display: none;
    }

    .vendors-wrapper #bulk-actions-bar {
        width: 90%;
        bottom: 75px;
        padding: 0.5rem 1rem;
        z-index: 1005;
    }

    .vendors-wrapper .vendor-avatar {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        background: linear-gradient(135deg, var(--vendor-primary) 0%, var(--vendor-secondary) 100%);
        color: white;
        font-weight: 600;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(239, 119, 34, 0.2);
    }

    .vendors-wrapper .fw-900 {
        font-weight: 600 !important;
    }

    .vendors-wrapper .fw-800 {
        font-weight: 800 !important;
    }

    .vendors-wrapper .badge-premium {
        font-size: 0.82rem !important;
        padding: 0.1rem 0.3rem !important;
    }
}

/* Processed from assets/css/themes-gallery.css with prefix thm-gly- */
/* assets/css/themes-gallery.thm-gly-css */
@import url('https://fonts.thm-gly-googleapis.thm-gly-com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* --- Theme Gallery Scoped Styles --- */
.thm-gly-gallery-wrapper {
    background-color: #ffffff;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    color: #1e293b;
    padding-bottom: 80px;
}

/* Page Header */
.thm-gly-gallery-header {
    background: white;
    padding: 1.thm-gly-5rem 1rem;
    border-bottom: 1px solid #cbd5e1;
    position: sticky;
    top: 0;
    z-index: 100;
}

.thm-gly-gallery-title {
    font-size: 1.thm-gly-5rem;
    font-weight: 800;
    letter-spacing: -0.thm-gly-5px;
    margin: 0;
    color: #0f172a;
}

.thm-gly-gallery-subtitle {
    font-size: 0.thm-gly-9rem;
    color: #64748b;
    margin: 0;
}

/* Category Tabs */
.thm-gly-category-tabs {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 1rem 1rem 0 1rem;
    background: white;
    border-bottom: 1px solid #cbd5e1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.thm-gly-category-tabs::-webkit-scrollbar {
    display: none;
}

.thm-gly-cat-tab {
    padding: 0.thm-gly-6rem 1.thm-gly-2rem;
    font-size: 0.thm-gly-9rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.thm-gly-2s;
}

.thm-gly-cat-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.thm-gly-cat-tab:hover {
    color: #475569;
}

/* Grid Layout */
.thm-gly-themes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Theme Card */
.thm-gly-theme-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    transition: all 0.thm-gly-3s cubic-bezier(0.thm-gly-4, 0, 0.thm-gly-2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.thm-gly-theme-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.thm-gly-1);
    border-color: #cbd5e1;
}

.thm-gly-theme-preview {
    height: 180px;
    background: #f1f5f9;
    position: relative;
    overflow: hidden;
}

.thm-gly-theme-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.thm-gly-5s;
}

.thm-gly-theme-card:hover .thm-gly-theme-preview img {
    transform: scale(1.thm-gly-05);
}

/* Badges */
.thm-gly-badge-pro {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.thm-gly-9);
    color: #fbbf24;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.thm-gly-7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.thm-gly-2);
    z-index: 2;
}

.thm-gly-badge-new {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #6366f1;
    color: white;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.thm-gly-7rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 2;
}

.thm-gly-theme-content {
    padding: 1.thm-gly-25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.thm-gly-theme-name {
    font-size: 1.thm-gly-1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.thm-gly-25rem;
}

.thm-gly-theme-desc {
    font-size: 0.thm-gly-85rem;
    color: #64748b;
    line-height: 1.thm-gly-5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.thm-gly-theme-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 1.thm-gly-25rem;
}

.thm-gly-meta-tag {
    font-size: 0.thm-gly-7rem;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    color: #475569;
    font-weight: 600;
}

.thm-gly-theme-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.thm-gly-price-box {
    display: flex;
    flex-direction: column;
}

.thm-gly-price-label {
    font-size: 0.thm-gly-7rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 700;
}

.thm-gly-price-value {
    font-size: 1.thm-gly-25rem;
    font-weight: 800;
    color: #0f172a;
}

.thm-gly-price-value.thm-gly-free {
    color: #10b981;
}

/* Action Buttons */
.thm-gly-btn-preview {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    background: white;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.thm-gly-2s;
    cursor: pointer;
}

.thm-gly-btn-preview:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

.thm-gly-btn-install {
    padding: 8px 16px;
    background: #0f172a;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.thm-gly-9rem;
    transition: all 0.thm-gly-2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.thm-gly-btn-install:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.thm-gly-15);
}

.thm-gly-btn-install.thm-gly-owned {
    background: #dcfce7;
    color: #15803d;
    cursor: default;
    pointer-events: none;
}

.thm-gly-btn-install.thm-gly-active-theme {
    background: #e0e7ff;
    color: #4338ca;
    cursor: default;
    pointer-events: none;
}

/* Modal Overlay Scoped */
.thm-gly-preview-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.thm-gly-8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.thm-gly-preview-modal-overlay.active {
    display: flex;
    animation: fadeIn 0.thm-gly-3s ease;
}

.thm-gly-preview-modal {
    background: white;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.thm-gly-25);
}

/* Responsive */
@media (max-width: 768px) {
    .thm-gly-themes-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .thm-gly-gallery-header {
        padding: 1rem;
    }

    .thm-gly-category-tabs {
        padding: 0 1rem;
    }
}

/* Processed from assets/css/visiting-card.css with prefix vist-card- */
/* assets/css/visiting-card.vist-card-css */
@import url('https://fonts.vist-card-googleapis.vist-card-com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* --- Visiting Card Studio Scoped --- */
.vist-card-visiting-card-studio {
    background: #0f172a;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    color: #cbd5e1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Studio Header */
.vist-card-vc-studio-header {
    background: rgba(15, 23, 42, 0.vist-card-95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.vist-card-1) !important;
    backdrop-filter: blur(10px);
}

.vist-card-vc-studio-header .text-dark {
    color: #f1f5f9 !important;
}

.vist-card-vc-studio-header .btn-light {
    background: rgba(255, 255, 255, 0.vist-card-1) !important;
    color: white !important;
}

.vist-card-vc-studio-header .text-muted {
    color: #94a3b8 !important;
}

/* Viewport3D Simulation */
.vist-card-vc-studio-viewport {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
}

/* Scene Lighting Effects */
.vist-card-vc-scene-lighting {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.vist-card-15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.vist-card-1) 0%, transparent 50%);
}

.vist-card-vc-scale-wrapper {
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 10;
}

/* Card Container on Canvas */
.vist-card-vc-shadow-catcher {
    filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.vist-card-5));
    transition: transform 0.vist-card-5s cubic-bezier(0.vist-card-34, 1.vist-card-56, 0.vist-card-64, 1);
}

.vist-card-vc-preview-area {
    width: 320px;
    /* Standard Mobile Width Simulation */
    min-height: 568px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transform: rotateY(-5deg) rotateX(5deg);
    /* Subtle 3D tilt */
    transition: all 0.vist-card-5s ease;
}

/* Action Shelf */
.vist-card-vc-actions-shelf {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 90%;
    max-width: 400px;
}

.vist-card-action-bar-glass {
    background: rgba(15, 23, 42, 0.vist-card-8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.vist-card-1);
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.vist-card-5);
}

.vist-card-action-btn-secondary {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.vist-card-1);
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.vist-card-2s;
}

.vist-card-action-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.vist-card-2);
    transform: translateY(-3px);
}

.vist-card-action-btn-secondary i {
    font-size: 1.vist-card-1rem;
    color: white !important;
    /* Force white icons in dark mode */
}

.vist-card-divider-v {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.vist-card-1);
}

.vist-card-vc-premium-download-btn {
    padding: 10px 24px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 0.vist-card-9rem;
}

.vist-card-vc-premium-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.vist-card-5);
}

/* Default Theme Styles (Base) */
.vist-card-vc-card-theme-default {
    background: white;
    color: #1e293b;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vist-card-vc-card-header {
    height: 140px;
    background: #f1f5f9;
    position: relative;
}

.vist-card-vc-avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    border: 4px solid white;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.vist-card-1);
}

.vist-card-vc-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vist-card-vc-card-body {
    padding: 60px 20px 20px;
    text-align: center;
    flex-grow: 1;
}

.vist-card-vc-name {
    font-size: 1.vist-card-5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.vist-card-vc-role {
    font-size: 0.vist-card-9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
}

.vist-card-vc-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.vist-card-vc-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    text-align: left;
    transition: all 0.vist-card-2s;
}

.vist-card-vc-contact-item:active {
    background: #cbd5e1;
}

.vist-card-vc-icon {
    width: 36px;
    height: 36px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vist-card-vc-label {
    font-size: 0.vist-card-7rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
}

.vist-card-vc-value {
    font-size: 0.vist-card-9rem;
    font-weight: 600;
    color: #334155;
}

/* Modals Scoped */
.modal-content {
    border-radius: 20px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .vist-card-vc-preview-area {
        transform: none;
        /* No tilt on mobile for clarity */
        border-radius: 0;
        width: 100%;
        height: 100%;
    }

    .vist-card-vc-shadow-catcher {
        filter: none;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .vist-card-vc-scale-wrapper {
        width: 100%;
        height: 100%;
    }

    .vist-card-vc-studio-viewport {
        align-items: flex-start;
        padding-top: 20px;
    }
}

/* Processed from assets/css/payment-cards.css with prefix pay-card- */
/* assets/css/payment-cards.pay-card-css */
@import url('https://fonts.pay-card-googleapis.pay-card-com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

.pay-card-pc-studio {
    background: #0f172a;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
    color: #cbd5e1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Studio Header */
.pay-card-pc-studio-header {
    background: rgba(15, 23, 42, 0.pay-card-95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.pay-card-1) !important;
    backdrop-filter: blur(10px);
}

.pay-card-pc-studio-header .text-dark {
    color: #f1f5f9 !important;
}

/* Viewport */
.pay-card-pc-studio-viewport {
    flex-grow: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
    perspective: 1500px;
}

/* Lighting */
.pay-card-pc-scene-lighting {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(16, 185, 129, 0.pay-card-1) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.pay-card-1) 0%, transparent 40%);
}

.pay-card-pc-scale-wrapper {
    transform-style: preserve-3d;
    z-index: 10;
}

.pay-card-pc-shadow-catcher {
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.pay-card-6));
    transition: transform 0.pay-card-6s cubic-bezier(0.pay-card-2, 0.pay-card-8, 0.pay-card-2, 1);
}

.pay-card-pc-preview-area {
    width: 340px;
    height: 540px;
    border-radius: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glass Payment Card Base */
.pay-card-pc-card-glass {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.pay-card-1);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.pay-card-2);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.pay-card-1);
}

.pay-card-pc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pay-card-pc-chip {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #cbd5e1 0%, #cbd5e1 100%);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.pay-card-8;
}

.pay-card-pc-chip i {
    color: #475569;
    font-size: 24px;
}

.pay-card-pc-contactless {
    color: rgba(255, 255, 255, 0.pay-card-8);
    font-size: 24px;
    transform: rotate(90deg);
}

.pay-card-pc-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}

.pay-card-pc-qr-section {
    background: white;
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.pay-card-2);
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pay-card-pc-qr-placeholder {
    color: #cbd5e1;
    font-size: 60px;
}

.pay-card-pc-qr-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.pay-card-pc-details {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.pay-card-3);
}

.pay-card-pc-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.pay-card-7;
    margin-bottom: 4px;
}

.pay-card-pc-value {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.pay-card-pay-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.pay-card-pc-bank-details {
    text-align: left;
    color: white;
}

.pay-card-pc-bank-name {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pay-card-pc-ac-number {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.pay-card-9;
}

.pay-card-pc-ifsc {
    font-size: 13px;
    opacity: 0.pay-card-7;
}

.pay-card-pc-actions-shelf {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    width: 90%;
    max-width: 480px;
}

.pay-card-pc-action-bar-glass {
    background: rgba(15, 23, 42, 0.pay-card-8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.pay-card-1);
}

/* Edit Modal */
.pay-card-color-dot {
    transition: transform 0.pay-card-2s;
}

.pay-card-color-dot:hover {
    transform: scale(1.pay-card-1);
}

.pay-card-color-dot.active {
    transform: scale(1.pay-card-2);
}

/* Responsiveness */
@media (max-width: 768px) {
    .pay-card-pc-preview-area {
        width: 100%;
        max-width: 320px;
        height: auto;
        aspect-ratio: 9/16;
    }
}

/* --- Compatibility Layer for Dynamic Content (DB Themes) --- */

/* Visiting Cards Internals */
.visiting-card-studio .vc-card-theme-default {
    background: white;
    color: #1e293b;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.visiting-card-studio .vc-card-header {
    height: 140px;
    background: #f1f5f9;
    position: relative;
}

.visiting-card-studio .vc-avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    border: 4px solid white;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.visiting-card-studio .vc-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visiting-card-studio .vc-card-body {
    padding: 60px 20px 20px;
    text-align: center;
    flex-grow: 1;
}

.visiting-card-studio .vc-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.visiting-card-studio .vc-role {
    font-size: 0.9rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 20px;
}

.visiting-card-studio .vc-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.visiting-card-studio .vc-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    text-align: left;
    transition: all 0.2s;
}

.visiting-card-studio .vc-contact-item:active {
    background: #cbd5e1;
}

.visiting-card-studio .vc-icon {
    width: 36px;
    height: 36px;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visiting-card-studio .vc-label {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
}

.visiting-card-studio .vc-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}

/* Payment Cards Internals */
.pc-studio .pc-card-glass {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.pc-studio .pc-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-studio .pc-chip {
    width: 45px;
    height: 35px;
    background: linear-gradient(135deg, #cbd5e1 0%, #cbd5e1 100%);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.pc-studio .pc-chip i {
    color: #475569;
    font-size: 24px;
}

.pc-studio .pc-contactless {
    color: rgba(255, 255, 255, 0.8);
    font-size: 24px;
    transform: rotate(90deg);
}

.pc-studio .pc-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 0;
}

.pc-studio .pc-qr-section {
    background: white;
    padding: 8px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-studio .pc-qr-placeholder {
    color: #cbd5e1;
    font-size: 60px;
}

.pc-studio .pc-qr-section img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.pc-studio .pc-details {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.pc-studio .pc-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-bottom: 4px;
}

.pc-studio .pc-value {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

.pc-studio .pay-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.pc-studio .pc-bank-details {
    text-align: left;
    color: white;
}

.pc-studio .pc-bank-name {
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pc-studio .pc-ac-number {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.pc-studio .pc-ifsc {
    font-size: 13px;
    opacity: 0.7;
}

.pc-studio .pc-logo-area {
    opacity: 0.5;
}

/* Prefixed Styles from assets/css/profile.css */
/* Professional & Compact Profile Design */
:root {
    --p-primary: #6366f1;
    --p-bg: #ffffff;
    --p-card-bg: #ffffff;
    --p-border: #f1f5f9;
    --p-text-main: #1e293b;
    --p-text-muted: #64748b;
    --p-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --p-radius: 12px;
}

.pro-profile-container {
    background: var(--p-bg);
    min-height: calc(100vh - 70px);
    padding: 1.5rem;
    font-family: 'Inter', 'Outfit', sans-serif;
}

/* Compact Header Layout */
.pro-profile-main-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* User Profile Card */
.pro-user-profile-card {
    background: var(--p-card-bg);
    border-radius: var(--p-radius);
    padding: 1.5rem;
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow);
    height: fit-content;
    text-align: center;
}

.pro-p-avatar-section {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
}

.pro-p-avatar-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    /* background: linear-gradient(135deg, var(--p-primary), #a855f7); */
}

.pro-p-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
}

.pro-p-avatar-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--p-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border: 1px solid var(--p-border);
}

.pro-p-user-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p-text-main);
    margin-bottom: 0.25rem;
}

.pro-p-user-email {
    font-size: 0.8rem;
    color: var(--p-text-muted);
    margin-bottom: 1rem;
}

.pro-p-user-badge {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: #eef2ff;
    color: var(--p-primary);
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats Row */
.pro-p-stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--p-border);
    border-bottom: 1px solid var(--p-border);
}

.pro-p-stat-item {
    text-align: center;
}

.pro-p-stat-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--p-text-main);
}

.pro-p-stat-lbl {
    font-size: 0.82rem;
    color: var(--p-text-muted);
}

/* Contact List */
.pro-p-contact-list {
    text-align: left;
}

.pro-p-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pro-p-contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--p-text-muted);
}

.pro-p-contact-info {
    flex: 1;
}

.pro-p-contact-label {
    display: block;
    font-size: 0.82rem;
    color: var(--p-text-muted);
    text-transform: uppercase;
}

.pro-p-contact-value {
    font-size: 0.8rem;
    color: var(--p-text-main);
    font-weight: 500;
}

/* Tabs System */
.pro-p-content-card {
    background: var(--p-card-bg);
    border-radius: var(--p-radius);
    border: 1px solid var(--p-border);
    box-shadow: var(--p-shadow);
    display: flex;
    flex-direction: column;
}

.pro-p-tabs-nav {
    display: flex;
    gap: 1.5rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--p-border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.pro-p-tabs-nav::-webkit-scrollbar {
    display: none;
}

.pro-p-tab-trigger {
    padding: 1rem 1.5rem;
    /* Add horizontal padding explicitly */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--p-text-muted);
    border: none;
    background: transparent;
    /* Explicit */
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    margin-right: 0.5rem;
    /* Fallback spacing */
}

.pro-p-tab-trigger:hover {
    color: var(--p-primary);
}

.pro-p-tab-trigger.active {
    color: var(--p-primary);
}

/* .pro-p-tab-trigger.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--p-primary);
} */

.pro-p-tab-pane {
    /* padding: 1.5rem; */
    display: none;
}

.pro-p-tab-pane.active {
    display: block;
}

/* Forms & Inputs */
.pro-p-form-group {
    margin-bottom: 1rem;
}

.pro-p-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--p-text-main);
    margin-bottom: 0.4rem;
}

.pro-p-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid var(--p-border);
    border-radius: 6px;
    transition: all 0.2s;
}

.pro-p-input:focus {
    outline: none;
    border-color: var(--p-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Buttons */
.pro-p-btn-primary {
    background: var(--p-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.2s;
}

.pro-p-btn-primary:hover {
    opacity: 0.9;
}

.pro-p-btn-outline {
    background: transparent;
    color: var(--p-text-main);
    border: 1px solid var(--p-border);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

/* Performance Box */
.pro-performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.pro-perf-card {
    padding: 1rem;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--p-border);
}

.pro-perf-label {
    font-size: 0.82rem;
    color: var(--p-text-muted);
    text-transform: uppercase;
}

.pro-perf-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--p-text-main);
    margin-top: 0.25rem;
}

/* Quick Actions Extra */
.pro-p-quick-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.pro-p-action-chip {
    flex: 1;
    min-width: 140px;
    /* Slightly wider */
    padding: 0.6rem 1rem;
    background: #f1f5f9;
    color: var(--p-text-main);
    font-size: 0.8rem;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center text */
    gap: 0.5rem;
    transition: all 0.2s;
    border: 1px solid transparent;
    /* Fix for button borders */
    cursor: pointer;
}

.pro-p-action-chip:hover {
    background: #cbd5e1;
    transform: translateY(-1px);
}

.pro-p-action-chip.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Performance Grid */
.pro-performance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pro-perf-card {
    background: #fff;
    border: 1px solid var(--p-border);
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.2s;
}

.pro-perf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.pro-perf-label {
    display: block;
    font-size: 0.82rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pro-perf-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--p-primary);
}

/* Info Box */
.pro-p-info-box {
    background: #fff;
    border: 1px solid var(--p-border);
    padding: 15px;
    border-radius: 12px;
}

.pro-p-box-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

/* Cropper Styles */
.img-container img {
    display: block;
    max-width: 100%;
}

/* Responsive Fixes */
@media (max-width: 768px) {
    .pro-performance-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .pro-profile-main-layout {
        grid-template-columns: 1fr;
    }


    .pro-profile-container {
        padding: 0.5rem;
    }

    .pro-user-profile-card,
    .pro-p-content-card {
        padding: 1.25rem;
        border: none;
        /* Cleaner look on mobile */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Tabs scrollable fix */
    .pro-p-tabs-nav {
        gap: 0.75rem;
        padding: 0 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        border-bottom: 1px solid #f1f5f9;
        margin-bottom: 0;
        scrollbar-width: none;
    }

    .pro-p-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .pro-p-tab-trigger {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.82rem;
        /* Smaller text */
        padding: 0.8rem;
        margin-right: 0;
    }

    /* Performance Stats: 2 cols is fine, but lets ensure gap is good */
    .pro-performance-grid {
        grid-template-columns: 1fr 1fr;
        /* Force 2 columns */
        gap: 10px;
    }

    .pro-performance-grid .pro-perf-card:last-child {
        grid-column: span 2;
        /* Full width for last item if odd */
    }

    .pro-perf-card {
        padding: 12px 8px;
    }

    .pro-perf-value {
        font-size: 0.95rem;
    }

    .pro-p-tab-pane {
        /* padding: 1.25rem 1rem; */
    }

    .pro-p-info-box {
        padding: 12px;
    }

    /* Center profile info on mobile */
    .pro-p-user-name {
        font-size: 1.25rem;
    }

    .pro-p-contact-list {
        margin-top: 1rem;
    }
}





/* Modals */
.pro-modern-modal {
    border-radius: 12px;
}

.modal-header,
.modal-footer {
    padding: 1rem 1.5rem;
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
}

/* Utilities */
.d-none {
    display: none;
}

.text-danger {
    color: #ef4444;
}

/* assets/css/company-setup.css (Merged into style.css) */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* Professional & Compact Company Setup Design */
:root {
    --cs-primary: #6366f1;
    --cs-bg: #ffffff;
    --cs-card-bg: #ffffff;
    --cs-border: #f1f5f9;
    --cs-text-main: #1e293b;
    --cs-text-muted: #64748b;
    --cs-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --cs-radius: 12px;
}

.setup-container {
    background: var(--cs-bg);
    min-height: calc(100vh - 70px);
}

.company-view-container {
    display: none;
}

.company-view-container.cs-active {
    display: grid !important;
}

/* Scoped layout for Company Setup */
.cs-main-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    /* padding: 1.5rem; */
}

.cs-profile-card {
    background: var(--cs-card-bg) !important;
    border-radius: var(--cs-radius);
    padding: 1.5rem;
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow);
    height: fit-content;
    text-align: center;
}

.cs-avatar-section {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    padding: 3px;
    background: linear-gradient(135deg, var(--cs-primary), #a855f7);
    border-radius: 12px;
}

.cs-avatar-wrapper {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-avatar-wrapper img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.cs-user-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cs-text-main);
}

.cs-user-email {
    font-size: 0.8rem;
    color: var(--cs-text-muted);
}

.cs-user-badge {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: #eef2ff;
    color: var(--cs-primary);
    border-radius: 4px;
    text-transform: uppercase;
}

.cs-stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--cs-border);
    border-bottom: 1px solid var(--cs-border);
}

.cs-stat-val {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
}

.cs-stat-lbl {
    font-size: 0.82rem;
    color: var(--cs-text-muted);
}

.cs-contact-list {
    text-align: left;
}

.cs-contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cs-contact-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    color: var(--cs-text-muted);
}

.cs-contact-label {
    display: block;
    font-size: 0.82rem;
    color: var(--cs-text-muted);
}

.cs-contact-value {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Tabs */
.cs-content-card {
    background: var(--cs-card-bg);
    border-radius: var(--cs-radius);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-shadow);
    display: flex;
    flex-direction: column;
}

.cs-tabs-nav {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--cs-border);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.cs-tabs-nav::-webkit-scrollbar {
    display: none;
}

.cs-tab-trigger {
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--cs-text-muted);
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.cs-tab-trigger.cs-active {
    color: var(--cs-primary);
}

.cs-tab-trigger.cs-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    /* background: var(--cs-primary); */
}

.cs-tab-pane {
    padding: 1.5rem;
    display: none;
}

.cs-tab-pane.cs-active {
    display: block;
}

/* Wizard Logic */
.cs-wizard-layout {
    display: flex;
    max-width: 1200px;
    margin: 2rem auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 600px;
}

.cs-setup-sidebar {
    width: 300px;
    background: #ffffff;
    border-right: 1px solid var(--cs-border);
    padding: 2rem;
}

.cs-step-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--cs-text-muted);
}

.cs-step-item.cs-active {
    background: #fff;
    color: var(--cs-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.cs-step-item.cs-completed {
    color: #10b981;
}

.cs-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #64748b;
}

.cs-step-item.cs-active .cs-step-indicator {
    background: var(--cs-primary);
    color: #fff;
}

.cs-step-item.cs-completed .cs-step-indicator {
    background: #10b981;
    color: #fff;
}

.cs-form-content-area {
    flex: 1;
    padding: 3rem;
}

.cs-form-step {
    display: none;
}

.cs-form-step.cs-active {
    display: block;
    animation: csFadeIn 0.3s ease;
}

@keyframes csFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom UI Elements */
.cs-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    background: #fdfdfd;
}

.cs-input:focus {
    outline: none;
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.cs-form-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.cs-btn-primary {
    background: var(--cs-primary);
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
}

.cs-btn-outline {
    background: transparent;
    color: var(--cs-text-main);
    border: 1px solid var(--cs-border);
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.cs-info-box {
    background: #fff;
    border: 1px solid var(--cs-border);
    padding: 1.25rem;
    border-radius: 12px;
}

.cs-box-title {
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    color: var(--cs-text-main);
}

.cs-bank-card-visual {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}

.cs-bank-card-visual .bank-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.cs-bank-card-visual .ac-num {
    font-family: monospace;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.cs-perf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cs-perf-card {
    background: #fff;
    border: 1px solid var(--cs-border);
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
}

.cs-perf-label {
    font-size: 0.82rem;
    color: var(--cs-text-muted);
    text-transform: uppercase;
}

.cs-perf-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--cs-primary);
}

.cs-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.cs-upload-zone:hover {
    background: #f1f5f9;
    border-color: var(--cs-primary);
}

.cs-preview-image {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
    margin-top: 10px;
    display: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.cs-sig-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cs-border);
}

.cs-sig-tab {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--cs-text-muted);
}

.cs-sig-tab.cs-active {
    color: var(--cs-primary);
    border-bottom: 2px solid var(--cs-primary);
    font-weight: 600;
}

.cs-sig-content-pane {
    display: none;
}

.cs-sig-content-pane.cs-active {
    display: block;
}

.cs-sig-canvas {
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    width: 100%;
    background: #fff;
}

.cs-sig-type-preview {
    font-family: 'Great Vibes', cursive;
    font-size: 2.5rem;
    text-align: center;
    padding: 1rem;
    border: 1px dashed var(--cs-border);
    margin-top: 1rem;
}

/* View Mode Specific Fixed Images */
.cs-view-qr-img,
.cs-view-sig-img {
    max-width: 100px;
    height: auto;
    object-fit: contain;
    display: block;
}

#view-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Responsive Rules for Company Setup */
@media (max-width: 992px) {
    .cs-main-layout {
        grid-template-columns: 1fr;
    }

    .cs-wizard-layout {
        flex-direction: column;
        margin: 1rem;
        min-height: auto;
    }

    .cs-setup-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--cs-border);
        padding: 1rem;
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
    }

    .cs-setup-sidebar h4 {
        display: none;
    }

    .cs-step-item {
        margin-bottom: 0;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .cs-step-item span {
        display: none;
    }

    .cs-setup-sidebar .mt-5 {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .setup-container {
        /* padding-top: 0.5rem; */
    }

    .cs-main-layout {
        padding: 0.5rem;
        gap: 1rem;
    }

    .cs-profile-card {
        padding: 1.25rem 1rem;
    }

    .cs-avatar-section {
        width: 80px;
        height: 80px;
    }

    .cs-tabs-nav {
        gap: 0.75rem;
        padding: 0 1rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .cs-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .cs-tab-trigger {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.82rem;
        /* Very small as requested */
        padding: 0.4rem 0.6rem;
    }

    .cs-perf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .cs-perf-grid .cs-perf-card:last-child {
        grid-column: span 2;
    }

    .cs-tab-pane {
        padding: 1.25rem 0.75rem;
    }

    .cs-form-content-area {
        padding: 1.5rem 1rem;
    }

    .cs-form-step h4 {
        font-size: 1.1rem;
        margin-bottom: 1.25rem;
    }

    .cs-btn-primary,
    .cs-btn-outline {
        width: 100%;
        justify-content: center;
    }

    .d-flex.justify-content-between {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }

    .cs-bank-card-visual {
        padding: 1.25rem 1rem;
    }

    .cs-bank-card-visual .bank-name {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .cs-bank-card-visual .ac-num {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .cs-stats-mini {
        margin: 1rem 0;
    }

    .cs-info-box {
        padding: 1rem;
    }

    .cs-step-item span {
        display: inline-block;
        font-size: 0.82rem;
    }

    .cs-step-indicator {
        width: 24px;
        height: 24px;
        font-size: 0.82rem;
    }
}

/* Top Products Styling */
.pro-p-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--p-border);
}

.pro-p-product-item:last-child {
    border-bottom: none;
}

.pro-p-product-name {
    font-size: 0.85rem;
    color: var(--p-text-main);
    font-weight: 500;
}

.pro-p-product-badge {
    font-size: 0.82rem;
    padding: 4px 8px;
    background: #f1f5f9;
    color: var(--p-text-muted);
    border-radius: 6px;
    font-weight: 600;
}

/* Outstanding Summary Styling */
.pro-p-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pro-p-label {
    font-size: 0.82rem;
    color: var(--p-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-p-amount {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-top: 4px;
}

.pro-text-success {
    color: #10b981;
}

.pro-text-danger {
    color: #ef4444;
}

/* Custom Progress Bar */
.pro-p-progress-track {
    width: 100%;
    height: 6px;
    background: #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
}

.pro-p-progress-bar {
    height: 100%;
    background: #10b981;
    border-radius: 10px;
    transition: width 0.4s ease;
}

/* Assets from settings.css */
/* .set- Namespaced Settings Page Styles */

:root {
    --set-primary: #6366f1;
    --set-bg: #ffffff;
    --set-card-bg: #ffffff;
    --set-border: #f1f5f9;
    --set-text-main: #1e293b;
    --set-text-muted: #64748b;
    --set-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --set-radius: 12px;
}

.set-container {
    background: var(--set-bg);
    min-height: calc(100vh - 70px);
    padding: 1.5rem;
    font-family: 'Inter', 'Outfit', sans-serif;
}

/* Header */
.set-header {
    background: #eef2ff !important;
    /* bg-info-subtle equivalent match */
    padding: 1.5rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: var(--set-radius);
}

.set-main-layout {
    display: flex;
    justify-content: center;
    padding-bottom: 3rem;
}

.set-card-col {
    width: 100%;
    max-width: 600px;
}

/* Card Styles */
.set-content-card {
    background: var(--set-card-bg);
    border-radius: var(--set-radius);
    border: 1px solid var(--set-border);
    box-shadow: var(--set-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.set-card-body {
    padding: 1.5rem;
}

.set-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--set-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.set-section-title.danger {
    color: #ef4444;
}

/* Forms */
.set-form-group {
    margin-bottom: 1rem;
}

.set-input-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Inputs */
.set-input-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    border: 1px solid var(--set-border);
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s;
}

.set-input-control:focus {
    outline: none;
    border-color: var(--set-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.set-input-readonly {
    background: #ffffff;
    color: var(--set-text-muted);
    cursor: not-allowed;
}

.set-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--set-text-muted);
    margin-bottom: 0.4rem;
}

/* Buttons */
.set-btn-primary {
    background: var(--set-primary);
    color: white;
    border: none;
    width: 100%;
    padding: 0.8rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
}

.set-btn-primary:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px -1px rgba(99, 102, 241, 0.3);
}

.set-btn-back {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--set-text-main);
    box-shadow: var(--set-shadow);
    transition: all 0.2s;
}

.set-btn-back:hover {
    transform: translateX(-3px);
}

/* Danger Zone */
.set-danger-card {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: var(--set-radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Responsive */
@media (max-width: 768px) {
    .set-container {
        padding: 0;
    }

    .set-header {
        margin: 0;
        border-radius: 0;
        padding: 1.25rem 1rem;
    }

    .set-main-layout {
        padding: 1rem;
    }

    .set-card-body {
        padding: 1.25rem;
    }

    .set-input-control {
        font-size: 16px;
        /* Prevent zoom on iOS */
    }
}

.row {
    /* --bs-gutter-x: 0 !important; */
}

/* --- COMPACT HIGH DENSITY OVERRIDES (Step 3226+) --- */

/* Reduce Card Padding & Radius */
.pro-user-profile-card,
.pro-p-content-card {
    padding: 1rem !important;
    border-radius: 16px !important;
}

/* Avatar - make smaller */
.pro-p-avatar-section {
    width: 80px !important;
    height: 80px !important;
    margin-bottom: 0.5rem !important;
}

.pro-p-avatar-wrapper {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 6px rgba(255, 107, 53, 0.15) !important;
}

/* Typography - Scale Down */
.pro-p-user-name {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
}

.pro-p-user-email {
    font-size: 0.8rem !important;
    margin-bottom: 8px !important;
}

.pro-p-user-badge {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.82rem !important;
}

/* Mini Stats - Tighter */
.pro-p-stats-mini {
    margin-top: 1rem !important;
    padding: 0.8rem !important;
    border-radius: 12px !important;
}

.pro-p-stat-val {
    font-size: 1rem !important;
}

.pro-p-stat-lbl {
    font-size: 0.82rem !important;
}

/* Tabs - Ultra Compact */
.pro-p-tabs-nav {
    padding: 4px !important;
    gap: 4px !important;
    min-height: auto !important;
    border-radius: 8px !important;
}

.pro-p-tab-trigger {
    padding: 0.35rem 0.8rem !important;
    font-size: 0.82rem !important;
    border-radius: 16px !important;
}

/* Performance Cards - Compact */
.pro-perf-card {
    padding: 0.8rem !important;
    border-radius: 12px !important;
    min-height: auto !important;
}

.pro-perf-label {
    font-size: 0.82rem !important;
    margin-bottom: 0.2rem !important;
}

.pro-perf-value {
    font-size: 1.2rem !important;
}

/* Contact List */
.pro-p-contact-item {
    margin-bottom: 0.8rem !important;
}

.pro-p-contact-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
}

.pro-p-contact-label {
    font-size: 0.82rem !important;
}

.pro-p-contact-value {
    font-size: 0.8rem !important;
}

/* Info Box */
.pro-p-info-box {
    padding: 1rem !important;
}

.pro-p-box-title {
    font-size: 0.9rem !important;
}

/* Permission Locks */
.feature-locked-visual {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: auto !important;
    /* Allow click to show toast */
    filter: grayscale(0.5) !important;
}


/* =========================================
   LUXURY UI COMPONENTS (Swal & Settings)
   ========================================= */

/* Luxury SweetAlert Redesign */
.swal-lux-popup {
    border-radius: 32px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

.swal-lux-header {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swal-lux-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.swal-lux-content {
    padding: 30px 40px !important;
}

.swal-lux-btn-confirm {
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    background: var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(239, 119, 34, 0.2) !important;
}

.swal-lux-btn-cancel {
    padding: 12px 30px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* Premium Settings Components */
.sb-set-overlay {
    background: #ffffff;
    min-height: 100vh;
}

.sb-set-card {
    background: white;
    border-radius: 20px;
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    padding: 24px;
}

.sb-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sb-field-input {
    width: 100%;
    padding: 12px 16px;
    background: #fcfdfe;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    transition: all 0.25s;
}

.sb-field-input:focus {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(239, 119, 34, 0.1);
    outline: none;
}

.sb-set-btn-save {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 800;
    transition: all 0.3s;
    box-shadow: 0 10px 25px rgba(239, 119, 34, 0.2);
}

.sb-set-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(239, 119, 34, 0.3);
}


/* Additional Design Utilities */
.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 600 !important;
}

.bg-primary-subtle {
    background-color: rgba(239, 119, 34, 0.1) !important;
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.1) !important;
}

.bg-info-subtle {
    background-color: rgba(11, 166, 223, 0.1) !important;
}

.text-primary-custom {
    color: #161E54 !important;
}

.ps-5 {
    padding-left: 3rem !important;
}


/* MOBILE OPTIMIZATIONS FOR LUXURY COMPONENTS */
@media (max-width: 576px) {
    .swal-lux-popup {
        width: 95% !important;
        margin: 10px !important;
    }

    .swal-lux-header {
        padding: 30px 15px !important;
    }

    .swal-lux-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 28px !important;
    }

    .swal-lux-content {
        padding: 20px 25px !important;
    }

    .sb-set-header {
        padding: 1.5rem 1rem !important;
    }

    .sb-set-header h4 {
        font-size: 1.1rem !important;
    }

    .sb-set-header p {
        font-size: 0.82rem !important;
    }

    .sb-set-card {
        padding: 20px 16px !important;
        border-radius: 20px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .sb-set-overlay {
        background: white !important;
        /* Pure white on mobile for app look */
    }

    .sb-field-input {
        padding: 14px 18px !important;
        /* Larger for touch */
        font-size: 16px !important;
        /* Prevent iOS zoom */
        border-radius: 14px !important;
    }

    .sb-set-btn-save {
        padding: 16px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
        margin-top: 10px;
    }

    .sb-set-back {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Floating Animation for Header Icon */
@keyframes float-badge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.swal-lux-icon i {
    animation: float-badge 3s ease-in-out infinite;
}

/* --- Compact Sales Page Guide Section --- */
.sb-sales-guide-container {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.03) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 16px;
    border: 1px solid #eef2ff;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 20px -5px rgba(99, 102, 241, 0.08);
}

.sb-sales-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.sb-guide-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-guide-brand i {
    width: 32px;
    height: 32px;
    background: #6366f1;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.sb-guide-title-text {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sb-lang-toggle {
    background: #f1f5f9;
    padding: 2px;
    border-radius: 8px;
    display: flex;
    gap: 1px;
}

.sb-lang-toggle .lang-btn {
    border: none !important;
    background: transparent !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    height: auto !important;
}

.sb-lang-toggle .lang-btn.active {
    background: white !important;
    color: #6366f1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.sb-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.sb-guide-card {
    background: white;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-guide-card:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.01);
}

.sb-card-badge {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    width: fit-content;
}

.sb-card-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
}

.sb-card-desc {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

.sb-badge-revenue {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.sb-badge-collection {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sb-badge-risk {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.sb-badge-audit {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

@media (max-width: 600px) {
    .sb-sales-guide-container {
        padding: 0.75rem 1rem;
    }

    .sb-sales-guide-header {
        margin-bottom: 0.75rem;
    }

    .sb-guide-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .sb-guide-card {
        padding: 0.75rem;
    }

    .sb-card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* --- Interactive Onboarding Walkthrough --- */
.sb-onboarding-dummy-card {
    background: white;
    border-radius: 12px;
    border: 2px solid #6366f1;
    padding: 12px;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
    position: relative;
    margin: 20px 0;
}

.sb-spotlight-pointer {
    position: absolute;
    background: #6366f1;
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.sb-spotlight-pointer::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

/* Pointers Position Classes */
.ptr-inv-no {
    top: -10px;
    left: 10px;
}

.ptr-inv-no::after {
    bottom: -12px;
    left: 20px;
    border-top-color: #6366f1;
}

.ptr-client {
    bottom: -10px;
    left: 20px;
}

.ptr-client::after {
    top: -12px;
    left: 20px;
    border-bottom-color: #6366f1;
}

.ptr-amount {
    top: 20%;
    right: -20px;
}

.ptr-amount::after {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #6366f1;
}

.ptr-status {
    bottom: 10px;
    right: -10px;
}

.ptr-status::after {
    left: 50%;
    top: -12px;
    transform: translateX(-50%);
    border-bottom-color: #6366f1;
}

.sb-highlight-pulse {
    animation: sb-pulse-blue 2s infinite;
    border-radius: 50%;
}

@keyframes sb-pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.onboarding-lang-switch {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 100;
}

.onboarding-step-body {
    min-height: 280px;
}

/* --- PREMIUM DASHBOARD UTILITIES (Tailwind Compat) --- */
.absolute {
    position: absolute !important;
}

.relative {
    position: relative !important;
}

.top-0 {
    top: 0 !important;
}

.right-0 {
    right: 0 !important;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

.text-xs {
    font-size: 0.82rem !important;
    line-height: 1rem !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.tracking-wider {
    letter-spacing: 0.05em !important;
}

.w-max {
    width: max-content !important;
}

.opacity-5 {
    opacity: 0.05 !important;
}

.opacity-10 {
    opacity: 0.1 !important;
}

.opacity-70 {
    opacity: 0.7 !important;
}

.opacity-80 {
    opacity: 0.8 !important;
}

.transform {
    transform: var(--tw-transform);
}

.translate-x-2 {
    --tw-translate-x: 0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

.-translate-y-2 {
    --tw-translate-y: -0.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y));
}

/* Initialize vars for transform */
.transform,
.translate-x-2,
.-translate-y-2 {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

/* Colors */
.text-indigo-600 {
    color: #4f46e5 !important;
}

.text-indigo-800 {
    color: #3730a3 !important;
}

.text-emerald-500 {
    color: #10b981 !important;
}

.text-emerald-700 {
    color: #047857 !important;
}

.text-gray-400 {
    color: #9ca3af !important;
}

.text-gray-500 {
    color: #6b7280 !important;
}

.text-gray-600 {
    color: #4b5563 !important;
}

.text-gray-800 {
    color: #1f2937 !important;
}

.text-white {
    color: #ffffff !important;
}

.text-blue-600 {
    color: #2563eb !important;
}

.text-green-600 {
    color: #16a34a !important;
}

.text-orange-600 {
    color: #ea580c !important;
}

.text-red-600 {
    color: #dc2626 !important;
}

.text-purple-600 {
    color: #9333ea !important;
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.bg-green-50 {
    background-color: #f0fdf4 !important;
}

.bg-blue-50 {
    background-color: #ffffff !important;
}

/* Gradients */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-indigo-600 {
    --tw-gradient-from: #4f46e5;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(79, 70, 229, 0));
}

.to-indigo-800 {
    --tw-gradient-to: #3730a3;
}

.from-emerald-500 {
    --tw-gradient-from: #10b981;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
}

.to-emerald-700 {
    --tw-gradient-to: #047857;
}

/* Additional Dashboard Tweaks */
.sb-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.pulse-badge {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}


/* --- Dashboard Grid Layout --- */
.d-grid-c {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (min-width: 768px) {
    .d-grid-c {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .d-grid-c {
        grid-template-columns: repeat(4, 1fr);
    }
}

.grid-full {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .grid-half-md {
        grid-column: span 1;
    }

    .grid-full-md {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1200px) {
    .grid-span-2-lg {
        grid-column: span 2;
    }
}

/* Compact Card Styling */
.compact-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.compact-card .card-head {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.compact-card .card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: #334155;
}


/* --- Premium Dashboard V2 (Refined) --- */
.bg-gradient-indigo {
    background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%) !important;
    color: white !important;
}

.bg-gradient-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.bg-gradient-violet {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    color: white !important;
}

.bg-gradient-amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.sb-card {
    border: none !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.sb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.hero-label {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.hero-value {
    font-size: 1.75rem;
    font-weight: 800;
    margin-top: 4px;
}

.glass-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 5rem;
    opacity: 0.12;
    transform: rotate(-15deg);
    pointer-events: none;
}

.compact-card {
    border-radius: 16px !important;
    border: 1px solid #f1f5f9 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.card-head {
    background: #fff !important;
    border-bottom: 1px solid #ffffff !important;
    padding: 16px 20px !important;
}

.card-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.dense-list-item {
    padding: 12px 16px !important;
    border-bottom: 1px solid #ffffff !important;
    transition: background 0.2s;
}

.dense-list-item:hover {
    background: #ffffff;
}

.dense-list-item:last-child {
    border-bottom: none !important;
}

.trend-badge {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    font-weight: 600;
}

/* --- Dashboard Header (Laptop/Desktop) --- */
.dash-compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    /* Ensure white background on desktop */
    border-bottom: 1px solid #f1f5f9;
    /* margin-bottom: 24px; */
    border-radius: 12px;
    /* Slight radius for floating look or 0 for full width depending on layout */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* On mobile, it might be more compact, but user asked for laptop */
@media (max-width: 767px) {
    .dash-compact-header {
        padding: 14px 20px;
        /* margin-bottom: 16px; */
        border-radius: 0;
        background: transparent;
        /* Start transparent at extreme top */
        border-bottom: none;
        position: sticky;
        top: 0;
        z-index: 1000;
        will-change: transform, background;
    }

    /* Scrolled State: Premium Frosty Look */
    .dash-compact-header.dash-header-scrolled {
        background: rgba(255, 255, 255, 0.90) !important;
        backdrop-filter: blur(14px) saturate(1.8) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.8) !important;
        box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.1) !important;
        border-bottom: 1px solid rgba(241, 245, 249, 0.5) !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.dash-title-sm {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
}

.dash-date-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 99px;
    /* Pill shape */
    transition: all 0.2s ease;
    cursor: pointer;
}

.dash-date-pill:hover {
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.action-group-container {
    position: relative;
    /* For dropdown positioning */
}

/* Custom Dropdown Menu */
.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    min-width: 160px;
    display: none;
    /* Hidden by default */
    overflow: hidden;
    padding: 4px;
}

.dropdown-menu-custom.show {
    display: block;
    animation: fadeInDown 0.2s ease-out;
}

.menu-item {
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #475569;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.15s;
}

.menu-item:hover {
    background: #f1f5f9;
    color: #0f172a;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Quick Actions Strip (Premium Desktop/Laptop) --- */
@media (min-width: 992px) {
    .action-strip.grid-actions {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 12px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 24px;
        border-radius: 28px;
        border: 1px solid rgba(241, 245, 249, 0.5);
        box-shadow: 0 10px 40px -10px rgba(15, 23, 42, 0.05);
        margin: 0 16px 32px 16px;
        transition: all 0.4s ease;
    }

    /* Individual Button as a Sleek Tile */
    .action-btn {
        flex: 1;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 16px 8px;
        text-decoration: none;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        min-height: 110px;
        position: relative;
        z-index: 10;
        min-width: 0;
    }

    .action-btn:hover {
        background: #ffffff;
        border-color: #f1f5f9;
        transform: translateY(-8px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    }

    /* Icon Container with Premium Look */
    .action-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        font-size: 1.3rem;
        transition: all 0.4s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.02);
        position: relative;
        z-index: 2;
    }

    .action-btn:hover .action-icon {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
    }

    /* Text Styling */
    .action-label {
        font-size: 0.85rem;
        font-weight: 800;
        color: #475569;
        letter-spacing: 0.01em;
        text-align: center;
        transition: color 0.3s ease;
        margin-top: 4px;
    }

    .action-btn:hover .action-label {
        color: #0f172a;
    }

    /* Animated Dot indicator on hover */
    .action-btn::after {
        content: '';
        position: absolute;
        bottom: 10px;
        width: 4px;
        height: 4px;
        background: currentColor;
        border-radius: 50%;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }

    .action-btn:hover::after {
        opacity: 0.5;
        transform: translateY(0);
    }
}

/* Fallback for smaller tablets (768px - 991px) to keep current grid */
@media (min-width: 768px) and (max-width: 991px) {
    .action-strip.grid-actions {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 16px;
        margin-bottom: 24px;
        padding: 16px;
    }

    .action-btn {
        background: #fff;
        border: 1px solid #f1f5f9;
        border-radius: 16px;
        padding: 16px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 90px;
        text-decoration: none;
    }
}

/* Larger screens: Maybe open up to more columns? 
   Actually 5 cols is quite wide per item on 1200px, maybe too wide? 
   Let's check. 1200 / 5 = 240px wide buttons. That's big.
   Let's try 8 or 10 cols for very large screens or just keep max-width. */

@media (min-width: 1200px) {
    .action-strip.grid-actions {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        /* This will allow it to span more rows if needed but prefer fitting closely. 
           With 10 items, auto-fit min 130px on 1200px screen => 9 items per row? 
           Let's stick to a clean grid. repeat(5, 1fr) is actually fine, buttons will be wide cards. */
        grid-template-columns: repeat(5, 1fr);
    }

    /* On really wide cards, maybe flex-row inside the button? 
       No, vertical stack is cleaner for consistent iconography. */
}

/* --- Dashboard Grid Refinements (Laptop) --- */
.d-grid-c {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .d-grid-c {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
        gap: 20px;
    }
}

@media (min-width: 1200px) {

    /* Laptop/Desktop */
    .d-grid-c {
        grid-template-columns: repeat(4, 1fr);
        /* 4 columns on large screens */
        gap: 24px;
    }

    /* Span utilities for grid */
    .grid-span-2 {
        grid-column: span 2;
    }

    .grid-span-3 {
        grid-column: span 3;
    }

    .grid-full {
        grid-column: 1 / -1;
    }
}

/* Card Improvements */
.compact-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure equal height in grid rows */
}

.compact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.card-head {
    background: #ffffff;
    /* Clean white header */
    border-bottom: 1px solid #ffffff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px 16px 0 0;
}

.card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Scrollable Areas */
#overdue-container,
#low-stock-container,
#activity-feed-list {
    max-height: 250px;
    /* Taller on desktop */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Upgrade Banner Refined */
#dash-upgrade-banner .slim-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* =============================================
   SB-* DESIGN SYSTEM UTILITIES
   Used by settings, profile, company-setup,
   sub-admins, reports and many other pages
   ============================================= */

/* --- Root Variables --- */
:root {
    --sb-primary: #6366f1;
    --sb-success: #10b981;
    --sb-warning: #f59e0b;
    --sb-danger: #ef4444;
    --sb-info: #0ea5e9;
    --sb-dark: #1e293b;
    --sb-muted: #64748b;
    --sb-bg: #ffffff;
    --sb-card-bg: #ffffff;
    --sb-border: #cbd5e1;
    --sb-radius: 14px;
    --sb-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* --- Cards --- */
.sb-m-card {
    background: var(--sb-card-bg);
    /* border-radius: var(--sb-radius); */
    border: 1px solid var(--sb-border);
    box-shadow: var(--sb-shadow);
}

/* --- Spacing --- */
.sb-p-1 {
    padding: 4px;
}

.sb-p-2 {
    padding: 8px;
}

.sb-p-3 {
    padding: 12px;
}

.sb-p-4 {
    padding: 16px;
}

.sb-p-5 {
    padding: 24px;
}

.sb-p-6 {
    padding: 32px;
}

.sb-mt-1 {
    margin-top: 4px;
}

.sb-mt-2 {
    margin-top: 8px;
}

.sb-mt-3 {
    margin-top: 12px;
}

.sb-mt-4 {
    margin-top: 16px;
}

.sb-mb-1 {
    margin-bottom: 4px;
}

.sb-mb-2 {
    margin-bottom: 8px;
}

.sb-mb-3 {
    margin-bottom: 12px;
}

.sb-mb-4 {
    margin-bottom: 16px;
}

.sb-mb-5 {
    margin-bottom: 24px;
}

.sb-my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.sb-py-3 {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* --- Flex Utilities --- */
.sb-flex {
    display: flex;
}

.sb-flex-col {
    flex-direction: column;
}

.sb-items-center {
    align-items: center;
}

.sb-items-start {
    align-items: flex-start;
}

.sb-justify-between {
    justify-content: space-between;
}

.sb-justify-center {
    justify-content: center;
}

.sb-gap-1 {
    gap: 4px;
}

.sb-gap-2 {
    gap: 8px;
}

.sb-gap-3 {
    gap: 12px;
}

.sb-gap-4 {
    gap: 16px;
}

.sb-flex-wrap {
    flex-wrap: wrap;
}

/* --- Grid Utilities --- */
.sb-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.sb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {

    .sb-grid-2,
    .sb-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* --- Typography --- */
.sb-fw-bold {
    font-weight: 500 !important;
}

.sb-fw-black {
    font-weight: 500 !important;
}

.sb-fw-medium {
    font-weight: 500 !important;
}

.sb-fs-micro {
    font-size: 13px !important;
}

.sb-fs-small {
    font-size: 13px !important;
}

.sb-fs-base {
    font-size: 15px !important;
}

.sb-fs-lg {
    font-size: 18px !important;
}

.sb-uppercase {
    text-transform: uppercase !important;
}

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

.sb-text-muted {
    color: var(--sb-muted) !important;
}

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

.sb-text-success {
    color: var(--sb-success) !important;
}

.sb-text-warning {
    color: var(--sb-warning) !important;
}

.sb-text-danger {
    color: var(--sb-danger) !important;
}

/* --- Section Title --- */
.sb-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sb-muted);
}

/* --- Inputs --- */
.sb-input-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--sb-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.sb-input {
    width: 100%;
    padding: 11px 14px;
    background: #fcfdfe;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sb-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.sb-input:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #fff;
}

.sb-input[disabled],
.sb-input[readonly] {
    background: #f1f5f9;
    color: var(--sb-muted);
    cursor: not-allowed;
}

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

/* --- Buttons --- */
.sb-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--sb-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    text-decoration: none;
}

.sb-btn-primary:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
    color: #fff;
    text-decoration: none;
}

.sb-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f1f5f9;
    color: var(--sb-dark);
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.sb-btn-secondary:hover {
    background: #cbd5e1;
    color: var(--sb-dark);
    text-decoration: none;
}

.sb-btn-sm-light {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    color: var(--sb-muted);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.sb-btn-sm-light:hover {
    background: #cbd5e1;
    color: var(--sb-dark);
    text-decoration: none;
}

/* --- Badges / Pills --- */
.sb-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--sb-primary);
    color: #fff;
}

.sb-bg-success-subtle {
    background: rgba(16, 185, 129, 0.1) !important;
}

.sb-bg-warning-subtle {
    background: rgba(245, 158, 11, 0.1) !important;
}

.sb-bg-danger-subtle {
    background: rgba(239, 68, 68, 0.1) !important;
}

.sb-bg-primary-subtle {
    background: rgba(99, 102, 241, 0.1) !important;
}

/* --- Icon wrapper --- */
.sb-m-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    font-size: 18px;
}

/* --- Divider --- */
.sb-divider {
    border: none;
    border-top: 1px solid var(--sb-border);
    margin: 16px 0;
}

/* --- Width helpers --- */
.sb-w-full {
    width: 100%;
}

/* Ensure SweetAlert2 backdrop appears above the sidebar (which is at 9002) */
.swal2-container {
    z-index: 10000 !important;
}

/* --- Draggable Bottom Sheet Handle (Global for Mobile) --- */
@media (max-width: 991.98px) {
    .sheet-handle {
        width: 100%;
        padding: 12px 0 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: grab;
        touch-action: none;
        user-select: none;
        z-index: 1100;
        position: relative;
    }

    .handle-bar {
        width: 40px;
        height: 5px;
        background: #cbd5e1;
        border-radius: 10px;
        transition: background 0.2s;
    }

    .sheet-handle:active .handle-bar {
        background: #cbd5e1;
        cursor: grabbing;
    }

    /* Transition override during dragging */
    .modal.is-dragging .modal-dialog {
        transition: none !important;
    }
}

/* =========================================
   NAVIGATION CONFIRMATION MODAL
   ========================================= */
.nav-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nav-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nav-confirm-modal {
    background: white;
    border-radius: 28px;
    padding: 40px;
    max-width: 420px;
    width: 90%;
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 25px 50px -13px rgba(0, 0, 0, 0.25);
    text-align: center;
    position: relative;
}

.nav-confirm-overlay.active .nav-confirm-modal {
    transform: scale(1);
    opacity: 1;
}

.nav-confirm-handle {
    display: none;
}

@media (max-width: 1024px) {
    .nav-confirm-overlay {
        align-items: flex-end;
    }

    .nav-confirm-modal {
        border-radius: 32px 32px 0 0;
        padding: 16px 24px 40px;
        width: 100%;
        max-width: none;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
        opacity: 1;
    }

    .nav-confirm-overlay.active .nav-confirm-modal {
        transform: translateY(0);
    }

    .nav-confirm-handle {
        display: block;
        width: 40px;
        height: 5px;
        background: #e5e7eb;
        border-radius: 13px;
        margin: 0 auto 25px;
    }

    .nav-confirm-actions {
        flex-direction: column !important;
    }
}

.nav-confirm-icon-box {
    width: 72px;
    height: 72px;
    background: #fff1f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.nav-confirm-icon-box i {
    font-size: 30px;
    color: #f43f5e;
}

.nav-confirm-title {
    margin: 0;
    font-size: 23px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
}

.nav-confirm-text {
    margin: 13px 0 0 0;
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
}

.nav-confirm-actions {
    display: flex;
    flex-direction: row-reverse;
    gap: 13px;
    margin-top: 35px;
}

.nav-confirm-btn-primary {
    flex: 1;
    padding: 16px 24px;
    border: none;
    background: linear-gradient(135deg, #ef7722 0%, #faa533 100%);
    color: white;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(239, 119, 34, 0.3);
}

.nav-confirm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 119, 34, 0.4);
}

.nav-confirm-btn-secondary {
    flex: 1;
    padding: 16px 24px;
    border: 1.5px solid #e5e7eb;
    background: white;
    color: #374151;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-confirm-btn-secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* --- MODAL DEPTH FIX (High Priority) --- */
/* These rules ensure modals and backdrops are always on top and visible */

.modal {
    z-index: 10055 !important;
}

.modal-backdrop {
    z-index: 10050 !important;
}

/* When a modal is open, we must ensure the sidebar doesn't overlap it 
   and the content container doesn't trap the modal behind the backdrop. */
body.modal-open #sidebar {
    z-index: 1030 !important;
}

body.modal-open .sb-portal-backdrop {
    z-index: 1020 !important;
}

/* Ensure toast notifications are always the topmost layer */
.toast-container {
    z-index: 10100 !important;
}

/* Premium Item View Enhancements */
.profile-header-premium {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.master-avatar-premium {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: #6366f1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
    overflow: hidden;
}

.master-info-premium .master-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.master-info-premium .master-hash {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 600;
    background: #f1f5f9;
    padding: 4px 12px;
    border-radius: 99px;
}

.premium-cards-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .premium-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.detail-card-premium {
    background: white;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.detail-card-premium:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.card-header-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}

.card-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.card-title-premium {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    margin: 0;
}

.data-row-premium {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.data-row-premium:not(:last-child) {
    border-bottom: 1px solid #f8fafc;
}

.data-label-premium {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.data-value-premium {
    font-size: 0.9rem;
    color: #0f172a;
    font-weight: 700;
}

.data-value-premium.bold {
    font-size: 1rem;
    color: #1e293b;
}

.metric-card-view {
    background: white;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.metric-card-view .m-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.metric-card-view .m-value {
    font-size: 1.25rem;
    font-weight: 800;
}

/* Batch Table Styles */
.table-responsive {
    border-radius: 12px;
    overflow: hidden;
}

@media (min-width: 769px) {
    .table-responsive:has(.row-active) {
        overflow: visible !important;
    }
}

.batch-card-mobile {
    transition: transform 0.2s;
}

.batch-card-mobile:active {
    transform: scale(0.98);
}

.bg-soft-success {
    background: rgba(16, 185, 129, 0.1);
}

.bg-soft-warning {
    background: rgba(245, 158, 11, 0.1);
}