/**
 * TikTok-Inspired Theme
 * Bright, modern, gradient-heavy design inspired by TikTok's vibrant UI
 * 
 * Color Palette:
 * - Primary: #00F2EA (Cyan) & #FF0050 (Pink)
 * - Background: #F8F8F8 (Light gray)
 * - Text: #161823 (Dark)
 * - Cards: White with subtle shadows
 */

:root {
    /* TikTok Brand Colors */
    --tiktok-cyan: #00F2EA;
    --tiktok-pink: #FF0050;
    --tiktok-black: #010101;
    --tiktok-dark: #161823;
    --tiktok-darker: #0F0F13;
    --tiktok-gray: #8A8B9F;
    
    /* Dark Theme UI Colors */
    --bg-primary: #161823;
    --bg-secondary: #1F1F2E;
    --bg-tertiary: #2A2A3C;
    --text-primary: #FFFFFF;
    --text-secondary: #B4B4C6;
    --text-tertiary: #70707E;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--tiktok-cyan) 0%, var(--tiktok-pink) 100%);
    --gradient-cyan: linear-gradient(135deg, #00F2EA 0%, #00C9E0 100%);
    --gradient-pink: linear-gradient(135deg, #FF0050 0%, #FE2C55 100%);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-cyan: 0 4px 16px rgba(0, 242, 234, 0.3);
    --shadow-pink: 0 4px 16px rgba(255, 0, 80, 0.3);
    
    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==================== GLOBAL STYLES ==================== */

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

/* Scrollbar styling for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--tiktok-cyan);
}

/* ==================== NAVBAR ==================== */

.navbar {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--bg-tertiary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 12px 0;
}

.navbar-brand {
    font-weight: 800;
    font-size: 20px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-link {
    color: var(--text-secondary) !important;
    font-weight: 600;
    padding: 8px 16px !important;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.nav-link:hover,
.nav-link.active {
    background: var(--bg-tertiary);
    color: var(--tiktok-cyan) !important;
}

.navbar-toggler {
    border-color: var(--bg-tertiary);
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* ==================== BUTTONS ==================== */

.btn {
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    border: none;
    transition: all var(--transition-base);
    font-size: 0.875rem;
}

.btn-primary {
    background: rgba(0, 242, 234, 0.15);
    color: var(--tiktok-cyan);
    border: 1px solid rgba(0, 242, 234, 0.3);
}

.btn-primary:hover {
    background: rgba(0, 242, 234, 0.25);
    border-color: rgba(0, 242, 234, 0.5);
    transform: translateY(-1px);
    color: var(--tiktok-cyan);
}

.btn-success {
    background: rgba(76, 175, 80, 0.15);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.btn-success:hover {
    background: rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.5);
    color: #81C784;
}

.btn-danger {
    background: rgba(244, 67, 54, 0.15);
    color: #E57373;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.btn-danger:hover {
    background: rgba(244, 67, 54, 0.25);
    border-color: rgba(244, 67, 54, 0.5);
    color: #E57373;
}

.btn-outline-primary {
    border: 1px solid rgba(0, 242, 234, 0.4);
    color: var(--tiktok-cyan);
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(0, 242, 234, 0.15);
    color: var(--tiktok-cyan);
    border-color: rgba(0, 242, 234, 0.6);
}

.btn-outline-secondary {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.btn-outline-success {
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #81C784;
    background: transparent;
}

.btn-outline-success:hover {
    background: rgba(76, 175, 80, 0.15);
    color: #81C784;
}

.btn-lg {
    padding: 12px 28px;
    font-size: 1rem;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* ==================== CARDS ==================== */

.card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-base);
    overflow: hidden;
    color: var(--text-primary);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 242, 234, 0.1);
    border-color: rgba(0, 242, 234, 0.15);
}

.card-header {
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 16px 20px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.card-body {
    padding: 20px;
    background: rgba(0, 0, 0, 0.15);
}

.card-footer {
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding: 14px 20px;
}

/* Gradient Card Headers */
.card-header.gradient-cyan {
    background: var(--gradient-cyan);
    color: white;
    border: none;
}

.card-header.gradient-pink {
    background: var(--gradient-pink);
    color: white;
    border: none;
}

.card-header.gradient-primary {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

/* ==================== STATISTICS CARDS ==================== */

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 242, 234, 0.3);
    border-color: var(--tiktok-cyan);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
}

.stat-icon.cyan {
    background: rgba(0, 242, 234, 0.1);
    color: var(--tiktok-cyan);
}

.stat-icon.pink {
    background: rgba(255, 0, 80, 0.1);
    color: var(--tiktok-pink);
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ==================== BADGES ==================== */

.badge {
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--radius-md);
    font-size: 0.75rem;
}

.badge-success {
    background: rgba(76, 175, 80, 0.15);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.badge-warning {
    background: rgba(255, 152, 0, 0.15);
    color: #FFB74D;
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.badge-danger {
    background: rgba(244, 67, 54, 0.15);
    color: #E57373;
    border: 1px solid rgba(244, 67, 54, 0.25);
}

.badge-info {
    background: rgba(102, 126, 234, 0.15);
    color: #9FA8DA;
    border: 1px solid rgba(102, 126, 234, 0.25);
}

.badge-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==================== FORMS ==================== */

.form-control,
.form-select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(0, 242, 234, 0.4);
    box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.08);
    outline: none;
    color: var(--text-primary);
}

.form-control::placeholder {
    color: var(--text-tertiary);
}

.form-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-label i {
    color: var(--accent-cyan);
    font-size: 0.9rem;
}

/* Filters Card */
.filters-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.filters-card .form-select,
.filters-card .form-control {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.filters-card .form-select:hover,
.filters-card .form-control:hover {
    border-color: rgba(0, 242, 234, 0.3);
    background: rgba(0, 0, 0, 0.35);
}

.filters-card .form-select:focus,
.filters-card .form-control:focus {
    background: rgba(0, 0, 0, 0.4);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.1);
}
    font-size: 0.875rem;
}

/* ==================== MODAL ==================== */

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
}

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

.modal-title {
    font-weight: 700;
    font-size: 20px;
}

.modal-body {
    padding: 32px;
    background: var(--bg-secondary);
}

.modal-footer {
    background: var(--bg-primary);
    border-top: 1px solid var(--bg-tertiary);
    padding: 20px 32px;
}

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

.modal-backdrop {
    background-color: #000;
}

.modal-backdrop.show {
    opacity: 0.8;
}

/* ==================== COUNTRY CARDS ==================== */

.country-card {
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    height: 100%;
}

.country-card:hover {
    border-color: var(--tiktok-cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow-cyan);
    background: var(--bg-tertiary);
}

.country-flag {
    font-size: 56px;
    margin-bottom: 12px;
    line-height: 1;
}

.country-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

/* ==================== TABLES ==================== */

.table {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--text-primary);
}

.table thead th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px;
    border: none;
}

.table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.table tbody tr {
    border-bottom: 1px solid var(--bg-tertiary);
}

.table tbody tr:hover {
    background: var(--bg-tertiary);
}

.table-dark {
    background: var(--bg-primary);
}

.table-dark thead th {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.table-dark tbody tr {
    border-color: var(--bg-tertiary);
}

/* ==================== ALERTS ==================== */

.alert {
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.alert-success {
    background: rgba(0, 242, 234, 0.1);
    color: #00A89E;
    border-left: 4px solid var(--tiktok-cyan);
}

.alert-danger {
    background: rgba(255, 0, 80, 0.1);
    color: #D9003F;
    border-left: 4px solid var(--tiktok-pink);
}

.alert-warning {
    background: rgba(255, 165, 0, 0.1);
    color: #CC8400;
    border-left: 4px solid #FFA500;
}

.alert-info {
    background: rgba(102, 126, 234, 0.1);
    color: #5366CC;
    border-left: 4px solid #667eea;
}

/* ==================== LOADING OVERLAY ==================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 24, 35, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
}

.loading-spinner {
    width: 64px;
    height: 64px;
    border: 4px solid var(--bg-tertiary);
    border-top-color: var(--tiktok-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==================== PROGRESS BAR ==================== */

.progress {
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    overflow: hidden;
}

.progress-bar {
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

/* ==================== PAGINATION ==================== */

.pagination .page-link {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    margin: 0 4px;
    border-radius: var(--radius-md);
    padding: 8px 16px;
}

.pagination .page-link:hover {
    background: var(--bg-tertiary);
    border-color: var(--tiktok-cyan);
    color: var(--tiktok-cyan);
}

.pagination .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    box-shadow: var(--shadow-cyan);
}

.pagination .page-item.disabled .page-link {
    background: var(--bg-primary);
    border-color: var(--bg-tertiary);
    color: var(--text-tertiary);
}

/* ==================== UTILITY CLASSES ==================== */

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

.gradient-bg {
    background: var(--gradient-primary);
    color: white;
}

.shadow-tiktok {
    box-shadow: var(--shadow-lg);
}

.rounded-tiktok {
    border-radius: var(--radius-lg);
}

/* ==================== ANIMATIONS ==================== */

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

.fade-in {
    animation: fadeIn var(--transition-base) ease-out;
}

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

.slide-up {
    animation: slideUp var(--transition-slow) ease-out;
}

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

@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 16px;
    }
    
    .country-card {
        margin-bottom: 16px;
    }
    
    .card-body {
        padding: 16px;
    }
}

/* ==================== DROPDOWN MENUS ==================== */

.dropdown-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    padding: 8px;
}

