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

:root {
/* Safe Area Insets for iOS notch and home indicator */
--sat: env(safe-area-inset-top, 0px);
--sar: env(safe-area-inset-right, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);

/* Color System - Brand Palette (from ResIQ logo) */
--primary: #0891b2;           /* Teal - primary accent */
--primary-dark: #0e7490;      /* Darker teal */
--primary-light: #06b6d4;     /* Lighter teal */
--brand-navy: #1B3A5C;        /* Navy blue - depth, headings */
--brand-navy-light: #2A5080;  /* Lighter navy */
--brand-orange: #E8943A;      /* Orange - CTAs, highlights */
--brand-orange-light: #F0A85C;/* Light orange - hover */
--brand-coral: #FE5858;       /* Hostizzy coral/red */
--secondary: #475569;         /* Slate gray - neutral */
--success: #059669;           /* Muted emerald green */
--success-light: #10b981;
--danger: #dc2626;            /* Slightly muted red */
--danger-light: #ef4444;
--warning: #d97706;           /* Amber */
--warning-light: #f59e0b;
--background: #f8fafc;        /* Very light slate */
--background-alt: #f1f5f9;    /* Slightly darker slate */
--surface: #ffffff;
--surface-elevated: #ffffff;
--text-primary: #0f172a;      /* Almost black slate */
--text-secondary: #475569;    /* Medium slate */
--text-tertiary: #94a3b8;     /* Light slate */
--border: #e2e8f0;            /* Very light border */
--border-light: #f1f5f9;

/* Shadow System - Softer, more subtle */
--shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

/* Gradient System - Brand-aligned */
--gradient-primary: linear-gradient(135deg, #1B3A5C 0%, #0891b2 100%);
--gradient-brand: linear-gradient(135deg, #1B3A5C 0%, #0891b2 50%, #5BBAB5 100%);
--gradient-cta: linear-gradient(135deg, #E8943A 0%, #F0A85C 100%);
--gradient-success: linear-gradient(135deg, #059669 0%, #10b981 100%);
--gradient-warning: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
--gradient-danger: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
--gradient-ocean: linear-gradient(135deg, #1B3A5C 0%, #0891b2 100%);
--gradient-sunset: linear-gradient(135deg, #E8943A 0%, #FE5858 100%);
--gradient-purple: linear-gradient(135deg, var(--primary) 0%, #a855f7 100%);

/* Border Radius System */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Spacing Scale (4px base unit) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;

/* Typography Scale */
--font-size-xs: 10px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 15px;
--font-size-lg: 16px;
--font-size-xl: 18px;
--font-size-2xl: 20px;
--font-size-3xl: 24px;
--font-size-4xl: 28px;

/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

/* Line Heights */
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-normal: 1.5;

/* Status Palette - Professional, muted tones */
--success-pale: #d1fae5;
--success-text: #065f46;
--warning-pale: #fef3c7;
--warning-alt-pale: #fed7aa;
--warning-text: #92400e;
--danger-pale: #fee2e2;
--danger-text: #991b1b;
--primary-pale: #cffafe;      /* Teal pale */
--primary-text: #0e7490;      /* Teal dark */
--info-pale: #dbeafe;
--info-text: #1e40af;
--neutral-pale: #f1f5f9;
--neutral-text: #475569;

/* Component-specific shadows - Softer */
--shadow-input-focus: 0 0 0 3px rgba(8, 145, 178, 0.1);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
--shadow-fab: 0 6px 16px rgba(8, 145, 178, 0.25);
--shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Dark Mode Theme */
[data-theme="dark"] {
--primary: #22d3ee;           /* Bright teal for dark mode */
--primary-dark: #0891b2;
--primary-light: #67e8f9;
--secondary: #94a3b8;
--success: #34d399;
--success-light: #6ee7b7;
--danger: #f87171;
--danger-light: #fca5a5;
--warning: #fbbf24;
--warning-light: #fcd34d;
--background: #0f172a;
--background-alt: #1e293b;
--surface: #1e293b;
--surface-elevated: #334155;
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--border: #334155;
--border-light: #1e293b;
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
/* Dark mode status palette */
--success-pale: #064e3b;
--success-text: #6ee7b7;
--warning-pale: #451a03;
--warning-alt-pale: #431407;
--warning-text: #fcd34d;
--danger-pale: #450a0a;
--danger-text: #fca5a5;
--primary-pale: #164e63;      /* Dark teal */
--primary-text: #67e8f9;      /* Light teal */
--info-pale: #1e3a5f;
--info-text: #93c5fd;
--neutral-pale: #1e293b;
--neutral-text: #cbd5e1;
--shadow-input-focus: 0 0 0 3px rgba(34, 211, 238, 0.15);
--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
--shadow-fab: 0 6px 16px rgba(34, 211, 238, 0.3);
--shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Smooth theme transition */
body,
.card,
.navbar,
.sidebar,
input,
select,
textarea,
button {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: var(--background);
color: var(--text-primary);
line-height: 1.6;
}

/* Comprehensive Dark Mode Overrides */
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .kanban-card,
[data-theme="dark"] .property-card,
[data-theme="dark"] .payment-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}

[data-theme="dark"] .navbar,
[data-theme="dark"] .top-bar,
[data-theme="dark"] .filters,
[data-theme="dark"] .table-container table thead {
background: var(--surface) !important;
border-color: var(--border) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
background: var(--background-alt) !important;
color: var(--text-primary) !important;
border-color: var(--border) !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: var(--text-tertiary) !important;
}

[data-theme="dark"] button {
border-color: var(--border) !important;
}

[data-theme="dark"] .table-container,
[data-theme="dark"] table {
background: var(--surface) !important;
}

[data-theme="dark"] table tbody tr {
border-color: var(--border) !important;
}

[data-theme="dark"] table tbody tr:hover {
background: var(--background-alt) !important;
}

[data-theme="dark"] .modal {
background: rgba(15, 23, 42, 0.75) !important;
}

[data-theme="dark"] hr {
border-color: var(--border) !important;
}

/* Dark Mode - Home Screen Components */
[data-theme="dark"] .quick-action-card,
[data-theme="dark"] .category-card,
[data-theme="dark"] .today-stat-card,
[data-theme="dark"] .recent-activity-card {
background: var(--surface) !important;
border-color: var(--border) !important;
}

[data-theme="dark"] .category-card-title {
color: var(--text-primary) !important;
}

[data-theme="dark"] .category-card-stat {
color: var(--text-secondary) !important;
}

[data-theme="dark"] .category-card-arrow {
color: var(--text-tertiary) !important;
}

[data-theme="dark"] .category-card:hover .category-card-arrow {
color: var(--primary) !important;
}

[data-theme="dark"] .quick-action-icon {
background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
}

[data-theme="dark"] .category-card-icon {
background: linear-gradient(135deg, var(--background-alt) 0%, var(--surface-elevated) 100%) !important;
}

/* Dark Mode - App Launcher */
[data-theme="dark"] .app-icon-label {
color: var(--text-secondary);
}

[data-theme="dark"] .app-launcher-section-title {
color: var(--text-tertiary);
}

/* Dark Mode - Mobile Navigation */
[data-theme="dark"] .mobile-nav {
background: rgba(30, 41, 59, 0.98);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-top: 0.5px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05), 0 -3px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mobile-nav-item {
color: #8e8e93;
}

[data-theme="dark"] .mobile-nav-item.active {
color: #818cf8;
}

[data-theme="dark"] .mobile-nav-fab {
border-color: rgba(30, 41, 59, 0.98);
}

[data-theme="dark"] .sidebar {
background: #1e293b;
border-right-color: #334155;
}

[data-theme="dark"] .sidebar-item {
color: #94a3b8;
}

[data-theme="dark"] .sidebar-item:hover {
background: #0f172a;
color: #e2e8f0;
}

[data-theme="dark"] .sidebar-category-header:hover {
background: #0f172a;
}

[data-theme="dark"] .sidebar-footer {
border-top-color: #334155;
}

[data-theme="dark"] .mobile-action-btn {
color: #e2e8f0;
}

[data-theme="dark"] .mobile-action-btn:active {
background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mobile-notif-badge {
border-color: rgba(30, 41, 59, 0.98);
}

[data-theme="dark"] .mobile-header-title {
color: #e2e8f0;
}

[data-theme="dark"] .mobile-search-bar {
border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-search-wrapper {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-header {
background: rgba(30, 41, 59, 0.98);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

/* Loading Spinner */
.loading-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 0.8s linear infinite;
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(4px);
}

.loading-content {
background: var(--surface);
padding: 24px 32px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

.loading-content .spinner {
width: 40px;
height: 40px;
border: 4px solid var(--primary);
border-top-color: transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
}

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


/* Pull to Refresh Indicator */
.pull-to-refresh-indicator {
position: fixed;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: white;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
z-index: 99999;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 3px solid var(--primary);
}

.pull-to-refresh-indicator.active {
top: 90px;
}

.pull-to-refresh-indicator.loading {
animation: spin 1s linear infinite;
background: linear-gradient(135deg, var(--primary) 0%, var(--success) 100%);
}

.pull-to-refresh-indicator.loading .pull-to-refresh-arrow {
filter: brightness(0) invert(1);
}

@keyframes spin {
from { transform: translateX(-50%) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg); }
}

.pull-to-refresh-arrow {
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}

.pull-to-refresh-arrow.flip {
transform: rotate(180deg);
}

/* Splash Screen Animations */
@keyframes fadeInUp {
from {
    opacity: 0;
    transform: translateY(30px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes scaleIn {
from {
    opacity: 0;
    transform: scale(0.8);
}
to {
    opacity: 1;
    transform: scale(1);
}
}

@keyframes pulseGlow {
0%, 100% {
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
50% {
    box-shadow: 0 20px 60px rgba(255,255,255,0.4);
}
}

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

/* Login Screen - Split Layout */
.login-container {
display: flex;
min-height: 100vh;
margin-top: -60px;
padding-top: 0;
}

.login-brand {
flex: 1;
background: linear-gradient(135deg, #1B3A5C 0%, #0e7490 40%, #0891b2 80%, #5BBAB5 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 40px;
position: relative;
overflow: hidden;
}

.login-brand::before {
content: '';
position: absolute;
top: -30%;
right: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
border-radius: 50%;
}

.login-brand::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
border-radius: 50%;
}

.login-brand-inner {
position: relative;
z-index: 1;
max-width: 440px;
color: white;
}

.login-brand-logo {
width: 80px;
height: 80px;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
margin-bottom: 24px;
}

.login-brand-title {
font-size: 44px;
font-weight: 900;
margin-bottom: 12px;
letter-spacing: -1px;
}

.login-brand-tagline {
font-size: 20px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
}

.login-brand-features {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 40px;
}

.login-brand-feature {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
font-size: 15px;
font-weight: 500;
color: white;
}

.login-brand-trust {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
}

.login-form-side {
flex: 0 0 480px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
background: var(--surface);
overflow-y: auto;
}

.login-card {
background: var(--surface);
padding: 40px;
border-radius: 16px;
width: 100%;
max-width: 400px;
animation: loginCardSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-form-side .login-card {
box-shadow: none;
padding: 0;
}

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

.login-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}

.login-remember {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
}

.login-remember input {
width: auto;
min-height: auto;
cursor: pointer;
}

.login-remember span {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
}

.login-forgot {
font-size: 14px;
color: var(--primary);
text-decoration: none;
font-weight: 500;
}

.login-btn {
width: 100%;
padding: 14px 24px;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--gradient-cta) !important;
box-shadow: 0 4px 14px rgba(232, 148, 58, 0.35);
}

.login-btn:hover {
box-shadow: 0 6px 20px rgba(232, 148, 58, 0.45);
}

.login-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 8px;
font-size: 18px;
opacity: 0.6;
transition: opacity 0.2s;
}

.login-password-toggle:hover {
opacity: 1;
}

.login-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
display: inline-block;
animation: spin 0.6s linear infinite;
}

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

.login-portal-links {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border);
}

.login-portal-link {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: var(--background-alt);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-secondary);
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.2s;
}

.login-portal-link:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(8, 145, 178, 0.05);
}

.login-secure-text {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 20px;
font-size: 12px;
color: var(--text-tertiary);
}

.login-footer {
margin-top: 32px;
text-align: center;
}

.login-footer-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 8px;
}

.login-footer-links a {
color: var(--text-tertiary);
text-decoration: none;
font-size: 12px;
font-weight: 500;
transition: color 0.2s;
}

.login-footer-links a:hover {
color: var(--primary);
}

.login-footer-links span {
color: var(--text-tertiary);
font-size: 12px;
}

.login-footer-copy {
font-size: 11px;
color: var(--text-tertiary);
}

/* Login Responsive Show/Hide */
/* Desktop: hide mobile-only, let desktop-only keep natural display */
.login-mobile-only,
.login-mobile-only-inline {
    display: none !important;
}

.login-owner-portal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: var(--primary);
color: white;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: all 0.2s;
}

.login-owner-portal-btn:hover {
background: var(--primary-dark);
color: white;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

@media (max-width: 1024px) {
.login-desktop-only,
.login-desktop-only-inline { display: none !important; }
.login-mobile-only { display: block !important; }
.login-mobile-only-inline { display: inline !important; }

.login-brand {
    display: none;
}

.login-container {
    background: var(--gradient-primary);
    justify-content: center;
    padding: 20px;
}

.login-form-side {
    flex: none;
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    padding: 40px 32px;
}

.login-form-side .login-card {
    max-width: none;
}
}

@media (max-width: 640px) {
.login-container {
    padding: 16px;
    align-items: flex-start;
    padding-top: 40px;
}

.login-form-side {
    padding: 32px 24px;
    border-radius: 16px;
}
}

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

.logo h1 {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}

.logo p {
color: var(--text-secondary);
font-size: 14px;
}

/* Form Elements */
.form-group {
margin-bottom: var(--space-5);
}

label {
display: block;
margin-bottom: var(--space-2);
font-weight: var(--font-semibold);
font-size: var(--font-size-base);
color: var(--text-primary);
}

input, select, textarea {
width: 100%;
padding: 14px var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-family: inherit;
color: var(--text-primary);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
background: var(--surface);
min-height: 44px; /* Mobile-friendly touch target */
-webkit-appearance: none; /* Remove iOS styling */
-moz-appearance: none;
appearance: none;
}

@media (max-width: 640px) {
input, select, textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    padding: var(--space-4);
}
}

input:hover, select:hover, textarea:hover {
border-color: var(--text-tertiary);
}

input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--shadow-input-focus);
background: var(--surface);
}

/* =================================================================
   UTILITY CLASSES (Tailwind-inspired)
   ================================================================= */

/* Spacing Utilities (8px grid system) */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-top: 0; }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }

.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-6 { padding-bottom: var(--space-6); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* Gap Utilities (for flexbox/grid) */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Typography Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-white { color: white; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.lowercase { text-transform: lowercase; }

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1; }
.flex-none { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid Utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Display Utilities */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* Width/Height Utilities */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }

/* Border Utilities */
.rounded { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }

.border { border: 1px solid var(--border); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.border-l { border-left: 1px solid var(--border); }
.border-r { border-right: 1px solid var(--border); }

/* Background Utilities */
.bg-white { background-color: #ffffff; }
.bg-surface { background-color: var(--surface); }
.bg-background { background-color: var(--background); }
.bg-primary { background-color: var(--primary); }
.bg-success { background-color: var(--success); }
.bg-danger { background-color: var(--danger); }
.bg-warning { background-color: var(--warning); }

/* Shadow Utilities */
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Cursor Utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* Overflow Utilities */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Transition Utilities */
.transition { transition: var(--transition); }
.transition-none { transition: none; }

/* Buttons */
.btn {
padding: var(--space-3) var(--space-6);
border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-semibold);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
position: relative;
overflow: hidden;
min-height: 44px; /* Mobile-friendly touch target */
}

@media (max-width: 640px) {
.btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-sm);
    width: 100%; /* Full width on mobile for easier tapping */
}
}

.btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s;
}

.btn:hover::before {
width: 300px;
height: 300px;
}

.btn:active {
transform: scale(0.97);
}

.btn-primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-md);
}

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

