:root {
    --primary-blue: #007BFF;
    --primary-blue-hover: #0056b3;
    --bg-white: #FFFFFF;
    --bg-sidebar: #F8F9FA;
    --bg-page: #F0F2F5;
    --text-main: #1A1A1A;
    --text-muted: #6C757D;
    --border-color: #E9ECEF;
    --success: #28A745;
    --warning: #FFC107;
    --danger: #DC3545;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --radius-lg: 12px;
    --radius-md: 8px;
    --transition: all 0.2s ease;
}

body.dark-mode {
    --bg-white: #1E293B;
    --bg-sidebar: #0F172A;
    --bg-page: #020617;
    --text-main: #F1F5F9;
    --text-muted: #94A3B8;
    --border-color: #334155;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Outfit',sans-serif; }
body { background:var(--bg-page); color:var(--text-main); overflow-x:hidden; transition: background 0.3s ease, color 0.3s ease; }

/* ======================== LOGIN PAGE ======================== */
.login-page {
    --bg-white: #FFFFFF;
    --text-main: #1A1A1A;
    --text-muted: #6C757D;
    --border-color: #E9ECEF;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #007BFF 0%, #0056b3 50%, #003d80 100%);
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    top: -200px; right: -200px;
}
.login-page::after {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    bottom: -100px; left: -100px;
}

.login-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 40px 36px;
    width: 400px;
    box-shadow: var(--shadow-lg);
    z-index: 1;
    animation: slideUp 0.5s ease;
}
@keyframes slideUp {
    from { opacity:0; transform:translateY(30px); }
    to { opacity:1; transform:translateY(0); }
}

.login-header { text-align:center; margin-bottom:28px; }
.login-logo-img {
    width: 220px; height: auto;
    margin: 0 auto 14px;
    display: block;
}
.sidebar-logo-img {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: contain;
}
.login-header h1 { font-size:22px; font-weight:700; margin-bottom:4px; }
.login-header p { font-size:13px; color:var(--text-muted); }

.login-form { display:flex; flex-direction:column; gap:16px; }
.form-group label { display:block; font-size:12px; font-weight:600; margin-bottom:5px; }
.form-group input, .form-group select {
    width:100%; padding:10px 14px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    font-size:14px; outline:none;
    transition: var(--transition);
    font-family:'Outfit',sans-serif;
}
.form-group input:focus { border-color:var(--primary-blue); box-shadow:0 0 0 3px rgba(0,123,255,0.15); }

.password-wrap { position:relative; }
.pass-toggle {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--text-muted);
}
.pass-toggle i { width:18px; height:18px; }

.login-btn {
    width:100%; justify-content:center; padding:12px;
    font-size:14px; margin-top:4px;
}
.login-error {
    text-align:center; color:var(--danger); font-size:13px;
    padding:8px; background:#FEE2E2; border-radius:var(--radius-md);
}
.link-btn {
    background:none; border:none; color:var(--primary-blue);
    font-size:13px; cursor:pointer; text-align:center;
    font-family:'Outfit',sans-serif;
}
.link-btn:hover { text-decoration:underline; }