.dropdown-item {
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
    color: var(--tiktok-cyan);
}

.dropdown-divider {
    border-color: var(--bg-tertiary);
    margin: 8px 0;
}

/* ==================== TEXT & LINKS ==================== */

a {
    color: var(--tiktok-cyan);
    text-decoration: none;
    transition: all var(--transition-fast);
}

a:hover {
    color: var(--tiktok-pink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

.text-muted {
    color: var(--text-primary) !important;
}

.text-muted i,
.text-muted .fas,
.text-muted .fa {
    color: var(--text-primary) !important;
}

.text-muted,
.text-muted * {
    color: var(--text-primary) !important;
}

/* Override any icon colors inside text-muted */
i.text-muted,
.fas.text-muted,
.fa.text-muted {
    color: var(--text-primary) !important;
}

/* ==================== BREADCRUMB ==================== */

.breadcrumb {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 12px 20px;
}

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

.breadcrumb-item.active {
    color: var(--text-primary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-tertiary);
}

/* ==================== LIST GROUP ==================== */

.list-group-item {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
}

.list-group-item:hover {
    background: var(--bg-tertiary);
}

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

/* ==================== IMAGES & MEDIA ==================== */

img {
    border-radius: var(--radius-sm);
}

/* Modal/Detail images and video thumbnails */
.img-fluid { max-width: 100%; height: auto; }
.video-thumbnail { cursor: pointer; }

/* Star rating gold color */
.star-gold { color: gold; }

/* Show copy icon on hover, no inline styles */
.hover-copy .copy-icon { display: none; }
.hover-copy:hover .copy-icon { display: inline-block; }

.img-thumbnail {
    background: var(--bg-secondary);
    border: 2px solid var(--bg-tertiary);
}

/* ==================== SHOP CARDS ==================== */

/* ========================================
   MODERN SHOP CARDS - GRID LAYOUT
   ======================================== */

.shop-card-modern {
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 242, 234, 0.15);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.shop-card-modern::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.shop-card-modern:hover {
    border-color: var(--tiktok-cyan);
    box-shadow: 0 4px 16px rgba(0, 242, 234, 0.2);
    transform: translateY(-2px);
}

.shop-card-modern:hover::before {
    width: 4px;
}

.shop-card-modern.compact {
    padding: 12px;
}

.shop-card-modern.compact .shop-title {
    font-size: 14px;
}

.shop-card-modern.compact .action-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.shop-card-header {
    flex: 1;
    margin-bottom: 12px;
}

.shop-info {
    width: 100%;
}

.shop-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.shop-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-badge i {
    font-size: 5px;
}

.status-badge.active {
    background: rgba(0, 242, 234, 0.15);
    color: var(--tiktok-cyan);
    border: 1px solid rgba(0, 242, 234, 0.3);
}

.status-badge.inactive {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.shop-note-wrapper {
    margin-top: 6px;
    margin-bottom: 6px;
    min-height: 20px;
}

.shop-note-display {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 242, 234, 0.08);
    border: 1px solid rgba(0, 242, 234, 0.2);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    color: var(--text-secondary);
}

.shop-note-display:hover {
    background: rgba(0, 242, 234, 0.12);
    border-color: var(--tiktok-cyan);
}

.shop-note-display i {
    color: var(--tiktok-cyan);
    font-size: 10px;
    flex-shrink: 0;
}

.shop-note-display span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-note-edit {
    display: flex;
    gap: 4px;
    align-items: center;
}

.note-input {
    flex: 1;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--tiktok-cyan);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 11px;
    transition: all 0.2s ease;
}

.note-input:focus {
    outline: none;
    border-color: var(--tiktok-pink);
    box-shadow: 0 0 0 2px rgba(255, 0, 80, 0.1);
}

.note-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
}