.btn-secondary {
background: var(--secondary);
color: white;
box-shadow: var(--shadow);
}

.btn-secondary:hover {
filter: brightness(0.85);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}

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

.btn-danger:hover {
filter: brightness(0.88);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}

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

.btn-success:hover {
filter: brightness(0.88);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}

.btn-warning {
background: var(--warning);
color: white;
box-shadow: var(--shadow);
}

.btn-warning:hover {
filter: brightness(0.88);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}

#globalVoiceBtn {
transition: all 0.3s ease;
position: relative;
}

#globalVoiceBtn:hover {
transform: scale(1.05);
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

#globalVoiceBtn.listening {
animation: pulse 1.5s ease-in-out infinite;
}

.btn-sm {
padding: 8px 16px;
font-size: 13px;
}

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

/* Filter Chips */
.filter-chip {
padding: var(--space-2) var(--space-4);
border: 2px solid var(--border);
border-radius: 20px;
background: var(--surface);
color: var(--text-primary);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}

.filter-chip:hover {
border-color: var(--primary);
background: var(--primary-light);
color: white;
}

.filter-chip.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}

 /* Navigation - New Top Bar Only */
.navbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
box-shadow: var(--shadow);
height: 60px;
display: flex;
align-items: center;
}

.navbar-content {
max-width: 100%;
width: 100%;
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}

.navbar-brand {
font-size: 24px;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}

.navbar-brand:hover {
opacity: 0.8;
}

.navbar-brand-text {
font-size: 16px;
font-weight: 700;
}

/* Global Search */
.navbar-search {
flex: 1;
max-width: 500px;
margin: 0 24px;
position: relative;
}

.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}

.search-icon {
position: absolute;
left: 14px;
font-size: 16px;
opacity: 0.5;
pointer-events: none;
}

.search-input {
width: 100%;
padding: 10px 40px 10px 40px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
font-size: 14px;
background: var(--background);
transition: var(--transition);
}

.search-input:focus {
outline: none;
border-color: var(--primary);
background: white;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.search-clear {
position: absolute;
right: 12px;
background: none;
border: none;
font-size: 16px;
color: var(--text-tertiary);
cursor: pointer;
padding: 4px;
border-radius: 50%;
transition: var(--transition);
}

.search-clear:hover {
background: var(--background);
color: var(--text-primary);
}

.search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 8px;
background: white;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
max-height: 400px;
overflow-y: auto;
z-index: 1000;
}

.search-result-item {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
}

.search-result-item:hover {
background: var(--background);
}

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

.search-result-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}

.search-result-meta {
font-size: 12px;
color: var(--text-secondary);
}

.navbar-menu {
display: flex;
gap: 16px;
align-items: center;
margin-left: auto;
}

.nav-link {
padding: 8px 16px;
color: var(--text-secondary);
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.2s;
cursor: pointer;
font-size: 14px;
}

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

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

/* Hide nav-primary & nav-secondary for simplicity */
.nav-primary,
.nav-secondary {
display: none !important;
}

/* More Dropdown Container */
.more-dropdown-container {
position: relative;
}

.more-dropdown-btn {
background: var(--background-alt);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
color: var(--text-primary);
transition: all 0.2s ease;
}

.more-dropdown-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}

.more-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
min-width: 200px;
z-index: 1000;
overflow: hidden;
}

.more-dropdown-menu.active {
display: block;
animation: dropdownSlideIn 0.2s ease;
}

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

.more-dropdown-item {
display: block;
padding: 12px 16px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 1px solid var(--background-alt);
cursor: pointer;
}

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

.more-dropdown-item:hover {
background: var(--background-alt);
color: var(--primary);
padding-left: 20px;
}

/* User Menu Container */
.user-menu-container {
position: relative;
}

.user-menu-btn {
display: flex;
align-items: center;
gap: 8px;
background: var(--background-alt);
border: 1px solid var(--border);
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
color: var(--text-primary);
}

.user-menu-btn:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}

.user-icon {
font-size: 18px;
}

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

.user-menu-arrow {
font-size: 10px;
color: var(--text-secondary);
transition: transform 0.2s ease;
}

.user-menu-btn.active .user-menu-arrow {
transform: rotate(180deg);
}

/* Theme Toggle Button */
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
background: var(--background-alt);
border: 1px solid var(--border);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
font-size: 20px;
}

.theme-toggle-btn:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
transform: scale(1.05);
}

.theme-toggle-btn:active {
transform: scale(0.95);
}

/* Contextual Help Tooltip System */
.help-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: var(--primary);
color: white;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
cursor: help;
margin-left: 6px;
position: relative;
transition: all 0.2s ease;
}

.help-icon:hover {
background: var(--primary-dark);
transform: scale(1.1);
}

.help-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--surface-elevated);
color: var(--text-primary);
padding: 12px 16px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
font-size: 13px;
line-height: 1.5;
max-width: 280px;
min-width: 200px;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
border: 1px solid var(--border);
}

.help-icon:hover .help-tooltip {
opacity: 1;
pointer-events: auto;
}

.help-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--surface-elevated);
}

