/* Je commente : Mega-header dark mode (logged in) - targeted selectors (no !important) */
.mega-header.mega-header-dark {
    background: linear-gradient(264deg, #06283D 0%, #000000 100%);
    color: #fff;
}
/* Je commente : Ensure links and compact user actions inside the dark header use white text */
.mega-header.mega-header-dark .mega-header-dark-links,
.mega-header.mega-header-dark .mega-header-dark-links a,
.mega-header.mega-header-dark .compact-link,
.mega-header.mega-header-dark .compact-user-actions,
.mega-header.mega-header-dark .compact-user-actions a,
.mega-header.mega-header-dark .compact-username,
.mega-header.mega-header-dark .mega-actions a {
    color: #fff;
}
.mega-header.mega-header-dark .compact-link.logout {
    color: #e53935;
}

/* Je commente : Layout for dark header links - move inline styles into CSS to avoid repetition */
.mega-header.mega-header-dark .mega-header-dark-links {
    display: flex;
    gap: 20px;
    align-items: center;
}
.mega-header.mega-header-dark .compact-user-actions {
    border-left: 1px solid rgba(245, 244, 242, 0.12);
    padding-left: 20px;
}

/*  Logo sizing in dark header (commercial/admin logged-in)
   Keep it a bit smaller so it doesn't dominate the navbar on /commercial pages.
   Use !important because responsive.css has logo size rules with !important. */
.mega-header.mega-header-dark .mega-logo {
    max-width: 210px;
}

.mega-header.mega-header-dark .mega-logo img {
    height: 55px !important;
    max-height: 55px !important;
    width: auto;
    object-fit: contain;
    margin-top: 4px;
}

/* /commercial/ajouter-bien.php — add breathing room so inputs don't stick to the card border.
   Note: Bootstrap padding utilities (p-4, etc.) are !important, so we also use !important here. */
.page-ajouter-bien #wizardForm {
    padding: 16px !important;
}
.page-ajouter-bien #wizardForm .card-body {
    padding: 2rem !important;
}
.page-ajouter-bien #wizardForm .card-footer {
    padding: 1.5rem !important;
}

@media (max-width: 576px) {
    .page-ajouter-bien #wizardForm {
        padding: 12px !important;
    }
    .page-ajouter-bien #wizardForm .card-body {
        padding: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {
    .mega-header.mega-header-dark .mega-logo {
        max-width: 280px;
    }
    .mega-header.mega-header-dark .mega-logo img {
        height: 75px !important;
        max-height: 75px !important;
        margin-top: 4px;
    }
}

@media (min-width: 1400px) {
    /*  Prevent wide-viewport rule in responsive.css from inflating the dark header logo */
    .mega-header.mega-header-dark .mega-logo img {
        height: 55px !important;
        max-height: 55px !important;
    }
}
/* Je commente : ======================================== COMMERCIAL DASHBOARD - CUSTOM STYLES Couleurs professionnelles & animations ======================================== */

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #1a4b56 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --info-gradient: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    --dark-gradient: linear-gradient(135deg, #434343 0%, #000000 100%);
    
    --primary-color: #162254;
    --secondary-color: #764ba2;
    --accent-color: #f5576c;
    --success-color: #4facfe;
    --warning-color: #fa709a;
    --info-color: #30cfd0;
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 16px 48px rgba(102, 126, 234, 0.2);
}

/* Je commente : ========== ANIMATIONS ========== */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(102, 126, 234, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
    }
}

/* Je commente : ========== GENERAL ========== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
}

body.section-commercial .main-content,
body.section-admin .main-content {
    min-height: 100vh;
    min-width: 0;
}

body.section-commercial .main-content .container,
body.section-admin .main-content .container,
body.section-commercial .page-header .container,
body.section-admin .page-header .container {
    width: 100%;
    max-width: 100%;
}

body.section-commercial .card,
body.section-admin .card,
body.section-commercial [class*="col-"] > *,
body.section-admin [class*="col-"] > * {
    min-width: 0;
}

body.section-commercial img,
body.section-admin img {
    max-width: 100%;
    height: auto;
}

body.section-commercial .table-responsive,
body.section-admin .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

body.section-commercial .table-responsive > .table,
body.section-admin .table-responsive > .table {
    margin-bottom: 0;
}

body.section-commercial form .row,
body.section-admin form .row,
body.section-commercial .card-body > .row,
body.section-admin .card-body > .row {
    --bs-gutter-y: 1rem;
}

/* Je commente : ========== HEADERS ========== */
.page-header {
    background: var(--primary-gradient);
    color: white;
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
    animation: slideInDown 0.6s ease-out;
}

