:root {
    --primary-light: #ff4757;
    --primary-light-rgb: 255, 71, 87;
    --primary-dark: #ff4757;
    --primary-dark-rgb: 255, 71, 87;
    --primary: var(--primary-light);
    --primary-rgb: var(--primary-light-rgb);
    
    --danger: #ff4757;
    --success: #2ed573;
    
    /* Sidebar Dimensions & Dynamics */
    --sidebar-width: 256px;
    --sidebar-collapsed-width: 64px;
    --sidebar-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Default Dark Mode */
    --bg-color: #000000;
    --sidebar-bg: #0b0c0e;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-text: #94a3b8;
    --sidebar-text-hover: #f1f5f9;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);
    --sidebar-item-active-bg: rgba(var(--primary-rgb), 0.12);
    --sidebar-item-active-border: var(--primary);
    --sidebar-label-color: #64748b;
    --sidebar-user-bg: rgba(255, 255, 255, 0.03);
    --sidebar-user-border: rgba(255, 255, 255, 0.06);
    --sidebar-tooltip-bg: #1e293b;
    --sidebar-tooltip-text: #f8fafc;
    --sidebar-tooltip-border: rgba(255, 255, 255, 0.12);

    --card-bg: #141414;
    --card-alt-bg: #181822;
    --text-main: #ffffff;
    --text-color: #ffffff;
    --text-muted: #888888;
    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255,255,255,0.03);
    --shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.dark-mode {
    --primary: var(--primary-dark);
    --primary-rgb: var(--primary-dark-rgb);
    --text-color: #ffffff;
    --card-alt-bg: #181822;
    --sidebar-bg: #0b0c0e;
    --sidebar-border: rgba(255, 255, 255, 0.07);
    --sidebar-text: #94a3b8;
    --sidebar-text-hover: #f1f5f9;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);
    --sidebar-item-active-bg: rgba(var(--primary-rgb), 0.12);
    --sidebar-item-active-border: var(--primary);
    --sidebar-label-color: #64748b;
    --sidebar-user-bg: rgba(255, 255, 255, 0.03);
    --sidebar-user-border: rgba(255, 255, 255, 0.06);
    --sidebar-tooltip-bg: #1e293b;
    --sidebar-tooltip-text: #f8fafc;
    --sidebar-tooltip-border: rgba(255, 255, 255, 0.12);
}

body.light-mode {
    --bg-color: #f4f6f9;
    --sidebar-bg: #ffffff;
    --sidebar-border: #e2e8f0;
    --sidebar-text: #64748b;
    --sidebar-text-hover: #0f172a;
    --sidebar-text-active: #0f172a;
    --sidebar-item-hover-bg: #f8fafc;
    --sidebar-item-active-bg: rgba(var(--primary-rgb), 0.08);
    --sidebar-item-active-border: var(--primary);
    --sidebar-label-color: #94a3b8;
    --sidebar-user-bg: #f8fafc;
    --sidebar-user-border: #e2e8f0;
    --sidebar-tooltip-bg: #0f172a;
    --sidebar-tooltip-text: #ffffff;
    --sidebar-tooltip-border: #334155;

    --card-bg: #ffffff;
    --card-alt-bg: #f8fafc;
    --text-main: #1e1e2f;
    --text-color: #1e1e2f;
    --text-muted: #747d8c;
    --border-color: rgba(0, 0, 0, 0.1);
    --input-bg: #f8f9fa;
    --shadow: 0 4px 15px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background: var(--bg-color); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; transition: background 0.3s, color 0.3s; }

/* Layout & Sidebar */
.layout { display: flex; width: 100%; height: 100%; overflow: hidden; }
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    transition: width var(--sidebar-transition), min-width var(--sidebar-transition);
    overflow: hidden;
    position: relative;
    z-index: 100;
    user-select: none;
}
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
}

/* Sidebar Header */
.sidebar-header {
    padding: 0 16px;
    border-bottom: 1px solid var(--sidebar-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
    flex-shrink: 0;
    gap: 10px;
    overflow: hidden;
    transition: padding var(--sidebar-transition), justify-content var(--sidebar-transition);
}
.sidebar.collapsed .sidebar-header {
    padding: 0;
    justify-content: center;
}
.sidebar-header h2 {
    font-size: 14px;
    color: var(--sidebar-text-active);
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.18s ease;
}
.sidebar-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    text-transform: uppercase;
    line-height: 1;
}
.sidebar.collapsed .sidebar-header h2 {
    display: none;
}
.sidebar #sidebarLogo {
    max-height: 32px;
    max-width: 140px;
    object-fit: contain;
    transition: all var(--sidebar-transition);
}
.sidebar.collapsed #sidebarLogo {
    display: block !important;
    max-width: 32px;
    max-height: 32px;
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 10px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

/* Custom scrollbar for sidebar */
.sidebar-nav::-webkit-scrollbar { width: 3px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 10px; }
body.light-mode .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); }

/* Section Labels */
.nav-section-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--sidebar-label-color);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 14px 10px 6px 10px;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.18s ease;
}
.nav-section-label:first-child { padding-top: 4px; }
.sidebar.collapsed .nav-section-label {
    font-size: 0;
    padding: 8px 0;
    text-align: center;
    line-height: 0;
    margin: 4px 0;
}
.sidebar.collapsed .nav-section-label::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: var(--sidebar-border);
    margin: 0 auto;
}

/* Nav Items */
.nav-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 38px;
    margin: 0;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    position: relative;
    gap: 10px;
    border-left: 3px solid transparent;
}
.nav-item i {
    width: 20px;
    font-size: 15px;
    text-align: center;
    color: inherit;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}
.nav-item > span:not(.nav-update-dot) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.18s ease;
}
.nav-ext-icon {
    font-size: 10px !important;
    opacity: 0.35 !important;
    width: auto !important;
    margin-left: auto;
    transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.nav-item:hover .nav-ext-icon {
    opacity: 0.8 !important;
    transform: translate(1px, -1px);
}

/* Hover state — subtle, sleek, no translation jump */
.nav-item:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-text-hover);
}
.nav-item:hover i {
    opacity: 1;
}

/* Active state — subtle tint + left accent indicator */
.nav-item.active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    border-left-color: var(--sidebar-item-active-border);
}
.nav-item.active i {
    opacity: 1;
    color: var(--primary);
}

/* Collapsed nav items */
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0;
    width: 42px;
    height: 40px;
    margin: 2px auto;
    border-left: none;
}
.sidebar.collapsed .nav-item > span:not(.nav-update-dot),
.sidebar.collapsed .nav-item .nav-ext-icon {
    display: none;
}
.sidebar.collapsed .nav-item .nav-update-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    margin: 0 !important;
}
.sidebar.collapsed .nav-item i {
    margin: 0;
    font-size: 16px;
}
.sidebar.collapsed .nav-item.active {
    background: var(--sidebar-item-active-bg);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 8px;
}

/* Sidebar Footer - Modern App Style */
.sidebar-footer {
    padding: 12px 10px 14px 10px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

/* User Card - App Modern Profile Card */
.sidebar-user-card,
.sidebar-user-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--sidebar-user-bg);
    border: 1px solid var(--sidebar-user-border);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
    user-select: none;
}

body.light-mode .sidebar-user-card,
body.light-mode .sidebar-user-controls {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

body.dark-mode .sidebar-user-card,
body.dark-mode .sidebar-user-controls {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sidebar-user-card:hover,
.sidebar-user-controls:hover {
    background: var(--sidebar-item-hover-bg);
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* Avatar with Ring and Live Status Dot */
.user-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), #ff6b81);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
    letter-spacing: 0.5px;
    transition: transform 0.2s ease;
}

.sidebar-user-card:hover .avatar {
    transform: scale(1.04);
}

.user-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2ed573;
    border: 2px solid var(--sidebar-bg);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* User Metadata */
.user-meta,
.user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name-line {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

#userNameDisplay,
.user-name-text {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    letter-spacing: -0.2px;
}

.user-role-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-role-pill {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    line-height: 1.3;
}

.user-status-label {
    font-size: 11px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2ed573;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(46, 213, 115, 0.25);
    animation: userStatusPulse 2s infinite;
}

@keyframes userStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.4); }
    70% { box-shadow: 0 0 0 5px rgba(46, 213, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}

/* Theme Toggle Button (Modern App Icon) */
.btn-theme-modern,
.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--sidebar-text);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

body.light-mode .btn-theme-modern,
body.light-mode .btn-icon {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.dark-mode .btn-theme-modern,
body.dark-mode .btn-icon {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.btn-theme-modern:hover,
.btn-icon:hover {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: scale(1.06);
}

/* Bottom Action Buttons (Salir & Toggle) */
.sidebar-actions {
    display: flex;
    gap: 7px;
    align-items: center;
}

.btn-logout-modern,
.btn-logout {
    flex: 1;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    border: 1px solid rgba(255, 71, 87, 0.16);
    background: rgba(255, 71, 87, 0.06);
    color: #ff4757;
}

.btn-logout-modern i,
.btn-logout i {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.btn-logout-modern:hover,
.btn-logout:hover {
    background: #ff4757;
    color: #ffffff;
    border-color: #ff4757;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
}

.btn-logout-modern:hover i,
.btn-logout:hover i {
    transform: translateX(2px);
}

.btn-sidebar-toggle-modern,
.btn-sidebar-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--sidebar-user-bg);
    border: 1px solid var(--sidebar-user-border);
    color: var(--sidebar-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    font-size: 12px;
}

body.light-mode .btn-sidebar-toggle-modern,
body.light-mode .btn-sidebar-toggle {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

body.dark-mode .btn-sidebar-toggle-modern,
body.dark-mode .btn-sidebar-toggle {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.07);
    color: #94a3b8;
}

.btn-sidebar-toggle-modern:hover,
.btn-sidebar-toggle:hover {
    color: var(--text-main);
    border-color: rgba(var(--primary-rgb), 0.3);
    background: var(--sidebar-item-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

/* Collapsed Sidebar Mode */
.sidebar.collapsed .sidebar-footer {
    padding: 10px 6px;
    gap: 6px;
}

.sidebar.collapsed .sidebar-user-card,
.sidebar.collapsed .sidebar-user-controls {
    justify-content: center;
    padding: 6px 0;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-direction: column;
    gap: 6px;
}

.sidebar.collapsed .user-meta { display: none; }
.sidebar.collapsed #userNameDisplay { display: none; }

.sidebar.collapsed .btn-theme-modern,
.sidebar.collapsed #btnToggleTheme {
    width: 36px;
    height: 32px;
    border-radius: 8px;
}

.sidebar.collapsed .sidebar-actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
}

.sidebar.collapsed .btn-logout-modern,
.sidebar.collapsed .btn-logout {
    flex: initial;
    width: 36px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
}

.sidebar.collapsed .btn-logout-modern span,
.sidebar.collapsed .btn-logout span {
    display: none;
}

.sidebar.collapsed .btn-sidebar-toggle-modern,
.sidebar.collapsed .btn-sidebar-toggle {
    width: 36px;
    height: 32px;
    border-radius: 8px;
}

/* Floating SaaS Tooltip */
.sidebar-floating-tooltip {
    position: fixed;
    transform: translateY(-50%) translateX(0);
    background: var(--sidebar-tooltip-bg);
    color: var(--sidebar-tooltip-text);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--sidebar-tooltip-border);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 99999;
    font-family: 'Inter', sans-serif;
}
.sidebar-floating-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.sidebar-floating-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-right-color: var(--sidebar-tooltip-bg);
}

/* Main Content & Header */
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-color); }
.page-header { background: var(--card-bg); padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); min-height: 70px; }
.page-header-left { display: flex; align-items: center; gap: 15px; }
.page-header h1 { font-size: 14px; font-weight: 700; color: var(--text-main); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }

/* Header Quick App Shortcuts */
.page-header-quick-links { display: flex; align-items: center; gap: 8px; margin-left: 20px; margin-right: auto; }
.header-quick-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text-main); background: var(--input-bg, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.02); }
.header-quick-btn i { font-size: 13px; }
.header-quick-btn.quick-btn-pos i { color: #2ed573; }
.header-quick-btn.quick-btn-cocina i { color: #ffa502; }
.header-quick-btn.quick-btn-moto i { color: #1e90ff; }
.header-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.header-quick-btn.quick-btn-pos:hover { background: rgba(46, 213, 115, 0.1); border-color: #2ed573; color: #2ed573; }
.header-quick-btn.quick-btn-cocina:hover { background: rgba(255, 165, 2, 0.1); border-color: #ffa502; color: #ffa502; }
.header-quick-btn.quick-btn-moto:hover { background: rgba(30, 144, 255, 0.1); border-color: #1e90ff; color: #1e90ff; }

/* Sidebar external item icon */
.nav-ext-icon { margin-left: auto; font-size: 10px; opacity: 0.35; transition: all 0.2s; }
.nav-item:hover .nav-ext-icon { opacity: 0.9; transform: translate(1px, -1px); }
.sidebar.collapsed .nav-ext-icon { display: none; }

.page-header-actions { display: flex; align-items: center; gap: 10px; }
.btn-label-short { display: none; }
.header-product-tabs { display: flex; align-items: center; gap: 15px; }
.header-product-tabs .settings-tabs { margin-bottom: 0; }
.mobile-only { display: none; }
.content-area { flex: 1; padding: 20px 30px 30px 30px; overflow-y: auto; }

.view-section { display: none; animation: fadeIn 0.3s; }
.view-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Table Toolbars */
body.hide-page-header .page-header { display: none; }
.table-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--card-bg); border-radius: 10px; margin-bottom: 15px; border: 1px solid var(--border-color); }
.bulk-actions { display: flex; gap: 10px; align-items: center; }
.select-modern { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-main); outline: none; font-family: inherit; }
.select-modern:focus { border-color: #6c5ce7; }
.mt-10 { margin-top: 10px; }

/* Mobile Responsive Sidebar */
@media (max-width: 768px) {
    body, .layout { height: 100dvh; }
    .mobile-only { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
    .sidebar { position: fixed; left: 0; top: 0; height: 100vh; height: 100dvh; z-index: 1000; transform: translateX(-100%); width: 280px !important; overflow: hidden; display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.3); }
    .sidebar.mobile-open { transform: translateX(0); }
    .btn-sidebar-toggle { display: none; }
    .page-header { padding: 12px 16px; position: sticky; top: 0; z-index: 90; min-height: auto; gap: 8px; }
    .page-header h1 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .page-header-quick-links { gap: 4px; margin-left: 6px; margin-right: 0; }
    .header-quick-btn { padding: 6px 9px; font-size: 11px; }
    .header-quick-btn span { display: none; }
    .page-header-actions { gap: 6px !important; }
    .page-header-actions .btn { padding: 8px 14px; font-size: 12px; }
    .btn-label-full { display: none; }
    .btn-label-short { display: inline; }
    body.hide-page-header .page-header { display: flex !important; }
    .content-area { padding: 15px 20px 20px 20px; }
    .sidebar-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; display: none; }
    .sidebar-overlay.active { display: block; }
}

/* Stats & Buttons */
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.stat-card { background: var(--card-bg); padding: 25px; border-radius: 15px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow); }
.stat-icon { width: 60px; height: 60px; border-radius: 12px; background: rgba(var(--primary-rgb), 0.1); color: var(--primary); display: flex; justify-content: center; align-items: center; font-size: 24px; }

/* Skeleton Loader */
.skeleton-loader {
    display: inline-block;
    width: 48px;
    height: 24px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 6px;
    vertical-align: middle;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.action-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.btn { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); cursor: pointer; font-weight: 600; transition: all 0.2s; }
.btn-primary { background: var(--primary); color: #fff; border: none; }
.btn-primary:hover { box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4); transform: translateY(-2px); }
.btn-danger { background: #dc3545; color: #fff; border: none; }
.btn-danger:hover { background: #c82333; box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4); }

/* Store actions grid (desktop: inline row, mobile: 2-col grid via media query) */
.store-actions-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Tables (Flat Clean View) */
.table-container { background: var(--card-bg); border-radius: 15px; box-shadow: var(--shadow); overflow-x: auto; padding: 20px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th { padding: 15px 20px; text-align: left; background: var(--input-bg); vertical-align: top; border: none; }
.data-table th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.data-table th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }

.data-table tbody tr { transition: background 0.2s; }
.data-table tbody tr:hover { background: rgba(var(--primary-rgb), 0.03); }

.data-table td { padding: 18px 20px; background: transparent; border-bottom: 1px solid var(--border-color); font-size: 14px; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* Integrated Filters */
.th-content { display: flex; flex-direction: column; gap: 10px; }
.th-title { font-size: 12px; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.5px; }
.filter-wrapper { position: relative; width: 100%; min-width: 120px; }
.filter-wrapper i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 12px; pointer-events: none;}
.filter-wrapper .filter-input { width: 100%; padding: 10px 12px 10px 32px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font-size: 12px; transition: all 0.2s; font-family: 'Inter', sans-serif;}
.filter-wrapper .filter-input:focus { border-color: var(--primary); background: var(--input-bg); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1); outline: none; }
.filter-wrapper select.filter-input { cursor: pointer; appearance: none; padding-right: 25px; }

@media (max-width: 768px) {
    .data-table thead { display: none; }
    .data-table tbody tr { display: flex; flex-direction: column; padding: 15px 40px 15px 15px; border-bottom: 4px solid var(--bg-color); border-radius: 12px; margin-bottom: 8px; background: var(--card-bg); position: relative; cursor: pointer; }
    
    .data-table tbody tr::after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 22px;
        right: 15px;
        color: var(--primary, #7047eb);
        font-size: 16px;
        transition: transform 0.3s ease;
    }
    
    .data-table tbody tr.expanded::after {
        transform: rotate(180deg);
    }
    
    /* Mostrar solo la segunda columna (Nombre) al estar colapsado */
    .data-table tbody tr:not(.expanded) td:not(:nth-child(2)) {
        display: none;
    }
    
    /* Eliminar padding y bordes internos en el modo colapsado para hacerlo más compacto */
    .data-table tbody tr:not(.expanded) td {
        border-bottom: none;
        padding: 5px 0;
    }

    .data-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-color); gap: 10px; }
    .data-table tbody td:last-child { border-bottom: none; }
    .data-table tbody td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }

    /* Cliente cell: avatar + name should stay on the right side, not stretch */
    .data-table tbody td[data-label="Cliente"] > div { min-width: 0; }
    .data-table tbody td[data-label="Cliente"] strong { word-break: break-word; }
    .data-table tbody td[data-label="Cliente"] small { word-break: break-all; }

    /* Actions cell: stack vertically */
    .data-table tbody td[data-label="Acciones"] { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 14px; }
    .data-table tbody td[data-label="Acciones"]::before { text-align: center; margin-bottom: 4px; }

    /* Store actions grid (buttons with text) */
    .data-table tbody td[data-label="Acciones"] .store-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
    .data-table tbody td[data-label="Acciones"] .store-actions-grid .btn { margin: 0 !important; font-size: 12px; padding: 8px 10px; white-space: nowrap; justify-content: center; display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; width: 100%; text-align: center; box-sizing: border-box; }
    .data-table tbody td[data-label="Acciones"] .store-actions-grid .btn-danger-full { grid-column: 1 / -1; }

    /* Customer/Order icon action buttons */
    .data-table tbody td[data-label="Acciones"] .order-actions-group { justify-content: center; width: 100%; gap: 10px; }
    .data-table tbody td[data-label="Acciones"] .order-actions-group .btn-order-action { width: 42px; height: 42px; font-size: 15px; }
}