.help-tooltip-title {
font-weight: 600;
margin-bottom: 4px;
color: var(--primary);
}

.help-tooltip-text {
color: var(--text-secondary);
font-size: 12px;
}

/* Notification Center */
.notification-bell-btn {
display: flex;
align-items: center;
justify-content: center;
background: var(--background-alt);
border: 1px solid var(--border);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
font-size: 20px;
position: relative;
}

.notification-bell-btn:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
transform: scale(1.05);
}

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

.notification-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-xl);
width: 380px;
max-height: 500px;
z-index: 10000;
overflow: hidden;
}

.notification-dropdown.active {
display: block;
animation: fadeIn 0.2s ease;
}

.notification-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--background-alt);
}

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

.notification-item {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.2s ease;
position: relative;
}

.notification-item:hover {
background: var(--background-alt);
}

.notification-item.unread {
background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0) 100%);
}

.notification-item.unread::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--primary);
}

.notification-icon {
font-size: 24px;
margin-right: 12px;
}

.notification-content {
flex: 1;
}

.notification-title {
font-weight: 600;
margin-bottom: 4px;
color: var(--text-primary);
font-size: 14px;
}

.notification-message {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
}

.notification-time {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 6px;
}

.notification-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}

.notification-action-btn {
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
background: var(--background);
}

.notification-action-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}

.user-menu-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
min-width: 280px;
z-index: 1000;
overflow: hidden;
}

.user-menu-dropdown.active {
display: block;
animation: dropdownSlideIn 0.2s ease;
}

.user-menu-header {
padding: 16px;
background: var(--background-alt);
border-bottom: 1px solid var(--border);
}

.user-menu-email {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}

.user-menu-status {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}

.online-indicator {
width: 8px;
height: 8px;
background: var(--success);
border-radius: 50%;
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.user-menu-divider {
height: 1px;
background: var(--border);
}

.user-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
color: var(--text-primary);
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}

.user-menu-item:hover {
background: var(--background-alt);
padding-left: 20px;
}

.user-menu-item:hover .user-menu-icon {
transform: scale(1.1);
}

.user-menu-icon {
font-size: 18px;
transition: transform 0.2s ease;
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
/* Hide secondary nav items on tablet */
.nav-secondary {
    display: none !important;
}

/* Show More dropdown on tablet */
.more-dropdown-container {
    display: block !important;
}

/* Simplify sidebar - hide category headers, show flat menu */
.sidebar-category-header {
    display: none !important;
}

.sidebar-category-items {
    display: block !important;
    padding: 0 !important;
}

.sidebar-category {
    margin: 0 !important;
}

/* Add subtle separators between groups */
.sidebar-category + .sidebar-category .sidebar-category-items::before {
    content: '';
    display: block;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Hide separator on tablet */
.nav-separator {
    display: none;
}

/* Adjust nav link sizing */
.nav-link {
    font-size: 13px;
    padding: 8px 12px;
}

/* Hide email text, show only icon on tablet */
.user-email {
    display: none;
}

.user-menu-btn {
    padding: 8px 12px;
}

/* Adjust dropdown position */
.user-menu-dropdown {
    min-width: 260px;
}
}

/* Desktop - show all nav items, hide More dropdown */
@media (min-width: 1025px) {
.more-dropdown-container {
    display: none !important;
}
}

/* Mobile - hide desktop nav entirely */
@media (max-width: 768px) {
.navbar-menu {
    display: none;
}
}

/* Container - Adjusted for new navigation */
.container {
max-width: 100%;
margin: 0;
padding: 24px;
padding-bottom: 24px;
margin-left: 0;
transition: margin-left 0.3s ease;
}

@media (min-width: 1025px) {
.container {
    margin-left: 240px;
    padding-bottom: 24px;
}
}

@media (min-width: 769px) and (max-width: 1024px) {
.container {
    margin-left: 80px;
    padding-bottom: 24px;
}
}

@media (max-width: 768px) {
.container {
    padding: 16px;
    padding-bottom: 140px;
    margin-left: 0;
}
}

/* Cards - World-Class Design */
.card {
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
border: 1px solid var(--border);
margin-bottom: var(--space-6);
overflow: hidden;
transition: var(--transition);
}

.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
border-color: var(--primary-pale);
}

.communication-message:hover {
background: var(--background);
cursor: pointer;
}

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

/* =================================================================
   EMPTY STATES
   ================================================================= */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-secondary);
}

.empty-state i[data-lucide] {
width: 64px;
height: 64px;
margin: 0 auto 20px;
opacity: 0.3;
stroke-width: 1.5;
}

.empty-state h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0 0 8px 0;
}

.empty-state p {
font-size: var(--font-size-base);
color: var(--text-secondary);
margin: 0 0 24px 0;
max-width: 400px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}

.empty-state .btn {
margin-top: 16px;
}

/* =================================================================
   LOADING SKELETONS
   ================================================================= */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: var(--radius-md);
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

.skeleton-text {
height: 16px;
margin-bottom: 8px;
border-radius: 4px;
}

.skeleton-text.w-full { width: 100%; }
.skeleton-text.w-3-4 { width: 75%; }
.skeleton-text.w-1-2 { width: 50%; }
.skeleton-text.w-1-4 { width: 25%; }

.skeleton-card {
height: 120px;
margin-bottom: 16px;
}

.skeleton-row {
height: 48px;
margin-bottom: 8px;
}

/* Dark mode skeletons */
[data-theme="dark"] .skeleton {
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
background-size: 200% 100%;
}

.card-title {
font-size: var(--font-size-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
letter-spacing: -0.01em;
}

/* Stats Grid - Mobile Optimized */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 24px;
}

@media (max-width: 640px) {
.stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
}

.stat-card {
background: var(--surface);
padding: 20px 24px;
border-radius: var(--radius-md);
box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
position: relative;
overflow: hidden;
}

.stat-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border-left-color: var(--primary-dark);
}

.stat-label {
font-size: 11px;
color: var(--text-secondary);
margin-bottom: 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.stat-value {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.1;
}

/* ============================================
   DASHBOARD HEADER & QUICK ACTIONS
   ============================================ */

.dash-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
}

.dash-header-left {
flex: 1;
}

.dash-greeting {
margin: 0 0 4px 0;
font-size: 24px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -0.02em;
}

.dash-date {
margin: 0;
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
}


@media (max-width: 640px) {
.dash-greeting {
    font-size: 20px;
}
}

/* ============================================
   PROPERTY ROW CARDS (Horizontal List Layout)
   Like Guesty / Airbnb Hosting Dashboard
   ============================================ */

/* Override grid to become a vertical list */
#propertiesGrid {
display: flex !important;
flex-direction: column;
gap: 8px;
}

/* Row card container */
.property-card {
background: var(--surface);
border-radius: var(--radius-md);
border: 1px solid var(--border);
box-shadow: var(--shadow);
display: flex;
align-items: stretch;
min-height: 76px;
overflow: hidden;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.property-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary);
}

/* Left: Property Icon / Thumbnail */
.prop-icon {
width: 76px;
min-width: 76px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
background: var(--gradient-primary);
flex-shrink: 0;
}

.prop-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Center: Property Info */
.prop-info {
flex: 1;
min-width: 0;
padding: var(--space-2) var(--space-4);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
}

.prop-name {
font-size: var(--font-size-base);
font-weight: var(--font-bold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: var(--leading-tight);
}

.prop-meta {
display: flex;
align-items: center;
gap: var(--space-1);
overflow: hidden;
}

.prop-location {
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}

/* Inline performance badge */
.prop-badge {
font-size: var(--font-size-xs);
font-weight: var(--font-bold);
padding: 2px 7px;
border-radius: 10px;
white-space: nowrap;
flex-shrink: 0;
letter-spacing: 0.3px;
}

.prop-badge.top-performer {
background: #d1fae5;
color: #065f46;
}

.prop-badge.needs-attention {
background: #fee2e2;
color: #991b1b;
}

.prop-badge.average {
background: #fef3c7;
color: #92400e;
}

.prop-type-row {
font-size: 11px;
color: var(--text-tertiary);
}

/* Stats: 4 fixed-width columns that NEVER wrap */
.prop-stats {
display: flex;
flex-shrink: 0;
}

.prop-stat {
width: 88px;
min-width: 88px;
text-align: center;
padding: var(--space-2) var(--space-1);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}

.prop-stat-value {
font-size: var(--font-size-md);
font-weight: var(--font-bold);
color: var(--text-primary);
white-space: nowrap;
line-height: var(--leading-tight);
letter-spacing: -0.3px;
}

.prop-stat-label {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: var(--font-semibold);
white-space: nowrap;
}

/* Next Check-in column */
.prop-next {
width: 140px;
min-width: 140px;
padding: var(--space-2) var(--space-3);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
}

.prop-next-label {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-tertiary);
font-weight: var(--font-semibold);
}

.prop-next-date {
font-size: var(--font-size-sm);
font-weight: var(--font-bold);
color: var(--text-primary);
white-space: nowrap;
}

.prop-next-guest {
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.prop-next-empty {
font-size: 11px;
color: var(--text-tertiary);
font-style: italic;
}

/* iCal Sync column */
.prop-sync {
width: 84px;
min-width: 84px;
text-align: center;
padding: var(--space-2);
border-right: 1px solid var(--border-light);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
}

.prop-sync-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}

.prop-sync-dot.synced { background: var(--success); }
.prop-sync-dot.not-synced { background: var(--border); }

.prop-sync-status {
font-size: var(--font-size-xs);
font-weight: var(--font-semibold);
color: var(--text-secondary);
white-space: nowrap;
}

.prop-sync-time {
font-size: var(--font-size-xs);
color: var(--text-tertiary);
white-space: nowrap;
}

/* Action buttons column */
.prop-actions {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-2);
flex-shrink: 0;
}

.prop-action-btn {
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
color: var(--text-secondary);
font-weight: var(--font-semibold);
white-space: nowrap;
line-height: 1;
}

.prop-action-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}

.prop-action-btn.primary {
background: var(--gradient-primary);
color: white;
border-color: transparent;
}

.prop-action-btn.primary:hover {
filter: brightness(1.1);
}

/* btn-icon kept for other parts of the app */
.btn-icon {
background: rgba(8, 145, 178, 0.1);
border: none;
border-radius: 8px;
padding: 8px 12px;
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
color: var(--primary);
}

.btn-icon:hover {
background: var(--primary);
color: white;
transform: scale(1.05);
}

