/* Walaway Management System - Complete CSS */
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Walaway Brand Colors */
    /* Brand teal is the CMS action colour. It was previously only ever written
       as a literal inside script.js templates, so styles.css had no token for
       it and a stray purple gradient (#667eea/#764ba2) had taken over every
       .btn-primary, .filter-btn.active and focus ring. */
    --brand-teal: #00A19A;
    --brand-teal-dark: #00857F;
    --brand-teal-tint: #f0fdfa;
    --brand-teal-ring: rgba(0, 161, 154, 0.18);
    --primary-blue: #00BCD4;
    --primary-orange: #FF6B35;
    --secondary-blue: #0097A7;
    --secondary-orange: #FF5722;

    /* UI Colors */
    --background: #f8fafc;
    --surface: #ffffff;
    --surface-hover: #f1f5f9;
    --border: #e2e8f0;
    --border-light: #f1f5f9;

    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-white: #ffffff;

    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
}

body {
    font-family: var(--font-family);
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

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

.loading-logo {
    width: 120px;
    height: auto;
    margin-bottom: var(--spacing-lg);
    filter: brightness(0) invert(1);
}

.loading-spinner .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid var(--text-white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing);
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Login Page */
.login-container {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-orange) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing);
    position: relative;
    overflow: hidden;
}

.login-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

@keyframes float {

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

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

.login-wrapper {
    width: 100%;
    max-width: 480px;
    position: relative;
    z-index: 2;
}

.brand-section {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.logo-container {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    display: inline-block;
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--spacing);
}

.brand-logo {
    width: 80px;
    height: auto;
}

.brand-subtitle {
    color: var(--text-white);
    font-size: var(--font-size-lg);
    font-weight: 500;
    opacity: 0.9;
}

.demo-search-bar {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: var(--spacing);
    display: flex;
    gap: var(--spacing);
    margin-bottom: var(--spacing-2xl);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-white);
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

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

.login-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.card-header h2 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.card-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    background: var(--surface);
    color: var(--text-primary);
    width: 100%;
    min-height: 48px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Checkbox and radio inputs: reset to natural size */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    min-height: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    accent-color: var(--primary);
    cursor: pointer;
}

.form-group select {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    background: var(--surface);
    color: var(--text-primary);
    width: 100%;
    min-height: 48px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    background-size: 14px;
    padding-right: 3rem;
    cursor: pointer;
}

.form-group select option.order-used {
    color: #cbd5e1;
    background-color: #f8fafc;
    font-style: italic;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(0, 188, 212, 0.08);
    transform: translateY(-1px);
}

.login-btn {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: var(--text-white);
    border: none;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

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

.login-btn .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.demo-credentials {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.demo-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing);
    text-align: center;
}

.demo-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.credential-option {
    background: var(--surface-hover);
    padding: var(--spacing);
    border-radius: var(--radius);
    font-size: var(--font-size-xs);
}

.credential-option p {
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.credential-option p:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* Dashboard Layout */
.dashboard-container {
    display: flex;
    min-height: 100vh;
    background: var(--background);
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    z-index: 100;
}

.sidebar.collapsed {
    width: 80px;
}

.sidebar.collapsed .sidebar-nav span,
.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

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

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.sidebar-logo-img {
    width: 40px;
    height: auto;
    flex-shrink: 0;
}

.logo-text {
    transition: all 0.3s ease;
}

.logo-text p {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.sidebar-toggle:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.sidebar-nav {
    flex: 1;
    padding: var(--spacing);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    padding: var(--spacing) var(--spacing-lg);
    border-radius: var(--radius);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
    width: 100%;
    text-align: left;
}

.nav-item:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: var(--text-white);
    box-shadow: var(--shadow);
}

.nav-item i {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.nav-item span {
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dashboard-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--spacing-lg) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
}

.header-title h1 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.header-title p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    position: relative;
}

.header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    position: relative;
}

.header-btn:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--error);
    color: var(--text-white);
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.header-notification-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 72px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 640px);
    overflow: hidden;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
    z-index: 2000;
}

