: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);
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    
    --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 - Deep AMOLED Black */
    --bg-color: #000000;
    --sidebar-bg: #000000;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #a1a1aa;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: #18181b;
    --sidebar-item-active-border: transparent;
    --sidebar-label-color: #71717a;
    --sidebar-user-bg: rgba(255, 255, 255, 0.04);
    --sidebar-user-border: rgba(255, 255, 255, 0.08);
    --sidebar-tooltip-bg: #18181b;
    --sidebar-tooltip-text: #f4f4f5;
    --sidebar-tooltip-border: rgba(255, 255, 255, 0.12);

    --card-bg: #09090b;
    --card-alt-bg: #121214;
    --bg-surface: #111116;
    --bg-card: #09090b;
    --bg-main: #000000;
    --border: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-color: #ffffff;
    --text-muted: #a1a1aa;
    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.05);
    --shadow: 0 8px 30px rgba(0,0,0,0.55);
}

body.dark-mode {
    color-scheme: dark;
    --primary: var(--primary-dark);
    --primary-rgb: var(--primary-dark-rgb);
    --bg-color: #000000;
    --text-color: #ffffff;
    --text-main: #ffffff;
    --card-bg: #09090b;
    --card-alt-bg: #121214;
    --bg-surface: #111116;
    --bg-card: #09090b;
    --bg-main: #000000;
    --border: rgba(255, 255, 255, 0.08);
    --sidebar-bg: #000000;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #a1a1aa;
    --sidebar-text-hover: #ffffff;
    --sidebar-text-active: #ffffff;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: #18181b;
    --sidebar-item-active-border: transparent;
    --sidebar-label-color: #71717a;
    --sidebar-user-bg: rgba(255, 255, 255, 0.04);
    --sidebar-user-border: rgba(255, 255, 255, 0.08);
    --sidebar-tooltip-bg: #18181b;
    --sidebar-tooltip-text: #f4f4f5;
    --sidebar-tooltip-border: rgba(255, 255, 255, 0.12);
    --border-color: rgba(255, 255, 255, 0.08);
    --input-bg: rgba(255, 255, 255, 0.05);
}

body.light-mode {
    color-scheme: light;
    --bg-color: #f7f9fc;
    --sidebar-bg: rgba(246, 248, 252, 0.75);
    --sidebar-border: rgba(226, 232, 240, 0.7);
    --sidebar-text: #596780;
    --sidebar-text-hover: #111827;
    --sidebar-text-active: #111827;
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.55);
    --sidebar-item-active-bg: #ffffff;
    --sidebar-item-active-border: transparent;
    --sidebar-label-color: #8c9ba5;
    --sidebar-user-bg: rgba(255, 255, 255, 0.65);
    --sidebar-user-border: rgba(226, 232, 240, 0.7);
    --sidebar-tooltip-bg: #0f172a;
    --sidebar-tooltip-text: #ffffff;
    --sidebar-tooltip-border: #334155;

    --card-bg: rgba(255, 255, 255, 0.85);
    --card-alt-bg: rgba(248, 250, 252, 0.75);
    --bg-surface: #f8fafc;
    --bg-card: #ffffff;
    --bg-main: #f7f9fc;
    --border: rgba(226, 232, 240, 0.8);
    --text-main: #111827;
    --text-color: #111827;
    --text-muted: #64748b;
    --border-color: rgba(226, 232, 240, 0.8);
    --input-bg: #ffffff;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, button, input, select, textarea {
    font-family: var(--font-family, 'Inter', system-ui, -apple-system, sans-serif);
}
body {
    background-color: var(--bg-color);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
    transition: background 0.3s, color 0.3s;
    background-image: 
        radial-gradient(circle at 4% 12%, rgba(217, 238, 252, 0.5) 0%, transparent 35%),
        radial-gradient(circle at 18% 68%, rgba(235, 228, 249, 0.45) 0%, transparent 35%),
        radial-gradient(circle at 85% 15%, rgba(254, 237, 220, 0.45) 0%, transparent 40%),
        radial-gradient(circle at 82% 82%, rgba(222, 247, 232, 0.4) 0%, transparent 40%);
    background-attachment: scroll;
}
body.dark-mode {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Layout & Sidebar */
.layout { display: flex; width: 100%; height: 100%; overflow: hidden; position: relative; }
.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--sidebar-bg);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    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: space-between;
    height: 64px;
    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-brand-wrapper {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.sidebar-brand-squircle {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #111827;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}
body.dark-mode .sidebar-brand-squircle {
    background: #ffffff;
    color: #111827;
}
.sidebar-header:has(#sidebarLogo[style*="display: block"]) #sidebarBrandSquircle,
.sidebar-brand-wrapper:has(#sidebarLogo[style*="display: block"]) #sidebarBrandSquircle {
    display: none !important;
}
.sidebar-header h2 {
    font-size: 14.5px;
    color: var(--sidebar-text-active);
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.18s ease;
}
.sidebar-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
    border: 1px solid rgba(17, 24, 39, 0.12);
    text-transform: uppercase;
    line-height: 1;
}
body.dark-mode .sidebar-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
}
.sidebar.collapsed .sidebar-header h2,
.sidebar.collapsed .sidebar-collapse-btn-header {
    display: none;
}
.sidebar #sidebarLogo {
    max-height: 30px;
    max-width: 130px;
    object-fit: contain;
    transition: all var(--sidebar-transition);
}
.sidebar.collapsed #sidebarLogo {
    display: block !important;
    max-width: 32px;
    max-height: 32px;
}
.sidebar-collapse-btn-header {
    background: transparent;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}
.sidebar-collapse-btn-header:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-text-hover);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 14px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.06); border-radius: 9999px; }
body.dark-mode .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); }

/* Section Labels - Apple/macOS style */
.nav-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sidebar-label-color);
    letter-spacing: 0.1px;
    padding: 14px 14px 4px 14px;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.18s ease;
}
.nav-section-label:first-child { padding-top: 2px; }
.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 - Pill shape */
.nav-item {
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 42px;
    margin: 1px 0;
    border-radius: 9999px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 500;
    font-size: 13.5px;
    white-space: nowrap;
    position: relative;
    gap: 12px;
    border: 1px solid transparent;
}
.nav-item i {
    width: 20px;
    font-size: 15px;
    text-align: center;
    color: inherit;
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s 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-item:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-text-hover);
}
.nav-item:hover i {
    opacity: 1;
}

/* Active State - Floating Pure Pill */
.nav-item.active {
    background: var(--sidebar-item-active-bg);
    color: var(--sidebar-text-active);
    font-weight: 600;
    border-radius: 9999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.85);
}
body.dark-mode .nav-item.active {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-item.active i {
    opacity: 1;
    color: var(--sidebar-text-active);
}

/* Collapsed nav items */
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0;
    width: 44px;
    height: 44px;
    margin: 3px auto;
    border-radius: 9999px;
}
.sidebar.collapsed .nav-item > span:not(.nav-update-dot),
.sidebar.collapsed .nav-item .nav-ext-icon {
    display: none;
}
.sidebar.collapsed .nav-item i {
    margin: 0;
    font-size: 16px;
}
.sidebar.collapsed .nav-item.active {
    border-radius: 9999px;
}

/* Sidebar Footer - Modern Pill Card Profile */
.sidebar-footer {
    padding: 12px 12px 14px 12px;
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 18px;
    background: var(--sidebar-user-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--sidebar-user-border);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    position: relative;
    user-select: none;
}
.sidebar-user-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* 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: var(--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: transparent;
    position: relative;
}
.page-header {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    min-height: 64px;
    position: relative;
    z-index: 50;
    transition: background 0.3s, border-color 0.3s;
}
body.dark-mode .page-header {
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page-header-left { display: flex; align-items: center; gap: 15px; }
.page-header h1 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.2px;
}

/* Header Quick Modules & Terminales Unified Dropdown */
.header-quick-dropdown-wrap {
    position: relative;
    margin-left: 14px;
    margin-right: auto;
}

.header-quick-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
}

body.dark-mode .header-quick-dropdown-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.header-quick-dropdown-btn:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--primary-rgb), 0.35);
}

body.dark-mode .header-quick-dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.header-quick-dropdown-btn:active {
    transform: scale(0.97);
}

.dropdown-bolt-icon {
    color: var(--primary, #ff4757);
    font-size: 13px;
    transition: transform 0.2s ease;
}

.header-quick-dropdown-btn:hover .dropdown-bolt-icon {
    transform: scale(1.15);
}

.header-quick-dropdown-btn .btn-text-full { display: inline; }
.header-quick-dropdown-btn .btn-text-short { display: none; }

.dropdown-arrow {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 2px;
}

.header-quick-dropdown-wrap.open .dropdown-arrow {
    transform: rotate(180deg);
}

.header-quick-dropdown-wrap.open .header-quick-dropdown-btn {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

/* Dropdown Menu Popover */
.header-quick-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 330px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 10px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .header-quick-dropdown-menu {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.header-quick-dropdown-wrap.open .header-quick-dropdown-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Dropdown Header */
.quick-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 6px;
}

body.dark-mode .quick-dropdown-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.quick-dropdown-title {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-dropdown-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 8px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pulse-dot-sm {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
    animation: pulse-green 2s infinite;
}

/* Dropdown List Items */
.quick-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quick-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.15s ease, transform 0.15s ease;
}

.quick-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.035);
    transform: translateX(3px);
}

body.dark-mode .quick-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.quick-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.quick-dropdown-item:hover .quick-item-icon {
    transform: scale(1.08);
}

/* Pastel Soft UI Icon Palettes */
.item-orders .quick-item-icon { background: #ffe4e6; color: #e11d48; }
.item-pos .quick-item-icon { background: #dcfce7; color: #16a34a; }
.item-cocina .quick-item-icon { background: #ffedd5; color: #ea580c; }
.item-moto .quick-item-icon { background: #e0f2fe; color: #0284c7; }
.item-logistics .quick-item-icon { background: #ede9fe; color: #7c3aed; }

body.dark-mode .item-orders .quick-item-icon { background: rgba(225, 29, 72, 0.2); color: #fb7185; }
body.dark-mode .item-pos .quick-item-icon { background: rgba(22, 163, 74, 0.2); color: #4ade80; }
body.dark-mode .item-cocina .quick-item-icon { background: rgba(234, 88, 12, 0.2); color: #fb923c; }
body.dark-mode .item-moto .quick-item-icon { background: rgba(2, 132, 199, 0.2); color: #38bdf8; }
body.dark-mode .item-logistics .quick-item-icon { background: rgba(124, 58, 237, 0.2); color: #c084fc; }

.quick-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-item-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quick-item-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.1px;
}

.quick-item-ext {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.quick-dropdown-item:hover .quick-item-ext {
    opacity: 1;
    transform: translate(2px, -2px);
    color: var(--primary, #ff4757);
}

.quick-item-sub {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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 App Bottom Navigation Bar (Hidden by default on desktop) */
.admin-mobile-bottom-nav {
    display: none;
}

/* Mobile Responsive Layout & App Navbar */
@media (max-width: 768px) {
    html, body {
        height: 100dvh;
        max-width: 100vw;
        overflow-x: hidden !important;
    }
    .layout {
        height: 100dvh;
        max-width: 100vw;
        overflow-x: hidden !important;
        width: 100%;
    }
    .main-content {
        max-width: 100vw;
        overflow-x: hidden !important;
        width: 100%;
        min-width: 0;
    }
    .view-section {
        max-width: 100%;
        overflow-x: hidden !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .mobile-only {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(var(--primary-rgb), 0.08);
        color: var(--primary);
        border: 1px solid rgba(var(--primary-rgb), 0.16);
        cursor: pointer;
        transition: all 0.2s;
    }
    .mobile-only:active {
        transform: scale(0.92);
        background: rgba(var(--primary-rgb), 0.16);
    }
    .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);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .btn-sidebar-toggle { display: none; }
    
    /* Top App Header */
    .page-header {
        padding: 10px 14px;
        position: sticky;
        top: 0;
        z-index: 90;
        min-height: 52px;
        gap: 8px;
        background: color-mix(in srgb, var(--card-bg) 85%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    .page-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .page-header h1 {
        font-size: 15px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
        letter-spacing: -0.2px;
    }
    .header-quick-dropdown-wrap { margin-left: 4px; margin-right: auto; }
    .header-quick-dropdown-btn {
        padding: 5px 10px;
        font-size: 11.5px;
        gap: 5px;
    }
    .header-quick-dropdown-btn .btn-text-full { display: none; }
    .header-quick-dropdown-btn .btn-text-short { display: inline; }
    .header-quick-dropdown-menu {
        left: -30px;
        width: 290px;
        max-width: 90vw;
    }
    .page-header-actions { gap: 6px !important; }
    .page-header-actions .btn { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
    .btn-label-full { display: none; }
    .btn-label-short { display: inline; }
    body.hide-page-header .page-header { display: flex !important; }

    /* Content Area with Bottom Safe Padding */
    .content-area {
        padding: 12px 12px 20px 12px;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 16px)) !important;
        max-width: 100vw;
        overflow-x: hidden !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        display: none;
    }
    .sidebar-overlay.active { display: block; }

    /* Mobile App Bottom Navigation Bar */
    .admin-mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 64px;
        background: color-mix(in srgb, var(--card-bg) 90%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-color);
        z-index: 980;
        justify-content: space-around;
        align-items: center;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        user-select: none;
    }

    body.dark-mode .admin-mobile-bottom-nav {
        background: rgba(0, 0, 0, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.7);
    }

    body.light-mode .admin-mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    }

    .admin-mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--text-muted);
        text-decoration: none;
        border: none !important;
        outline: none !important;
        background: transparent;
        cursor: pointer;
        flex: 1;
        height: 100%;
        padding: 6px 2px 4px 2px;
        position: relative;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-tap-highlight-color: transparent !important;
        user-select: none;
        -webkit-user-select: none;
    }

    .admin-mobile-nav-item:focus,
    .admin-mobile-nav-item:active,
    .admin-mobile-nav-item:focus-visible {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .admin-mobile-nav-item i {
        font-size: 18px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
    }

    .admin-mobile-nav-item span {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1;
        transition: color 0.2s ease;
    }

    .admin-mobile-nav-item:active i {
        transform: scale(0.85);
    }

    .admin-mobile-nav-item.active {
        color: var(--primary);
    }

    .admin-mobile-nav-item.active i {
        transform: translateY(-2px) scale(1.1);
        color: var(--primary);
    }

    .admin-mobile-nav-item.active span {
        color: var(--primary);
        font-weight: 700;
    }

    .admin-mobile-nav-item::before {
        content: '';
        position: absolute;
        top: 2px;
        width: 18px;
        height: 3px;
        border-radius: 9999px;
        background: var(--primary);
        opacity: 0;
        transform: scaleX(0);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .admin-mobile-nav-item.active::before {
        opacity: 1;
        transform: scaleX(1);
    }

    /* Highlighted Center Button (POS) */
    .admin-mobile-nav-item.admin-nav-item-highlight {
        color: #ffffff;
    }

    .admin-mobile-nav-item.admin-nav-item-highlight .admin-nav-highlight-circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, #000));
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -14px;
        box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.45);
        border: 2.5px solid var(--card-bg);
        transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    body.dark-mode .admin-mobile-nav-item.admin-nav-item-highlight .admin-nav-highlight-circle {
        border-color: #101014;
    }

    body.light-mode .admin-mobile-nav-item.admin-nav-item-highlight .admin-nav-highlight-circle {
        border-color: #ffffff;
    }

    .admin-mobile-nav-item.admin-nav-item-highlight:active .admin-nav-highlight-circle {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.35);
    }

    .admin-mobile-nav-item.admin-nav-item-highlight i {
        font-size: 18px;
        color: #ffffff !important;
        transform: none !important;
    }

    .admin-mobile-nav-item.admin-nav-item-highlight span {
        font-size: 10px;
        font-weight: 700;
        color: var(--text-main);
        margin-top: -1px;
    }

    /* 2 Columns for Dashboard & KPI Cards in Mobile */
    .dashboard-header-stats,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .dashboard-header-stats .stat-card,
    .stats-grid .stat-card {
        padding: 12px 12px !important;
        border-radius: 18px !important;
        min-width: 0 !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03) !important;
    }

    .dashboard-header-stats .stat-card-top,
    .stats-grid .stat-card-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 4px !important;
        margin-bottom: 8px !important;
    }

    .dashboard-header-stats .stat-icon,
    .stats-grid .stat-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .dashboard-header-stats .stat-trend,
    .dashboard-header-stats .stat-badge,
    .stats-grid .stat-trend,
    .stats-grid .stat-badge {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        padding: 2px 7px !important;
        white-space: nowrap !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .stat-trend span {
        display: none !important;
    }

    .dashboard-header-stats .stat-info,
    .stats-grid .stat-info {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .dashboard-header-stats .stat-info h3,
    .stats-grid .stat-info h3 {
        font-size: 10.5px !important;
        margin: 0 0 2px 0 !important;
        letter-spacing: -0.1px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-weight: 600 !important;
    }

    .dashboard-header-stats .stat-value,
    .stats-grid .stat-value {
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        margin: 0 0 2px 0 !important;
        letter-spacing: -0.3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .dashboard-header-stats .stat-sub,
    .stats-grid .stat-sub {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        opacity: 0.85 !important;
    }

    .dashboard-header-stats .stat-card-watermark,
    .stats-grid .stat-card-watermark {
        display: none !important;
    }

    /* Dashboard Grid & Cards in Mobile */
    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 14px !important;
    }

    .dashboard-card {
        border-radius: 20px !important;
    }

    .dashboard-card .card-header {
        padding: 12px 14px 10px !important;
        gap: 8px !important;
    }

    .card-header-title h3 {
        font-size: 13.5px !important;
        gap: 6px !important;
    }

    .card-subtitle {
        font-size: 10.5px !important;
    }

    .chart-period-tabs {
        padding: 2px !important;
        gap: 2px !important;
    }

    .chart-tab-btn {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .dashboard-card .card-body {
        padding: 12px 14px !important;
    }

    .chart-container {
        height: 200px !important;
    }

    .top-list {
        gap: 8px !important;
    }

    .top-list-item {
        padding: 7px 10px !important;
        gap: 10px !important;
        border-radius: 12px !important;
    }

    .top-prod-rank {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
    }

    .top-prod-img {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    .top-prod-name {
        font-size: 12px !important;
    }

    .top-prod-cat {
        font-size: 10px !important;
    }

    .top-prod-qty {
        font-size: 12px !important;
    }

    .top-prod-amount {
        font-size: 10.5px !important;
    }

    /* Kanban Board Mobile Scrolling Track */
    .order-kanban-board {
        grid-template-columns: repeat(4, 230px) !important;
        gap: 10px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 8px !important;
    }

    .kanban-col {
        scroll-snap-align: start !important;
        padding: 12px 10px !important;
        border-radius: 18px !important;
        min-height: 220px !important;
    }

    .kanban-header {
        margin-bottom: 8px !important;
        padding-bottom: 6px !important;
    }

    .kanban-title {
        font-size: 11.5px !important;
    }

    .kanban-count-badge {
        font-size: 10px !important;
        padding: 1px 7px !important;
    }

    .kanban-items {
        gap: 8px !important;
    }

    .kanban-card {
        padding: 10px 10px !important;
        border-radius: 14px !important;
    }

    .kanban-card-id {
        font-size: 11px !important;
    }

    .kanban-card-customer {
        font-size: 12px !important;
    }

    .kanban-card-total {
        font-size: 12px !important;
    }

    .kanban-card-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    .kanban-empty {
        padding: 20px 8px !important;
        font-size: 11px !important;
    }

    #view-dashboard {
        padding-bottom: 24px !important;
    }
}

/* 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: var(--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; }

/* Users & Roles Table (Desktop Helpers) */
#tableUsers td.col-user-name,
#tableRoles td.col-role-name {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-avatar-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.12));
    color: var(--primary, #f59e0b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.user-meta-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-display-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 13.5px;
}
.user-handle-mobile,
.role-id-mobile {
    display: none;
}
.role-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.12);
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    border: 1px solid rgba(79, 70, 229, 0.2);
}
.role-icon-badge.system {
    background: rgba(79, 70, 229, 0.18);
    color: #4f46e5;
}
.role-display-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 13.5px;
}
.role-perms-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.role-perms-icon {
    color: #f59e0b;
    font-size: 12px;
}
#tableUsers td.col-user-actions,
#tableRoles td.col-role-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 768px) {
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) thead { display: none; }
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody tr.expanded::after {
        transform: rotate(180deg);
    }
    
    /* Mostrar solo la segunda columna (Nombre) al estar colapsado */
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody tr:not(.expanded) td {
        border-bottom: none;
        padding: 5px 0;
    }

    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody td:last-child { border-bottom: none; }
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody td[data-label="Cliente"] > div { min-width: 0; }
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody td[data-label="Cliente"] strong { word-break: break-word; }
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody td[data-label="Cliente"] small { word-break: break-all; }

    /* Actions cell: stack vertically */
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-table) tbody td[data-label="Acciones"] { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 14px; }
    .data-table:not(#ordersTable):not(#tableUsers):not(#tableRoles):not(.rrhh-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; }

    /* ==========================================================================
       USERS & ROLES RESPONSIVE MODERN CARDS (SOLO EN RESPONSIVE)
       ========================================================================== */
    #tableUsers,
    #tableRoles {
        display: block !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
    }

    #tableUsers thead,
    #tableRoles thead {
        display: none !important;
    }

    #tableUsers tbody,
    #tableRoles tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Tarjeta individual de Usuario */
    #tableUsers tbody tr.user-card-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
        cursor: default !important;
        gap: 10px 8px !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    #tableUsers tbody tr.user-card-item::after,
    #tableRoles tbody tr.role-card-item::after,
    #tableUsers tbody tr.user-card-item td::before,
    #tableRoles tbody tr.role-card-item td::before {
        display: none !important;
        content: none !important;
    }

    /* Ocultar celdas redundantes en la vista de tarjeta móvil */
    #tableUsers tbody tr.user-card-item td.col-user-id,
    #tableUsers tbody tr.user-card-item td.col-user-username,
    #tableRoles tbody tr.role-card-item td.col-role-id {
        display: none !important;
    }

    /* Cabecera de la tarjeta: Avatar + Nombre + Handle */
    #tableUsers tbody tr.user-card-item td.col-user-name {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 !important;
        padding-right: 95px !important;
        border: none !important;
        background: transparent !important;
    }

    .user-avatar-badge {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(239, 68, 68, 0.12));
        color: var(--primary, #f59e0b);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14.5px;
        font-weight: 800;
        flex-shrink: 0;
        border: 1px solid rgba(245, 158, 11, 0.25);
    }

    .user-meta-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .user-display-name {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1.25;
        word-break: break-word;
    }

    .user-handle-mobile {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--text-muted);
        font-weight: 500;
    }

    .user-id-mobile {
        font-size: 10.5px;
        font-weight: 700;
        color: var(--text-muted);
        background: var(--input-bg, #f1f5f9);
        padding: 1px 6px;
        border-radius: 6px;
        border: 1px solid var(--border-color);
    }

    /* Estado badge flotante en esquina superior derecha */
    #tableUsers tbody tr.user-card-item td.col-user-status {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        z-index: 2;
        width: auto !important;
        height: auto !important;
    }

    .user-status-pill {
        padding: 4px 9px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .user-status-pill.active {
        color: #10b981;
        background: rgba(16, 185, 129, 0.12);
        border: 1px solid rgba(16, 185, 129, 0.25);
    }

    .user-status-pill.inactive {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.12);
        border: 1px solid rgba(239, 68, 68, 0.25);
    }

    /* Fila Inferior: Rol a la izquierda */
    #tableUsers tbody tr.user-card-item td.col-user-role {
        grid-column: 1 !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        min-width: 0 !important;
    }

    .user-role-badge {
        padding: 4px 10px;
        border-radius: 10px;
        font-size: 11.5px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
        border: 1px solid rgba(245, 158, 11, 0.2);
    }

    .user-role-badge.system {
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary, #4f46e5);
        border: 1px solid rgba(79, 70, 229, 0.2);
    }

    /* Fila Inferior: Acciones a la derecha */
    #tableUsers tbody tr.user-card-item td.col-user-actions {
        grid-column: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        width: auto !important;
    }

    #tableUsers tbody tr.user-card-item td.col-user-actions .btn-action-edit,
    #tableRoles tbody tr.role-card-item td.col-role-actions .btn-action-edit {
        height: 36px !important;
        padding: 0 14px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #tableUsers tbody tr.user-card-item td.col-user-actions .btn-danger,
    #tableRoles tbody tr.role-card-item td.col-role-actions .btn-danger {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tarjeta individual de Rol */
    #tableRoles tbody tr.role-card-item {
        display: flex !important;
        flex-direction: column !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
        cursor: default !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    #tableRoles tbody tr.role-card-item td.col-role-name {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        position: relative !important;
        width: 100% !important;
    }

    .role-icon-badge {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        background: rgba(79, 70, 229, 0.12);
        color: #4f46e5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
        border: 1px solid rgba(79, 70, 229, 0.2);
    }

    .role-icon-badge.system {
        background: rgba(79, 70, 229, 0.18);
        color: #4f46e5;
    }

    .role-meta-wrap {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }

    .role-display-name {
        font-size: 14.5px;
        font-weight: 800;
        color: var(--text-main);
        line-height: 1.25;
    }

    .role-id-mobile {
        display: inline-block !important;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .role-system-badge-mobile {
        margin-left: auto;
        flex-shrink: 0;
    }

    .role-badge-system {
        background: rgba(79, 70, 229, 0.12);
        color: #4f46e5;
        padding: 4px 8px;
        border-radius: 10px;
        font-size: 11px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid rgba(79, 70, 229, 0.25);
        white-space: nowrap;
    }

    /* Caja de Permisos en Móvil */
    #tableRoles tbody tr.role-card-item td.col-role-perms {
        display: flex !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        background: var(--input-bg, #f8fafc) !important;
        border: 1px solid var(--border-color) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .role-perms-wrap {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        width: 100% !important;
    }

    .role-perms-icon {
        color: #f59e0b;
        font-size: 12px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .role-perms-text {
        font-weight: 500;
        color: var(--text-main);
        word-break: break-word;
    }

    /* Acciones en tarjeta de rol */
    #tableRoles tbody tr.role-card-item td.col-role-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        padding-top: 8px !important;
        border-top: 1px dashed var(--border-color) !important;
        background: transparent !important;
        width: 100% !important;
    }
}

/* 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; }
@media (max-width: 768px) {
    .modal {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
        max-height: 88vh !important;
    }
    .modal.modal-lg {
        max-width: calc(100vw - 20px) !important;
    }
}
.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;
    min-height: calc(100vh - 86px);
}

/* =====================================================
   MODERN SAAS DIGITAL ASSET MANAGER (DAM) & MEDIA MODAL
===================================================== */

.media-saas-shell {
    background: var(--card-bg);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: calc(100vh - 115px);
    overflow: hidden;
}

body.dark-mode .media-saas-shell {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* --- Top SaaS Header & KPIs --- */
.media-saas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(var(--primary-rgb, 255, 71, 87), 0.03) 0%, transparent 100%);
    flex-wrap: wrap;
}

.media-saas-title-cluster {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

.media-saas-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.16), rgba(var(--primary-rgb, 255, 71, 87), 0.05));
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.24);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 71, 87), 0.1);
}

.media-saas-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.media-saas-title-row h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.35px;
    color: var(--text-main);
}

.media-saas-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.1);
    color: var(--primary, #ff4757);
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.2);
}

.media-saas-subtitle {
    margin: 3px 0 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 400;
}

/* KPI Chips in Header */
.media-saas-kpis {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.media-kpi-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px;
    border-radius: 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

body.dark-mode .media-kpi-chip {
    background: #121216;
    border-color: rgba(255, 255, 255, 0.07);
}

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

.media-kpi-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.media-kpi-icon.kpi-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.media-kpi-icon.kpi-emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.media-kpi-icon.kpi-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.media-kpi-icon.kpi-sky { background: rgba(14, 165, 233, 0.12); color: #0ea5e9; }

.media-kpi-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.media-kpi-val {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main);
}

.media-kpi-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Primary Actions Cluster */
.media-saas-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-media-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    font-family: inherit;
}

.btn-media-ghost {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
}

.btn-media-ghost:hover {
    color: var(--text-main);
    background: var(--input-bg);
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.35);
}

.btn-media-secondary {
    background: var(--input-bg);
    border-color: var(--border-color);
    color: var(--text-main);
}

body.light-mode .btn-media-secondary {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.dark-mode .btn-media-secondary {
    background: #16161b;
    border-color: rgba(255, 255, 255, 0.1);
}

.btn-media-secondary:hover {
    border-color: var(--primary, #ff4757);
    color: var(--primary, #ff4757);
    transform: translateY(-1px);
}

.btn-media-primary {
    background: linear-gradient(135deg, var(--primary, #ff4757), #ff6b81);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 255, 71, 87), 0.28);
}

.btn-media-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb, 255, 71, 87), 0.4);
    filter: brightness(1.04);
}

/* Quick URL Import Bar */
.media-url-import-dock {
    padding: 12px 24px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.04);
    border-bottom: 1px solid var(--border-color);
    animation: fadeIn 0.2s ease;
}

.media-url-import-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-url-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 0 14px;
    height: 38px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.media-url-input-wrap:focus-within {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.14);
}