/* Mobile: compact stacked layout */
@media (max-width: 640px) {
.property-card {
    flex-wrap: wrap;
    min-height: auto;
}

.prop-icon {
    width: 60px;
    min-width: 60px;
    font-size: var(--font-size-xl);
    min-height: 60px;
}

.prop-info {
    flex: 1;
    border-right: none;
}

.prop-stats {
    width: 100%;
    border-top: 1px solid var(--border-light);
}

.prop-stat {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: var(--space-2) var(--space-1);
}

.prop-stat-value {
    font-size: var(--font-size-base);
}

.prop-next,
.prop-sync {
    display: none;
}

.prop-actions {
    width: 100%;
    border-top: 1px solid var(--border-light);
    padding: var(--space-2) var(--space-3);
    justify-content: stretch;
}

.prop-action-btn {
    flex: 1;
    text-align: center;
}
}

/* Desktop: wider stats columns */
@media (min-width: 1024px) {
.stats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--space-6);
}

.prop-stat {
    width: 100px;
    min-width: 100px;
}

.prop-stat-value {
    font-size: var(--font-size-lg);
}

.prop-next {
    width: 160px;
    min-width: 160px;
}

.prop-name {
    font-size: var(--font-size-md);
}
}

@media (min-width: 1440px) {
.stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-7);
}

.prop-stat {
    width: 110px;
    min-width: 110px;
}

.prop-stat-value {
    font-size: var(--font-size-xl);
}
}

/* Enhanced Dashboard Cards */
.metric-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 24px;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}

.metric-icon {
font-size: 28px;
margin-bottom: 12px;
opacity: 0.9;
line-height: 1;
}

.metric-icon svg, .metric-icon i[data-lucide] {
width: 32px;
height: 32px;
display: block;
margin: 0 auto 12px;
}

.metric-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 4px;
}

.metric-label {
font-size: 14px;
opacity: 0.9;
}

.metric-trend {
font-size: 12px;
margin-top: 8px;
opacity: 0.8;
}

/* Table */
.table-container {
overflow-x: auto;
border-radius: var(--radius-sm);
}

table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--font-size-base);
}

table thead {
background: var(--background);
}

table th {
padding: var(--space-4);
text-align: left;
font-weight: var(--font-semibold);
color: var(--text-primary);
border-bottom: 2px solid var(--border);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}

table td {
padding: var(--space-4);
border-bottom: 1px solid var(--border);
color: var(--text-primary);
}

table tbody tr {
transition: background-color 0.2s ease;
}

table tbody tr:hover {
background-color: var(--background);
}

table tbody tr:last-child td {
border-bottom: none;
}

/* ========================================
   RESPONSIVE TABLE - MOBILE
   ======================================== */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

/* ========================================
   ENHANCED RESERVATIONS TABLE
   ======================================== */
#reservationsTableBody tr {
transition: all 0.2s ease;
position: relative;
}

#reservationsTableBody tr:hover {
background: var(--background-alt);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transform: translateY(-1px);
}

#reservationsTableBody tr:hover .row-hover-actions {
opacity: 1;
pointer-events: all;
}

.row-hover-actions {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
display: flex;
gap: 4px;
align-items: center;
}

/* Always show actions on touch/mobile devices */
@media (hover: none), (max-width: 1024px) {
.row-hover-actions {
    opacity: 1;
    pointer-events: all;
}
}

/* Reservation Status Badge */
.res-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 11px;
border-radius: 14px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
cursor: pointer;
transition: all 0.2s ease;
}

.res-status-badge:hover {
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.res-status-badge.confirmed {
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1e40af;
}

.res-status-badge.pending {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
}

.res-status-badge.checked-in {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
}

.res-status-badge.checked-out {
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
color: #3730a3;
}

.res-status-badge.cancelled {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #991b1b;
}

/* Status change dropdown */
.status-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 100;
min-width: 160px;
padding: 6px 0;
display: none;
}

.status-dropdown.active {
display: block;
}

.status-dropdown-item {
padding: 8px 14px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: background 0.15s;
display: flex;
align-items: center;
gap: 8px;
}

.status-dropdown-item:hover {
background: var(--background-alt);
}

.quick-action-btn {
padding: 4px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 4px;
}

.quick-action-btn:hover {
background: var(--primary);
color: white;
border-color: var(--primary);
}

/* Status Badges */
.badge {
display: inline-block;
padding: var(--space-1) 14px;
border-radius: 20px;
font-size: var(--font-size-sm);
font-weight: var(--font-semibold);
text-transform: capitalize;
letter-spacing: 0.3px;
}

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

.badge-pending {
background: var(--warning-alt-pale);
color: var(--warning-text);
}

.badge-checked-in {
background: var(--info-pale);
color: var(--info-text);
}

.badge-checked-out {
background: var(--neutral-pale);
color: var(--neutral-text);
}

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

/* Cancelled Reservation Row Styling */
.cancelled-reservation {
opacity: 0.5;
background: var(--background) !important;
color: var(--text-tertiary);
transition: opacity 0.3s ease;
}

.cancelled-reservation:hover {
opacity: 0.7;
}

.cancelled-reservation td {
color: var(--text-tertiary) !important;
}

.cancelled-reservation strong {
text-decoration: line-through;
font-weight: var(--font-medium);
}

/* Payment Status Badges - Enhanced */
.payment-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 12px;
border-radius: 16px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}

.payment-status.paid {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
box-shadow: 0 1px 3px rgba(5, 150, 105, 0.2);
}

.payment-status.pending {
background: linear-gradient(135deg, #fee2e2, #fecaca);
color: #991b1b;
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
}

.payment-status.partial {
background: linear-gradient(135deg, #fed7aa, #fdba74);
color: #9a3412;
box-shadow: 0 1px 3px rgba(234, 88, 12, 0.2);
}

.payment-status.overdue {
background: linear-gradient(135deg, #fecaca, #fca5a5);
color: #7f1d1d;
box-shadow: 0 1px 3px rgba(153, 27, 27, 0.3);
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.85; }
}

/* Payment Method Icons */
.payment-method-icon {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-secondary);
}

/* Payment Progress Bar */
.payment-progress {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
margin-top: 4px;
}

.payment-progress-fill {
height: 100%;
transition: width 0.3s ease;
}

.payment-progress-fill.full {
background: linear-gradient(90deg, var(--success), #10b981);
}

.payment-progress-fill.partial {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.payment-progress-fill.pending {
background: linear-gradient(90deg, #ef4444, #f87171);
width: 2% !important;
}

/* Balance Highlight */
.balance-amount {
font-weight: 700;
font-size: 14px;
}

.balance-amount.positive {
color: var(--danger);
}

.balance-amount.negative {
color: var(--success);
}

.balance-amount.zero {
color: var(--text-tertiary);
}

/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
overflow-y: auto;
padding: 20px;
}

.modal.active {
display: flex;
justify-content: center;
align-items: flex-start;
}

.modal.show {
display: flex;
justify-content: center;
align-items: flex-start;
}   

.modal-content {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 0;
max-width: 600px;
width: 95%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-modal);
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

.modal-content > div:not(.modal-header) {
padding: 24px;
}

.modal-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-bold);
color: var(--text-primary);
}

.close-btn {
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--text-secondary);
transition: color 0.2s;
}

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

/* ---- Booking Wizard Stepper ---- */
.wizard-steps {
display: flex;
align-items: center;
padding: 16px 24px;
background: var(--background);
border-bottom: 1px solid var(--border);
}
.wizard-step {
display: flex;
align-items: center;
flex: 1;
}
.wizard-step:last-child { flex: 0; }
.wizard-step-indicator {
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.wizard-step-number {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
border: 2px solid var(--border);
color: var(--text-secondary);
background: var(--surface);
flex-shrink: 0;
transition: all 0.25s;
}
.wizard-step-label {
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
transition: color 0.25s;
}
.wizard-connector {
flex: 1;
height: 2px;
background: var(--border);
margin: 0 8px;
transition: background 0.3s;
}
.wizard-step.ws-active .wizard-step-number {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.wizard-step.ws-active .wizard-step-label {
color: var(--primary);
font-weight: 600;
}
.wizard-step.ws-done .wizard-step-number {
background: var(--success);
border-color: var(--success);
color: #fff;
}
.wizard-step.ws-done .wizard-step-label { color: var(--text-secondary); }
.wizard-step.ws-done + .wizard-connector { background: var(--success); }
.wizard-panel { display: none; padding: 24px; }
.wizard-panel.wp-active { display: block; }
.wizard-nav {
display: flex;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid var(--border);
background: var(--background);
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.wizard-review-section {
margin-bottom: 16px;
padding: 14px 16px;
background: var(--background);
border-radius: var(--radius-lg);
}
.wizard-review-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--primary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.wizard-review-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.wizard-review-row:last-child { border-bottom: none; }
.wizard-review-label { color: var(--text-secondary); }
.wizard-review-value { color: var(--text-primary); font-weight: 600; text-align: right; max-width: 60%; }
@media (max-width: 480px) {
.wizard-step-label { display: none; }
.wizard-connector { margin: 0 4px; }
}
/* ---- End Wizard CSS ---- */

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

/* Filters */
.filters {
display: flex;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.filter-item {
flex: 1;
min-width: 200px;
}

/* Mobile Filters - Search bar + bottom sheet */
.filters-mobile {
display: none;
margin-bottom: 16px;
}

.filters-mobile-bar {
display: flex;
gap: 10px;
align-items: center;
}

.filters-mobile-search {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
background: var(--background);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 10px 14px;
transition: border-color 0.2s ease;
}

.filters-mobile-search:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.filters-mobile-search input {
flex: 1;
border: none;
background: none;
outline: none;
font-size: 15px;
color: var(--text-primary);
}

.filters-mobile-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: var(--background);
border: 1.5px solid var(--border);
border-radius: 12px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
transition: all 0.2s ease;
}

.filters-mobile-toggle:active {
transform: scale(0.96);
}

.filter-badge {
background: var(--primary);
color: white;
font-size: 11px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}

/* Filter Bottom Sheet */
.filter-sheet-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 2000;
opacity: 0;
transition: opacity 0.3s ease;
}

.filter-sheet-overlay.active {
display: block;
opacity: 1;
}

.filter-sheet {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
background: white;
border-radius: 20px 20px 0 0;
z-index: 2001;
max-height: 80vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
padding-bottom: env(safe-area-inset-bottom, 16px);
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

.filter-sheet.active {
display: block;
transform: translateY(0);
}

.filter-sheet-handle {
display: flex;
justify-content: center;
padding: 12px 0 4px;
cursor: pointer;
}

.filter-sheet-handle-bar {
width: 40px;
height: 4px;
background: var(--border);
border-radius: 2px;
}

.filter-sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 20px 16px;
}

.filter-sheet-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}

.filter-sheet-body {
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 20px;
}

.filter-sheet-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.filter-sheet-label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.filter-sheet-group select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--border);
border-radius: 10px;
font-size: 15px;
background: var(--background);
color: var(--text-primary);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}

