@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* WildBooking Global Styles */

/* CSS Variables for Dashboard Design System */
:root {
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

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

    /* Status Colors (semantic) */
    --status-confirmed: #10b981;
    --status-confirmed-light: #d1fae5;
    --status-pending: #f59e0b;
    --status-pending-light: #fef3c7;
    --status-active: #06b6d4;
    --status-active-light: #cffafe;
    --status-maintenance: #ef4444;
    --status-maintenance-light: #fee2e2;
    --status-completed: #10b981;
    --status-cancelled: #ef4444;
    --status-available: #10b981;
    --status-available-light: #d1fae5;
    --status-out-of-service: #ef4444;
    --status-out-of-service-light: #fee2e2;

    /* Outline */
    --outline-variant-opacity: rgba(0, 0, 0, 0.06);
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #bfc8cf;
    border-radius: 10px;
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Global Body Styles */
body {
    font-family: 'Manrope', sans-serif;
    background-color: #ffffff;
}

/* Common Utility Classes */
.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.meter-zero,
.timeline-bar-zero {
    width: 0%;
}

.pct-width-0 { width: 0%; }
.pct-width-5 { width: 5%; }
.pct-width-10 { width: 10%; }
.pct-width-15 { width: 15%; }
.pct-width-20 { width: 20%; }
.pct-width-25 { width: 25%; }
.pct-width-30 { width: 30%; }
.pct-width-35 { width: 35%; }
.pct-width-40 { width: 40%; }
.pct-width-45 { width: 45%; }
.pct-width-50 { width: 50%; }
.pct-width-55 { width: 55%; }
.pct-width-60 { width: 60%; }
.pct-width-65 { width: 65%; }
.pct-width-70 { width: 70%; }
.pct-width-75 { width: 75%; }
.pct-width-80 { width: 80%; }
.pct-width-85 { width: 85%; }
.pct-width-90 { width: 90%; }
.pct-width-95 { width: 95%; }
.pct-width-100 { width: 100%; }

.chart-bar-empty {
    height: 18%;
}

.chart-height-10 { height: 10%; }
.chart-height-15 { height: 15%; }
.chart-height-20 { height: 20%; }
.chart-height-25 { height: 25%; }
.chart-height-30 { height: 30%; }
.chart-height-35 { height: 35%; }
.chart-height-40 { height: 40%; }
.chart-height-45 { height: 45%; }
.chart-height-50 { height: 50%; }
.chart-height-55 { height: 55%; }
.chart-height-60 { height: 60%; }
.chart-height-65 { height: 65%; }
.chart-height-70 { height: 70%; }
.chart-height-75 { height: 75%; }
.chart-height-80 { height: 80%; }
.chart-height-85 { height: 85%; }
.chart-height-90 { height: 90%; }

.portal-icon-sm {
    font-size: 14px;
}

.material-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}