.notification-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.notification-panel-header h3 {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-panel-content {
    max-height: min(60vh, 560px);
    overflow-y: auto;
    padding: 10px;
    display: grid;
    gap: 10px;
}

.notification-item {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    display: grid;
    gap: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.notification-item.clickable {
    cursor: pointer;
}

.notification-item.clickable:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.notification-item.read {
    opacity: 0.68;
}

.notification-item:not(.read) {
    border-width: 2px;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.notification-item.info:not(.read) {
    background: #dbeafe;
}

.notification-item.warning:not(.read) {
    background: #ffedd5;
}

.notification-item.error:not(.read) {
    background: #fee2e2;
}

.notification-item.warning {
    border-color: #fdba74;
    background: #fff7ed;
}

.notification-item.error {
    border-color: #fca5a5;
    background: #fef2f2;
}

.notification-item.info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.notification-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.notification-item-toprow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notification-dismiss-btn {
    border: none;
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease, color 0.2s ease;
}

.notification-dismiss-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.notification-item-meta {
    font-size: 12px;
    color: #64748b;
}

.notification-empty {
    margin: 0;
    padding: 18px 14px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    padding: var(--spacing-sm);
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.user-profile:hover {
    background: var(--surface-hover);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
}

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

.user-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.user-email {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.logout-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.logout-btn:hover {
    background: var(--error);
    color: var(--text-white);
}

/* Content Area */
.content-area {
    flex: 1;
    padding: var(--spacing-xl);
    overflow-y: auto;
}

/* Action Bar */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
    gap: var(--spacing);
}

.action-bar h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.action-bar p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.btn-group {
    display: flex;
    gap: var(--spacing);
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing) var(--spacing-lg);
    border-radius: var(--radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal-dark));
    color: var(--text-white);
    border-color: transparent;
}

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

.btn-outline {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border);
}

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

.btn-sm {
    padding: var(--spacing-sm) var(--spacing);
    font-size: var(--font-size-xs);
}

/* Segmented Control */
.segmented-control {
    display: flex;
    background: var(--surface-hover);
    padding: 3px;
    border-radius: var(--radius-md);
    width: fit-content;
    gap: 2px;
}

.control-item {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.control-item:hover {
    color: var(--text-primary);
}

.control-item.active {
    background: var(--surface);
    color: var(--primary-blue);
    box-shadow: var(--shadow-sm);
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.metric-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-orange));
}

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

/* Hidden Sheet1 #20 — dashboard metric cards navigate to their page. The card
   already lifts on hover, so the affordance a reader needs is the pointer and
   a visible keyboard focus ring (the cards are role="button" tabindex="0"). */
.metric-card.clickable {
    cursor: pointer;
}

.metric-card.clickable:hover {
    border-color: var(--brand-teal);
}

.metric-card.clickable:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.metric-card.blue::before {
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
}

.metric-card.orange::before {
    background: linear-gradient(90deg, var(--primary-orange), var(--secondary-orange));
}

.metric-card.green::before {
    background: linear-gradient(90deg, var(--success), #059669);
}

.metric-card.purple::before {
    background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.metric-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-info h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-info .value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.metric-info .change {
    font-size: var(--font-size-sm);
    color: var(--success);
    font-weight: 500;
}

.metric-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: var(--font-size-xl);
}

/* Charts Grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.chart-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.chart-header {
    margin-bottom: var(--spacing-lg);
}

.chart-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.chart-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

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

/* Tables Grid */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-lg);
}

.table-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    overflow: hidden;
}

.table-header {
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--border);
}

.table-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.table-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.data-list {
    max-height: 400px;
    overflow-y: auto;
}

.data-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-light);
    transition: all 0.2s ease;
}

.data-item:hover {
    background: var(--surface-hover);
}

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

/* Hidden Sheet1 #21 — team-member rows (and each count inside them) open that
   member's detail. The rows are role="button" tabindex="0", so they need a
   visible focus ring as well as the pointer. */
.data-item.clickable {
    cursor: pointer;
}

.data-item.clickable:focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

.item-meta .clickable {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 4px;
    transition: all 0.15s ease;
}

.item-meta .clickable:hover {
    color: var(--brand-teal);
    background: var(--brand-teal-tint);
}

.item-info h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.item-info p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}

.item-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.item-value {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.item-value .value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.rating i {
    color: var(--warning);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.badge.inactive {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
}

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

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

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

/* Vendor Grid */
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    max-width: 100%;
}

/* Limit to max 5 columns */
@media (min-width: 1800px) {
    .vendor-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.vendor-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    min-height: 450px;
    display: flex;
    flex-direction: column;
}

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

/* Smaller buttons for cards */
.vendor-card .btn-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
}

.vendor-header {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
}

.vendor-logo {
    width: 50px;
    height: 50px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-orange));
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.vendor-info h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.vendor-info p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.vendor-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing);
    margin-top: var(--spacing-lg);
}

