/**
 * POS Inventory Management System
 * Main Stylesheet
 * 
 * @author Mirza Shiplu
 * @email mirzashiplume@gmail.com
 * @phone +880 1717300121
 * @copyright 2025 Mirza Shiplu. All rights reserved.
 * @license MIT License - See LICENSE file for details
 * @version 1.0.0
 * 
 * This software is protected by copyright law and international treaties.
 * Unauthorized reproduction or distribution may result in severe civil and
 * criminal penalties, and will be prosecuted to the maximum extent possible.
 */

:root {
    --primary-color: #4F46E5; /* Indigo 600 */
    --secondary-color: #813838; /* Sky 500 */
    --success-color: #16A34A; /* Green 600 */
    --warning-color: #F59E0B; /* Amber 500 */
    --danger-color: #EF4444; /* Red 500 */
    --info-color: #3B82F6; /* Blue 500 */
    --light-color: #F8FAFC; /* Slate 50 */
    --dark-color: #1F2937; /* Gray 800 */
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --transition: all 0.3s ease;
    --border-radius: 8px;
    /* Device Mode Indicator */
    --device-indicator-padding: 8px 12px;
    --device-indicator-border-radius: 20px;
    --device-indicator-border: 1px solid rgba(255, 255, 255, 0.2);
    --device-switch-padding: 2px;
    --device-switch-border-radius: 50%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    height: 100%;
    overflow: hidden;
}

html {
    height: 100%;
}

.wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Content Area */
.content {
    width: calc(100% - var(--sidebar-width));
    margin-left: var(--sidebar-width);
    transition: var(--transition);
    height: 100vh;
    min-height: 0;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content.sidebar-collapsed {
    width: calc(100% - var(--sidebar-collapsed-width));
    margin-left: var(--sidebar-collapsed-width);
}

/* Top header stays fixed; page content scrolls below */
.content > .navbar {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Main Content */
.main-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px;
}

/* Cards */
.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    transition: var(--transition);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 10px 10px 0 0 !important;
    padding: 15px 20px;
    border: none;
}

.card-body {
    padding: 20px;
}

/* Buttons */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    padding: 8px 16px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #34495e, #2980b9);
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #2ecc71);
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #f1c40f);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #c0392b);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
}

/* Tables */
.table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table thead th {
    background: var(--primary-color);
    color: white;
    border: none;
    font-weight: 600;
    padding: 15px;
}

.table tbody td {
    padding: 15px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Forms */
.form-control {
    border-radius: 8px;
    border: 2px solid #e9ecef;
    padding: 10px 15px;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 8px;
}

/* Stats Cards */
.stats-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--success-color));
}

.stats-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    margin-bottom: 15px;
}