/* Dark mode exclusion for login page */
body.dark-mode .login-page {
    color: #1A1A1A; /* Force dark text on light card */
}
body.dark-mode .login-card {
    background: #FFFFFF;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
body.dark-mode .login-card input {
    background: #FFFFFF;
    color: #1A1A1A;
    border-color: #E9ECEF;
}
body.dark-mode .login-card label {
    color: #1A1A1A;
}
body.dark-mode .login-card p {
    color: #6C757D;
}

/* Popup */
.popup-overlay {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
}
.popup-card {
    background: var(--bg-white); border-radius: 16px;
    padding:32px; width:360px; text-align:center;
    box-shadow:var(--shadow-lg);
    animation: slideUp 0.3s ease;
}
.popup-icon { margin-bottom:16px; }
.popup-icon i { width:40px; height:40px; color:var(--primary-blue); }
.popup-card h3 { font-size:18px; margin-bottom:8px; }
.popup-card p { font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.popup-contact { font-size:13px; color:var(--text-main); }

/* ======================== DASHBOARD LAYOUT ======================== */
.app-container { display:flex; min-height:100vh; }

.sidebar {
    width:220px; background:var(--bg-sidebar);
    border-right:1px solid var(--border-color);
    display:flex; flex-direction:column;
    padding:16px 14px;
    position:fixed; height:100vh; z-index:100;
    overflow-y:auto;
}
.sidebar-header { margin-bottom:20px; }
.logo-container { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.logo-icon { width:28px; height:28px; background:var(--primary-blue); border-radius:6px; }
.logo-container h1 { font-size:16px; font-weight:700; letter-spacing:-0.3px; }
.active-label { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; }
.dot { width:8px; height:8px; background:var(--success); border-radius:50%; display:inline-block; }
.btn-renew-mini {
    background: #FFD700;
    color: #000;
    border: none;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(255, 215, 0, 0.4);
    transition: var(--transition);
    white-space: nowrap;
}
.btn-renew-mini:hover {
    background: #FFC107;
    transform: scale(1.05);
}

.sidebar-nav { display:flex; flex-direction:column; gap:4px; flex-grow:1; }
.nav-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; text-decoration:none;
    color:var(--text-muted); border-radius:6px;
    font-weight:500; font-size:13px;
    transition:var(--transition);
}
.nav-item i { width:18px; height:18px; }
.nav-item:hover { background: var(--border-color); color:var(--text-main); }
.nav-item.active { background:var(--primary-blue); color:white; }
.nav-item.database-klien { color:var(--primary-blue); }
.nav-item.database-klien:hover { background:#E7F1FF; }
.nav-item.database-klien.active { background:var(--primary-blue); color:white; }

.user-profile-container { position:relative; margin-bottom:12px; }
.user-info {
    display:flex; align-items:center; gap:10px;
    padding:10px; border-radius:10px; cursor:pointer;
    transition:var(--transition); background: var(--bg-white);
    border:1px solid var(--border-color);
}
.user-info:hover { background:var(--bg-sidebar); border-color:var(--primary-blue); }
.user-info .more-icon { margin-left:auto; width:16px; height:16px; color:var(--text-muted); }

.user-settings-popup {
    position:absolute; bottom:100%; left:0; width:180px;
    background: var(--bg-white); border-radius:10px;
    box-shadow:var(--shadow-lg); border:1px solid var(--border-color);
    padding:6px; margin-bottom:8px; z-index:110;
    animation: slideUp 0.2s ease;
}
.user-settings-popup a {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; text-decoration:none;
    color:var(--text-main); font-size:13px; font-weight:500;
    border-radius:6px; transition:var(--transition);
}
.user-settings-popup a:hover { background:var(--bg-sidebar); color:var(--primary-blue); }
.user-settings-popup a i { width:16px; height:16px; }

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

.sidebar-footer { padding-top:14px; border-top:1px solid var(--border-color); }
.section-title { font-size:10px; font-weight:700; color:var(--text-muted); margin-bottom:8px; letter-spacing:1px; }
.nav-item.super-admin { color:var(--danger); }
.nav-item.super-admin:hover { background:#F8D7DA; }

.user-info {
    display:flex; align-items:center; gap:10px;
    padding:10px 0; margin-bottom:6px;
}
.user-avatar {
    width:38px; height:38px; border-radius:50%;
    background:var(--primary-blue); color:white;
    display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:700; flex-shrink:0;
}
.user-detail { display:flex; flex-direction:column; }
.user-name { font-size:14px; font-weight:600; }
.user-role { font-size:12px; color:var(--text-muted); }

.btn-logout {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:8px 12px;
    background:none; border:1px solid var(--danger);
    border-radius:6px; color:var(--danger);
    font-size:13px; font-weight:500; cursor:pointer;
    transition:var(--transition); font-family:'Outfit',sans-serif;
}
.btn-logout:hover { background:#F8D7DA; }
.btn-logout i { width:18px; height:18px; }

/* ======================== CONTENT AREA ======================== */
.content {
    margin-left:220px; flex-grow:1;
    padding:20px 24px;
    max-width:calc(100% - 220px);
    background:var(--bg-page);
}

.top-bar {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:20px; position:sticky; top:0;
    background: var(--bg-page); backdrop-filter:blur(8px);
    z-index:50; padding:12px 0;
    border-bottom:1px solid var(--border-color);
}
.header-info h2 { font-size:20px; font-weight:700; margin-bottom:2px; }
.subtitle { color:var(--text-muted); font-size:12px; }

.action-group { display:flex; align-items:center; gap:10px; }
.period-selectors { display:flex; align-items:center; gap:6px; }
.calendar-picker { display:flex; align-items:center; gap:6px; background:var(--bg-sidebar); padding:2px 8px; border-radius:6px; border:1px solid var(--border-color); }
.calendar-picker span { font-size:12px; color:var(--text-muted); }

.date-input { border:none; background:transparent; font-size:12px; font-weight:500; color:var(--text-main); cursor:pointer; outline:none; font-family:'Outfit',sans-serif; }
.period-selectors .date-input { border:1px solid var(--border-color); background: var(--bg-white); padding:4px 8px; border-radius:6px; }

.comparison-toggle { display:flex; align-items:center; gap:6px; }
.comparison-toggle > span { font-size:12px; white-space:nowrap; }

.btn {
    display:flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:6px;
    font-weight:600; font-size:12px; cursor:pointer;
    transition:var(--transition); border:1px solid transparent;
    font-family:'Outfit',sans-serif;
}
.btn i { width:14px; height:14px; }
.btn-primary { background:var(--primary-blue); color:white; }
.btn-primary:hover { background:var(--primary-blue-hover); }
.btn-outline { background: var(--bg-white); border-color:var(--border-color); color:var(--text-main); }
.btn-outline:hover { background:var(--bg-sidebar); }

/* Switch */
.switch { position:relative; display:inline-block; width:36px; height:20px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:#ccc; transition:.4s; }
.slider:before {
    position:absolute; content:""; height:14px; width:14px;
    left:3px; bottom:3px; background:white; transition:.4s;
}
input:checked + .slider { background:var(--primary-blue); }
input:checked + .slider:before { transform:translateX(16px); }
.slider.round { border-radius:34px; }
.slider.round:before { border-radius:50%; }

/* ======================== KPI CARDS ======================== */
.kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.kpi-card {
    background: var(--bg-white); padding:16px; border-radius:var(--radius-lg);
    border:1px solid var(--border-color);
    display:flex; align-items:center; gap:14px;
    transition:var(--transition);
}
.kpi-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.kpi-icon {
    width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
}
.kpi-icon i { width:20px; height:20px; }
.kpi-icon.blue { background:#E7F1FF; color:var(--primary-blue); }
.kpi-icon.purple { background:#F3E8FF; color:#9333EA; }
.kpi-icon.green { background:#DCFCE7; color:#16A34A; }
.kpi-content h3 { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.kpi-value { font-size:22px; font-weight:700; }

/* ======================== CHARTS & MAPS ======================== */
.analytics-row { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:20px; }
.card {
    background: var(--bg-white); border:1px solid var(--border-color);
    border-radius:var(--radius-lg); padding:16px;
}
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-header h3 { font-size:14px; font-weight:700; }

/* Fix leaflet map overlapping sidebar and top-bar */
.leaflet-container {
    z-index: 1 !important;
}

/* ======================== TWO TABLES ROW ======================== */
.tables-row { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-bottom:20px; }

.data-table { width:100%; border-collapse:collapse; }
.data-table th {
    text-align:left; padding:8px 12px;
    border-bottom:2px solid var(--border-color);
    font-size:11px; text-transform:uppercase;
    color:var(--text-muted); letter-spacing:0.5px;
}
.data-table td { padding:10px 12px; border-bottom:1px solid var(--border-color); font-size:13px; }
.data-table tbody tr:hover { background: var(--bg-sidebar); }

.target-unachieved { background:#FFF3CD !important; }
.target-critical { background:#F8D7DA !important; }

.badge {
    padding:3px 10px; border-radius:20px;
    font-size:10px; font-weight:700;
}
.badge-success { background:#DCFCE7; color:#16A34A; }
.badge-warning { background:#FEF3C7; color:#D97706; }
.badge-danger { background:var(--danger); color:white; }

.card-body.scrollable { max-height:240px; overflow-y:auto; }

/* Top sales medal */
.medal { font-size:16px; }

/* ======================== DROPDOWN ======================== */
.dropdown { position:relative; display:inline-block; }
.dropdown-content {
    display:none; position:absolute; right:0;
    background: var(--bg-white); min-width:160px;
    box-shadow:var(--shadow-md); border-radius:var(--radius-md);
    z-index:101; border:1px solid var(--border-color);
}
.dropdown-content a {
    color:var(--text-main); padding:10px 14px;
    text-decoration:none; display:block; font-size:12px;
}
.dropdown-content a:hover { background:var(--bg-sidebar); }
.export-dropdown:hover .dropdown-content { display:block; }

/* ======================== LOADING ======================== */
.loading-spinner {
    display:inline-block; width:20px; height:20px;
    border:3px solid var(--border-color);
    border-top-color:var(--primary-blue);
    border-radius:50%; animation:spin 0.8s linear infinite;
    margin-right:8px; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }
.lucide-spin { animation:spin 1s linear infinite; }

/* ======================== UTILITIES ======================== */
.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}
.scroll-container::-webkit-scrollbar { width: 6px; }
.scroll-container::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }

/* Dark Mode Toggle Button */
.theme-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: var(--transition);
}
.theme-toggle:hover { background: var(--bg-sidebar); transform: rotate(15deg); }

body.dark-mode .sun-icon { display: block; }
body.dark-mode .moon-icon { display: none; }
body:not(.dark-mode) .sun-icon { display: none; }
body:not(.dark-mode) .moon-icon { display: block; }

body.dark-mode .card-header { background: transparent; }
body.dark-mode .popup-header { background: var(--bg-sidebar); color: var(--text-main); }
body.dark-mode #import-preview { background: #1e293b; border-color: #334155; }
body.dark-mode #notif-content { background: var(--bg-white); }
body.dark-mode #notif-dropdown { background: var(--bg-white); }
body.dark-mode .data-table tbody tr:hover { background: rgba(255,255,255,0.05); }

.btn-sm { padding: 5px 10px; font-size: 11px; }
.error-msg { color: var(--danger); padding: 20px; text-align: center; font-size: 13px; }

.detail-header { margin-bottom: 24px; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* Pagination buttons spacing */
.card-footer .btn { min-width: 32px; }

/* ======================== RESPONSIVE ENHANCEMENTS ======================== */

/* Hamburger Menu Button (Hidden by default) */
.mobile-menu-btn {
    display: none;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-main);
    margin-right: 12px;
}

/* Sidebar Overlay */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    z-index: 90;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Fix: Always hide overlay on desktop to prevent accidental blurring */
@media (min-width: 769px) {
    .sidebar-overlay {
        display: none !important;
    }
}

/* Tablet & Desktop Large Screens */
@media (max-width: 1200px) {
    .analytics-row { grid-template-columns: 1fr; }
}

/* Mobile & Tablet General */
@media (max-width: 1024px) {
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .tables-row { grid-template-columns: 1fr; }
}

/* Specific Mobile Styles (Phone) */
@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }
    
    .sidebar {
        left: -240px; /* Hide off-screen */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(240px);
        box-shadow: var(--shadow-lg);
    }

    .content {
        margin-left: 0;
        max-width: 100%;
        padding: 15px;
    }

    .top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 0;
    }

    .action-group {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap; /* Fix: allow buttons to wrap on small screens */
    }

    .period-selectors, .calendar-picker {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .period-selectors select, .calendar-picker input {
        flex: 1;
        min-width: 100px;
        text-align: center;
    }

    .kpi-row { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 8px; 
    }
    .kpi-card { 
        padding: 12px 8px; 
        flex-direction: column; 
        text-align: center; 
        gap: 8px; 
        justify-content: center;
    }
    .kpi-icon { 
        width: 32px; 
        height: 32px; 
        margin: 0 auto; 
    }
    .kpi-icon i { 
        width: 16px; 
        height: 16px; 
    }
    .kpi-content h3 { 
        font-size: 10px; 
        margin-bottom: 4px; 
        line-height: 1.2; 
    }
    .kpi-value { 
        font-size: 16px; 
    }
    
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Table Responsiveness & Mobile Cards */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 10px;
    }
    
    .data-table {
        min-width: 600px; /* Default force scroll */
    }

    /* Convert data-table to Mobile Cards */
    .data-table.mobile-cards {
        min-width: 100%;
        display: block;
    }
    .data-table.mobile-cards thead {
        display: none; /* Hide headers */
    }
    .data-table.mobile-cards tbody,
    .data-table.mobile-cards tr,
    .data-table.mobile-cards td {
        display: block;
        width: 100%;
    }
    .data-table.mobile-cards tr {
        margin-bottom: 15px;
        background: var(--bg-white);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        padding: 8px;
    }
    body.dark-mode .data-table.mobile-cards tr {
        background: #1e293b;
    }
    .data-table.mobile-cards td {
        text-align: right;
        padding: 8px 10px;
        position: relative;
        border-bottom: 1px dashed var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .data-table.mobile-cards td:last-child {
        border-bottom: none;
    }
    .data-table.mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        flex-shrink: 0;
    }

    /* Adjust Export Dropdown */
    .export-dropdown { width: 100%; }
    .export-dropdown .btn { width: 100%; justify-content: center; }
    .dropdown-content { width: 100%; }

    /* Login Adjustments */
    .login-card { width: 90%; padding: 30px 20px; }
/* ======================== INVOICE MANAGEMENT ======================== */
.invoice-container { animation: slideIn 0.4s ease; }
.top-actions .search-box input {
    padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border-color);
    width: 300px; font-size: 13px; outline: none; background: var(--bg-white);
}
.invoice-item-row input {
    padding: 8px; border: 1px solid var(--border-color); border-radius: 6px;
    font-size: 13px; outline: none; background: var(--bg-white);
}
.invoice-item-row input:focus { border-color: var(--primary-blue); }
#inv-total-display { color: var(--primary-blue); font-size: 18px; }

body.dark-mode .invoice-item-row input, 
body.dark-mode .top-actions .search-box input {
    background: #1e293b; color: #f1f5f9; border-color: #334155;
}
    /* Fix overlapping for many buttons */
    .action-group > * {
        flex-shrink: 0;
    }
    
    /* Ensure theme toggle and notif are always accessible */
    .notification-container, .theme-toggle {
        order: -1; /* Move to front on mobile */
    }
}

/* Smallest devices */
@media (max-width: 480px) {
    .header-info h2 { font-size: 18px; }
    .kpi-value { font-size: 20px; }
    .action-group .btn span { display: none; } /* Hide text on icons for very small screens */
    .action-group .btn { padding: 8px; }
}

/* Settings Page Styling */
.settings-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
}

.settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.settings-nav-item:hover {
    background: rgba(0, 123, 255, 0.05);
    color: var(--primary-blue);
}

.settings-nav-item.active {
    background: var(--primary-blue);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.settings-tab-pane {
    display: none;
}

.settings-tab-pane.active {
    display: block;
    animation: fadeIn 0.4s ease;
}

@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    .settings-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 10px;
    }
    .settings-nav-item {
        white-space: nowrap;
    }
}

.dark-mode .settings-nav-item:hover {
    background: rgba(255,255,255,0.05);
}

.dark-mode .settings-nav-item.active {
    background: var(--primary-blue);
    color: #fff;
}

/* Broadcast Modal Custom Styles */
#specific-sales-list {
    border: 1px solid var(--border-color);
    background: var(--bg-sidebar);
    transition: var(--transition);
}

#sales-checkbox-container label {
    padding: 6px 8px;
    border-radius: 6px;
    transition: var(--transition);
}

#sales-checkbox-container label:hover {
    background: rgba(0, 123, 255, 0.1);
}

#broadcast-message:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

#broadcast-urgent:checked + span {
    color: var(--danger);
    font-weight: 700;
}

/* Digital Catalog Styles */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.catalog-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: var(--primary-blue);
}

.dark-mode .catalog-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}