:root {
    --primary: #10B981;
    --primary-dark: #059669;
    --secondary: #3B82F6;
    --success: #22C55E;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #06B6D4;
    /* `--error` is used 28 times across vms/script.js (the commission figure on
       the Financials earnings card, every "Failed to load…" line, the minimum-
       payout warning) but was never defined here, so all of it inherited the
       surrounding body colour and read as ordinary black text — a warning that
       does not look like one. Defined as an alias of --danger rather than
       rewriting 28 call sites, so the two names stay interchangeable for
       whoever writes the next one. */
    --error: #EF4444;
    --dark: #1F2937;
    --light: #F9FAFB;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --radius: 12px;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-preview-wrapper {
    position: relative;
    display: inline-block;
}

.image-preview-wrapper img {
    display: block;
}

.delete-image-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: var(--transition);
}

.delete-image-btn:hover {
    transform: scale(1.2);
    background: #DC2626;
}


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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background: var(--light);
    color: var(--gray-900);
    line-height: 1.6;
    overflow-x: hidden;
}

.loading-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-content {
    text-align: center;
    color: white;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #065f46 0%, #064e3b 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-bg-vectors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.floating-icon {
    position: absolute;
    font-size: 40px;
    color: rgba(255, 255, 255, 0.05);
    animation: floating 8s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

.login-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    padding: 48px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
}

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

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-header i {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 16px;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.login-header p {
    color: var(--gray-600);
    font-size: 15px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-group label i {
    margin-right: 6px;
    color: var(--primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 15px;
    transition: var(--transition);
    font-family: inherit;
    background-color: white;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.form-group select:hover {
    border-color: var(--gray-300);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    background-color: white;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.btn-primary {
    width: 100%;
    padding: 14px 24px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.dashboard-container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 280px;
    background: white;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    transition: var(--transition);
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.logo i {
    font-size: 28px;
}

.sidebar.collapsed .logo span,
.sidebar.collapsed .logo img {
    display: none;
}

.sidebar.collapsed .logo i {
    display: inline-block !important;
}

.sidebar-toggle {
    background: var(--gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.sidebar-toggle:hover {
    background: var(--gray-200);
}

.sidebar-nav {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    color: var(--gray-700);
    text-decoration: none;
    transition: var(--transition);
    margin-bottom: 4px;
    font-weight: 500;
}

.nav-item:hover {
    background: var(--gray-100);
    color: var(--primary);
}

.nav-item.active {
    background: var(--primary);
    color: white;
}

.nav-item i {
    font-size: 20px;
    width: 24px;
}

.sidebar.collapsed .nav-item span {
    display: none;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--gray-200);
}

.btn-logout {
    width: 100%;
    padding: 12px 16px;
    background: var(--danger);
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-logout:hover {
    background: #DC2626;
    transform: translateY(-2px);
}

.main-content {
    flex: 1;
    margin-left: 280px;
    min-width: 0;
    max-width: calc(100% - 280px);
    overflow-x: hidden;
    transition: var(--transition);
}

.sidebar.collapsed+.main-content {
    margin-left: 80px;
    max-width: calc(100% - 80px);
}

.header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 90;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--gray-700);
}

.header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-btn {
    position: relative;
    background: var(--gray-100);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.header-btn:hover {
    background: var(--gray-200);
}

.header-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: var(--radius);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-900);
}

.user-email {
    font-size: 12px;
    color: var(--gray-600);
}

.content-area {
    padding: 24px;
    min-height: calc(100vh - 81px);
    overflow-x: hidden;
    box-sizing: border-box;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.stat-icon.primary {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
}

.stat-icon.secondary {
    background: rgba(59, 130, 246, 0.1);
    color: var(--secondary);
}

.stat-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.stat-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}

.stat-trend.up {
    color: var(--success);
}

.stat-trend.down {
    color: var(--danger);
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

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

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.chart-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.chart-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}

.chart-container {
    position: relative;
    height: 300px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.page-actions {
    display: flex;
    gap: 12px;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

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

.btn-success:hover {
    background: #16A34A;
    transform: translateY(-2px);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

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

.btn-danger:hover {
    background: #DC2626;
}

.filters-bar {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 14px;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.filter-group {
    display: flex;
    gap: 12px;
}

.filter-group select {
    padding: 10px 40px 10px 16px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 14px;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    cursor: pointer;
    min-width: 140px;
    transition: var(--transition);
}

.filter-group select:hover {
    border-color: var(--gray-300);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.view-toggle {
    display: flex;
    gap: 8px;
}

.view-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.view-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.product-card {
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--gray-200);
}

.product-body {
    padding: 20px;
}

.product-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.product-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.product-subtitle {
    font-size: 14px;
    color: var(--gray-600);
}

.product-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.product-status.active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.product-status.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.product-meta {
    display: flex;
    gap: 16px;
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-600);
}

.meta-item i {
    color: var(--primary);
}

.product-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 16px;
}

.product-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-icon.edit {
    background: rgba(59, 130, 246, 0.1);
    color: var(--secondary);
}

.btn-icon.edit:hover {
    background: var(--secondary);
    color: white;
}

.btn-icon.delete {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.btn-icon.delete:hover {
    background: var(--danger);
    color: white;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    background: white;
    border-radius: var(--radius);
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.modal-close {
    background: var(--gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--gray-200);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 24px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.image-upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.image-upload-area:hover {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.05);
}

.image-upload-area i {
    font-size: 48px;
    color: var(--gray-400);
    margin-bottom: 12px;
}

.image-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.preview-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--danger);
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notification {
    background: white;
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification.success {
    border-left: 4px solid var(--success);
}

.notification.error {
    border-left: 4px solid var(--danger);
}

.notification.warning {
    border-left: 4px solid var(--warning);
}

.notification.info {
    border-left: 4px solid var(--info);
}

.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 24px;
}

.tab {
    padding: 12px 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
}

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

.tab-content {
    display: none;
}

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

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content,
    .sidebar.collapsed+.main-content {
        margin-left: 0;
        /* THE reason every VMS page was unusable on a phone. `.main-content`
           carries `max-width: calc(100% - 280px)` so the desktop column stops
           where the fixed 280px sidebar begins. This media query pulled the
           sidebar off-canvas and reset `margin-left`, but never the max-width —
           so on a 375px phone the whole portal was squeezed into
           375 - 280 = 95px, and because `.main-content` also sets
           `overflow-x: hidden` the other 280px was silently CLIPPED rather than
           scrolled. Nothing looked broken in a scrollbar; the app just showed a
           95px ribbon of itself. Both the normal and the collapsed-sidebar
           variant have to be reset, because `.collapsed` survives on the aside
           when the viewport crosses the breakpoint. */
        max-width: 100%;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .filters-bar {
        flex-direction: column;
    }

    .user-info {
        display: none;
    }
}

/* ==================== ENHANCED DASHBOARD STYLES ==================== */

/* Welcome Banner */
.welcome-banner {
    background: linear-gradient(135deg, var(--primary) 0%, #14B8A6 50%, var(--secondary) 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.welcome-banner::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -80px;
    right: -40px;
}

.welcome-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.welcome-greeting {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.welcome-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.welcome-stats-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.welcome-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.welcome-stat-icon {
    font-size: 14px;
}

.welcome-stat-value {
    font-weight: 700;
}

.welcome-stat-label {
    font-size: 11px;
    opacity: 0.8;
}

.welcome-right {
    text-align: right;
}

.welcome-date {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.welcome-day {
    font-size: 13px;
    opacity: 0.9;
}

/* Section Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
}

/* Quick Actions - Responsive Grid */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.quick-action-card {
    background: white;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    min-width: 0;
    box-shadow: var(--shadow-sm);
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.quick-action-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 24px;
    color: white;
}

.quick-action-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-action-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--danger);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 6px;
    min-width: 14px;
}

/* Stats Grid - Responsive */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.stat-card.stat-primary {
    border-left: 4px solid var(--primary);
}

.stat-card.stat-secondary {
    border-left: 4px solid var(--secondary);
}

.stat-card.stat-warning {
    border-left: 4px solid var(--warning);
}

.stat-card.stat-purple {
    border-left: 4px solid #8B5CF6;
}

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

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
}

.stat-icon.primary {
    background: linear-gradient(135deg, var(--primary), #14B8A6);
}

.stat-icon.secondary {
    background: linear-gradient(135deg, var(--secondary), #60A5FA);
}

.stat-icon.warning {
    background: linear-gradient(135deg, var(--warning), #FBBF24);
}

.stat-icon.purple {
    background: linear-gradient(135deg, #8B5CF6, #A78BFA);
}

.stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-label {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
}

.stat-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
    font-size: 11px;
    color: var(--gray-500);
}

.stat-footer strong {
    color: var(--gray-700);
}

/* Charts Row - Responsive */
.charts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.chart-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
}

.chart-badge.live {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.chart-container {
    height: 220px;
    position: relative;
}

.chart-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Bottom Grid - Responsive */
.bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* List Styles */
.list-container {
    max-height: 280px;
    overflow-y: auto;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

.list-item:last-child {
    border-bottom: none;
}

.list-rank {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--gray-100);
    flex-shrink: 0;
}

.list-rank.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
}

.list-rank.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: white;
}

.list-rank.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #B8860B);
    color: white;
}

.list-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
}

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

.list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-subtitle {
    font-size: 11px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-badge {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
}

.list-badge.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.list-badge.badge-warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.list-badge.badge-info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--secondary);
}

.list-badge.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.list-value {
    font-size: 11px;
    color: var(--gray-600);
    white-space: nowrap;
}

.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: var(--gray-400);
    font-size: 13px;
}

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

/* Tablet Landscape & Small Desktop */
@media (max-width: 1200px) {
    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bottom-grid .chart-card:last-child {
        grid-column: span 2;
    }
}

/* Tablet Portrait */
@media (max-width: 900px) {
    .charts-row {
        grid-template-columns: 1fr;
    }

    .bottom-grid {
        grid-template-columns: 1fr;
    }

    .bottom-grid .chart-card:last-child {
        grid-column: span 1;
    }
}

/* Mobile Landscape */
@media (max-width: 768px) {
    .welcome-banner {
        padding: 16px;
    }

    .welcome-name {
        font-size: 20px;
    }

    .welcome-date {
        font-size: 32px;
    }

    .welcome-stats-row {
        gap: 8px;
    }

    .welcome-stat {
        padding: 4px 8px;
        font-size: 11px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .quick-action-card {
        padding: 12px 6px;
    }

    .quick-action-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .quick-action-label {
        font-size: 10px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-value {
        font-size: 18px;
    }

    .chart-container {
        height: 180px;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .welcome-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .welcome-right {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .welcome-date {
        font-size: 28px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 10px;
    }
}

/* ==================== PREMIUM TABS & UI ==================== */

.tabs,
.modal-tabs {
    display: flex;
    gap: 2px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 0 20px;
    overflow-x: auto;
    border-radius: 8px 8px 0 0;
}

.tab-btn,
.tab {
    padding: 15px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--gray-500);
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s;
    margin-bottom: 0;
}

.tab-btn:hover,
.tab:hover {
    color: var(--primary);
    background: rgba(0, 0, 0, 0.02);
}

.tab-btn.active,
.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: white;
}

/* Tags Input */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    min-height: 40px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: 8px;
    border: 1px solid var(--gray-200);
}

.tag {
    background: white;
    border: 1px solid var(--gray-300);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
}

.tag i {
    cursor: pointer;
    color: var(--danger);
    font-size: 12px;
}

.tag i:hover {
    color: #DC2626;
}

.section-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 25px 0;
}

/* Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gray-300);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: var(--primary);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--primary);
}

input:checked+.slider:before {
    transform: translateX(24px);
}

/* Input Group */
.input-group {
    display: flex;
    gap: 10px;
}

.input-group input {
    flex: 1;
}

.input-group button {
    white-space: nowrap;
}

/* Booking Calendar Grid */
.booking-calendar-day {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 16px;
    min-height: 150px;
}

.booking-calendar-header {
    font-weight: 700;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-900);
}

/* Bookings Page Overhaul */
.bookings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.booking-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.booking-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
}

.booking-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.booking-id {
    font-size: 12px;
    color: var(--gray-500);
    font-family: monospace;
}

.booking-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.booking-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    line-height: 1.4;
}

.booking-customer {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.booking-details {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.detail-row:last-child {
    margin-bottom: 0;
}

.detail-label {
    color: var(--gray-500);
}

.detail-value {
    font-weight: 600;
    color: var(--gray-800);
}

.booking-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.btn-google-calendar {
    background: white;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    flex: 1;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-google-calendar:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--gray-600);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--gray-100);
    color: var(--primary);
    border-color: var(--primary);
}

.pagination-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Date Filter */
.date-filter-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-sm);
}