.stats-icon.primary { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.stats-icon.success { background: linear-gradient(135deg, var(--success-color), #2ecc71); }
.stats-icon.warning { background: linear-gradient(135deg, var(--warning-color), #f1c40f); }
.stats-icon.danger { background: linear-gradient(135deg, var(--danger-color), #c0392b); }

.stats-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 5px;
}

.stats-label {
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* Search and Filter */
.search-filter-bar {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.search-input {
    position: relative;
}

.search-input i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    z-index: 2;
}

.search-input .form-control {
    padding-left: 45px;
    border-radius: 25px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

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

.search-input .form-control:focus + i {
    color: #667eea;
}

/* Search Icon Variations */
.search-icon {
    color: #6c757d;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.search-icon:hover {
    color: #667eea;
}

.search-icon.active {
    color: #667eea;
}

/* Search Button Styles */
.btn-search {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-search:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    filter: brightness(0.92);
}

.btn-search i {
    margin-right: 0.5rem;
}

/* Search Results Highlight */
.search-highlight {
    background-color: #fff3cd;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 500;
}

/* Modal */
.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 15px 15px 0 0;
    border: none;
}

.modal-title {
    font-weight: 600;
}

/* Alerts */
.alert {
    border-radius: 10px;
    border: none;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
}

/* Badges */
.badge {
    border-radius: 20px;
    padding: 6px 12px;
    font-weight: 500;
}

/* Stock badges */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.stock-badge-icon {
    font-size: 0.7rem;
    opacity: 0.9;
}

.stock-badge-qty {
    font-variant-numeric: tabular-nums;
}

.stock-badge-unit {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.85;
}

.stock-badge-out {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.stock-badge-low {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}

.stock-badge-in {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

.stock-badge-over {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.stock-status-out {
    background: #fee2e2;
    color: #b91c1c;
}

.stock-status-low {
    background: #fef3c7;
    color: #b45309;
}

.stock-status-in {
    background: #dcfce7;
    color: #15803d;
}

.stock-status-over {
    background: #dbeafe;
    color: #1d4ed8;
}

.sales-page .stock-badge {
    padding: 3px 8px;
    font-size: 0.72rem;
    gap: 3px;
}

.sales-page .stock-badge-unit {
    display: none;
}

/* Pagination */
.pagination {
    justify-content: center;
    margin-top: 20px;
}

.page-link {
    border-radius: 8px;
    margin: 0 2px;
    border: 2px solid #e9ecef;
    color: var(--primary-color);
    transition: var(--transition);
}

.page-link:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .content {
        width: 100%;
        margin-left: 0;
    }
    
    .content.sidebar-collapsed {
        width: 100%;
        margin-left: 0;
    }
    
    .main-content {
        padding: 15px;
    }
    
    .stats-card {
        margin-bottom: 20px;
    }
    
    .table-responsive {
        border-radius: 10px;
    }
}

/* Loading Spinner */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--secondary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Enhanced Form Styles */
.form-control {
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    transition: var(--transition);
    font-size: var(--font-size-base);
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.form-label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

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

.form-check-label {
    font-weight: 500;
    color: var(--dark-color);
}

/* Enhanced Button Styles */
.btn {
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: var(--transition);
    padding: 0.5rem 1rem;
    font-size: var(--font-size-base);
}

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

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

.btn-success {
    background-color: var(--success-color);
    border-color: var(--success-color);
}

.btn-success:hover {
    background-color: #229954;
    border-color: #229954;
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-warning:hover {
    background-color: #e67e22;
    border-color: #e67e22;
}

.btn-danger {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.btn-outline-primary {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

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

/* Enhanced Card Styles */
.card {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid #e9ecef;
    transition: var(--transition);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    color: var(--dark-color);
}

.card-body {
    padding: 1.5rem;
}

/* Enhanced Table Styles */
.table {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.table thead th {
    background-color: var(--primary-color);
    color: white;
    border: none;
    font-weight: 600;
    padding: 1rem 0.75rem;
}

.table tbody tr {
    transition: var(--transition);
}

.table tbody tr:hover {
    background-color: #f8f9fa;
}

.table tbody td {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #e9ecef;
}

/* Enhanced Alert Styles */
.alert {
    border-radius: var(--border-radius);
    border: none;
    font-weight: 500;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* Enhanced Modal Styles */
.modal-content {
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: none;
}

.modal-header {
    background-color: var(--primary-color);
    color: white;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    background-color: #f8f9fa;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* Enhanced Badge Styles */
.badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    border-radius: 50px;
}

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

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

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

.badge-danger {
    background-color: var(--danger-color);
}

.badge-info {
    background-color: var(--info-color);
}

/* Enhanced Progress Bar */
.progress {
    height: 0.5rem;
    border-radius: 50px;
    background-color: #e9ecef;
}

.progress-bar {
    border-radius: 50px;
    transition: width 0.6s ease;
}

/* Enhanced Dropdown */
.dropdown-menu {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid #e9ecef;
    padding: 0.5rem 0;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: var(--transition);
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: var(--secondary-color);
}

/* Enhanced Navbar */
.navbar {
    background-color: white;
    box-shadow: var(--box-shadow);
    border-bottom: 1px solid #e9ecef;
}

.navbar-nav .nav-link {
    color: var(--dark-color);
    font-weight: 500;
    transition: var(--transition);
}

.navbar-nav .nav-link:hover {
    color: var(--secondary-color);
}

/* Clean Date and Time Display */
.datetime-display {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    min-width: 110px;
}

.datetime-display .date-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    line-height: 1;
}

.datetime-display .time-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-color);
    line-height: 1;
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Compact spacing on small screens */
@media (max-width: 768px) {
    .datetime-display {
        min-width: 100px;
        padding: 0.2rem 0.4rem;
        border-radius: 6px;
    }
    .datetime-display .date-text { font-size: 0.8rem; }
    .datetime-display .time-text { font-size: 0.9rem; }
}

/* ==========================================
   Corporate Elite Theme (opt-in via .corporate-elite)
   ========================================== */
.corporate-elite {
    --primary-color: #1e3a8a;
    --secondary-color: #3b82f6;
    --accent-color: #60a5fa;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --background-color: #f8fafc;
    --card-bg: #ffffff;
    --border-color: #e5e7eb;
    --success-color: #059669;
    --warning-color: #d97706;
    --danger-color: #dc2626;
    --info-color: #0284c7;
    --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.corporate-elite .navbar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-bottom: 3px solid var(--accent-color);
    box-shadow: 0 4px 20px rgba(30, 58, 138, 0.15);
}

.corporate-elite .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.corporate-elite .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: white;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
    border-radius: 8px;
}

.corporate-elite .btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    filter: brightness(0.92);
}

.corporate-elite .table {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.corporate-elite .table thead th {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

/* ==========================================
   Luxury Gold Theme (opt-in via .luxury-gold)
   ========================================== */
.luxury-gold {
    --primary-color: #b8860b;
    --secondary-color: #daa520;
    --accent-color: #ffd700;
    --text-color: #2c1810;
    --text-muted: #8b7355;
    --background-color: #fef9e7;
    --card-bg: #ffffff;
    --border-color: #daa520;
    --success-color: #228b22;
    --warning-color: #ff8c00;
    --danger-color: #dc143c;
    --info-color: #4169e1;
    --box-shadow: 0 8px 32px rgba(184, 134, 11, 0.15);
    --border-radius: 16px;
    --transition: all 0.4s ease;
}

.luxury-gold .navbar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-bottom: 4px solid var(--accent-color);
    box-shadow: 0 6px 30px rgba(184, 134, 11, 0.2);
}

.luxury-gold .card {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    position: relative;
}

.luxury-gold .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.luxury-gold .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border: none;
    color: var(--text-color);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 20px rgba(184, 134, 11, 0.3);
    border-radius: 12px;
}

.luxury-gold .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-color), #ffed4e);
    filter: brightness(0.92);
}

/* ==========================================
   Tech Matrix Theme (opt-in via .tech-matrix)
   ========================================== */
.tech-matrix {
    --primary-color: #00ff41;
    --secondary-color: #00cc33;
    --accent-color: #66ff99;
    --text-color: #00ff41;
    --text-muted: #00cc33;
    --background-color: #000000;
    --card-bg: #001100;
    --border-color: #00ff41;
    --success-color: #00ff41;
    --warning-color: #ffff00;
    --danger-color: #ff0040;
    --info-color: #00ffff;
    --box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
    --border-radius: 4px;
    --transition: all 0.2s ease;
}

.tech-matrix .navbar {
    background: var(--background-color);
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.2);
    position: relative;
}

.tech-matrix .navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 255, 65, 0.1) 50%, transparent 100%);
    animation: matrixScan 3s linear infinite;
}

.tech-matrix .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    font-family: 'Courier New', monospace;
}

.tech-matrix .btn-primary {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
    border-radius: var(--border-radius);
}

.tech-matrix .btn-primary:hover {
    background: var(--accent-color);
    color: var(--background-color);
    box-shadow: 0 0 25px rgba(0, 255, 65, 0.6);
    transform: translateY(-2px);
}

@keyframes matrixScan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ==========================================
   Minimalist Pro Theme (opt-in via .minimalist-pro)
   ========================================== */
.minimalist-pro {
    --primary-color: #000000;
    --secondary-color: #333333;
    --accent-color: #666666;
    --text-color: #000000;
    --text-muted: #666666;
    --background-color: #ffffff;
    --card-bg: #ffffff;
    --border-color: #e0e0e0;
    --success-color: #000000;
    --warning-color: #666666;
    --danger-color: #000000;
    --info-color: #333333;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    --border-radius: 0px;
    --transition: all 0.2s ease;
}

.minimalist-pro .navbar {
    background-color: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

.minimalist-pro .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.minimalist-pro .btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
    box-shadow: none;
    border-radius: var(--border-radius);
}

.minimalist-pro .btn-primary:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: none;
    box-shadow: none;
}

.minimalist-pro .table {
    border: 1px solid var(--border-color);
}

.minimalist-pro .table thead th {
    background: var(--background-color);
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--primary-color);
}

/* ==========================================
   Cyberpunk Neon Theme (opt-in via .cyberpunk-neon)
   ========================================== */
.cyberpunk-neon {
    --primary-color: #ff0080;
    --secondary-color: #00ffff;
    --accent-color: #ffff00;
    --text-color: #ffffff;
    --text-muted: #ff0080;
    --background-color: #0a0a0a;
    --card-bg: #1a0a1a;
    --border-color: #ff0080;
    --success-color: #00ff00;
    --warning-color: #ffff00;
    --danger-color: #ff0040;
    --info-color: #00ffff;
    --box-shadow: 0 0 30px rgba(255, 0, 128, 0.3);
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

.cyberpunk-neon .navbar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-bottom: 3px solid var(--accent-color);
    box-shadow: 0 0 40px rgba(255, 0, 128, 0.4);
}

.cyberpunk-neon .card {
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 0, 128, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%);
}

.cyberpunk-neon .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: var(--background-color);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 128, 0.4);
    border-radius: var(--border-radius);
}