.vendor-stat {
    text-align: center;
}

.vendor-stat .number {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

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

/* Stock Timeline */
.stock-timeline {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: var(--spacing-lg);
}

/* Subcategory Tag UI */
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: var(--surface-hover);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    min-height: 50px;
    margin-bottom: 8px;
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--primary-blue);
    color: var(--text-white);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    animation: tagAppear 0.2s ease-out;
}

@keyframes tagAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

.tag-badge button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s;
}

.tag-badge button:hover {
    color: var(--text-white);
}

.tag-input-wrapper {
    position: relative;
    display: flex;
    gap: 8px;
}

.tag-input-wrapper input {
    flex: 1;
}

.tag-input-wrapper .btn-add {
    padding: 0 16px;
    background: var(--surface-hover);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-input-wrapper .btn-add:hover {
    background: var(--primary-blue);
    color: var(--text-white);
    border-color: var(--primary-blue);
}

.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing);
    border-bottom: 1px solid var(--border-light);
}

.timeline-header h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.timeline-header p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.timeline-slots {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.time-slot {
    padding: var(--spacing-sm) var(--spacing);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.time-slot.available {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.time-slot.booked {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.time-slot.full {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.availability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing);
}

.availability-day {
    background: var(--surface-hover);
    border-radius: var(--radius);
    padding: var(--spacing);
}

.availability-day label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
}

.time-slots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    padding: var(--spacing);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    flex-shrink: 0;
    margin: auto;
    animation: modalSlideIn 0.3s ease-out;
}

.modal-content.large-modal {
    max-width: 800px;
}

/* Keep Google Maps tiles and controls from inheriting app image sizing rules */
.gm-style img {
    max-width: none !important;
}

.gm-style button {
    min-width: 0;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

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

.modal-header h2 {
    display: flex;
    align-items: center;
    gap: var(--spacing);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.modal-form {
    padding: var(--spacing-xl);
}

/* `.modal-body` is the non-form twin of `.modal-form`. Modals built in
   script.js that are not a single <form> — Move booking dates, Adjust points,
   Add customer, the customer actions, Set commission globally, Reschedule
   history — wrap their content in it, but it never had a rule in this file at
   all. So those dialogs rendered flush against the modal edge while every
   `.modal-form` one looked right: the "spacing a bit bad" report. Same padding
   as `.modal-form`, so the two are interchangeable as far as markup cares. */
.modal-body {
    padding: var(--spacing-xl);
}

/* `.form-group`'s own `gap` binds a label to its input and deliberately says
   nothing about the distance to the NEXT group, so consecutive groups touch.
   Modal markup has been papering over that with inline `margin-top: 12px` on
   each group after the first — which every new modal had to remember, and the
   ones that forgot (Set commission globally) got no separation at all. Owning
   the rhythm here makes those inline margins redundant rather than contested:
   inline is more specific so it keeps winning until it is removed, and nothing
   shifts when it is.
   Any preceding sibling counts, not just another `.form-group`: on Move
   booking dates the first group follows the grid holding the check-in /
   check-out pair, and on the rest it follows the summary paragraph, so
   `.form-group + .form-group` alone would still leave those seams to an inline
   margin. Only the top margin is ever set, so where the element above already
   carries a bottom margin the two collapse to the larger and an author's
   deliberately tight pairing is not blown apart.
   Direct children only — groups nested in a grid or flex row inside the body
   (that same check-in / check-out pair) are already spaced by their
   container's `gap` and must not be knocked out of line with it. */
.modal-body > * + .form-group {
    margin-top: var(--spacing);
}

/* The same rhythm for `.modal-form`, which had the identical defect.
   `.modal-form` sets padding and nothing else, so Add User / Add Vendor /
   Add Destination stacked their `.form-row` and `.form-group` children with
   ZERO gap — every field sat flush against the one above it. Only
   `#variantForm` escaped, and only because its markup carries an inline
   `display:grid; gap:20px` that this rule leaves alone.

   A separate selector rather than one grouped with the rule above: the two
   containers never co-occur in the markup, and someone retuning the spacing of
   one should not silently retune the other. Child combinator for the same
   reason as above. */
.modal-form > * + .form-group,
.modal-form > * + .form-row {
    margin-top: var(--spacing);
}

/* Blocked dates is the one dialog that never got a body wrapper: its header,
   its block form and its list are direct children of `.modal-content`, which
   carries no padding of its own, so that content runs into the modal edge.
   Pad the shell directly until the markup grows a `.modal-body` — at which
   point the rule above takes over and the `:has()` guard switches this off,
   so the two can never both apply. */
#blockedDatesModal .modal-content:not(:has(.modal-body)) {
    padding: var(--spacing-xl);
}

.form-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--spacing-lg);
    /* The product form's tab strip needs 571px for its five tabs. In a modal on
       a 375px screen it had ~295px and `overflow-x: visible`, so Policies,
       Availability and Media simply hung outside the strip. They were not quite
       unreachable — `.modal-content` scrolls horizontally — but reaching them
       meant dragging the WHOLE form sideways, fields and all, and then dragging
       it back to type into anything.

       Scrolling the strip on its own keeps the form still. `flex-shrink: 0` on
       the tabs stops flexbox from "solving" the overflow by squeezing five tabs
       into illegible slivers instead, which is what it does by default. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.form-tabs .tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.tab-btn {
    background: none;
    border: none;
    padding: var(--spacing) var(--spacing-lg);
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

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

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-content {
    display: none;
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.pricing-options {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
}

.pricing-options h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing);
}

.pricing-option {
    display: grid;
    grid-template-columns: 1fr 1fr 100px 40px;
    gap: var(--spacing);
    align-items: center;
    margin-bottom: var(--spacing);
}

.btn-remove-option {
    background: var(--error);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-remove-option:hover {
    background: #dc2626;
}

.icon-selector {
    position: relative;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing);
    padding: var(--spacing);
    background: var(--surface-hover);
    border-radius: var(--radius);
}

.icon-option {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--spacing);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-option:hover {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: var(--text-white);
}

.icon-option.selected {
    border-color: var(--primary-blue);
    background: var(--primary-blue);
    color: var(--text-white);
}

.upload-preview {
    margin-top: var(--spacing);
    padding: var(--spacing);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
    color: var(--text-secondary);
}

.upload-preview img {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--radius);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-light);
    /* ⚠ WRAP IS LOAD-BEARING, NOT COSMETIC. This row is `justify-content:
       flex-end`, so when the buttons are wider than the row the overflow goes
       off the LEFT edge — and overflow to the left is not reachable by
       scrolling in an LTR document, at any overflow setting on any ancestor.

       Measured in the product form at 375px: Cancel / Save Destination / Save
       Draft need 432px of a 295px row, and Cancel landed at left:-102, right:-9
       — entirely outside the viewport, unclickable, with nothing to scroll to
       bring it back. The only way out of that dialog on a phone was the ✕ in
       the header.

       Wrapping puts the row onto as many lines as it needs instead. At desktop
       widths nothing wraps and the rule is inert. */
    flex-wrap: wrap;
}

