/* EatHappy Blazor Global Styles - Mobile First & Role-based Theming */

/* Custom Font Faces */
@font-face {
    font-family: 'EatHappyBasic';
    src: url('/fonts/EatHappyBasic-T.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Global CSS Variables */
:root {
    /* Office Role Colors (Blue Theme) */
    --primary-office: #003DA6;
    --primary-office-light: #336cb8;
    --primary-office-dark: #002a74;

    /* Field Role Colors (Red Theme) */
    --primary-field: #FF646E;
    --primary-field-light: #ff8990;
    --primary-field-dark: #cc4e58;

    /* Universal Colors */
    --background: #FFFFFF;
    --surface: #F5F5F7;
    --text-primary: #1D1D1F;
    --text-secondary: #86868B;
    --border-light: #E5E5EA;

    /* Design System */
    --border-radius: 12px;
    --shadow: 0 4px 12px rgba(0,0,0,0.12);

    /* Default to Office theme */
    --primary: var(--primary-office);
}

/* Body & Typography */
body {
    margin: 0;
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

/* Role-specific theming */
body.role-office {
    --primary: var(--primary-office);
}

body.role-field {
    --primary: var(--primary-field);
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: 'EatHappyBasic', 'Montserrat', sans-serif !important;
}

/* MudBlazor Overrides */
.mud-main-content {
    padding: 0 !important;
}

.mud-appbar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Force Montserrat on all MudBlazor components */
.mud-typography,
.mud-button-root,
.mud-input,
.mud-input-root,
.mud-select,
.mud-menu-item,
.mud-list-item,
.mud-card,
.mud-dialog,
.mud-tooltip,
.mud-alert,
.mud-chip,
.mud-table,
.mud-nav-link,
.mud-appbar,
.mud-drawer,
.mud-paper {
    font-family: 'Montserrat', 'Helvetica Neue', sans-serif !important;
}

/* Mobile Touch Optimizations */
button, .mud-button-root {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    button, .mud-button-root {
        min-height: 44px;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface);
}

::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Loading States */
.loading-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Chat Specific Styles */
.chat-input-container-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: var(--background);
    border-top: 1px solid var(--border-light);
    z-index: 10;
}

/* Message formatting classes */
.message-link {
    color: var(--primary);
    text-decoration: underline;
}

.message-phone,
.message-email {
    color: var(--primary);
}

.message-list {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.message-code {
    background: var(--surface);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
}

.message-code-block {
    background: var(--surface);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Red Loading Circle for Initial App Load */
.red-loading-circle {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 100, 110, 0.2);
    border-top: 4px solid #FF646E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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