/* Product Form Layout */
.product-form-layout { display: flex; gap: 20px; align-items: flex-start; }
.pf-main { flex: 2; min-width: 0; }
.pf-sidebar { flex: 1; }

@media (max-width: 900px) {
    .product-form-layout { flex-direction: column; }
    .pf-main, .pf-sidebar { width: 100%; flex: none; }
}

.image-upload-box { border: 2px dashed var(--border-color); border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s; background: var(--bg-color); }
.image-upload-box:hover { border-color: var(--primary); background: rgba(255, 71, 87, 0.05); }
.image-upload-box .upload-placeholder i { color: var(--text-muted); margin-bottom: 10px; }

.gallery-upload-area { border: 1px solid var(--border-color); padding: 15px; border-radius: 8px; background: var(--bg-color); }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.gallery-add-btn { width: 100px; height: 100px; border: 2px dashed var(--border-color); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: all 0.3s; }
.gallery-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(255, 71, 87, 0.05); }
.gallery-item { width: 100px; height: 100px; border-radius: 8px; position: relative; overflow: hidden; border: 1px solid var(--border-color); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .remove-btn { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gallery-item .remove-btn:hover { background: var(--danger); }

/* Modals */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal { background: var(--card-bg); width: 100%; max-width: 600px; border-radius: 15px; display: flex; flex-direction: column; max-height: 90vh; }
.modal.modal-lg { max-width: 900px; }
.modal-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; background: var(--card-bg); border-radius: 0 0 15px 15px; }
.btn-close { width: 32px; height: 32px; border-radius: 50%; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all 0.2s; font-size: 14px;}
.btn-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: rotate(90deg); }

/* Product Type Selection Grid */
.product-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-top: 10px; }
.product-type-card { cursor: pointer; position: relative; }
.product-type-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ptc-content { background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 12px; padding: 20px; transition: all 0.2s; height: 100%; display: flex; flex-direction: column; }
.ptc-icon { width: 45px; height: 45px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 15px; }
.ptc-content h4 { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0 0 10px 0; }
.ptc-content p { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0 0 20px 0; flex: 1; }
.ptc-action { font-size: 11px; font-weight: 700; color: #6c5ce7; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }

.product-type-card:hover .ptc-content { border-color: rgba(108, 92, 231, 0.4); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.05); }
.product-type-card input[type="radio"]:checked + .ptc-content { border-color: #6c5ce7; background: rgba(108, 92, 231, 0.02); }
.product-type-card input[type="radio"]:checked + .ptc-content .ptc-action { opacity: 1; }
body.dark-mode .product-type-card input[type="radio"]:checked + .ptc-content { background: rgba(108, 92, 231, 0.05); }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 500px) { .form-grid { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 13px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); box-sizing: border-box; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); }
.form-group select option { background: var(--card-bg); color: var(--text-main); padding: 8px; }
body.dark-mode select, body.dark-mode .select-modern { background-color: #1a1a1a; color: #ffffff; }
body.dark-mode select option { background-color: #1a1a1a; color: #ffffff; }
body.dark-mode select option:checked { background-color: var(--primary); color: #ffffff; }
body.light-mode select, body.light-mode .select-modern { background-color: var(--input-bg); color: var(--text-main); }
body.light-mode select option { background-color: #ffffff; color: #1e1e2f; }
body.light-mode select option:checked { background-color: var(--primary); color: #ffffff; }

/* Settings Tabs */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; overflow-x: auto; }
.tab-btn { padding: 10px 20px; border: none; background: var(--card-bg); color: var(--text-muted); cursor: pointer; border-radius: 8px; font-weight: 600; }
.tab-btn.active { background: var(--primary); color: #fff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

.settings-card { background: var(--card-bg); padding: 25px; border-radius: 15px; box-shadow: var(--shadow); }
.settings-card h3 { margin-bottom: 20px; color: var(--primary); font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }

/* Modern Color Picker */
.color-picker-modern { display: flex; align-items: center; gap: 15px; background: var(--input-bg); padding: 10px; border-radius: 12px; border: 1px solid var(--border-color); width: max-content;}
.color-swatch-wrapper { width: 50px; height: 50px; border-radius: 50%; cursor: pointer; overflow: hidden; position: relative; border: 2px solid var(--border-color); box-shadow: var(--shadow); }
.color-swatch { width: 100%; height: 100%; pointer-events: none; background-color: var(--primary); }
.color-input-hidden { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }
.color-hex { display: flex; flex-direction: column; justify-content: center; }
.color-hex span { font-weight: 700; font-size: 16px; color: var(--text-main); }
.btn-text { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; padding: 0; margin-top: 5px; }
.btn-text:hover { text-decoration: underline; }

/* Modern Logo Uploads */
.logos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.logo-upload-modern { background: var(--input-bg); border: 2px dashed var(--border-color); border-radius: 15px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 150px; overflow: hidden;}
.logo-upload-modern:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.05); transform: translateY(-3px); }
.file-input-hidden { display: none; }
.upload-placeholder i { font-size: 30px; color: var(--primary); margin-bottom: 10px; transition: transform 0.3s; }
.logo-upload-modern:hover .upload-placeholder i { transform: translateY(-5px); }
.upload-placeholder p { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.preview-img { max-width: 90%; max-height: 110px; object-fit: contain; border-radius: 8px; z-index: 2; position: absolute; background: transparent; padding: 5px; }

/* Switch */
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--border-color); }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(120,120,120,0.3); transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(20px); }

/* ============================================
   Phase 2 - Image UX Improvements
   ============================================ */

/* Drag & Drop */
.image-upload-box.drag-over,
.gallery-upload-area.drag-over {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    box-shadow: inset 0 0 20px rgba(var(--primary-rgb), 0.1);
}
.image-upload-box.drag-over .upload-placeholder i,
.gallery-upload-area.drag-over .gallery-add-btn i {
    color: var(--primary);
    transform: translateY(-8px) scale(1.2);
}
.drop-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.drag-over .drop-hint { opacity: 1; }
.drag-over .upload-placeholder { opacity: 0.3; }
.drag-over .gallery-grid { opacity: 0.3; }

/* Sortable Gallery */
.gallery-item {
    cursor: grab;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.gallery-item:active { cursor: grabbing; }
.gallery-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 0 0 2px var(--primary);
}
.gallery-item.drag-over-item {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(var(--primary-rgb), 0.4);
}
.gallery-item .gallery-item-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    opacity: 0;
    transition: opacity 0.2s;
}
.gallery-item:hover .gallery-item-actions { opacity: 1; }
.gallery-item .btn-alt-text {
    background: rgba(255,255,255,0.9);
    color: #333;
    border: none;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    font-size: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.gallery-item .btn-alt-text:hover { background: var(--primary); color: #fff; }
.gallery-item .btn-alt-text.has-alt { background: var(--success); color: #fff; }
.gallery-sort-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gallery-sort-hint i { font-size: 14px; }

/* Video Field */
.video-url-group { position: relative; }
.video-url-group .video-provider-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.3s;
}
.video-url-group .video-provider-icon.youtube { color: #ff0000; }
.video-url-group .video-provider-icon.vimeo { color: #1ab7ea; }
.video-preview-container {
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    display: none;
}

.media-view-section.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - 80px);
}

/* =========================================
   MEDIA GALLERY MODAL (WORDPRESS STYLE)
========================================= */

.media-modal {
    width: 94vw !important;
    max-width: 1300px !important;
    height: 90vh !important;
    max-height: 920px !important;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
}

.media-modal .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.media-modal .modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main);
}

.media-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--sidebar-bg);
    padding: 0 16px;
}

.media-tab {
    padding: 13px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.media-tab:hover {
    color: var(--text-main);
}

.media-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.media-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    background: var(--bg-color);
}

.media-tab-content {
    display: none;
    width: 100%;
    height: 100%;
}

.media-tab-content.active {
    display: flex;
}

/* Library Grid */
.media-library-grid {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 15px;
    align-content: flex-start;
    background: var(--bg-color);
}

.media-library-grid::-webkit-scrollbar {
    width: 6px;
}

.media-library-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.media-item {
    position: relative;
    padding-top: 100%; /* 1:1 aspect ratio */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--input-bg);
    border: 2px solid var(--border-color);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

body.dark-mode .media-item {
    background: #181920;
    border-color: #2b2e38;
}

body.light-mode .media-item {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.media-item img, .media-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-item.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
}

.media-item.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Sidebar */
.media-sidebar {
    width: 350px;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

body.dark-mode .media-sidebar {
    background: #14151a;
    border-left-color: #272a33;
}

body.light-mode .media-sidebar {
    background: #f8fafc;
    border-left-color: #e2e8f0;
}

.media-sidebar h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
}

.media-preview-container {
    width: 100%;
    height: 180px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

body.dark-mode .media-preview-container {
    background: #1a1c22;
    border-color: #2d313c;
}

body.light-mode .media-preview-container {
    background: #edf2f7;
    border-color: #cbd5e1;
}

.media-preview-container img, .media-preview-container video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.media-preview-container img:not([src]), .media-preview-container img[src=""] {
    display: none;
}

.media-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.dark-mode .media-meta {
    background: #1a1c24;
    border-color: #2d313c;
}

body.light-mode .media-meta {
    background: #ffffff;
    border-color: #e2e8f0;
}

.media-meta p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-muted);
}

.media-meta p strong {
    color: var(--text-main);
    font-weight: 600;
}

.media-meta p span {
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    color: var(--text-muted);
}

.media-sidebar .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.media-sidebar label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}

.media-sidebar .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--text-main);
    background: var(--input-bg);
    transition: all 0.2s;
    box-sizing: border-box;
}

body.dark-mode .media-sidebar .form-control {
    background: #1a1c22;
    border-color: #2d313c;
    color: #f8fafc;
}

body.light-mode .media-sidebar .form-control {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

.media-sidebar .form-control:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}

.media-sidebar textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

.media-sidebar .btn-secondary {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
}

body.dark-mode .media-sidebar .btn-secondary {
    background: #252830;
    border-color: #3a3f4d;
    color: #f8fafc;
}

body.dark-mode .media-sidebar .btn-secondary:hover {
    background: #2e3340;
    border-color: var(--primary);
}

body.light-mode .media-sidebar .btn-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e293b;
}

body.light-mode .media-sidebar .btn-secondary:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.media-sidebar .btn-danger {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(220, 53, 69, 0.3);
    background: rgba(220, 53, 69, 0.08);
    color: #ff4757;
}

.media-sidebar .btn-danger:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: #ff4757;
}

/* Dropzone */
.media-dropzone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    margin: 20px;
    background: var(--card-bg);
    transition: all 0.3s;
}

.media-dropzone.dragover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.media-dropzone h3 {
    margin-bottom: 10px;
    color: var(--text-color);
}

.media-upload-progress {
    padding: 20px;
}

.media-progress-item {
    margin-bottom: 10px;
}

.media-progress-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.media-progress-fill {
    height: 100%;
    background: var(--primary);
    width: 0%;
    transition: width 0.3s;
}

@media (max-width: 768px) {
    .media-modal {
        width: 95%;
        max-width: 95% !important;
        height: 98vh;
    }

    /* Sidebar slides up from bottom on mobile */
    .media-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100% !important;
        max-height: 75vh;
        z-index: 100;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: none;
        border-top: 1px solid var(--border-color);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
        padding: 16px 20px 24px;
    }
    .media-sidebar.open {
        transform: translateY(0);
    }
    /* Drag handle visual cue */
    .media-sidebar.open::before {
        content: '';
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 4px;
        margin: 0 auto 12px;
    }
    .media-sidebar h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .media-preview-container {
        height: 120px;
        margin-bottom: 10px;
    }

    /* Grid smaller on mobile */
    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
        padding: 12px;
    }

    /* Media view card padding */
    #view-media > div {
        padding: 14px !important;
    }
    #view-media h2 {
        font-size: 16px !important;
    }

    /* Dropzone compact on mobile */
    .media-dropzone {
        padding: 30px 16px !important;
        margin: 10px !important;
    }
    .media-dropzone h3 {
        font-size: 14px !important;
    }
    .media-drag-overlay-content i {
        font-size: 28px;
    }
    .media-drag-overlay-content span {
        font-size: 13px;
    }

    /* Media toolbar stacking on mobile */
    #view-media > div > div:first-child {
        flex-direction: column;
        align-items: flex-start !important;
    }
    #view-media > div > div:first-child > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }
    #view-media #btnBulkDeleteMedia,
    #view-media #btnSelectAllMedia,
    #view-media #btnDeselectAllMedia {
        font-size: 12px;
        padding: 6px 10px;
    }
}
.video-preview-container.active { display: block; }
.video-preview-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Alt Text Modal */
.alt-text-popover {
    position: fixed;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 2000;
    width: 280px;
    animation: popoverIn 0.2s ease;
}
@keyframes popoverIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
.alt-text-popover label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: block;
}
.alt-text-popover input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}
.alt-text-popover input:focus {
    outline: none;
    border-color: var(--primary);
}
.alt-text-popover .popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.alt-text-popover .popover-actions button {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    transition: all 0.2s;
}
.alt-text-popover .popover-actions button.btn-save {
    background: var(--primary);
    color: #fff;
    border: none;
}

/* Extra Builder Styles */
.extra-group { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.extra-group-header { display: flex; align-items: center; padding: 12px 16px; background: var(--input-bg); border-bottom: 1px solid var(--border-color); gap: 12px; }
.extra-group-handle { background: var(--primary); color: white; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: grab; flex-shrink: 0; }
.extra-group-name { flex: 1; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.95rem; font-weight: 600; background: var(--card-bg); color: var(--text-main); }
.extra-group-actions { display: flex; gap: 6px; }
.extra-group-actions .btn-icon { border: 1px solid var(--border-color); width: 36px; height: 36px; border-radius: 8px; background: var(--card-bg); color: var(--text-main); }
.extra-group-actions .btn-icon.delete { color: #ef4444; border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.12); }
.extra-group-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card-bg); border-bottom: 1px solid var(--border-color); }
.extra-group-settings label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.85rem; color: var(--text-muted); }
.extra-group-settings select,
.extra-group-settings input[type='number'] { height: 32px; padding: 0 8px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.85rem; background: var(--input-bg); color: var(--text-main); }