.page-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: rgba(245, 244, 242, 0.05);
    border-radius: 50%;
    animation: pulse 15s infinite;
}

.page-header-title {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header-subtitle {
    opacity: 0.95;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
}

/* Je commente : ========== CARDS ========== */
.card {
    border: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

/* Je commente : Dashboard: explicit sizing for modern cards to keep grid alignment stable */
.card.modern-anim {
    width: 100%;            /* Je commente : column controls horizontal size */
    min-height: 220px;     /* Je commente : ensure consistent card height */
    display: flex;
    flex-direction: column;
}

.card.modern-anim .card-body {
    flex: 1 1 auto;        /* Je commente : allow body to stretch to full card height */
}

.card-header {
    background: var(--primary-gradient) !important;
    color: white;
    border: none;
    padding: 1.25rem !important;
    font-weight: 600;
}

.card-body {
    padding: 1.5rem;
}

/* Je commente : ========== STAT CARDS ========== */
.stat-card {
    background: #f5f4f2;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.stat-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-hover);
    color: white;
}

.stat-card:hover::before {
    opacity: 0.1;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 1rem 0;
}

.stat-card:hover .stat-number {
    -webkit-text-fill-color: currentColor;
}

.stat-label {
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* Je commente : ========== ACTION CARDS ========== */
.action-card {
    background: #f5f4f2;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-left: 4px solid var(--primary-color);
}

.action-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateX(8px);
}

.action-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.action-card:hover .action-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.action-card.primary-action {
    /* Je commente : apply admin palette for primary action (biens) - use !important to ensure override */
    border-left-color: #393E46 !important; /* Je commente : slate */
    background: linear-gradient(180deg, #ffffff, #fbf9f7) !important;
}

.action-card.primary-action .action-card-icon {
    /* Je commente : soft pill behind icon */
    background: rgba(148,137,121,0.06) !important; /* Je commente : subtle tan tint */
    color: #948979 !important; /* Je commente : tan */
    box-shadow: 0 6px 18px rgba(57,62,70,0.06) !important;
}

.action-card.success-action {
    border-left-color: #4facfe;
}

.action-card.success-action .action-card-icon {
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
}

.action-card.warning-action {
    border-left-color: #fa709a;
}

.action-card.warning-action .action-card-icon {
    background: rgba(250, 112, 154, 0.1);
    color: #fa709a;
}

.action-card.info-action {
    border-left-color: #30cfd0;
}

.action-card.info-action .action-card-icon {
    background: rgba(48, 207, 208, 0.1);
    color: #30cfd0;
}

.action-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #333;
}

.action-card-text {
    color: #666;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Je commente : Buttons inside action cards: subtle pill matching admin theme */
.action-card .btn {
    /* Je commente : small, borderless pill button with subtle shadow (no background, no border) */
    background: transparent !important;
    border: none !important;
    color: #222831 !important; /* Je commente : primary dark */
    padding: 6px 12px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(34,40,49,0.06) !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.6px !important;
    display: inline-block !important;
}

.action-card .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(34,40,49,0.08) !important;
    background: rgba(217,208,184,0.04) !important; /* Je commente : subtle hover highlight */
}

/* Je commente : ========== BUTTONS ========== */
.btn {
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(245, 244, 242, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    color: white;
}

.btn-success {
    background: var(--success-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 172, 254, 0.6);
    color: white;
}

.btn-warning {
    background: var(--warning-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
}

.btn-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(250, 112, 154, 0.6);
    color: white;
}

.btn-outline-secondary {
    border: 2px solid #667eea;
    color: #667eea;
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    color: white;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
}

/* Je commente : ========== TABLE ========== */
.table {
    border-collapse: collapse;
}

.table thead th {
    background: var(--primary-gradient);
    color: white;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1.25rem !important;
}

.table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid #eee;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
    transform: scale(1.01);
    box-shadow: inset 0 0 10px rgba(102, 126, 234, 0.05);
}

.table tbody td {
    padding: 1rem !important;
    vertical-align: middle;
}

/* Je commente : ========== BADGES ========== */
.badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.badge-success {
    background: var(--success-gradient);
    color: white;
}

.badge-warning {
    background: var(--warning-gradient);
    color: white;
}

.badge-danger {
    background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
    color: white;
}

/* Je commente : ========== ALERTS ========== */
.alert {
    border: none;
    border-radius: 12px;
    border-left: 4px solid;
    padding: 1.25rem;
    animation: slideInDown 0.4s ease-out;
}

.alert-success {
    background: rgba(79, 172, 254, 0.1);
    border-left-color: #4facfe;
    color: #0056b3;
}

.alert-danger {
    background: rgba(245, 87, 108, 0.1);
    border-left-color: #f5576c;
    color: #721c24;
}

.alert-info {
    background: rgba(48, 207, 208, 0.1);
    border-left-color: #30cfd0;
    color: #004085;
}

.alert-warning {
    background: rgba(250, 112, 154, 0.1);
    border-left-color: #fa709a;
    color: #856404;
}

/* Je commente : ========== FORM ELEMENTS ========== */
.form-control, 
.form-select {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.form-control:focus, 
.form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    outline: none;
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.form-label.required::after {
    content: ' *';
    color: #f5576c;
}

/* Je commente : ========== EMPTY STATE ========== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon {
    font-size: 4rem;
    color: #667eea;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.empty-state-text {
    color: #999;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* Je commente : ========== MODAL ========== */
.modal-header {
    background: var(--primary-gradient);
    color: white;
    border: none;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 2rem;
}

/* Je commente : ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .page-header-title {
        font-size: 1.8rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .page-header {
        padding: 2rem 0;
    }
}

/* Je commente : ========== UTILITIES ========== */
.transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-shadow:hover {
    box-shadow: var(--shadow-hover) !important;
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.opacity-75 {
    opacity: 0.75;
}

.opacity-50 {
    opacity: 0.5;
}
/* Je commente : ========== ICÔNES INTELLIGENTES ========== */

/* Je commente : Icônes par défaut - bleu primaire */
i.fa, i.fas, i.far, i.fab {
    color: #0066cc !important;
}

/* Je commente : Icônes dans boutons colorés - blanc */
.btn-primary i, .btn-secondary i, .btn-success i,
.btn-warning i, .btn-danger i, .btn-info i {
    color: white !important;
}

/* Je commente : Icônes dans boutons outline - bleu */
.btn-outline-secondary i {
    color: #0066cc !important;
}

/* Je commente : Icônes dans cards blancs - bleu */
.card i, .stat-card i {
    color: #0066cc !important;
}

/* Je commente : Icônes dans headers colorés - blanc */
.page-header i, .card-header i {
    color: white !important;
}

/* Je commente : Icônes dans badges et alertes */
.badge i {
    color: white !important;
}

.alert i {
    color: #0066cc !important;
}

/* Je commente : Icônes d'actions */
.action-card-icon i {
    color: inherit !important;
}

/* Je commente : Feature card styling moved from ajouter-bien.php */
.feature-card {
    background: #f5f4f2;
    border-radius: 12px;
    border: none;
    box-shadow: 0 6px 18px rgba(11, 22, 32, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(11, 22, 32, 0.07);
}
.feature-card .form-check-label {
    margin-bottom: 0;
    color: #233;
    font-weight: 700;
}

/* Je commente : Smaller nice-looking switch */
.form-check-input.small-switch {
    transform: scale(0.85);
    margin-left: -0.35rem; /* Je commente : keep aligned with label */
    margin-top: 0.12rem;
}

/* Je commente : Visibility box styling (no red border, consistent with feature cards) */
.visibility-box {
    background: transparent;
    padding: 8px;
}
.visibility-box .feature-card {
    background: #f5f4f2;
    padding: 12px;
    margin-bottom: 8px;
}

/* Je commente : Ensure small form elements look consistent on mobile */
@media (max-width: 576px) {
    .feature-card { padding: 12px; }
    .form-check-input.small-switch { transform: scale(0.78); }
}

/* =====================================================
   COMMERCIAL — GLOBAL SIDEBAR (semi-hide + "Afficher")
   Scoped to body.section-commercial (commercial/*) AND to
   body.section-admin.cmg-has-sidebar (opt-in on admin pages)
   ===================================================== */

body.section-commercial,
body.section-admin.cmg-has-sidebar {
    --cmg-sidebar-expanded: 290px;
    --cmg-sidebar-collapsed: 78px;
    --cmg-sidebar-w: var(--cmg-sidebar-expanded);
    /* Fallback: commercial area is headerless, so keep offset at 0 (JS may still adjust if needed). */
    --cmg-header-offset: 0px;
}

html.cmg-sidebar-collapsed body.section-commercial,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar {
    --cmg-sidebar-w: var(--cmg-sidebar-collapsed);
}

body.section-commercial .cmg-shell,
body.section-admin.cmg-has-sidebar .cmg-shell {
    position: relative;
}

body.section-commercial .cmg-main,
body.section-admin.cmg-has-sidebar .cmg-main {
    margin-left: var(--cmg-sidebar-w);
    min-height: calc(100vh - var(--cmg-header-offset));
    transition: margin-left 220ms cubic-bezier(.4,1,.7,1);
}

body.section-commercial .cmg-sidebar,
body.section-admin.cmg-has-sidebar .cmg-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: var(--cmg-sidebar-w);
    /* Keep below the sticky header (header z-index is 1000 in header-megamenu.php) */
    z-index: 950;
    border-right: 1px solid rgba(255,255,255,0.10);
    background: #0b0b0c;
    color: #e6eef0;
    box-shadow: 0 12px 34px rgba(0,0,0,0.16);
    /* Allow the toggle pill to protrude outside the sidebar */
    overflow: visible;
    transition: width 220ms cubic-bezier(.4,1,.7,1);
}

body.section-commercial .cmg-sidebar__panel,
body.section-admin.cmg-has-sidebar .cmg-sidebar__panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Keep sidebar content below the sticky header without creating a visible gap */
    padding-top: var(--cmg-header-offset);
    overflow: hidden; /* keep inner content clipped */
}

body.section-commercial .cmg-sidebar__scroll,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
}

/* =====================================================
   COMMERCIAL — Modern scrollbar (sidebar)
   Notes:
   - Scoped to the sidebar scroll container only.
   - Works in Chrome/Edge (webkit) + Firefox.
   ===================================================== */

@supports (scrollbar-color: auto) {
    body.section-commercial .cmg-sidebar__scroll,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll {
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.38) rgba(255,255,255,0.08);
    }
}

/* Chrome / Edge / Safari */
body.section-commercial .cmg-sidebar__scroll::-webkit-scrollbar,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll::-webkit-scrollbar {
    width: 8px;
}

body.section-commercial .cmg-sidebar__scroll::-webkit-scrollbar-track,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

body.section-commercial .cmg-sidebar__scroll::-webkit-scrollbar-thumb,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28);
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.06); /* creates a small gap from the track */
    background-clip: padding-box;
}