.media-url-input-wrap i {
    color: var(--primary, #ff4757);
    font-size: 13px;
}

.media-url-input-wrap input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    color: var(--text-main);
    font-size: 13px;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.btn-media-icon-only {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s;
}

.btn-media-icon-only:hover {
    color: var(--danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.35);
}

.media-saas-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.media-modal-header-saas {
    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-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.media-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.12);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

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

.media-modal-subtitle {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.media-modal-footer-hint {
    font-size: 12.5px;
    color: var(--text-muted);
}

.media-modal-footer-hint strong {
    color: var(--text-main);
}

/* --- Unified SaaS Toolbar & Filter Bar --- */
.media-saas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-alt-bg, var(--sidebar-bg));
    flex-wrap: wrap;
}

body.light-mode .media-saas-toolbar { background: #f8fafc; }
body.dark-mode .media-saas-toolbar { background: #0d0d11; }

.media-toolbar-left,
.media-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Segmented Tabs */
.media-tabs-segmented {
    display: inline-flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 11px;
    padding: 3px;
    gap: 3px;
}

body.light-mode .media-tabs-segmented { background: #e2e8f0; border-color: #cbd5e1; }
body.dark-mode .media-tabs-segmented { background: #16161d; border-color: rgba(255, 255, 255, 0.08); }

.media-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

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

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

body.dark-mode .media-tab.active { background: #23232e; color: #ffffff; }
.media-tab.active i { color: var(--primary, #ff4757); }

.media-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.14);
    color: var(--primary, #ff4757);
}

/* Filter Pills */
.media-filter-pills {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.media-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

body.dark-mode .media-filter-pill { background: #141419; border-color: rgba(255, 255, 255, 0.08); }
.media-filter-pill:hover { color: var(--text-main); border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.35); }
.media-filter-pill.active {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.11);
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.38);
    color: var(--primary, #ff4757);
}

/* Search Box */
.media-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 230px;
}

.media-search-icon {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.media-search-box input {
    width: 100%;
    height: 34px;
    padding: 0 30px 0 32px !important;
    border-radius: 9px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    font-size: 12.5px !important;
    transition: all 0.18s ease;
}

body.dark-mode .media-search-box input { background: #141419 !important; border-color: rgba(255, 255, 255, 0.08) !important; }
.media-search-box input:focus {
    border-color: var(--primary, #ff4757) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.12) !important;
    outline: none;
}

.media-search-clear {
    position: absolute;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.media-search-clear:hover { color: var(--text-main); background: var(--input-bg); }

/* Sort Select */
.media-sort-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.media-sort-wrap i {
    position: absolute;
    left: 11px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.media-sort-wrap select {
    height: 34px;
    padding: 0 28px 0 30px !important;
    border-radius: 9px !important;
    border: 1px solid var(--border-color) !important;
    background: var(--card-bg) !important;
    color: var(--text-main) !important;
    font-size: 12px !important;
    font-weight: 600;
    cursor: pointer;
}

body.dark-mode .media-sort-wrap select { background: #141419 !important; border-color: rgba(255, 255, 255, 0.08) !important; }

/* View & Aspect Fit Toggles */
.media-view-toggles {
    display: inline-flex;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 2px;
    gap: 2px;
}

body.dark-mode .media-view-toggles { background: #141419; border-color: rgba(255, 255, 255, 0.08); }
.media-toggle-divider { width: 1px; height: 18px; background: var(--border-color); margin: 0 2px; }

.media-toggle-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.16s ease;
}

.media-toggle-btn:hover { color: var(--text-main); }
.media-toggle-btn.active {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.14);
    color: var(--primary, #ff4757);
}

/* Bulk Selection Action Pills */
.media-selection-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.media-active-selection-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.06);
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.2);
    padding: 3px 6px 3px 10px;
    border-radius: 10px;
}

.media-selected-counter {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary, #ff4757);
    margin-right: 2px;
}

.btn-media-toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

body.dark-mode .btn-media-toolbar-pill { background: #18181f; border-color: rgba(255, 255, 255, 0.1); }
.btn-media-toolbar-pill:hover { border-color: var(--primary, #ff4757); color: var(--primary, #ff4757); }
.btn-media-danger-pill {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}
.btn-media-danger-pill:hover { background: #ef4444 !important; color: #ffffff !important; }

/* --- Main Body & Checkerboard Surface --- */
.media-modal-body {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    background: var(--bg-color);
}

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

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

.media-checkerboard {
    background-color: #f1f5f9;
    background-image:
        linear-gradient(45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.16) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

body.dark-mode .media-checkerboard {
    background-color: #141418;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
}

/* --- Library Grid & Card Architecture --- */
.media-library-grid {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
    align-content: flex-start;
    background: var(--card-bg);
}

body.dark-mode .media-library-grid { background: #09090b; }
body.light-mode .media-library-grid { background: #ffffff; }

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

.media-item {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

body.dark-mode .media-item { background: #121216; border-color: rgba(255, 255, 255, 0.08); }
body.light-mode .media-item { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03); }

.media-item:hover {
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.55);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.12);
}

body.dark-mode .media-item:hover { box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.65); }

.media-item-stage {
    position: relative;
    width: 100%;
    padding-top: 88%;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
}

.media-item-stage img,
.media-item-stage video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.28s ease;
}

.media-library-grid.fit-contain .media-item-stage img,
.media-library-grid.fit-contain .media-item-stage video {
    object-fit: contain;
    padding: 8px;
}

.media-item:hover .media-item-stage img { transform: scale(1.03); }

.media-item-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    background: rgba(15, 23, 42, 0.68);
    color: #ffffff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
}

.media-item-badge.badge-video { background: rgba(245, 158, 11, 0.9); color: #09090b; }

.media-item-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.16s ease;
    backdrop-filter: blur(4px);
}

.media-item:hover .media-item-check { opacity: 1; transform: scale(1); }

.media-item.selected {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.24);
}

.media-item.selected .media-item-check {
    opacity: 1;
    transform: scale(1);
    background: var(--primary, #ff4757);
    border-color: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 255, 71, 87), 0.4);
}

.media-item-hover-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 3;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.18s ease;
}

.media-item:hover .media-item-hover-overlay { opacity: 1; transform: translateY(0); }

.media-card-quick-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.15s ease;
}

.media-card-quick-btn:hover {
    background: var(--primary, #ff4757);
    border-color: var(--primary, #ff4757);
    transform: scale(1.06);
}

.media-item-info {
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--card-bg);
}

body.dark-mode .media-item-info { background: #121216; }

.media-item-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-item-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.media-dot { opacity: 0.5; }

/* --- Compact SaaS List View Mode (.view-list) --- */
.media-library-grid.view-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.media-library-grid.view-list .media-item {
    flex-direction: row;
    align-items: center;
    padding: 8px 14px;
    border-radius: 12px;
    gap: 14px;
}

.media-library-grid.view-list .media-item:hover { transform: translateX(2px); }

.media-library-grid.view-list .media-item-stage {
    width: 56px;
    height: 56px;
    padding-top: 0;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.media-library-grid.view-list .media-item-badge { display: none; }

.media-library-grid.view-list .media-item-hover-overlay {
    position: static;
    opacity: 1;
    transform: none;
    margin-left: auto;
    order: 3;
}

.media-library-grid.view-list .media-item-info { flex: 1; padding: 0; background: transparent; }
.media-library-grid.view-list .media-item-title { font-size: 13.5px; }
.media-library-grid.view-list .media-item-sub { font-size: 11.5px; }

/* --- Skeleton Shimmer Cards --- */
.media-skeleton-card {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--card-bg);
}

.media-skeleton-thumb {
    width: 100%;
    padding-top: 88%;
    background: linear-gradient(90deg, var(--input-bg) 25%, var(--border-color) 50%, var(--input-bg) 75%);
    background-size: 200% 100%;
    animation: mediaShimmer 1.4s infinite;
}

.media-skeleton-Lines { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.media-skeleton-line { height: 9px; border-radius: 4px; background: var(--input-bg); }
.media-skeleton-line.w-75 { width: 75%; }
.media-skeleton-line.w-40 { width: 40%; }

@keyframes mediaShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Empty State --- */
.media-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
}

.media-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.08);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 14px;
}

.media-empty-state h4 { margin: 0 0 6px 0; font-size: 16px; font-weight: 800; color: var(--text-main); }
.media-empty-state p { margin: 0 0 18px 0; font-size: 13px; max-width: 360px; }

/* --- SaaS Asset Inspector Sidebar (#mediaSidebar) --- */
.media-sidebar {
    width: 360px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideInRightInspector 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRightInspector {
    from { opacity: 0.4; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

body.dark-mode .media-sidebar { background: #0d0d12; border-left-color: rgba(255, 255, 255, 0.08); }
body.light-mode .media-sidebar { background: #f8fafc; border-left-color: #e2e8f0; }

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

body.dark-mode .media-sidebar-header { background: #111117; }

.media-sidebar-title-wrap { display: flex; align-items: center; gap: 10px; }

.media-sidebar-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.12);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.media-sidebar h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.media-sidebar-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary, #ff4757);
    text-transform: uppercase;
}

.media-sidebar-close {
    width: 30px;
    height: 30px;
    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;
    cursor: pointer;
    transition: all 0.16s ease;
}

.media-sidebar-close:hover {
    color: var(--danger, #ef4444);
    border-color: rgba(239, 68, 68, 0.35);
}

.media-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 22px;
}

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

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

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

.media-preview-expand-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: all 0.16s ease;
}

.media-preview-expand-btn:hover { background: var(--primary, #ff4757); transform: scale(1.06); }

.media-inspector-quickbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.media-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.16s ease;
}

body.dark-mode .media-quick-btn { background: #15151c; border-color: rgba(255, 255, 255, 0.08); }
.media-quick-btn i { color: var(--primary, #ff4757); font-size: 11px; }
.media-quick-btn:hover { border-color: var(--primary, #ff4757); background: rgba(var(--primary-rgb, 255, 71, 87), 0.06); }

/* Bento Metadata Grid */
.media-bento-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
    padding: 0;
    background: transparent;
    border: none;
}

.media-bento-cell {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

body.dark-mode .media-bento-cell { background: #14141b; border-color: rgba(255, 255, 255, 0.07); }

.bento-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bento-label i { color: var(--primary, #ff4757); opacity: 0.75; }

.bento-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Direct URL Copy Input */
.media-url-copy-box { margin-bottom: 14px; }
.media-url-copy-box label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.media-url-copy-row { display: flex; align-items: center; gap: 6px; }
.media-url-copy-row input {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 11.5px;
    font-family: monospace;
}

.media-url-copy-row button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s;
}

.media-url-copy-row button:hover { border-color: var(--primary, #ff4757); color: var(--primary, #ff4757); }

/* Inspector Form */
.media-sidebar .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

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

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

body.dark-mode .media-sidebar .form-control { background: #14141b; border-color: rgba(255, 255, 255, 0.09); color: #f8fafc; }
.media-sidebar .form-control:focus {
    border-color: var(--primary, #ff4757);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.15);
}

.media-inspector-footer-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.btn-inspector-save {
    width: 100%;
    height: 36px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, var(--primary, #ff4757), #ff6b81);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.18s ease;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 255, 71, 87), 0.25);
}

.btn-inspector-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--primary-rgb, 255, 71, 87), 0.35); }

.btn-inspector-delete {
    width: 100%;
    height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.18s ease;
}

.btn-inspector-delete:hover { background: #ef4444; color: #ffffff; }

/* --- Upload Tab Hub & Dropzone --- */
.media-upload-hub {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

.media-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px dashed var(--border-color);
    border-radius: 18px;
    padding: 44px 24px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.25s ease;
}

body.dark-mode .media-dropzone { background: #111116; border-color: rgba(255, 255, 255, 0.12); }

.media-dropzone:hover,
.media-dropzone.dragover {
    border-color: var(--primary, #ff4757);
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.04);
    transform: translateY(-2px);
}

.media-dropzone-icon-ring {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.15), rgba(var(--primary-rgb, 255, 71, 87), 0.04));
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.22);
    color: var(--primary, #ff4757);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
}

.media-dropzone h3 { margin: 0 0 6px 0; font-size: 17px; font-weight: 800; color: var(--text-main); }
.media-dropzone p { margin: 0 0 18px 0; font-size: 13px; color: var(--text-muted); max-width: 440px; }

.media-dropzone-badges { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

.dropzone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

.dropzone-badge i { color: var(--primary, #ff4757); }

/* Direct URL Card inside Upload Tab */
.media-upload-url-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.dark-mode .media-upload-url-card { background: #111116; }

.media-upload-url-header { display: flex; align-items: center; gap: 12px; }

.url-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.media-upload-url-header h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-main); }
.media-upload-url-header p { margin: 2px 0 0 0; font-size: 12px; color: var(--text-muted); }

.media-upload-url-controls { display: flex; gap: 10px; }
.media-upload-url-controls input { flex: 1; }

/* Upload Progress Items */
.media-upload-progress { display: flex; flex-direction: column; gap: 10px; }

.media-progress-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
}

.media-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    margin-bottom: 8px;
}

.media-progress-file { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-main); }
.media-progress-file i { color: var(--primary, #ff4757); }
.media-progress-size { color: var(--text-muted); font-weight: 400; font-size: 11.5px; }

.media-progress-bar {
    height: 6px;
    background: var(--input-bg);
    border-radius: 999px;
    overflow: hidden;
}

.media-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #ff4757), #10b981);
    width: 0%;
    transition: width 0.3s ease;
}

/* --- Fullscreen Lightbox Overlay --- */
.media-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(9, 9, 11, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: fadeIn 0.18s ease;
}

.media-lightbox-dialog {
    width: 100%;
    max-width: 1020px;
    max-height: 90vh;
    background: #111116;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75);
}

.media-lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.media-lightbox-info { display: flex; align-items: center; gap: 10px; }
.media-lightbox-info strong { font-size: 14px; }
.media-lightbox-info span {
    font-size: 11.5px;
    color: #a1a1aa;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 6px;
}

.media-lightbox-actions { display: flex; align-items: center; gap: 8px; }

.media-lightbox-btn {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.media-lightbox-btn:hover { background: var(--primary, #ff4757); border-color: var(--primary, #ff4757); }

.media-lightbox-stage {
    flex: 1;
    min-height: 360px;
    max-height: calc(90vh - 65px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

.media-lightbox-stage img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* --- Responsive Design (Tablet & Mobile Bottom Sheet) --- */
@media (max-width: 1024px) {
    .media-saas-kpis { display: none; }
}

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

    .media-saas-header { padding: 16px; gap: 12px; }
    .media-saas-actions { width: 100%; justify-content: stretch; }
    .media-saas-actions .btn-media-action { flex: 1; padding: 0 10px; font-size: 12px; }
    .media-saas-toolbar { padding: 10px 14px; gap: 10px; }
    .media-toolbar-left, .media-toolbar-right { width: 100%; justify-content: space-between; }
    .media-search-box { flex: 1; width: auto; }

    .media-sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100% !important;
        max-height: 80vh;
        z-index: 10020;
        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: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
    }

    .media-sidebar.open { transform: translateY(0); }

    .media-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
        gap: 10px;
        padding: 14px;
    }

    .media-upload-hub { padding: 14px; }
    .media-dropzone { padding: 28px 16px; }
    .media-upload-url-controls { flex-direction: column; }
}
.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: var(--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:indeterminate {
    background: var(--primary);
    border-color: var(--primary);
}
.modern-checkbox:indeterminate::after {
    content: '';
    width: 8px;
    height: 2px;
    background: #ffffff;
    border-radius: 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: var(--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: var(--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: var(--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 MODULE - REFINED TOP BAR & COMPACT MODERN FILTER BAR
   ========================================================== */
.orders-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Orders Segmented Dock: Professional App Track */
.orders-segmented-dock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
}

body.dark-mode .orders-segmented-dock {
    background: rgba(10, 10, 12, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

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

.order-segmented-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    user-select: none;
}

.order-segmented-pill:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.035);
}

body.dark-mode .order-segmented-pill:hover {
    background: rgba(255, 255, 255, 0.06);
}

.order-segmented-pill.active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.dark-mode .order-segmented-pill.active {
    background: #18181b;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.order-segmented-pill .pill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    transition: all 0.2s ease;
}

body.dark-mode .order-segmented-pill .pill-badge {
    background: rgba(255, 255, 255, 0.08);
}

/* Pastel Tint Accents on Segmented Badges */
.order-segmented-pill[data-status="pending"] .pill-badge {
    background: #fef3c7;
    color: #b45309;
}
.order-segmented-pill[data-status="preparing"] .pill-badge {
    background: #ffedd5;
    color: #c2410c;
}
.order-segmented-pill[data-status="shipped"] .pill-badge {
    background: #e0f2fe;
    color: #0369a1;
}
.order-segmented-pill[data-status="delivered"] .pill-badge {
    background: #dcfce7;
    color: #15803d;
}
.order-segmented-pill[data-status="cancelled"] .pill-badge {
    background: #f1f5f9;
    color: #64748b;
}

body.dark-mode .order-segmented-pill[data-status="pending"] .pill-badge { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
body.dark-mode .order-segmented-pill[data-status="preparing"] .pill-badge { background: rgba(249, 115, 22, 0.2); color: #fdba74; }
body.dark-mode .order-segmented-pill[data-status="shipped"] .pill-badge { background: rgba(14, 165, 233, 0.2); color: #7dd3fc; }
body.dark-mode .order-segmented-pill[data-status="delivered"] .pill-badge { background: rgba(34, 197, 94, 0.2); color: #86efac; }
body.dark-mode .order-segmented-pill[data-status="cancelled"] .pill-badge { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* Pastel Tint Accents on Customers Segmented Badges */
.order-segmented-pill[data-segment="with_orders"] .pill-badge {
    background: #d1fae5;
    color: #047857;
}
.order-segmented-pill[data-segment="no_orders"] .pill-badge {
    background: #f1f5f9;
    color: #64748b;
}

body.dark-mode .order-segmented-pill[data-segment="with_orders"] .pill-badge { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
body.dark-mode .order-segmented-pill[data-segment="no_orders"] .pill-badge { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

.btn-new-customer-trigger {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
}
.btn-new-customer-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
    filter: brightness(1.05);
}

.btn-new-coupon-trigger {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 12.5px;
    padding: 8px 16px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
}
.btn-new-coupon-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.45);
    filter: brightness(1.05);
}

/* Coupon status pills in segmented dock */
.order-segmented-pill[data-status="1"] .pill-badge {
    background: #d1fae5;
    color: #047857;
}
.order-segmented-pill[data-status="0"] .pill-badge {
    background: #f1f5f9;
    color: #64748b;
}
body.dark-mode .order-segmented-pill[data-status="1"] .pill-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}
body.dark-mode .order-segmented-pill[data-status="0"] .pill-badge {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}


/* Filter Trigger Button beside Tabs */
.btn-orders-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.025);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    flex-shrink: 0;
}

body.dark-mode .btn-orders-filter-trigger {
    background: rgba(10, 10, 12, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.btn-orders-filter-trigger:hover {
    background: #ffffff;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

body.dark-mode .btn-orders-filter-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-orders-filter-trigger.has-active-filters {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    font-weight: 700;
}

.orders-top-actions-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-orders-quick-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.btn-orders-quick-reset:hover {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
    transform: translateY(-1px);
}

/* Mobile Floating Filter Button (FAB) */
.orders-mobile-filter-fab {
    display: none;
}

@media (max-width: 768px) {
    .orders-top-bar {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
    .orders-segmented-dock {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0;
    }
    /* Hide top filter trigger on responsive — mobile uses the bottom-right floating FAB */
    .btn-orders-filter-trigger {
        display: none !important;
    }
    .btn-orders-quick-reset span {
        display: none;
    }
    .btn-orders-quick-reset {
        padding: 7px 10px;
        margin-left: 6px;
    }

    #view-orders.active ~ .orders-mobile-filter-fab,
    #view-orders.active .orders-mobile-filter-fab,
    #view-orders .orders-mobile-filter-fab,
    #view-customers.active ~ .customers-mobile-filter-fab,
    #view-customers.active .customers-mobile-filter-fab,
    #view-customers .customers-mobile-filter-fab,
    #view-benefits.active ~ .coupons-mobile-filter-fab,
    #view-benefits.active .coupons-mobile-filter-fab,
    #view-benefits .coupons-mobile-filter-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 18px;
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%, #000) 100%);
        color: #ffffff;
        border: 2.5px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
        z-index: 920;
        cursor: pointer;
        font-size: 19px;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
        outline: none;
    }

    #view-customers.active ~ .customers-mobile-filter-fab,
    #view-customers.active .customers-mobile-filter-fab,
    #view-customers .customers-mobile-filter-fab {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    }

    #view-benefits.active ~ .coupons-mobile-filter-fab,
    #view-benefits.active .coupons-mobile-filter-fab,
    #view-benefits .coupons-mobile-filter-fab {
        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    }

    .customers-top-bar {
        display: flex;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .customers-top-bar .customers-segmented-dock {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0;
    }
    .customers-top-actions-wrap {
        width: 100% !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .btn-new-customer-trigger {
        width: 100% !important;
        flex: 1 1 auto;
        min-height: 42px;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
    }
    .btn-new-customer-trigger span {
        display: inline !important;
    }
    .customers-top-actions-wrap .btn-orders-quick-reset {
        height: 42px;
        padding: 0 14px;
        border-radius: 12px;
        flex-shrink: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .coupons-top-bar {
        display: flex;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 16px;
    }
    .coupons-top-bar .coupons-segmented-dock {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0;
    }
    .coupons-top-actions-wrap {
        width: 100% !important;
        display: flex !important;
        align-items: center;
        gap: 8px;
    }
    .btn-new-coupon-trigger {
        width: 100% !important;
        flex: 1 1 auto;
        min-height: 42px;
        padding: 10px 16px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
    }
    .btn-new-coupon-trigger span {
        display: inline !important;
    }
    .coupons-top-actions-wrap .btn-orders-quick-reset {
        height: 42px;
        padding: 0 14px;
        border-radius: 12px;
        flex-shrink: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }



    .orders-mobile-filter-fab:active {
        transform: scale(0.92);
    }


    .orders-fab-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        min-width: 20px;
        height: 20px;
        padding: 0 5px;
        border-radius: 10px;
        background: #ef4444;
        color: #ffffff;
        font-size: 10.5px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid var(--card-bg);
        box-shadow: 0 2px 6px rgba(0,0,0,0.3);
        line-height: 1;
    }
}

/* ==========================================================
   ORDERS MODULE - MODERN COMPACT TOOLBAR & OFF-CANVAS DRAWER
   ========================================================== */
/* Drawer Search Box */
.orders-filter-search-box.in-drawer {
    width: 100%;
    min-width: 0;
    flex: none;
    height: 42px;
}

.orders-filter-search-box.in-drawer .orders-filter-search-input {
    background: var(--input-bg);
    border-color: var(--border-color);
}

body.light-mode .orders-filter-search-box.in-drawer .orders-filter-search-input {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-mode .orders-filter-search-box.in-drawer .orders-filter-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

body.dark-mode .orders-filter-search-box.in-drawer .orders-filter-search-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

/* Drawer Quick Operations: Refresh & Live Hub */
.drawer-quick-ops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-drawer-quick-op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
}

.btn-drawer-quick-op.btn-refresh {
    background: var(--input-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

body.light-mode .btn-drawer-quick-op.btn-refresh {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-mode .btn-drawer-quick-op.btn-refresh:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

body.dark-mode .btn-drawer-quick-op.btn-refresh {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

body.dark-mode .btn-drawer-quick-op.btn-refresh:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

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

.btn-drawer-quick-op.btn-refresh i {
    transition: transform 0.4s ease;
}

.btn-drawer-quick-op.btn-live-hub {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.btn-drawer-quick-op.btn-live-hub:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.35);
}

.orders-toolbar-main {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 10px 14px;
    margin-bottom: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    animation: fadeIn 0.25s ease;
}

body.dark-mode .orders-toolbar-main {
    background: rgba(10, 10, 12, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

/* Search Box */
.orders-filter-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
    flex: 1.4;
    height: 40px;
}

.orders-filter-search-box .filter-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.orders-filter-search-input {
    width: 100%;
    height: 100%;
    padding: 0 34px 0 38px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family, 'Inter', sans-serif);
    outline: none;
    transition: all 0.2s ease;
}

body.dark-mode .orders-filter-search-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.orders-filter-search-input:focus {
    border-color: var(--primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

body.dark-mode .orders-filter-search-input:focus {
    background: rgba(255, 255, 255, 0.08);
}

.orders-filter-search-box:focus-within .filter-icon {
    color: var(--primary);
}

.orders-filter-search-box .btn-clear-search-x {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.orders-filter-search-box .btn-clear-search-x:hover {
    color: var(--danger);
    background: rgba(255, 71, 87, 0.1);
}

/* Toolbar Right Actions */
.orders-toolbar-right-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-orders-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-family, 'Inter', sans-serif);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    outline: none;
    border: 1px solid transparent;
}

/* Filter Trigger Button */
.btn-orders-action.btn-filter-trigger {
    background: var(--input-bg);
    color: var(--text-main);
    border-color: var(--border-color);
    gap: 8px;
}

.btn-orders-action.btn-filter-trigger:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
    transform: translateY(-1px);
}

.btn-orders-action.btn-filter-trigger.has-active-filters {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.09);
    font-weight: 700;
}

.active-filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.4);
}

/* Quick Clear Button */
.btn-orders-action.btn-clear-active-filters {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.25);
    animation: fadeIn 0.2s ease;
}

.btn-orders-action.btn-clear-active-filters:hover {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
    transform: translateY(-1px);
}

/* Refresh Button */
.btn-orders-action.btn-refresh {
    background: var(--text-main);
    color: var(--card-bg);
    border-color: var(--text-main);
}

body:not(.dark-mode) .btn-orders-action.btn-refresh {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

body.dark-mode .btn-orders-action.btn-refresh {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.btn-orders-action.btn-refresh:hover {
    transform: translateY(-1px);
    opacity: 0.92;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

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

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

/* Live Hub Button */
.btn-orders-action.btn-live-hub {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}

.btn-orders-action.btn-live-hub:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(37, 99, 235, 0.35);
    color: #ffffff !important;
}

.live-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    animation: livePulse 2s infinite;
}

@keyframes livePulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(74, 222, 128, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

/* Bulk Delete Button */
.btn-orders-action.btn-bulk-delete {
    background: var(--danger);
    color: #ffffff;
    border: none;
}

.btn-orders-action.btn-bulk-delete:hover {
    background: #e03242;
    transform: translateY(-1px);
}

/* ==========================================================
   OFF-CANVAS FILTERS DRAWER
   ========================================================== */
.orders-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.dark-mode .orders-drawer-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.orders-drawer-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.orders-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateX(105%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, 0.9);
}

body.dark-mode .orders-filter-drawer {
    background: #08080a;
    border-left-color: rgba(255, 255, 255, 0.08);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8);
}

.orders-filter-drawer.open {
    transform: translateX(0);
}

/* Drawer Header */
.orders-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.orders-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
}

.orders-drawer-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.orders-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.orders-drawer-subtitle {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}

.orders-drawer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.2s ease;
}

.orders-drawer-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
    transform: rotate(90deg);
}

/* Drawer Body */
.orders-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    scrollbar-width: thin;
}

.orders-drawer-body::-webkit-scrollbar {
    width: 5px;
}

.orders-drawer-body::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.drawer-filter-section {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.drawer-section-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-section-label i {
    color: var(--primary);
    font-size: 13px;
    width: 14px;
    text-align: center;
}

/* Date Presets */
.drawer-date-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.date-preset-pill {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--font-family, 'Inter', sans-serif);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: center;
}

.date-preset-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-1px);
}

.date-preset-pill.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.35);
}

/* Date Range Inputs */
.drawer-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.drawer-field-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.drawer-field-sublabel {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.drawer-input,
.drawer-select {
    width: 100%;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family, 'Inter', sans-serif);
    padding: 0 12px;
    outline: none;
    transition: all 0.2s ease;
}

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

.drawer-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    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.5' 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 14px center;
    padding-right: 32px;
}

.drawer-select option {
    background: var(--card-bg);
    color: var(--text-main);
}

/* Drawer Footer */
.orders-drawer-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.btn-drawer-clear {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-family, 'Inter', sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-drawer-clear:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.btn-drawer-apply {
    flex: 1.4;
    height: 44px;
    border-radius: 10px;
    border: none;
    background: var(--primary);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font-family, 'Inter', sans-serif);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-drawer-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.45);
    filter: brightness(1.05);
}

/* ==========================================================
   CUSTOMERS OFFCANVAS DRAWER
   ========================================================== */
.customer-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10005;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

body.dark-mode .customer-offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.75);
}

.customer-offcanvas-backdrop.active,
.customer-offcanvas-backdrop.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.customer-offcanvas-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(500px, 94vw) !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: var(--card-bg, #ffffff) !important;
    box-shadow: -10px 0 45px rgba(0, 0, 0, 0.35) !important;
    z-index: 10006 !important;
    transform: translateX(105%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-left: 1px solid var(--border-color) !important;
}

.customer-offcanvas-drawer.active,
.customer-offcanvas-drawer.open {
    transform: translateX(0%) !important;
}

.customer-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg, #ffffff);
    flex-shrink: 0;
}

.customer-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customer-drawer-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.customer-drawer-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.customer-drawer-subtitle {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.customer-drawer-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.customer-drawer-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
    transform: rotate(90deg);
}

.customer-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.customer-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--card-bg, #ffffff);
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .orders-toolbar-main {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .orders-toolbar-right-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .orders-toolbar-right-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .orders-toolbar-right-actions .btn-orders-action {
        justify-content: center;
        width: 100%;
    }
    .orders-toolbar-right-actions .btn-live-hub {
        grid-column: span 2;
    }
    .drawer-field-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   ORDERS TABLE - MODERN APP TABLE & MOBILE EXPANDABLE CARDS
   ========================================================== */
.orders-table-container {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.025);
    overflow-x: auto;
    overflow-y: hidden;
    animation: fadeIn 0.3s ease 0.1s both;
    margin-top: 14px;
}

body.dark-mode .orders-table-container {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

#ordersTable.orders-table-modern,
#ordersTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-family, 'Inter', sans-serif);
    font-size: 13px;
    margin: 0;
}

#ordersTable thead th {
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.015);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}

body.dark-mode #ordersTable thead th {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

#ordersTable tbody tr.order-table-row {
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.035);
}

body.dark-mode #ordersTable tbody tr.order-table-row {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

#ordersTable tbody tr.order-table-row:last-child {
    border-bottom: none;
}

#ordersTable tbody tr.order-table-row:hover td.td-desktop {
    background: rgba(0, 0, 0, 0.02);
}

body.dark-mode #ordersTable tbody tr.order-table-row:hover td.td-desktop {
    background: rgba(255, 255, 255, 0.04);
}

/* Pending row soft cream highlight */
#ordersTable tbody tr.status-pending td.td-desktop {
    background: #fffcf2;
}

body.dark-mode #ordersTable tbody tr.status-pending td.td-desktop {
    background: rgba(245, 158, 11, 0.06);
}

#ordersTable tbody tr.status-pending:hover td.td-desktop {
    background: #fef8e3;
}

body.dark-mode #ordersTable tbody tr.status-pending:hover td.td-desktop {
    background: rgba(245, 158, 11, 0.09);
}

#ordersTable tbody tr.status-pending td.col-check {
    border-left: 3px solid #f59e0b;
}

.td-desktop {
    padding: 13px 16px;
    vertical-align: middle;
}

.td-mobile-card {
    display: none !important;
}

/* Order ID Badge */
.order-id-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    font-weight: 700;
    font-size: 12.5px;
    font-family: monospace, sans-serif;
    letter-spacing: -0.2px;
}

/* Customer Cell */
.order-customer-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-customer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.order-customer-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.order-customer-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.order-customer-phone-link {
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s;
}

.order-customer-phone-link:hover {
    color: #25d366;
}

/* Store Badge */
.order-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Total Amount Table */
.order-total-amount-table {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    letter-spacing: -0.2px;
}

/* Date Table */
.order-date-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.order-date-date {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-main);
}

.order-date-hour {
    font-size: 11px;
    color: var(--text-muted);
}

/* Mobile Expandable Card Layout (Under 768px) */
@media (max-width: 768px) {
    #ordersTableContainer,
    .table-container.orders-table-container,
    #view-orders .table-container,
    #view-orders .orders-table-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 16px 0 !important;
        overflow: visible !important;
    }

    #ordersTable {
        display: block !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ordersTable thead {
        display: none !important;
    }

    #ordersTable tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    #ordersTable tbody tr,
    #ordersTable tbody tr.order-table-row {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        cursor: default !important;
    }

    #ordersTable tbody tr::after {
        display: none !important;
        content: none !important;
    }

    #ordersTable tbody td.td-desktop {
        display: none !important;
    }

    #ordersTable tbody td.td-mobile-card {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Mobile Card */
    .order-mobile-card {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 18px;
        padding: 15px 16px;
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.03);
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        user-select: none;
        position: relative;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    .order-mobile-card:hover,
    .order-mobile-card.expanded {
        border-color: rgba(var(--primary-rgb), 0.35);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

    .order-mobile-card.status-pending {
        border-left: 4px solid #f59e0b;
    }
    .order-mobile-card.status-confirmed,
    .order-mobile-card.status-preparing {
        border-left: 4px solid #3b82f6;
    }
    .order-mobile-card.status-shipped {
        border-left: 4px solid #8b5cf6;
    }
    .order-mobile-card.status-delivered {
        border-left: 4px solid #10b981;
    }
    .order-mobile-card.status-cancelled {
        border-left: 4px solid #ef4444;
    }

    /* Card Summary Header */
    .order-mobile-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        gap: 10px;
    }

    .order-mobile-id-group {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .order-mobile-time {
        font-size: 11.5px;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .order-mobile-header-badges {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-order-expand-chevron {
        width: 28px;
        height: 28px;
        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;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.25s ease;
    }

    .order-mobile-card.expanded .btn-order-expand-chevron {
        background: var(--primary);
        color: #ffffff;
        border-color: var(--primary);
    }

    .order-mobile-card.expanded .btn-order-expand-chevron i {
        transform: rotate(180deg);
    }

    .order-mobile-header-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .order-mobile-customer-wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    .order-mobile-customer-meta {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .order-mobile-customer-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .order-mobile-type-chip .order-type-badge {
        padding: 2px 7px;
        font-size: 11px;
    }

    .order-mobile-total-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
    }

    .order-mobile-total-label {
        font-size: 10.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
    }

    .order-mobile-total-amount {
        font-size: 16px;
        font-weight: 800;
        color: var(--text-main);
        letter-spacing: -0.3px;
    }

    /* Expandable Details Body */
    .order-mobile-card-details {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease;
    }

    .order-mobile-card.expanded .order-mobile-card-details {
        max-height: 600px;
        opacity: 1;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px dashed var(--border-color);
    }

    .order-mobile-details-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 14px;
    }

    .order-mobile-detail-item {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .order-mobile-detail-item.full-width {
        grid-column: span 2;
    }

    .detail-label {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .detail-label i {
        color: var(--primary);
        font-size: 10px;
    }

    .detail-value {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-main);
    }

    .detail-value.address-value {
        font-weight: 500;
        color: var(--text-muted);
        font-size: 12px;
        line-height: 1.4;
    }

    .detail-value-with-action {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .btn-mobile-wa {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 6px;
        background: rgba(37, 211, 102, 0.12);
        color: #25d366;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.2s;
    }

    .btn-mobile-wa:hover {
        background: #25d366;
        color: #ffffff;
    }

    /* Mobile Action Buttons */
    .order-mobile-actions-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--border-color);
    }

    .btn-mobile-action {
        flex: 1;
        height: 38px;
        border-radius: 10px;
        border: 1px solid var(--border-color);
        background: var(--input-bg);
        color: var(--text-main);
        font-size: 12.5px;
        font-weight: 600;
        font-family: var(--font-family, 'Inter', sans-serif);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .btn-mobile-action.btn-mobile-confirm {
        flex: 1.3;
        background: rgba(16, 185, 129, 0.12);
        color: #10b981;
        border-color: rgba(16, 185, 129, 0.3);
        font-weight: 700;
    }

    .btn-mobile-action.btn-mobile-confirm:hover {
        background: #10b981;
        color: #ffffff;
    }

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

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

    .btn-mobile-action.btn-mobile-delete {
        flex: 0 0 38px;
        color: var(--danger);
    }

    .btn-mobile-action.btn-mobile-delete:hover {
        background: var(--danger);
        color: #ffffff;
        border-color: var(--danger);
    }
}

/* Order Status Badge */
/* Order Status Badge - Pastel Soft UI */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    white-space: nowrap;
    border: 1px solid transparent;
}

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

/* 1. Pendiente - Pastel Warm Apricot */
.order-status-badge.status-pending {
    background: #fffaf5;
    color: #9a5312;
    border-color: rgba(245, 180, 115, 0.45);
}
.order-status-badge.status-pending::before { background: #f59e0b; }

/* 2. Confirmado & Preparando - Pastel Warm Coral / Flame */
.order-status-badge.status-confirmed,
.order-status-badge.status-preparing {
    background: #fff7ed;
    color: #c2410c;
    border-color: rgba(249, 115, 22, 0.35);
}
.order-status-badge.status-confirmed::before,
.order-status-badge.status-preparing::before { background: #ea580c; }

/* 3. Listo / Despacho / Enviado - Pastel Sky Blue */
.order-status-badge.status-shipped {
    background: #f0f9ff;
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.35);
}
.order-status-badge.status-shipped::before { background: #0284c7; }

/* 4. Entregado - Pastel Mint Green */
.order-status-badge.status-delivered {
    background: #f0fdf4;
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.35);
}
.order-status-badge.status-delivered::before { background: #16a34a; }

/* 5. Cancelado - Pastel Slate */
.order-status-badge.status-cancelled {
    background: #f8fafc;
    color: #64748b;
    border-color: rgba(148, 163, 184, 0.3);
}
.order-status-badge.status-cancelled::before { background: #94a3b8; }

body.dark-mode .order-status-badge.status-pending { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); }
body.dark-mode .order-status-badge.status-confirmed,
body.dark-mode .order-status-badge.status-preparing { background: rgba(249, 115, 22, 0.15); color: #fdba74; border-color: rgba(249, 115, 22, 0.3); }
body.dark-mode .order-status-badge.status-shipped { background: rgba(14, 165, 233, 0.15); color: #7dd3fc; border-color: rgba(14, 165, 233, 0.3); }
body.dark-mode .order-status-badge.status-delivered { background: rgba(34, 197, 94, 0.15); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
body.dark-mode .order-status-badge.status-cancelled { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.2); }

/* ==========================================================
   REFINED PAYMENT METHOD BADGE (TABLE & CARDS)
   ========================================================== */
.order-payment-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    max-width: 220px;
}

.order-payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-family, 'Inter', sans-serif);
    letter-spacing: 0.2px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.order-payment-method-badge i {
    font-size: 11px;
}

/* Yape / Plin / Kuti (Purple / Magenta) */
.order-payment-method-badge.pm-yape {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border-color: rgba(139, 92, 246, 0.25);
}
body.dark-mode .order-payment-method-badge.pm-yape {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.4);
}

/* VendixPAY (Indigo / Electric Blue) */
.order-payment-method-badge.pm-vendix {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.25);
}
body.dark-mode .order-payment-method-badge.pm-vendix {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}

/* Pagar en Caja / Efectivo (Warm Amber) */
.order-payment-method-badge.pm-cash {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
}
body.dark-mode .order-payment-method-badge.pm-cash {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}

/* Transferencia (Teal / Emerald) */
.order-payment-method-badge.pm-transfer {
    background: rgba(13, 148, 136, 0.12);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.25);
}
body.dark-mode .order-payment-method-badge.pm-transfer {
    background: rgba(13, 148, 136, 0.2);
    color: #2dd4bf;
    border-color: rgba(13, 148, 136, 0.4);
}