/* In the `.modal-form` modals the actions row sits INSIDE the padded form, so
   the rule above is complete: the form supplies the sides and the bottom.
   Alongside a `.modal-body` it is a sibling instead, a bare child of
   `.modal-content` — so it inherits no side padding from anything, and now
   that the body above it is inset its buttons would hang off the edge. The
   `margin-top: 2xl` also stacked on top of the body's new bottom padding for a
   5rem gulf above the divider. Give it the same inset as `.modal-header` and
   let the body's own padding be the whole gap, so the dialog reads
   header / body / footer on one margin the whole way down. Scoped to the
   sibling case so it can never double up on the `.modal-form` modals. */
.modal-body + .modal-actions {
    margin-top: 0;
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}

/* Notification Toast — always on top of every modal/popup */
.notification-toast {
    position: fixed;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    padding: var(--spacing-lg);
    z-index: 999999;   /* above all modals */
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s ease;
    min-width: 300px;
    /* Ensure its own stacking context so nothing inside any parent clips it */
    isolation: isolate;
}

.notification-toast.show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: var(--spacing-xs);
    margin-left: auto;
    transition: color 0.2s;
}

.toast-close:hover {
    color: var(--error);
}

.toast-content {
    display: flex;
    align-items: center;
    gap: var(--spacing);
}

.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: var(--font-size-sm);
}

.toast-icon.success {
    background: var(--success);
}

.toast-icon.error {
    background: var(--error);
}

.toast-icon.info {
    background: var(--info);
}