body.section-commercial .cmg-sidebar__scroll::-webkit-scrollbar-thumb:hover,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.40);
    border-color: rgba(255,255,255,0.10);
}

/* Remove the classic up/down arrow buttons on Windows */
body.section-commercial .cmg-sidebar__scroll::-webkit-scrollbar-button,
body.section-admin.cmg-has-sidebar .cmg-sidebar__scroll::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

body.section-commercial .cmg-sidebar *,
body.section-admin.cmg-has-sidebar .cmg-sidebar * { box-sizing: border-box; }

/* Toggle removed (hover-to-expand is used instead). Keep this hidden if any old markup remains in cache. */
body.section-commercial .cmg-sidebar-tab,
body.section-admin.cmg-has-sidebar .cmg-sidebar-tab { display: none !important; }

/* Default: expanded visuals */
body.section-commercial .cmg-icon-collapsed,
body.section-commercial .cmg-label-collapsed,
body.section-admin.cmg-has-sidebar .cmg-icon-collapsed,
body.section-admin.cmg-has-sidebar .cmg-label-collapsed {
    display: none;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-icon-expanded,
html.cmg-sidebar-collapsed body.section-commercial .cmg-label-expanded,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-icon-expanded,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-label-expanded {
    display: none;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-icon-collapsed,
html.cmg-sidebar-collapsed body.section-commercial .cmg-label-collapsed,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-icon-collapsed,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-label-collapsed {
    display: inline;
}

body.section-commercial .cmg-sidebar__head,
body.section-admin.cmg-has-sidebar .cmg-sidebar__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    /* Less "flashy": remove colorful radial gradients for a more professional look */
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* =====================================================
   COMMERCIAL — HEADERLESS + CANVA-LIKE CLEAN OVERRIDES
   (Scope: /commercial/*)
   ===================================================== */

/* Hide the public mega header/topbar inside the commercial space
   and inside admin pages that opt into the sidebar shell. */
body.section-commercial .mega-topbar,
body.section-commercial .mega-header,
body.section-commercial .mini-header-scroll,
body.section-admin.cmg-has-sidebar .mega-topbar,
body.section-admin.cmg-has-sidebar .mega-header,
body.section-admin.cmg-has-sidebar .mini-header-scroll {
    display: none !important;
}

/* Make the commercial page header area clean (no gradients/animations) */
body.section-commercial .page-header {
    background: #ffffff;
    color: #0f172a;
    padding: 22px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
    animation: none !important;
}

body.section-commercial .page-header::before {
    display: none !important;
    animation: none !important;
}

body.section-commercial .page-header-title {
    color: #0f172a;
    font-size: 1.75rem;
    text-shadow: none;
}

body.section-commercial .page-header-subtitle {
    color: rgba(15, 23, 42, 0.65);
}

body.section-commercial .page-header i,
body.section-commercial .card-header i {
    color: currentColor !important;
}

/* Reduce "bouncy" card hover in commercial area */
body.section-commercial .card::before {
    display: none;
}

body.section-commercial .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

body.section-commercial .cmg-sidebar__avatar,
body.section-admin.cmg-has-sidebar .cmg-sidebar__avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    flex: 0 0 auto;
}

body.section-commercial .cmg-sidebar__avatar i,
body.section-admin.cmg-has-sidebar .cmg-sidebar__avatar i { color: rgba(255,255,255,0.92) !important; font-size: 18px; }

body.section-commercial .cmg-sidebar__who,
body.section-admin.cmg-has-sidebar .cmg-sidebar__who { min-width: 0; flex: 1; }
body.section-commercial .cmg-sidebar__name,
body.section-admin.cmg-has-sidebar .cmg-sidebar__name {
    font-weight: 900;
    font-size: 0.98rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.section-commercial .cmg-sidebar__sub,
body.section-admin.cmg-has-sidebar .cmg-sidebar__sub {
    margin-top: 2px;
    color: rgba(230,238,240,0.72);
    font-size: 0.82rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.section-commercial .cmg-sidebar__close,
body.section-admin.cmg-has-sidebar .cmg-sidebar__close {
    display: none;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: #fff;
}
body.section-commercial .cmg-sidebar__close i,
body.section-admin.cmg-has-sidebar .cmg-sidebar__close i { color: #fff !important; }

body.section-commercial .cmg-sidebar__nav,
body.section-admin.cmg-has-sidebar .cmg-sidebar__nav {
    padding: 0;
}

body.section-commercial .cmg-sidebar__link,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(230,238,240,0.88);
    border: 1px solid transparent;
    position: relative;
    isolation: isolate; /* allow z-index layering so ::before stays behind */
    transition:
        background 180ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

/* Subtle left indicator (hover/active) */
body.section-commercial .cmg-sidebar__link::before,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: rgba(102,126,234,0.95);
    opacity: 0;
    transform: translateY(-50%) scaleY(0.65);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
    z-index: 0;
}

body.section-commercial .cmg-sidebar__link i,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link i {
    /* Icon slot: keep icons perfectly centered (both axes) */
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    opacity: 0.95;
    color: rgba(230,238,240,0.92) !important;
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
    position: relative;
    z-index: 1;
}

/* Ensure other children (label/badge) are above the indicator as well */
body.section-commercial .cmg-sidebar__link > *,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link > * {
    position: relative;
    z-index: 1;
}

body.section-commercial .cmg-sidebar__label,
body.section-admin.cmg-has-sidebar .cmg-sidebar__label { flex: 1; }

body.section-commercial .cmg-sidebar__link:hover,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link:hover {
    color: #fff;
    /* Apple-like: calm highlight, no lift, no drop-shadow */
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.045) 100%);
    border-color: rgba(255,255,255,0.14);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 0 0 1px rgba(102,126,234,0.14);
}

body.section-commercial .cmg-sidebar__link:hover::before,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link:hover::before {
    opacity: 0.35;
    transform: translateY(-50%) scaleY(1);
}

body.section-commercial .cmg-sidebar__link:hover i,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link:hover i {
    opacity: 1;
    color: #ffffff !important;
}

body.section-commercial .cmg-sidebar__link.is-active,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link.is-active {
    background: rgba(102,126,234,0.14);
    border-color: rgba(102,126,234,0.28);
    color: #fff;
}

body.section-commercial .cmg-sidebar__link.is-active::before,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link.is-active::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

/* Keyboard focus (pro + accessible) */
body.section-commercial .cmg-sidebar__link:focus-visible,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link:focus-visible {
    outline: none;
    border-color: rgba(102,126,234,0.55);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.22);
}

body.section-commercial .cmg-sidebar__badge,
body.section-admin.cmg-has-sidebar .cmg-sidebar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.78rem;
    font-weight: 900;
    color: #fff;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body.section-commercial .cmg-sidebar__link:hover .cmg-sidebar__badge,
body.section-admin.cmg-has-sidebar .cmg-sidebar__link:hover .cmg-sidebar__badge {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.18);
}