.cyberpunk-neon .btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    filter: brightness(0.92);
}

/* ==========================================
   Royal Purple Theme (opt-in via .royal-purple)
   ========================================== */
.royal-purple {
    --primary-color: #4b0082;
    --secondary-color: #6a0dad;
    --accent-color: #9370db;
    --text-color: #ffffff;
    --text-muted: #dda0dd;
    --background-color: #2e0854;
    --card-bg: #4b0082;
    --border-color: #9370db;
    --success-color: #32cd32;
    --warning-color: #ffd700;
    --danger-color: #ff4500;
    --info-color: #00bfff;
    --box-shadow: 0 8px 32px rgba(75, 0, 130, 0.3);
    --border-radius: 20px;
    --transition: all 0.4s ease;
}

.royal-purple .navbar {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-bottom: 4px solid var(--accent-color);
    box-shadow: 0 8px 40px rgba(75, 0, 130, 0.4);
}

.royal-purple .card {
    background-color: var(--card-bg);
    border: 3px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(147, 112, 219, 0.2) 0%, transparent 50%);
}

.royal-purple .btn-primary {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border: none;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 25px rgba(75, 0, 130, 0.4);
    border-radius: 15px;
}

.royal-purple .btn-primary:hover {
    background: linear-gradient(135deg, var(--accent-color), #ba55d3);
    filter: brightness(0.92);
}

/* Enhanced Search - Consolidated with main search styles */

/* Enhanced Stats Cards */
.stats-card {
    background: linear-gradient(135deg, var(--secondary-color), #2980b9);
    color: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.stats-card .stats-icon {
    font-size: 2.5rem;
    opacity: 0.8;
}

.stats-card .stats-value {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.stats-card .stats-label {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Enhanced Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2rem;
}

/* Enhanced Tooltip */
.tooltip {
    font-size: var(--font-size-sm);
}

.tooltip-inner {
    background-color: var(--dark-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
}

/* Enhanced Popover */
.popover {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid #e9ecef;
}

.popover-header {
    background-color: var(--primary-color);
    color: white;
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

/* Enhanced Toast */
.toast {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: none;
}

.toast-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

/* Enhanced Breadcrumb */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 1rem;
}

.breadcrumb-item {
    color: var(--dark-color);
}

.breadcrumb-item.active {
    color: var(--secondary-color);
    font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
    font-weight: 600;
}

/* Enhanced List Group */
.list-group-item {
    border: 1px solid #e9ecef;
    transition: var(--transition);
}


.list-group-item.active {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Enhanced Input Group */
.input-group-text {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--dark-color);
    font-weight: 500;
}

.input-group .form-control:focus {
    z-index: 3;
}

/* Enhanced Button Group */
.btn-group .btn {
    border-radius: 0;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

/* Enhanced Close Button */
.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6c757d;
    transition: var(--transition);
}

.btn-close:hover {
    color: var(--danger-color);
    filter: brightness(0.85);
}

/* Enhanced Collapse */
.collapse {
    transition: height 0.3s ease;
}

/* Enhanced Accordion */
.accordion-item {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    margin-bottom: 0.5rem;
}

.accordion-header .accordion-button {
    background-color: #f8f9fa;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    color: var(--dark-color);
}

.accordion-header .accordion-button:not(.collapsed) {
    background-color: var(--secondary-color);
    color: white;
}

.accordion-body {
    padding: 1.5rem;
    background-color: white;
}

/* Enhanced Carousel */
.carousel-item {
    transition: transform 0.6s ease-in-out;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    background-color: rgba(0,0,0,0.5);
    border-radius: var(--border-radius);
}

.carousel-indicators button {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 0 5px;
}

/* Enhanced Offcanvas */
.offcanvas {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.offcanvas-header {
    background-color: var(--primary-color);
    color: white;
    border-bottom: 1px solid #e9ecef;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2980b9;
}

/* Print Styles */
@media print {
    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    .wrapper,
    .content,
    .main-content {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
    }

    .sidebar, .navbar, #sidebar, .btn, .pagination, .d-print-none {
        display: none !important;
    }
    
    .content {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.page-invoice-receipt .main-content,
    body.printing-invoice .main-content {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }

    body.page-invoice-receipt .card,
    body.printing-invoice .card {
        border: none !important;
    }

    body.page-invoice-receipt .wrapper,
    body.page-invoice-receipt .content,
    body.printing-invoice .wrapper,
    body.printing-invoice .content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body.page-invoice-receipt #invoice,
    body.page-invoice-receipt .invoice-wrapper,
    body.printing-invoice #invoice,
    body.printing-invoice .invoice-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        min-height: 0 !important;
        transform: none !important;
        overflow: visible !important;
    }

    body.page-invoice-receipt .sales-page > .d-flex.mb-4,
    body.printing-invoice .sales-page > .d-flex.mb-4 {
        display: none !important;
    }
}

/* ==========================================
   Classic Desktop Theme (opt-in via .classic)
   ========================================== */
.classic {
    --primary-color: #3c3c3c;
    --secondary-color: #6c6c6c;
    --success-color: #2f7d32;
    --warning-color: #a0792a;
    --danger-color: #a33a3a;
    --info-color: #2a5d9f;
    --light-color: #e9e9e9;
    --dark-color: #2a2a2a;
    --border-radius: 2px;
    --box-shadow: none;
}

.classic body,
body.classic {
    background-color: #dcdcdc;
    color: #1e1e1e;
}

/* Window look */
.classic .card,
body.classic .card,
.classic .table,
body.classic .table,
.classic .modal-content,
body.classic .modal-content {
    border: 1px solid #b5b5b5;
    border-radius: 2px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #9f9f9f;
    background: linear-gradient(#efefef, #e3e3e3);
}

.classic .card-header,
body.classic .card-header {
    background: linear-gradient(#dcdcdc, #cfcfcf);
    color: #111;
    border-bottom: 1px solid #b5b5b5;
}

/* Buttons */
.classic .btn,
body.classic .btn {
    border-radius: 2px;
    border: 1px solid #9f9f9f;
    background: linear-gradient(#f0f0f0, #dcdcdc);
    color: #111;
    padding: 6px 12px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #bdbdbd;
}

.classic .btn:hover,
body.classic .btn:hover {
    background: linear-gradient(#ffffff, #e9e9e9);
}

.classic .btn-primary,
body.classic .btn-primary {
    background: linear-gradient(#e3e3e3, #cfcfcf);
    border-color: #8f8f8f;
    color: #111;
}

/* Inputs */
.classic .form-control,
body.classic .form-control {
    border-radius: 2px;
    border: 1px solid #9f9f9f;
    background: #f7f7f7;
    box-shadow: inset 1px 1px 0 #fff;
}

.classic .form-control:focus,
body.classic .form-control:focus {
    outline: none;
    border-color: #6c6c6c;
    box-shadow: 0 0 0 2px rgba(108,108,108,0.2);
}

/* Tables */
.classic .table thead th,
body.classic .table thead th {
    background: linear-gradient(#d0d0d0, #c4c4c4);
    color: #111;
}

.classic .table tbody tr:hover,
body.classic .table tbody tr:hover {
    background-color: #ededed;
}

/* Navbar */
.classic .navbar,
body.classic .navbar {
    background: linear-gradient(#ececec, #dbdbdb) !important;
    border-bottom: 1px solid #b5b5b5;
}

/* Content area background for desktop app feel */
.classic .main-content,
body.classic .main-content {
    padding: 12px;
}

/* Badges, alerts subtle */
.classic .badge,
body.classic .badge {
    background: #cfcfcf;
    color: #111;
}

.classic .alert,
body.classic .alert {
    background: #ececec;
    color: #111;
    border: 1px solid #b5b5b5;
}

/* Pagination */
.classic .page-link,
body.classic .page-link {
    border: 1px solid #9f9f9f;
    color: #111;
}

.classic .page-item.active .page-link,
body.classic .page-item.active .page-link {
    background: #c7c7c7;
    border-color: #8f8f8f;
    color: #111;
}

/* Remove exaggerated transforms for classic tone */
.classic .card:hover,
body.classic .card:hover,
.classic .btn:hover,
body.classic .btn:hover,
.classic .table tbody tr:hover,
body.classic .table tbody tr:hover {
    transform: none;
}

/* ==========================================
   Pro Desktop Theme (opt-in via .pro)
   ========================================== */
.pro {
    --primary-color: #2c3e50;
    --secondary-color: #3a6ea5;
    --success-color: #22863a;
    --warning-color: #a97123;
    --danger-color: #b23b3b;
    --info-color: #2f6fb1;
    --light-color: #f2f4f7;
    --dark-color: #1f2630;
    --border-radius: 4px;
    --box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.pro body,
body.pro {
    background-color: #eef1f5;
    color: #1f2630;
}

.pro .navbar,
body.pro .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #d7dee7;
}

.pro .card,
body.pro .card,
.pro .table,
body.pro .table,
.pro .modal-content,
body.pro .modal-content {
    border: 1px solid #d7dee7;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    background: #ffffff;
}

.pro .card-header,
body.pro .card-header {
    background: #f7f9fc;
    color: #1f2630;
    border-bottom: 1px solid #d7dee7;
}

.pro .btn,
body.pro .btn {
    border-radius: 4px;
    border: 1px solid #c7d1dd;
    background: linear-gradient(#ffffff, #f3f6fa);
    color: #1f2630;
    padding: 6px 12px;
}

.pro .btn:hover,
body.pro .btn:hover {
    background: linear-gradient(#ffffff, #eef2f7);
}

.pro .btn-primary,
body.pro .btn-primary {
    background: linear-gradient(#3a6ea5, #335f8f);
    border-color: #335f8f;
    color: #fff;
}

.pro .form-control,
body.pro .form-control {
    border-radius: 4px;
    border: 1px solid #cdd6e2;
    background: #ffffff;
}

.pro .form-control:focus,
body.pro .form-control:focus {
    border-color: #3a6ea5;
    box-shadow: 0 0 0 2px rgba(58,110,165,0.15);
}

.pro .table thead th,
body.pro .table thead th {
    background: #2c3e50;
    color: #fff;
}

.pro .table tbody tr:hover,
body.pro .table tbody tr:hover {
    background-color: #f3f6fa;
}

.pro .badge,
body.pro .badge {
    background: #3a6ea5;
    color: #fff;
}

.pro .alert,
body.pro .alert {
    background: #f7f9fc;
    color: #1f2630;
    border: 1px solid #d7dee7;
}

.pro .page-link,
body.pro .page-link {
    border: 1px solid #cdd6e2;
    color: #2c3e50;
}

.pro .page-item.active .page-link,
body.pro .page-item.active .page-link {
    background: #3a6ea5;
    border-color: #3a6ea5;
    color: #fff;
}

.pro .stats-card,
body.pro .stats-card {
    background: #ffffff;
    color: #1f2630;
    border: 1px solid #d7dee7;
}

/* Global Cursor Fix - Only show pointer cursor on interactive elements */
* {
    cursor: default !important;
}

/* Interactive elements that should show pointer cursor */
a, button, input[type="button"], input[type="submit"], input[type="reset"], 
input[type="checkbox"], input[type="radio"], select, textarea, 
[role="button"], [onclick], [data-toggle], [data-bs-toggle],
.btn, .btn-close, .dropdown-toggle, .nav-link, .page-link,
[data-bs-target], [data-target], .modal-trigger, .accordion-button,
.carousel-control-prev, .carousel-control-next, .carousel-indicators button,
.sortable, .draggable, .clickable, .editable, .selectable {
    cursor: pointer !important;
}

/* Input fields should show text cursor */
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="tel"], input[type="url"], 
input[type="search"], input[type="date"], input[type="time"], 
input[type="datetime-local"], input[type="month"], input[type="week"],
textarea, [contenteditable="true"], [contenteditable] {
    cursor: text !important;
}

/* Text selection areas */
[contenteditable="true"], [contenteditable], textarea, 
input[type="text"], input[type="email"], input[type="password"], 
input[type="number"], input[type="tel"], input[type="url"], 
input[type="search"], input[type="date"], input[type="time"], 
input[type="datetime-local"], input[type="month"], input[type="week"] {
    user-select: text;
}

/* Non-interactive elements should not be selectable */
body, div, span, p, h1, h2, h3, h4, h5, h6, 
table, tr, td, th, thead, tbody, tfoot,
ul, ol, li, dl, dt, dd, blockquote, pre, code,
img, video, audio, canvas, svg, iframe, object, embed,
header, footer, nav, main, section, article, aside,
.card, .card-header, .card-body, .card-footer,
.alert, .badge, .label, .progress, .progress-bar,
.navbar, .navbar-brand, .navbar-nav, .navbar-toggler,
.breadcrumb, .pagination, .list-group, .list-group-item,
.modal, .modal-header, .modal-body, .modal-footer,
.tooltip, .popover, .dropdown, .dropdown-menu, .dropdown-item,
.accordion, .accordion-item, .accordion-header, .accordion-body,
.carousel, .carousel-inner, .carousel-item,
.offcanvas, .offcanvas-header, .offcanvas-body,
.tab-content, .tab-pane, .nav-tabs, .nav-item,
.form-label, .form-text, .form-check-label,
.table-responsive, .card-title, .card-subtitle,
.stats-card, .stats-icon, .stats-number, .stats-label,
.datetime-display, .date-text, .time-text {
    cursor: default !important;
    user-select: none;
}

/* Cursor and selection fix for tax displays without input fields */
[id*="tax"],
[class*="tax"],
[data-field*="tax"] {
    cursor: default !important;
}

[id*="tax"]:not(input):not(select):not(textarea),
[class*="tax"]:not(input):not(select):not(textarea),
[data-field*="tax"]:not(input):not(select):not(textarea) {
    user-select: none;
}

/* ==========================================
   Modern Classic Theme (opt-in via .modern-classic)
   ========================================== */
.modern-classic {
    --primary-color: #2b4c7e; /* deep muted blue */
    --secondary-color: #7aa0d2; /* soft accent blue */
    --success-color: #2c8a4b;
    --warning-color: #ae7a2b;
    --danger-color: #b14b4b;
    --info-color: #3b6fa8;
    --light-color: #f4f6f8;
    --dark-color: #2a2f36;
    --border-radius: 6px;
    --box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(43,76,126,0.06);
}

.modern-classic body,
body.modern-classic {
    background-color: #eef2f6;
    color: #2a2f36;
}

.modern-classic .navbar,
body.modern-classic .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e1e6ee;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.modern-classic .card,
body.modern-classic .card,
.modern-classic .table,
body.modern-classic .table,
.modern-classic .modal-content,
body.modern-classic .modal-content {
    border: 1px solid #e1e6ee;
    border-radius: 6px;
    box-shadow: var(--box-shadow);
    background: #ffffff;
}

.modern-classic .card-header,
body.modern-classic .card-header {
    background: linear-gradient(180deg, #f7f9fc, #f1f5fb);
    color: #2a2f36;
    border-bottom: 1px solid #e1e6ee;
}

.modern-classic .btn,
body.modern-classic .btn {
    border-radius: 6px;
    border: 1px solid #d5deea;
    background: linear-gradient(#ffffff, #f6f9fd);
    color: #2a2f36;
    padding: 8px 14px;
}

.modern-classic .btn:hover,
body.modern-classic .btn:hover {
    background: linear-gradient(#ffffff, #eef3fa);
}

.modern-classic .btn-primary,
body.modern-classic .btn-primary {
    background: linear-gradient(#2b4c7e, #234066);
    border-color: #234066;
    color: #fff;
}

.modern-classic .form-control,
body.modern-classic .form-control {
    border-radius: 6px;
    border: 1px solid #dbe3ef;
    background: #ffffff;
}

.modern-classic .form-control:focus,
body.modern-classic .form-control:focus {
    border-color: #7aa0d2;
    box-shadow: 0 0 0 3px rgba(122,160,210,0.25);
}

.modern-classic .table thead th,
body.modern-classic .table thead th {
    background: #2b4c7e;
    color: #fff;
}

.modern-classic .table tbody tr:hover,
body.modern-classic .table tbody tr:hover {
    background-color: #f6f9fd;
}

.modern-classic .badge,
body.modern-classic .badge {
    background: #7aa0d2;
    color: #0e213a;
}

.modern-classic .alert,
body.modern-classic .alert {
    background: #f7faff;
    color: #1f2a3a;
    border: 1px solid #e1e6ee;
}

.modern-classic .page-link,
body.modern-classic .page-link {
    border: 1px solid #dbe3ef;
    color: #2b4c7e;
}

.modern-classic .page-item.active .page-link,
body.modern-classic .page-item.active .page-link {
    background: #2b4c7e;
    border-color: #2b4c7e;
    color: #fff;
}

.modern-classic .stats-card,
body.modern-classic .stats-card {
    background: #ffffff;
    color: #2a2f36;
    border: 1px solid #e1e6ee;
}

/* Modern Classic - Unified Button Palette */
.modern-classic .btn-primary,
body.modern-classic .btn-primary {
    background: linear-gradient(#2b4c7e, #234066);
    border-color: #234066;
    color: #ffffff;
}

.modern-classic .btn-primary:hover,
body.modern-classic .btn-primary:hover {
    background: linear-gradient(#315688, #27466f);
    border-color: #27466f;
}

.modern-classic .btn-secondary,
body.modern-classic .btn-secondary {
    background: linear-gradient(#f6f9fd, #eef3fa);
    border-color: #cad6e6;
    color: #2a2f36;
}

.modern-classic .btn-secondary:hover,
body.modern-classic .btn-secondary:hover {
    background: linear-gradient(#ffffff, #f3f7fc);
    border-color: #b9c8dc;
}

.modern-classic .btn-success,
body.modern-classic .btn-success {
    background: linear-gradient(#2c8a4b, #257741);
    border-color: #257741;
    color: #ffffff;
}

.modern-classic .btn-success:hover,
body.modern-classic .btn-success:hover {
    background: linear-gradient(#319757, #2a824a);
    border-color: #2a824a;
}

.modern-classic .btn-warning,
body.modern-classic .btn-warning {
    background: linear-gradient(#ae7a2b, #946825);
    border-color: #946825;
    color: #ffffff;
}

.modern-classic .btn-warning:hover,
body.modern-classic .btn-warning:hover {
    background: linear-gradient(#bb8532, #a1722a);
    border-color: #a1722a;
}

.modern-classic .btn-danger,
body.modern-classic .btn-danger {
    background: linear-gradient(#b14b4b, #963e3e);
    border-color: #963e3e;
    color: #ffffff;
}

.modern-classic .btn-danger:hover,
body.modern-classic .btn-danger:hover {
    background: linear-gradient(#bf5555, #a34747);
    border-color: #a34747;
}

.modern-classic .btn-info,
body.modern-classic .btn-info {
    background: linear-gradient(#3b6fa8, #335f8f);
    border-color: #335f8f;
    color: #ffffff;
}

.modern-classic .btn-info:hover,
body.modern-classic .btn-info:hover {
    background: linear-gradient(#427bb7, #3a6ea5);
    border-color: #3a6ea5;
}

/* Outline variants */
.modern-classic .btn-outline-primary,
body.modern-classic .btn-outline-primary {
    color: #2b4c7e;
    border-color: #2b4c7e;
    background: transparent;
}

.modern-classic .btn-outline-primary:hover,
body.modern-classic .btn-outline-primary:hover {
    background: #2b4c7e;
    color: #ffffff;
}

.modern-classic .btn-outline-secondary,
body.modern-classic .btn-outline-secondary {
    color: #2a2f36;
    border-color: #cad6e6;
    background: transparent;
}

.modern-classic .btn-outline-secondary:hover,
body.modern-classic .btn-outline-secondary:hover {
    background: #eef3fa;
    color: #2a2f36;
}

.modern-classic .btn-outline-success,
body.modern-classic .btn-outline-success {
    color: #2c8a4b;
    border-color: #2c8a4b;
    background: transparent;
}

.modern-classic .btn-outline-success:hover,
body.modern-classic .btn-outline-success:hover {
    background: #2c8a4b;
    color: #ffffff;
}

.modern-classic .btn-outline-warning,
body.modern-classic .btn-outline-warning {
    color: #ae7a2b;
    border-color: #ae7a2b;
    background: transparent;
}

.modern-classic .btn-outline-warning:hover,
body.modern-classic .btn-outline-warning:hover {
    background: #ae7a2b;
    color: #ffffff;
}

.modern-classic .btn-outline-danger,
body.modern-classic .btn-outline-danger {
    color: #b14b4b;
    border-color: #b14b4b;
    background: transparent;
}

.modern-classic .btn-outline-danger:hover,
body.modern-classic .btn-outline-danger:hover {
    background: #b14b4b;
    color: #ffffff;
}

.modern-classic .btn-outline-info,
body.modern-classic .btn-outline-info {
    color: #3b6fa8;
    border-color: #3b6fa8;
    background: transparent;
}

.modern-classic .btn-outline-info:hover,
body.modern-classic .btn-outline-info:hover {
    background: #3b6fa8;
    color: #ffffff;
}

/* Device Mode Indicator */
.device-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.device-switch {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 2px;
    border-radius: 50%;
}

.device-switch:hover {
    background: rgba(255, 255, 255, 0.16);
    filter: brightness(0.92);
}

.feet-stock-display {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
}

.feet-stock-display--dual {
    padding: 0.22rem 0.38rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.feet-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    max-width: none;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    line-height: 1.15;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.feet-stock-badge:hover {
    filter: brightness(0.9);
}

.feet-stock-badge__value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.feet-stock-badge--pcs {
    background: linear-gradient(180deg, #ecfdf3 0%, #dcfce7 100%) !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.feet-stock-badge--feet {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-color: #93c5fd !important;
    color: #1e40af !important;
}

.products-page .feet-stock-display--dual {
    gap: 0.75rem;
    padding: 0.28rem 0.5rem;
}

.products-page .feet-stock-badge {
    padding: 0.3rem 0.62rem;
    font-size: 0.74rem;
}

.products-page .data-table td:nth-child(7) {
    min-width: 195px;
    max-width: 240px;
    white-space: nowrap;
}

.sales-page .feet-stock-display--dual {
    gap: 0.38rem;
    padding: 0.18rem 0.32rem;
}

.sales-page .feet-stock-badge {
    padding: 0.2rem 0.44rem;
    font-size: 0.66rem;
}

.sales-page .feet-stock-badge__value {
    font-size: 0.64rem;
    font-weight: 700;
}

#productTable td:nth-child(7) {
    min-width: 0;
    max-width: none;
}