/* Tarjeta / POS (Cyan / Sky) */
.order-payment-method-badge.pm-card {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    border-color: rgba(14, 165, 233, 0.25);
}
body.dark-mode .order-payment-method-badge.pm-card {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
    border-color: rgba(14, 165, 233, 0.4);
}

/* Default / Otros (Neutral) */
.order-payment-method-badge.pm-default {
    background: var(--input-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

/* Payment Status Pill (Pagado / Por cobrar) */
.order-payment-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-family, 'Inter', sans-serif);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.order-payment-status-pill.status-paid {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
body.dark-mode .order-payment-status-pill.status-paid {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.order-payment-status-pill.status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
body.dark-mode .order-payment-status-pill.status-pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* 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 */
.order-actions-group {
    position: relative;
    z-index: 20;
}

#ordersTable tbody tr:hover {
    position: relative;
    z-index: 30;
}

#ordersTable tbody tr:hover td.col-actions {
    position: relative;
    z-index: 35;
}

.btn-order-action {
    position: relative;
}

.btn-order-action:hover {
    z-index: 40;
}

.btn-order-action[title]::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0f172a;
    color: #ffffff;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    letter-spacing: 0.2px;
}

.btn-order-action[title]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 5px 0 5px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.btn-order-action[title]:hover::after,
.btn-order-action[title]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* For top 3 rows: flip tooltip downwards so it never collides with or hides under the sticky header */
#ordersTable tbody tr:nth-child(-n+3) .btn-order-action[title]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

#ordersTable tbody tr:nth-child(-n+3) .btn-order-action[title]::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-width: 0 5px 6px 5px;
    border-color: transparent transparent #0f172a transparent;
}

/* Last action button: right-align tooltip to prevent clipping off the right edge */
.order-actions-group .btn-order-action:last-child[title]::after {
    left: auto;
    right: 0;
    transform: none;
}
.order-actions-group .btn-order-action:last-child[title]::before {
    left: auto;
    right: 12px;
    transform: none;
}

body.dark-mode .btn-order-action[title]::after {
    background: #18181b;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
body.dark-mode .btn-order-action[title]::before {
    border-top-color: #18181b;
}
body.dark-mode #ordersTable tbody tr:nth-child(-n+3) .btn-order-action[title]::before {
    border-bottom-color: #18181b;
}

/* 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;
    }
}

/* ==========================================================================
   MODERN APP ORDER CARDS & RESPONSIVE GRID (PC, TABLET, MOBILE)
   ========================================================================== */

.orders-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 16px;
    margin-top: 14px;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1400px) {
    .orders-app-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) and (min-width: 769px) {
    .orders-app-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .orders-app-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        margin-top: 10px;
    }
}

/* Modern App Order Card */
.order-app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.03);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.order-app-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
    border-color: rgba(var(--primary-rgb), 0.35);
}

/* Status Indicator Accent Border (Left Border) */
.order-app-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4.5px;
    background: var(--border-color);
    transition: background 0.2s ease;
}

.order-app-card.status-pending::before {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}
.order-app-card.status-confirmed::before,
.order-app-card.status-preparing::before {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}
.order-app-card.status-shipped::before {
    background: linear-gradient(180deg, #8b5cf6, #7c3aed);
}
.order-app-card.status-delivered::before {
    background: linear-gradient(180deg, #10b981, #059669);
}
.order-app-card.status-cancelled::before {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

/* Card Header */
.order-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
}

.order-card-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.order-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.2px;
}

.order-time-text {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.order-store-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--input-bg);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

/* Status Pill with Pulsing Dot */
.order-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0.2px;
}

.order-pill-status .pulse-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    display: inline-block;
}

.order-pill-status.status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.order-pill-status.status-pending .pulse-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    animation: orderPulseDot 1.8s infinite;
}

.order-pill-status.status-confirmed,
.order-pill-status.status-preparing {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.order-pill-status.status-confirmed .pulse-dot,
.order-pill-status.status-preparing .pulse-dot {
    background: #3b82f6;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    animation: orderPulseDot 1.8s infinite;
}

.order-pill-status.status-shipped {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}
.order-pill-status.status-shipped .pulse-dot {
    background: #8b5cf6;
}

.order-pill-status.status-delivered {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.order-pill-status.status-delivered .pulse-dot {
    background: #10b981;
}

.order-pill-status.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.order-pill-status.status-cancelled .pulse-dot {
    background: #ef4444;
}

@keyframes orderPulseDot {
    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); }
}

/* Card Customer Row */
.order-card-customer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.order-customer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.order-customer-info {
    flex: 1;
    min-width: 0;
}

.order-customer-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-delivery-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.order-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
}

.order-method-badge.method-delivery {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}

.order-method-badge.method-pickup {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.order-address-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* WhatsApp Direct Button */
.btn-wa-direct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.25);
    text-decoration: none;
    font-size: 17px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.btn-wa-direct:hover {
    background: #25d366;
    color: #ffffff;
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Card Financial Details Strip */
.order-card-financials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--input-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.order-payment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.order-payment-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.order-payment-status {
    font-size: 10.5px;
    font-weight: 600;
}
.order-payment-status.paid {
    color: #10b981;
}
.order-payment-status.unpaid {
    color: #f59e0b;
}

.order-total-amount {
    font-size: 17px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* Card Bottom Actions Bar */
.order-card-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.order-primary-action-btn {
    flex: 1;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

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

.order-primary-action-btn.btn-to-kitchen {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
}
.order-primary-action-btn.btn-to-kitchen:hover {
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.order-primary-action-btn.btn-to-dispatch {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
}
.order-primary-action-btn.btn-to-dispatch:hover {
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
}

.order-primary-action-btn.btn-to-delivered {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #ffffff;
}
.order-primary-action-btn.btn-to-delivered:hover {
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}

/* Secondary Action Buttons (Detalles, Edit, Delete) */
.order-secondary-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.order-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.order-icon-btn:hover {
    background: var(--input-bg);
    color: var(--text-main);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateY(-1px);
}

.order-icon-btn.btn-view-order {
    padding: 0 10px;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
}
.order-icon-btn.btn-view-order:hover {
    color: var(--primary);
    border-color: var(--primary);
}

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

/* Dark mode adjustments for order status pills */
body.dark-mode .order-pill-status.status-pending {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}
body.dark-mode .order-pill-status.status-confirmed,
body.dark-mode .order-pill-status.status-preparing {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}
body.dark-mode .order-pill-status.status-shipped {
    background: rgba(139, 92, 246, 0.18);
    color: #a78bfa;
}
body.dark-mode .order-pill-status.status-delivered {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
}
body.dark-mode .order-pill-status.status-cancelled {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
}

/* Voucher Alert Banner - High Contrast in Light & Dark Mode */
.order-voucher-banner.empty {
    padding: 14px 18px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    transition: all 0.2s ease;
}

body.light-mode .order-voucher-banner.empty {
    background: #fffbeb;
    border: 1.5px dashed #d97706;
}

body.light-mode .order-voucher-banner.empty .voucher-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(217, 119, 6, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    font-size: 16px;
    flex-shrink: 0;
}

body.light-mode .order-voucher-banner.empty .voucher-banner-title {
    font-size: 13px;
    display: block;
    color: #92400e;
    font-weight: 800;
}

body.light-mode .order-voucher-banner.empty .voucher-banner-sub {
    color: #78350f;
    font-size: 11.5px;
    font-weight: 600;
}

body.dark-mode .order-voucher-banner.empty {
    background: rgba(245, 158, 11, 0.12);
    border: 1.5px dashed rgba(245, 158, 11, 0.45);
}

body.dark-mode .order-voucher-banner.empty .voucher-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 16px;
    flex-shrink: 0;
}

body.dark-mode .order-voucher-banner.empty .voucher-banner-title {
    font-size: 13px;
    display: block;
    color: #fef08a;
    font-weight: 800;
}

body.dark-mode .order-voucher-banner.empty .voucher-banner-sub {
    color: #fcd34d;
    font-size: 11.5px;
    font-weight: 600;
}

.voucher-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.voucher-banner-wa-btn {
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    padding: 7px 14px !important;
    border-radius: 9px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3) !important;
    border: none !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.voucher-banner-wa-btn:hover {
    background: #15803d !important;
    transform: translateY(-1px);
}

/* Edit Order Modal - Modern Redesign */
.edit-order-modal .modal {
    max-width: 840px;
    width: 95%;
    max-height: 92vh;
    border-radius: 18px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

body.light-mode .edit-order-modal .modal {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

body.dark-mode .edit-order-modal .modal {
    background: #08080a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}

.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;
}

body.light-mode .edit-order-modal .modal-header {
    background: #ffffff;
    border-bottom-color: #e2e8f0;
}

body.dark-mode .edit-order-modal .modal-header {
    background: #000000;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.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);
}

/* Scrollable Form Body */
.edit-order-scrollable-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 13px;
    background: var(--card-bg);
    scrollbar-width: thin;
}

body.light-mode .edit-order-scrollable-body {
    background: #ffffff;
}

body.dark-mode .edit-order-scrollable-body {
    background: #08080a;
}

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

body.light-mode .edit-order-section {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

body.dark-mode .edit-order-section {
    background: #0d0d10;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.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: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

body.light-mode .edit-order-section-title {
    color: #1e293b;
}

.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: 6px;
}

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

body.light-mode .edit-form-group label {
    color: #334155;
    font-weight: 700;
}

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

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

.edit-input-wrapper i.input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8b5cf6;
    font-size: 13px;
    pointer-events: none;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: color 0.2s ease;
}

body.light-mode .edit-input-wrapper i.input-icon {
    color: #6366f1;
}

body.dark-mode .edit-input-wrapper i.input-icon {
    color: #a78bfa;
}

.edit-input-wrapper input,
.edit-form-group input,
.edit-form-group textarea {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background-color: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.edit-form-group textarea {
    height: auto;
    min-height: 70px;
    padding: 10px 14px;
}

.edit-input-wrapper input.has-icon {
    padding-left: 42px !important;
}

body.light-mode .edit-input-wrapper input,
body.light-mode .edit-form-group input,
body.light-mode .edit-form-group textarea {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-mode .edit-input-wrapper input:focus,
body.light-mode .edit-form-group input:focus,
body.light-mode .edit-form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}

body.dark-mode .edit-input-wrapper input,
body.dark-mode .edit-form-group input,
body.dark-mode .edit-form-group textarea {
    background-color: #141416;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

body.dark-mode .edit-input-wrapper input:focus,
body.dark-mode .edit-form-group input:focus,
body.dark-mode .edit-form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}

/* Modern App Dropdown Selects */
.edit-input-wrapper select,
.edit-form-group select {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    line-height: normal !important;
    padding: 0 38px 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid var(--border-color) !important;
    background-color: var(--input-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 14px) center !important;
    background-size: 14px 14px !important;
    color: var(--text-main) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.edit-input-wrapper select.has-icon {
    padding-left: 42px !important;
}

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

body.light-mode .edit-input-wrapper select,
body.light-mode .edit-form-group select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 14px) center !important;
    background-size: 14px 14px !important;
}

body.dark-mode .edit-input-wrapper select,
body.dark-mode .edit-form-group select {
    background-color: #141416 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 14px) center !important;
    background-size: 14px 14px !important;
}

.edit-input-wrapper select option,
.edit-form-group select option {
    background-color: #141416 !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

body.light-mode .edit-input-wrapper select option,
body.light-mode .edit-form-group select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* Order Items Table & Rows */
.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: 12px;
    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;
}

body.light-mode .edit-order-item-row {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

body.light-mode .edit-order-item-row:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}

body.dark-mode .edit-order-item-row {
    background: #111114;
    border: 1.5px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .edit-order-item-row:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

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

/* Product Item Name Input - High Contrast */
.edit-item-name {
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

body.light-mode .edit-item-name {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

body.light-mode .edit-item-name:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}

body.dark-mode .edit-item-name {
    background: #141416;
    border-color: rgba(255, 255, 255, 0.14);
    color: #f8fafc;
}

body.dark-mode .edit-item-name:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}

.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: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

body.light-mode .product-search-dropdown {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

body.dark-mode .product-search-dropdown {
    background: #111114;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.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: 1.5px solid var(--border-color);
    border-radius: 9px;
    overflow: hidden;
    background: var(--input-bg);
}

body.light-mode .edit-qty-group {
    background: #f8fafc;
    border-color: #cbd5e1;
}

body.dark-mode .edit-qty-group {
    background: #141416;
    border-color: rgba(255, 255, 255, 0.12);
}

.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: 700;
    font-size: 13px;
    background: transparent !important;
    color: var(--text-main);
    padding: 0 !important;
    box-shadow: none !important;
}

body.light-mode .edit-qty-input {
    color: #0f172a;
}

body.dark-mode .edit-qty-input {
    color: #f8fafc;
}

.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;
}

/* ==========================================================
   FIXED / STICKY BOTTOM FINANCIAL SUMMARY & ACTIONS DOCK
   ========================================================== */
.edit-order-sticky-dock {
    flex-shrink: 0;
    margin-top: auto;
    background: var(--card-bg);
    border-top: 1.5px solid var(--border-color);
    padding: 14px 24px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 30;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.light-mode .edit-order-sticky-dock {
    background: rgba(255, 255, 255, 0.98);
    border-top-color: #e2e8f0;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
}

body.dark-mode .edit-order-sticky-dock {
    background: rgba(0, 0, 0, 0.98);
    border-top-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.65);
}

.edit-order-totals-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr 1.4fr;
    gap: 10px;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
}

body.light-mode .edit-order-totals-bar {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.dark-mode .edit-order-totals-bar {
    background: #0d0d10;
    border-color: rgba(255, 255, 255, 0.08);
}

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

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

body.light-mode .totals-item-label {
    color: #64748b;
}

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

body.light-mode .totals-item-val {
    color: #0f172a;
}

.totals-discount-wrap {
    max-width: 105px;
}

.totals-discount-input {
    padding: 5px 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 30px !important;
    border-radius: 8px !important;
    text-align: center;
}

body.light-mode .totals-discount-input {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.dark-mode .totals-discount-input {
    background: #141416 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

.totals-item-grand {
    background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 85%, #000) 100%);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 10px;
    text-align: right;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

.totals-item-grand .totals-item-label {
    color: rgba(255,255,255,0.9);
    font-size: 10.5px;
}

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

.edit-order-dock-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.btn-dock-cancel {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.light-mode .btn-dock-cancel {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #475569;
}

body.dark-mode .btn-dock-cancel {
    border-color: rgba(255, 255, 255, 0.12);
    background: #141416;
    color: #f8fafc;
}

body.light-mode .btn-dock-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.btn-dock-save {
    padding: 9px 24px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer;
}

@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-sticky-dock {
        padding: 10px 14px;
        gap: 10px;
    }

    .edit-order-totals-bar {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 10px;
    }
    
    .totals-item-grand {
        grid-column: 1 / -1;
    }

    .edit-order-dock-actions {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 8px;
    }

    .btn-dock-cancel,
    .btn-dock-save {
        width: 100%;
        justify-content: center;
        padding: 10px 12px !important;
    }
}

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

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

.benefits-app-container table.data-table,
.benefits-app-container table.data-table th,
.benefits-app-container table.data-table td,
.benefits-app-container .orders-filter-input,
.benefits-app-container .orders-filter-group label,
.benefits-app-container .form-control,
.benefits-app-container input,
.benefits-app-container select,
.benefits-app-container .btn,
.benefits-app-container button,
.benefits-app-container span,
.benefits-app-container p {
    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 - Modernized) */
.benefits-tabs-scroller {
    width: 100%;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 2px;
}

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

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

.benefits-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px !important;
    font-family: inherit;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.22s 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: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    transition: all 0.22s ease;
}

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

.benefits-tab.active {
    background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .benefits-tab.active {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

.benefits-tab.active .tab-icon-dot {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: none;
}

.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;
    }
}

/* ==========================================================
   BENEFITS & APP PILL BADGE SYSTEM (DARK & LIGHT MODE)
   ========================================================== */

/* Universal Surface Box for sub-sections */
.benefit-surface-box {
    background: #111116;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 14px;
    transition: all 0.2s ease;
}
.benefit-surface-box:hover {
    border-color: rgba(255, 255, 255, 0.14);
}
body.light-mode .benefit-surface-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
body.light-mode .benefit-surface-box:hover {
    border-color: #cbd5e1;
}

/* Base Badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 9999px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.2px;
}

.badge-success {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.28) !important;
}
.badge-danger {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
}
.badge-warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
}
.badge-info {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.28) !important;
}
.badge-secondary {
    background: rgba(148, 163, 184, 0.16) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
}

body.light-mode .badge-success {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
}
body.light-mode .badge-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
}
body.light-mode .badge-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}
body.light-mode .badge-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
}
body.light-mode .badge-secondary {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* Modern App Pill Badge System */
.app-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 9999px;
    white-space: nowrap;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}
.app-pill-badge i {
    font-size: 11px;
}
.app-pill-badge .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Pill Badge Color Variants in Dark Mode (Default / AMOLED) */
.app-pill-badge.pill-success {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.32);
}
.app-pill-badge.pill-success .pill-dot {
    background: #34d399;
    box-shadow: 0 0 6px #34d399;
}

.app-pill-badge.pill-warning {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.32);
}
.app-pill-badge.pill-warning .pill-dot {
    background: #fbbf24;
    box-shadow: 0 0 6px #fbbf24;
}

.app-pill-badge.pill-danger,
.app-pill-badge.pill-rose {
    background: rgba(244, 63, 94, 0.16);
    color: #fb7185;
    border: 1px solid rgba(244, 63, 94, 0.32);
}
.app-pill-badge.pill-danger .pill-dot,
.app-pill-badge.pill-rose .pill-dot {
    background: #fb7185;
    box-shadow: 0 0 6px #fb7185;
}

.app-pill-badge.pill-purple {
    background: rgba(168, 85, 247, 0.16);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.32);
}
.app-pill-badge.pill-purple .pill-dot {
    background: #c084fc;
    box-shadow: 0 0 6px #c084fc;
}

.app-pill-badge.pill-amber {
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.32);
}
.app-pill-badge.pill-amber .pill-dot {
    background: #fcd34d;
    box-shadow: 0 0 6px #fcd34d;
}

.app-pill-badge.pill-blue {
    background: rgba(59, 130, 246, 0.16);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.32);
}
.app-pill-badge.pill-blue .pill-dot {
    background: #60a5fa;
    box-shadow: 0 0 6px #60a5fa;
}