.note-btn.save {
    background: var(--tiktok-cyan);
    color: var(--bg-primary);
}

.note-btn.save:hover {
    background: var(--tiktok-pink);
}

.note-btn.cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.note-btn.cancel:hover {
    background: var(--bg-primary);
}

.add-note-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed rgba(0, 242, 234, 0.3);
    border-radius: 6px;
    color: var(--tiktok-cyan);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-note-btn:hover {
    background: rgba(0, 242, 234, 0.08);
    border-color: var(--tiktok-cyan);
    border-style: solid;
}

.shop-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 242, 234, 0.08);
    border: 1px solid rgba(0, 242, 234, 0.15);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.meta-item i {
    font-size: 10px;
}

.meta-item.region {
    color: var(--tiktok-cyan);
    border-color: rgba(0, 242, 234, 0.3);
}

.meta-item.products {
    color: #9c27b0;
    border-color: rgba(156, 39, 176, 0.3);
}

.meta-item.sync {
    color: #2196f3;
    border-color: rgba(33, 150, 243, 0.3);
}

.shop-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
}

.action-btn {
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.action-btn i {
    font-size: 11px;
}

.action-btn.primary {
    background: var(--tiktok-cyan);
    color: var(--bg-primary);
    grid-column: 1 / -1;
}

.action-btn.primary:hover {
    background: var(--tiktok-pink);
    transform: translateY(-1px);
}

.action-btn.success {
    background: #00C851;
    color: white;
}

.action-btn.success:hover {
    background: #007E33;
}

.action-btn.secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 242, 234, 0.2);
}

.action-btn.secondary:hover {
    background: rgba(0, 242, 234, 0.1);
    color: var(--tiktok-cyan);
    border-color: var(--tiktok-cyan);
}