.date-input {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--gray-700);
}

@media (max-width: 1024px) {
    .bookings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bookings-grid {
        grid-template-columns: 1fr;
    }

    .date-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==================== MODERN BOOKINGS STYLES ==================== */

.bookings-tabs {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.bookings-tabs .tab-btn {
    flex: 1;
    min-width: 120px;
    padding: 12px 20px;
    border: 2px solid var(--gray-200);
    background: white;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bookings-tabs .tab-btn:hover {
    background: var(--gray-50);
    border-color: var(--primary);
}

.bookings-tabs .tab-btn.active {
    background: linear-gradient(135deg, var(--primary), #14B8A6);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.date-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
}

.date-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--gray-700);
}

.date-input {
    padding: 10px 14px;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.3s ease;
}

.date-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.bookings-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    padding: 0;
}

.booking-card-modern {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    display: flex;
    border: 1px solid var(--gray-100);
}

.booking-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.booking-accent {
    width: 5px;
    flex-shrink: 0;
}

.booking-content {
    flex: 1;
    padding: 20px;
}

.booking-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.booking-id {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500);
}

.booking-status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.status-primary {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.status-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.booking-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.booking-customer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 16px;
}

.booking-customer i {
    color: var(--primary);
}

.booking-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--gray-50);
    border-radius: 10px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-item i {
    font-size: 16px;
    color: var(--primary);
    width: 20px;
    text-align: center;
}