.app-pill-badge.pill-emerald {
    background: rgba(16, 185, 129, 0.16);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.32);
}
.app-pill-badge.pill-emerald .pill-dot {
    background: #34d399;
    box-shadow: 0 0 6px #34d399;
}

.app-pill-badge.pill-muted {
    background: rgba(255, 255, 255, 0.08);
    color: #d4d4d8;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.app-pill-badge.pill-muted .pill-dot {
    background: #a1a1aa;
}

/* Light Mode Overrides for App Pill Badges */
body.light-mode .app-pill-badge.pill-success {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}
body.light-mode .app-pill-badge.pill-warning {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
body.light-mode .app-pill-badge.pill-danger,
body.light-mode .app-pill-badge.pill-rose {
    background: #fff1f2;
    color: #e11d48;
    border-color: #fecdd3;
}
body.light-mode .app-pill-badge.pill-purple {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ddd6fe;
}
body.light-mode .app-pill-badge.pill-amber {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
body.light-mode .app-pill-badge.pill-blue {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
body.light-mode .app-pill-badge.pill-emerald {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}
body.light-mode .app-pill-badge.pill-muted {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

/* Code Chips inside tables */
.app-code-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: #f43f5e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
body.light-mode .app-code-chip {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #e11d48;
}

/* Action button for birthday grant */
.btn-bday-grant {
    padding: 5px 12px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    border: 1px solid #f43f5e !important;
    color: #fb7185 !important;
    background: rgba(244, 63, 94, 0.12) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}
.btn-bday-grant:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.35) !important;
    transform: translateY(-1px);
}
body.light-mode .btn-bday-grant {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border-color: #fecdd3 !important;
}

/* Pulse glow animation for active items */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(244, 63, 94, 0.12);
    }
}
.animate-pulse-glow {
    animation: pulseGlow 2s infinite ease-in-out;
}

/* Dark mode polish for Beneficios cards and tables */
body.dark-mode .benefits-app-container .settings-card,
body.dark-mode #view-benefits .settings-card {
    background: #09090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode .benefits-app-container .table-container,
body.dark-mode #view-benefits .table-container {
    background: #09090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .benefits-app-container .data-table th,
body.dark-mode #view-benefits .data-table th {
    background: #111116 !important;
    color: #a1a1aa !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .benefits-app-container .data-table td,
body.dark-mode #view-benefits .data-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .benefits-app-container .data-table tbody tr:hover,
body.dark-mode #view-benefits .data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}
body.dark-mode #view-benefits .stat-card {
    background: #09090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
body.dark-mode #view-benefits .stat-card:hover {
    border-color: rgba(255, 255, 255, 0.16) !important;
}
body.dark-mode #view-benefits .stat-info h3 {
    color: #a1a1aa !important;
}
body.dark-mode #view-benefits .stat-info p {
    color: #ffffff !important;
}

/* Responsive tables in Beneficios: Clean horizontal scroll on mobile */
.benefits-app-container .table-container,
#view-benefits .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    #view-benefits .data-table thead,
    #rouletteSlicesTable thead,
    #bdayUpcomingTable thead,
    #bdayClaimsTable thead,
    #pizzaPuzzleRewardsTable thead,
    #pizzaPuzzlePlaysTable thead {
        display: table-header-group !important;
    }
    #view-benefits .data-table tbody tr,
    #rouletteSlicesTable tbody tr,
    #bdayUpcomingTable tbody tr,
    #bdayClaimsTable tbody tr,
    #pizzaPuzzleRewardsTable tbody tr,
    #pizzaPuzzlePlaysTable tbody tr {
        display: table-row !important;
        padding: 0 !important;
        border-bottom: 1px solid var(--border-color) !important;
        background: transparent !important;
        cursor: default !important;
    }
    #view-benefits .data-table tbody tr::after,
    #rouletteSlicesTable tbody tr::after,
    #bdayUpcomingTable tbody tr::after,
    #bdayClaimsTable tbody tr::after,
    #pizzaPuzzleRewardsTable tbody tr::after,
    #pizzaPuzzlePlaysTable tbody tr::after {
        display: none !important;
    }
    #view-benefits .data-table tbody td,
    #rouletteSlicesTable tbody td,
    #bdayUpcomingTable tbody td,
    #bdayClaimsTable tbody td,
    #pizzaPuzzleRewardsTable tbody td,
    #pizzaPuzzlePlaysTable tbody td {
        display: table-cell !important;
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }
    #view-benefits .data-table tbody td::before,
    #rouletteSlicesTable tbody td::before,
    #bdayUpcomingTable tbody td::before,
    #bdayClaimsTable tbody td::before,
    #pizzaPuzzleRewardsTable tbody td::before,
    #pizzaPuzzlePlaysTable tbody td::before {
        display: none !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;
}

/* ==========================================================
   MODERN REDESIGNED CUSTOMERS TABLE & BULK ACTIONS
   ========================================================== */

/* Bulk Actions Floating/Docked Bar */
.customers-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 20px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary-rgb), 0.04) 100%);
    border: 1.5px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    animation: customersSlideDown 0.22s ease-out;
    flex-wrap: wrap;
}

@keyframes customersSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.customers-bulk-bar .bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.customers-bulk-bar .bulk-selection-count {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.customers-bulk-bar .bulk-selection-count i {
    color: var(--primary);
    font-size: 16px;
}

.customers-bulk-bar .bulk-quick-selects {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customers-bulk-bar .btn-bulk-sub {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.customers-bulk-bar .btn-bulk-sub:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}

.customers-bulk-bar .bulk-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.customers-bulk-bar .btn-bulk-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.customers-bulk-bar .btn-bulk-export {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
}

.customers-bulk-bar .btn-bulk-export:hover {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

.customers-bulk-bar .btn-bulk-delete {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.customers-bulk-bar .btn-bulk-delete:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
    transform: translateY(-1px);
}

/* Modern Card Container */
.customers-table-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    margin-bottom: 24px;
}

/* Redesigned Table */
.customers-table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.customers-table-modern thead th {
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    vertical-align: middle;
}

.customers-table-modern tbody tr.customer-row {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
}

.customers-table-modern tbody tr.customer-row:last-child {
    border-bottom: none;
}

.customers-table-modern tbody tr.customer-row:hover {
    background: rgba(var(--primary-rgb), 0.028);
}

.customers-table-modern tbody tr.customer-row.is-selected {
    background: rgba(var(--primary-rgb), 0.065) !important;
    box-shadow: inset 4px 0 0 var(--primary);
}

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

.customers-table-modern tbody tr.customer-row:last-child td {
    border-bottom: none;
}

/* Custom Table Components */
.customer-id-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.18);
    border-radius: 6px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
}

.customer-meta-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.customer-meta-name {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-meta-email {
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s ease;
}

.customer-meta-email:hover {
    color: var(--primary);
}

.customer-phone-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-color);
    font-weight: 500;
}

.customer-wa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease;
    border: 1px solid rgba(37, 211, 102, 0.25);
}

.customer-wa-btn:hover {
    transform: scale(1.12);
    background: #25d366;
    color: #ffffff;
    box-shadow: 0 3px 8px rgba(37, 211, 102, 0.35);
}

.customer-dni-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.customer-orders-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
}

.customer-orders-pill.active {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.customer-orders-pill.zero {
    background: var(--input-bg);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.customer-spent-amount {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    display: block;
}

.customer-date-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.customer-empty-val {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 13px;
}

/* Mobile cards sync selection */
.app-touch-card.is-selected {
    border-color: var(--primary) !important;
    background: rgba(var(--primary-rgb), 0.04) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.12) !important;
}

.app-touch-card-checkbox {
    margin-right: 8px;
}

/* ==========================================================
   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 App Cards */
.stores-app-container {
    padding-top: 6px;
}

/* Modern App Toolbar */
.stores-app-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.stores-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stores-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
}

.stores-kpi-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    display: inline-block;
}

.stores-kpi-title {
    color: var(--text-muted);
    font-weight: 500;
}

.stores-kpi-count {
    color: #059669;
    font-weight: 800;
    font-size: 14px;
}

.stores-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Segmented View Switcher (Cards / Table) */
.stores-view-switcher {
    display: inline-flex;
    background: var(--input-bg, #f1f5f9);
    border: 1px solid var(--border-color);
    padding: 3px;
    border-radius: 12px;
    gap: 2px;
}

.stores-view-switcher .switch-btn {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 9px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stores-view-switcher .switch-btn.active {
    background: var(--card-bg, #ffffff);
    color: var(--text-main);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

/* Nueva Tienda CTA Button */
.btn-new-store-app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-new-store-app:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    filter: brightness(1.05);
}

.btn-new-store-app:active {
    transform: translateY(1px);
}

/* Stores Cards Grid */
.stores-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

/* Modern Store Card */
.store-app-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    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(-3px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Main / Default Store Accent */
.store-app-card.is-main {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 6px 24px rgba(245, 158, 11, 0.1);
}

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

/* Card Header */
.store-app-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.store-card-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.store-app-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(79, 70, 229, 0.18));
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.store-app-card-avatar.avatar-main {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.24));
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.3);
}

.store-card-title-wrap {
    flex: 1;
    min-width: 0;
}

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

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

.store-badge-main {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.28);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.store-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
}

.store-id-pill {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--input-bg, #f1f5f9);
    padding: 2px 7px;
    border-radius: 6px;
}

/* Status Pill with Live Pulse */
.store-status-pill {
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.store-status-pill.status-active {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

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

.store-status-pill .status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.store-status-pill.status-active .status-pulse-dot {
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35);
}

.store-status-pill.status-inactive .status-pulse-dot {
    background: #ef4444;
}

/* Card Body Info Box */
.store-app-card-info-box {
    background: var(--input-bg, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-info-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
}

.store-info-icon {
    font-size: 14px;
    color: var(--primary);
    margin-top: 1px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.store-info-text {
    color: var(--text-main);
    line-height: 1.4;
    word-break: break-word;
}

.store-wa-link {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.15s;
}

.store-wa-link:hover {
    color: #047857;
    text-decoration: underline;
}

/* Card Action Buttons */
.store-app-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-store-card {
    height: 38px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    border: none;
    outline: none;
}

.btn-store-edit {
    flex: 1.2;
    background: rgba(99, 102, 241, 0.09);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.22);
}

.btn-store-edit:hover {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    transform: translateY(-1px);
}

.btn-store-link {
    flex: 1;
    background: rgba(59, 130, 246, 0.09);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.22);
}

.btn-store-link:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
}

.btn-store-is-main {
    flex: 1.1;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.28);
    opacity: 0.9;
    cursor: default;
}

.btn-store-set-main {
    flex: 1.1;
    background: var(--card-bg, #ffffff);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-store-set-main:hover {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.35);
    transform: translateY(-1px);
}

.btn-store-delete {
    width: 38px;
    flex: 0 0 38px;
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-store-delete:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
}



/* 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 FULL-WIDTH MAP WITH FLOATING UI
   ========================================================================== */

/* Outer View Container */
.logistics-view-wrapper {
    position: relative;
    width: 100%;
    transition: all 0.25s ease;
}

/* 1. Map Full Mode (Active when 'Mapa en Vivo' tab is active) */
.logistics-view-wrapper.map-full-mode {
    height: calc(100vh - 120px);
    min-height: 620px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    background: #111116;
}

/* 2. Table / Settings Mode (When Active Deliveries, Leaderboard or Evidence is selected) */
.logistics-view-wrapper:not(.map-full-mode) {
    background: var(--card-bg);
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    padding: 24px;
}

/* Tab contents in map-full-mode */
.logistics-view-wrapper.map-full-mode #tab-live-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* The Leaflet Map Canvas */
.logistics-map-canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
}

/* Toolbar in Map-Full-Mode vs Normal Mode */
.logistics-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.logistics-view-wrapper.map-full-mode {
    position: relative;
    height: calc(100vh - 90px);
    min-height: 560px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

/* Ocultar cabecera superior y navbar móvil en la vista de Logística (tanto PC como Móvil) */
body.logistics-view-active .page-header,
body:has(#view-logistics.active) .page-header,
body.logistics-view-active .admin-mobile-bottom-nav,
body:has(#view-logistics.active) .admin-mobile-bottom-nav {
    display: none !important;
}

@media (min-width: 769px) {
    body.logistics-view-active .content-area,
    body:has(#view-logistics.active) .content-area {
        padding: 0 !important;
        margin: 0 !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    body.logistics-view-active #view-logistics,
    body:has(#view-logistics.active) #view-logistics {
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
    }
    body.logistics-view-active .logistics-view-wrapper.map-full-mode,
    body:has(#view-logistics.active) .logistics-view-wrapper.map-full-mode {
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.logistics-view-active #view-logistics:has(.logistics-view-wrapper:not(.map-full-mode)),
    body:has(#view-logistics.active) #view-logistics:has(.logistics-view-wrapper:not(.map-full-mode)) {
        overflow-y: auto !important;
        height: 100vh !important;
        padding: 24px !important;
    }
    body.logistics-view-active .logistics-view-wrapper:not(.map-full-mode),
    body:has(#view-logistics.active) .logistics-view-wrapper:not(.map-full-mode) {
        border-radius: 18px !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow) !important;
        min-height: auto !important;
        height: auto !important;
    }
}

/* Modern App Floating Command Header */
.logistics-view-wrapper.map-full-mode .logistics-toolbar.app-style-toolbar {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 16px;
    padding: 6px 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

body:not(.light-mode) .logistics-view-wrapper.map-full-mode .logistics-toolbar.app-style-toolbar {
    background: rgba(9, 9, 11, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
}

.logistics-view-wrapper:not(.map-full-mode) .logistics-toolbar {
    position: static;
    margin-bottom: 20px;
    background: transparent;
    padding: 0;
    box-shadow: none;
    border: none;
}

/* Toolbar Left: Search & Live Quick-KPI Pill */
.logistics-toolbar-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.logistics-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 290px;
}

.btn-logistics-menu-mobile {
    display: none;
}

.logistics-search-wrapper.app-search-pill {
    position: relative;
    max-width: 290px;
    width: 100%;
    min-width: 160px;
    height: 38px;
    display: flex;
    align-items: center;
}

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

.logistics-search-input {
    width: 100%;
    height: 38px;
    padding-left: 36px;
    padding-right: 32px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-main);
    font-size: 12.5px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

body:not(.light-mode) .logistics-search-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

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

body:not(.light-mode) .logistics-search-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

.btn-clear-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.btn-clear-search:hover {
    color: var(--danger);
}

/* Integrated Live Status Pill */
.logistics-live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.035);
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    flex-wrap: nowrap;
    white-space: nowrap;
}

body:not(.light-mode) .logistics-live-status-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.live-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

body:not(.light-mode) .live-pulse-badge {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

.logistics-pulse-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: livePulseGlow 1.8s infinite;
}

@keyframes livePulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

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

.live-stat-chip i {
    color: var(--primary);
    font-size: 11px;
}

.live-stat-chip strong {
    color: var(--text-main);
    font-weight: 700;
}

.logistics-sync-pill-btn {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.logistics-sync-pill-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.logistics-sync-pill-btn i.rotating {
    animation: spinRotate 0.8s linear infinite;
}

@keyframes spinRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Toolbar Right: Date Filter & App Tabs */
.logistics-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.logistics-date-picker-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.logistics-date-picker-wrap i {
    position: absolute;
    left: 12px;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
}

.logistics-date-input {
    width: 135px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-main);
    padding: 0 12px 0 32px;
    font-size: 12px;
    outline: none;
    transition: all 0.2s ease;
}

body:not(.light-mode) .logistics-date-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

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

/* Modern App Segmented Tabs Switcher */
.app-segmented-tabs {
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

body:not(.light-mode) .app-segmented-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

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

.app-segmented-tabs .switch-btn:hover {
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03);
}

body:not(.light-mode) .app-segmented-tabs .switch-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.app-segmented-tabs .switch-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.35);
}

/* Toolbar Action Buttons (New Tab & Zen Mode) */
.logistics-btn-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.logistics-btn-tab:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
    transform: translateY(-1px);
}

.logistics-btn-zen {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body:not(.light-mode) .logistics-btn-zen {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.logistics-btn-zen:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.08);
}

/* Zen Mode (Clean Unobstructed Full Map) */
.logistics-view-wrapper.zen-mode .logistics-toolbar.app-style-toolbar {
    transform: translateY(-90px);
    opacity: 0;
    pointer-events: none;
}

.logistics-view-wrapper.zen-mode .logistics-drivers-panel.app-sheet {
    transform: translateX(calc(100% + 30px));
    opacity: 0;
    pointer-events: none;
}

.logistics-view-wrapper.zen-mode .btn-floating-drivers-toggle {
    display: none !important;
}

.btn-restore-zen {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1002;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(9, 9, 11, 0.94);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInSlideDown 0.25s ease;
}

.btn-restore-zen:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.04);
}

/* Canvas Leaflet Map */
.logistics-map-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Hide default square Leaflet controls since we provide modern FABs */
.logistics-view-wrapper.map-full-mode .leaflet-control-zoom {
    display: none !important;
}

/* No GPS Alert Toast */
.live-map-no-gps-toast {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(239, 68, 68, 0.94);
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12px;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
    z-index: 999;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fadeInSlideDown 0.3s ease;
    max-width: 90%;
}

.live-map-no-gps-toast .no-gps-icon {
    font-size: 15px;
}

.live-map-no-gps-toast .no-gps-info {
    display: flex;
    flex-direction: column;
}

.live-map-no-gps-toast .no-gps-info strong {
    font-weight: 700;
}

.live-map-no-gps-toast .no-gps-info span {
    font-size: 11px;
    opacity: 0.92;
}

@keyframes fadeInSlideDown {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Floating Map Action Buttons (FABs) */
.logistics-map-fabs {
    position: absolute;
    bottom: 24px;
    left: 18px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.map-fab-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

body:not(.light-mode) .map-fab-btn {
    background: rgba(24, 24, 34, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}

.map-fab-btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.35);
}

.map-fab-btn .fab-tooltip {
    position: absolute;
    left: 48px;
    background: rgba(18, 18, 20, 0.96);
    color: #fff;
    padding: 4px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-6px);
    transition: all 0.2s ease;
}

.map-fab-btn:hover .fab-tooltip {
    opacity: 1;
    transform: translateX(0);
}

.map-fab-zoom-group {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body:not(.light-mode) .map-fab-zoom-group {
    background: rgba(18, 18, 20, 0.94);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}

.map-fab-zoom-group .map-fab-btn.zoom-btn {
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    height: 36px;
}

.map-fab-zoom-group .map-fab-btn.zoom-btn:first-child {
    border-bottom: 1px solid var(--border-color);
}

.map-fab-dropdown-wrap {
    position: relative;
}

/* Map Layers Menu Popover */
.map-layers-menu {
    position: absolute;
    bottom: 0;
    left: 48px;
    min-width: 195px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1002;
    animation: fadeInScale 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.light-mode) .map-layers-menu {
    background: rgba(18, 18, 20, 0.96);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

.layers-menu-header {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 10px 4px;
}

.layer-option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
}

body:not(.light-mode) .layer-option-btn {
    color: #e2e8f0;
}

.layer-option-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.layer-option-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    font-weight: 700;
}

.layer-option-btn i {
    font-size: 13px;
    width: 18px;
    text-align: center;
    color: var(--primary);
}

/* Drivers Live List Panel (Floating Drawer on Desktop, Native Bottom Sheet on Mobile) */
.logistics-drivers-panel.app-sheet {
    position: absolute;
    top: 66px;
    right: 14px;
    width: 300px;
    height: auto;
    max-height: calc(100% - 84px);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

body:not(.light-mode) .logistics-drivers-panel.app-sheet {
    background: rgba(9, 9, 11, 0.95);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7);
}

.logistics-drivers-panel.collapsed {
    transform: translateX(calc(100% + 24px));
    pointer-events: none;
    opacity: 0;
}

/* Mobile Grab Handle */
.sheet-grab-bar {
    display: none;
    width: 100%;
    padding: 10px 0 6px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: pan-y;
}

.sheet-grab-pill {
    width: 44px;
    height: 5px;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.2s ease;
}

body:not(.light-mode) .sheet-grab-pill {
    background: rgba(255, 255, 255, 0.25);
}

.sheet-grab-bar:hover .sheet-grab-pill {
    background: var(--primary);
}

.logistics-drivers-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(var(--primary-rgb), 0.03);
}

.drivers-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-icon-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.drivers-header-left h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.drivers-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}

.drivers-subtitle strong {
    color: #16a34a;
}

.btn-toggle-drivers-panel {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    transition: all 0.2s ease;
}

.btn-toggle-drivers-panel:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: scale(1.05);
}

.btn-toggle-drivers-panel .mobile-icon {
    display: none;
}

/* Quick Filter Pills in Drawer */
.drivers-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
    scrollbar-width: none;
}

body:not(.light-mode) .drivers-filter-pills {
    background: rgba(255, 255, 255, 0.03);
}

.driver-filter-btn {
    border: none;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.driver-filter-btn:hover {
    color: var(--text-main);
    border-color: rgba(var(--primary-rgb), 0.5);
}

.driver-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.logistics-drivers-scroll-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}

.drivers-loading-state {
    text-align: center;
    padding: 35px 15px;
    color: var(--text-muted);
    font-size: 13px;
}

.drivers-loading-state i {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 10px;
    display: block;
}

/* Floating Reopen Button (visible when panel is collapsed) */
.btn-floating-drivers-toggle {
    position: absolute;
    top: 66px;
    right: 14px;
    z-index: 999;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    padding: 8px 16px;
    color: var(--text-main);
    font-size: 13px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body:not(.light-mode) .btn-floating-drivers-toggle {
    background: rgba(24, 24, 34, 0.94);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.btn-floating-drivers-toggle.visible {
    display: inline-flex;
    animation: fadeInSlideUp 0.3s ease;
}

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

.btn-floating-drivers-toggle:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.35);
}

.btn-floating-drivers-toggle .badge {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.btn-floating-drivers-toggle:hover .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Driver Live Card */
.driver-live-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    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.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.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 */
    .logistics-view-wrapper.map-full-mode {
        height: calc(100vh - 100px);
        min-height: 520px;
    }
    .logistics-view-wrapper.map-full-mode .logistics-toolbar.app-style-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .logistics-toolbar-main {
        width: 100%;
        justify-content: space-between;
    }
    .logistics-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .logistics-drivers-panel.app-sheet {
        width: 320px;
    }
}

@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: 12px 10px;
        border-radius: 15px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .app-touch-btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Logistics mobile - Native App Experience (Navbar & Header hidden) */
    body.logistics-view-active .content-area,
    body:has(#view-logistics.active) .content-area {
        padding: 0 !important;
        margin: 0 !important;
        height: 100dvh !important;
        height: 100vh !important;
        overflow: hidden !important;
    }

    body.logistics-view-active #view-logistics,
    body:has(#view-logistics.active) #view-logistics {
        height: 100dvh !important;
        height: 100vh !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .logistics-view-wrapper.map-full-mode {
        height: 100dvh !important;
        height: 100vh !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .logistics-view-wrapper.map-full-mode .logistics-toolbar.app-style-toolbar {
        top: 8px;
        left: 8px;
        right: 8px;
        padding: 8px 10px;
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .logistics-toolbar-main {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .logistics-search-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .btn-logistics-menu-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(0, 0, 0, 0.1);
        color: var(--text-main);
        font-size: 14px;
        cursor: pointer;
        flex-shrink: 0;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    body:not(.light-mode) .btn-logistics-menu-mobile {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.14);
        color: #fff;
    }

    .btn-logistics-menu-mobile:hover,
    .btn-logistics-menu-mobile:active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }

    .logistics-search-wrapper.app-search-pill {
        max-width: 100%;
        width: 100%;
        height: 36px;
        flex: 1;
    }

    .logistics-search-input {
        height: 36px;
        font-size: 12px;
    }

    .logistics-live-status-pill {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 10px;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .logistics-live-status-pill::-webkit-scrollbar {
        display: none;
    }

    .live-pulse-badge {
        padding: 2px 7px;
        font-size: 10.5px;
        flex-shrink: 0;
    }

    .live-stat-chip {
        font-size: 11px;
        gap: 4px;
        flex-shrink: 0;
    }

    .logistics-sync-pill-btn {
        padding: 2px 8px;
        font-size: 10.5px;
        flex-shrink: 0;
    }

    .logistics-sync-pill-btn .sync-time-text {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logistics-toolbar-right {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        flex-wrap: nowrap;
    }
    .logistics-toolbar-right::-webkit-scrollbar {
        display: none;
    }

    .logistics-date-picker-wrap {
        flex: 0 0 auto;
    }

    .logistics-date-input {
        width: 120px;
        height: 32px;
        padding-left: 28px;
        font-size: 11px;
    }

    .app-segmented-tabs {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        overflow: visible;
    }

    .app-segmented-tabs .switch-btn {
        padding: 5px 10px;
        font-size: 11px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .app-segmented-tabs .switch-btn span {
        display: inline !important;
    }

    .logistics-btn-tab {
        flex: 0 0 auto;
        padding: 5px 10px;
        font-size: 11px;
        height: 32px;
        white-space: nowrap;
    }

    .logistics-btn-zen {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    /* Floating map action buttons on mobile - placed near bottom */
    .logistics-map-fabs {
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
        left: 10px !important;
        gap: 6px;
        z-index: 999 !important;
    }

    .map-fab-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    /* Eliminate stuck hover tooltip on touch devices */
    .map-fab-btn .fab-tooltip {
        display: none !important;
    }

    .map-fab-zoom-group .map-fab-btn.zoom-btn {
        height: 32px;
    }

    .map-layers-menu {
        left: 42px;
        bottom: 0;
        min-width: 180px;
        z-index: 1002;
    }

    /* Transform drawer into Mobile Native Bottom Sheet */
    .logistics-drivers-panel.app-sheet {
        top: auto;
        bottom: 0 !important;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 22px 22px 0 0;
        height: 56px; /* Peek mode default */
        max-height: 85vh !important;
        border-bottom: none;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.22);
        z-index: 985;
        transition: height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease;
    }

    .logistics-drivers-panel.app-sheet.expanded {
        height: 65vh;
    }

    .logistics-drivers-panel.app-sheet.collapsed {
        transform: translateY(100%);
    }

    .sheet-grab-bar {
        display: flex;
    }

    .logistics-drivers-header {
        padding: 6px 14px 10px;
    }

    .btn-toggle-drivers-panel .desktop-icon {
        display: none;
    }

    .btn-toggle-drivers-panel .mobile-icon {
        display: inline-block;
    }

    /* Floating Reopen Button on mobile */
    .btn-floating-drivers-toggle {
        top: auto !important;
        bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        width: auto !important;
        height: 38px !important;
        max-height: 38px !important;
        max-width: 175px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        z-index: 999 !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28) !important;
    }
}

/* ============================================
   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: var(--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 & Modern Mobile Catalog */
@media (max-width: 768px) {
    .catalog-main-card {
        padding: 12px 10px !important;
        border-radius: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .catalog-toolbar-wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .catalog-toolbar-top {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .catalog-tabs-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px;
        box-sizing: border-box;
    }
    .catalog-tabs-container::-webkit-scrollbar {
        display: none;
    }
    .catalog-tabs-switcher {
        display: inline-flex;
        width: max-content;
        min-width: 100%;
        padding: 4px;
        gap: 4px;
        box-sizing: border-box;
    }
    .catalog-tabs-switcher .switch-btn {
        padding: 7px 12px;
        font-size: 12px;
        gap: 6px;
        white-space: nowrap;
        flex: 1 0 auto;
        text-align: center;
        justify-content: center;
    }
    .catalog-tabs-switcher .switch-btn i {
        font-size: 12px;
    }
    .catalog-toolbar-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    .catalog-count-pill {
        padding: 6px 10px;
        font-size: 11.5px;
        flex: 0 0 auto;
    }
    .btn-filter-modern {
        padding: 6px 12px;
        font-size: 12px;
        flex: 0 0 auto;
    }
    .catalog-toolbar-actions .btn-cta-modern {
        padding: 8px 14px;
        font-size: 12.5px;
        flex: 1 1 100%;
        width: 100%;
        justify-content: center;
        order: 3;
        box-sizing: border-box;
        margin-top: 2px;
    }
    .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; }
}

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

/* ============================== */
/* 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: var(--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: var(--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 Grid in standalone view */
#view-media .media-library-grid {
    border: none;
}
#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, #09090b);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
body.light-mode .consulta-search-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    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-surface, #111116);
    border: 1.5px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 14px;
    padding: 4px;
    transition: all 0.25s ease;
}

.consulta-search-input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 255, 71, 87), 0.18);
    background: #16161c;
}
body.light-mode .consulta-search-input-group {
    background: #f8fafc;
    border-color: #e2e8f0;
}
body.light-mode .consulta-search-input-group:focus-within {
    background: #ffffff;
}

.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-surface, #111116);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.2s;
}
body.light-mode .consulta-tip {
    background: #ffffff;
    border-color: #e2e8f0;
}

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

.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;
    }
}

/* ========================================================= */
/* PREMIUM APP EMPTY STATE (CENTERED & MODERN)               */
/* ========================================================= */
.table-empty-state-td {
    padding: 32px 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: center;
}