.filter-sheet-footer {
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Dark mode support for filter sheet */
[data-theme="dark"] .filter-sheet {
background: #1e293b;
}

[data-theme="dark"] .filter-sheet-group select {
background: #0f172a;
border-color: #334155;
color: #e2e8f0;
}

[data-theme="dark"] .filters-mobile-search {
background: #0f172a;
border-color: #334155;
}

[data-theme="dark"] .filters-mobile-search input {
color: #e2e8f0;
}

[data-theme="dark"] .filters-mobile-toggle {
background: #0f172a;
border-color: #334155;
color: #94a3b8;
}

/* Utilities */
.hidden {
display: none;
}

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

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

/* Toggle Switch for Auto-Sync */
.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: #cbd5e1;
transition: .3s;
border-radius: 24px;
}

.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .3s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #10b981;
}

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

[data-theme="dark"] .slider {
background-color: #475569;
}

[data-theme="dark"] .slider:before {
background-color: #e2e8f0;
}

/* ========================================
   SIDEBAR NAVIGATION (DESKTOP & TABLET)
   ======================================== */

.app-container {
display: flex;
height: 100vh;
flex-direction: column;
}

.app-wrapper {
display: flex;
flex: 1;
overflow: hidden;
}

/* Desktop Sidebar */
.sidebar {
display: none;
width: 240px;
background: var(--brand-navy, #1B3A5C);
border-right: none;
overflow-y: auto;
overscroll-behavior: contain;
touch-action: pan-y;
position: fixed;
left: 0;
top: 60px;
height: calc(100vh - 60px);
z-index: 50;
flex-direction: column;
}

.sidebar.active {
display: flex;
}

.sidebar-header {
padding: 20px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
margin-bottom: 12px;
}

.sidebar-menu {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 8px;
flex: 1;
}

.sidebar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
font-weight: 500;
border: 2px solid transparent;
}

.sidebar-item:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}

.sidebar-item.active {
background: rgba(8, 145, 178, 0.3);
color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transform: translateX(2px);
border-left: 3px solid var(--brand-orange, #E8943A);
}

.sidebar-item.active .sidebar-item-icon {
transform: scale(1.1);
}

.sidebar-item-icon {
font-size: 18px;
flex-shrink: 0;
}

.sidebar-item-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* Sidebar Categories */
.sidebar-category {
margin: 8px 0;
}

.sidebar-category-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: var(--transition);
user-select: none;
}

.sidebar-category-header:hover {
background: var(--background-alt);
}

.sidebar-category-title {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
}

.sidebar-category-arrow {
font-size: 10px;
color: var(--text-tertiary);
transition: transform 0.3s ease;
}

.sidebar-category.collapsed .sidebar-category-arrow {
transform: rotate(-90deg);
}

.sidebar-category-items {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 0 0 8px;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}

.sidebar-category-items.collapsed {
max-height: 0;
opacity: 0;
}

.sidebar-category .sidebar-item {
padding: 10px 12px;
margin: 2px 0;
}

.sidebar-footer {
padding: 16px 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
gap: 4px;
}

.sidebar-item-badge {
background: var(--primary);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
flex-shrink: 0;
}

/* Sidebar Collapse Toggle */
.sidebar-collapse-btn {
background: none;
border: none;
padding: 12px 16px;
cursor: pointer;
color: var(--text-secondary);
font-size: 18px;
transition: all 0.2s ease;
}

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

/* Tablet Compact Sidebar (Icons Only) */
.sidebar.compact {
width: 80px;
}

.sidebar.compact .sidebar-item-label {
display: none;
}

.sidebar.compact .sidebar-item {
justify-content: center;
padding: 12px 8px;
}

.sidebar.compact .sidebar-title {
display: none;
}

.sidebar.compact .sidebar-item-icon {
font-size: 24px;
}

/* Main Content Area */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

.content-area {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}

/* Mobile Navigation */
.mobile-nav {
display: none;
}

 /* Mobile Top Bar (replaces navbar on mobile) */
.mobile-header {
display: none;
background: white;
padding: 0;
border-bottom: 1px solid var(--border);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
height: 60px;
}

.mobile-header-content {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 16px;
}

.mobile-menu-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
padding: 8px;
color: var(--text-primary);
transition: all 0.2s ease;
}

.mobile-menu-btn:active {
transform: scale(0.95);
}

.mobile-header-logo {
display: flex;
align-items: center;
justify-content: center;
}

.mobile-logo-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.2s ease;
}

.mobile-logo-btn:active {
transform: scale(0.93);
}

.mobile-logo-icon {
width: 40px;
height: 40px;
border-radius: 8px;
object-fit: contain;
}

.mobile-header-spacer {
flex: 1;
}

.mobile-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;
}

.mobile-overlay.active {
display: block;
}

/* Desktop: 2x2 grid */
@media (min-width: 1025px) {
/* Default 2x2 works great */
}

/* Tablet: 2x2 grid (works well) */
@media (min-width: 769px) and (max-width: 1024px) {
div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
}
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
}
}

/* Sync Indicator */
.sync-indicator {
position: fixed;
top: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
z-index: 1000;
box-shadow: var(--shadow-lg);
transition: all 0.3s;
}

.sync-indicator.online {
background: #d1fae5;
color: #065f46;
}

.sync-indicator.offline {
background: #fed7aa;
color: #92400e;
}

.sync-indicator.syncing {
background: #dbeafe;
color: #1e40af;
}

.sync-dot {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}

.sync-dot.online {
background: #10b981;
}

.sync-dot.offline {
background: #f59e0b;
}

.sync-dot.syncing {
background: #3b82f6;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}

.offline-banner {
position: fixed;
top: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 12px 16px;
text-align: center;
font-weight: 600;
z-index: 1001;
display: none;
}

.offline-banner.show {
display: block;
}

.pending-badge {
background: var(--danger);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
margin-left: 4px;
}

/* Bulk Actions Bar */
.bulk-actions-bar {
position: fixed;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 16px 24px;
border-radius: 12px;
box-shadow: var(--shadow-lg);
display: none;
z-index: 999;
align-items: center;
gap: 16px;
}

.bulk-actions-bar.show {
display: flex;
}

.bulk-count {
font-weight: 600;
color: var(--primary);
}

/* Notification Toast */
.toast {
position: fixed;
bottom: 100px;
right: 20px;
background: white;
padding: 16px 20px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
display: none;
align-items: center;
gap: 12px;
z-index: 1001;
max-width: 400px;
animation: slideIn 0.3s ease-out;
}

.toast.show {
display: flex;
}

@keyframes slideIn {
from {
    transform: translateX(100%);
    opacity: 0;
}
to {
    transform: translateX(0);
    opacity: 1;
}
}

.toast-icon {
font-size: 24px;
}

.toast-content {
flex: 1;
}

.toast-title {
font-weight: 600;
margin-bottom: 4px;
}

.toast-message {
font-size: 13px;
color: var(--text-secondary);
}

   /* Desktop Sidebar (1025px+) */
@media (min-width: 1025px) {
body {
    padding-top: 60px;
}

.app-wrapper {
    margin-top: 60px;
}

.sidebar {
    display: flex;
}

.navbar {
    position: fixed;
}

.container {
    margin-left: 240px;
    padding-top: 0;
}

.mobile-header {
    display: none !important;
}

.mobile-nav {
    display: none !important;
}

.mobile-sidebar {
    display: none !important;
}

.mobile-overlay {
    display: none !important;
}
}

/* Tablet Sidebar (769px - 1024px) — Compact sidebar (JS adds .compact class) */
@media (min-width: 769px) and (max-width: 1024px) {
body {
    padding-top: 60px;
}

.app-wrapper {
    margin-top: 60px;
}

.sidebar {
    display: flex;
    width: 220px;
}

.sidebar-item-label {
    display: block;
    font-size: 13px;
}

.sidebar-item {
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 10px;
}

.sidebar-item-icon {
    font-size: 20px;
}

.sidebar-item-icon i {
    width: 22px !important;
    height: 22px !important;
}

.sidebar-category-header {
    display: flex;
    padding: 8px 10px;
}

.sidebar-category-title {
    font-size: 12px;
}

.container {
    margin-left: 80px;
    padding-top: 0;
}

.navbar {
    position: fixed;
}

.mobile-header {
    display: none !important;
}

.mobile-nav {
    display: none !important;
}

.mobile-sidebar {
    display: none !important;
}

.mobile-overlay {
    display: none !important;
}
}

/* Mobile Bottom Navigation (<769px) */
@media (max-width: 768px) {
body {
    padding-top: 60px;
}

.navbar {
    display: none;
}

/* Sidebar completely hidden on mobile — navigation via bottom tabs + More sheet */
.sidebar {
    display: none !important;
}

.mobile-overlay {
    display: none !important;
}

.container {
    margin-left: 0;
}

.mobile-header {
    display: block;
}


/* Mobile-only overrides (scoped to mobile breakpoint) */
@media (max-width: 768px){
.mobile-header {
    display: block;
}

.container {
    padding-bottom: calc(140px + env(safe-area-inset-bottom)); /* Extra padding for bottom tabs */
}

/* ========================================
   VIEW HEADERS — Responsive page headers
   Stack title and buttons vertically on mobile,
   compact buttons with smaller sizing
   ======================================== */
.view-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
}

.view-header h2 {
    font-size: 18px !important;
    gap: 8px !important;
}

.view-header h2 i {
    width: 20px !important;
    height: 20px !important;
}

.view-header p {
    font-size: 12px !important;
}

/* Compact action buttons row */
.view-header > div:last-child {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap;
    width: 100%;
}

.view-header .btn,
.view-header .btn-primary,
.view-header .btn-secondary {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    white-space: nowrap;
}

.view-header .btn i {
    width: 12px !important;
    height: 12px !important;
}
}

/* Quick Filters */
.quick-filters-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.quick-filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 4px 0;
    min-width: min-content;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid var(--border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.filter-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    border-color: var(--primary);
}

.filter-chip.active {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.filter-chip.active:hover {
    transform: translateY(-2px) scale(1.02);
}

/* Add animation on click */
.filter-chip:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .quick-filters {
        padding-bottom: 8px;
    }
}
.stats-grid {
    grid-template-columns: 1fr;
}

.modal-content {
    padding: 20px;
}

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

.bulk-actions-bar {
    bottom: 70px;
    left: 16px;
    right: 16px;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
}

.sync-indicator {
    top: 60px;
    right: 8px;
    font-size: 11px;
    padding: 6px 12px;
}

.toast {
    bottom: 70px;
    right: 10px;
    left: 10px;
    max-width: none;
}
}