.extra-options-container { padding: 16px; background: var(--card-bg); border-radius: 12px; }
.extra-options-title { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Base Light Mode Extra Option Card */
.extra-option { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px; display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; position: relative; box-shadow: 0 2px 6px rgba(0,0,0,0.03); transition: border-color 0.2s, box-shadow 0.2s; }
.extra-option:hover { border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.extra-option-handle { width: 22px; height: 70px; display: flex; align-items: center; justify-content: center; color: #94a3b8; cursor: grab; border-radius: 6px; transition: all 0.2s ease; flex-shrink: 0; }
.extra-option-handle:hover { color: var(--primary); background: #f1f5f9; }
.extra-option-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.45 !important; background: #eef2ff !important; border: 2px dashed var(--primary) !important; }
.sortable-chosen { background: #ffffff !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important; }
.extra-option-img-upload { width: 70px; height: 70px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; flex-shrink: 0; transition: border-color 0.2s; }
.extra-option-img-upload:hover { border-color: var(--primary); }
.extra-option-img-upload img { width: 100%; height: 100%; object-fit: cover; }
.extra-option-img-upload i { color: #94a3b8; font-size: 1.3rem; }
.extra-option-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Option Rows */
.extra-opt-row-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.opt-title-input { flex: 1; min-width: 140px; height: 38px !important; padding: 0 12px !important; font-weight: 600 !important; font-size: 14px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; background: #ffffff !important; color: #1e293b !important; transition: all 0.2s ease !important; }
.opt-title-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; outline: none !important; }

.opt-price-container { position: relative; width: 120px; flex-shrink: 0; display: flex; align-items: center; }
.opt-price-prefix { position: absolute; left: 10px; font-size: 13px; font-weight: 700; color: #64748b; pointer-events: none; z-index: 1; }
.opt-price-input { width: 100% !important; height: 38px !important; padding-left: 28px !important; padding-right: 10px !important; font-weight: 700 !important; font-size: 14px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; text-align: right !important; background: #ffffff !important; color: #0f172a !important; transition: all 0.2s ease !important; }
.opt-price-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; outline: none !important; }

.btn-delete-opt { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #ef4444; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all 0.2s ease; }
.btn-delete-opt:hover { background: #ef4444; border-color: #ef4444; color: #ffffff; transform: scale(1.05); }

.extra-opt-row-desc { display: flex; align-items: center; gap: 10px; width: 100%; }
.opt-desc-input { flex: 1; min-width: 140px; height: 36px !important; padding: 0 12px !important; font-size: 13px !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; background: #f8fafc !important; color: #334155 !important; transition: all 0.2s ease !important; }
.opt-desc-input:focus { border-color: var(--primary) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; outline: none !important; }

.btn-sub-opt { height: 36px; padding: 0 12px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; cursor: pointer; border-radius: 8px; flex-shrink: 0; white-space: nowrap; transition: all 0.2s ease; }
.btn-sub-opt:hover { background: #e2e8f0; border-color: #94a3b8; }
.btn-sub-opt i { color: var(--primary); }
.badge-sub-count { background: var(--primary); color: #ffffff; border-radius: 10px; font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: 2px; }

.extra-opt-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #f8fafc; padding: 8px 10px; border-radius: 8px; border: 1px solid #f1f5f9; }
.badge-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; user-select: none; transition: all 0.15s ease; }
.badge-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.badge-preselected { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
.badge-recommended { background: #fef3c7; color: #d97706; border: 1px solid #fde68a; }
.badge-multiple { background: #e0f2fe; color: #0284c7; border: 1px solid #bae6fd; }
.badge-neutral { background: #ffffff; color: #64748b; border: 1px solid #e2e8f0; font-weight: 500; }
.badge-neutral:hover { border-color: #cbd5e1; background: #f8fafc; }

.extra-opt-limits { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.extra-opt-limit-badge { display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600; color: #475569; }
.extra-opt-limit-badge input { width: 50px; height: 26px; padding: 0 4px; font-size: 12px; font-weight: 700; border: 1px solid #cbd5e1; border-radius: 4px; text-align: center; }

.dyn-sub-container { padding: 12px; background: #f8fafc; border-radius: 8px; border: 1px dashed #cbd5e1; margin-top: 4px; }
.dyn-sub-opt-row { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; }

.btn-add-option { width: 100%; padding: 12px; border: 1px dashed var(--primary); background: transparent; color: var(--primary); font-weight: 600; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
.btn-add-option:hover { background: rgba(99, 102, 241, 0.05); }
.btn-remove-option { position: absolute; right: 15px; top: 15px; color: var(--text-muted); background: transparent; border: none; cursor: pointer; font-size: 1.1rem; }
.btn-remove-option:hover { color: #ff4757; }

/* ========================================================
   DARK MODE ENHANCEMENTS FOR EXTRA BUILDER & EXTRA MODAL
   ======================================================== */
body:not(.light-mode) .extra-group,
body.dark-mode .extra-group {
    background: #181820;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

body:not(.light-mode) .extra-group-header,
body.dark-mode .extra-group-header {
    background: #121218;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body:not(.light-mode) .extra-group-name,
body.dark-mode .extra-group-name {
    background: #1e1e28;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

body:not(.light-mode) .extra-group-settings,
body.dark-mode .extra-group-settings {
    background: #15151c;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body:not(.light-mode) .extra-group-settings label,
body.dark-mode .extra-group-settings label {
    color: #cbd5e1;
}

body:not(.light-mode) .extra-group-settings select,
body:not(.light-mode) .extra-group-settings input[type='number'],
body.dark-mode .extra-group-settings select,
body.dark-mode .extra-group-settings input[type='number'] {
    background: #1e1e28;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}

body:not(.light-mode) .extra-options-container,
body.dark-mode .extra-options-container {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-mode) .extra-options-title,
body.dark-mode .extra-options-title {
    color: #cbd5e1 !important;
    font-weight: 800 !important;
}

/* Option Card in Dark Mode - High Contrast, Modern Elevation */
body:not(.light-mode) .extra-option,
body.dark-mode .extra-option {
    background: #181822 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-mode) .extra-option:hover,
body.dark-mode .extra-option:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

body:not(.light-mode) .extra-option-handle,
body.dark-mode .extra-option-handle {
    color: #64748b !important;
}

body:not(.light-mode) .extra-option-handle:hover,
body.dark-mode .extra-option-handle:hover {
    color: var(--primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-mode) .sortable-ghost,
body.dark-mode .sortable-ghost {
    background: rgba(var(--primary-rgb), 0.15) !important;
    border: 2px dashed var(--primary) !important;
}

body:not(.light-mode) .sortable-chosen,
body.dark-mode .sortable-chosen {
    background: #232332 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

body:not(.light-mode) .extra-option-img-upload,
body.dark-mode .extra-option-img-upload {
    background: #101016 !important;
    border: 2px dashed rgba(255, 255, 255, 0.22) !important;
    color: #94a3b8 !important;
}

body:not(.light-mode) .extra-option-img-upload:hover,
body.dark-mode .extra-option-img-upload:hover {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.1) !important;
}

body:not(.light-mode) .extra-option-img-upload i,
body.dark-mode .extra-option-img-upload i {
    color: #64748b !important;
}

/* Inputs in Option Card - Dark Mode */
body:not(.light-mode) .opt-title-input,
body.dark-mode .opt-title-input {
    background: #0f0f15 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .opt-title-input:focus,
body.dark-mode .opt-title-input:focus {
    border-color: var(--primary) !important;
    background: #151520 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
}

body:not(.light-mode) .opt-price-prefix,
body.dark-mode .opt-price-prefix {
    color: #a1a1aa !important;
}

body:not(.light-mode) .opt-price-input,
body.dark-mode .opt-price-input {
    background: #0f0f15 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .opt-price-input:focus,
body.dark-mode .opt-price-input:focus {
    border-color: var(--primary) !important;
    background: #151520 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
}

body:not(.light-mode) .btn-delete-opt,
body.dark-mode .btn-delete-opt {
    background: rgba(239, 68, 68, 0.16) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #f87171 !important;
}

body:not(.light-mode) .btn-delete-opt:hover,
body.dark-mode .btn-delete-opt:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

body:not(.light-mode) .opt-desc-input,
body.dark-mode .opt-desc-input {
    background: #0f0f15 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #e2e8f0 !important;
}

body:not(.light-mode) .opt-desc-input:focus,
body.dark-mode .opt-desc-input:focus {
    border-color: var(--primary) !important;
    background: #151520 !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25) !important;
}

body:not(.light-mode) .btn-sub-opt,
body.dark-mode .btn-sub-opt {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #ddd6fe !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
}

body:not(.light-mode) .btn-sub-opt:hover,
body.dark-mode .btn-sub-opt:hover {
    background: rgba(139, 92, 246, 0.32) !important;
    border-color: #8b5cf6 !important;
    color: #ffffff !important;
}

body:not(.light-mode) .badge-sub-count,
body.dark-mode .badge-sub-count {
    background: #8b5cf6 !important;
    color: #ffffff !important;
}

/* Option Badges & Switches in Dark Mode */
body:not(.light-mode) .extra-opt-badges,
body.dark-mode .extra-opt-badges {
    background: #101016 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-mode) .badge-preselected,
body.dark-mode .badge-preselected {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

body:not(.light-mode) .badge-recommended,
body.dark-mode .badge-recommended {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fde047 !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

body:not(.light-mode) .badge-multiple,
body.dark-mode .badge-multiple {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(59, 130, 246, 0.45) !important;
}

body:not(.light-mode) .badge-neutral,
body.dark-mode .badge-neutral {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-mode) .badge-neutral:hover,
body.dark-mode .badge-neutral:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* Limit Badges in Dark Mode */
body:not(.light-mode) .extra-opt-limit-badge,
body.dark-mode .extra-opt-limit-badge {
    background: #101016 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

body:not(.light-mode) .extra-opt-limit-badge input,
body.dark-mode .extra-opt-limit-badge input {
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .dyn-sub-container,
body.dark-mode .dyn-sub-container {
    background: #101016 !important;
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
}

body:not(.light-mode) .dyn-sub-opt-row,
body.dark-mode .dyn-sub-opt-row {
    background: #1c1c26 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .dyn-sub-opt-row input,
body.dark-mode .dyn-sub-opt-row input {
    background: #0f0f15 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .btn-add-option,
body.dark-mode .btn-add-option {
    background: rgba(var(--primary-rgb), 0.1) !important;
    border: 1.5px dashed var(--primary) !important;
    color: #ffffff !important;
}

body:not(.light-mode) .btn-add-option:hover,
body.dark-mode .btn-add-option:hover {
    background: rgba(var(--primary-rgb), 0.22) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Global Extra Modal Specifics */
body:not(.light-mode) #dyn-ge-modal .modal,
body.dark-mode #dyn-ge-modal .modal {
    background: #121217 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
}

body:not(.light-mode) #dyn-ge-modal .preview-sidebar,
body.dark-mode #dyn-ge-modal .preview-sidebar {
    background: #0c0c10 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-mode) #dyn_globalExtraPreviewContainer,
body.dark-mode #dyn_globalExtraPreviewContainer {
    background: #14141c !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

body:not(.light-mode) #dyn-ge-modal label,
body.dark-mode #dyn-ge-modal label {
    color: #cbd5e1;
}

body:not(.light-mode) #dyn-ge-modal select,
body.dark-mode #dyn-ge-modal select {
    background: #181822 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-mode) #dyn-ge-modal input[type="text"],
body:not(.light-mode) #dyn-ge-modal input[type="number"]:not(.opt-price):not(.opt-price-input),
body.dark-mode #dyn-ge-modal input[type="text"],
body.dark-mode #dyn-ge-modal input[type="number"]:not(.opt-price):not(.opt-price-input) {
    background: #181822;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 600px) {
    .extra-option {
        flex-direction: column;
        align-items: stretch;
    }
    .extra-option-handle {
        width: 100%;
        height: 24px;
    }
    .extra-opt-row-top,
    .extra-opt-row-desc {
        flex-wrap: wrap;
    }
    .opt-price-container {
        width: 100%;
    }
    .btn-delete-opt {
        margin-left: auto;
    }
}
.btn-remove-option { position: absolute; right: 15px; top: 15px; color: var(--text-muted); background: transparent; border: none; cursor: pointer; font-size: 1.1rem; }
.btn-remove-option:hover { color: #ff4757; }

/* Modern Switcher */
.modern-switcher {
    display: inline-flex;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
}
.modern-switcher .switch-btn {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.modern-switcher .switch-btn:hover {
    color: var(--text-main);
}
.modern-switcher .switch-btn.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ==========================================================================
   MODERN APP CATALOG TOOLBAR, SEGMENTED TABS & APP TABLES
   ========================================================================== */

/* Modern Checkbox */
.modern-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-color);
    border-radius: 5px;
    background: var(--input-bg);
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    vertical-align: middle;
}
.modern-checkbox:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.modern-checkbox:checked::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-0.5px, -1px);
    display: block;
}
.modern-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* Catalog Modern Tabs & Toolbar */
.catalog-toolbar-wrapper {
    margin-bottom: 16px;
}

.catalog-toolbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.catalog-tabs-switcher {
    display: inline-flex;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.catalog-tabs-switcher .switch-btn {
    border: none;
    background: transparent;
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.catalog-tabs-switcher .switch-btn i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.catalog-tabs-switcher .switch-btn:hover {
    color: var(--text-main);
    background: rgba(var(--primary-rgb), 0.04);
}

.catalog-tabs-switcher .switch-btn.active {
    background: var(--card-bg);
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

body.dark-mode .catalog-tabs-switcher .switch-btn.active {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.catalog-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.catalog-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -0.2px;
}

.btn-filter-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-filter-modern:hover {
    background: var(--card-bg);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.btn-cta-modern {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b81 100%);
    color: #ffffff !important;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.28);
}

.btn-cta-modern:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(var(--primary-rgb), 0.38);
    filter: brightness(1.04);
}

/* Modern App Table Container */
.table-app-container {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    overflow-x: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    padding: 0 !important;
    margin-bottom: 20px;
}

.data-table.data-table-app {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table-app thead th {
    padding: 13px 16px;
    background: var(--input-bg);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 !important;
    white-space: nowrap;
}

.data-table-app tbody tr {
    transition: background-color 0.15s ease;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
}

.data-table-app tbody tr:last-child {
    border-bottom: none;
}

.data-table-app tbody tr:hover {
    background: rgba(var(--primary-rgb), 0.03);
}

.data-table-app tbody tr.is-pinned {
    background: rgba(var(--primary-rgb), 0.045);
    border-left: 3px solid var(--primary);
}

.data-table-app tbody td {
    padding: 13px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.data-table-app tbody tr:last-child td {
    border-bottom: none;
}

/* Product Info Cell */
.product-info-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
}

.product-thumb-wrap {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.product-thumb-img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.product-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
}

.thumb-pinned-indicator {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.4);
    border: 1.5px solid var(--card-bg);
}

.product-info-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.product-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-name-title,
.category-name-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.35;
    transition: color 0.15s ease;
    cursor: pointer;
}

.product-name-title:hover {
    color: var(--primary);
}

.product-badges-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.prod-id-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: -0.2px;
}

/* Badges for Product Types */
.prod-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 5px;
}

.prod-type-pill.type-menu {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.prod-type-pill.type-box {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

.prod-type-pill.type-extra {
    background: rgba(234, 179, 8, 0.14);
    color: #b45309;
    border: 1px solid rgba(234, 179, 8, 0.28);
}

.prod-type-pill.type-variable {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.prod-type-pill.type-simple {
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

body.dark-mode .prod-type-pill.type-simple {
    color: #94a3b8;
}

/* Visibility / State Badges */
.prod-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 2px 6px;
    border-radius: 5px;
}

.prod-status-pill.status-off {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.prod-status-pill.status-hidden {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* Stock Pill */
.prod-stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.prod-stock-pill.in-stock {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.prod-stock-pill.out-of-stock {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.22);
}

.stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.stock-dot.red {
    background: #ef4444;
}

/* Pricing Cell */
.prod-price-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.price-normal {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.price-offer {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.2px;
}

.price-original {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: line-through;
}

/* SKU, Category, Date, Count Pills */
.prod-sku-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 11.5px;
    font-weight: 600;
    font-family: monospace;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

.prod-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
}

.prod-cat-pill i {
    font-size: 11px;
    color: var(--primary);
    opacity: 0.85;
}

.prod-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.prod-date-pill i {
    font-size: 11px;
    opacity: 0.7;
}

.prod-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
}

.prod-count-pill i {
    font-size: 11px;
    color: var(--primary);
    opacity: 0.85;
}

/* Modern Table Actions Group */
.product-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.btn-table-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    flex-shrink: 0;
}

.btn-table-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}

.btn-table-action.action-pin.is-pinned {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.btn-table-action.action-pin:hover {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.08);
}

.btn-table-action.action-view:hover {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

.btn-table-action.action-edit:hover {
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.08);
}

.btn-table-action.action-toggle:hover {
    color: #eab308;
    border-color: rgba(234, 179, 8, 0.3);
    background: rgba(234, 179, 8, 0.08);
}

.btn-table-action.action-toggle.active-success {
    color: #10b981;
}

.btn-table-action.action-delete:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

/* Modern Tabs Bar (Style from image) */
.modern-tabs-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.modern-tabs-bar::-webkit-scrollbar { height: 4px; }
.modern-tabs-bar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
.modern-tabs-bar .tab-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.modern-tabs-bar .tab-item i {
    font-size: 16px;
}
.modern-tabs-bar .tab-item:hover {
    color: var(--text-main);
}
.modern-tabs-bar .tab-item.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.store-tab-content { display: none; animation: fadeIn 0.3s; }
.store-tab-content.active { display: block; }

.store-modal-tab-content { display: none; animation: fadeIn 0.3s; }
.store-modal-tab-content.active { display: block; }

/* Modern App-like Input Styles */
.input-modern {
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    font-size: 13px;
    color: var(--text-main);
    transition: all 0.2s ease;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}
.input-modern:focus {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.data-table .input-modern {
    margin: 4px 0;
}

/* ============================================
   Orders Filters Bar - Modern Design
   ============================================ */
.orders-filters-bar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    animation: fadeIn 0.3s ease;
}

.filters-toggle-btn {
    display: none;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    color: var(--primary);
    font-size: 15px;
    text-transform: uppercase;
}

.filters-toggle-btn .toggle-icon {
    transition: transform 0.3s ease;
}

.orders-filters-bar.collapsed .filters-toggle-btn .toggle-icon {
    transform: rotate(-90deg);
}

.orders-filters-bar.collapsed .orders-filters-row,
.orders-filters-bar.collapsed .orders-filters-actions {
    display: none !important;
}

@media (max-width: 768px) {
    .filters-toggle-btn {
        display: flex;
        width: 100%;
    }
    .orders-filters-bar.collapsed {
        padding-bottom: 12px;
    }
    .orders-filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .orders-filters-bar:not(.collapsed) {
        gap: 16px;
    }
    .orders-filters-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-top: 8px;
    }
    .orders-filter-group {
        min-width: 45%;
    }
}

.orders-filters-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
    flex: 1;
}

.orders-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 130px;
}

.orders-filter-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.orders-filter-group label i {
    font-size: 12px;
    color: var(--primary);
    opacity: 0.7;
}

.orders-filter-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.orders-filter-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    background: var(--card-bg);
}

select.orders-filter-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}

.orders-filters-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn-orders-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.btn-orders-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.btn-orders-refresh:active {
    transform: translateY(0);
}

.btn-orders-refresh i {
    transition: transform 0.4s ease;
}

.btn-orders-refresh:hover i {
    transform: rotate(180deg);
}

.btn-orders-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
}

.btn-orders-clear:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(255, 71, 87, 0.05);
}

/* Orders Table Enhancements */
.orders-table-container {
    animation: fadeIn 0.3s ease 0.1s both;
}

/* Order Status Badge */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.order-status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.order-status-badge.status-pending {
    background: rgba(241, 196, 15, 0.12);
    color: #d4a90a;
}
.order-status-badge.status-pending::before { background: #f1c40f; }

.order-status-badge.status-preparing {
    background: rgba(230, 126, 34, 0.12);
    color: #c96b1d;
}
.order-status-badge.status-preparing::before { background: #e67e22; }

.order-status-badge.status-shipped {
    background: rgba(52, 152, 219, 0.12);
    color: #2980b9;
}
.order-status-badge.status-shipped::before { background: #3498db; }

.order-status-badge.status-delivered {
    background: rgba(46, 204, 113, 0.12);
    color: #22a862;
}
.order-status-badge.status-delivered::before { background: #2ecc71; }

.order-status-badge.status-cancelled {
    background: rgba(231, 76, 60, 0.12);
    color: #c0392b;
}
.order-status-badge.status-cancelled::before { background: #e74c3c; }

/* Order Action Buttons */
.order-actions-group {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.btn-order-action {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    position: relative;
}

.btn-order-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-order-action.btn-view:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border-color: #3498db;
}

.btn-order-action.btn-edit:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-color: var(--primary);
}

.btn-order-action.btn-delete:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-color: #e74c3c;
}

/* Tooltip for order action buttons */
.btn-order-action[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-main);
    color: var(--bg-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

/* Order Type Badge */
.order-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.order-type-badge.type-delivery {
    background: rgba(155, 89, 182, 0.1);
    color: #8e44ad;
}

.order-type-badge.type-pickup {
    background: rgba(52, 152, 219, 0.1);
    color: #2980b9;
}

/* Responsive adjustments for orders filters */
@media (max-width: 900px) {
    .orders-filters-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .orders-filter-group {
        min-width: 0;
    }
    .orders-filter-group[style*="flex:2"],
    .orders-filter-group[style*="flex: 2"] {
        grid-column: 1 / -1;
    }
    .orders-filters-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .btn-orders-refresh,
    .btn-orders-clear {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 400px) {
    .orders-filters-row {
        grid-template-columns: 1fr;
    }
}

/* Edit Order Modal - Modern Redesign */
.edit-order-modal .modal {
    max-width: 820px;
    width: 95%;
    max-height: 90vh;
    border-radius: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.edit-order-modal .modal-header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    flex-shrink: 0;
}

.edit-order-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-order-header-left h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
}

.edit-order-modal .modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 13px;
    background: var(--card-bg);
}

/* Modal Sections */
.edit-order-section {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 18px;
    transition: all 0.2s ease;
}

.edit-order-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.edit-order-section-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.edit-order-section-title i {
    color: var(--primary);
    font-size: 13px;
}

.edit-order-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.edit-order-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.edit-order-grid-full {
    grid-column: 1 / -1;
}

.edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.edit-form-group label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-form-group label i {
    font-size: 11px;
    opacity: 0.75;
}

.edit-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.edit-input-wrapper i.input-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 12px;
    pointer-events: none;
}

.edit-input-wrapper input,
.edit-input-wrapper select,
.edit-form-group input,
.edit-form-group select,
.edit-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.edit-input-wrapper input.has-icon,
.edit-input-wrapper select.has-icon {
    padding-left: 34px;
}

.edit-form-group input:focus,
.edit-form-group select:focus,
.edit-form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Order Items Table & Cards */
.edit-order-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.edit-order-item-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr 110px 110px 90px 36px;
    gap: 10px;
    align-items: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.edit-order-item-row:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.edit-item-name-wrap {
    position: relative;
    width: 100%;
}

.product-search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.search-product-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
    gap: 10px;
}

.search-product-option:last-child {
    border-bottom: none;
}

.search-product-option:hover {
    background: rgba(var(--primary-rgb), 0.08);
}

.search-product-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.search-product-thumb {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--input-bg);
    flex-shrink: 0;
}

.search-product-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-product-price {
    font-weight: 700;
    color: var(--primary);
    font-size: 13px;
    flex-shrink: 0;
}

.edit-qty-group {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--input-bg);
}

.edit-qty-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 32px;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s;
}

.edit-qty-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
}

.edit-qty-input {
    width: 44px;
    height: 32px;
    border: none !important;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    background: transparent !important;
    color: var(--text-main);
    padding: 0 !important;
    box-shadow: none !important;
}

.edit-item-row-total {
    text-align: right;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--primary);
}

.btn-remove-item {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255, 71, 87, 0.2);
    background: rgba(255, 71, 87, 0.06);
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-remove-item:hover {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
    transform: scale(1.05);
}

.edit-item-extras-badge {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(var(--primary-rgb), 0.05);
    border: 1px dashed rgba(var(--primary-rgb), 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Order Totals Summary Card */
.edit-order-totals-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 12px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    align-items: center;
}

.totals-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.totals-item-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.totals-item-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.totals-item-grand {
    background: var(--primary);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    text-align: right;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.totals-item-grand .totals-item-label {
    color: rgba(255,255,255,0.85);
}

.totals-item-grand .totals-item-val {
    color: #fff;
    font-size: 17px;
}

.edit-order-modal .modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: var(--card-bg);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .edit-order-grid-2,
    .edit-order-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .edit-order-item-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .edit-item-name-wrap {
        grid-column: 1 / -1;
    }
    
    .edit-order-totals-card {
        grid-template-columns: 1fr 1fr;
    }
    
    .totals-item-grand {
        grid-column: 1 / -1;
    }
}

/* ============================================
   Benefits Module - Tabs & Stamp Cards
/* ============================================
   BENEFITS MODULE - MODERN APP REDESIGN
   ============================================ */

.benefits-app-container {
    padding: 0 0 40px 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
}

/* 1. App Hero Header */
.benefits-app-header {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.08) 0%, rgba(255, 107, 129, 0.03) 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

.benefits-app-header::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 71, 87, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.benefits-app-header-left {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.benefits-app-avatar-badge {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.35);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.benefits-app-avatar-badge:hover {
    transform: scale(1.06) rotate(-3deg);
}

.benefits-app-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #ff4757;
    background: rgba(255, 71, 87, 0.12);
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.benefits-app-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.benefits-app-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
    max-width: 520px;
}

.benefits-app-header-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.benefits-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.benefits-stat-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 71, 87, 0.3);
}

.benefits-stat-pill.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

.benefits-stat-pill.highlight:hover {
    border-color: #10b981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.stat-pill-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.stat-pill-data {
    display: flex;
    flex-direction: column;
}

.stat-pill-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.stat-pill-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

/* 2. Modern App Segmented Tabs (Dock Style) */
.benefits-tabs-scroller {
    width: 100%;
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.benefits-tabs-scroller::-webkit-scrollbar {
    display: none;
}

.benefits-tabs {
    display: inline-flex;
    gap: 6px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    scroll-snap-type: x mandatory;
}

.benefits-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    border-radius: 13px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    scroll-snap-align: start;
    user-select: none;
}

.benefits-tab:hover {
    color: var(--text-main);
    background: var(--input-bg);
    transform: translateY(-1px);
}

.benefits-tab .tab-icon-dot {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.25s ease;
}

.benefits-tab:hover .tab-icon-dot {
    background: var(--dot-color, var(--primary));
    color: #ffffff;
}

.benefits-tab.active {
    background: var(--text-main);
    color: var(--card-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body:not(.dark-mode) .benefits-tab.active {
    background: #0f172a;
    color: #ffffff;
}

body.dark-mode .benefits-tab.active {
    background: #ffffff;
    color: #0f172a;
}

.benefits-tab.active .tab-icon-dot {
    background: var(--dot-color, #ff4757);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.benefits-tab-content {
    display: none;
    animation: appFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefits-tab-content.active {
    display: block;
}

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

/* 3. Mobile Responsive View Switcher */
.stamps-responsive-tabs {
    display: none;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 5px;
}

.stamps-resp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stamps-resp-tab.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}

/* 4. Stamps Layout - 2-Panel Modern App Grid */
.stamps-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.stamps-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 4px 2px;
}

.stamps-panel-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 3px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stamps-panel-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
}

.app-btn-primary {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(255, 71, 87, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap;
}

.app-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.45) !important;
}

.app-btn-primary:active {
    transform: scale(0.97);
}

/* 5. Digital Loyalty Card (Apple Wallet / Passbook Style) */
.stamp-config-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.stamp-config-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-accent, var(--primary));
    border-radius: 18px 18px 0 0;
}

.stamp-config-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 71, 87, 0.3);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.stamp-card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.stamp-card-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.stamp-config-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.stamp-card-name-wrap {
    min-width: 0;
}

.stamp-card-name-wrap h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stamp-card-status-pill {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 12px;
}

.stamp-card-status-pill.active {
    background: #dcfce7;
    color: #15803d;
}

body.dark-mode .stamp-card-status-pill.active {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.stamp-card-status-pill.inactive {
    background: #f1f5f9;
    color: #64748b;
}

body.dark-mode .stamp-card-status-pill.inactive {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.stamp-card-actions-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.stamp-card-slots-bar {
    background: var(--input-bg);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.stamp-slots-track {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stamp-track-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1.5px dashed var(--border-color);
    color: var(--text-muted);
    opacity: 0.4;
    transition: all 0.2s ease;
}

.stamp-track-dot.filled {
    opacity: 1;
    border-style: solid;
    transform: scale(1.05);
}

/* Tarjetas de Fidelidad - Preview en Modal de Edición */
.stamp-card-preview {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.dark-mode .stamp-card-preview {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

body.light-mode .stamp-card-preview {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.stamp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

.stamp-slot {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 2px dashed var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-muted);
    font-size: 18px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
}

body.dark-mode .stamp-slot {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

body.light-mode .stamp-slot {
    background: #ffffff;
    border-color: #cbd5e1;
}

.stamp-slot.filled {
    border-style: solid;
    transform: scale(1.05);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.stamp-slot img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.stamp-slot i {
    font-size: 20px;
}

.stamp-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

body.dark-mode .stamp-reward-chip {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* 6. Cashier Terminal Card (Right Panel) */
.stamps-terminal-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.terminal-card-header {
    margin-bottom: 18px;
}

.terminal-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 3px 9px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.terminal-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-card-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

.terminal-search-wrapper {
    margin-bottom: 18px;
}

.terminal-search-box {
    display: flex;
    align-items: center;
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 14px;
    padding: 4px 6px 4px 14px;
    gap: 8px;
    transition: all 0.2s ease;
}

.terminal-search-box:focus-within {
    border-color: #ff4757;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.15);
    background: var(--card-bg);
}

.terminal-search-icon {
    font-size: 15px;
    color: var(--text-muted);
}

.terminal-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 13.5px;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    padding: 8px 0;
    min-width: 0;
}

.terminal-search-action-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.terminal-search-action-btn:hover {
    transform: scale(1.05);
}

.terminal-search-action-btn:active {
    transform: scale(0.95);
}

.terminal-quick-tips {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-left: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}

.terminal-quick-tips span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 7. Terminal Empty State */
.terminal-empty-state {
    text-align: center;
    padding: 38px 20px;
}

.terminal-empty-graphic {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.1), rgba(168, 85, 247, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ff4757;
    position: relative;
}

.empty-graphic-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 71, 87, 0.3);
    animation: ringRotate 20s linear infinite;
}

@keyframes ringRotate {
    100% {
        transform: rotate(360deg);
    }
}

.terminal-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 6px 0;
}

.terminal-empty-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* 8. Customer Passbook Card in Terminal */
.stamp-customer-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-top: 14px;
    animation: appFadeIn 0.3s ease;
}

.stamp-customer-card .customer-info-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.stamp-customer-card .avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.25);
    overflow: hidden;
}

.stamp-customer-card .avatar-lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stamp-customer-card .card-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.2s ease;
}

.stamp-customer-card .card-row:hover {
    border-color: rgba(255, 71, 87, 0.3);
}

.stamp-customer-card .mini-stamp {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1.5px dashed var(--border-color);
    color: var(--text-muted);
    opacity: 0.35;
    transition: all 0.2s ease;
}

.stamp-customer-card .mini-stamp.filled {
    opacity: 1;
    border-style: solid;
    transform: scale(1.06);
}

.btn-assign-stamp {
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: inherit;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.25);
}

.btn-assign-stamp:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(var(--primary-rgb), 0.35);
}

.btn-assign-stamp:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 9. VIP Reward Presentation Card */
.vip-store-reward-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    border: 1.5px solid #10b981;
    border-radius: 14px;
    padding: 12px 14px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.15);
}

.vip-reward-info-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vip-reward-thumb {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: cover;
    border: 1.5px solid #10b981;
    background: #ffffff;
}

.vip-reward-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #065f46;
    background: #a7f3d0;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-block;
}

.vip-reward-name {
    font-size: 14px;
    font-weight: 800;
    color: #065f46;
    margin: 2px 0 1px 0;
}

.vip-reward-val {
    font-size: 11.5px;
    color: #047857;
}

.vip-btn-claim {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}

.vip-btn-claim:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5) !important;
}

/* 10. Media Queries: Mobile & Tablet */
@media (max-width: 1024px) {
    .benefits-app-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    .benefits-app-header-stats {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .benefits-stat-pill {
        flex: 1;
        min-width: 140px;
    }
    .stamps-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .benefits-app-container {
        padding: 0 0 20px 0;
    }
    .benefits-app-header {
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
    .benefits-app-header-left {
        gap: 12px;
    }
    .benefits-app-avatar-badge {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        font-size: 20px;
    }
    .benefits-app-title {
        font-size: 17px;
    }
    .benefits-app-subtitle {
        font-size: 12px;
    }
    .benefits-tabs {
        border-radius: 14px;
        padding: 4px;
    }
    .benefits-tab {
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }
    .stamps-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .stamps-panel-header .app-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 960px) {
    .stamps-responsive-tabs {
        display: flex;
    }
    .stamps-layout.show-cards #paneStampsTerminal {
        display: none !important;
    }
    .stamps-layout.show-cards #paneStampsCards {
        display: block !important;
    }
    .stamps-layout.show-terminal #paneStampsCards {
        display: none !important;
    }
    .stamps-layout.show-terminal #paneStampsTerminal {
        display: block !important;
    }
}

/* ==========================================================
   SAFETY GUARDS FOR AVATARS & TABLE MEDIA
   ========================================================== */
.customer-avatar-sm {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.15), rgba(var(--primary-rgb, 255, 71, 87), 0.05));
    color: var(--primary);
    font-weight: 800;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.customer-avatar-sm img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.data-table img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}

.data-table .customer-avatar-sm img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================
   UNIFIED MODERN APP UI: CATALOG, STORES, CLIENTS, ORDERS,
   EXTRA TEMPLATES & INVENTORY
   ========================================================== */

/* 1. Module App Hero Banner */
.module-hero-banner {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 22px 26px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
}

.module-hero-banner::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb, 255, 71, 87), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.module-hero-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.module-hero-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.module-hero-badge.badge-products {
    background: linear-gradient(135deg, #ff4757, #ff6b81);
    color: #ffffff;
}

.module-hero-badge.badge-stores {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #ffffff;
}

.module-hero-badge.badge-customers {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: #ffffff;
}

.module-hero-badge.badge-orders {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #ffffff;
}

.module-hero-badge.badge-extras {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: #ffffff;
}

.module-hero-badge.badge-inventory {
    background: linear-gradient(135deg, #06b6d4, #22d3ee);
    color: #ffffff;
}

.module-hero-text {
    min-width: 0;
}

.module-hero-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.1);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.module-hero-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.module-hero-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
}

.module-hero-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.module-kpi-chip {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    cursor: default;
}

.module-kpi-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.module-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.module-kpi-data {
    display: flex;
    flex-direction: column;
}

.module-kpi-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.module-kpi-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* 2. Responsive App Cards vs Desktop Table Switch */
.mobile-app-cards-container {
    display: none !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 1024px) {
    .desktop-table-container {
        display: none !important;
    }
    .mobile-app-cards-container {
        display: flex !important;
    }
    .mobile-app-cards-container.extras-app-grid {
        display: grid !important;
    }
}

/* 3. Base App Touch Card */
.app-touch-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.app-touch-card:hover {
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.app-touch-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-touch-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-touch-card-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 2px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-touch-card-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.app-touch-card-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px 12px;
    background: var(--input-bg);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 12.5px;
}

.app-touch-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

/* Touch Action Buttons */
.app-touch-btn {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.app-touch-btn:hover {
    background: var(--input-bg);
    border-color: var(--primary);
    color: var(--primary);
}

.app-touch-btn.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.3);
}

.app-touch-btn.btn-success {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.app-touch-btn.btn-danger {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

/* 4. Product Specific Mobile Card */
.product-mobile-thumb {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

/* 5. Stores Specific Grid & Modern Card */
.stores-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.store-app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.store-app-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.store-app-card.is-main {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.08);
}

.store-app-card.is-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.store-app-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.store-app-card-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.2));
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.store-app-card.is-main .store-app-card-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.22));
    color: #d97706;
}

.store-app-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.3;
}

.store-app-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.store-app-card-body {
    background: var(--input-bg);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-app-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.store-app-card-actions .app-touch-btn {
    flex: 1;
    min-width: 75px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.store-app-card-actions .app-touch-btn:last-child {
    flex: 0 0 38px;
    min-width: 38px;
    padding: 9px 0;
}

/* 6. Orders Specific Status Segmented Tabs */
.orders-segmented-dock {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

.orders-segmented-dock::-webkit-scrollbar {
    display: none;
}

.order-segmented-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.order-segmented-pill.active {
    background: var(--text-main);
    color: var(--card-bg);
    border-color: var(--text-main);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body:not(.dark-mode) .order-segmented-pill.active {
    background: #0f172a;
    color: #ffffff;
}

body.dark-mode .order-segmented-pill.active {
    background: #ffffff;
    color: #0f172a;
}

/* 7. Extra Templates Specific Cards Grid */
.extras-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
    margin-top: 16px;
}

.extra-template-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.25s ease;
}

.extra-template-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.extra-options-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.extra-option-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
}

body.dark-mode .extra-option-chip {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
}

/* 8. Logistics Specific Styles */
.module-hero-badge.badge-logistics {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(14, 165, 233, 0.28));
    color: #06b6d4;
}

.logistics-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.logistics-search-wrapper {
    flex: 1 1 280px;
    min-width: 0;
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
}

.logistics-search-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
}

.logistics-search-input {
    width: 100%;
    height: 46px;
    padding-left: 48px;
    padding-right: 18px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-main);
    font-size: 13.5px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.logistics-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background-color: var(--card-bg);
}

.logistics-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
}