.action-btn.danger {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
}

.action-btn.danger:hover {
    background: rgba(255, 71, 87, 0.2);
    border-color: #ff4757;
}

/* Responsive */
@media (max-width: 768px) {
    .shop-card-actions {
        grid-template-columns: 1fr;
    }
}

/* Old shop card styles - keep for backward compatibility */
.shop-card {
    background: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-lg);
    padding: 20px;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    height: 100%;
}

/* Compact Shop Card */
.shop-card.compact {
    padding: 12px 16px;
    border-radius: var(--radius-md);
}

.shop-card.compact.horizontal {
    padding: 10px 16px;
}

.shop-card.compact .shop-name {
    font-size: 14px;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.shop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-primary);
    transition: width var(--transition-base);
}

.shop-card:hover {
    transform: translateX(4px);
    border-color: var(--tiktok-cyan);
    box-shadow: 0 4px 16px rgba(0, 242, 234, 0.2);
}

.shop-card:hover::before {
    width: 8px;
}

.shop-card .shop-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Shop Note Styles */
.shop-note-container {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 0;
}

.shop-note-display {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.shop-note-display:hover {
    background-color: var(--bg-tertiary);
}

.shop-note-display small {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
}

.shop-note-display .text-truncate {
    max-width: 350px;
    display: inline-block;
    vertical-align: middle;
}

.shop-note-edit .input-group {
    margin-top: 0;
}

.shop-note-edit .form-control {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 11px;
    padding: 4px 8px;
}

.shop-note-edit .form-control:focus {
    background: var(--bg-primary);
    border-color: var(--tiktok-cyan);
    color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(0, 242, 234, 0.1);
}

.shop-note-edit .btn {
    padding: 4px 8px;
    font-size: 11px;
}

.shop-card .shop-region {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--tiktok-cyan);
}

.stat-small {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
}

.stat-small .stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

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

/* ==================== INPUT GROUPS ==================== */

.input-group-text {
    background: var(--bg-tertiary);
    border: 2px solid var(--bg-tertiary);
    color: var(--text-secondary);
}

.input-group .form-control:focus ~ .input-group-text {
    border-color: var(--tiktok-cyan);
}

/* ============================================
   PRODUCTS TABLE STYLES
   ============================================ */

/* Container spacing */
.container-fluid {
    max-width: 1920px;
}

/* Products Table */
.table {
    background: rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
    margin-bottom: 0;
}

.table thead th {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 242, 234, 0.15);
    padding: 16px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
    background: transparent;
}

.table tbody tr:hover {
    background: rgba(0, 242, 234, 0.08) !important;
    transform: translateX(2px);
}

.table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 0.85rem;
    line-height: 1.5;
    background: transparent;
}

.table tbody td:first-child {
    padding-left: 20px;
}

.table tbody td:last-child {
    padding-right: 20px;
}

/* Product name styling */
.table .fw-semibold {
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* SKU code styling */
.table code {
    background: rgba(0, 242, 234, 0.08);
    color: #4FC3F7;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: 'Monaco', 'Courier New', monospace;
    font-weight: 500;
    border: 1px solid rgba(0, 242, 234, 0.15);
}

/* Price styling */
.table .fw-bold {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Product Table Image */
.table img {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.table tr:hover img {
    transform: scale(1.03);
}

/* Responsive table */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

/* Scrollbar styling */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--tiktok-cyan);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--tiktok-pink);
}

/* Alert Info */
.alert-info {
    background: rgba(0, 242, 234, 0.06);
    border: 1px solid rgba(0, 242, 234, 0.15);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.alert-info i {
    color: #4FC3F7;
}

/* ============================================
   PAGINATION STYLES
   ============================================ */

.pagination {
    gap: 8px;
}

.page-link {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.page-link:hover {
    background: rgba(0, 242, 234, 0.1);
    color: var(--tiktok-cyan);
    border-color: rgba(0, 242, 234, 0.3);
    transform: translateY(-1px);
}

.page-item.active .page-link {
    background: rgba(0, 242, 234, 0.15);
    border-color: rgba(0, 242, 234, 0.4);
    color: var(--tiktok-cyan);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1200px) {
    .table {
        font-size: 13px;
    }
    
    .table thead th,
    .table tbody td {
        padding: 14px 10px;
    }
    
    .table .fw-semibold {
        font-size: 14px;
    }
}

/* ============================================
   COUNTRY SELECTION MODAL
   ============================================ */

.country-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.country-card:hover {
    border-color: rgba(0, 242, 234, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 242, 234, 0.12);
    background: rgba(0, 242, 234, 0.08);
}

.country-flag {
    font-size: 3rem;
    margin-bottom: 10px;
}

.country-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

.display-5 {
    font-size: 2.5rem;
    font-weight: 700;
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

/* ============================================
   AMAZON PRODUCTS - DARK THEME GRID CARDS
   ============================================ */

/* Amazon Product Cards - Dark Theme */
.product-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 242, 234, 0.529);
    border-color: rgba(0, 242, 234, 0.823);
}

.product-card .card-img-top {
    height: 200px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.product-card .card-img-top img {
    object-fit: contain;
    padding: 10px;
    transition: transform 0.3s ease;
}

.product-card:hover .card-img-top img {
    transform: scale(1.1);
}

/* Amazon Badges - Gradient Style */
.badge-prime {
    background: rgba(255, 193, 7, 0.15);
    color: #FFC107;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.badge-book {
    background: rgba(0, 242, 234, 0.15);
    color: var(--tiktok-cyan);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.7rem;
    border: 1px solid rgba(0, 242, 234, 0.3);
}

/* Product Actions - Dark Theme */
.product-actions {
    opacity: 0;
    transition: opacity 0.3s;
}

.product-card:hover .product-actions {
    opacity: 1;
}

.product-actions .btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 242, 234, 0.4);
    backdrop-filter: blur(8px);
    padding: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-actions .btn:hover {
    background: rgba(0, 242, 234, 0.2);
    border-color: var(--tiktok-cyan);
    transform: scale(1.05);
}

.product-actions .btn i {
    color: var(--tiktok-cyan);
    font-size: 0.75rem;
}

.product-actions .btn:hover i {
    color: var(--tiktok-cyan);
}

/* Product Card Body - Dark Theme */
.product-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
}