/* Property Settings Modal */
#propertySettingsModal .modal-content {
animation: slideDown 0.3s ease-out;
}

#icalUrlInput:focus {
outline: none;
border-color: #0891b2;
box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

details[open] summary {
margin-bottom: 12px;
}

details summary::-webkit-details-marker {
display: none;
}

details summary::before {
content: '▶';
display: inline-block;
margin-right: 8px;
transition: transform 0.3s;
}

details[open] summary::before {
transform: rotate(90deg);
}

/* Calendar Styles */
.calendar-container {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: var(--shadow);
}

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

.calendar-nav-btn {
background: var(--primary);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
}

.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 20px;
}

.calendar-day-header {
text-align: center;
font-weight: 600;
font-size: 12px;
padding: 8px 4px;
color: var(--text-secondary);
}

.calendar-day {
aspect-ratio: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
position: relative;
transition: all 0.2s;
}

.calendar-day:hover {
background: var(--background);
}

.calendar-day.has-booking {
background: #fee2e2;
border-color: var(--danger);
font-weight: 600;
}

.calendar-day.today {
border: 2px solid var(--primary);
}

.calendar-day.empty {
background: #fafafa;
cursor: default;
}

/* Status-Based Calendar Colors */
.calendar-day.status-confirmed {
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
border-left: 4px solid #10b981;
}

.calendar-day.status-checked-in {
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
border-left: 4px solid #3b82f6;
}

.calendar-day.status-cancelled {
background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
border-left: 4px solid #9ca3af;
text-decoration: line-through;
opacity: 0.6;
}

.calendar-day.status-blocked {
background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
border-left: 4px solid #ef4444;
}

/* Dark mode calendar adjustments */
[data-theme="dark"] .calendar-day.status-confirmed {
background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
}

[data-theme="dark"] .calendar-day.status-checked-in {
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

[data-theme="dark"] .calendar-day.status-cancelled {
background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

[data-theme="dark"] .calendar-day.status-blocked {
background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
}

.booking-dots {
display: flex;
gap: 2px;
margin-top: 2px;
}

.booking-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--danger);
}


/* Drag & Drop File Upload Styles */
.drop-zone {
border: 2px dashed var(--border);
border-radius: 12px;
padding: 48px 24px;
text-align: center;
background: var(--background-alt);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}

.drop-zone:hover {
border-color: var(--primary);
background: var(--primary-light);
}

.drop-zone.drag-over {
border-color: var(--primary);
background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(8, 145, 178, 0.05) 100%);
border-width: 3px;
transform: scale(1.02);
}

.drop-zone.drag-over::after {
content: '';
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, transparent 100%);
pointer-events: none;
}

.drop-zone-icon {
font-size: 48px;
margin-bottom: 12px;
transition: transform 0.3s ease;
}

.drop-zone.drag-over .drop-zone-icon {
transform: scale(1.2) rotate(5deg);
animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
0%, 100% { transform: scale(1.2) translateY(0) rotate(5deg); }
50% { transform: scale(1.2) translateY(-10px) rotate(5deg); }
}

.drop-zone-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}

.drop-zone-subtitle {
font-size: 13px;
color: var(--text-secondary);
}

.drop-zone.uploading {
pointer-events: none;
opacity: 0.7;
}

.upload-progress {
margin-top: 16px;
padding: 12px;
background: var(--primary-light);
border-radius: 8px;
border-left: 3px solid var(--primary);
}

.upload-progress-bar {
width: 100%;
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
margin-top: 8px;
}

.upload-progress-fill {
height: 100%;
background: var(--primary);
transition: width 0.3s ease;
border-radius: 3px;
}

/* Dark mode drag & drop */
[data-theme="dark"] .drop-zone {
border-color: var(--border);
}

[data-theme="dark"] .drop-zone:hover {
background: rgba(8, 145, 178, 0.1);
}

[data-theme="dark"] .drop-zone.drag-over {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.2) 0%, rgba(8, 145, 178, 0.1) 100%);
}

/* Revenue Split Card */
.split-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
padding: 20px;
background: var(--background);
border-radius: 8px;
}

.split-item {
text-align: center;
}

.split-amount {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}

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

.split-percentage {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}

/* Action Center Styles */
.action-tab-content {
margin-top: 16px;
}

.action-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
margin-bottom: var(--space-3);
background: var(--background);
border-radius: var(--radius-sm);
border-left: 4px solid var(--primary);
transition: all 0.2s;
}

.action-item:hover {
background: var(--background-alt);
transform: translateX(4px);
}

.action-item.urgent {
border-left-color: var(--danger);
background: var(--danger-pale);
}

.action-item.today {
border-left-color: var(--warning);
background: var(--warning-pale);
}

.action-item.upcoming {
border-left-color: var(--success);
background: var(--success-pale);
}

.action-info {
flex: 1;
}

.action-title {
font-weight: var(--font-semibold);
font-size: var(--font-size-md);
margin-bottom: var(--space-1);
color: var(--text-primary);
}

.action-details {
font-size: var(--font-size-sm);
color: var(--text-secondary);
}

.action-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}

.action-badge {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-size: 11px;
font-weight: var(--font-semibold);
text-transform: uppercase;
}

.action-badge.overdue {
background: var(--danger-pale);
color: var(--danger-text);
}

.action-badge.due-today {
background: var(--warning-pale);
color: var(--warning-text);
}

.action-badge.due-soon {
background: var(--info-pale);
color: var(--info-text);
}

@media (max-width: 768px) {
.action-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.action-buttons {
    width: 100%;
}

.action-buttons .btn {
    flex: 1;
}
}

/* Logo styles - square logos */
.logo-img {
max-width: 120px;
width: 120px;
height: 120px;
object-fit: contain;
margin-bottom: 12px;
display: block;
margin: 0 auto 12px;
border-radius: 16px;
}

.navbar-logo {
width: 44px;
height: 44px;
object-fit: contain;
display: block;
border-radius: 10px;
}

/* Make square logo blend with navbar background */
[data-theme="dark"] .navbar-logo {
filter: brightness(0.9) contrast(1.1);
background: rgba(255,255,255,0.1);
border-radius: 10px;
padding: 2px;
}

.mobile-logo {
width: 40px;
height: 40px;
object-fit: contain;
display: block;
border-radius: 8px;
}

/* Logo responsive styles */
@media (max-width: 768px) {
.logo-img {
    max-width: 100px;
    width: 100px;
    height: 100px;
}

.navbar-logo {
    width: 40px;
    height: 40px;
}

.mobile-logo {
    width: 36px;
    height: 36px;
}
}

@media (max-width: 480px) {
.logo-img {
    max-width: 80px;
    width: 80px;
    height: 80px;
}

.navbar-logo {
    width: 36px;
    height: 36px;
}

.mobile-logo {
    width: 32px;
    height: 32px;
}
}
/* Quick Actions / Command Palette */
.quick-actions-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 10000;
backdrop-filter: blur(4px);
animation: fadeIn 0.2s;
}

.quick-actions-overlay.active {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 15vh;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.quick-actions-panel {
background: white;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 600px;
max-height: 70vh;
display: flex;
flex-direction: column;
animation: slideDown 0.3s;
}

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

.quick-actions-search {
padding: 20px;
border-bottom: 2px solid var(--border);
display: flex;
gap: 8px;
align-items: center;
}

.quick-actions-search input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
background: transparent;
}

.quick-actions-voice-btn {
background: var(--primary);
color: white;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}

.quick-actions-voice-btn:hover {
background: var(--primary-dark);
transform: scale(1.05);
}

.quick-actions-voice-btn.listening {
background: var(--danger);
animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}

.quick-actions-search input::placeholder {
color: var(--text-secondary);
}

.quick-actions-list {
overflow-y: auto;
max-height: 50vh;
padding: 8px;
}

.quick-action-item {
display: flex;
align-items: center;
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 4px;
}

.quick-action-item:hover,
.quick-action-item.selected {
background: var(--primary);
color: white;
}

.quick-action-icon {
font-size: 24px;
margin-right: 16px;
width: 32px;
text-align: center;
}

.quick-action-content {
flex: 1;
}

.quick-action-title {
font-weight: 600;
font-size: 14px;
margin-bottom: 2px;
}

.quick-action-desc {
font-size: 12px;
opacity: 0.8;
}

.quick-action-shortcut {
font-size: 11px;
padding: 4px 8px;
background: var(--background);
border-radius: 4px;
font-family: monospace;
color: var(--text-secondary);
}

.quick-action-item:hover .quick-action-shortcut,
.quick-action-item.selected .quick-action-shortcut {
background: rgba(255, 255, 255, 0.2);
color: white;
}

.quick-actions-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--text-secondary);
}

.quick-actions-footer kbd {
padding: 2px 6px;
background: var(--background);
border-radius: 4px;
font-family: monospace;
font-size: 11px;
border: 1px solid var(--border);
}

/* Keyboard shortcuts header button - hide on mobile */
@media (max-width: 768px) {
.keyboard-shortcuts-header-btn {
    display: none !important;
}
}

@media (max-width: 768px) {
.quick-actions-panel {
    width: 95%;
    max-height: 80vh;
}
.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
}

/* This Month Performance Card Styles */
.month-stat-card {
text-align: center;
padding: 24px 20px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.month-stat-card:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}

.month-stat-icon {
font-size: 40px;
margin-bottom: 12px;
display: block;
}

.month-stat-value {
font-size: 36px;
font-weight: 700;
margin-bottom: 8px;
display: block;
line-height: 1;
}

.month-stat-label {
font-size: 14px;
opacity: 0.95;
margin-bottom: 12px;
display: block;
font-weight: 500;
}

.month-stat-change {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.2);
border-radius: 20px;
display: inline-flex;
}

.trend-arrow {
font-size: 18px;
font-weight: 700;
}

.trend-down {
color: #fca5a5 !important;
}

.trend-up {
color: #86efac !important;
}

.trend-neutral {
color: #fde047 !important;
}

.trend-value {
font-weight: 700;
font-size: 14px;
}

@media (max-width: 768px) {
.month-stat-card {
    padding: 20px 16px;
}

.month-stat-icon {
    font-size: 32px;
}

.month-stat-value {
    font-size: 28px;
}

.month-stat-label {
    font-size: 13px;
}
}

/* ============================================
MOBILE RESPONSIVE STYLES
============================================ */

@media (max-width: 768px) {
/* Stack payment analytics cards on mobile */
div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
}

/* Fix charts grid overflow - stack vertically on mobile */
div[style*="grid-template-columns: repeat(auto-fit, minmax(450px, 1fr))"] {
    grid-template-columns: 1fr !important;
}