.logistics-date-input {
    width: 150px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-main);
    padding: 0 16px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s ease;
}

.logistics-date-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* Live Status Bar */
.logistics-live-status-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--card-alt-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 18px;
    transition: all 0.2s ease;
}

.logistics-live-status-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.logistics-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.logistics-live-chip strong {
    color: var(--text-main);
}

/* Map & Drivers Grid */
.live-map-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    min-height: 560px;
}

.logistics-map-wrapper {
    position: relative;
    width: 100%;
    min-height: 560px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.logistics-drivers-panel {
    background: var(--card-alt-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    max-height: 560px;
    overflow-y: auto;
}

.logistics-drivers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.logistics-drivers-header h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.driver-live-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 13px;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.driver-live-card:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.driver-live-card.selected {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3) !important;
}

body:not(.light-mode) .driver-live-card {
    background: #1c1c26 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body:not(.light-mode) .driver-live-card:hover {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: #20202c !important;
}

/* Delivery Cards for Mobile/Tablet */
.delivery-app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

body:not(.light-mode) .delivery-app-card {
    background: #181822;
    border-color: rgba(255, 255, 255, 0.12);
}

.delivery-app-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.delivery-app-card-body {
    background: var(--input-bg);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.delivery-app-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Leaderboard Cards for Mobile/Tablet */
.leaderboard-app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

body:not(.light-mode) .leaderboard-app-card {
    background: #181822;
    border-color: rgba(255, 255, 255, 0.12);
}

/* Leaflet Dark Mode Adjustments */
body:not(.light-mode) .leaflet-container {
    background: #111116;
}
body:not(.light-mode) .leaflet-bar a {
    background-color: #1c1c26;
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
body:not(.light-mode) .leaflet-bar a:hover {
    background-color: #262634;
    color: var(--primary);
}
body:not(.light-mode) .leaflet-popup-content-wrapper,
body:not(.light-mode) .leaflet-popup-tip {
    background: #181822;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}

/* 9. Media Queries for Mobile and Tablet Devices */
@media (max-width: 1024px) {
    .module-hero-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }
    .module-hero-stats {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .module-kpi-chip {
        flex: 1;
        min-width: 130px;
    }
    .stores-app-grid,
    .extras-app-grid {
        grid-template-columns: 1fr;
    }
    #tableStoresContainer {
        display: none !important;
    }
    #storesCardsContainer {
        display: grid !important;
    }
    #storesViewSwitcher {
        display: none !important;
    }

    /* Logistics tablet/mobile */
    .live-map-grid {
        grid-template-columns: 1fr;
    }
    .logistics-map-wrapper {
        min-height: 400px;
        height: 400px;
    }
    .logistics-drivers-panel {
        max-height: 380px;
    }
    .logistics-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .logistics-search-wrapper {
        flex: 0 0 46px;
        width: 100%;
        height: 46px;
    }
    .logistics-toolbar-right {
        justify-content: space-between;
        width: 100%;
    }
    .logistics-date-input {
        flex: 1;
        min-width: 130px;
    }
}

@media (max-width: 768px) {
    .module-hero-banner {
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 14px;
    }
    .module-hero-badge {
        width: 46px;
        height: 46px;
        font-size: 18px;
        border-radius: 12px;
    }
    .module-hero-title {
        font-size: 17px;
    }
    .module-hero-subtitle {
        font-size: 12px;
    }
    .app-touch-card {
        padding: 14px;
        border-radius: 15px;
    }
    .app-touch-btn {
        flex: 1;
        min-width: 90px;
        font-size: 12px;
    }

    /* Logistics mobile */
    .logistics-map-wrapper {
        min-height: 300px;
        height: 300px;
    }
    .logistics-live-status-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .logistics-live-status-left {
        gap: 12px;
    }
}

/* ============================================
   MODERN TOAST NOTIFICATIONS
   ============================================ */
#toastContainer {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100vw - 32px);
}