/* Smoother collapsed/expanded label fade */
body.section-commercial .cmg-sidebar__who,
body.section-commercial .cmg-sidebar__stats,
body.section-commercial .cmg-sidebar__label,
body.section-admin.cmg-has-sidebar .cmg-sidebar__who,
body.section-admin.cmg-has-sidebar .cmg-sidebar__stats,
body.section-admin.cmg-has-sidebar .cmg-sidebar__label {
    transition: opacity 200ms ease, transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body.section-commercial .cmg-sidebar__link,
    body.section-commercial .cmg-sidebar__link::before,
    body.section-commercial .cmg-sidebar__link i,
    body.section-commercial .cmg-sidebar__badge,
    body.section-commercial .cmg-sidebar__who,
    body.section-commercial .cmg-sidebar__stats,
    body.section-commercial .cmg-sidebar__label,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__link,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__link::before,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__link i,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__badge,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__who,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__stats,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__label {
        transition: none !important;
    }
    body.section-commercial .cmg-sidebar__link:hover,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__link:hover {
        transform: none;
        box-shadow: none;
    }
}

body.section-commercial .cmg-sidebar__sep,
body.section-admin.cmg-has-sidebar .cmg-sidebar__sep {
    height: 1px;
    margin: 10px 8px;
    background: rgba(255,255,255,0.08);
}