/* ASIN Badge - Pink Gradient */
.badge-asin,
.copy-asin {
    background: rgba(255, 0, 80, 0.15) !important;
    color: var(--tiktok-pink);
    padding: 5px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    border: 1px solid rgba(255, 0, 80, 0.3);
}

.badge-asin:hover,
.copy-asin:hover {
    background: rgba(255, 0, 80, 0.25) !important;
    transform: translateY(-1px);
}

/* Product Name - Bright Text */
.product-name,
.copy-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.8em;
    margin-bottom: 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.product-name:hover,
.copy-name:hover {
    color: var(--tiktok-cyan);
}

/* Product Price - Cyan Color */
.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4FC3F7;
    margin-bottom: 8px;
}

.product-price-main {
    color: #4FC3F7;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Product Rating - Yellow Stars */
.product-rating {
    font-size: 0.75rem;
    color: #FFB800;
}

.product-rating .rating-count {
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 4px;
}

/* Product Category Badge */
.product-category {
    background: rgba(102, 126, 234, 0.15);
    color: #8B9FE8;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 500;
    display: inline-block;
    border: 1px solid rgba(102, 126, 234, 0.25);
}

/* Product Details - Secondary Text */
.product-text-muted {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.product-name-link {
    color: var(--text-primary);
    line-height: 1.4;
    height: 42px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}

.product-name-link:hover {
    color: var(--tiktok-cyan);
}

.product-asin-display {
    color: var(--tiktok-pink);
    font-size: 0.8rem;
    max-width: 80px;
    font-weight: 600;
}

/* Product Info Pills - Dark Theme */
.pill-info {
    background: rgba(0, 242, 234, 0.1);
    color: #4FC3F7;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    display: inline-block;
    border: 1px solid rgba(0, 242, 234, 0.2);
}

.pill-gradient {
    background: rgba(102, 126, 234, 0.12);
    color: #8B9FE8;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.pill-danger {
    background: rgba(244, 67, 54, 0.12);
    color: #EF5350;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid rgba(244, 67, 54, 0.2);
}

/* Hover Copy Effects */
.hover-copy {
    transition: all 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hover-copy:hover {
    background: rgba(0, 242, 234, 0.15) !important;
    color: var(--tiktok-cyan) !important;
    transform: translateX(2px);
}

/* Catalog secondary items */
.product-card .text-muted.small.copy-catalog {
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.product-card .text-muted.small.copy-catalog:hover {
    background: rgba(0, 242, 234, 0.12);
    color: var(--tiktok-cyan) !important;
    border-color: rgba(0, 242, 234, 0.25);
}

/* Card Border Bottom for TikTok Shop Info */
.product-card .border-bottom {
    border-color: var(--bg-tertiary) !important;
}

/* Text Muted Override for Product Cards */
.product-card .text-muted {
    color: var(--text-primary) !important;
}

.product-card .text-muted i {
    color: var(--text-primary) !important;
}

.product-card .text-muted * {
    color: var(--text-primary) !important;
}

/* Ensure small font labels stay muted */
.product-card .text-muted.small,
.product-card .text-muted.mb-1,
.product-card div.text-muted {
    color: var(--text-primary) !important;
    font-size: 0.75rem;
}

/* Fix for label icons and text in product cards */
.product-card .text-muted .fas,
.product-card .text-muted .fa,
.product-card .text-muted i {
    color: var(--text-primary) !important;
}

/* Ensure price and stock labels are muted */
.product-card .border-bottom .text-muted {
    color: var(--text-primary) !important;
}

/* Catalog label styling */
.product-card .mb-2 .text-muted,
.product-card .mb-1 .text-muted {
    color: var(--text-secondary) !important;
}

/* ============================================
   FILTER SIDEBAR - STICKY POSITIONING
   ============================================ */

.col-xl-2 .card,
.col-lg-3 .card {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* ============================================
   TIKTOK PRODUCTS TABLE - SPECIFIC STYLES
   ============================================ */

/* Table column widths */
.table th.col-image { width: 80px; }
.table th.col-name { width: 35%; }
.table th.col-sku { width: 120px; }
.table th.col-price { width: 100px; }
.table th.col-stock { width: 80px; text-align: center; }
.table th.col-category { width: 100px; }
.table th.col-status { width: 100px; }
.table th.col-updated { width: 120px; }
.table th.col-actions { width: 120px; text-align: center; }

/* Table cell alignment */
.table td.text-center { text-align: center; }

/* Product name in table */
.table .product-name-cell {
    margin-bottom: 4px;
}

/* SKU code in table */
.table .sku-code {
    font-size: 0.75rem;
    background: rgba(0, 242, 234, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    color: #4FC3F7;
    border: 1px solid rgba(0, 242, 234, 0.15);
}

/* Price in table */
.table .price-value {
    color: #4FC3F7;
}

/* Category badge in table */
.table .category-badge {
    font-size: 0.7rem;
}

/* Empty state */
.empty-state {
    padding: 60px;
}

.empty-state-icon {
    opacity: 0.3;
}

/* Modal icons */
.modal-icon-large {
    font-size: 3rem;
}

/* Inline form */
.inline-form {
    display: inline;
}

/* Product image in table */
.table .product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Extended product thumb (larger in TikTok products table) */
.product-thumb { width:100px; height:100px; object-fit:cover; border-radius:8px; }

/* Small font utilities */
.text-xs { font-size:11px !important; }
.text-sm { font-size:12px !important; }

/* Code small variant (ASIN, SKU) */
.code-xs { font-size:13px; }
.code-asin { background: rgba(255, 0, 80, 0.15); color: var(--tiktok-pink); padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(255, 0, 80, 0.3); font-weight: 600; display:inline-block; }
.code-sku { background: rgba(0, 242, 234, 0.10); color: #4FC3F7; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(0, 242, 234, 0.2); font-weight: 600; display:inline-block; }

/* Status badge sizing */
.badge-status { font-size:12px; padding:5px 12px; }

/* Product title clamp */
.product-title.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Meta inline group */
.meta-inline .sku-code { font-size:11px; }
.category-path { line-height:1.3; }

/* Wrapper helpers (no inline styles) */
.product-info-wrapper { width:100%; }
.product-thumb-wrapper { flex-shrink:0; }
.product-meta { min-width:0; }

/* TikTok Products Index page transferred styles */
.stats-row { display:flex; gap:10px; flex-wrap:wrap; }
.stats-row .stat-box { flex:1 1 260px; }
.products-container { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
@media (max-width:768px){ .products-container { grid-template-columns:1fr; } }
@media (min-width:1400px){ .products-container { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } }
.stat-box { 
    flex:1; 
    background: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    color:#fff; 
    padding:20px; 
    border-radius: var(--radius-lg); 
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}
.stat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 242, 234, 0.3);
    border-color: rgba(0, 242, 234, 0.4);
}
.stat-box .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.stat-box .stat-icon.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stat-box .stat-icon.bg-gradient-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.stat-box .stat-icon.bg-gradient-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.stat-box .stat-icon.bg-gradient-info {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-box .stat-content {
    flex: 1;
    text-align: left;
}
.stat-box h3 { font-size:32px; font-weight:700; margin:0; line-height: 1; }
.stat-box p { margin:5px 0 0; opacity:.7; font-size:13px; text-transform: uppercase; letter-spacing: 0.5px; }
.product-card { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(8, 234, 226, 0.521); }
.product-image { position:relative; height:140px; background: var(--bg-tertiary); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.product-image img { width:100%; height:100%; object-fit: contain; }
.product-image .no-image { font-size:48px; color: rgba(255,255,255,.25); }
.image-count { position:absolute; right:10px; bottom:10px; background: rgba(0,0,0,.5); color:#fff; padding:3px 8px; border-radius:12px; font-size:10px; display:flex; align-items:center; gap:4px; }
.product-info { padding:8px 10px; }
.product-meta-grid { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.meta-row { display:grid; grid-template-columns:18px 1fr; gap:4px; align-items:center; font-size:11px; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
.meta-row.meta-2 { grid-template-columns:18px minmax(0,1fr) 18px minmax(0,1fr); column-gap:8px; }
.meta-row:last-child { border-bottom:none; padding-bottom:0; }
.meta-row.date-info { padding-top:8px; border-top:1px solid rgba(255,255,255,0.1); }
.meta-label { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7); flex-shrink:0; width:18px; font-size:11px; }
.meta-label i { color:#667eea; width:13px; font-size:11px; }
/* Colored icons for quick recognition inside product cards */
.product-card .meta-label .fa-barcode { color: var(--tiktok-pink) !important; }
.product-card .meta-label .fa-hashtag { color: #4FC3F7 !important; }
.product-card .meta-label .fa-dollar-sign { color: #4FC3F7 !important; }
.product-card .meta-label .fa-boxes { color: #81C784 !important; }
.product-card .meta-label .fa-folder { color: #8B9FE8 !important; }
.product-card .meta-label .fa-store { color: var(--tiktok-cyan) !important; }
.product-card .meta-label .fa-calendar { color: #FFC107 !important; }
.product-card .meta-label .fa-info-circle { color: #9FA8DA !important; }
.meta-value { color:#e7eaed; text-align:left; word-break:break-word; font-size:12px; }
.meta-row .meta-value strong { font-size:14px; font-weight:700; }
.lh-14 { line-height:1.4; }
.break-all { word-break:break-all; }
.category-path { font-size:11px; color: var(--tiktok-cyan) !important; font-style:italic; }
.price-value { font-size:17px; font-weight:700; color:#4FC3F7; margin-right:6px; }
.original-price { font-size:11px; color:#999; text-decoration:line-through; }
.region-badge { display:inline-block; background:rgba(102,126,234,0.2); color:#667eea; padding:2px 6px; border-radius:8px; font-size:10px; margin-left:4px; }
.status-badge { 
    padding: 6px 14px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 600; 
    display: inline-block; 
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.2s ease;
}

.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Đang bán - Xanh lá gradient đẹp */
.status-ACTIVATE { 
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Bản nháp - Vàng gradient */
.status-DRAFT { 
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Tạm ngưng - Đỏ gradient */
.status-SELLER_DEACTIVATED { 
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Chờ duyệt - Xanh dương gradient */
.status-PENDING { 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Vi phạm - Xám đen */
.status-PLATFORM_DEACTIVATED {
    background: linear-gradient(135deg, #36383b 0%, #1f2023 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Đóng băng - Xanh lạnh */
.status-FREEZE {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Đã xóa - Đỏ đậm */
.status-DELETED {
    background: linear-gradient(135deg, #c94b4b 0%, #4b134f 100%);
    color: #ffffff;
    border-color: rgba(255,255,255,0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Product Actions - Enhanced styling giống Amazon */
.product-actions { 
    display: flex; 
    gap: 6px; 
    padding-top: 12px; 
    border-top: 1px solid rgba(255,255,255,0.05); 
    flex-wrap: wrap;
    justify-content: center;
}

.product-actions .btn { 
    width: 32px; 
    height: 32px; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
}

.product-actions .btn:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.product-actions .btn:active {
    transform: translateY(0);
}

.product-actions .btn i { 
    font-size: 13px;
    transition: transform 0.3s ease;
}

.product-actions .btn:hover i {
    transform: scale(1.15);
}

/* Button specific colors with gradients */
.product-actions .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.product-actions .btn-warning {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border: none;
}

.product-actions .btn-info {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
    border: none;
}

.product-actions .btn-danger {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    border: none;
}

.product-actions .btn-outline-info {
    background: transparent;
    border: 1px solid rgba(0, 242, 234, 0.3);
    color: var(--accent-cyan);
}

.product-actions .btn-outline-info:hover {
    background: rgba(0, 242, 234, 0.1);
    border-color: var(--accent-cyan);
}

.product-actions .btn-outline-warning {
    background: transparent;
    border: 1px solid rgba(255, 159, 64, 0.3);
    color: #ff9f40;
}

.product-actions .btn-outline-warning:hover {
    background: rgba(255, 159, 64, 0.1);
    border-color: #ff9f40;
}

.product-actions .btn-outline-success {
    background: transparent;
    border: 1px solid rgba(56, 239, 125, 0.3);
    color: #38ef7d;
}

.product-actions .btn-outline-success:hover {
    background: rgba(56, 239, 125, 0.1);
    border-color: #38ef7d;
}

/* Sticky filters wrapper */
.filters-sticky { position: sticky; top: 64px; z-index: 30; background: var(--bg-primary); padding-top: 6px; margin-top: -6px; }
@media (max-width: 900px) { .filters-sticky { top: 56px; } }

/* Category path: allow wrapping for easy copy */
.category-path { max-height: none !important; overflow: visible; display: block; white-space: normal; -webkit-line-clamp: unset; line-clamp: unset; -webkit-box-orient: unset; }

/* Product title single-line clamp */
.product-title { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Override Bootstrap table-hover white background */
.table-hover tbody tr:hover {
    background: rgba(0, 242, 234, 0.08) !important;
}

.table-hover tbody tr {
    background: transparent !important;
}

/* ============================================
   GRADIENT TEXT & HEADER UTILITIES
   ============================================ */

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

/* ==================== CATEGORY SUGGESTION GRID ==================== */
.cat-suggest-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.cat-suggest-card:hover {
    background: rgba(0, 242, 234, 0.15);
    border-color: rgba(0, 242, 234, 0.4);
    transform: translateY(-2px);
}
.cat-suggest-card.active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-cyan);
}
.cat-suggest-card.active .text-muted { color: rgba(255,255,255,0.85) !important; }

/* ==================== PUBLISH GRID LAYOUT ==================== */
.publish-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
@media (min-width:1200px){ .publish-grid { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } }
@media (max-width: 900px){ .publish-grid { grid-template-columns:1fr; } }
/* Wider modal */
.modal-wide { max-width:95vw; }
.sync-card { background: var(--bg-tertiary); border:1px solid var(--bg-tertiary); border-radius: var(--radius-lg); padding:16px 18px; box-shadow: var(--shadow-sm); position:relative; overflow:hidden; }
.sync-card:hover { border-color: var(--tiktok-cyan); box-shadow: var(--shadow-cyan); }
.sync-card-header { font-weight:600; font-size:14px; margin-bottom:12px; display:flex; align-items:center; letter-spacing:.3px; }
.sync-card-header i { color: var(--tiktok-cyan); }
.sync-card .form-text { font-size:11px; opacity:.8; }
.sync-card input[disabled], .sync-card textarea[disabled] { opacity:.6; }
.sync-card#card-candidates { background: var(--bg-secondary); }
.sync-card#card-candidates .sync-card-header i { color: var(--tiktok-pink); }
  .region-card {
        transition: all 0.3s ease;
        cursor: pointer;
        border: 2px solid transparent;
    }
    .region-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 242, 234, 0.3);
        border-color: var(--accent-cyan);
    }
    .region-flag {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    .hover-shadow {
        transition: all 0.3s ease;
    }
    .hover-shadow:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        transform: translateX(5px);
    }    }

/* ==================== PRODUCT EDIT FORM ==================== */
.edit-form {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: var(--radius-lg);
    max-width: 900px;
    margin: 0 auto;
}

.edit-form .form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.edit-form .form-label i {
    color: var(--tiktok-cyan);
    margin-right: 8px;
}

.edit-form .form-control,
.edit-form .form-select,
.edit-form textarea {
    background: var(--bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.edit-form .form-control:focus,
.edit-form .form-select:focus,
.edit-form textarea:focus {
    background: var(--bg-tertiary);
    border-color: var(--tiktok-cyan);
    box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.1);
    color: var(--text-primary);
}

.edit-form .form-control:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
    cursor: not-allowed;
}

.edit-form .btn-save {
    background: linear-gradient(90deg, var(--tiktok-cyan) 0%, var(--tiktok-pink) 100%);
    border: none;
    color: white;
    padding: 14px 40px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 242, 234, 0.3);
}

.edit-form .btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 242, 234, 0.5);
}

.edit-form .btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 14px 40px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.edit-form .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.edit-form .product-info-badge {
    background: rgba(0, 242, 234, 0.1);
    border: 1px solid rgba(0, 242, 234, 0.3);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 25px;
    color: var(--text-primary);
}

.edit-form .product-info-badge i {
    color: var(--tiktok-cyan);
}

/* ==================== PRODUCT DETAIL PAGE ==================== */
.product-detail-container {
    background: var(--bg-secondary);
    padding: 30px;
    border-radius: var(--radius-lg);
    max-width: 1200px;
    margin: 0 auto;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--tiktok-cyan);
    color: var(--tiktok-cyan);
    transform: translateX(-5px);
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 40px;
    margin-top: 20px;
}

.product-images {
    position: sticky;
    top: 80px;
    height: fit-content;
}

.main-image {
    width: 100%;
    height: 500px;
    object-fit: contain;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.thumbnail {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    background: var(--bg-tertiary);
}

.thumbnail:hover {
    border-color: var(--tiktok-cyan);
    transform: scale(1.05);
}

.thumbnail.active {
    border-color: var(--tiktok-cyan);
    box-shadow: 0 0 0 3px rgba(0, 242, 234, 0.2);
}

.product-info h1 {
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.product-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.badge-active {
    background: rgba(56, 239, 125, 0.2);
    color: #38ef7d;
    border: 1px solid rgba(56, 239, 125, 0.3);
}

.badge-inactive {
    background: rgba(255, 159, 64, 0.2);
    color: #ff9f40;
    border: 1px solid rgba(255, 159, 64, 0.3);
}

.price-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.current-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--tiktok-cyan);
}

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

.info-section {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
}

.info-section h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-section h3 i {
    color: var(--tiktok-cyan);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row strong {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-row strong i {
    color: var(--tiktok-cyan);
}

.info-row span {
    color: var(--text-primary);
}

.stock-high {
    color: #38ef7d;
    font-weight: 600;
}

.stock-out {
    color: #ff0050;
    font-weight: 600;
}

.info-section p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0;
}

.info-section .table {
    color: var(--text-primary);
    margin: 0;
}

.info-section .table thead {
    background: rgba(0, 242, 234, 0.1);
}

.info-section .table th {
    color: var(--tiktok-cyan);
    font-weight: 600;
    border-color: rgba(255, 255, 255, 0.1);
}

.info-section .table td {
    border-color: rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 992px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .product-images {
        position: static;
    }
}