.table-empty-state-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 540px !important;
    margin: 40px auto !important;
    padding: 48px 36px 42px 36px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    animation: fadeInEmptyState 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInEmptyState {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ambient glow in background */
.table-empty-state-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.16) 0%, rgba(var(--primary-rgb), 0.02) 65%, transparent 100%);
    border-radius: 50%;
    pointer-events: none;
    filter: blur(14px);
}

/* Icon Wrapper and Floating Badge */
.table-empty-state-icon-wrapper {
    position: relative;
    margin-bottom: 22px;
    z-index: 1;
}

.table-empty-state-icon {
    width: 90px;
    height: 90px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--primary-rgb), 0.24);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: var(--primary);
    box-shadow: 0 12px 28px -6px rgba(var(--primary-rgb), 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.6);
    animation: emptyStateFloating 3.6s ease-in-out infinite;
    transition: all 0.3s ease;
}

body.dark-mode .table-empty-state-icon {
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0.08) 100%);
    border-color: rgba(var(--primary-rgb), 0.35);
}

@keyframes emptyStateFloating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.table-empty-state-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-main);
    letter-spacing: -0.3px;
    z-index: 1;
    font-family: var(--font-family, 'Inter', sans-serif);
}

.table-empty-state-desc {
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 420px;
    margin: 0 0 22px 0;
    z-index: 1;
    font-family: var(--font-family, 'Inter', sans-serif);
}

/* Actions in Empty State */
.table-empty-state-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 1;
}

.btn-empty-state-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-family, 'Inter', sans-serif);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    border: 1px solid transparent;
}

.btn-empty-state-primary {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.28);
}

.btn-empty-state-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.38);
    filter: brightness(1.05);
}

.btn-empty-state-secondary {
    background: var(--input-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

.btn-empty-state-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    background: rgba(var(--primary-rgb), 0.05);
}

/* Ensure grid containers center empty state across all columns */
.orders-app-grid .table-empty-state-container,
.mobile-app-cards-container .table-empty-state-container,
#ordersCardsContainer .table-empty-state-container,
#productsCardsContainer .table-empty-state-container,
#customersCardsContainer .table-empty-state-container {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 600px) {
    .table-empty-state-container {
        padding: 34px 20px 30px 20px;
        margin: 20px auto !important;
        border-radius: 18px;
    }
    .table-empty-state-icon {
        width: 76px;
        height: 76px;
        border-radius: 20px;
        font-size: 30px;
    }
    .table-empty-state-actions {
        width: 100%;
        flex-direction: column;
    }
    .btn-empty-state-action {
        width: 100%;
    }
}

/* ========================================================= */
/* 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: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 28px;
    padding: 24px 28px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.025);
    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: 260px;
    height: 260px;
    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: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    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;
}
body.dark-mode .dash-live-clock-widget {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.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: 9999px;
    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 rgba(0, 0, 0, 0.05);
}
body.dark-mode .dash-command-bar {
    border-top-color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    color: var(--text-main, #0f172a);
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 36px 9px 34px;
    border-radius: 9999px;
    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: 600;
    padding: 8px 16px;
    border-radius: 9999px;
    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: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-color: rgba(226, 232, 240, 0.8);
    color: var(--text-main, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.dash-app-action-btn.btn-refresh:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.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: #ea580c;
    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: #2563eb;
    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: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.025);
}

body:not(.light-mode) .dash-hero-glass-surface {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
}

body:not(.light-mode) .dash-app-select {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body:not(.light-mode) .dash-app-action-btn.btn-refresh {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
    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-app {
        margin-bottom: 12px;
    }

    .dash-hero-glass-surface {
        padding: 12px 14px;
        border-radius: 18px;
        gap: 10px;
    }

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

    .dash-user-profile-widget {
        gap: 10px;
        align-items: center;
        min-width: 0;
    }

    .dash-avatar-inner {
        width: 38px;
        height: 38px;
        font-size: 15px;
        border-radius: 12px;
        flex-shrink: 0;
    }

    .dash-welcome-text {
        min-width: 0;
    }

    .dash-badge-row {
        gap: 5px;
        margin-bottom: 2px;
    }

    .dash-live-badge,
    .dash-date-badge {
        font-size: 9.5px;
        padding: 2px 7px;
    }

    .dash-welcome-title {
        font-size: 15px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dash-welcome-sub {
        display: none !important;
    }

    /* Hide redundant giant clock box on mobile phones (OS status bar already shows clock) */
    .dash-live-clock-widget {
        display: none !important;
    }

    /* Sleek single-row command bar: Store Select + Refresh Button */
    .dash-command-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    body.dark-mode .dash-command-bar {
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    .dash-store-select-wrap {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .dash-app-select {
        width: 100%;
        height: 36px;
        padding: 0 28px 0 32px;
        font-size: 12px;
        border-radius: 12px;
    }

    .dash-select-icon {
        left: 10px;
        font-size: 11px;
    }

    .dash-select-chevron {
        right: 10px;
        font-size: 9px;
    }

    .dash-actions-cluster {
        display: flex;
        align-items: center;
        gap: 0;
        width: auto;
        flex-shrink: 0;
    }

    .dash-app-action-btn.btn-refresh {
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        white-space: nowrap;
    }

    /* Redundant quick launch buttons are already in the mobile header quick links */
    .dash-actions-cluster .btn-orders-hub,
    .dash-actions-cluster .btn-pos,
    .dash-actions-cluster .btn-kitchen,
    .dash-actions-cluster .btn-logistics {
        display: none !important;
    }
}

.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); }
}

/* ========================================================= */
/* ENTERPRISE KPI STAT CARDS (Dashboard, Reports & Benefits) */
/* ========================================================= */
.dashboard-header-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.stat-card {
    border-radius: 20px;
    padding: 20px 22px;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03), 0 10px 28px -6px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.9));
    text-align: left;
}

/* Column layout for KPI cards that have .stat-card-top */
.stat-card:has(.stat-card-top),
.stat-card-sales,
.stat-card-orders,
.stat-card-delivery,
.stat-card-alerts,
.stat-card-pos,
.stat-card-web {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
    text-align: left !important;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -6px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.03);
}

.stat-card-accent-bar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    opacity: 0.9;
    pointer-events: none;
}

.stat-card-accent-bar.accent-sales { background: linear-gradient(90deg, #10b981, #34d399); }
.stat-card-accent-bar.accent-orders { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.stat-card-accent-bar.accent-delivery { background: linear-gradient(90deg, #0ea5e9, #38bdf8); }
.stat-card-accent-bar.accent-alerts { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

.stat-card-watermark {
    position: absolute;
    bottom: -10px;
    right: 12px;
    font-size: 68px;
    color: currentColor;
    opacity: 0.045;
    pointer-events: none;
    transform: rotate(-8deg);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.stat-card:hover .stat-card-watermark {
    transform: rotate(0deg) scale(1.06);
    opacity: 0.08;
}

.stat-card-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    gap: 10px;
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-card:hover .stat-icon {
    transform: scale(1.06);
}

/* 1. SALES - Crisp White + Emerald / Warm Accent */
body.light-mode .stat-card-sales {
    background: linear-gradient(145deg, #ffffff 0%, #f0fdf4 100%);
    border-color: rgba(16, 185, 129, 0.24);
    color: #059669;
}
body.light-mode .stat-card-sales .stat-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.08));
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
body.light-mode .stat-card-sales .stat-info h3 {
    color: #475569;
}
body.light-mode .stat-card-sales .stat-value {
    color: #0f172a;
}
body.light-mode .stat-card-sales .stat-trend,
body.light-mode .stat-card-sales .stat-badge {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

/* 2. ORDERS - Crisp White + Indigo / Violet Accent */
body.light-mode .stat-card-orders {
    background: linear-gradient(145deg, #ffffff 0%, #f5f3ff 100%);
    border-color: rgba(139, 92, 246, 0.24);
    color: #6d28d9;
}
body.light-mode .stat-card-orders .stat-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.08));
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, 0.2);
}
body.light-mode .stat-card-orders .stat-info h3 {
    color: #475569;
}
body.light-mode .stat-card-orders .stat-value {
    color: #0f172a;
}
body.light-mode .stat-card-orders .stat-badge {
    background: rgba(139, 92, 246, 0.12);
    color: #5b21b6;
    border-radius: 9999px;
    border: 1px solid rgba(139, 92, 246, 0.22);
}

/* 3. LOGISTICS & POS - Crisp White + Sky Blue Accent */
body.light-mode .stat-card-delivery,
body.light-mode .stat-card-pos {
    background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
    border-color: rgba(14, 165, 233, 0.24);
    color: #0284c7;
}
body.light-mode .stat-card-delivery .stat-icon,
body.light-mode .stat-card-pos .stat-icon {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.08));
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.2);
}
body.light-mode .stat-card-delivery .stat-info h3,
body.light-mode .stat-card-pos .stat-info h3 {
    color: #475569;
}
body.light-mode .stat-card-delivery .stat-value,
body.light-mode .stat-card-pos .stat-value {
    color: #0f172a;
}
body.light-mode .stat-card-delivery .stat-badge,
body.light-mode .stat-card-pos .stat-badge {
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    border-radius: 9999px;
    border: 1px solid rgba(14, 165, 233, 0.22);
}

/* 4. ALERTS & WEB - Crisp White + Amber / Rose Accent */
body.light-mode .stat-card-alerts,
body.light-mode .stat-card-web {
    background: linear-gradient(145deg, #ffffff 0%, #fffbeb 100%);
    border-color: rgba(245, 158, 11, 0.26);
    color: #d97706;
}
body.light-mode .stat-card-alerts .stat-icon,
body.light-mode .stat-card-web .stat-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.22);
}
body.light-mode .stat-card-alerts .stat-info h3,
body.light-mode .stat-card-web .stat-info h3 {
    color: #475569;
}
body.light-mode .stat-card-alerts .stat-value,
body.light-mode .stat-card-web .stat-value {
    color: #0f172a;
}
body.light-mode .stat-card-alerts .stat-badge,
body.light-mode .stat-card-web .stat-badge {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-radius: 9999px;
    border: 1px solid rgba(245, 158, 11, 0.24);
}

/* Dark Mode KPI Cards */
body.dark-mode .stat-card {
    background: linear-gradient(160deg, #111115 0%, #09090b 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
body.dark-mode .stat-card-sales { border-color: rgba(16, 185, 129, 0.25); }
body.dark-mode .stat-card-orders { border-color: rgba(139, 92, 246, 0.25); }
body.dark-mode .stat-card-delivery,
body.dark-mode .stat-card-pos { border-color: rgba(14, 165, 233, 0.25); }
body.dark-mode .stat-card-alerts,
body.dark-mode .stat-card-web { border-color: rgba(245, 158, 11, 0.25); }

body.dark-mode .stat-icon-green,
body.dark-mode .stat-card-sales .stat-icon { background: rgba(16, 185, 129, 0.16); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.28); }
body.dark-mode .stat-icon-blue,
body.dark-mode .stat-card-delivery .stat-icon,
body.dark-mode .stat-card-pos .stat-icon { background: rgba(14, 165, 233, 0.16); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.28); }
body.dark-mode .stat-icon-orange,
body.dark-mode .stat-card-alerts .stat-icon { background: rgba(245, 158, 11, 0.16); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.28); }
body.dark-mode .stat-icon-red,
body.dark-mode .stat-card-orders .stat-icon,
body.dark-mode .stat-card-web .stat-icon { background: rgba(139, 92, 246, 0.16); color: #c084fc; border: 1px solid rgba(139, 92, 246, 0.28); }

.stat-trend,
.stat-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.stat-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.stat-info h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin: 0 0 4px 0;
    letter-spacing: 0.1px;
    text-transform: uppercase;
}

.stat-value,
.stat-info p {
    font-size: 27px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1.15;
    margin: 0 0 6px 0;
    letter-spacing: -0.7px;
    font-variant-numeric: tabular-nums;
}

.stat-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    width: 100%;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
}
body.dark-mode .stat-sub {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* 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: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 26px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.025);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.dark-mode .dashboard-card {
    background: #09090b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.dashboard-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.dashboard-card .card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
body.dark-mode .dashboard-card .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.card-header-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.2px;
}

.card-subtitle {
    margin: 2px 0 0 0;
    font-size: 11.5px;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.dashboard-card .card-body {
    padding: 20px 24px;
    flex: 1;
}

/* Chart Switcher Tabs - Pill style from reference image */
.chart-period-tabs {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: 9999px;
    gap: 2px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}
body.dark-mode .chart-period-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.chart-tab-btn {
    background: transparent;
    border: none;
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-tab-btn:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.5);
}
body.dark-mode .chart-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.chart-tab-btn.active {
    background: #111827;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
body.dark-mode .chart-tab-btn.active {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.14);
}

.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: 10px;
}