/* Searchable Select Dropdown */
.vendor-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xs) 0;
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.vendor-option {
    padding: 10px 16px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.vendor-option:hover {
    background: var(--surface-hover);
    color: var(--primary-blue);
    padding-left: 20px;
}

.vendor-option i {
    color: var(--text-muted);
    font-size: 14px;
}

.searchable-select input::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

/* Utility Classes */
.flex {
    display: flex;
}

.gap-2 {
    gap: var(--spacing-sm);
}

.mb-3 {
    margin-bottom: var(--spacing);
}

.mt-2 {
    margin-top: var(--spacing-sm);
}

.mt-3 {
    margin-top: var(--spacing);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        left: -280px;
        height: 100vh;
        z-index: 200;
    }

    .sidebar.open {
        left: 0;
    }

    .main-content {
        margin-left: 0;
    }

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

    .metrics-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

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

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

    .vendor-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .content-area {
        padding: var(--spacing);
    }

    .dashboard-header {
        padding: var(--spacing);
    }

    /* ── The shell header, made to fit a phone ──────────────────────────────
       `.dashboard-header` is `justify-content: space-between` with two flex
       children that both refuse to shrink: `.header-left` (hamburger + page
       title + subtitle) and `.header-right` (sync, notifications, avatar, name,
       email, logout). At 375px they want more room than there is, and because
       the header sits OUTSIDE `.content-area`'s scroller the excess became
       document-level horizontal overflow — ~20px of it, on EVERY page of the
       CMS, with the logout button hanging 12px off the right edge where it
       could not be fully tapped.

       Three changes, smallest first:

         • `min-width: 0` on the flex children. A flex item's default
           `min-width: auto` is what stops it shrinking below its content in the
           first place; without this, nothing below has any effect.
         • The title and subtitle truncate instead of pushing. A long page name
           ("Where Everyone's Going", "Description Approvals") must cost the
           header its ellipsis, not its logout button.
         • The email is hidden, the name kept. The email is the longer of the
           two by far and the name already answers "who am I signed in as";
           both are still shown in full on My Profile.

       `.header-right` keeps `flex-shrink: 0` so the controls themselves are
       never squeezed — the title gives up the space, which is the right way
       round for a row whose other half is buttons.
       ─────────────────────────────────────────────────────────────────────── */
    .header-left {
        min-width: 0;
        flex: 1 1 auto;
    }

    .header-title {
        min-width: 0;
    }

    .header-title h1,
    .header-title p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-right {
        flex-shrink: 0;
    }

    .user-profile {
        min-width: 0;
    }

    .user-email {
        display: none;
    }

    .action-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-group {
        width: 100%;
        justify-content: flex-start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .demo-info {
        grid-template-columns: 1fr;
    }

    .data-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing);
    }

    .item-value {
        align-items: flex-start;
        width: 100%;
    }

    .vendor-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }

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

    .pricing-option {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

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

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

    /* At phone widths the header controls (hamburger, sync, notifications,
       avatar, logout) need roughly 250 of the 343 available pixels, which left
       the page title about 30px — enough for "W…" on Where Everyone's Going.
       Dropping the name as well hands that back: the avatar still carries the
       initials, the name and email are both on My Profile, and the page title
       is the one thing in this row that tells you where you are. */
    .user-name {
        display: none;
    }

    .modal {
        padding: var(--spacing-sm);
    }

    .modal-content {
        max-height: 95vh;
    }

    .login-wrapper {
        max-width: 100%;
    }

    .demo-search-bar {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .search-item {
        justify-content: center;
        padding: var(--spacing-sm);
        background: rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-sm);
    }
}

/* Print Styles */
@media print {

    .sidebar,
    .dashboard-header,
    .action-bar .btn-group,
    .modal {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
    }

    .content-area {
        padding: 0;
    }

    .metric-card,
    .chart-card,
    .table-card,
    .vendor-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid var(--border);
    }
}

/* Dark Mode Support (Future Enhancement) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here */
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border: #000000;
        --text-secondary: #000000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ========================================
   BOOKINGS FILTERS & PAGINATION
   ======================================== */
.filter-section {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.filter-btn:hover {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
    background: var(--brand-teal-tint);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--brand-teal-ring);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
    border-color: var(--brand-teal);
    color: white;
    box-shadow: 0 4px 12px var(--brand-teal-ring);
}

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

.filter-btn i {
    font-size: 16px;
}