.toast-notification {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    transform: translateX(120%) scale(0.95);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

body:not(.light-mode) .toast-notification,
.dark .toast-notification {
    background: rgba(26, 31, 46, 0.95);
    color: #f8fafc;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

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

.toast-notification.toast-hide {
    transform: translateX(120%) scale(0.9);
    opacity: 0;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -12px !important;
    border: none !important;
}

.toast-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 18px;
}

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

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

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

.toast-info .toast-icon-wrapper {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.toast-content {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.toast-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 3px;
    color: inherit;
}

.toast-message {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.45;
    word-wrap: break-word;
}

body:not(.light-mode) .toast-message,
.dark .toast-message {
    color: #94a3b8;
}

.toast-close {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    padding: 6px;
    line-height: 1;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    opacity: 0.7;
    margin-top: -2px;
    margin-right: -4px;
}

.toast-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

body:not(.light-mode) .toast-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

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

.toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: transform linear;
}

.toast-success .toast-progress-bar { background: #10b981; }
.toast-error .toast-progress-bar { background: #ef4444; }
.toast-warning .toast-progress-bar { background: #f59e0b; }
.toast-info .toast-progress-bar { background: #3b82f6; }

@media (max-width: 576px) {
    #toastContainer {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
    }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ========================================== */
/* CONNECTIONS TAB STYLES                     */
/* ========================================== */

/* Sub-tabs */
.connections-subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 6px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    width: fit-content;
}
.conn-subtab {
    padding: 10px 22px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}
.conn-subtab:hover {
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
}
.conn-subtab.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);
}
.conn-subtab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}
.conn-subtab-content.active {
    display: block;
}

/* Email Templates Grid */
.email-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.email-template-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}
.email-template-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    border-color: var(--primary);
}
.email-template-card-header {
    padding: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 14px;
}
.email-template-card-header i {
    font-size: 28px;
    opacity: 0.9;
}
.email-template-card-header .template-info h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.email-template-card-header .template-info p {
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.85;
}
.email-template-card-body {
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.email-template-card-body .template-subject {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 10px;
}
.email-template-card-body .template-actions {
    display: flex;
    gap: 6px;
}
.email-template-card-body .template-actions .btn {
    padding: 6px 12px;
    font-size: 12px;
}
.email-template-card .template-status {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
}
.email-template-card .template-status.active {
    background: #2ecc71;
}
.email-template-card .template-status.inactive {
    background: #e74c3c;
}

/* Email Preview Container */
.email-preview-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    min-width: 0;
}
.email-preview-header {
    padding: 10px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Template Placeholder Tags */
.template-placeholder-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s;
    user-select: all;
}
.template-placeholder-tag:hover {
    background: rgba(var(--primary-rgb), 0.2);
}

/* WhatsApp API Info Banner */
.wa-api-info-banner {
    display: flex;
    gap: 12px;
    padding: 15px 18px;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.2);
    border-radius: 10px;
    align-items: flex-start;
}
.wa-api-info-banner > i {
    color: #25d366;
    font-size: 20px;
    margin-top: 2px;
}

/* Connection Status Badge */
.connection-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}
.connection-status.success {
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.3);
}
.connection-status.error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
.connection-status.loading {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .email-templates-grid {
        grid-template-columns: 1fr;
    }
    .connections-subtabs {
        width: 100%;
    }
    .conn-subtab {
        flex: 1;
        justify-content: center;
    }
    #emailTemplateModal .modal-body {
        flex-direction: column !important;
    }
    .email-preview-container {
        min-height: 300px;
    }
}

/* ==========================================
   EMAIL BUILDER - Constructor Visual
   ========================================== */

/* Builder Panel - Left side */
.email-builder-panel {
    width: 420px;
    min-width: 420px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: var(--bg-color);
    overflow: hidden;
}

/* Mode Toggle Bar */
.eb-mode-bar {
    display: flex;
    padding: 12px 16px;
    gap: 4px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}
.eb-mode-btn {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.eb-mode-btn:hover {
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--text-color);
}
.eb-mode-btn.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-color: var(--primary);
}

/* Visual Mode - scrollable content */
.eb-visual-mode {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Code Mode */
.eb-code-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.eb-code-mode .eb-placeholders-bar {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.eb-code-mode textarea {
    flex: 1;
    border: none;
    border-radius: 0;
    resize: none;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 16px;
    background: var(--card-bg);
    color: var(--text-color);
}

/* Collapsible Sections */
.eb-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}
.eb-section:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.eb-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-color);
    transition: background 0.2s;
}
.eb-section-header:hover {
    background: rgba(var(--primary-rgb), 0.03);
}
.eb-section-header span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eb-section-header span i {
    color: var(--primary);
    width: 18px;
    text-align: center;
}
.eb-section-header .eb-chevron {
    transition: transform 0.3s ease;
    color: var(--text-muted);
    font-size: 12px;
}
.eb-section-header.collapsed .eb-chevron {
    transform: rotate(-90deg);
}
.eb-section-body {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: ebSlideDown 0.25s ease;
}
.eb-section-body.collapsed {
    display: none;
}
@keyframes ebSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Field Groups */
.eb-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eb-field-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.eb-field-group input[type="text"],
.eb-field-group input[type="url"],
.eb-field-group textarea,
.eb-field-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-color);
    color: var(--text-color);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.eb-field-group input:focus,
.eb-field-group textarea:focus,
.eb-field-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* Gradient Picker */
.eb-gradient-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.eb-gradient-swatch {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.eb-gradient-swatch:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.eb-gradient-swatch.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    transform: scale(1.05);
}
.eb-gradient-swatch .eb-swatch-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.eb-gradient-swatch.active .eb-swatch-check {
    opacity: 1;
}

/* Color Input */
.eb-color-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.eb-color-field input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: transparent;
}
.eb-color-field input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.eb-color-field input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}
.eb-color-field input[type="text"] {
    flex: 1;
}

/* Range Field */
.eb-range-field {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eb-range-field input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}
.eb-range-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.3);
    transition: transform 0.15s;
}
.eb-range-field input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.eb-range-field .eb-range-value {
    min-width: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--bg-color);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* Block Items */
.eb-block-item {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
    position: relative;
}
.eb-block-item:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}
.eb-block-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}
.eb-block-item.drag-over {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}
.eb-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.eb-block-header:hover {
    background: rgba(var(--primary-rgb), 0.03);
}
.eb-drag-handle {
    color: var(--text-muted);
    cursor: grab;
    font-size: 14px;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 2px;
}
.eb-drag-handle:hover {
    opacity: 1;
}
.eb-block-type-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    flex: 1;
}
.eb-block-type-badge i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 11px;
    color: #fff;
}
.eb-block-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}
.eb-block-item:hover .eb-block-actions {
    opacity: 1;
}
.eb-block-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
}
.eb-block-actions button:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}
.eb-block-actions button.eb-btn-delete:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}
.eb-block-body {
    padding: 0 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: ebSlideDown 0.2s ease;
}
.eb-block-body.collapsed {
    display: none;
}
.eb-block-body textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    resize: vertical;
    background: var(--card-bg);
    color: var(--text-color);
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.5;
}

/* Add Block Button */
.eb-add-block-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    margin-top: 4px;
}
.eb-add-block-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.03);
}

/* Add Block Dropdown */
.eb-add-block-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    padding: 8px;
    display: none;
    z-index: 1000;
    min-width: 200px;
    animation: ebDropdownIn 0.2s ease;
}
.eb-add-block-dropdown.show {
    display: block;
}
@keyframes ebDropdownIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.eb-add-block-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    width: 100%;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-color);
    transition: background 0.15s;
    text-align: left;
}
.eb-add-block-option:hover {
    background: rgba(var(--primary-rgb), 0.08);
}
.eb-add-block-option i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
}

/* Placeholder Tags (in builder) */
.eb-placeholder-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.eb-placeholder-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border-radius: 4px;
    font-size: 10px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    user-select: none;
}
.eb-placeholder-tag:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
}

/* Bottom Bar */
.eb-bottom-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
}
.eb-subject-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eb-subject-row label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}
.eb-subject-row input {
    flex: 1;
}
.eb-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Preview Toggle */
.eb-preview-toggle {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.eb-preview-btn {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}
.eb-preview-btn:hover {
    color: var(--text-color);
}
.eb-preview-btn.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border-color: var(--primary);
}

/* Preview iframe mobile mode */
#emailTemplatePreview.mobile-preview {
    max-width: 375px;
    margin: 0 auto;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

/* Empty state for blocks */
.eb-empty-state {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}
.eb-empty-state i {
    font-size: 32px;
    opacity: 0.3;
    margin-bottom: 10px;
}
.eb-empty-state p {
    font-size: 13px;
    margin: 0;
}

/* Font family select */
.eb-font-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
}

/* Responsive for email builder */
@media (max-width: 1100px) {
    .email-builder-panel {
        width: 350px;
        min-width: 350px;
    }
}
@media (max-width: 768px) {
    #emailTemplateModal .modal-body {
        flex-direction: column !important;
    }
    .email-builder-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 50vh;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color);
    }
    .email-preview-container {
        min-height: 300px;
    }
    .eb-bottom-bar {
        flex-direction: column;
    }
    .eb-subject-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Custom scrollbar for builder panel */
.eb-visual-mode::-webkit-scrollbar {
    width: 6px;
}
.eb-visual-mode::-webkit-scrollbar-track {
    background: transparent;
}
.eb-visual-mode::-webkit-scrollbar-thumb {
    background: rgba(var(--primary-rgb), 0.15);
    border-radius: 3px;
}
.eb-visual-mode::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--primary-rgb), 0.3);
}