.top-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 16px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.top-list-item:hover {
    background: rgba(0, 0, 0, 0.025);
    transform: translateX(2px);
}
body.dark-mode .top-list-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.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: rgba(0,0,0,0.04); color: var(--text-muted, #94a3b8); }

.top-prod-img {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    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 Pastel Design */
.order-kanban-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(210px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.kanban-col {
    border-radius: 22px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

body.light-mode .kanban-col-pending {
    background: rgba(253, 237, 220, 0.45);
    border-color: rgba(245, 180, 115, 0.35);
}
body.light-mode .kanban-col-cooking {
    background: rgba(254, 226, 226, 0.4);
    border-color: rgba(248, 113, 113, 0.3);
}
body.light-mode .kanban-col-ready {
    background: rgba(221, 240, 253, 0.5);
    border-color: rgba(165, 205, 248, 0.4);
}
body.light-mode .kanban-col-delivering {
    background: rgba(222, 247, 232, 0.5);
    border-color: rgba(160, 228, 190, 0.4);
}

body.dark-mode .kanban-col {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.dark-mode .kanban-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.kanban-title {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.1px;
}

body.light-mode .kanban-col-pending .kanban-title { color: #9a5312; }
body.light-mode .kanban-col-cooking .kanban-title { color: #b91c1c; }
body.light-mode .kanban-col-ready .kanban-title { color: #1e5f98; }
body.light-mode .kanban-col-delivering .kanban-title { color: #166534; }

.kanban-count-badge {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: var(--text-main, #0f172a);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 9999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
body.dark-mode .kanban-count-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.kanban-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.kanban-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 13px 14px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
    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;
}
body.dark-mode .kanban-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px 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: rgba(0, 0, 0, 0.04);
    padding: 2px 7px;
    border-radius: 9999px;
}
body.dark-mode .kanban-card-time {
    background: rgba(255, 255, 255, 0.08);
}

.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 rgba(0, 0, 0, 0.06);
}
body.dark-mode .kanban-card-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.kanban-card-total {
    font-weight: 800;
    font-size: 13px;
    color: var(--text-main, #0f172a);
}

.kanban-card-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kanban-card-badge.type-delivery { background: rgba(30, 92, 148, 0.12); color: #1e5f98; }
.kanban-card-badge.type-pickup { background: rgba(92, 63, 176, 0.12); color: #5c3fb0; }
.kanban-card-badge.type-mesa { background: rgba(154, 83, 18, 0.12); color: #9a5312; }

.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, #09090b);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

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, #121214);
    border-color: var(--border-color, rgba(255, 255, 255, 0.08));
}

body.dark-mode .chart-tab-btn.active {
    background: var(--card-bg, #09090b);
    color: var(--primary, #ff4757);
}

body.dark-mode .timeline::before {
    background: var(--border-color, rgba(255, 255, 255, 0.08));
}

body.dark-mode .timeline-dot {
    border-color: var(--card-bg, #09090b);
}

/* ==========================================================================
   MODERN STORE MODAL REDESIGN (APP-LIKE EXPERIENCE)
   ========================================================================== */
.store-modal-container {
    max-width: 1040px !important;
    width: 95% !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--card-bg, #ffffff) !important;
    animation: storeModalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes storeModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.store-modal-header {
    padding: 18px 26px !important;
    background: var(--card-bg, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 10;
}

.store-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.store-modal-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.16) 0%, rgba(var(--primary-rgb), 0.06) 100%);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.12);
}

.store-modal-header-text {
    min-width: 0;
}

.store-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.store-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-main, #1e293b);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
}

.store-modal-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-modal-store-badge.is-editing {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    border: 1px solid rgba(var(--primary-rgb), 0.22);
}

.store-modal-store-badge.is-new {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.store-modal-subtitle {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.store-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-hover, #f1f5f9);
    border: 1px solid transparent;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.store-modal-close:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fecaca;
    transform: rotate(90deg);
}

.store-modal-body {
    padding: 22px 26px !important;
    overflow-y: auto !important;
    max-height: calc(92vh - 145px) !important;
    background: var(--bg-hover, #f8fafc) !important;
    scroll-behavior: smooth;
}

.store-modal-tabs-wrapper {
    margin-bottom: 20px;
}

.store-modal-tabs {
    display: flex;
    gap: 6px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 5px;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    overflow-x: auto;
    scrollbar-width: none;
}

.store-modal-tabs::-webkit-scrollbar {
    display: none;
}

.store-modal-tabs .tab-item {
    border: none;
    background: transparent;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.store-modal-tabs .tab-item i {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    transition: color 0.2s;
}

.store-modal-tabs .tab-item:hover {
    color: var(--text-main, #1e293b);
    background: var(--bg-hover, #f1f5f9);
}

.store-modal-tabs .tab-item.active {
    background: var(--primary, #ff4757) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.32);
}

.store-modal-tabs .tab-item.active i {
    color: #ffffff !important;
}

.store-modal-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s;
}

.store-modal-card:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
}

.store-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.store-card-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.store-modal-card-title {
    font-size: 13.5px;
    font-weight: 700;
    margin: 0;
    color: var(--text-main, #1e293b);
    letter-spacing: -0.1px;
}

.store-card-desc {
    font-size: 11.5px;
    color: var(--text-muted, #64748b);
    margin: 2px 0 0 0;
    line-height: 1.4;
}

.store-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .store-form-grid {
        grid-template-columns: 1fr;
    }
}

.store-modal-container .form-group {
    margin-bottom: 16px;
}

.store-modal-container label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.store-modal-container input[type="text"],
.store-modal-container input[type="number"],
.store-modal-container select,
.store-modal-container textarea {
    width: 100%;
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-main, #1e293b);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    outline: none;
}

.store-modal-container input[type="text"]:focus,
.store-modal-container input[type="number"]:focus,
.store-modal-container select:focus,
.store-modal-container textarea:focus {
    border-color: var(--primary) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.14) !important;
}

.store-input-prefix-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.store-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

.store-input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
}

.store-input-prefix-wrapper input.has-prefix,
.store-input-prefix-wrapper select.has-prefix {
    padding-left: 36px !important;
}

.store-input-prefix-wrapper input.has-suffix {
    padding-right: 36px !important;
}

.store-modal-field-hint {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 5px;
    margin-bottom: 0;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tier-row-badge {
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
}

.store-takeaway-textarea {
    width: 100%;
    resize: vertical;
    border: 1.5px solid #86efac !important;
    background: #f0fdf4 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: #14532d !important;
    font-size: 13px !important;
    line-height: 1.45;
}

.store-takeaway-textarea:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3.5px rgba(34, 197, 94, 0.2) !important;
}

.store-cover-uploader {
    background: var(--card-bg, #ffffff);
    border: 2px dashed var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.store-cover-uploader:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.03);
    transform: translateY(-1px);
}

.store-upload-icon-bubble {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 8px auto;
}

.store-modal-footer {
    padding: 16px 26px !important;
    background: var(--card-bg, #ffffff) !important;
    border-top: 1px solid var(--border-color, #e2e8f0) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    position: relative;
    z-index: 10;
}

.store-btn-cancel {
    padding: 10px 20px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid var(--border-color, #e2e8f0) !important;
    background: var(--bg-hover, #f1f5f9) !important;
    color: var(--text-main, #1e293b) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.store-btn-cancel:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.store-btn-save {
    padding: 10px 24px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    background: var(--primary, #ff4757) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35) !important;
    transition: all 0.2s ease !important;
}

.store-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.45) !important;
}

body.dark-mode .store-modal-container {
    background: #09090b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .store-modal-header {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .store-modal-close {
    background: #18181b;
    color: #a1a1aa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .store-modal-close:hover {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #991b1b;
}

body.dark-mode .store-modal-body {
    background: #09090b !important;
}

body.dark-mode .store-modal-tabs {
    background: #121214;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .store-modal-tabs .tab-item {
    color: #a1a1aa;
}

body.dark-mode .store-modal-tabs .tab-item:hover {
    background: #18181b;
    color: #f8fafc;
}

body.dark-mode .store-modal-card {
    background: #111114;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .store-card-header {
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .store-modal-container input[type="text"],
body.dark-mode .store-modal-container input[type="number"],
body.dark-mode .store-modal-container select,
body.dark-mode .store-modal-container textarea {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

body.dark-mode .store-modal-container input[type="text"]:focus,
body.dark-mode .store-modal-container input[type="number"]:focus,
body.dark-mode .store-modal-container select:focus,
body.dark-mode .store-modal-container textarea:focus {
    background: #222226 !important;
    border-color: var(--primary) !important;
}

body.dark-mode .store-takeaway-textarea {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}

body.dark-mode .store-cover-uploader {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode #storeFixedDeliveryFields,
body.dark-mode #storeDistanceTiersFields > div,
body.dark-mode #coverageZonesContainer {
    background: #141417 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .tier-row-badge {
    background: #27272a;
    color: #cbd5e1;
}

body.dark-mode .store-modal-footer {
    background: #000000 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .store-btn-cancel {
    background: #18181b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

body.dark-mode .store-btn-cancel:hover {
    background: #27272a !important;
}

@media (max-width: 640px) {
    .store-modal-container {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .store-modal-header {
        padding: 14px 16px !important;
    }
    .store-modal-body {
        padding: 14px 14px !important;
        max-height: calc(100vh - 125px) !important;
    }
    .store-modal-card {
        padding: 16px 14px !important;
    }
    .store-modal-footer {
        padding: 12px 16px !important;
    }
}
body.dark-mode .header-quick-btn {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.12);
    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 Kiosk Header & Controls */
.kiosk-app-hero {
    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);
}

.kiosk-app-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);
    pointer-events: none;
}

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

.kiosk-app-icon-badge {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary) 0%, #ff4757 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.35);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.kiosk-app-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    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: 4px;
}

.kiosk-app-hero-title {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 3px 0;
    color: var(--text-main);
    letter-spacing: -0.4px;
}

.kiosk-app-hero-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    max-width: 580px;
}

.kiosk-app-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-kiosk-live {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
}

.btn-kiosk-live:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.btn-kiosk-save {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--primary) 0%, #d8161c 100%);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(var(--primary-rgb), 0.35);
    transition: all 0.25s ease;
}

.btn-kiosk-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.45);
}

.btn-kiosk-save:active {
    transform: translateY(0);
}

/* Modern Segmented App Tabs Navigation */
.kiosk-app-tabs-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 6px;
    display: inline-flex;
    gap: 6px;
    margin-bottom: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    flex-wrap: wrap;
}

.kiosk-app-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.kiosk-app-tab-btn:hover {
    color: var(--text-main);
    background: var(--input-bg);
}

.kiosk-app-tab-btn.active {
    background: linear-gradient(135deg, var(--primary) 0%, #ff4757 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.35);
}

.kiosk-app-tab-btn i {
    font-size: 14px;
}

/* Modern App Cards within #view-kiosk */
.kiosk-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;
}

.kiosk-app-card:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.kiosk-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;
}

.kiosk-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

.kiosk-card-icon.icon-red {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
}

.kiosk-card-icon.icon-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.kiosk-card-icon.icon-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.kiosk-card-icon.icon-green {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.kiosk-card-icon.icon-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.kiosk-card-title-group h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.2px;
}

.kiosk-card-title-group p {
    margin: 3px 0 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

/* Video Preview Widget */
.kiosk-video-preview-box {
    background: var(--input-bg);
    border: 1px dashed var(--border-color);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.kiosk-video-preview-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.kiosk-video-mini-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Modern Setting Row Items */
.kiosk-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.kiosk-setting-row:hover {
    background: rgba(var(--primary-rgb), 0.025);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.kiosk-setting-row:last-child {
    margin-bottom: 0;
}

.kiosk-setting-info h4 {
    margin: 0 0 3px 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
}

.kiosk-setting-info p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .kiosk-app-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
    .kiosk-app-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .kiosk-app-tabs-wrap {
        width: 100%;
        display: flex;
    }
    .kiosk-app-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* ==========================================================================
   MODERN APP CONFIGURATION MODULE STYLES (Settings Redesign)
   ========================================================================== */

.settings-app-container {
    padding-bottom: 50px;
    font-family: var(--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)
   ========================================================================== */

/* Ocultar barra superior y navbar móvil inferior al crear o editar producto (tanto PC como Móvil) */
body.product-form-active .page-header,
body:has(#view-product-form.active) .page-header,
body.product-form-active .admin-mobile-bottom-nav,
body:has(#view-product-form.active) .admin-mobile-bottom-nav {
    display: none !important;
}

/* Espacio inferior seguro para el scroll cuando la barra de guardado está activa */
body.product-form-active .content-area,
body:has(#view-product-form.active) .content-area {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

.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: 18px 24px;
    margin-bottom: 20px;
    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;
    transition: all 0.25s ease;
}

@media (min-width: 769px) {
    .product-app-header {
        position: sticky;
        top: 0;
        z-index: 80;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

.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-meta {
    display: flex;
    flex-direction: column;
}

/* --- Barra de Pestañas Estilo App Moderna --- */
.product-form-tabs-wrapper {
    margin-bottom: 22px;
}

.product-form-tabs {
    display: inline-flex;
    align-items: center;
    background: var(--card-bg, #ffffff);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
}

.pf-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    text-decoration: none;
    outline: none;
}

.pf-tab-button i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

.pf-tab-button:hover {
    color: var(--text-main);
    background: var(--input-bg, #f8fafc);
}

.pf-tab-button.active {
    background: var(--primary, #e65100);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 230, 81, 0), 0.35);
    font-weight: 700;
}

.pf-tab-button.active i {
    transform: scale(1.1);
}

/* --- Workspace y Footer del Constructor (Pestaña 2) --- */
.product-builder-workspace {
    width: 100%;
    animation: fadeInProductPane 0.25s ease;
}

.product-form-pane.active {
    animation: fadeInProductPane 0.25s ease;
}

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

.product-builder-footer-bar {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 18px 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* --- Tarjeta de Paso Siguiente (Pestaña 1) --- */
.pf-next-step-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 230, 81, 0), 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px dashed rgba(var(--primary-rgb, 230, 81, 0), 0.35);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.pf-next-step-content {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf-next-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(var(--primary-rgb, 230, 81, 0), 0.12);
    color: var(--primary, #e65100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.pf-next-step-info h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-main);
}

.pf-next-step-info p {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-next-step-btn {
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 10px;
}

.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);
}

.product-main-remove-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.9);
    backdrop-filter: blur(4px);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.product-main-remove-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* --- Dock para Importar Imagen vía URL --- */
.product-media-url-dock {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.product-url-input-group {
    display: flex;
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 3px 5px 3px 12px;
    gap: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product-url-input-group:focus-within {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.product-url-prefix-icon {
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
    display: flex;
    align-items: center;
}

.product-url-control {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 12.5px !important;
    color: var(--text-main, #1e293b) !important;
    padding: 7px 4px !important;
    box-shadow: none !important;
}

.product-url-control::placeholder {
    color: var(--text-muted, #94a3b8);
    font-size: 12px;
}

.product-url-clear-btn {
    background: transparent;
    border: none;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    transition: color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-url-clear-btn:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}

.product-url-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    background: var(--primary, #ff4757);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

.product-url-submit-btn:hover:not(:disabled) {
    background: var(--primary-hover, #ee3344);
    transform: translateY(-1px);
}

.product-url-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.product-url-status-message {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.product-url-status-message.status-success {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.product-url-status-message.status-error {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.product-url-status-message.status-loading {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

body.dark-mode .product-url-input-group {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .product-url-control {
    color: #f1f5f9 !important;
}

body.dark-mode .product-url-status-message.status-success {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

body.dark-mode .product-url-status-message.status-error {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* --- 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);
}

body.dark-mode .product-form-tabs {
    background: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

body.dark-mode .pf-tab-button:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

body.dark-mode .product-builder-footer-bar {
    background: #0d0d0d;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .pf-next-step-card {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 230, 81, 0), 0.1) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: rgba(var(--primary-rgb, 230, 81, 0), 0.3);
}

@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) {
    /* Header del Producto */
    .product-app-header {
        padding: 12px 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
    }
    .product-app-header-left {
        width: 100% !important;
        gap: 10px !important;
    }
    .product-app-title {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }
    .product-app-subtitle {
        font-size: 11.5px !important;
    }
    .product-app-header-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }
    .product-app-header-actions .btn-app-secondary,
    .product-app-header-actions .btn-app-primary {
        flex: 1 1 50% !important;
        justify-content: center !important;
        font-size: 12.5px !important;
        padding: 8px 10px !important;
    }

    /* Pestañas: Segmented Tabs a Ancho Completo */
    .product-form-tabs-wrapper {
        margin-bottom: 14px !important;
        width: 100% !important;
    }
    .product-form-tabs {
        display: flex !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px !important;
        border-radius: 12px !important;
        gap: 4px !important;
    }
    .pf-tab-button {
        flex: 1 1 50% !important;
        justify-content: center !important;
        padding: 9px 8px !important;
        font-size: 12px !important;
        gap: 6px !important;
        text-align: center !important;
        border-radius: 9px !important;
    }
    .pf-tab-button i {
        font-size: 13px !important;
    }

    /* Tarjetas del Formulario */
    .product-form-card {
        padding: 14px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }
    .product-gallery-grid-modern {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    /* Barra Flotante de Guardado (Sticky Bar) en Móvil */
    .product-app-sticky-bar {
        display: flex !important;
        position: fixed !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 8px 12px !important;
        border-radius: 16px !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    }
    .product-sticky-info {
        font-size: 12px !important;
        max-width: 130px !important;
        font-weight: 600 !important;
    }
    .product-app-sticky-bar .btn-app-secondary,
    .product-app-sticky-bar .btn-app-primary {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* -------------------------------------------------------------
       CONSTRUCTOR DE EXTRAS (RESPONSIVE FIX)
       ------------------------------------------------------------- */
    #extraBuilderCard > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #extraBuilderCard > div:first-child > div {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #extraBuilderCard > div:first-child > div .btn {
        flex: 1 1 50% !important;
        margin-right: 0 !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
    }

    .extra-group {
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        overflow: hidden !important;
    }
    .extra-group-header {
        padding: 10px 10px !important;
        gap: 8px !important;
    }
    .extra-group-handle {
        width: 28px !important;
        height: 32px !important;
        border-radius: 6px !important;
        font-size: 12px !important;
    }
    .extra-group-name {
        height: 34px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .extra-group-actions .btn-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .extra-group-settings {
        padding: 10px 10px !important;
    }
    .extra-group-settings > div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .extra-group-settings label {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        font-size: 11px !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .extra-group-settings select,
    .extra-group-settings input[type='number'] {
        width: 100% !important;
        max-width: 100% !important;
        height: 32px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }
    .extra-group-settings label:has(input[type='checkbox']) {
        grid-column: span 2 !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .extra-options-container {
        padding: 10px 8px !important;
    }
    .extra-options-title {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    /* Tarjeta individual de Opción dentro de Extra */
    .extra-option {
        padding: 10px 10px !important;
        gap: 8px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .extra-option-handle {
        width: 18px !important;
        height: 48px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }
    .extra-option-img-upload {
        width: 48px !important;
        height: 48px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    .extra-option-img-upload i {
        font-size: 1rem !important;
    }
    .extra-option-details {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 100% !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    /* Fila 1: Nombre en fila completa + Precio y Eliminar abajo */
    .extra-opt-row-top {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .opt-title-input {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        height: 35px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    .opt-price-container {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 70px !important;
        position: relative !important;
    }
    .opt-price-input {
        height: 35px !important;
        font-size: 13px !important;
        padding-left: 26px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    .opt-price-prefix {
        left: 8px !important;
        font-size: 12px !important;
    }
    .btn-delete-opt {
        width: 35px !important;
        height: 35px !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    /* Fila 2: Descripción y Sub-opciones apiladas */
    .extra-opt-row-desc {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .opt-desc-input {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        font-size: 12px !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    .btn-sub-opt {
        width: 100% !important;
        height: 32px !important;
        justify-content: center !important;
        font-size: 11.5px !important;
    }

    /* Badges / Checkboxes de Opción */
    .extra-opt-badges {
        gap: 4px !important;
        padding: 6px 8px !important;
    }
    .badge-toggle {
        font-size: 10.5px !important;
        padding: 3px 6px !important;
        gap: 4px !important;
    }

    /* Límites numéricos */
    .extra-opt-limits {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }
    .extra-opt-limit-badge {
        font-size: 10.5px !important;
        padding: 4px 6px !important;
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .extra-opt-limit-badge input {
        width: 36px !important;
        height: 24px !important;
        font-size: 11px !important;
    }
    .btn-add-option {
        padding: 10px !important;
        font-size: 12.5px !important;
    }

    /* -------------------------------------------------------------
       CONSTRUCTOR DE MENÚ (RESPONSIVE FIX)
       ------------------------------------------------------------- */
    #menuBuilderCard .product-form-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #menuBuilderCard .product-form-card-header > div:last-child {
        display: flex !important;
        gap: 8px !important;
        width: 100% !important;
    }
    #menuBuilderCard .product-form-card-header > div:last-child .btn {
        flex: 1 1 50% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    .menu-group-app-card {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }
    .menu-cards-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .menu-dish-editor-card {
        padding: 10px !important;
    }
    .menu-free-app-card {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .menu-whatsapp-config-card {
        padding: 12px !important;
    }

    /* -------------------------------------------------------------
       CONSTRUCTOR DE VARIANTES (RESPONSIVE FIX)
       ------------------------------------------------------------- */
    #variableBuilderCard .product-form-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #variableBuilderCard .product-form-card-header > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #variableBuilderCard .product-form-card-header > div:last-child .btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 11px !important;
        padding: 6px 6px !important;
    }
    .variant-bulk-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .variant-bulk-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100% !important;
    }
    .btn-bulk-pill {
        font-size: 11px !important;
        padding: 5px 8px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .variant-acc-header {
        padding: 10px 10px !important;
        gap: 6px !important;
    }
    .variant-acc-header-left {
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .variant-acc-thumb {
        width: 32px !important;
        height: 32px !important;
    }
    .variant-acc-title {
        font-size: 12.5px !important;
        flex-wrap: wrap !important;
    }
    .variant-acc-header-right {
        gap: 6px !important;
        margin-left: auto !important;
    }
    .variant-acc-price-badge {
        font-size: 12px !important;
    }
    .variant-acc-stock-pill {
        font-size: 10.5px !important;
        padding: 2px 6px !important;
    }
    .variant-acc-body {
        padding: 12px 10px !important;
    }
    .variant-store-stock-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* -------------------------------------------------------------
       CONSTRUCTOR DE CAJA (RESPONSIVE FIX)
       ------------------------------------------------------------- */
    #boxBuilderCard > div:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    #boxBuilderCard > div:first-child > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #boxBuilderCard > div:first-child > div:last-child .btn {
        width: 100% !important;
        justify-content: center !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    .table-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* -------------------------------------------------------------
       FOOTER & CARDS DE TRANSICIÓN ENTRE PESTAÑAS
       ------------------------------------------------------------- */
    .pf-next-step-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
        text-align: left !important;
    }
    .pf-next-step-card .btn-app-primary {
        width: 100% !important;
        justify-content: center !important;
    }
    .product-builder-footer-bar {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px !important;
    }
    .product-builder-footer-bar .btn-app-secondary,
    .product-builder-footer-bar .btn-app-primary {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   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;
}

/* ============================================================
   ADVANCED GLOBAL ATTRIBUTES & VARIANT BUILDER SYSTEM
   ============================================================ */

/* Attributes Tab Container */
.attributes-app-container {
    animation: fadeIn 0.25s ease-out;
}

.attributes-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

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

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

.attributes-search-wrap {
    position: relative;
    width: 280px;
}

.attributes-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
}

.attributes-search-wrap input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.attributes-search-wrap input:focus {
    border-color: var(--primary);
}

/* Attributes Grid & Cards */
.attributes-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.attr-card-modern {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.attr-card-modern:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.attr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.attr-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 2px 0;
}

.attr-card-slug {
    font-size: 11px;
    font-family: monospace;
    color: var(--text-muted);
}

.attr-swatch-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.attr-swatch-badge.type-button {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.attr-swatch-badge.type-color {
    background: rgba(225, 29, 72, 0.12);
    color: #e11d48;
}

.attr-swatch-badge.type-image {
    background: rgba(2, 132, 199, 0.12);
    color: #0284c7;
}

.attr-terms-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 16px 0;
    max-height: 120px;
    overflow-y: auto;
}

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

.attr-chip-color-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.attr-card-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: auto;
}

.btn-attr-action {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-attr-action:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.05);
}

.btn-attr-action.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.06);
}

/* Swatch Type Selector Grid (Modal) */
.swatch-type-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.swatch-type-card {
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    background: var(--card-bg);
    transition: all 0.2s ease;
}

.swatch-type-card:hover {
    border-color: var(--primary);
}

.swatch-type-card.active {
    border-color: var(--primary);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.swatch-card-icon {
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--primary);
}

.swatch-card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

.swatch-card-desc {
    font-size: 10.5px;
    color: var(--text-muted);
}

/* Chip Tags Input Container */
.chip-tags-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--input-bg);
    min-height: 44px;
    cursor: text;
}

.chip-tags-input-container input {
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-size: 12.5px;
    flex: 1;
    min-width: 140px;
    padding: 4px;
}

.chip-tag-pill {
    background: var(--primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: zoomIn 0.15s ease;
}

.chip-tag-pill i {
    cursor: pointer;
    font-size: 11px;
    opacity: 0.8;
}

.chip-tag-pill i:hover {
    opacity: 1;
}

/* Term Management Box in Modal */
.add-term-box-modern {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.terms-list-scroll {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.term-row-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 14px;
}

/* Variant Bulk Actions Bar */
.variant-bulk-bar {
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    animation: fadeIn 0.2s ease;
}

.variant-bulk-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.btn-bulk-pill {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.btn-bulk-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.btn-bulk-pill.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

/* Variant Modern Accordion Cards */
.variants-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.variant-accordion-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.variant-accordion-card:hover {
    border-color: #cbd5e1;
}

.variant-accordion-card.open {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.variant-accordion-card.is-inactive {
    opacity: 0.65;
    background: rgba(0,0,0,0.02);
}

.variant-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-hover);
    cursor: pointer;
    user-select: none;
    gap: 12px;
    flex-wrap: wrap;
}

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

.variant-acc-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    flex-shrink: 0;
}

.variant-acc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.variant-acc-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.variant-acc-sku-badge {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.05);
    padding: 1px 6px;
    border-radius: 4px;
}

.variant-acc-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.variant-acc-price-badge {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
}

.variant-acc-stock-pill {
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.variant-acc-stock-pill.out {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.variant-acc-chevron {
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.variant-accordion-card.open .variant-acc-chevron {
    transform: rotate(180deg);
}

.variant-acc-body {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: none;
    animation: fadeIn 0.2s ease-out;
}

.variant-accordion-card.open .variant-acc-body {
    display: block;
}

/* Variant Inner Layouts */
.variant-body-row {
    margin-bottom: 18px;
}

.variant-body-row:last-child {
    margin-bottom: 0;
}

.variant-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.variant-field-label-hint {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 4px;
}

.variant-checkbox-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 12px 14px;
    background: var(--bg-hover);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.variant-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    margin: 0;
}

.variant-checkbox-item input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Multi-store stock matrix within variant */
.variant-store-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    background: var(--bg-hover);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.variant-store-stock-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
}

.variant-store-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

/* Price Mode Toggle */
.price-mode-toggle {
    display: inline-flex;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2px;
}

.price-mode-btn {
    border: none;
    background: transparent;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.price-mode-btn.active {
    background: var(--primary);
    color: #ffffff;
}

/* KDS Alert Pill */
.kds-alert-tag {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid #f59e0b;
    color: #d97706;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   MODAL DETALLES DE PEDIDO - REDISEÑO APP MODERNO 2 COLUMNAS
   ============================================================ */
.order-details-app-modal {
    max-width: 1040px !important;
    width: 95vw !important;
    max-height: 92vh !important;
    border-radius: 20px !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    animation: orderModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes orderModalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.order-details-app-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;
    gap: 16px;
    flex-wrap: wrap;
}

.order-details-header-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.order-details-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.05));
    border: 1.5px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.order-details-header-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-details-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.order-details-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.2;
}

.order-app-status-badge {
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
}

.order-app-payment-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.order-app-payment-badge.paid {
    background: rgba(34, 197, 94, 0.14);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.order-app-payment-badge.unpaid {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.order-details-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.order-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.order-meta-sep {
    opacity: 0.35;
}

.order-details-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-order-modal-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-modal-print {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb), 0.25);
}

.btn-modal-print:hover {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

.btn-modal-edit {
    background: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-modal-edit:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted);
}

.order-details-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

.order-details-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    transform: rotate(90deg);
}

.order-details-app-body {
    padding: 22px 24px !important;
    overflow-y: auto !important;
    max-height: calc(92vh - 84px) !important;
    background: var(--bg-color) !important;
    display: block !important;
}

.order-modal-two-col {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .order-modal-two-col {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

.order-modal-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.order-app-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.order-app-card-title {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

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

.order-app-customer-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}

.order-app-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.order-app-phone-badge {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    padding: 4px 10px;
    background: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.order-app-wa-btn {
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff !important;
    background: #25d366;
    padding: 5px 12px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
    transition: transform 0.15s ease, background 0.15s ease;
}

.order-app-wa-btn:hover {
    background: #20ba5a;
    transform: translateY(-1px);
}

.order-app-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.order-app-info-item {
    background: var(--input-bg);
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.order-app-info-item.full-width {
    grid-column: 1 / -1;
}

.order-app-info-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}

.order-app-info-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    word-break: break-word;
}

.order-app-gps-box {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.order-app-maps-btn {
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--card-bg);
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.order-app-items-scroll {
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-app-items-scroll::-webkit-scrollbar {
    width: 5px;
}

.order-app-items-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: 10px;
}

.order-app-item-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 11px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    gap: 12px;
    transition: border-color 0.15s ease;
}

.order-app-item-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.order-app-item-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.order-app-item-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.order-app-item-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.3;
}

.order-app-item-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    text-align: right;
}

.order-app-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-muted);
}

.order-app-breakdown-row strong {
    color: var(--text-color);
}

.order-app-total-hero {
    margin-top: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.03));
    border: 1.5px solid rgba(var(--primary-rgb), 0.3);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.order-app-total-left {
    display: flex;
    flex-direction: column;
}

.order-app-total-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.order-app-total-amount {
    font-size: 26px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.order-app-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.order-app-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.order-app-action-btn.primary {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.order-app-action-btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.order-app-action-btn.secondary {
    background: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.order-app-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted);
}

/* ============================================================
   MOBILE NATIVE BOTTOM-SHEET MODAL (Max 768px)
   ============================================================ */
.modal-sheet-handle-bar {
    display: none;
}

.order-details-mobile-footer {
    display: none;
}

@media (max-width: 768px) {
    #orderDetailsModal.modal-overlay {
        display: none;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.78) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: 999999 !important;
    }

    #orderDetailsModal.modal-overlay[style*="display: flex"],
    #orderDetailsModal.modal-overlay[style*="display:flex"] {
        display: flex !important;
    }

    .order-details-app-modal {
        width: 100% !important;
        max-width: 100% !important;
        height: 92vh !important;
        max-height: 94vh !important;
        border-radius: 28px 28px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4) !important;
        display: flex !important;
        flex-direction: column !important;
        animation: orderSheetSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
        background: var(--card-bg) !important;
        overflow: hidden !important;
    }

    @keyframes orderSheetSlideUp {
        from {
            transform: translateY(100%);
            opacity: 0.6;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Grab handle / drag indicator */
    .modal-sheet-handle-bar {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 10px 0 4px 0;
        flex-shrink: 0;
        background: var(--card-bg);
    }

    .sheet-drag-pill {
        width: 44px;
        height: 5px;
        background: var(--border-color);
        border-radius: 10px;
        opacity: 0.85;
    }

    /* Header in mobile sheet */
    .order-details-app-header {
        padding: 8px 16px 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        border-bottom: 1px solid var(--border-color) !important;
        position: relative !important;
        background: var(--card-bg) !important;
    }

    .order-details-header-main {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        padding-right: 38px !important; /* Space for close button */
    }

    .order-details-app-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 17px !important;
        border-radius: 12px !important;
    }

    .order-details-header-text {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .order-details-header-top {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .order-details-title {
        font-size: 18px !important;
        font-weight: 800 !important;
        color: var(--text-color) !important;
        line-height: 1.2 !important;
    }

    .order-app-status-badge {
        font-size: 10.5px !important;
        padding: 2px 8px !important;
        border-radius: 20px !important;
    }

    .order-app-payment-badge {
        font-size: 10px !important;
        padding: 2px 7px !important;
        border-radius: 20px !important;
    }

    .order-details-meta {
        font-size: 11px !important;
        gap: 5px !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }

    /* Close button pinned to top right on mobile */
    .order-details-close-btn {
        position: absolute !important;
        top: 6px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        background: var(--input-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 50% !important;
        color: var(--text-muted) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10;
    }

    .order-details-header-actions .btn-order-modal-action {
        display: none !important;
    }

    /* Scrollable body */
    .order-details-app-body {
        padding: 14px 14px 20px 14px !important;
        max-height: none !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: var(--bg-color) !important;
    }

    .order-modal-two-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .order-modal-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .order-app-card {
        padding: 14px 14px !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
        border: 1px solid var(--border-color) !important;
    }

    .order-app-customer-name {
        font-size: 15px !important;
    }

    .order-app-info-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .order-app-items-scroll {
        max-height: 260px !important;
    }

    .order-app-total-hero {
        padding: 14px !important;
        border-radius: 14px !important;
    }

    .order-app-total-amount {
        font-size: 22px !important;
    }

    /* Fixed Bottom Action Bar for Mobile Thumb Ergonomics */
    .order-details-mobile-footer {
        display: flex !important;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.06);
        flex-shrink: 0;
        z-index: 100;
    }

    .btn-order-modal-mobile {
        flex: 1;
        height: 42px;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        font-size: 13px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .btn-mobile-footer-print {
        background: rgba(var(--primary-rgb), 0.12);
        color: var(--primary);
        border-color: rgba(var(--primary-rgb), 0.25);
    }

    .btn-mobile-footer-edit {
        background: var(--input-bg);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    .btn-mobile-footer-close {
        flex: 0 0 74px;
        background: var(--input-bg);
        color: var(--text-muted);
        border-color: var(--border-color);
    }
}

/* ============================================================
   LOGIN CAROUSEL SLIDERS MANAGER & PREVIEW
   ============================================================ */
.login-slides-manager {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.login-slide-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
}

.login-slide-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.08);
}

.login-slide-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #edf2f7);
}

.login-slide-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main, #1e293b);
}

.login-slide-card-title .slide-badge-num {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 20px;
}

.login-slide-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-slide-action {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--input-bg, #f8fafc);
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-slide-action:hover:not(:disabled) {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
    transform: translateY(-1px);
}

.btn-slide-action.btn-slide-del:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

.btn-slide-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.login-slide-card-body {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 680px) {
    .login-slide-card-body {
        grid-template-columns: 1fr;
    }
}

.login-slide-img-preview-box {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #0f172a;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.login-slide-img-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.login-slide-img-preview-box:hover img {
    transform: scale(1.06);
}

.login-slide-img-change-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.login-slide-img-preview-box:hover .login-slide-img-change-overlay {
    opacity: 1;
}

.btn-change-slide-img {
    margin-top: 8px;
    width: 100%;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--input-bg, #f8fafc);
    color: var(--text-main, #334155);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s;
}

.btn-change-slide-img:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.login-slide-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slide-field-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 10px;
}

@media (max-width: 500px) {
    .slide-field-grid {
        grid-template-columns: 1fr;
    }
}

.slide-form-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted, #64748b);
    margin-bottom: 4px;
}

.slide-input-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slide-icon-preview {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--input-bg, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd166;
    font-size: 14px;
    flex-shrink: 0;
}

.slide-quote-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--input-bg, #ffffff);
    color: var(--text-main, #1e293b);
    font-size: 12px;
    line-height: 1.45;
    resize: vertical;
    min-height: 52px;
    transition: border-color 0.2s;
    font-family: inherit;
}

.slide-quote-textarea:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Mockup Tabs & Carousel Subview */
.mockup-tab-pills {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.05);
    padding: 3px;
    border-radius: 10px;
}

.mockup-tab-pill {
    border: none;
    background: transparent;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
}

.mockup-tab-pill.active {
    background: var(--card-bg, #ffffff);
    color: var(--primary, #6366f1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.mockup-carousel-screen {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}

.mockup-carousel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.mockup-carousel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.48) 50%, rgba(0,0,0,0.15) 100%);
    z-index: 2;
}

.mockup-carousel-glow {
    position: absolute;
    bottom: -20px;
    left: -20px;
    right: -20px;
    height: 120px;
    background: radial-gradient(circle, var(--mockup-slide-glow, rgba(224, 138, 70, 0.6)) 0%, transparent 70%);
    filter: blur(22px);
    z-index: 3;
    pointer-events: none;
    opacity: 0.85;
}

.mockup-carousel-content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.mockup-slide-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
}

.mockup-slide-badge i {
    color: #ffd166;
}

.mockup-slide-quote {
    font-size: 11px;
    font-style: italic;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.mockup-carousel-nav {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mockup-nav-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
}

.mockup-nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

.mockup-carousel-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mockup-dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.2s;
    cursor: pointer;
}

.mockup-dot.active {
    width: 14px;
    background: #ffffff;
}

/* ==========================================================================
   OPTIMIZACIÓN PARA MONITORES 16", 19", 20" (1366x768, 1440x900, 1600x900),
   PANTALLAS CUADRADAS TÁCTILES (1024x768, 1280x1024) Y BAJOS RECURSOS
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1650px) {
    :root {
        --sidebar-width: 222px;
    }

    .page-header {
        padding: 10px 20px;
        min-height: 54px;
    }

    .content-area {
        padding: 16px 20px 24px 20px;
    }
}

/* Pantallas Cuadradas / 4:3 / 5:4 Táctiles (1024x768, 1152x864, 1280x1024) */
@media screen and (min-width: 769px) and (max-width: 1300px),
       screen and (min-width: 769px) and (max-aspect-ratio: 4/3) {
    :root {
        --sidebar-width: 204px;
    }

    .page-header {
        padding: 8px 16px;
        min-height: 50px;
        gap: 10px;
    }

    .content-area {
        padding: 14px 16px 20px 16px;
    }

    .table-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
    }
}

/* Altura Compacta (768p / 800p / 900p: 1024x768, 1366x768, 1440x900, 1600x900) */
@media screen and (min-width: 769px) and (max-height: 860px) {
    .sidebar-header {
        height: 52px;
    }

    .sidebar-nav {
        padding: 8px 10px;
        gap: 2px;
    }

    .nav-section-label {
        padding: 8px 12px 2px 12px;
        font-size: 10px;
    }

    .nav-item {
        height: 36px;
        font-size: 12.5px;
    }

    .sidebar-footer {
        padding: 8px 10px 10px 10px;
        gap: 6px;
    }

    .sidebar-user-card {
        padding: 7px 10px;
    }

    .modal,
    .modal-card,
    .modal-content {
        max-height: 92vh !important;
        max-height: 92dvh !important;
    }
}

/* Ergonomía Táctil en Panel Administrativo */
@media (pointer: coarse) {
    .nav-item {
        min-height: 40px;
    }

    .btn,
    .select-modern {
        min-height: 38px;
    }
}

/* Content-Visibility & Containment para Acelerar Renderizado en Bajos Recursos */
.content-area {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

@supports not (content-visibility: auto) {
    .content-area {
        contain: layout style;
    }
}

/* Modo Bajo Consumo (Lite Mode) */
html.lite-mode *,
html.lite-mode *::before,
html.lite-mode *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.lite-mode body.light-mode {
    background-image: none !important;
}

html.lite-mode body.light-mode .sidebar,
html.lite-mode body.light-mode .page-header,
html.lite-mode body.light-mode .card {
    background: #ffffff !important;
}

html.lite-mode body.dark-mode .sidebar,
html.lite-mode body.dark-mode .page-header {
    background: #09090b !important;
}

html.lite-mode .status-pulse-dot {
    animation: none !important;
}

/* ==========================================================================
   ENTERPRISE BACKEND DESIGN SYSTEM v13.5 (UNIFIED UI OVERHAUL)
   Covers: Global Theme Tokens, Browser UI Theming, Scrollbars, Sidebar,
   Header Bar, Dashboard Hero, KPI Cards, Tables, Toolbars, Forms & Modals
   ========================================================================== */

:root {
    accent-color: var(--primary, #ff4757);
    --scrollbar-thumb: rgba(148, 163, 184, 0.45);
    --scrollbar-track: transparent;
}

body.dark-mode {
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-track: transparent;
    --border-color: rgba(255, 255, 255, 0.085);
    --border: rgba(255, 255, 255, 0.085);
}

body.light-mode {
    --bg-color: #f4f6fb;
    --bg-main: #f4f6fb;
    --bg-surface: #f8fafc;
    --card-bg: #ffffff;
    --bg-card: #ffffff;
    --card-alt-bg: #f8fafc;
    --sidebar-bg: rgba(255, 255, 255, 0.94);
    --sidebar-border: #e2e8f0;
    --sidebar-text: #475569;
    --sidebar-text-hover: #0f172a;
    --sidebar-text-active: #0f172a;
    --sidebar-item-hover-bg: #f1f5f9;
    --sidebar-item-active-bg: rgba(var(--primary-rgb, 255, 71, 87), 0.08);
    --sidebar-label-color: #94a3b8;
    --sidebar-user-bg: #f8fafc;
    --sidebar-user-border: #e2e8f0;
    --border-color: #e2e8f0;
    --border: #e2e8f0;
    --text-main: #0f172a;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --input-bg: #f8fafc;
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
    --scrollbar-thumb: rgba(100, 116, 139, 0.35);
    --scrollbar-track: transparent;
}

/* Browser UI Theming (::selection, ::placeholder, ::file-selector-button, textarea) */
::selection {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.2);
    color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

textarea {
    resize: vertical;
}

input[type="file"]::file-selector-button {
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Standard Scrollbar Styling with Legacy WebKit Fallback */
.content-area,
.sidebar-nav,
.table-container,
.modal-body,
.orders-drawer-body,
.kanban-items,
.order-app-items-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

@supports not (scrollbar-color: auto) {
    .content-area::-webkit-scrollbar,
    .sidebar-nav::-webkit-scrollbar,
    .table-container::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .orders-drawer-body::-webkit-scrollbar,
    .kanban-items::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .content-area::-webkit-scrollbar-thumb,
    .sidebar-nav::-webkit-scrollbar-thumb,
    .table-container::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .orders-drawer-body::-webkit-scrollbar-thumb,
    .kanban-items::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb);
        border-radius: 9999px;
    }

    .content-area::-webkit-scrollbar-track,
    .sidebar-nav::-webkit-scrollbar-track,
    .table-container::-webkit-scrollbar-track,
    .modal-body::-webkit-scrollbar-track,
    .orders-drawer-body::-webkit-scrollbar-track,
    .kanban-items::-webkit-scrollbar-track {
        background: var(--scrollbar-track);
    }
}

/* 1. SIDEBAR REFINEMENT (Linear / Stripe Enterprise Aesthetic) */
.sidebar {
    box-shadow: 1px 0 0 var(--sidebar-border), 4px 0 24px rgba(15, 23, 42, 0.02);
}

body.dark-mode .sidebar {
    background: #070709;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.07);
}

.sidebar-nav {
    padding: 12px 10px;
    gap: 3px;
}

.nav-section-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.65px;
    color: var(--sidebar-label-color);
    padding: 14px 12px 5px 12px;
}

.nav-item {
    height: 39px;
    padding: 0 12px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 500;
    gap: 11px;
    position: relative;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item i {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 7px;
    opacity: 0.8;
    transition: all 0.18s ease;
}

.nav-item:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-text-hover);
    transform: translateX(2px);
}

.nav-item.active {
    background: var(--sidebar-item-active-bg);
    color: var(--primary, #ff4757);
    font-weight: 700;
    border-radius: 11px;
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.18);
    box-shadow: 0 2px 10px rgba(var(--primary-rgb, 255, 71, 87), 0.06);
}

body.dark-mode .nav-item.active {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.14);
    color: #ffffff;
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.28);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;
    width: 3.5px;
    border-radius: 0 4px 4px 0;
    background: var(--primary, #ff4757);
}

.sidebar.collapsed .nav-item.active::before {
    left: -8px;
}

.nav-item.active i {
    opacity: 1;
    color: var(--primary, #ff4757);
}

/* 2. TOP PAGE HEADER & BREADCRUMB / UTILITY CLUSTER */
.page-header {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 10px 26px;
    min-height: 58px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

body.dark-mode .page-header {
    background: rgba(9, 9, 11, 0.88);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-title-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-breadcrumb-root {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 8px;
}

.page-breadcrumb-root i {
    color: var(--primary, #ff4757);
    font-size: 11px;
}

.page-breadcrumb-sep {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.55;
}

.page-header h1#pageTitle {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.header-utility-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

.header-utility-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.18s ease;
}

.header-utility-pill i:first-child {
    color: #10b981;
    font-size: 12.5px;
}

.header-utility-pill .util-ext-icon {
    font-size: 9.5px;
    color: var(--text-muted);
    opacity: 0.7;
}

.header-utility-pill:hover {
    border-color: rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.07);
    transform: translateY(-1px);
}

.header-utility-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    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: 13px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.header-utility-icon-btn:hover {
    color: var(--primary, #ff4757);
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.35);
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.06);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .page-breadcrumb-root,
    .page-breadcrumb-sep,
    .header-utility-cluster .util-pill-text,
    .header-utility-cluster .header-utility-icon-btn:last-child {
        display: none;
    }
    .header-utility-pill {
        padding: 0 9px;
        height: 32px;
    }
    .header-utility-icon-btn {
        width: 32px;
        height: 32px;
    }
}

/* 3. DASHBOARD HERO & QUICK TERMINALS BAR */
.dash-hero-app {
    margin-bottom: 20px;
}

.dash-hero-glass-surface {
    border-radius: 22px;
    padding: 18px 24px;
    gap: 16px;
    border: 1px solid var(--border-color);
}

body.light-mode .dash-hero-glass-surface {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03), 0 10px 28px -6px rgba(15, 23, 42, 0.04);
}

body.dark-mode .dash-hero-glass-surface {
    background: linear-gradient(145deg, #111115 0%, #09090b 100%);
    border-color: rgba(255, 255, 255, 0.085);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.dash-avatar-inner {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 21px;
}

.dash-welcome-title {
    font-size: 20px;
    letter-spacing: -0.45px;
}

.dash-live-clock-widget {
    border-radius: 16px;
    padding: 10px 18px;
    min-width: 205px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
}

.dash-clock-hms {
    font-size: 26px;
}

.dash-clock-sec {
    font-size: 17px;
}

.dash-command-bar {
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

.dash-app-select {
    height: 36px;
    padding: 0 34px 0 34px;
    border-radius: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    font-size: 12.5px;
}

.dash-app-action-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.dash-app-action-btn.btn-orders-hub {
    background: rgba(255, 71, 87, 0.1);
    border-color: rgba(255, 71, 87, 0.25);
    color: #ff4757;
}

.dash-app-action-btn.btn-orders-hub:hover {
    background: #ff4757;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

/* Preserve KPI Card Flex Alignment & Dark Mode Colored Borders */
.dashboard-header-stats .stat-card {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

#view-benefits .dashboard-header-stats .stat-card:not(:has(.stat-card-top)) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
}

body.dark-mode .stat-card-sales {
    background: linear-gradient(155deg, rgba(16, 185, 129, 0.08) 0%, #09090b 65%) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
body.dark-mode .stat-card-orders {
    background: linear-gradient(155deg, rgba(139, 92, 246, 0.08) 0%, #09090b 65%) !important;
    border-color: rgba(139, 92, 246, 0.25) !important;
}
body.dark-mode .stat-card-delivery,
body.dark-mode .stat-card-pos {
    background: linear-gradient(155deg, rgba(14, 165, 233, 0.08) 0%, #09090b 65%) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
}
body.dark-mode .stat-card-alerts,
body.dark-mode .stat-card-web {
    background: linear-gradient(155deg, rgba(245, 158, 11, 0.08) 0%, #09090b 65%) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

/* 4. DASHBOARD CARDS, TOP PRODUCTS & KANBAN MONITOR */
.dashboard-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.dashboard-card .card-header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-card .card-body {
    padding: 18px 22px;
}

.top-list-item {
    border: 1px solid var(--border-color);
    background: var(--card-alt-bg);
    padding: 10px 12px;
    border-radius: 14px;
}

.top-list-item:hover {
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.3);
    background: var(--card-bg);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.kanban-col {
    border-radius: 16px;
    padding: 14px 12px;
}

body.light-mode .kanban-col-pending { background: #fffbeb; border-color: rgba(245, 158, 11, 0.3); }
body.light-mode .kanban-col-cooking { background: #fef2f2; border-color: rgba(239, 68, 68, 0.25); }
body.light-mode .kanban-col-ready { background: #f0f9ff; border-color: rgba(14, 165, 233, 0.3); }
body.light-mode .kanban-col-delivering { background: #f0fdf4; border-color: rgba(16, 185, 129, 0.3); }

/* 5. UNIFIED DATA TABLES (Sticky Headers & Container Query Support) */
.table-container {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow-x: auto;
    container-type: inline-size;
    padding: 0;
}

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table thead {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

.data-table th,
.data-table-app thead th {
    padding: 13px 18px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--text-muted);
    background: var(--card-alt-bg);
    border-bottom: 1px solid var(--border-color);
    border-radius: 0 !important;
    vertical-align: middle;
}

.data-table td,
.data-table-app tbody td {
    padding: 14px 18px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.035);
}

/* 6. UNIFIED FORMS, INPUTS, MODALS & MODULE CARDS */
.form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.form-group select,
.form-group textarea,
.input-modern,
.select-modern {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 13px;
    padding: 9px 13px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.input-modern:focus,
.select-modern:focus {
    outline: none;
    border-color: var(--primary, #ff4757);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.14);
}

.modal-overlay {
    background: rgba(9, 9, 11, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal {
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.modal-header {
    padding: 18px 24px;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.25px;
}

.modal-footer {
    padding: 16px 24px;
    background: var(--card-alt-bg);
    border-top: 1px solid var(--border-color);
}

/* ========================================================================== */
/* RESPONSIVE ERGONOMICS & MOBILE BOTTOM NAV CLEARANCE                        */
/* ========================================================================== */
.catalog-tabs-switcher .tab-label-short {
    display: none;
}
.catalog-tabs-switcher .tab-label-full {
    display: inline;
}

@media (max-width: 768px) {
    .catalog-tabs-switcher .tab-label-full {
        display: none !important;
    }
    .catalog-tabs-switcher .tab-label-short {
        display: inline !important;
    }
    .catalog-tabs-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .catalog-tabs-switcher {
        width: 100% !important;
        display: flex !important;
        box-sizing: border-box !important;
    }
    .catalog-tabs-switcher .switch-btn {
        flex: 1 1 0 !important;
        padding: 8px 6px !important;
        font-size: 11.5px !important;
        gap: 5px !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }
    .catalog-tabs-switcher .switch-btn i {
        font-size: 11.5px !important;
    }

    /* Safe Bottom Clearance for Mobile Nav Bar */
    .content-area,
    .catalog-main-card,
    .view-section {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 24px)) !important;
    }
    .mobile-app-cards-container {
        padding-bottom: 24px !important;
    }
    .mobile-app-cards-container > .app-touch-card:last-child {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 480px) {
    .app-touch-card-actions {
        display: grid !important;
        grid-template-columns: 2fr 1.6fr 1fr 1fr 1fr;
        gap: 6px !important;
        width: 100% !important;
    }
    .app-touch-card-actions .app-touch-btn {
        width: 100% !important;
        padding: 8px 4px !important;
        font-size: 11.5px !important;
        justify-content: center !important;
        min-height: 36px !important;
    }
    .app-touch-card-actions .app-touch-btn i {
        font-size: 11.5px !important;
    }
}


/* ========================================================================== */
/* SAAS ENTERPRISE SETTINGS DESIGN SYSTEM (APARIENCIA, LOGIN, SEO, IAM, DEVOPS) */
/* ========================================================================== */

.saas-config-card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body:not(.light-mode) .saas-config-card,
body.dark-mode .saas-config-card {
    background: #111318;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.saas-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.04) 0%, transparent 100%);
    flex-wrap: wrap;
}

body:not(.light-mode) .saas-card-header,
body.dark-mode .saas-card-header {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.saas-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.saas-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.saas-card-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.015em;
}

.saas-card-subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.saas-card-body {
    padding: 22px;
}

.saas-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.22);
    white-space: nowrap;
}

.saas-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.saas-field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #1e293b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.saas-field-hint {
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.saas-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.saas-input-icon-wrap > i {
    position: absolute;
    left: 13px;
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
    pointer-events: none;
}

.saas-input-icon-wrap > .form-control {
    padding-left: 36px !important;
    border-radius: 10px !important;
    height: 40px;
    font-size: 0.85rem;
}

.saas-textarea {
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    padding: 10px 13px !important;
}

/* Branded Select with Modern Progressive Enhancement */
.saas-select {
    appearance: none;
    border-radius: 10px !important;
    height: 40px;
    font-size: 0.84rem !important;
    font-weight: 600;
    padding-right: 34px !important;
    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='%2364748b' stroke-width='2.5' 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 12px center;
    cursor: pointer;
}

@supports (appearance: base-select) {
    .saas-select {
        appearance: base-select;
    }
}

/* --- 1. APARIENCIA: SELECTOR DE TIPOGRAFÍA (INTER & SPACE GROTESK) --- */
.saas-typo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.saas-typo-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.light-mode) .saas-typo-card,
body.dark-mode .saas-typo-card {
    background: #171a21;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-typo-card:hover {
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-2px);
}

.saas-typo-card.active {
    border-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.03) 100%);
    box-shadow: 0 6px 20px -4px rgba(99, 102, 241, 0.22);
}

.saas-typo-preview {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body:not(.light-mode) .saas-typo-preview,
body.dark-mode .saas-typo-preview {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-typo-card.active .saas-typo-preview {
    background: #6366f1;
    color: #ffffff;
    border-color: #6366f1;
}

.saas-typo-meta {
    flex: 1;
    min-width: 0;
}

.saas-typo-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.saas-typo-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-typo-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.saas-typo-card.active .saas-typo-tag {
    background: rgba(99, 102, 241, 0.16);
    color: #6366f1;
}

.saas-typo-desc {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.saas-typo-sample {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-main, #334155);
    padding: 5px 9px;
    border-radius: 7px;
    background: rgba(148, 163, 184, 0.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saas-typo-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.saas-typo-card.active .saas-typo-check {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
}

/* --- PALETA DE COLORES DE MARCA --- */
.saas-theme-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.saas-color-studio-card {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 18px;
    background: var(--bg-color, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body:not(.light-mode) .saas-color-studio-card.light-theme-card,
body.dark-mode .saas-color-studio-card.light-theme-card {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-color-studio-card.dark-theme-card {
    background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
    border-color: rgba(148, 163, 184, 0.2);
    color: #f8fafc;
}

.saas-color-studio-card.dark-theme-card .saas-color-mode-badge {
    color: #e2e8f0;
}

.saas-color-studio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saas-color-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-color-mode-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
}

.saas-color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
}

.saas-color-studio-card.dark-theme-card .saas-color-picker-row {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
}

body:not(.light-mode) .saas-color-picker-row,
body.dark-mode .saas-color-picker-row {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-color-swatch-trigger {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
}

.saas-color-swatch-trigger input[type="color"] {
    position: absolute;
    inset: -8px;
    width: 56px;
    height: 56px;
    opacity: 0;
    cursor: pointer;
}

.saas-color-hex-meta {
    display: flex;
    flex-direction: column;
}

.saas-color-hex-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
    font-weight: 700;
}

.saas-color-hex-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-color-studio-card.dark-theme-card .saas-color-hex-code {
    color: #ffffff;
}

.saas-color-presets {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.saas-presets-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
}

.saas-presets-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.saas-preset-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.saas-preset-dot:hover {
    transform: scale(1.2);
}

/* --- LOGOS & ACTIVOS DE MARCA --- */
.saas-logos-studio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.saas-logo-asset-card {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 14px;
    background: var(--bg-color, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

body:not(.light-mode) .saas-logo-asset-card,
body.dark-mode .saas-logo-asset-card {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-logo-asset-card:hover {
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.45);
    transform: translateY(-2px);
}

.saas-logo-asset-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.saas-logo-asset-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-logo-asset-spec {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}

.saas-logo-dim-tag {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted, #64748b);
}

.saas-logo-canvas {
    height: 110px;
    border-radius: 10px;
    border: 1px dashed var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.saas-canvas-checkered {
    background-color: #f8fafc;
    background-image: linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

body:not(.light-mode) .saas-canvas-checkered,
body.dark-mode .saas-canvas-checkered {
    background-color: #111318;
    background-image: linear-gradient(45deg, #1e222b 25%, transparent 25%), linear-gradient(-45deg, #1e222b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e222b 75%), linear-gradient(-45deg, transparent 75%, #1e222b 75%);
}

.saas-canvas-light {
    background: #ffffff;
    border-color: #e2e8f0;
}

.saas-canvas-dark {
    background: #0f172a;
    border-color: #334155;
}

.saas-logo-canvas img {
    max-width: 100%;
    max-height: 82px;
    object-fit: contain;
}

.saas-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 600;
}

.saas-logo-placeholder i {
    font-size: 1.4rem;
    opacity: 0.65;
}

.saas-logo-upload-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: 9px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #1e293b);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

body:not(.light-mode) .saas-logo-upload-btn,
body.dark-mode .saas-logo-upload-btn {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.saas-logo-upload-btn:hover {
    border-color: var(--primary, #ff4757);
    color: var(--primary, #ff4757);
}

/* --- 2. LOGIN STUDIO --- */
.saas-login-bg-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

body:not(.light-mode) .saas-login-bg-mode-bar,
body.dark-mode .saas-login-bg-mode-bar {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-segmented-pills {
    display: inline-flex;
    background: var(--card-bg, #ffffff);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    gap: 4px;
}

body:not(.light-mode) .saas-segmented-pills,
body.dark-mode .saas-segmented-pills {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-seg-pill {
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    padding: 6px 13px;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.saas-seg-pill.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 255, 71, 87), 0.3);
}

.saas-login-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.saas-login-color-box {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-login-color-box,
body.dark-mode .saas-login-color-box {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-login-color-box label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}

.saas-login-presets-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px dashed var(--border-color, #cbd5e1);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.saas-grad-preset {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.saas-grad-preset:hover {
    transform: scale(1.15);
}

.saas-login-logo-studio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    flex-wrap: wrap;
}

body:not(.light-mode) .saas-login-logo-studio,
body.dark-mode .saas-login-logo-studio {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-login-logo-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.saas-login-logo-canvas {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: #0f172a;
    border: 1px dashed #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.saas-login-logo-canvas img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.saas-btn-add-slide {
    padding: 8px 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
    transition: transform 0.15s ease;
}

.saas-btn-add-slide:hover {
    transform: translateY(-1px);
}

.saas-mockup-sticky-card {
    position: sticky;
    top: 20px;
}

/* --- 3. SEO PRO SUITE & SIMULADOR SERP / OPEN GRAPH --- */
.saas-seo-split-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 24px;
    align-items: start;
}

.saas-seo-progress-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
    margin-top: 2px;
}

.saas-seo-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #10b981;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.saas-seo-simulator-card {
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 16px;
}

body:not(.light-mode) .saas-seo-simulator-card,
body.dark-mode .saas-seo-simulator-card {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-seo-sim-header {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.saas-serp-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    font-family: Arial, sans-serif;
}

body:not(.light-mode) .saas-serp-card,
body.dark-mode .saas-serp-card {
    background: #1f242d;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-serp-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.saas-serp-favicon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.saas-serp-site-name {
    font-size: 13px;
    color: #202124;
    font-weight: 600;
}

body:not(.light-mode) .saas-serp-site-name,
body.dark-mode .saas-serp-site-name {
    color: #e2e8f0;
}

.saas-serp-url {
    font-size: 11.5px;
    color: #4d5156;
}

body:not(.light-mode) .saas-serp-url,
body.dark-mode .saas-serp-url {
    color: #94a3b8;
}

.saas-serp-title {
    font-size: 18px;
    font-weight: 400;
    color: #1a0dab;
    line-height: 1.3;
    margin-bottom: 4px;
    word-break: break-word;
}

body:not(.light-mode) .saas-serp-title,
body.dark-mode .saas-serp-title {
    color: #8ab4f8;
}

.saas-serp-desc {
    font-size: 13px;
    color: #4d5156;
    line-height: 1.45;
    word-break: break-word;
}

body:not(.light-mode) .saas-serp-desc,
body.dark-mode .saas-serp-desc {
    color: #bdc1c6;
}

.saas-og-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
}

body:not(.light-mode) .saas-og-card,
body.dark-mode .saas-og-card {
    background: #1f242d;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-og-image-box {
    height: 155px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.saas-og-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saas-og-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 600;
}

.saas-og-placeholder i {
    font-size: 1.6rem;
    opacity: 0.7;
}

.saas-og-body {
    padding: 12px 14px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.saas-og-domain {
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.saas-og-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saas-og-desc {
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.saas-seo-tips-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    padding: 14px 16px;
}

.saas-seo-tips-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #10b981;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.saas-seo-tips-list {
    margin: 0;
    padding-left: 18px;
    font-size: 0.75rem;
    color: var(--text-main, #334155);
    line-height: 1.55;
}

.saas-marketing-pixels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.saas-pixel-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body:not(.light-mode) .saas-pixel-card,
body.dark-mode .saas-pixel-card {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-pixel-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.saas-pixel-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.saas-pixel-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-pixel-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
}

/* --- 4. USUARIOS (IAM) & ROLES (RBAC) --- */
.saas-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.saas-kpi-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-kpi-box,
body.dark-mode .saas-kpi-box {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.saas-kpi-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.saas-kpi-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.saas-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.saas-search-box {
    position: relative;
    flex: 1;
    min-width: 240px;
    max-width: 420px;
}

.saas-search-box i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: 0.85rem;
}

.saas-search-box input {
    width: 100%;
    height: 38px;
    padding: 0 14px 0 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    color: var(--text-main, #0f172a);
    font-size: 0.83rem;
    outline: none;
    transition: border-color 0.2s ease;
}

body:not(.light-mode) .saas-search-box input,
body.dark-mode .saas-search-box input {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-search-box input:focus {
    border-color: var(--primary, #3b82f6);
}

.saas-filter-pills {
    display: inline-flex;
    gap: 6px;
    background: var(--bg-color, #f1f5f9);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
}

body:not(.light-mode) .saas-filter-pills,
body.dark-mode .saas-filter-pills {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-filter-pill {
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    padding: 5px 12px;
    border-radius: 7px;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.saas-filter-pill.active {
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #0f172a);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body:not(.light-mode) .saas-filter-pill.active,
body.dark-mode .saas-filter-pill.active {
    background: #262b36;
    color: #ffffff;
}

.saas-modern-table-wrap {
    container-type: inline-size;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow-x: auto;
}

.saas-id-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.user-sub-email {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

.saas-username-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.saas-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}

.saas-pin-chip.has-pin {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.saas-pin-chip.no-pin {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted, #94a3b8);
}

.role-perms-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.role-perm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 700;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-main, #334155);
}

.role-perm-chip.is-super {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.35);
}

.role-perm-chip.is-empty {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.role-badge-custom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

/* --- 5. COPIAS DE SEGURIDAD, OTA SYNC & HISTORIAL DE CAMBIOS --- */
.saas-devops-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.saas-telemetry-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body:not(.light-mode) .saas-telemetry-card,
body.dark-mode .saas-telemetry-card {
    background: #111318;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-telemetry-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.saas-telemetry-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
}

.saas-telemetry-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-telemetry-sub {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 2px;
}

.saas-backup-vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.saas-vault-action-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-vault-action-card,
body.dark-mode .saas-vault-action-card {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-vault-action-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.saas-vault-badge-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.saas-vault-action-top h4 {
    margin: 0 0 4px;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-vault-action-top p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.saas-changelog-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 14px;
}

.saas-changelog-timeline::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--border-color, #e2e8f0);
}

body:not(.light-mode) .saas-changelog-timeline::before,
body.dark-mode .saas-changelog-timeline::before {
    background: rgba(255, 255, 255, 0.08);
}

.saas-changelog-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.saas-changelog-marker {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #6366f1;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-top: 4px;
}

.saas-changelog-marker.is-commit-dot {
    background: var(--card-bg, #ffffff);
    color: #6366f1;
    border: 2px solid #6366f1;
}

body:not(.light-mode) .saas-changelog-marker.is-commit-dot,
body.dark-mode .saas-changelog-marker.is-commit-dot {
    background: #161920;
}

.saas-changelog-content {
    flex: 1;
    min-width: 0;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-changelog-content,
body.dark-mode .saas-changelog-content {
    background: #161920;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-changelog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.saas-changelog-version {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-changelog-badge {
    font-size: 0.66rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.saas-changelog-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-changelog-date {
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

.saas-changelog-list {
    margin: 10px 0 0;
    padding-left: 18px;
    font-size: 0.79rem;
    color: var(--text-muted, #475569);
    line-height: 1.6;
}

body:not(.light-mode) .saas-changelog-list,
body.dark-mode .saas-changelog-list {
    color: #94a3b8;
}

.saas-commit-sha {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

.saas-commit-msg {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.saas-commit-desc {
    margin-top: 6px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    white-space: pre-line;
}

@media (max-width: 992px) {
    .saas-seo-split-layout {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* COMPLETE SAAS STUDIO STYLES FOR APPEARANCE, LOGIN, SEO & DEVOPS            */
/* ========================================================================== */

/* --- Card Icons & Eyebrows --- */
.saas-icon-violet {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(99, 102, 241, 0.08) 100%) !important;
    color: #7c3aed !important;
    border: 1px solid rgba(124, 58, 237, 0.22);
}

.saas-icon-pink {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.14) 0%, rgba(244, 63, 94, 0.08) 100%) !important;
    color: #ec4899 !important;
    border: 1px solid rgba(236, 72, 153, 0.22);
}

.saas-icon-indigo {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.14) 0%, rgba(99, 102, 241, 0.08) 100%) !important;
    color: #4f46e5 !important;
    border: 1px solid rgba(79, 70, 229, 0.22);
}

.saas-icon-blue {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
    color: #2563eb !important;
    border: 1px solid rgba(37, 99, 235, 0.22);
}

.saas-icon-emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.08) 100%) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.22);
}

.saas-card-eyebrow {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary, #6516f7);
    margin-bottom: 2px;
}

.saas-header-badge,
.saas-format-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.24);
    white-space: nowrap;
}

body:not(.light-mode) .saas-header-badge,
body.dark-mode .saas-header-badge,
body:not(.light-mode) .saas-format-pill,
body.dark-mode .saas-format-pill {
    color: #34d399;
    background: rgba(16, 185, 129, 0.14);
}

.saas-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    display: inline-block;
}

/* --- Section Blocks & Dividers --- */
.saas-section-block {
    padding: 4px 0;
}

.saas-section-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.saas-block-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin-bottom: 3px;
}

.saas-block-subtitle {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.saas-native-select-sync {
    height: 38px;
    padding: 0 34px 0 13px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color, #e2e8f0);
    background-color: var(--bg-color, #f8fafc);
    color: var(--text-main, #0f172a);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body:not(.light-mode) .saas-native-select-sync,
body.dark-mode .saas-native-select-sync {
    background-color: #161920;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

.saas-native-select-sync:focus {
    border-color: var(--primary, #6516f7);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 101, 22, 247), 0.15);
}

.saas-divider {
    height: 1px;
    background: var(--border-color, #e2e8f0);
    margin: 22px 0;
}

body:not(.light-mode) .saas-divider,
body.dark-mode .saas-divider {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Typography Cards (`#typoCard_Inter`, `#typoCard_SpaceGrotesk`) --- */
.saas-typo-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--border-color, #e2e8f0) !important;
    background: var(--bg-color, #f8fafc) !important;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

body:not(.light-mode) .saas-typo-card,
body.dark-mode .saas-typo-card {
    background: #161922 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.saas-typo-card:hover {
    border-color: rgba(var(--primary-rgb, 101, 22, 247), 0.45) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.08);
}

.saas-typo-card.active {
    border-color: var(--primary, #6516f7) !important;
    background: linear-gradient(145deg, rgba(var(--primary-rgb, 101, 22, 247), 0.06) 0%, rgba(var(--primary-rgb, 101, 22, 247), 0.015) 100%) !important;
    box-shadow: 0 8px 24px -6px rgba(var(--primary-rgb, 101, 22, 247), 0.2) !important;
}

.saas-typo-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.saas-typo-specimen {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
}

body:not(.light-mode) .saas-typo-specimen,
body.dark-mode .saas-typo-specimen {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
}

.saas-typo-card.active .saas-typo-specimen {
    background: var(--primary, #6516f7);
    border-color: var(--primary, #6516f7);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(var(--primary-rgb, 101, 22, 247), 0.32);
}

.saas-typo-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.saas-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.saas-pill-primary {
    background: rgba(var(--primary-rgb, 101, 22, 247), 0.12);
    color: var(--primary, #6516f7);
    border: 1px solid rgba(var(--primary-rgb, 101, 22, 247), 0.25);
}

.saas-pill-tech {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

body:not(.light-mode) .saas-pill-tech,
body.dark-mode .saas-pill-tech {
    color: #60a5fa;
}

.saas-pill-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

body:not(.light-mode) .saas-pill-emerald,
body.dark-mode .saas-pill-emerald {
    color: #34d399;
}

.saas-typo-radio-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    background: var(--card-bg, #ffffff);
    transition: all 0.2s ease;
}

body:not(.light-mode) .saas-typo-radio-check,
body.dark-mode .saas-typo-radio-check {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.16);
}

.saas-typo-card.active .saas-typo-radio-check {
    background: var(--primary, #6516f7);
    border-color: var(--primary, #6516f7);
    color: #ffffff;
}

.saas-typo-meta h4 {
    margin: 0 0 2px;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-typo-category {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--primary, #6516f7);
    margin-bottom: 8px;
}

.saas-typo-sample {
    margin: 0 0 10px !important;
    font-size: 0.8rem !important;
    color: var(--text-muted, #64748b) !important;
    line-height: 1.45 !important;
    background: transparent !important;
    padding: 0 !important;
    white-space: normal !important;
}

.saas-typo-chars {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-main, #334155);
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.16);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:not(.light-mode) .saas-typo-chars,
body.dark-mode .saas-typo-chars {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* --- Color Studio Cards (`mode-light-card` & `mode-dark-card`) --- */
.saas-color-studio-card.mode-light-card {
    background: var(--bg-color, #f8fafc);
    border: 1.5px solid var(--border-color, #e2e8f0);
}

body:not(.light-mode) .saas-color-studio-card.mode-light-card,
body.dark-mode .saas-color-studio-card.mode-light-card {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-color-studio-card.mode-dark-card {
    background: linear-gradient(145deg, #0f172a 0%, #171532 100%);
    border: 1.5px solid rgba(139, 92, 246, 0.25);
    color: #f8fafc;
}

.saas-color-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saas-color-mode-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-color-mode-tag.light i {
    color: #f59e0b;
}

.saas-color-mode-tag.dark {
    color: #f8fafc;
}

.saas-color-mode-tag.dark i {
    color: #a855f7;
}

.saas-color-wcag-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted, #64748b);
}

.mode-dark-card .saas-color-wcag-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.saas-color-trigger {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.saas-color-trigger .color-swatch {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: var(--primary, #ff4757);
}

.saas-color-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.saas-color-trigger:hover .saas-color-edit-overlay {
    opacity: 1;
}

.saas-color-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.saas-color-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}

.mode-dark-card .saas-color-label {
    color: #94a3b8;
}

.saas-hex-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saas-hex-badge-row .app-color-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.mode-dark-card .saas-color-picker-row {
    background: rgba(15, 23, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
}

.mode-dark-card .saas-hex-badge-row .app-color-code {
    color: #ffffff;
}

.saas-btn-ghost-xs {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-color, #f8fafc);
    color: var(--text-main, #334155);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.mode-dark-card .saas-btn-ghost-xs {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #e2e8f0;
}

.saas-btn-ghost-xs:hover {
    border-color: var(--primary, #6516f7);
    color: var(--primary, #6516f7);
}

.saas-presets-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.mode-dark-card .saas-presets-label {
    color: #94a3b8;
}

/* --- Brand Assets & Logo Cards (`.saas-logo-asset-card`) --- */
.saas-logo-asset-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.saas-logo-asset-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.saas-logo-asset-title h4 {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-asset-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.saas-spec-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted, #64748b);
}

.saas-logo-dropzone {
    position: relative;
    height: 125px !important;
    border-radius: 12px !important;
    border: 1.5px dashed var(--border-color, #cbd5e1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.saas-dropzone-light {
    background-color: #ffffff !important;
}

.saas-dropzone-dark {
    background-color: #0f172a !important;
    background-image: linear-gradient(45deg, #1e293b 25%, transparent 25%), linear-gradient(-45deg, #1e293b 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1e293b 75%), linear-gradient(-45deg, transparent 75%, #1e293b 75%) !important;
    background-size: 16px 16px !important;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0 !important;
    border-color: #334155 !important;
}

.saas-logo-dropzone .preview-img {
    max-width: 90%;
    max-height: 90px;
    object-fit: contain;
}

.saas-logo-hover-action {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.saas-logo-hover-action span {
    padding: 7px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.saas-logo-dropzone:hover .saas-logo-hover-action,
.saas-login-logo-box:hover .saas-logo-hover-action,
.saas-og-dropzone:hover .saas-logo-hover-action {
    opacity: 1;
}

.saas-logo-asset-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: space-between;
}

.saas-logo-asset-foot p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.saas-asset-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #1e293b);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.18s ease;
}

body:not(.light-mode) .saas-asset-btn,
body.dark-mode .saas-asset-btn {
    background: #0d0f14;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.saas-asset-btn:hover {
    border-color: var(--primary, #6516f7);
    color: var(--primary, #6516f7);
    background: rgba(var(--primary-rgb, 101, 22, 247), 0.05);
}

/* --- Login Studio Specific Classes --- */
.saas-login-bg-mode-info label {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin-bottom: 2px;
}

.saas-login-bg-mode-info span {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
}

.saas-presets-strip-label {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--text-main, #334155);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body:not(.light-mode) .saas-presets-strip-label,
body.dark-mode .saas-presets-strip-label {
    color: #e2e8f0;
}

.saas-login-preset-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.saas-gradient-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #1e293b);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

body:not(.light-mode) .saas-gradient-chip,
body.dark-mode .saas-gradient-chip {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.saas-gradient-chip:hover {
    border-color: var(--primary, #6516f7);
    transform: translateY(-1px);
}

.saas-gradient-chip .chip-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.saas-login-color-card {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-login-color-card,
body.dark-mode .saas-login-color-card {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-login-color-card > label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    margin-bottom: 10px;
}

.saas-login-logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    flex-wrap: wrap;
}

body:not(.light-mode) .saas-login-logo-row,
body.dark-mode .saas-login-logo-row {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-login-logo-meta {
    flex: 1;
    min-width: 220px;
}

.saas-login-logo-meta p {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.saas-login-logo-box {
    position: relative;
    width: 190px;
    height: 105px !important;
    border-radius: 12px !important;
    border: 1.5px dashed var(--border-color, #cbd5e1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.saas-btn-primary-glow {
    border-radius: 10px !important;
    padding: 9px 16px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb, 101, 22, 247), 0.28) !important;
}

.saas-dashed-add-btn {
    margin-top: 14px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1.5px dashed var(--border-color, #cbd5e1);
    background: rgba(var(--primary-rgb, 101, 22, 247), 0.03);
    color: var(--text-main, #1e293b);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}

.saas-dashed-add-btn:hover {
    border-color: var(--primary, #6516f7);
    background: rgba(var(--primary-rgb, 101, 22, 247), 0.08);
}

/* --- SEO Suite Specific Classes --- */
.saas-label-with-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.saas-char-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.saas-progress-bar-track {
    height: 5px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
    margin-top: 6px;
}

.saas-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: #10b981;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.saas-og-upload-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 6px;
}

.saas-og-dropzone {
    position: relative;
    height: 150px !important;
    border-radius: 12px !important;
    border: 1.5px dashed var(--border-color, #cbd5e1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}

.saas-og-specs-box {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

body:not(.light-mode) .saas-og-specs-box,
body.dark-mode .saas-og-specs-box {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-og-specs-box h5 {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-og-specs-box ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
    line-height: 1.55;
}

.saas-preview-section-tag {
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.saas-serp-site-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.saas-serp-site-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.saas-serp-sitename {
    font-size: 13px;
    font-weight: 700;
    color: #202124;
}

body:not(.light-mode) .saas-serp-sitename,
body.dark-mode .saas-serp-sitename {
    color: #e2e8f0;
}

.saas-serp-rich-snippet {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.25);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted, #64748b);
}

.saas-serp-rich-snippet .serp-stars {
    color: #f59e0b;
    font-size: 11px;
    display: inline-flex;
    gap: 2px;
}

.saas-og-img-stage {
    height: 165px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.saas-og-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
}

.saas-og-img-placeholder i {
    font-size: 1.8rem;
    opacity: 0.6;
}

.saas-og-card-body {
    padding: 12px 14px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* --- Backup, OTA & DevOps Specific Classes --- */
.saas-devops-telemetry-grid {
    margin-bottom: 20px;
}

.saas-telemetry-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.saas-telemetry-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.saas-telemetry-value-row strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-vault-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saas-vault-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.74rem;
    font-weight: 800;
}

.saas-vault-badge.export {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.saas-vault-badge.restore {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.saas-vault-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-muted, #64748b);
}

.saas-vault-tag.warning {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.saas-vault-action-card h4 {
    margin: 4px 0 2px;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-vault-action-card p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    line-height: 1.45;
}

.saas-vault-checklist {
    margin: 4px 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.saas-vault-checklist li {
    font-size: 0.76rem;
    color: var(--text-main, #334155);
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

body:not(.light-mode) .saas-vault-checklist li,
body.dark-mode .saas-vault-checklist li {
    color: #cbd5e1;
}

.saas-vault-checklist li i {
    color: #10b981;
}

.saas-btn-full {
    width: 100%;
    justify-content: center;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 700 !important;
}

.saas-devops-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.saas-ota-action-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.saas-ota-buttons-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.saas-btn-github-sync {
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-color, #f8fafc);
    color: var(--text-main, #0f172a);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all 0.18s ease;
}

body:not(.light-mode) .saas-btn-github-sync,
body.dark-mode .saas-btn-github-sync {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.saas-btn-github-sync:hover {
    border-color: var(--primary, #6516f7);
    color: var(--primary, #6516f7);
}

.saas-manual-zip-Accordion {
    margin-top: 6px;
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-manual-zip-Accordion,
body.dark-mode .saas-manual-zip-Accordion {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.1);
}

.saas-manual-zip-Accordion summary {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
}

.saas-manual-zip-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.76rem;
    color: var(--text-muted, #64748b);
}

.saas-db-guarantees-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.saas-db-guarantee-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color, #f8fafc);
}

body:not(.light-mode) .saas-db-guarantee-item,
body.dark-mode .saas-db-guarantee-item {
    background: #161922;
    border-color: rgba(255, 255, 255, 0.08);
}

.saas-db-guarantee-item i {
    font-size: 1.15rem;
}

.saas-db-guarantee-item strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
}

.saas-db-guarantee-item span {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted, #64748b);
}

@media (max-width: 768px) {
    .saas-og-upload-row {
        grid-template-columns: 1fr;
    }
    .saas-login-logo-box {
        width: 100%;
    }
}

/* ==========================================================================
   PC HEADER REMOVAL & SIDEBAR ADMIN CARD SUBMENU (SAAS BENTO COMMAND DOCK)
   ========================================================================== */

@media (min-width: 769px) {
    .page-header,
    .page-header.mobile-only-header {
        display: none !important;
    }

    .media-view-section.active {
        min-height: calc(100vh - 44px) !important;
    }

    .media-saas-shell {
        min-height: calc(100vh - 44px) !important;
    }

    .settings-nav-pane {
        max-height: calc(100vh - 40px) !important;
    }
}

.sidebar-user-card-wrap {
    position: relative;
    width: 100%;
}

.sidebar-user-card {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-user-card:hover {
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.4);
    transform: translateY(-1px);
}

.sidebar-user-card-wrap.open .sidebar-user-card {
    border-color: var(--primary, #ff4757);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 255, 71, 87), 0.15);
}

/* Launcher Badge inside Admin User Card */
.sidebar-user-launcher-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb, 255, 71, 87), 0.1);
    border: 1px solid rgba(var(--primary-rgb, 255, 71, 87), 0.22);
    color: var(--primary, #ff4757);
    font-size: 9.5px;
    line-height: 1;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.sidebar-user-launcher-badge .caret-arrow {
    font-size: 8px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-user-card:hover .sidebar-user-launcher-badge {
    background: var(--primary, #ff4757);
    color: #ffffff;
    border-color: var(--primary, #ff4757);
}

.sidebar-user-card-wrap.open .sidebar-user-launcher-badge {
    background: var(--primary, #ff4757);
    color: #ffffff;
    border-color: var(--primary, #ff4757);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb, 255, 71, 87), 0.35);
}

.sidebar-user-card-wrap.open .sidebar-user-launcher-badge .caret-arrow {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-user-launcher-badge {
    display: none;
}

/* Floating Bento Command Dock (To the right of the Sidebar) */
.sidebar-admin-submenu {
    position: fixed;
    left: 270px;
    bottom: 16px;
    width: 396px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 22px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.24),
                0 8px 24px -4px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    z-index: 10050;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px) translateY(8px) scale(0.96);
    transform-origin: bottom left;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
}

.sidebar.collapsed + .sidebar-admin-submenu,
.sidebar.collapsed ~ .sidebar-admin-submenu {
    left: 78px;
}

body.light-mode .sidebar-admin-submenu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
}

body.dark-mode .sidebar-admin-submenu {
    background: rgba(15, 16, 22, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 70px -10px rgba(0, 0, 0, 0.85),
                0 0 0 1px rgba(255, 255, 255, 0.07);
}

.sidebar-admin-submenu.open,
.sidebar-user-card-wrap.open .sidebar-admin-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) translateY(0) scale(1);
}

/* Command Dock Header */
.cmd-dock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.07) 0%, transparent 100%);
}

body.dark-mode .cmd-dock-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 255, 71, 87), 0.12) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.cmd-dock-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.cmd-dock-logo-squircle {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary, #ff4757), #ff6b81);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -3px rgba(var(--primary-rgb, 255, 71, 87), 0.45);
}

.cmd-dock-titles {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cmd-dock-heading {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.cmd-dock-subheading {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-dock-head-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.cmd-dock-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.24);
}

.cmd-dock-close-btn {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.16s ease;
}

body.dark-mode .cmd-dock-close-btn {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.cmd-dock-close-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Section Label inside Bento Command Dock */
.cmd-bento-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #64748b);
}

.cmd-bento-section-label span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cmd-bento-section-label i {
    color: var(--primary, #ff4757);
    font-size: 11px;
}

.cmd-bento-hint {
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.75;
}

/* 2x2 + 1 Bento Grid for Live Terminals */
.cmd-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 14px 14px;
}

.cmd-bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: var(--text-main, #0f172a);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

body.dark-mode .cmd-bento-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.cmd-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(15, 23, 42, 0.12);
}

body.dark-mode .cmd-bento-card:hover {
    box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.55);
}

.cmd-bento-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.cmd-bento-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.cmd-bento-card:hover .cmd-bento-icon {
    transform: scale(1.06);
}

.cmd-bento-ext {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted, #64748b);
    background: rgba(15, 23, 42, 0.04);
    transition: all 0.2s ease;
}

body.dark-mode .cmd-bento-ext {
    background: rgba(255, 255, 255, 0.06);
}

.cmd-bento-card:hover .cmd-bento-ext {
    transform: translate(1px, -1px);
    color: #ffffff;
}

.cmd-bento-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cmd-bento-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.cmd-bento-sub {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Semantic Bento Accent Themes */
.bento-pos .cmd-bento-icon {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}
.bento-pos:hover {
    border-color: rgba(16, 185, 129, 0.45);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
}
.bento-pos:hover .cmd-bento-ext {
    background: #10b981;
}

.bento-orders .cmd-bento-icon {
    background: rgba(255, 71, 87, 0.14);
    color: #ff4757;
}
.bento-orders:hover {
    border-color: rgba(255, 71, 87, 0.45);
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.08) 0%, rgba(255, 71, 87, 0.02) 100%);
}
.bento-orders:hover .cmd-bento-ext {
    background: #ff4757;
}

.bento-cocina .cmd-bento-icon {
    background: rgba(245, 158, 11, 0.14);
    color: #f59e0b;
}
.bento-cocina:hover {
    border-color: rgba(245, 158, 11, 0.45);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
}
.bento-cocina:hover .cmd-bento-ext {
    background: #f59e0b;
}

.bento-moto .cmd-bento-icon {
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
}
.bento-moto:hover {
    border-color: rgba(59, 130, 246, 0.45);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
}
.bento-moto:hover .cmd-bento-ext {
    background: #3b82f6;
}

/* Panoramic Full-Width GPS Logistics Bento Card */
.cmd-bento-card.cmd-bento-wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 13px;
}

.cmd-bento-wide .cmd-bento-body {
    flex: 1;
}

.bento-logistics .cmd-bento-icon {
    background: rgba(139, 92, 246, 0.14);
    color: #8b5cf6;
}

.bento-logistics:hover {
    border-color: rgba(139, 92, 246, 0.45);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.09) 0%, rgba(139, 92, 246, 0.02) 100%);
}

.cmd-bento-pill-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.25);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bento-logistics:hover .cmd-bento-pill-cta {
    background: #8b5cf6;
    color: #ffffff;
    border-color: #8b5cf6;
}

/* Bottom Docked Utility Strip (Ver Tienda & Pantalla Completa) */
.cmd-dock-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 11px 14px 13px;
    background: #f1f5f9;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

body.dark-mode .cmd-dock-footer {
    background: rgba(255, 255, 255, 0.025);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.cmd-utility-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--text-main, #0f172a);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
    font-family: inherit;
    min-width: 0;
}

body.dark-mode .cmd-utility-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.09);
    color: #ffffff;
}

.cmd-utility-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--primary-rgb, 255, 71, 87), 0.4);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.cmd-utility-pill.util-store:hover {
    border-color: rgba(16, 185, 129, 0.45);
}

.cmd-utility-pill.util-fullscreen:hover {
    border-color: rgba(99, 102, 241, 0.45);
}

.cmd-util-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.util-store .cmd-util-icon {
    background: rgba(16, 185, 129, 0.14);
    color: #10b981;
}

.util-fullscreen .cmd-util-icon {
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
}

.cmd-util-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.cmd-util-text strong {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cmd-util-text small {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    line-height: 1.2;
}

.cmd-util-ext {
    font-size: 9.5px;
    color: var(--text-muted, #64748b);
    opacity: 0.7;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .cmd-bento-grid {
        grid-template-columns: 1fr;
    }
    .cmd-bento-card.cmd-bento-wide {
        grid-column: span 1;
    }
}

/* ========================================================
   MODERNO MODULO DE INVENTARIO: PESTAÑAS, ALMACEN Y RECETAS
   ======================================================== */
.inventory-nav-container {
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.inventory-nav-pills {
    display: inline-flex;
    flex-wrap: nowrap;
    background: var(--card-alt-bg, #18181b);
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.inventory-nav-pills::-webkit-scrollbar {
    display: none;
}

.inventory-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.inventory-tab-btn span {
    white-space: nowrap;
}

.inventory-tab-btn:hover {
    color: var(--text-main, #ffffff);
    background: rgba(255, 255, 255, 0.05);
}

.inventory-tab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary, #ff4757) 40%, transparent);
}

body.light-mode .inventory-nav-pills {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

body.light-mode .inventory-tab-btn {
    color: #64748b;
}

body.light-mode .inventory-tab-btn:hover {
    color: #0f172a;
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .inventory-tab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
}

/* KPI Chips */
.inv-kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 12px;
    background: var(--card-bg, #141414);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.inv-kpi-badge i {
    font-size: 18px;
}

/* Semáforos Perecibles */
.badge-perishable-none {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-perishable-good {
    background: rgba(46, 213, 115, 0.15);
    color: #2ed573;
    border: 1px solid rgba(46, 213, 115, 0.3);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-perishable-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-perishable-critical {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-perishable-expired {
    background: #ef4444;
    color: #ffffff;
    padding: 3px 9px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    animation: pulse-danger 1.5s infinite;
}

@keyframes pulse-danger {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* SKU Badge */
.inv-sku-pill {
    font-family: monospace;
    font-size: 11px;
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.25);
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Visor de Cámara de Comprobante */
.receipt-camera-viewport {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 340px;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-camera-viewport video,
.receipt-camera-viewport canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.receipt-camera-guide {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

.receipt-camera-guide::after {
    content: "Encuadra la boleta o factura dentro del marco";
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    font-weight: 600;
}

/* Receta Cards Grid */
.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.recipe-card {
    background: var(--card-bg, #141414);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}

.recipe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ========================================================
   MODERN NUMERIC STEPPER COMPONENT (CAMPOS DE NÚMERO)
   ======================================================== */
.modern-num-stepper,
.recipe-stepper-box {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    background: var(--card-bg, #ffffff) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 38px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-num-stepper:focus-within,
.recipe-stepper-box:focus-within {
    border-color: var(--primary, #f97316) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18) !important;
}

.modern-num-stepper .stepper-btn,
.modern-num-stepper .num-step-btn,
.recipe-stepper-btn {
    border: none !important;
    outline: none !important;
    background: var(--card-alt-bg, #f1f5f9) !important;
    color: var(--text-main, #334155) !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s, color 0.15s, transform 0.1s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.modern-num-stepper .stepper-btn:hover,
.modern-num-stepper .num-step-btn:hover,
.recipe-stepper-btn:hover {
    background: var(--primary, #f97316) !important;
    color: #ffffff !important;
}

.modern-num-stepper .stepper-btn:active,
.modern-num-stepper .num-step-btn:active,
.recipe-stepper-btn:active {
    transform: scale(0.92) !important;
}

.modern-num-stepper input[type="number"],
.recipe-stepper-input {
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    color: var(--text-main, #0f172a) !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 6px !important;
    outline: none !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.modern-num-stepper input[type="number"]::-webkit-outer-spin-button,
.modern-num-stepper input[type="number"]::-webkit-inner-spin-button,
.recipe-stepper-input::-webkit-outer-spin-button,
.recipe-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.modern-num-stepper .stepper-prefix,
.modern-num-stepper .stepper-suffix {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    padding: 0 8px;
    white-space: nowrap;
    user-select: none;
}

body.light-mode .modern-num-stepper,
body.light-mode .recipe-stepper-box {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
}

body.light-mode .modern-num-stepper .stepper-btn,
body.light-mode .modern-num-stepper .num-step-btn,
body.light-mode .recipe-stepper-btn {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

body.light-mode .modern-num-stepper .stepper-btn:hover,
body.light-mode .modern-num-stepper .num-step-btn:hover,
body.light-mode .recipe-stepper-btn:hover {
    background: var(--primary, #f97316) !important;
    color: #ffffff !important;
}

body.light-mode .modern-num-stepper input[type="number"],
body.light-mode .recipe-stepper-input {
    color: #0f172a !important;
}

/* Modal Subtabs Navigation */
.modal-subtabs-bar {
    display: flex;
    gap: 8px;
    padding: 12px 22px;
    background: var(--card-alt-bg, rgba(255,255,255,0.03));
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.modal-subtab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-subtab-btn:hover {
    color: var(--text-main, #ffffff);
    background: rgba(255,255,255,0.05);
}

.modal-subtab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary, #ff4757) 35%, transparent);
}

body.light-mode .modal-subtabs-bar {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .modal-subtab-btn {
    color: #64748b;
}

body.light-mode .modal-subtab-btn:hover {
    color: #0f172a;
    background: #e2e8f0;
}

body.light-mode .modal-subtab-btn.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
}

/* Quick Portion Pill Chips */
.quick-portion-chip {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--card-alt-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.quick-portion-chip:hover,
.quick-portion-chip.active {
    background: var(--primary, #ff4757);
    color: #ffffff;
    border-color: var(--primary, #ff4757);
}

/* ========================================================
   MODAL CLOSE BUTTON (BOTÓN X ELEGANTE Y MODERNO)
   ======================================================== */
.btn-modal-close,
.modal-header .close-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    border-radius: 50% !important;
    background: var(--card-alt-bg, rgba(255, 255, 255, 0.06)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    color: var(--text-muted, #94a3b8) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    flex-shrink: 0 !important;
}

.btn-modal-close:hover,
.modal-header .close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
    transform: rotate(90deg) scale(1.08) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

body.light-mode .btn-modal-close,
body.light-mode .modal-header .close-btn {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #64748b !important;
}

body.light-mode .btn-modal-close:hover,
body.light-mode .modal-header .close-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #ef4444 !important;
}

/* ========================================================
   DATE & DATETIME-LOCAL INPUTS STYLING
   ======================================================== */
.modern-date-input,
input[type="date"].form-control,
input[type="datetime-local"].form-control {
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important;
    background: var(--card-bg, #18181b) !important;
    color: var(--text-main, #ffffff) !important;
    padding: 0 12px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    display: inline-flex !important;
    align-items: center !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modern-date-input:focus,
input[type="date"].form-control:focus,
input[type="datetime-local"].form-control:focus {
    border-color: var(--primary, #ff4757) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #ff4757) 18%, transparent) !important;
}

/* Indicadores de selector de fecha nativos */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    border-radius: 6px !important;
    padding: 4px !important;
    transition: background 0.15s ease, filter 0.15s ease !important;
    filter: invert(0.8) sepia(1) saturate(5) hue-rotate(345deg);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

body.light-mode input[type="date"].form-control,
body.light-mode input[type="datetime-local"].form-control {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.light-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.light-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.35) sepia(1) saturate(5) hue-rotate(345deg) !important;
}

body.light-mode input[type="date"]::-webkit-calendar-picker-indicator:hover,
body.light-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* ========================================================
   COMPROBANTE DE PAGO ACTION BUTTONS
   ======================================================== */
.receipt-upload-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.receipt-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.receipt-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.receipt-action-btn.btn-camera {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff !important;
    border: 1px solid #ea580c;
}

.receipt-action-btn.btn-camera:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}

.receipt-action-btn.btn-file {
    background: var(--card-alt-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-main, #ffffff);
}

.receipt-action-btn.btn-file:hover {
    border-color: var(--primary, #ff4757);
    color: var(--primary, #ff4757);
    background: var(--card-bg, #18181b);
}

body.light-mode .receipt-action-btn.btn-file {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

body.light-mode .receipt-action-btn.btn-file:hover {
    background: #ffffff;
    border-color: var(--primary, #ff4757);
    color: var(--primary, #ff4757);
}

/* ========================================================
   RESPONSIVE MODAL LAYOUTS (IMAGEN 3 FIXES)
   ======================================================== */
.supply-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.supply-form-row-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.supply-form-perishable-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.1fr;
    gap: 10px;
}

.supply-purchase-steppers-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.supply-purchase-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.supply-image-container {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card-alt-bg, rgba(255,255,255,0.02));
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Reglas Responsive para pantallas móviles (< 680px) */
@media (max-width: 680px) {
    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        max-height: 94vh !important;
    }

    .modal-header {
        padding: 14px 16px !important;
    }

    .modal-body {
        padding: 14px 14px !important;
    }

    .modal-footer {
        padding: 12px 16px !important;
    }

    /* Sub-pestañas horizontales fluidas */
    .modal-subtabs-bar {
        padding: 8px 12px !important;
        gap: 6px !important;
    }

    .modal-subtab-btn {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        padding: 8px 8px !important;
        font-size: 12px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Columnas a 1 sola columna en móvil para evitar compresión de números */
    .supply-form-row-2col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .supply-form-row-3col {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .supply-form-perishable-row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .supply-purchase-steppers-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .supply-purchase-meta-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .supply-image-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .supply-image-container > div:last-child {
        width: 100% !important;
    }

    .receipt-upload-actions {
        flex-direction: column !important;
        width: 100% !important;
    }

    .receipt-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ========================================================= */
/* CONTROL DE PRECIOS - MATRIZ HORIZONTAL DESLIZABLE POR TIENDAS */
/* ========================================================= */
.price-matrix-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar moderno visible para navegar fácilmente entre más de 10 tiendas */
.price-matrix-scroll-wrapper::-webkit-scrollbar {
    height: 11px;
}
.price-matrix-scroll-wrapper::-webkit-scrollbar-track {
    background: var(--card-alt-bg, #f1f5f9);
    border-radius: 8px;
    margin: 0 4px;
}
.price-matrix-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 8px;
    border: 2px solid var(--card-alt-bg, #f1f5f9);
}
.price-matrix-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

.price-matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 920px;
    font-size: 13px;
    text-align: left;
}

.price-matrix-table th {
    background: var(--card-alt-bg, #f8fafc);
    color: var(--text-main, #0f172a);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

.price-matrix-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    vertical-align: middle;
    background: var(--card-bg, #ffffff);
    transition: background-color 0.15s ease;
}

.price-matrix-table tbody tr:hover td {
    background-color: var(--card-alt-bg, #f8fafc);
}

/* Columnas fijas a la izquierda (Sticky) para mantener visible el producto */
.price-matrix-table th.col-sticky-img,
.price-matrix-table td.col-sticky-img {
    position: sticky;
    left: 0;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
    background: var(--card-bg, #ffffff);
    z-index: 8;
}

.price-matrix-table th.col-sticky-img {
    background: var(--card-alt-bg, #f8fafc);
    z-index: 15;
}

.price-matrix-table th.col-sticky-prod,
.price-matrix-table td.col-sticky-prod {
    position: sticky;
    left: 60px;
    min-width: 230px;
    max-width: 290px;
    background: var(--card-bg, #ffffff);
    box-shadow: 4px 0 8px -3px rgba(0, 0, 0, 0.08);
    z-index: 8;
}

.price-matrix-table th.col-sticky-prod {
    background: var(--card-alt-bg, #f8fafc);
    z-index: 15;
}

.price-matrix-table tbody tr:hover td.col-sticky-img,
.price-matrix-table tbody tr:hover td.col-sticky-prod {
    background-color: var(--card-alt-bg, #f8fafc);
}

/* Encabezados de Tiendas */
.store-header-cell {
    min-width: 175px;
    text-align: center;
}
.store-header-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.store-header-badge {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
}
.store-badge-main {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}
.store-badge-branch {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

/* Control numérico de precios por tienda */
.price-cell-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.price-stepper-btn {
    width: 28px;
    height: 32px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-alt-bg, #f1f5f9);
    color: var(--text-main, #334155);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}
.price-stepper-btn:hover {
    background: var(--primary, #f97316);
    color: #ffffff;
    border-color: var(--primary, #f97316);
}

.price-input-container {
    position: relative;
    display: flex;
    align-items: center;
}
.price-input-currency {
    position: absolute;
    left: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    pointer-events: none;
}
.price-matrix-input {
    width: 88px;
    height: 32px;
    padding: 4px 6px 4px 26px;
    border-radius: 6px;
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #0f172a);
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.price-matrix-input:focus {
    border-color: var(--primary, #f97316);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}
.price-matrix-input.is-modified {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
    box-shadow: 0 0 0 1px #f59e0b;
}
.price-matrix-input.is-saved {
    background: #ecfdf5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}

/* Columna de acción de fila */
.col-sticky-action {
    width: 95px;
    min-width: 95px;
    text-align: center;
}
.btn-save-row {
    padding: 6px 12px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.btn-save-row:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #e2e8f0;
    color: #94a3b8;
}

/* Badges de tipo de producto en la matriz */
.product-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.product-type-badge.type-simple {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.product-type-badge.type-variable {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
}
.product-type-badge.type-extra {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
}
.product-type-badge.type-box {
    background: rgba(236, 72, 153, 0.12);
    color: #db2777;
}

/* Indicador de cambios pendientes flotante */
.pending-changes-pill {
    background: #f59e0b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 6px;
}





/* =====================================================================
   MÓDULO: ASISTENCIA Y RECURSOS HUMANOS (RRHH)
======================================================================== */
.rrhh-app-container {
    padding-bottom: 40px;
}

.rrhh-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--card-bg, #18181b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 22px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.rrhh-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rrhh-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 242,129,24), 0.2), rgba(var(--primary-rgb, 242,129,24), 0.05));
    border: 1px solid rgba(var(--primary-rgb, 242,129,24), 0.3);
    color: var(--primary, #f28118);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

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

.live-clock-pill {
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Tabs */
.rrhh-tab-content {
    display: none;
    animation: fadeInTab 0.2s ease;
}

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

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

/* KPIs */
.rrhh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.rrhh-kpi-card {
    background: var(--card-bg, #18181b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.rrhh-kpi-card .rrhh-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rrhh-kpi-card .rrhh-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-main, #ffffff);
    line-height: 1.1;
}

.rrhh-kpi-card .rrhh-kpi-sub {
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
    margin-top: 6px;
}

.rrhh-kpi-card.info .rrhh-kpi-value { color: #3b82f6; }
.rrhh-kpi-card.success .rrhh-kpi-value { color: #10b981; }
.rrhh-kpi-card.warning .rrhh-kpi-value { color: #f59e0b; }
.rrhh-kpi-card.danger .rrhh-kpi-value { color: #ef4444; }

/* Avatar Circle */
.rrhh-avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary, #f28118) 0%, #ec4899 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Status Pills */
.rrhh-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 8px;
    white-space: nowrap;
}

.rrhh-status-pill.success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.rrhh-status-pill.danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.rrhh-status-pill.warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.rrhh-status-pill.secondary {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-muted, #94a3b8);
}

.rrhh-status-pill.dark {
    background: rgba(71, 85, 105, 0.2);
    color: #94a3b8;
}

.rrhh-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--card-alt-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    font-size: 12px;
    font-weight: 600;
}

/* Profile Card in Ficha */
.rrhh-sheet-profile-card {
    background: var(--card-bg, #18181b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 22px;
}

.rrhh-card {
    background: var(--card-bg, #18181b);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.rrhh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.rrhh-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #ffffff);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Action round buttons in tables */
.btn-action-round {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-alt-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    font-size: 13px;
}

.btn-action-round:hover {
    background: rgba(var(--primary-rgb, 242,129,24), 0.15);
    color: var(--primary, #f28118);
    border-color: rgba(var(--primary-rgb, 242,129,24), 0.3);
}

/* Punch Action Selector in Widget */
.punch-action-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.punch-action-selector-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--card-alt-bg, rgba(255, 255, 255, 0.04));
    border: 2px solid var(--border-color, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.punch-action-selector-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-main, #ffffff);
}

.punch-action-selector-btn.active[data-type="entrada"] {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    color: #10b981;
}

.punch-action-selector-btn.active[data-type="inicio_refrigerio"] {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
    color: #f59e0b;
}

.punch-action-selector-btn.active[data-type="fin_refrigerio"] {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    color: #3b82f6;
}

.punch-action-selector-btn.active[data-type="salida"] {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
    color: #ef4444;
}

.header-punch-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--primary, #f28118);
    margin-left: 6px;
    transition: background 0.2s ease;
}