body.section-commercial .cmg-sidebar__groupLabel,
body.section-admin.cmg-has-sidebar .cmg-sidebar__groupLabel {
    padding: 2px 16px 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(160, 174, 192, 0.88);
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    max-height: 28px;
    transition:
        opacity 180ms ease 90ms,
        transform 180ms ease 90ms,
        max-height 180ms ease 90ms,
        padding 180ms ease 90ms,
        margin 180ms ease 90ms;
}

body.section-commercial .cmg-sidebar__stats,
body.section-admin.cmg-has-sidebar .cmg-sidebar__stats {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    /* push stats toward the bottom when there's extra space */
    margin-top: auto;
}

body.section-commercial .cmg-sidebar__statsTitle,
body.section-admin.cmg-has-sidebar .cmg-sidebar__statsTitle {
    font-weight: 900;
    letter-spacing: 0.02em;
    font-size: 0.84rem;
    color: rgba(230,238,240,0.78);
    text-transform: uppercase;
    margin-bottom: 10px;
}

body.section-commercial .cmg-sidebar__statRow,
body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 8px;
}

body.section-commercial .cmg-sidebar__statRow span,
body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow span {
    min-width: 0;
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.2;
    color: rgba(230,238,240,0.86);
}
body.section-commercial .cmg-sidebar__statRow i,
body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow i { width: 18px; text-align: center; opacity: 0.95; color: rgba(230,238,240,0.92) !important; }
body.section-commercial .cmg-sidebar__statRow strong,
body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow strong {
    color: #fff;
    font-weight: 900;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    body.section-commercial .cmg-sidebar__stats,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__stats {
        padding: 12px 14px 14px;
    }

    body.section-commercial .cmg-sidebar__statsTitle,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statsTitle {
        font-size: 0.78rem;
        margin-bottom: 8px;
    }

    body.section-commercial .cmg-sidebar__statRow,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow {
        padding: 8px 9px;
        column-gap: 8px;
        margin-bottom: 6px;
        border-radius: 10px;
    }

    body.section-commercial .cmg-sidebar__statRow span,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow span {
        gap: 5px;
        font-size: 0.83rem;
        line-height: 1.15;
    }

    body.section-commercial .cmg-sidebar__statRow strong,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow strong {
        font-size: 0.90rem;
    }
}