/* Block content preview text */
.eb-block-preview-text {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Tooltip for gradient swatches */
.eb-gradient-swatch[title] {
    position: relative;
}

/* ============================== */
/* Catalog Modern Grid View       */
/* ============================== */

/* Stats Bar */
.catalog-stats-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.catalog-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}
.catalog-stat-chip:hover {
    border-color: rgba(var(--primary-rgb), 0.2);
    transform: translateY(-1px);
}
.catalog-stat-chip .chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.catalog-stat-chip .chip-count {
    font-weight: 700;
    color: var(--text-main);
    font-size: 13px;
}
.catalog-stat-chip .chip-label {
    color: var(--text-muted);
}

/* View Toggle */
.view-toggle {
    display: inline-flex;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.view-toggle-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.view-toggle-btn.active {
    background: var(--card-bg);
    color: var(--primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.view-toggle-btn:hover:not(.active) {
    color: var(--text-main);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

/* Product Card */
.product-card {
    background: var(--card-bg);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: pcFadeIn 0.4s ease both;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border-color: rgba(var(--primary-rgb), 0.25);
}
.product-card.pinned {
    border-color: rgba(var(--primary-rgb), 0.3);
    background: color-mix(in srgb, var(--primary) 3%, var(--card-bg));
}
.product-card.inactive-card {
    opacity: 0.55;
}
.product-card.inactive-card:hover {
    opacity: 0.85;
}

/* Card Image */
.product-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--input-bg);
    overflow: hidden;
}
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover .product-card-image img {
    transform: scale(1.06);
}
.product-card-image .no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 36px;
    opacity: 0.4;
}

/* Card Badges */
.product-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 2;
}
.product-card-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Card Checkbox */
.product-card-cb-wrapper {
    position: absolute;
    top: 10px;
    right: 44px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s;
}
.product-card:hover .product-card-cb-wrapper,
.product-card-cb-wrapper.checked {
    opacity: 1;
}
.product-card-cb-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Card Actions Button */
.product-card-actions-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: all 0.2s;
    z-index: 3;
}
.product-card:hover .product-card-actions-btn {
    opacity: 1;
}
.product-card-actions-btn:hover {
    background: rgba(0,0,0,0.55);
    transform: scale(1.05);
}

/* Card Dropdown */
.card-dropdown {
    position: absolute;
    top: 44px;
    right: 10px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    z-index: 100;
    min-width: 170px;
    padding: 6px;
    display: none;
}
.card-dropdown.show {
    display: block;
    animation: cdFadeIn 0.15s ease;
}
.card-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
    text-align: left;
}
.card-dropdown-item:hover {
    background: rgba(var(--primary-rgb), 0.06);
}
.card-dropdown-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}
.card-dropdown-item.danger {
    color: var(--danger);
}
.card-dropdown-item.danger i {
    color: var(--danger);
}
.card-dropdown-sep {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

/* Card Body */
.product-card-body {
    padding: 14px 16px 6px;
    cursor: pointer;
}
.product-card-category {
    font-size: 11px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.8;
}
.product-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 2px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card-sku {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Card Footer */
.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
}
.product-card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}
.product-card-price del {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 4px;
}
.product-card-stock {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
}
.product-card-stock .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.product-card-stock.in-stock {
    color: var(--success);
    background: rgba(46, 213, 115, 0.1);
}
.product-card-stock.in-stock .dot {
    background: var(--success);
}
.product-card-stock.out-of-stock {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.1);
}
.product-card-stock.out-of-stock .dot {
    background: var(--danger);
}

/* Pin Indicator */
.product-card-pin {
    color: var(--primary);
    font-size: 12px;
    opacity: 0.7;
}

/* Card Animations */
@keyframes pcFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes cdFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Grid Empty State */
.products-grid-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
}

/* Grid Responsive */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 10px;
    }
    .product-card-body { padding: 10px 12px 4px; }
    .product-card-footer { padding: 8px 12px 12px; }
    .product-card-name { font-size: 13px; }
    .product-card-price { font-size: 14px; }
    .catalog-stats-bar { display: none; }
    .catalog-toolbar-top { flex-direction: column; align-items: stretch !important; }
    .catalog-toolbar-actions { justify-content: flex-end; }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ============================== */
/* Inline Filter Bar              */
/* ============================== */
.inline-filter-bar {
    background: var(--input-bg);
    border-radius: 12px;
    padding: 16px 18px 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    animation: filterSlideDown 0.25s ease;
}
@keyframes filterSlideDown {
    from { opacity: 0; transform: translateY(-8px); max-height: 0; }
    to { opacity: 1; transform: translateY(0); max-height: 300px; }
}
.inline-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px 14px;
    align-items: end;
}
.inline-filter-item label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.inline-filter-item label i {
    font-size: 10px;
    margin-right: 4px;
    opacity: 0.7;
}
.inline-filter-item input,
.inline-filter-item select {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-main);
    outline: none;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}
.inline-filter-item input:focus,
.inline-filter-item select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08);
}
.inline-filter-item input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
.inline-filter-price input {
    width: calc(50% - 12px);
    min-width: 0;
}
.inline-filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.btn-filter-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: 'Inter', sans-serif;
}
.btn-filter-clear:hover {
    background: rgba(var(--primary-rgb), 0.06);
    color: var(--primary);
}
.btn-filter-active {
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary) !important;
    border-color: rgba(var(--primary-rgb), 0.2) !important;
}
@media (max-width: 768px) {
    .inline-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .inline-filters-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================== */
/* Media Gallery Redesign         */
/* ============================== */

/* Improved Upload Dropzone */
.media-dropzone {
    border: 2px dashed var(--border-color) !important;
    border-radius: 16px !important;
    background: rgba(var(--primary-rgb), 0.02) !important;
    padding: 50px 30px !important;
    text-align: center;
    transition: all 0.3s ease !important;
    cursor: pointer;
    position: relative;
}
.media-dropzone:hover,
.media-dropzone.dragover {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.06) !important;
    transform: scale(1.01);
}
.media-dropzone h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
    margin-bottom: 4px !important;
}
.media-dropzone p {
    color: var(--text-muted) !important;
    font-size: 12px !important;
}
.media-dropzone .btn {
    margin-top: 12px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

/* Upload progress improvements */
.media-progress-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.media-progress-bar {
    height: 4px !important;
    border-radius: 4px !important;
    background: var(--input-bg) !important;
    margin-top: 8px;
}
.media-progress-fill {
    border-radius: 4px !important;
    background: linear-gradient(90deg, var(--primary), #8b5cf6) !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Media Grid in standalone view (no inner card borders) */
#view-media .media-library-grid {
    border: none;
}
#view-media .media-tabs {
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    margin-bottom: 0;
    background: transparent;
}
#view-media .media-tab {
    background: transparent;
}
#view-media .modal-body.media-modal-body {
    border: none;
    background: transparent;
}

/* Drag overlay for global drop */
#mediaDragOverlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--primary-rgb), 0.06);
    backdrop-filter: blur(2px);
    border: 3px dashed var(--primary);
    border-radius: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
    pointer-events: none;
}
.media-drag-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}
.media-drag-overlay-content i {
    font-size: 42px;
    opacity: 0.8;
}
.media-drag-overlay-content span {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ============================================================
   CONSULTA RÁPIDA - Benefits Consultation Tab
   ============================================================ */

.consulta-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px 0;
}

.consulta-search-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.consulta-search-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.consulta-search-input-group {
    display: flex;
    align-items: center;
    background: var(--bg-main, #f8fafc);
    border: 2px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 4px;
    transition: all 0.3s;
}

.consulta-search-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 255, 71, 87), 0.1);
    background: var(--bg-card, #fff);
}

.consulta-search-icon {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 16px;
}

.consulta-search-input-group input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 8px;
    font-size: 14px;
    color: var(--text-main);
    outline: none;
}

.consulta-qr-btn,
.consulta-search-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 16px;
}

.consulta-qr-btn {
    background: transparent;
    color: var(--text-muted);
    margin-right: 4px;
}

.consulta-qr-btn:hover {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.1);
    color: var(--primary);
}

.consulta-search-btn {
    background: var(--primary);
    color: #fff;
}

.consulta-search-btn:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Empty State */
.consulta-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.consulta-empty-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.1), rgba(var(--primary-rgb, 255, 71, 87), 0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.consulta-empty-icon > i {
    font-size: 36px;
    color: var(--primary);
    opacity: 0.7;
}

.consulta-empty-icon-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--bg-main, #f8fafc);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.consulta-empty-icon-badge i {
    font-size: 12px;
    color: #fff;
}

.consulta-empty-state h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}

.consulta-empty-state p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.consulta-empty-tips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.consulta-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
}

.consulta-tip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.04);
}

.consulta-tip i {
    font-size: 13px;
    color: var(--primary);
    opacity: 0.7;
}

/* Results List */
.consulta-results-list {
    padding: 20px;
    max-width: 700px;
    margin: 0 auto;
}

.consulta-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.consulta-result-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

.consulta-result-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}

.consulta-result-info {
    flex: 1;
}

.consulta-result-info strong {
    display: block;
    font-size: 14px;
    color: var(--text-main);
}

.consulta-result-info span {
    font-size: 12px;
    color: var(--text-muted);
}

/* Benefits Panel */
.consulta-benefits-panel {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.consulta-customer-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 24px;
}

.consulta-customer-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 71, 87), 0.2);
}

.consulta-customer-info {
    flex: 1;
}

.consulta-customer-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: var(--text-main);
}

.consulta-customer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.consulta-customer-meta span {
    font-size: 13px;
    color: var(--text-muted);
}

.consulta-customer-meta span i {
    margin-right: 4px;
    width: 14px;
    text-align: center;
}

.consulta-customer-stats {
    display: flex;
    gap: 20px;
}

.consulta-stat {
    text-align: center;
    padding: 8px 16px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.06);
    border-radius: 12px;
}

.consulta-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}

.consulta-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Section Headers */
.consulta-section {
    margin-bottom: 24px;
}

.consulta-section h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--text-main);
}

/* Stamp Cards */
.consulta-stamp-card {
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.consulta-stamp-card.completed {
    border-color: #27ae60;
    background: rgba(39, 174, 96, 0.03);
}

.consulta-stamp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.consulta-badge-complete {
    font-size: 12px;
    color: #27ae60;
    font-weight: 600;
    background: rgba(39, 174, 96, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.consulta-badge-active {
    font-size: 13px;
    color: var(--primary);
    font-weight: 700;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.08);
    padding: 4px 10px;
    border-radius: 20px;
}

.consulta-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}

.consulta-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.consulta-reward-code {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.consulta-reward-code code {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.08);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 600;
}

.consulta-no-data {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px dashed var(--border);
}

/* Exclusive Coupon */
.consulta-exclusive-coupon {
    padding: 16px;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.05), rgba(243, 156, 18, 0.02));
    border: 1px solid rgba(243, 156, 18, 0.2);
    border-radius: 12px;
}

.consulta-exclusive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.consulta-exclusive-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.consulta-exclusive-discount {
    font-size: 16px;
    font-weight: 700;
    color: #f39c12;
}

.consulta-exclusive-desc {
    font-size: 13px;
    color: var(--text-muted);
}

.consulta-exclusive-expiry {
    font-size: 12px;
    color: var(--text-muted);
}

