/* Material Symbols - using Google Fonts CDN (required for icon rendering) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Work+Sans:wght@300;400;500;600&display=swap');

/*
 * System Fonts Fallback Configuration
 * Replacing Google Fonts CDN with system fonts
 */

:root {
    /* Font Family Stack */
    --font-headline: 'Segoe UI', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-body: 'Segoe UI', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --font-label: 'Segoe UI', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}

/* Apply fonts to elements */
body {
    font-family: var(--font-body);
}

.font-headline,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
}

.font-label,
label {
    font-family: var(--font-label);
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-smoothing: antialiased;
}

/* Override system fonts with actual Google Fonts */
:root {
    --font-headline: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Work Sans', system-ui, -apple-system, sans-serif;
    --font-label: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Font Awesome Icon replacement with Unicode symbols */
.fa::before {
    font-family: Arial, sans-serif;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Font Awesome Icon Configuration
 * All icons are now handled by Font Awesome library
 *
 * Font Awesome Classes:
 * - .fa .fa-home (Home icon)
 * - .fa .fa-user (User icon)
 * - .fa .fa-users (Users icon)
 * - .fa .fa-bell (Bell notification icon)
 * - .fa .fa-cog (Settings/cog icon)
 * - .fa .fa-table (Table icon)
 * - .fa .fa-database (Database icon)
 * - .fa .fa-bars (Menu bars icon)
 * - .fa .fa-times (Close/X icon)
 * - .fa .fa-search (Search icon)
 * - .fa .fa-chevron-right (Right chevron)
 * - .fa .fa-chevron-down (Down chevron)
 * - .fa .fa-arrow-up (Up arrow)
 * - .fa .fa-arrow-right (Right arrow)
 * - .fa .fa-plus (Plus icon)
 * - .fa .fa-check (Check/checkmark)
 * - .fa .fa-exclamation-triangle (Warning icon)
 * - .fa .fa-user-plus (User plus icon)
 * - .fa .fa-download (Download icon)
 * - .fa .fa-clock (Clock icon)
 * - .fa .fa-sign-in-alt (Sign in icon)
 * - .fa .fa-shield-halved (Shield icon)
 * - .fa .fa-lock (Lock icon)
 * - .fa .fa-lock-open (Unlock icon)
 * - .fa .fa-eye (Eye/visibility icon)
 * - .fa .fa-eye-slash (Hide/eye-slash icon)
 */

/* Font Awesome Base Style */
.fa {
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}