@media (max-width: 420px) {
    body.section-commercial .cmg-sidebar__stats,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__stats {
        padding: 10px 12px 12px;
    }

    body.section-commercial .cmg-sidebar__statRow,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow {
        padding: 7px 8px;
        column-gap: 7px;
    }

    body.section-commercial .cmg-sidebar__statRow span,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow span {
        font-size: 0.80rem;
    }

    body.section-commercial .cmg-sidebar__statRow strong,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__statRow strong {
        font-size: 0.86rem;
    }
}

/* Collapsed state: keep icons + badges, hide text blocks */
html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__who,
html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__stats,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__who,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__stats {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__label,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__label {
    opacity: 0;
    transform: translateX(-6px);
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__groupLabel,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__groupLabel {
    opacity: 0;
    transform: translateX(-6px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    pointer-events: none;
    transition-delay: 0s;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__link,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__link {
    justify-content: center;
    padding: 11px 10px;
}

html.cmg-sidebar-collapsed body.section-commercial .cmg-sidebar__badge,
html.cmg-sidebar-collapsed body.section-admin.cmg-has-sidebar .cmg-sidebar__badge {
    position: absolute;
    top: 7px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.70rem;
}

/* Backdrop + mobile FAB */
body.section-commercial .cmg-backdrop,
body.section-admin.cmg-has-sidebar .cmg-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 949;
}

body.section-commercial .cmg-mobile-fab,
body.section-admin.cmg-has-sidebar .cmg-mobile-fab {
    display: none;
    position: fixed;
    top: calc(var(--cmg-header-offset) + 14px);
    left: 14px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(102, 126, 234, 0.35);
    z-index: 951;
}

/* Footer (connected + public) should align with the commercial main content, not sit under the fixed sidebar */
body.section-commercial footer,
body.section-admin.cmg-has-sidebar footer {
    margin-left: var(--cmg-sidebar-w);
    transition: margin-left 220ms cubic-bezier(.4,1,.7,1);
}

/* Commercial footer: compact, clean, professional */
body.section-commercial footer.cmg-footer-logged {
    margin-top: 16px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    background: linear-gradient(135deg, rgba(11, 26, 43, 0.96) 0%, rgba(20, 44, 66, 0.96) 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.10);
}

body.section-commercial footer.cmg-footer-logged .cmg-footer__logo {
    display: block;
    height: 28px !important;
    max-height: 28px !important;
    width: auto !important;
    max-width: 190px !important;
    object-fit: contain;
    background: rgba(255,255,255,0.92);
    padding: 4px 6px;
    border-radius: 10px;
}

@media (max-width: 576px) {
    body.section-commercial footer.cmg-footer-logged .cmg-footer__logo {
        height: 24px !important;
        max-height: 24px !important;
        max-width: 160px !important;
    }
}

body.section-commercial .cmg-mobile-fab i,
body.section-admin.cmg-has-sidebar .cmg-mobile-fab i { color: #fff !important; font-size: 20px; }

/* Responsive drawer */
@media (max-width: 991.98px) {
    body.section-commercial .main-content .container,
    body.section-admin .main-content .container,
    body.section-commercial .page-header .container,
    body.section-admin .page-header .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.section-commercial .page-header,
    body.section-admin .page-header {
        padding: 1.35rem 0 1.1rem;
    }

    body.section-commercial .page-header-title,
    body.section-admin .page-header-title {
        font-size: clamp(1.35rem, 5.4vw, 1.95rem);
        line-height: 1.15;
    }

    body.section-commercial .page-header-subtitle,
    body.section-admin .page-header-subtitle {
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 100%;
    }

    body.section-commercial .card-header,
    body.section-admin .card-header {
        padding: 1rem !important;
    }

    body.section-commercial .card-body,
    body.section-admin .card-body {
        padding: 1.1rem;
    }

    body.section-commercial .action-card,
    body.section-admin .action-card,
    body.section-commercial .stat-card,
    body.section-admin .stat-card {
        padding: 1.25rem;
    }

    body.section-commercial .btn,
    body.section-admin .btn {
        min-height: 42px;
    }

    body.section-commercial .pagination,
    body.section-admin .pagination {
        flex-wrap: wrap;
        gap: 6px;
    }

    body.section-commercial .main-content,
    body.section-admin.cmg-has-sidebar .main-content {
        padding-top: 78px;
    }

    body.section-commercial .cmg-main,
    body.section-admin.cmg-has-sidebar .cmg-main { margin-left: 0; }

    body.section-commercial footer,
    body.section-admin.cmg-has-sidebar footer { margin-left: 0; }

    body.section-commercial .cmg-sidebar,
    body.section-admin.cmg-has-sidebar .cmg-sidebar {
        width: min(92vw, 360px);
        transform: translateX(-110%);
        transition: transform 220ms cubic-bezier(.4,1,.7,1);
        border-radius: 0 18px 18px 0;
    }

    body.section-commercial .cmg-sidebar-tab,
    body.section-admin.cmg-has-sidebar .cmg-sidebar-tab { display: none; }
    body.section-commercial .cmg-sidebar__close,
    body.section-admin.cmg-has-sidebar .cmg-sidebar__close { display: inline-flex; align-items: center; justify-content: center; }
    body.section-commercial .cmg-mobile-fab,
    body.section-admin.cmg-has-sidebar .cmg-mobile-fab { display: inline-flex; align-items: center; justify-content: center; }

    html.cmg-sidebar-open body.section-commercial .cmg-sidebar,
    html.cmg-sidebar-open body.section-admin.cmg-has-sidebar .cmg-sidebar { transform: translateX(0); }
    html.cmg-sidebar-open body.section-commercial .cmg-backdrop,
    html.cmg-sidebar-open body.section-admin.cmg-has-sidebar .cmg-backdrop { display: block; }
}

@media (max-width: 767.98px) {
    body.section-commercial .main-content .container,
    body.section-admin .main-content .container,
    body.section-admin .page-header .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.section-commercial .page-header .container,
    body.section-admin .page-header .container {
        padding-left: 76px;
        padding-right: 14px;
    }

    body.section-commercial .page-header .row,
    body.section-admin .page-header .row {
        row-gap: 10px;
    }

    body.section-commercial .page-header [class*="col-"],
    body.section-admin .page-header [class*="col-"] {
        text-align: left !important;
    }

    body.section-commercial .page-header,
    body.section-admin .page-header {
        padding: 1.1rem 0 1rem;
    }

    body.section-commercial .page-header-title,
    body.section-admin .page-header-title {
        font-size: clamp(1.25rem, 6vw, 1.7rem);
    }

    body.section-commercial .page-header-subtitle,
    body.section-admin .page-header-subtitle {
        font-size: 0.92rem;
    }

    body.section-commercial .card,
    body.section-admin .card {
        border-radius: 16px;
    }

    body.section-commercial .card-body,
    body.section-admin .card-body {
        padding: 1rem;
    }

    body.section-commercial .action-card,
    body.section-admin .action-card,
    body.section-commercial .stat-card,
    body.section-admin .stat-card {
        padding: 1.1rem;
    }

    body.section-commercial .form-control,
    body.section-admin .form-control,
    body.section-commercial .form-select,
    body.section-admin .form-select {
        font-size: 16px;
    }

    body.section-commercial textarea.form-control,
    body.section-admin textarea.form-control {
        min-height: 120px;
    }

    body.section-commercial .table-responsive table.table,
    body.section-admin .table-responsive table.table {
        min-width: 620px;
    }

    body.section-commercial .main-content,
    body.section-admin.cmg-has-sidebar .main-content {
        padding-top: 72px;
    }
}

@media (max-width: 575.98px) {
    body.section-commercial .main-content .container,
    body.section-admin .main-content .container,
    body.section-admin .page-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.section-commercial .page-header .container,
    body.section-admin .page-header .container {
        padding-left: 72px;
        padding-right: 12px;
    }

    body.section-commercial .page-header,
    body.section-admin .page-header {
        padding: 1rem 0 0.9rem;
    }

    body.section-commercial .page-header-title,
    body.section-admin .page-header-title {
        font-size: clamp(1.15rem, 6.4vw, 1.5rem);
    }

    body.section-commercial .page-header-subtitle,
    body.section-admin .page-header-subtitle {
        font-size: 0.88rem;
    }

    body.section-commercial .card-body,
    body.section-admin .card-body {
        padding: 0.95rem;
    }

    body.section-commercial .action-card,
    body.section-admin .action-card,
    body.section-commercial .stat-card,
    body.section-admin .stat-card {
        padding: 1rem;
    }

    body.section-commercial .table-responsive table.table,
    body.section-admin .table-responsive table.table {
        min-width: 560px;
    }

    body.section-commercial .main-content,
    body.section-admin.cmg-has-sidebar .main-content {
        padding-top: 68px;
    }

    body.section-commercial .cmg-mobile-fab,
    body.section-admin.cmg-has-sidebar .cmg-mobile-fab {
        top: calc(var(--cmg-header-offset) + 12px);
        left: 12px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
}