/* SaaS Dashboard Architect - Corporate Blue & Pure White Style */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: #F8FAFC;
    color: #0F172A;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Micro-transitions & Fluid Interaction */
* {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Text Selection Styling */
::selection {
    background-color: #DBEAFE; /* blue-100 */
    color: #1E40AF; /* blue-800 */
}

::-moz-selection {
    background-color: #DBEAFE;
    color: #1E40AF;
}

/* Elegant Light Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Dark Mode Overrides */
html.dark {
    color-scheme: dark;
}

html.dark body {
    background-color: #020617; /* slate-950 */
    color: #F8FAFC; /* slate-50 */
}

html.dark ::selection {
    background-color: #1E3A8A; /* blue-900 */
    color: #93C5FD; /* blue-300 */
}

html.dark ::-moz-selection {
    background-color: #1E3A8A;
    color: #93C5FD;
}

html.dark ::-webkit-scrollbar-track {
    background: #0B1120;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #1E293B;
    border-radius: 9999px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* ==========================================================================
   PWA & Mobile Standalone Safe Area Adjustments
   ========================================================================== */
html.is-pwa-standalone {
    -webkit-tap-highlight-color: transparent;
}

html.is-pwa-standalone body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* Ensure sticky mobile headers account for status bar safe area */
@supports (padding-top: env(safe-area-inset-top)) {
    html.is-pwa-standalone header.sticky {
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }
}