/* This Month Performance - Better mobile layout */
.month-stat-card {
    padding: 20px 16px;
}

.month-stat-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.month-stat-value {
    font-size: 28px;
}

.month-stat-label {
    font-size: 13px;
}

.month-stat-change {
    font-size: 13px;
    padding: 4px 10px;
}

/* Enhanced Metrics - Stack on mobile */
#enhancedMetrics {
    grid-template-columns: 1fr !important;
}

.metric-card {
    padding: 20px;
}

/* Revenue Distribution & Payment Collection */
.split-card {
    flex-direction: column;
    gap: 20px;
}

.split-item {
    padding: 20px;
}

.split-amount {
    font-size: 28px;
}

/* Action Center - Better mobile spacing */
.action-item {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 16px;
}

.action-buttons {
    width: 100%;
    justify-content: flex-start;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.action-buttons button {
    flex: 0 0 auto;
}

/* Recent Reservations Table - Horizontal scroll on mobile */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-container table {
    min-width: 600px;
}

/* Cards - Better mobile spacing */
.card {
    margin-bottom: 16px;
}

.card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
}

.card-header > div {
    width: 100%;
}

/* Filters - Hide desktop, show mobile bottom sheet */
.filters-desktop {
    display: none !important;
}

.filters-mobile {
    display: block !important;
}

/* Quick Filters - Better mobile layout */
.quick-filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.filter-chip {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Stats Grid - Stack on mobile */
.stats-grid {
    grid-template-columns: 1fr !important;
}

/* Buttons - Full width on mobile */
.btn-group {
    flex-direction: column;
    width: 100%;
}

.btn-group .btn {
    width: 100%;
}

/* Container padding */
.container {
    padding: 16px;
}

/* Modal on mobile */
.modal-content {
    width: 95%;
    max-height: 90vh;
    margin: 5vh auto;
}

.form-row {
    flex-direction: column;
}

.form-group {
    width: 100% !important;
}
}

/* Tablet Responsive (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
/* Enhanced Metrics - 2 columns on tablet */
#enhancedMetrics {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Payment Analytics - Keep 2 columns on tablet */
div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* This Month Performance - 3 columns on tablet */
.month-stat-card {
    padding: 20px;
}
}

/* Small Mobile (max 480px) */
@media (max-width: 480px) {
/* Stack all grid-based analytics on very small screens */
div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
div[style*="grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))"] {
    grid-template-columns: 1fr !important;
}

/* Smaller text sizes for very small screens */
.month-stat-value {
    font-size: 24px;
}

.split-amount {
    font-size: 24px;
}

.metric-value {
    font-size: 28px;
}

/* Tighter spacing */
.container {
    padding: 12px;
}

.card {
    padding: 16px;
    border-radius: 8px;
}

/* Stack This Month cards vertically */
div[style*="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))"] {
    grid-template-columns: 1fr !important;
}
}

/* Payment Reminders Collapse Animation */
#paymentRemindersList {
transition: all 0.3s ease;
overflow: hidden;
}

.card-header[onclick*="togglePaymentReminders"] {
transition: background-color 0.2s ease;
}

.card-header[onclick*="togglePaymentReminders"]:hover {
background-color: rgba(0, 0, 0, 0.02);
}

#paymentRemindersIcon {
display: inline-block;
transition: transform 0.3s ease;
}

/* Rotate when collapsed */
.collapsed #paymentRemindersIcon {
transform: rotate(-90deg);
}

#paymentRemindersCount {
font-weight: 500;
padding: 4px 12px;
background: var(--background);
border-radius: 20px;
}
/* ============================================
MULTI-PAYMENT MODAL - HYBRID LAYOUT
============================================ */

.multi-payment-modal .modal-content {
max-width: 900px;
}

.entry-count {
font-size: 14px;
color: var(--text-secondary);
font-weight: normal;
}

.info-banner {
background: #f8fafc;
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
border-left: 4px solid var(--primary);
}

.common-settings-box {
background: #f8fafc;
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
}

.modal-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
}

.add-payment-btn {
margin-bottom: 20px;
width: 100%;
}

/* Show/Hide Desktop vs Mobile Views */
.desktop-payment-table {
display: block;
}

.mobile-payment-cards {
display: none;
}

.mobile-text {
display: none;
}

.desktop-text {
display: inline;
}

/* Payment Entry Card (Mobile) */
.payment-entry-card {
background: white;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
position: relative;
transition: all 0.2s ease;
}

.payment-entry-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-entry-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #e2e8f0;
}

.payment-entry-number {
font-size: 14px;
font-weight: 600;
color: var(--primary);
background: rgba(37, 99, 235, 0.1);
padding: 4px 12px;
border-radius: 20px;
}

.payment-entry-remove {
background: var(--danger);
color: white;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.2s ease;
}

.payment-entry-remove:hover {
background: #dc2626;
transform: scale(1.1);
}

.payment-entry-fields {
display: grid;
gap: 12px;
}

.payment-field {
display: flex;
flex-direction: column;
}

.payment-field label {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}

.payment-field input,
.payment-field select {
width: 100%;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 14px;
transition: all 0.2s ease;
}

.payment-field input:focus,
.payment-field select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.payment-field input[readonly] {
background: #f8fafc;
color: var(--text-secondary);
}

/* Tablet Breakpoint (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.multi-payment-modal .modal-content {
    max-width: 95%;
}

.desktop-payment-table {
    overflow-x: auto;
}
}

/* Mobile Breakpoint (<768px) */
@media (max-width: 768px) {
/* Hide desktop table, show mobile cards */
.desktop-payment-table {
    display: none !important;
}

.mobile-payment-cards {
    display: block !important;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.mobile-text {
    display: inline;
}

.desktop-text {
    display: none;
}

/* Full-screen modal on mobile */
.multi-payment-modal .modal-content {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    margin: 0;
    border-radius: 0;
}

.modal-body {
    padding: 16px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}

.info-banner {
    padding: 12px;
    font-size: 13px;
}

.mobile-payment-cards {
    max-height: none !important;
}

.payment-entry-card {
    padding: 16px;
    margin-bottom: 12px;
}

.payment-entry-fields {
    grid-template-columns: 1fr;
}

.payment-field input,
.payment-field select {
    padding: 12px;
    font-size: 16px; /* Prevents iOS zoom */
}

.modal-actions {
    flex-direction: column;
    gap: 8px;
    position: sticky;
    bottom: 0;
    background: white;
    padding: 12px 0;
    margin: 0 -16px;
    padding: 12px 16px;
    border-top: 1px solid #e2e8f0;
}

.modal-actions button {
    width: 100%;
}

.form-row {
    flex-direction: column !important;
}

.form-group {
    width: 100% !important;
}

.common-settings-box {
    padding: 12px;
}
}

/* Desktop 2-column card layout (if cards are shown) */
@media (min-width: 769px) {
.payment-entry-fields {
    grid-template-columns: repeat(2, 1fr);
}

.payment-field-full {
    grid-column: 1 / -1;
}
}

/* ==========================================
GUEST CARD GRID (Mobile-First)
========================================== */
.guest-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
}
.guest-card {
background: var(--surface);
border-radius: 14px;
padding: 16px;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
cursor: pointer;
transition: box-shadow 0.2s ease;
}
.guest-card:active {
box-shadow: 0 0 0 2px var(--primary);
}
.guest-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.guest-card-avatar {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}
.guest-card-info {
flex: 1;
min-width: 0;
}
.guest-card-name {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.guest-card-tags {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.guest-badge {
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
}
.guest-card-spent {
text-align: right;
flex-shrink: 0;
}
.guest-card-amount {
font-size: 16px;
font-weight: 700;
color: var(--success);
}
.guest-card-spent-label {
font-size: 10px;
color: var(--text-secondary);
}
.guest-card-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.guest-card-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.guest-checkin-highlight {
color: var(--success) !important;
font-weight: 600;
}
.guest-card-stats {
display: flex;
justify-content: space-around;
gap: 8px;
}
.guest-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.guest-stat-value {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.guest-stat-label {
font-size: 10px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.guest-qr-btn {
width: 34px;
height: 34px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
transition: all 0.2s;
}
.guest-qr-btn:active {
background: var(--primary);
color: white;
}

@media (max-width: 480px) {
.guest-card-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
.guest-card {
    padding: 14px;
}
.guest-card-amount {
    font-size: 14px;
}
.guest-stat-value {
    font-size: 13px;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.guest-card-grid {
    grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.guest-card-grid {
    grid-template-columns: repeat(2, 1fr);
}
}

/* ==========================================
MOBILE & TABLET OPTIMIZATIONS
========================================== */

/* Hide mobile-only labels on desktop */
.td-mobile-label {
    display: none;
}

/* Guest Table Mobile Optimization */
@media (max-width: 768px) {

.td-mobile-label {
    display: inline;
}
/* Hide table headers on mobile */
#guestTableView table thead {
    display: none;
}

/* Convert table rows to compact cards */
#guestTableView table,
#guestTableView table tbody {
    display: block;
    width: 100%;
}

#guestTableView table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    margin-bottom: 12px;
    background: var(--surface, white);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 14px;
    border: 1px solid var(--border);
    position: relative;
}

#guestTableView table tbody td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
}

/* Remove the generic ::before label */
#guestTableView table tbody td::before {
    display: none;
}

/* 1st td: Guest Name - spans full width */
#guestTableView table tbody td:nth-child(1) {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* 2nd td: Contact - spans full width */
#guestTableView table tbody td:nth-child(2) {
    grid-column: 1 / -1;
    padding-bottom: 8px;
    font-size: 13px;
}

/* 3rd td: Last Visit */
#guestTableView table tbody td:nth-child(3) {
    grid-column: 1;
    padding: 6px 0;
}
#guestTableView table tbody td:nth-child(3)::after {
    display: none;
}

/* 4th td: Stays */
#guestTableView table tbody td:nth-child(4) {
    grid-column: 2;
    text-align: right;
    padding: 6px 0;
}

/* 5th td: Total Spent - spans full width */
#guestTableView table tbody td:nth-child(5) {
    grid-column: 1 / -1;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    font-size: 15px;
}

/* 6th td: Actions - hide on mobile (whole card is clickable) */
#guestTableView table tbody td:nth-child(6) {
    display: none;
}

/* Mobile inline labels (visible only on mobile) */
.td-mobile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Guest Detail Modal - Mobile */
#guestDetailModal .modal-content {
    max-width: 100%;
}

#guestDetailModal .modal-body {
    padding: 12px;
}