.consulta-no-exclusive {
    padding: 20px;
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.consulta-no-exclusive p {
    margin: 0 0 4px 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
}

.btn-danger:hover {
    background: rgba(255, 71, 87, 0.2);
}

@media (max-width: 768px) {
    /* Benefits Tabs - scrollable on mobile */
    .benefits-tabs {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .benefits-tabs::-webkit-scrollbar {
        display: none;
    }
    .benefits-tab {
        padding: 8px 14px;
        font-size: 12.5px;
        gap: 5px;
    }
    .benefits-tab i {
        font-size: 13px;
    }

    /* Consulta Rápida */
    .consulta-wrapper {
        padding: 0;
    }
    .consulta-search-card {
        padding: 16px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .consulta-search-header h3 {
        font-size: 14px !important;
    }
    .consulta-search-header p {
        font-size: 11.5px !important;
    }
    .consulta-search-input-group input {
        padding: 10px 6px;
        font-size: 13px;
    }
    .consulta-empty-state {
        padding: 40px 16px;
    }
    .consulta-empty-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 18px;
    }
    .consulta-empty-icon > i {
        font-size: 28px;
    }
    .consulta-empty-icon-badge {
        width: 24px;
        height: 24px;
    }
    .consulta-empty-icon-badge i {
        font-size: 10px;
    }
    .consulta-empty-state h3 {
        font-size: 16px;
    }
    .consulta-empty-state p {
        font-size: 13px;
    }
    .consulta-empty-tips {
        gap: 8px;
    }
    .consulta-tip {
        padding: 6px 12px;
        font-size: 11.5px;
    }

    /* Consulta Results */
    .consulta-results-list {
        padding: 12px;
    }
    .consulta-benefits-panel {
        padding: 12px;
    }
    .consulta-customer-card {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    .consulta-customer-avatar {
        width: 52px;
        height: 52px;
    }
    .consulta-customer-info h3 {
        font-size: 16px;
    }
    .consulta-customer-meta {
        justify-content: center;
    }
    .consulta-customer-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
    .consulta-stat {
        padding: 6px 12px;
    }
    .consulta-stat-value {
        font-size: 16px;
    }

    /* Coupons Tab */
    .orders-filters-bar {
        padding: 12px;
    }
    .orders-filters-row {
        flex-direction: column;
        gap: 10px;
    }
    .orders-filter-group {
        min-width: 100% !important;
    }

    /* Stamps Tab */
    .stamps-config-panel .orders-filters-bar,
    .stamps-assign-panel .orders-filters-bar {
        padding: 12px;
    }
}

/* Table Empty State (Modern) */
.table-empty-state-td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.table-empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.table-empty-state-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin-bottom: 24px;
    background: rgba(108, 92, 231, 0.1);
    border: 2px dashed rgba(108, 92, 231, 0.3);
    color: #6c5ce7;
}
.table-empty-state-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-color);
}
.table-empty-state-desc {
    color: var(--text-muted);
    max-width: 400px;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

/* ========================================================= */
/* NEW DASHBOARD STYLES (Ultra Modern App) */
/* ========================================================= */

/* ========================================================= */
/* DASHBOARD STYLES (MODERN UI & GUIDELINES) */
/* ========================================================= */

/* ========================================================= */
/* DASHBOARD STYLES (APP-STYLE MODERN HERO & COMMAND CENTER) */
/* ========================================================= */

.dash-hero-app {
    margin-bottom: 24px;
}

.dash-hero-glass-surface {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 24px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.3s ease;
}

.dash-hero-glass-surface::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb, 255, 71, 87), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.dash-hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* User profile greeting */
.dash-user-profile-widget {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.dash-avatar-ring {
    position: relative;
    flex-shrink: 0;
}

.dash-avatar-inner {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary, #ff4757) 20%, transparent), color-mix(in srgb, var(--primary, #ff4757) 8%, transparent));
    border: 1.5px solid color-mix(in srgb, var(--primary, #ff4757) 35%, transparent);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.dash-status-online {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #10b981;
    border: 2.5px solid var(--card-bg, #ffffff);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.dash-welcome-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dash-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dash-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    padding: 3px 9px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.dash-date-badge {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dash-welcome-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin: 2px 0 0 0;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

.dash-user-highlight {
    color: var(--primary, #ff4757);
}

.dash-hand-wave {
    display: inline-block;
    animation: wave-animation 2.5s infinite;
    transform-origin: 70% 70%;
}

@keyframes wave-animation {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

.dash-welcome-sub {
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
    margin: 0;
    font-weight: 500;
}

/* Clock Widget */
.dash-live-clock-widget {
    background: color-mix(in srgb, var(--primary, #ff4757) 4%, var(--bg-color, #f8fafc));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 18px;
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.02);
    min-width: 220px;
}

.dash-clock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.dash-clock-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 5px;
}

.dash-clock-sync-badge {
    font-size: 10px;
    font-weight: 600;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-clock-display {
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
    margin: 4px 0 2px;
}

.dash-clock-hms {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    letter-spacing: -1px;
}

.dash-clock-sec {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary, #ff4757);
    margin-right: 4px;
    animation: blink-soft 1s infinite alternate;
}

@keyframes blink-soft {
    from { opacity: 1; }
    to { opacity: 0.82; }
}

.dash-clock-ampm {
    font-size: 11px;
    font-weight: 800;
    background: color-mix(in srgb, var(--primary, #ff4757) 12%, transparent);
    color: var(--primary, #ff4757);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.dash-clock-footer {
    font-size: 10.5px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

.clock-sync-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}

/* Command Bar (Store Filter + Quick Actions) */
.dash-command-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(0,0,0,0.06));
}

.dash-store-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dash-select-icon {
    position: absolute;
    left: 14px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}

.dash-select-chevron {
    position: absolute;
    right: 14px;
    font-size: 10px;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}

.dash-app-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 36px 9px 34px;
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.dash-app-select:focus {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ff4757) 15%, transparent);
}

.dash-actions-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-app-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.dash-app-action-btn:hover {
    transform: translateY(-2px);
}

.dash-app-action-btn:active {
    transform: scale(0.97);
}

.dash-app-action-btn.btn-refresh {
    background: var(--bg-color, #f8fafc);
    border-color: var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
}

.dash-app-action-btn.btn-refresh:hover {
    background: color-mix(in srgb, var(--primary, #ff4757) 8%, var(--bg-color, #f8fafc));
    color: var(--primary, #ff4757);
}

.dash-app-action-btn.btn-pos {
    background: linear-gradient(135deg, var(--primary, #ff4757), color-mix(in srgb, var(--primary, #ff4757) 85%, #000));
    color: #ffffff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #ff4757) 30%, transparent);
}

.dash-app-action-btn.btn-kitchen {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.25);
}

.dash-app-action-btn.btn-kitchen:hover {
    background: #f97316;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.dash-app-action-btn.btn-logistics {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.25);
}

.dash-app-action-btn.btn-logistics:hover {
    background: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Theme Adjustments for Dashboard App Hero */
body.light-mode .dash-hero-glass-surface {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

body.light-mode .dash-live-clock-widget {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-color: #e2e8f0;
}

body.light-mode .dash-app-select {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .dash-app-action-btn.btn-refresh {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}

body:not(.light-mode) .dash-hero-glass-surface {
    background: linear-gradient(145deg, #141414, #181820);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body:not(.light-mode) .dash-live-clock-widget {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
    border-color: rgba(255, 255, 255, 0.09);
}

body:not(.light-mode) .dash-app-select {
    background: #181822;
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body:not(.light-mode) .dash-app-action-btn.btn-refresh {
    background: #181822;
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Responsive Media Queries for App Hero */
@media (max-width: 900px) {
    .dash-hero-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .dash-live-clock-widget {
        align-items: center;
        width: 100%;
        min-width: unset;
    }

    .dash-clock-header {
        justify-content: space-between;
    }

    .dash-clock-display {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .dash-hero-glass-surface {
        padding: 16px 16px;
        border-radius: 18px;
        gap: 14px;
    }

    .dash-user-profile-widget {
        gap: 12px;
    }

    .dash-avatar-inner {
        width: 46px;
        height: 46px;
        font-size: 19px;
        border-radius: 14px;
    }

    .dash-welcome-title {
        font-size: 18px;
    }

    .dash-welcome-sub {
        font-size: 11.5px;
    }

    .dash-clock-hms {
        font-size: 26px;
    }

    .dash-clock-sec {
        font-size: 18px;
    }

    .dash-command-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dash-store-select-wrap,
    .dash-app-select {
        width: 100%;
    }

    .dash-actions-cluster {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .dash-app-action-btn {
        justify-content: center;
        padding: 8px 10px;
        font-size: 11.5px;
    }
}

@media (max-width: 480px) {
    .dash-welcome-title {
        font-size: 16px;
    }

    .dash-clock-hms {
        font-size: 24px;
    }

    .dash-clock-sec {
        font-size: 16px;
    }
}

/* Legacy Toolbar Compatibility */
.dashboard-toolbar {
    display: none;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981;
    position: relative;
    display: inline-block;
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Enhanced KPI Stat Cards */
.dashboard-header-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.07);
    border-color: color-mix(in srgb, var(--primary, #ff4757) 40%, var(--border-color));
}

.stat-card-accent-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.85;
}

.stat-card-accent-bar.accent-sales { background: linear-gradient(90deg, #10b981, #34d399); }
.stat-card-accent-bar.accent-orders { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stat-card-accent-bar.accent-delivery { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-card-accent-bar.accent-alerts { background: linear-gradient(90deg, #ef4444, #f87171); }

.stat-card-watermark {
    position: absolute;
    bottom: -8px;
    right: 14px;
    font-size: 72px;
    color: var(--text-main, #0f172a);
    opacity: 0.035;
    pointer-events: none;
    transform: rotate(-10deg);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.stat-card:hover .stat-card-watermark {
    transform: rotate(0deg) scale(1.08);
    opacity: 0.07;
}

.stat-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    transition: transform 0.2s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.06);
}

.stat-icon-green { 
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(5, 150, 105, 0.08)); 
    color: #10b981; 
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.stat-icon-blue { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.08)); 
    color: #3b82f6; 
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.stat-icon-orange { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.08)); 
    color: #f59e0b; 
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.stat-icon-red { 
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(220, 38, 38, 0.08)); 
    color: #ef4444; 
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.stat-trend {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stat-trend.up { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.2); }
.stat-trend.down { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
.stat-trend.neutral { background: rgba(100, 116, 139, 0.12); color: #64748b; border: 1px solid rgba(100, 116, 139, 0.2); }

.stat-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 9999px;
}

.stat-badge-blue { background: rgba(59, 130, 246, 0.12); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.2); }
.stat-badge-orange { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.2); }
.stat-badge-red { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }

.stat-info h3 {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1.2;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.stat-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

/* Dashboard Grids */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media(min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.dashboard-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.dashboard-card .card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.card-header-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main, #0f172a);
}

.card-subtitle {
    margin: 2px 0 0 0;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.dashboard-card .card-body {
    padding: 20px 24px;
    flex: 1;
}

/* Chart Switcher Tabs */
.chart-period-tabs {
    display: inline-flex;
    background: var(--bg-color, #f1f5f9);
    padding: 3px;
    border-radius: 12px;
    gap: 2px;
}

.chart-tab-btn {
    background: transparent;
    border: none;
    padding: 4px 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-tab-btn:hover {
    color: var(--text-main, #0f172a);
}

.chart-tab-btn.active {
    background: var(--card-bg, #ffffff);
    color: var(--primary, #ff4757);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.btn-link-sm {
    background: none;
    border: none;
    color: var(--primary, #ff4757);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

.btn-link-sm:hover {
    text-decoration: underline;
}

/* Top Products List Modernized */
.top-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.top-list-item:hover {
    background: var(--bg-color, #f8fafc);
}

.top-prod-rank {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.rank-1 { background: #fef3c7; color: #d97706; }
.rank-2 { background: #f1f5f9; color: #64748b; }
.rank-3 { background: #ffedd5; color: #c2410c; }
.rank-other { background: var(--bg-color, #f1f5f9); color: var(--text-muted, #94a3b8); }

.top-prod-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--bg-color, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

.top-prod-details {
    flex: 1;
    min-width: 0;
}

.top-prod-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.top-prod-cat {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.top-prod-stats {
    text-align: right;
    flex-shrink: 0;
}

.top-prod-qty {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #ff4757);
}

.top-prod-amount {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.top-list-loading,
.timeline-loading {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 13px;
}

/* Kanban Board Modern Design */
.order-kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.kanban-col {
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.kanban-title {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.kanban-col-pending .kanban-title { color: #f59e0b; }
.kanban-col-cooking .kanban-title { color: #ff793f; }
.kanban-col-ready .kanban-title { color: #1e90ff; }
.kanban-col-delivering .kanban-title { color: #2ed573; }

.kanban-count-badge {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
}

.kanban-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.kanban-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    font-size: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    border-color: var(--primary, #ff4757);
}

.kanban-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-card-id {
    font-weight: 800;
    color: var(--primary, #ff4757);
    font-size: 12px;
}

.kanban-card-time {
    font-size: 10px;
    color: var(--text-muted, #64748b);
    font-weight: 600;
    background: var(--bg-color, #f1f5f9);
    padding: 2px 6px;
    border-radius: 6px;
}

.kanban-card-customer {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--border-color, #e2e8f0);
}

.kanban-card-total {
    font-weight: 800;
    font-size: 13px;
    color: var(--text-main, #0f172a);
}

.kanban-card-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kanban-card-badge.type-delivery { background: rgba(46, 213, 115, 0.12); color: #2ed573; }
.kanban-card-badge.type-pickup { background: rgba(30, 144, 255, 0.12); color: #1e90ff; }
.kanban-card-badge.type-mesa { background: rgba(255, 165, 2, 0.12); color: #ffa502; }

.kanban-empty {
    padding: 30px 10px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kanban-empty i {
    font-size: 20px;
    opacity: 0.5;
}

/* Activity Timeline */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 11px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
}

.timeline-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 14px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: 6px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary, #ff4757);
    border: 2px solid var(--card-bg, #ffffff);
}

.timeline-time {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-bottom: 2px;
}

.timeline-content {
    font-size: 12px;
    color: var(--text-main, #0f172a);
    line-height: 1.4;
}

/* Payments Breakdown */
.payments-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}

.payment-row-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-main, #0f172a);
}

.payment-row-value {
    color: var(--text-main, #0f172a);
    font-weight: 700;
}

.payment-bar-wrap {
    height: 6px;
    background: var(--bg-color, #f1f5f9);
    border-radius: 10px;
    overflow: hidden;
}

.payment-bar-fill {
    height: 100%;
    border-radius: 10px;
    background: var(--primary, #ff4757);
    transition: width 0.5s ease;
}

/* Skeleton Loading Animation */
.skeleton-loader {
    display: inline-block;
    width: 80px;
    height: 24px;
    background: linear-gradient(90deg, rgba(200,200,200,0.15) 25%, rgba(200,200,200,0.3) 50%, rgba(200,200,200,0.15) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 6px;
}

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

/* Dark Mode Overrides for Dashboard */
body.dark-mode .dashboard-toolbar,
body.dark-mode .stat-card,
body.dark-mode .dashboard-card,
body.dark-mode .kanban-card {
    background: var(--card-bg, #111827);
    border-color: var(--border-color, #1f293d);
}

body.dark-mode .dashboard-store-selector-wrap .dashboard-select,
body.dark-mode .kanban-col,
body.dark-mode .chart-period-tabs,
body.dark-mode .kanban-card-time,
body.dark-mode .payment-bar-wrap,
body.dark-mode .top-list-item:hover {
    background: var(--card-alt-bg, #1e293b);
    border-color: var(--border-color, #1f293d);
}

body.dark-mode .chart-tab-btn.active {
    background: var(--card-bg, #111827);
    color: var(--primary, #ff4757);
}

body.dark-mode .timeline::before {
    background: var(--border-color, #1f293d);
}

body.dark-mode .timeline-dot {
    border-color: var(--card-bg, #111827);
}

/* Modern Store Modal Redesign */
.store-modal-container {
    max-width: 880px !important;
}
.store-modal-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.store-modal-card-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 14px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.store-modal-card-title i {
    color: var(--primary, #ff4757);
    font-size: 14px;
}
.store-modal-field-hint {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 1.4;
}
.tier-row-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}
body.dark-mode .store-modal-card {
    background: #1e293b;
    border-color: #334155;
}
body.dark-mode .tier-row-badge {
    background: #334155;
    color: #cbd5e1;
}
body.dark-mode .header-quick-btn {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc;
}

/* ==========================================================================
   REPORTS & ANALYTICS MODULE MODERN STYLES
   ========================================================================== */
.stat-icon-purple { background: rgba(108, 92, 231, 0.15); color: #6c5ce7; }
.stat-badge-green { background: rgba(46, 213, 115, 0.12); color: #2ed573; }
.stat-badge-purple { background: rgba(108, 92, 231, 0.12); color: #6c5ce7; }

.reports-header-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    padding: 20px 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.reports-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.reports-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reports-icon-badge {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary, #ff4757), #ff6b81);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 71, 87), 0.3);
    flex-shrink: 0;
}

.reports-title-wrap h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.3px;
}

.reports-title-wrap p {
    margin: 2px 0 0 0;
    font-size: 12.5px;
    color: var(--text-muted, #64748b);
}

.reports-presets-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--input-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 4px;
    border-radius: 14px;
    flex-wrap: wrap;
}

.report-preset-btn {
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-preset-btn:hover {
    color: var(--text-main, #0f172a);
    background: rgba(0, 0, 0, 0.04);
}

.report-preset-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 255, 71, 87), 0.3);
}

.reports-filters-bar {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.btn-reports-excel {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-reports-excel:hover {
    background: #059669 !important;
    border-color: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

/* Payment breakdown items */
.payment-method-row {
    transition: transform 0.2s ease;
}

.payment-method-row:hover {
    transform: translateX(3px);
}

/* Print Styles */
@media print {
    .sidebar, .page-header, .reports-header-card, .btn-orders-refresh, .btn-orders-clear, .btn-reports-excel, .reports-presets-wrap, #selectAllReports, .report-checkbox, .btn-order-action {
        display: none !important;
    }
    body, .main-content, .content-area, #view-reports {
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .dashboard-card, .stat-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}

/* ==========================================================================
   KIOSK ADMIN MODULE STYLES (#view-kiosk)
   ========================================================================== */
.kiosk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kiosk-badge.badge-active {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.kiosk-badge.badge-sandbox {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.kiosk-badge.badge-disabled {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.3);
}
.kiosk-badge.badge-warning {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.kiosk-store-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-secondary, rgba(0,0,0,0.03));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    margin-bottom: 12px;
    gap: 15px;
    transition: all 0.2s ease;
}
.kiosk-store-link-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.store-link-info {
    flex: 1;
    min-width: 0;
}
.store-link-name {
    font-size: 15px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.store-link-url {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store-link-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .kiosk-store-link-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .store-link-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   MODERN APP CONFIGURATION MODULE STYLES (Settings Redesign)
   ========================================================================== */

.settings-app-container {
    padding-bottom: 50px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
}

/* 1. App Hero Header */
.settings-app-header {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08) 0%, rgba(var(--primary-rgb), 0.02) 100%);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 22px 26px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}

.settings-app-header::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.settings-app-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.settings-app-avatar-badge {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b81 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.35);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-app-avatar-badge:hover {
    transform: scale(1.06) rotate(-4deg);
}

.settings-app-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
}

.settings-app-title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 3px 0;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.settings-app-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    max-width: 520px;
}

.settings-app-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.settings-save-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--primary) 0%, #e03242 100%);
    color: #ffffff;
    border: none;
    padding: 9px 20px 9px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.settings-save-app-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.45);
}

.settings-save-app-btn:active {
    transform: translateY(0);
}

.settings-save-app-btn .save-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.settings-save-app-btn:hover .save-icon-circle {
    transform: scale(1.1);
}

.settings-save-app-btn .save-text-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.settings-save-app-btn .save-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.settings-save-app-btn .save-subtitle {
    font-size: 10.5px;
    opacity: 0.85;
    font-weight: 500;
}

/* 2. Modern Two-Pane App Layout */
.settings-app-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 22px;
    align-items: start;
}

/* 3. Settings Navigation Pane (Left Rail) */
.settings-nav-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 15px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.settings-nav-pane::-webkit-scrollbar {
    width: 5px;
}
.settings-nav-pane::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.settings-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-nav-group-title {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 12px 4px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.settings-nav-item:hover {
    background: var(--input-bg);
    color: var(--text-main);
    transform: translateX(2px);
}

.settings-nav-item .nav-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.settings-nav-item .nav-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.settings-nav-item .nav-item-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-nav-item .nav-item-sub {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-nav-item .nav-item-arrow {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

.settings-nav-item:hover .nav-item-arrow {
    opacity: 0.6;
    transform: translateX(0);
}

/* Active Nav Item */
.settings-nav-item.active {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
    color: var(--text-main);
}

.settings-nav-item.active .nav-item-title {
    color: var(--primary);
    font-weight: 700;
}

.settings-nav-item.active .nav-item-arrow {
    opacity: 1;
    transform: translateX(0);
    color: var(--primary);
}

/* Palette accents for navigation icons */
.nav-icon-cyan { background: rgba(6, 182, 212, 0.14); color: #06b6d4; }
.nav-icon-orange { background: rgba(249, 115, 22, 0.14); color: #f97316; }
.nav-icon-green { background: rgba(16, 185, 129, 0.14); color: #10b981; }
.nav-icon-pink { background: rgba(236, 72, 153, 0.14); color: #ec4899; }
.nav-icon-purple { background: rgba(168, 85, 247, 0.14); color: #a855f7; }
.nav-icon-indigo { background: rgba(99, 102, 241, 0.14); color: #6366f1; }
.nav-icon-blue { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.nav-icon-amber { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.nav-icon-rose { background: rgba(244, 63, 94, 0.14); color: #f43f5e; }
.nav-icon-red { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.nav-icon-slate { background: rgba(100, 116, 139, 0.14); color: #64748b; }
.nav-icon-teal { background: rgba(20, 184, 166, 0.14); color: #14b8a6; }

/* 4. Settings Content Pane (Right Canvas) */
.settings-content-pane {
    min-width: 0;
}

/* 5. Modern App Cards */
.app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 22px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-card:hover {
    border-color: rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
}

.app-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
    flex-wrap: wrap;
}

.app-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.app-card-title-group h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.2px;
    border-bottom: none;
    padding-bottom: 0;
}

.app-card-title-group p {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Modern Setting Row Items (Toggles) */
.app-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.app-setting-row:hover {
    background: rgba(var(--primary-rgb), 0.03);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.app-setting-row:last-child {
    margin-bottom: 0;
}

.app-setting-info h4 {
    margin: 0 0 3px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.app-setting-info p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* iOS Style Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(148, 163, 184, 0.35);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 24px;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.switch input:checked + .slider {
    background-color: var(--primary);
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.3);
}

.switch input:checked + .slider:before {
    transform: translateX(20px);
}

/* Color Picker Modern Box */
.app-color-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    flex-wrap: wrap;
}

.app-color-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-color-swatch-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.app-color-swatch-btn:hover {
    transform: scale(1.08);
}

.app-color-code {
    font-size: 13px;
    font-weight: 700;
    font-family: monospace;
    color: var(--text-main);
    background: var(--card-bg);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.app-color-presets {
    display: flex;
    align-items: center;
    gap: 6px;
}

.app-color-preset-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--card-bg);
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-color-preset-dot:hover {
    transform: scale(1.25);
}

/* 6. Live Login Screen Mockup Phone / Card */
.login-split-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1024px) {
    .login-split-grid {
        grid-template-columns: 1fr;
    }
}

.login-preview-container {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 20px;
}

.login-preview-title-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.login-preview-title-bar span {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.login-preview-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 8px;
    border-radius: 12px;
}

.login-preview-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: pulseDot 1.8s infinite ease-in-out;
}

@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.4; }
}

.login-preview-phone {
    width: 100%;
    max-width: 270px;
    border-radius: 28px;
    padding: 10px;
    background: #0f172a;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.login-preview-screen {
    width: 100%;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
    box-sizing: border-box;
    transition: background 0.35s ease;
}

.login-preview-notch {
    position: absolute;
    top: 6px;
    width: 70px;
    height: 14px;
    background: #000000;
    border-radius: 10px;
}

.login-preview-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.login-preview-logo-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.login-preview-logo-box img {
    max-width: 120px;
    max-height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.login-preview-input-mock {
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 8px;
}

.login-preview-input-mock .input-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.login-preview-input-mock .input-line {
    width: 50%;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

.login-preview-btn-mock {
    width: 100%;
    height: 32px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff6b81 100%);
    border-radius: 8px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 7. Modern Upload Zones with Checkerboard Pattern */
.app-upload-box {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px;
    overflow: hidden;
}

.app-upload-box:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.04);
    transform: translateY(-2px);
}

.upload-checkerboard-bg {
    background-image: linear-gradient(45deg, rgba(120,120,120,0.1) 25%, transparent 25%), 
                      linear-gradient(-45deg, rgba(120,120,120,0.1) 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, rgba(120,120,120,0.1) 75%), 
                      linear-gradient(-45deg, transparent 75%, rgba(120,120,120,0.1) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

/* 8. Responsive Adaptations */
@media (max-width: 960px) {
    .settings-app-layout {
        grid-template-columns: 1fr;
    }
    .settings-nav-pane {
        position: static;
        max-height: none;
        overflow-x: auto;
        flex-direction: row;
        gap: 8px;
        padding: 8px;
        scrollbar-width: none;
    }
    .settings-nav-pane::-webkit-scrollbar {
        display: none;
    }
    .settings-nav-group {
        flex-direction: row;
        gap: 6px;
    }
    .settings-nav-group-title {
        display: none;
    }
    .settings-nav-item {
        width: auto;
        white-space: nowrap;
        padding: 8px 14px;
        flex-shrink: 0;
    }
    .settings-nav-item .nav-item-sub,
    .settings-nav-item .nav-item-arrow {
        display: none;
    }
    .settings-app-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }
    .settings-app-header-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* 9. Update Notifications & Badges */
.settings-update-header-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #f59e0b;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.12);
}

.settings-update-header-pill:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(239, 68, 68, 0.25));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: pulseGlow 1.8s infinite;
}

.nav-update-dot {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    display: inline-block;
    flex: 0 0 8px !important;
    margin-left: auto;
    margin-right: 4px;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: pulseGlow 1.8s infinite;
    pointer-events: none;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* ==========================================================================
   MODERN APP REDESIGN: PRODUCT FORM (#view-product-form)
   ========================================================================== */

.product-app-wrapper {
    max-width: 1320px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* --- Hero Header Estilo App --- */
.product-app-header {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    overflow: hidden;
}

.product-app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, #f59e0b 50%, #8b5cf6 100%);
}

.product-app-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.product-app-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
}

.product-app-header-meta {
    display: flex;
    flex-direction: column;
}

.product-app-pill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.product-app-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.product-type-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.product-app-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.product-app-subtitle {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 3px 0 0 0;
}

.product-app-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-app-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-app-secondary:hover {
    background: var(--card-bg);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.btn-app-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    background: var(--primary);
    border: none;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    transition: all 0.2s ease;
}

.btn-app-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.45);
    filter: brightness(1.05);
}

/* --- Layout Grid de 2 Columnas --- */
.product-app-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

.product-app-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.product-app-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Tarjetas Estilo App (.product-form-card) --- */
.product-form-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.product-form-card:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.product-form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}

.product-form-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-card-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.product-card-title,
.product-form-card.settings-card h3,
.product-form-card .product-card-title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    line-height: 1.3 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.product-card-desc {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Inputs y Formularios Modernos --- */
.product-app-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
}

.product-app-label-hint {
    font-size: 11px;
    font-weight: normal;
    color: var(--text-muted);
}

.product-name-input-modern {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-color) !important;
    background: var(--input-bg) !important;
    color: var(--text-main) !important;
    width: 100%;
    transition: all 0.2s ease !important;
    box-sizing: border-box;
}

.product-name-input-modern:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14) !important;
    outline: none;
}

/* --- Zona de Carga de Portada (Main Image) --- */
.product-main-media-box {
    border: 2px dashed var(--border-color);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: var(--bg-color);
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-main-media-box:hover,
.product-main-media-box.drag-over {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.04);
    transform: translateY(-1px);
}

.product-main-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
    transition: transform 0.25s ease;
}

.product-main-media-box:hover .product-main-icon-circle {
    transform: scale(1.1);
}

.product-main-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px 0;
}

.product-main-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0 0 10px 0;
}

.product-main-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.product-preview-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.product-main-img-preview {
    max-height: 220px;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    background: repeating-conic-gradient(#80808020 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}

.product-main-change-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.product-main-media-box:hover .product-main-change-overlay {
    opacity: 1;
    background: var(--primary);
}

/* --- Galería de Fotos --- */
.product-gallery-area-modern {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
}

.product-gallery-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.product-gallery-add-card {
    aspect-ratio: 1;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    background: var(--card-bg);
}

.product-gallery-add-card:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
    transform: scale(1.02);
}

.product-gallery-add-card i {
    font-size: 18px;
}

.product-gallery-add-card span {
    font-size: 11.5px;
    font-weight: 600;
}

.product-gallery-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

/* --- Video Input Moderno --- */
.product-video-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.product-video-input-wrap input {
    padding-right: 42px !important;
}

.product-video-icon-badge {
    position: absolute;
    right: 12px;
    font-size: 14px;
    color: var(--text-muted);
    pointer-events: none;
}

/* --- Inputs de Precios & Tarifas --- */
.product-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.product-price-field-group {
    display: flex;
    flex-direction: column;
}

.product-price-input-box {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.product-price-input-box:focus-within {
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.product-price-prefix {
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-right: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    user-select: none;
}

.product-price-input {
    border: none !important;
    background: transparent !important;
    padding: 11px 14px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    outline: none !important;
    width: 100%;
    box-shadow: none !important;
}

.product-discount-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* --- Sidebar: Publicación & Acciones --- */
.product-status-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.product-status-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    user-select: none;
}

.product-status-option.active {
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.product-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.product-status-dot.active { background: #10b981; box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); }
.product-status-dot.draft { background: #94a3b8; }

.product-sidebar-save-btn {
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    background: var(--primary);
    border: none;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.product-sidebar-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.45);
    filter: brightness(1.05);
}

.product-sidebar-cancel-btn {
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.product-sidebar-cancel-btn:hover {
    background: var(--bg-color);
    color: var(--text-main);
    border-color: var(--text-muted);
}

/* --- SKU & Varita Mágica --- */
.product-sku-input-group {
    display: flex;
    gap: 8px;
}

.product-sku-input-group input {
    flex: 1;
    font-family: monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.product-sku-magic-btn {
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.product-sku-magic-btn:hover {
    background: rgba(245, 158, 11, 0.1);
    border-color: #f59e0b;
    transform: rotate(15deg);
}

/* --- Barra de Guardado Flotante Inferior (Sticky Bar) --- */
.product-app-sticky-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(var(--card-bg-rgb, 255, 255, 255), 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 30px;
    padding: 8px 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: none;
    align-items: center;
    gap: 14px;
    z-index: 999;
}

.product-sticky-info {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Dark Mode OLED & Responsividad --- */
body.dark-mode .product-app-header {
    background: #000000;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

body.dark-mode .product-form-card {
    background: #000000;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

body.dark-mode .product-main-media-box,
body.dark-mode .product-gallery-area-modern,
body.dark-mode .product-status-segmented {
    background: #0c0c0c;
    border-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode .product-status-option.active {
    background: #181818;
    color: #ffffff;
}

body.dark-mode .product-app-sticky-bar {
    background: rgba(10, 10, 10, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 1024px) {
    .product-app-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .product-app-sidebar {
        position: static;
    }
    .product-price-grid {
        grid-template-columns: 1fr;
    }
    .product-app-sticky-bar {
        display: flex;
    }
}

@media (max-width: 640px) {
    .product-app-header {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .product-app-header-actions {
        width: 100%;
        justify-content: space-between;
    }
    .product-app-header-actions .btn-app-secondary,
    .product-app-header-actions .btn-app-primary {
        flex: 1;
        justify-content: center;
    }
    .product-gallery-grid-modern {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   TinyMCE Contrast & Themes (Light / Dark OLED)
   ========================================================================== */
.tox-tinymce {
    border-radius: 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

body.light-mode .tox-tinymce {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .tox:not([dir=rtl]) {
    color: #1e293b !important;
}

body.light-mode .tox .tox-toolbar,
body.light-mode .tox .tox-toolbar__overflow,
body.light-mode .tox .tox-toolbar__primary {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-mode .tox .tox-tbtn {
    color: #334155 !important;
    border-radius: 6px !important;
}

body.light-mode .tox .tox-tbtn svg {
    fill: #334155 !important;
}

body.light-mode .tox .tox-tbtn:hover {
    background-color: #edf2f7 !important;
    color: #0f172a !important;
}

body.light-mode .tox .tox-tbtn--enabled,
body.light-mode .tox .tox-tbtn--enabled:hover {
    background-color: #e2e8f0 !important;
    color: var(--primary) !important;
}

body.light-mode .tox .tox-statusbar {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}

body.light-mode .tox .tox-statusbar a,
body.light-mode .tox .tox-statusbar__path-item,
body.light-mode .tox .tox-statusbar__wordcount {
    color: #64748b !important;
}

body.light-mode .tox .tox-edit-area__iframe {
    background-color: #ffffff !important;
}

/* TinyMCE Dark Mode OLED */
body.dark-mode .tox-tinymce {
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    background-color: #000000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .tox:not([dir=rtl]) {
    color: #f8fafc !important;
}

body.dark-mode .tox .tox-toolbar,
body.dark-mode .tox .tox-toolbar__overflow,
body.dark-mode .tox .tox-toolbar__primary {
    background-color: #0c0c0c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .tox .tox-tbtn {
    color: #cbd5e1 !important;
    border-radius: 6px !important;
}

body.dark-mode .tox .tox-tbtn svg {
    fill: #cbd5e1 !important;
}

body.dark-mode .tox .tox-tbtn:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode .tox .tox-tbtn--enabled,
body.dark-mode .tox .tox-tbtn--enabled:hover {
    background-color: rgba(var(--primary-rgb), 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .tox .tox-statusbar {
    background-color: #0c0c0c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

body.dark-mode .tox .tox-statusbar a,
body.dark-mode .tox .tox-statusbar__path-item,
body.dark-mode .tox .tox-statusbar__wordcount {
    color: #94a3b8 !important;
}

body.dark-mode .tox .tox-edit-area__iframe {
    background-color: #000000 !important;
}

/* ==========================================================================
   Store Overrides Modern Cards (Precios por Tienda)
   ========================================================================== */
.store-override-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
    padding: 13px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

body.light-mode .store-override-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

body.dark-mode .store-override-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.store-override-card:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.store-override-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.store-override-info {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    flex: 1;
}

.store-override-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.store-override-meta {
    min-width: 0;
    flex: 1;
}

.store-override-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.store-override-desc {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

.store-override-toggle-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Modern iOS Switch for Store Cards */
.switch-modern {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.switch-modern input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-modern {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 22px;
}

body.dark-mode .slider-modern {
    background-color: #27272a;
}

.slider-modern:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch-modern input:checked + .slider-modern {
    background-color: var(--primary, #2ed573);
}

.switch-modern input:checked + .slider-modern:before {
    transform: translateX(16px);
}

/* 2-Column Grid for Store Inputs */
.store-override-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    transition: opacity 0.2s ease;
}

.store-override-card.is-disabled .store-override-grid {
    opacity: 0.45;
    pointer-events: none;
}

.store-override-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.store-override-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
}

.store-override-input-group {
    display: flex;
    align-items: center;
    background: var(--input-bg, #f8fafc);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 8px;
    padding: 0 9px;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 35px;
}

.store-override-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

body.light-mode .store-override-input-group {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.dark-mode .store-override-input-group {
    background: #000000;
    border-color: rgba(255, 255, 255, 0.08);
}

.store-override-prefix {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    margin-right: 4px;
    user-select: none;
}

.store-override-input {
    width: 100%;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text-color, #1e293b) !important;
    outline: none !important;
    text-align: right;
    padding: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
}

body.light-mode .store-override-input {
    color: #1e293b !important;
}

body.dark-mode .store-override-input {
    color: #ffffff !important;
}

.store-override-input::placeholder {
    color: var(--text-muted);
    opacity: 0.5;
    font-weight: normal;
}

/* ==========================================================================
   TEMPLATES MODULE & BOX BUILDER MODERN APP STYLES
   ========================================================================== */

.templates-tab-pills {
    display: inline-flex;
    background: var(--card-alt-bg, #1e293b);
    padding: 4px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    gap: 4px;
}

.template-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.template-tab-btn:hover {
    color: var(--text-main, #ffffff);
    background: rgba(255, 255, 255, 0.04);
}

.template-tab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary, #ff4757) 35%, transparent);
}

body.light-mode .templates-tab-pills {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

body.light-mode .template-tab-btn {
    color: #64748b;
}

body.light-mode .template-tab-btn:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .template-tab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
}

/* Modern Box Template Card Grid */
.box-templates-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.box-template-card-modern {
    background: var(--card-bg, #141414);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.03);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.box-template-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    border-color: color-mix(in srgb, #f97316 40%, var(--border-color));
}

.box-card-accent-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.box-card-header {
    padding: 18px 20px 14px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.06));
}

.box-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(234, 88, 12, 0.08));
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.box-card-titles {
    flex: 1;
    min-width: 0;
}

.box-card-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.box-type-pill {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(249, 115, 22, 0.12);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.box-date-pill {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.box-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-main, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-card-desc {
    margin: 3px 0 0 0;
    font-size: 11.5px;
    color: var(--text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-card-body {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.box-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.box-tags-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.box-tag-size {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    background: var(--card-alt-bg, #181822);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    color: var(--text-main, #ffffff);
    padding: 3px 8px;
    border-radius: 8px;
}

.box-tag-size strong {
    color: #10b981;
}

.box-tag-mode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

.box-tag-mode.mode-single {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.box-tag-mode.mode-assorted {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.box-tag-flavor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.18);
    color: var(--text-main, #ffffff);
    padding: 2px 8px;
    border-radius: 6px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-tag-more {
    font-size: 10.5px;
    font-weight: 700;
    background: var(--card-alt-bg, #1e293b);
    color: var(--text-muted, #94a3b8);
    padding: 2px 6px;
    border-radius: 6px;
}

.box-tag-empty {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-style: italic;
}

.box-card-footer {
    padding: 12px 20px;
    background: var(--card-alt-bg, #181822);
    border-top: 1px solid var(--border-color, rgba(255,255,255,0.06));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.box-footer-primary-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-box-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.btn-box-action.btn-edit {
    background: var(--card-bg, #ffffff);
    border-color: var(--border-color, rgba(255,255,255,0.12));
    color: var(--text-main, #ffffff);
}

.btn-box-action.btn-edit:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--card-bg));
    color: var(--primary);
}

.btn-box-action.btn-create-prod {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

.btn-box-action.btn-create-prod:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.box-footer-secondary-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-icon-subtle {
    border: none;
    background: transparent;
    padding: 6px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-icon-subtle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main, #ffffff);
}

.btn-icon-subtle.text-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

body.light-mode .box-template-card-modern {
    background: #ffffff;
    border-color: #e2e8f0;
}

body.light-mode .box-card-footer {
    background: #f8fafc;
    border-color: #f1f5f9;
}

body.light-mode .box-tag-size {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .box-tag-flavor {
    color: #0f172a;
}

body.light-mode .btn-box-action.btn-edit {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .btn-icon-subtle:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #0f172a;
}