.detail-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

/* Booking card footer — the price and the action buttons.
 *
 * This was a `space-between` flex row with no `gap` and no `flex-wrap`. On an
 * ACTIONABLE card the buttons row is at its widest (Add to Calendar + Accept +
 * Reject, plus Mark Redeemed and Reschedule where they apply), and with nothing
 * stopping it the row squeezed `.booking-price` until "RM 27.00" broke across
 * two lines mid-value and the Reject button sat on top of what was left. A
 * price that wraps in the middle of the number is unreadable, and on the one
 * card where the vendor is being asked to decide about that exact amount.
 *
 * Three changes, each load-bearing:
 *   • the footer wraps, with a gap, so the buttons drop to their own line on a
 *     narrow card instead of colliding;
 *   • the price never shrinks below its own content width and never wraps;
 *   • the buttons take the slack and stay right-aligned, with `min-width: 0` so
 *     they can shrink themselves rather than pushing the price around.
 */
.booking-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
}

.booking-price {
    display: flex;
    flex-direction: column;
    /* Never give ground to the buttons: this is a money figure. */
    flex: 0 0 auto;
}

.price-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
}

.price-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    /* "RM 27.00" is one token. It must not break after "RM". */
    white-space: nowrap;
}

.booking-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Absorb the leftover width and stay on the right. `min-width: 0` overrides
     * the flex default of `auto`, which is what let this row refuse to shrink
     * and push into the price instead. */
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.btn-booking-action {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.btn-calendar {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.btn-calendar:hover {
    background: #2563EB;
    color: white;
}

.btn-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.btn-success:hover {
    background: #059669;
    color: white;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

.btn-danger:hover {
    background: #DC2626;
    color: white;
}

.pagination-modern {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-dots {
    padding: 0 8px;
    color: var(--gray-400);
}

.empty-state-modern {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
}

.empty-state-modern i {
    font-size: 80px;
    color: var(--gray-300);
    margin-bottom: 20px;
}

.empty-state-modern h3 {
    font-size: 24px;
    color: var(--gray-700);
    margin: 0 0 8px 0;
}

.empty-state-modern p {
    font-size: 16px;
    color: var(--gray-500);
}

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

    .booking-details-grid {
        grid-template-columns: 1fr;
    }

    .bookings-tabs {
        flex-direction: column;
    }

    .bookings-tabs .tab-btn {
        min-width: auto;
    }

    .date-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==================== VW-1: CALENDAR PAGE ==================== */
.vw-calendar-page {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vw-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: white;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.vw-calendar-toolbar .form-group {
    margin-bottom: 0;
    min-width: 200px;
}

.vw-calendar-toolbar label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 6px;
}

.vw-calendar-toolbar select,
.vw-calendar-toolbar input[type="date"],
.vw-calendar-toolbar input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: white;
    font-size: 14px;
}

.vw-calendar-toolbar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.vw-calendar-shell {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.vw-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--gray-600);
}

.vw-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vw-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.vw-legend-dot.confirmed { background: #22C55E; }
.vw-legend-dot.pending { background: #F59E0B; }
.vw-legend-strike {
    width: 14px;
    height: 0;
    border-top: 2px solid #EF4444;
    display: inline-block;
}
.vw-legend-stripe {
    width: 14px;
    height: 10px;
    background: repeating-linear-gradient(45deg, #3B82F6, #3B82F6 3px, transparent 3px, transparent 6px);
    display: inline-block;
}

/* FullCalendar day cell markers */
.vw-day-markers {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 2px 4px 4px;
    align-items: center;
}

.vw-day-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.vw-day-dot.confirmed { background: #22C55E; }
.vw-day-dot.pending { background: #F59E0B; }

.vw-day-count {
    font-size: 10px;
    color: var(--gray-700);
    font-weight: 600;
}

.fc .fc-daygrid-day.vw-day-blocked {
    background: rgba(239, 68, 68, 0.08);
    position: relative;
}

.fc .fc-daygrid-day.vw-day-blocked .fc-daygrid-day-number {
    color: #EF4444;
    text-decoration: line-through;
    font-weight: 700;
}

.fc .fc-daygrid-day.vw-day-seasonal {
    background-image: repeating-linear-gradient(45deg, rgba(59,130,246,0.15), rgba(59,130,246,0.15) 4px, transparent 4px, transparent 10px);
}

.fc .fc-daygrid-day.vw-day-blocked.vw-day-seasonal {
    background-color: rgba(239, 68, 68, 0.08);
}

.fc .fc-daygrid-day-frame {
    cursor: pointer;
    min-height: 80px;
}

.fc .fc-daygrid-day-frame:hover {
    background: rgba(59, 130, 246, 0.04);
}

/* Day-detail panel */
.vw-day-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-top: 16px;
}

.vw-day-panel h3 {
    margin: 0 0 12px 0;
    color: var(--gray-900);
    font-size: 18px;
}

.vw-day-panel .vw-day-empty {
    color: var(--gray-500);
    padding: 12px 0;
    text-align: center;
}

.vw-day-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.vw-day-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--gray-50);
    border-bottom: 2px solid var(--gray-100);
    font-size: 12px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.vw-day-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 13px;
    color: var(--gray-800);
    vertical-align: top;
}

.vw-day-table .vw-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.vw-day-table .vw-status-pill.confirmed { background: #DCFCE7; color: #166534; }
.vw-day-table .vw-status-pill.pending { background: #FEF3C7; color: #92400E; }
.vw-day-table .vw-status-pill.cancelled { background: #FEE2E2; color: #991B1B; }
.vw-day-table .vw-status-pill.completed { background: #DBEAFE; color: #1E40AF; }

.vw-day-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 16px;
}

.vw-day-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.vw-day-tag.blocked { background: #FEE2E2; color: #991B1B; }
.vw-day-tag.seasonal { background: #DBEAFE; color: #1E40AF; }

@media (max-width: 768px) {
    .vw-calendar-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .vw-calendar-toolbar-actions {
        margin-left: 0;
    }
    .vw-day-table {
        font-size: 12px;
    }
    .vw-day-table th, .vw-day-table td {
        padding: 8px;
    }
}

/* ==================== VW-RESP 2026-06-09: narrow-phone polish ==================== */

/* Tables: wrap in `.table-scroll` for horizontal scroll on mobile so the
   payout / data tables never blow out the layout. Existing tables get the
   styling automatically because they share the parent .card. */
.table-scroll,
.card > table,
.modal-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    min-width: 560px;
}

/* Forms: stack form-row on small phones (was minmax(200px) which leaves
   2 columns at ~430 px and squeezes inputs). */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Modal: cap height + scroll body, full-width on phones */
.modal-content {
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
@media (max-width: 600px) {
    .modal {
        padding: 8px;
    }
    .modal-content {
        /* !important because all fifteen modals in vms/script.js set their own
           `style="max-width: 460px…1000px"` inline, and an inline declaration
           outranks a stylesheet one however specific. Without it this rule was
           decorative: the Block Dates dialog, for one, still laid itself out at
           459px on a 375px phone and pushed its date fields and the Confirm
           Blocking button off the right edge. */
        max-width: 100% !important;
        max-height: 95vh;
        border-radius: 10px;
    }

    /* A <select> is sized by its WIDEST option, and a grid/flex item defaults to
       `min-width: auto`, so one long product name ("Island Hopping Day Tour")
       set the width of the entire dialog and nothing above it could shrink.
       These let the chain actually collapse to the phone's width; the select
       ellipsises its own text, which is the browser's job and not ours. */
    .modal-body,
    .modal-body form,
    .modal-body .form-group {
        min-width: 0;
    }

    .modal-body select,
    .modal-body input,
    .modal-body textarea {
        max-width: 100%;
        min-width: 0;
    }

    .modal-header, .modal-footer {
        padding: 16px;
    }
    .modal-footer {
        flex-wrap: wrap;
    }
    .modal-footer .btn {
        flex: 1;
        justify-content: center;
    }
}

/* 430 px — Pro Max / Plus class. Trim banner + grids further. */
@media (max-width: 430px) {
    .content-area { padding: 14px; }
    .header { padding: 14px 16px; }
    .user-menu { padding: 4px 8px; }
    .user-avatar { width: 34px; height: 34px; font-size: 14px; }
    .charts-grid { grid-template-columns: 1fr; }
    .bookings-grid { grid-template-columns: 1fr; }
    .bookings-grid-modern { grid-template-columns: 1fr; }
    .filters-bar { padding: 14px; }
    .search-box { min-width: 0; width: 100%; }
    .filter-group { width: 100%; flex-wrap: wrap; }
    .filter-group select { flex: 1; min-width: 0; }
}

/* 393 px — Pixel / iPhone 14/15. Stat values shrink further, page header stacks. */
@media (max-width: 393px) {
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-actions { width: 100%; flex-wrap: wrap; }
    .page-actions .btn { flex: 1; justify-content: center; }
    .welcome-stats-row { width: 100%; }
    .welcome-stat { flex: 1; min-width: 0; justify-content: center; }
    .stat-value { font-size: 17px; }
    .quick-actions-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .chart-container { height: 200px; }
    .vw-calendar-toolbar .form-group { min-width: 100%; }
}

/* 360 px — Galaxy A class. Final guard against any remaining overflow. */
@media (max-width: 360px) {
    .welcome-name { font-size: 18px; }
    .welcome-date { font-size: 24px; }
    .stat-card { padding: 10px; }
    .stat-icon { width: 30px; height: 30px; font-size: 14px; }
    .stat-value { font-size: 15px; }
    .stat-label { font-size: 10px; }
    .header h1 { font-size: 18px; }
    .header-btn { width: 36px; height: 36px; }
    .user-menu { padding: 2px 6px; }
    .nav-item { padding: 10px 12px; font-size: 14px; }
    .tab, .tab-btn { padding: 12px 14px; font-size: 13px; }
    .booking-details-grid { grid-template-columns: 1fr; }
    .bookings-tabs { padding: 10px; gap: 6px; }
    .bookings-tabs .tab-btn { padding: 10px 14px; font-size: 13px; min-width: 100%; }
}

/* 320 px — iSE first-gen. Last-resort: shrink padding everywhere. */
@media (max-width: 320px) {
    .content-area { padding: 10px; }
    .header { padding: 10px 12px; gap: 8px; }
    .header-right { gap: 8px; }
    .welcome-banner { padding: 12px; }
    .stat-value { font-size: 14px; }
    .header h1 { font-size: 16px; }
}

/* FullCalendar narrow tweaks: header buttons stack, day cell shrinks. */
@media (max-width: 600px) {
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
    .fc .fc-toolbar-title { font-size: 16px !important; }
    .fc .fc-daygrid-day-frame { min-height: 56px; }
    .vw-day-count { font-size: 9px; }
}
/* ==================== KEYBOARD FOCUS VISIBILITY ====================
   Two-colour ring (dark outline + white halo) so the focused control is
   visible on every surface in this portal: white sidebar/cards, green and
   red buttons, and the dark-green login background. :focus-visible only
   matches keyboard/programmatic focus, so mouse users see no change and the
   softer :focus styles above still apply to clicks. !important is required
   because several :focus rules above set `outline: none`. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: 3px solid var(--gray-900) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--white) !important;
    border-radius: 4px;
}

/* Inputs keep their own radius so the ring hugs the field. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible,
.filter-group select:focus-visible,
.date-input:focus-visible {
    border-radius: 8px;
}

/* Browsers that do not support :focus-visible fall back to :focus so a
   keyboard user is never left with no indicator at all. */
@supports not selector(:focus-visible) {

    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus,
    [role="button"]:focus {
        outline: 3px solid var(--gray-900) !important;
        outline-offset: 2px !important;
    }
}

/* Skip link — first tab stop, lets a keyboard user jump the 8-item sidebar
   nav straight to the page content. Off-screen until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--gray-900);
    color: var(--white);
    font-weight: 600;
    border-radius: 0 0 var(--radius) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Screen-reader-only text: announced, never painted. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Controls that used to be `<div onclick>` / `<i onclick>` are real <button>s
   now so a keyboard can reach them. These rules only strip the UA button
   defaults so they render exactly as the elements they replaced. */
button.quick-action-card {
    display: block;
    width: 100%;
    font: inherit;
    color: inherit;
}

button.delete-image-btn {
    padding: 0;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.icon-btn-bare {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--danger);
    font-size: inherit;
}

.icon-btn-bare:hover {
    color: #DC2626;
}

/* ==================== BADGES ====================
   `<span class="badge badge-success|badge-warning|badge-danger">` is used by the
   Payout History Status cell, the Report (Confirmed / Not confirmed) cell, the
   Virtual Cards status pill and the Reels active flag — but the only `.badge`
   rule in this file was `.header-btn .badge`, scoped to the notification count
   in the header. Everywhere else the class matched nothing: the pills rendered
   as bare inherited text with no background, no padding and no colour, so the
   tone the code carefully picks per state (§1.1.2c asks for the report status to
   be "clearly indicated") was thrown away and "Confirmed" and "Not confirmed"
   looked identical.

   Deliberately the same shape and the same tinted-background / solid-text
   treatment as `.list-badge` above, so the two badge systems read as one thing.
   `.header-btn .badge` is more specific and still wins for the header counter;
   the only properties added to it here are display/white-space, which an
   absolutely-positioned pill ignores. */
.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--gray-100);
    color: var(--gray-700);
}

.badge.badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.badge.badge-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}

.badge.badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
}

.badge.badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: #1D4ED8;
}

/* ==================== PROFILE PAGE — NARROW VIEWPORTS ====================
   The profile page builds its whole layout from inline styles in
   vms/script.js: a `grid-template-columns: 300px 1fr` outer shell and roughly
   eighteen inner `repeat(2|3, 1fr)` field grids, none of which has a breakpoint.
   On a 375px phone that shell alone asks for 300 + 637 = 961px and the page
   scrolled ~600px sideways.

   Fixed here rather than at the eighteen call sites because `repeat(auto-fit,
   minmax(…))` would ALSO change the desktop layout: several of those grids hold
   four or six fields in two columns, and auto-fit would spread them into three
   or four columns on a wide screen. Collapsing to a single column below a
   breakpoint keeps desktop byte-for-byte identical.

   `!important` and the attribute selector are both consequences of the inline
   styles: a stylesheet rule cannot otherwise outrank `style="…"`. The selector
   matches on the property NAME, so it keeps working if someone edits the
   column counts in script.js. */
@media (max-width: 900px) {
    .profile-container {
        grid-template-columns: 1fr !important;
    }

    /* A grid item defaults to `min-width: auto`, so the widest unbreakable thing
       inside .profile-main was setting the width of the whole column — the
       single column still came out 637px until this was added. */
    .profile-container>* {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .profile-container div[style*="grid-template-columns"],
    .modal-body div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}


/* Product badge chips (17 Sep). Scoped with !important because the page-wide
   .form-group label / input rules otherwise stretch the checkbox and wrap it
   onto the neighbouring chip. */
#vwProductBadges { display: flex; flex-wrap: wrap; gap: 8px; }
#vwProductBadges .vw-badge-chip {
    display: inline-flex !important; align-items: center; gap: 8px;
    width: auto !important; margin: 0 !important; padding: 6px 12px !important;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 999px; background: #fff;
    font-size: 13px !important; font-weight: 500 !important; line-height: 1.2;
    white-space: nowrap; cursor: pointer; user-select: none;
}
#vwProductBadges .vw-badge-chip input[type="checkbox"] {
    width: 16px !important; height: 16px !important; min-width: 16px; flex: 0 0 16px;
    margin: 0 !important; padding: 0 !important; position: static !important;
    -webkit-appearance: checkbox !important; appearance: auto !important;
    accent-color: var(--primary, #0d9488); box-shadow: none !important;
}
#vwProductBadges .vw-badge-img { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; border-radius: 4px; }
#vwProductBadges .vw-badge-chip.is-on { border-color: var(--primary, #0d9488); background: rgba(13, 148, 136, .08); }
#vwProductBadges .vw-badge-chip.is-locked { opacity: .55; cursor: not-allowed; background: var(--gray-50, #f9fafb); }
#vwProductBadges .vw-badge-note { font-size: 11px; font-weight: 400; color: var(--gray-500, #6b7280); }

/* Forgot-password link on the sign-in card. A button, not an anchor, because it
   triggers an action rather than navigating — but it should read as a quiet
   link beside the primary Sign In button, never compete with it. */
.btn-link-plain {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 6px 0;
    background: none;
    border: 0;
    color: var(--gray-500, #6b7280);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link-plain:hover:not(:disabled) { color: var(--primary, #00a19a); }
.btn-link-plain:disabled { opacity: 0.6; cursor: default; }