/* Guest profile gradient card */
.guest-profile-card {
    padding: 16px !important;
    border-radius: 10px !important;
    margin-bottom: 16px !important;
}

.guest-profile-card .profile-top {
    flex-direction: column !important;
    gap: 12px !important;
}

.guest-profile-card .profile-avatar-section {
    gap: 10px !important;
}

.guest-profile-card .profile-avatar-section > div:first-child {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
}

.guest-profile-card h2 {
    font-size: 18px !important;
    word-break: break-word;
}

.guest-profile-card .contact-row {
    flex-wrap: wrap;
    gap: 6px !important;
    font-size: 13px !important;
}

.guest-profile-card .contact-btn {
    padding: 6px 14px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    min-height: 32px;
}

.guest-profile-card .edit-btn {
    align-self: flex-start;
    width: 100%;
    text-align: center;
    padding: 10px !important;
    border-radius: 8px !important;
}

/* Guest stats grid */
.guest-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}

.guest-stats-grid > div {
    padding: 12px !important;
    border-radius: 8px !important;
}

.guest-stats-grid .stat-value {
    font-size: 18px !important;
}

.guest-stats-grid .stat-label {
    font-size: 11px !important;
}

/* Booking history cards */
.booking-history-card {
    padding: 12px !important;
    border-radius: 8px !important;
}

.booking-history-card .booking-top {
    flex-direction: column !important;
    gap: 8px !important;
}

.booking-history-card .booking-amount {
    text-align: left !important;
    font-size: 16px !important;
}

.booking-history-card .booking-status {
    display: inline-block;
    margin-top: 4px;
}

/* Desktop filters hidden on mobile, mobile filters shown */
.filters-desktop {
    display: none !important;
}

.filters-mobile {
    display: block !important;
}

/* Modal full-screen on mobile */
.modal-content {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
    max-width: 100%;
}

.modal-body {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* Stats cards 2-column on small mobile */
.stats-grid,
.enhanced-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
}

.metric-card,
.stat-card {
    padding: 14px;
}

.metric-value,
.stat-value {
    font-size: 22px;
}

.metric-label,
.stat-label {
    font-size: 11px;
}

/* Pagination mobile */
#guestPaginationButtons button {
    min-width: 36px;
    height: 36px;
    padding: 6px 8px;
    font-size: 12px;
}

#guestPaginationButtons span {
    font-size: 11px;
}

/* Touch targets minimum 44px */
.btn-sm {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
}

button,
a.btn {
    min-height: 44px;
}

/* Larger checkboxes */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--primary);
    color-scheme: dark;
}

/* Card grid mobile */
.icon-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Guest card view on mobile */
#guestCardView #guestListContainer .guest-card-grid {
    grid-template-columns: 1fr !important;
}
}

/* Tablet Optimization (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
/* 2-column layouts */
.stats-grid {
    grid-template-columns: repeat(3, 1fr);
}

.enhanced-metrics {
    grid-template-columns: repeat(3, 1fr);
}

/* Guest table: hide less important columns */
#guestTableView table th:nth-child(3),
#guestTableView table td:nth-child(3) {
    display: none;
}

/* Modal slightly smaller */
.modal-content {
    max-width: 85%;
}

/* Keep desktop navigation */
.navbar {
    display: flex;
}

.mobile-nav {
    display: none;
}

/* 2-column guest cards */
#guestCardView #guestListContainer .guest-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}
}

/* Very small mobile (<480px) */
@media (max-width: 480px) {
.enhanced-metrics {
    grid-template-columns: 1fr !important;
}

.metric-card {
    padding: 16px;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}
}

/* ============================================
   MICRO-INTERACTIONS & POLISH
   ============================================ */

/* Card hover lift */
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.card {
transition: box-shadow 0.25s ease;
}

/* Button press effect — only on buttons, not on cards containing interactive elements */
.btn:active {
transform: scale(0.97) !important;
}

/* Badge bounce */
@keyframes badgeBounce {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.3); }
60% { transform: scale(0.9); }
}

.badge-bounce {
animation: badgeBounce 0.4s ease;
}

/* Scroll-to-top button */
.scroll-to-top {
position: fixed;
bottom: calc(80px + var(--sab, 0px));
right: 20px;
width: 44px;
height: 44px;
background: var(--primary);
color: white;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 999;
}

.scroll-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.scroll-to-top:hover {
background: var(--primary-dark);
box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

.scroll-to-top:active {
transform: scale(0.93);
}

@media (min-width: 769px) {
.scroll-to-top {
    bottom: 32px;
    right: 32px;
}
}

/* Toast color variants */
.toast-success { border-left: 4px solid var(--success) !important; }
.toast-error { border-left: 4px solid var(--danger) !important; }
.toast-warning { border-left: 4px solid var(--warning) !important; }
.toast-info { border-left: 4px solid var(--primary) !important; }

/* Error state card */
.error-state {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
padding: 40px 24px;
text-align: center;
color: #991b1b;
}

[data-theme="dark"] .error-state {
background: rgba(220, 38, 38, 0.1);
border-color: rgba(220, 38, 38, 0.3);
color: #fca5a5;
}

.error-state-icon {
font-size: 48px;
margin-bottom: 16px;
}

.error-state-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}

.error-state-message {
font-size: 14px;
opacity: 0.8;
margin-bottom: 20px;
}

/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
text-align: center;
color: var(--text-secondary);
}

.empty-state-icon {
font-size: 56px;
margin-bottom: 20px;
opacity: 0.4;
}

.empty-state-title {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}

.empty-state-message {
font-size: 14px;
margin-bottom: 24px;
max-width: 360px;
line-height: 1.5;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}

/* ========================================
   MOBILE HEADER — Logo + Title + Actions
   No sidebar, no drawer. Bottom tabs "More"
   button opens the bottom sheet for nav.
   ======================================== */

@media (max-width: 768px) {
    .mobile-header-content {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 12px;
        gap: 8px;
    }

    .mobile-header-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .mobile-header-title {
        flex: 1;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        padding-left: 4px;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-shrink: 0;
    }

    .mobile-action-btn {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        color: var(--text-primary);
        border-radius: 50%;
        transition: background 0.2s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        min-width: 40px;
    }

    .mobile-action-btn:active {
        background: rgba(0, 0, 0, 0.06);
        transform: scale(0.95);
    }

    .mobile-notif-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #ef4444;
        color: white;
        font-size: 9px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 2px solid white;
    }

    /* Mobile Search Bar (expandable) */
    .mobile-search-bar {
        padding: 8px 12px 10px;
        border-top: 1px solid var(--border, #e2e8f0);
    }

    .mobile-search-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--background-alt, #f1f5f9);
        border-radius: 10px;
        padding: 10px 14px;
        border: 1px solid var(--border, #e2e8f0);
    }

    .mobile-search-input {
        border: none;
        background: none;
        outline: none;
        font-size: 14px;
        color: var(--text-primary);
        width: 100%;
        font-family: inherit;
    }

    .mobile-search-input::placeholder {
        color: var(--text-tertiary);
    }

    .mobile-search-close {
        background: none;
        border: none;
        color: var(--text-tertiary);
        padding: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        min-height: auto;
        min-width: auto;
    }
}

/* Hide mobile-only elements on desktop/tablet */
@media (min-width: 769px) {
    .mobile-header-actions,
    .mobile-header-title,
    .mobile-search-bar {
        display: none;
    }
}

/* ========================================
   MOBILE TEXT ALIGNMENT & LAYOUT FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Dash header stacks properly on mobile */
    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }

    .dash-greeting {
        font-size: 20px;
        text-align: left;
        width: 100%;
    }

    .dash-date {
        text-align: left;
    }

    /* View titles - left aligned */
    .view-header,
    .card-header {
        text-align: left;
    }

    .card-header h3,
    .card-header h2 {
        text-align: left;
        font-size: 16px;
    }

    /* Home view text alignment */
    .home-welcome-header {
        text-align: left;
    }

    .home-greeting-time,
    .home-greeting-user,
    .home-greeting-subtitle {
        text-align: left;
    }

    .home-section-header {
        text-align: left;
    }

    .home-section-title {
        text-align: left;
        font-size: 13px;
    }

    /* Stat cards - left align values and labels */
    .today-stat-value {
        font-size: 24px;
        text-align: left;
    }

    .today-stat-label {
        text-align: left;
        font-size: 10px;
    }

    /* App launcher labels centered */
    .app-icon-label {
        text-align: center;
    }

    /* Section titles */
    .app-launcher-section-title {
        text-align: left;
        padding-left: 4px;
    }

    /* Container top padding to account for fixed mobile header */
    .container {
        padding-top: 16px;
    }

    /* Page-level headings left-aligned */
    h1, h2, h3 {
        text-align: left;
    }

    /* Modal headers on mobile */
    .modal-header {
        text-align: left;
    }

    .modal-header h2,
    .modal-header h3 {
        text-align: left;
    }

    /* Data rows text alignment */
    .reservation-row,
    .guest-row,
    .payment-row {
        text-align: left;
    }

    /* Table cells */
    td, th {
        text-align: left;
    }

    /* No content hidden behind mobile header */
    #mainApp > .container:first-of-type {
        scroll-margin-top: 60px;
    }
}

/* ---- Quick Edit Modal Sections ---- */
.qe-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}
.qe-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--background);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    user-select: none;
    transition: background 0.15s;
}
.qe-section-header:hover {
    background: var(--surface);
}
.qe-section-header span {
    display: flex;
    align-items: center;
}
.qe-section-body {
    padding: 16px;
    border-top: 1px solid var(--border);
}
.qe-section.collapsed .qe-section-body {
    display: none;
}
.qe-section.collapsed .qe-chevron {
    transform: rotate(-90deg);
}
.qe-chevron {
    transition: transform 0.2s;
}

/* ---- View Transition Loading Overlay ---- */
.view-transition-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    min-height: 200px;
}
[data-theme="dark"] .view-transition-loader {
    background: rgba(15,23,42,0.7);
}

/* ---- Mobile-Responsive Form Improvements ---- */
@media (max-width: 768px) {
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 95vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        margin-top: auto;
    }
    .modal.active, .modal.show {
        align-items: flex-end;
        padding: 0;
    }
    .wizard-panel, .quick-edit-body {
        padding: 14px !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
        margin-bottom: 10px;
    }
    .form-group label {
        font-size: 12px;
    }
    .form-group input,
    .form-group select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 10px 12px;
    }
    .wizard-nav {
        padding: 12px 14px;
        position: sticky;
        bottom: 0;
    }
    .qe-section-body {
        padding: 12px;
    }
    .qe-banner {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    .modal-content {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
    .modal-header {
        padding: 14px 16px;
    }
    .modal-title {
        font-size: 18px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
}