/* Pagination buttons */
.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-outline {
    background: white;
    border: 2px solid #e0e0e0;
    color: #333;
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
    background: var(--brand-teal-tint);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
    border: 2px solid var(--brand-teal);
    color: white;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* ========================================
   CARD ENHANCEMENTS
   ======================================== */

/* Ensure buttons have proper spacing from card edges */
.vendor-card .mt-3.flex {
    margin-top: 20px !important;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

/* Ensure cards grow to fill space properly */
.vendor-card>*:last-child {
    margin-top: auto;
}

/* Additional spacing for button groups */
.vendor-card .gap-2 {
    gap: 8px !important;
}

/* Calendar Day Styles */
.calendar-day {
    transition: all 0.2s ease;
}

.calendar-day:not(.past):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.calendar-day.past {
    pointer-events: none;
}

/* Form Control Styles */
.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px var(--brand-teal-ring);
}

/* Better modal stacking */
.modal {
    z-index: 10000;
}


/* FORCE 2 BUTTONS PER ROW - ALWAYS */
.vendor-card .mt-3.flex.gap-2,
.vendor-card .flex.gap-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

.vendor-card .flex.gap-2 button {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Assigned To section visibility */
.vendor-card .mb-3 {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* Ensure vendor cards don't break layout */
.vendor-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* On very small screens */
@media (max-width: 480px) {
    .vendor-card .flex.gap-2 button {
        font-size: 11px !important;
        padding: 8px 6px !important;
    }

    .vendor-card .flex.gap-2 button i {
        margin-right: 4px !important;
    }
}

/* VENDOR GRID IMPROVEMENTS */
.vendor-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Vendor card improvements */
.vendor-card {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* Vendor stats grid */
.vendor-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 15px 0 !important;
}

/* Override any conflicting flex styles */
.mt-3 {
    margin-top: 15px !important;
}

/* Ensure all content is visible */
.vendor-card>* {
    display: block !important;
    width: 100% !important;
}

@media (max-width: 1200px) {
    .vendor-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .vendor-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Hard-coded two-column grids, collapsed for narrow screens ───────────
       About a dozen views build their layout with an inline
       `style="display: grid; grid-template-columns: 1fr 1fr"` — My Profile, the
       product and variant forms, the promotion editor, the analytics filter row
       and the booking detail panels among them. `1fr` carries an automatic
       minimum of `min-content`, so those tracks refuse to shrink past their
       contents and the grid overflows its container instead of reflowing.

       Measured on My Profile at 375px: a 343px container resolved to
       `215.4px 185.7px` — 401px of tracks — and the right-hand card (a form
       with real inputs in it) ran from x=261 to x=447, well past the right edge
       and clipped by the scroll container above it. Every hard-coded grid does
       the same thing to a greater or lesser degree.

       ⚠ `!important` IS REQUIRED and is not laziness: the widths are inline
       `style` attributes written by script.js, which no plain stylesheet rule
       can outrank. This is the same tactic — and the same media query — the
       `.vendor-grid` rule directly above already uses for the same reason.

       ⚠ MATCHED ON THE LITERAL `1fr 1fr` SUBSTRING, deliberately narrow. Grids
       written as `repeat(auto-fit, minmax(...))` already collapse correctly on
       their own and must not be caught by this; only the fixed fr-only tracks
       are. The `[style*=...]` pairs cover both spacings script.js emits (with
       and without the space after the colon).
       ──────────────────────────────────────────────────────────────────────── */
    #contentArea [style*="grid-template-columns: 1fr 1fr"],
    #contentArea [style*="grid-template-columns:1fr 1fr"],
    .modal [style*="grid-template-columns: 1fr 1fr"],
    .modal [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Page loading placeholder ───────────────────────────────────────────────
   Painted synchronously by `showPage()` into #contentArea the moment a
   navigation starts, then replaced by the page's own markup when its Firestore
   reads come back.

   WHY IT EXISTS: `showPage()` sets the new page's title synchronously but hands
   the body off to an async loader, and NOTHING cleared the body in between. On
   the slower pages — Products, Normal Users, Where Everyone's Going and
   Analytics all take several seconds against live Firestore — that left the
   PREVIOUS page's full content sitting under the NEW page's heading, with no
   sign that anything was happening. Clicking Products from Categories showed a
   "Products" heading above the category list for four seconds or more, which
   reads as the wrong page having loaded rather than as a page still loading.

   Reuses the `spin` keyframes the splash spinner already declares. The colours
   are its own because that spinner sits on the dark splash screen and this one
   sits on the light content ground.
   ───────────────────────────────────────────────────────────────────────── */
.page-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.page-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--border);
    border-top-color: var(--brand-teal);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* A spinner is decoration; anyone who has asked the OS to stop moving things
   still needs to see that the page is busy, so the ring stays and only the
   rotation goes. */
@media (prefers-reduced-motion: reduce) {
    .page-loading-spinner {
        animation: none;
    }
}