/* Nutreasy - Custom CSS for MudBlazor application */

html, body {
    font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Subtle hover effects for list items */
.mud-list-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

/* Smooth, minimal transitions */
.mud-button,
.mud-chip {
    transition: opacity 0.15s ease-in-out;
}

.mud-button:hover {
    opacity: 0.85;
}

/* Subtle, professional shadows */
.mud-paper {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Touch-friendly hit targets */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Mobile dialog primary action button — grows to fill available space */
.dialog-primary-action {
    flex: 1 1 auto;
    min-width: 0;
}

/* Full-width utility */
.full-width {
    width: 100%;
}

.touch-list-item {
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
}

/* Cursor pointer utility */
.cursor-pointer {
    cursor: pointer;
}

/* Floating action button for mobile */
.fab-mobile {
    position: fixed !important;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
    z-index: 1300;
}

/* Prevent iOS zoom on input focus */
@media (max-width: 600px) {
    .mud-input-root input,
    .mud-input-root textarea,
    .mud-select-input {
        font-size: 16px !important;
    }
}

/* Prevent horizontal scroll on mobile */
body {
    overflow-x: hidden;
}

/* Pulse animation for unsaved changes indicator */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Fallback: ensure mobile search drawer respects safe-area and overlays above AppBar */
.mobile-search-drawer {
    top: env(safe-area-inset-top, 24px);
    z-index: 1310;
}

/* ==========================================================================
   Web font faces (Inter + Roboto)
   Absolute paths work for both the web server (/fonts/...) and MAUI WebView.
   Files not bundled in Hybrid fall back gracefully via font-display: swap.
   ========================================================================== */

/* Inter 300 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Inter-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/Inter-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 400 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 600 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter 700 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Chart text - improved readability */
.mud-charts-xaxis text,
.mud-charts-yaxis text {
    font-size: 14px;
}

.svg-tooltip text {
    font-size: 15px;
    font-weight: 700;
    fill: #1a1a1a;
}

/* ==========================================================================
   Gradient background — light & dark
   ========================================================================== */

html, body {
    min-height: 100%;
}

body {
    /* Tailwind blue-100 → sky-100 → violet-100: soft but visibly colored */
    /* !important needed: MudBlazor's body{background-color:var(...)} loads after app.css and would override background-color */
    background: linear-gradient(150deg, #DBEAFE 0%, #E0F2FE 55%, #EDE9FE 100%) !important;
    background-attachment: scroll !important;
}

/* Strip MudBlazor's solid layout background so gradient shows through */
.mud-layout {
    background: none !important;
}

/* Dark mode: deeper blue→indigo ambient gradient */
html.dark body {
    background: linear-gradient(150deg, #0C1627 0%, #0F172A 40%, #1E1B4B 100%) !important;
}

/* ==========================================================================
   Glassmorphism — cards & surfaces
   ========================================================================== */

.mud-paper {
    background: rgba(255, 255, 255, 0.62) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(59, 130, 246, 0.22) !important;
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.1) !important;
}

html.dark .mud-paper {
    background: rgba(20, 30, 50, 0.70) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(96, 165, 250, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   Frosted AppBar
   ========================================================================== */

.mud-appbar {
    background: rgba(240, 249, 255, 0.78) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.18) !important;
    box-shadow: 0 1px 12px rgba(29, 78, 216, 0.1) !important;
}

html.dark .mud-appbar {
    background: rgba(10, 18, 35, 0.84) !important;
    border-bottom: 1px solid rgba(96, 165, 250, 0.2) !important;
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   Frosted Drawer
   ========================================================================== */

.mud-drawer {
    background: rgba(240, 249, 255, 0.82) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(59, 130, 246, 0.2) !important;
}

html.dark .mud-drawer {
    background: rgba(10, 18, 35, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(96, 165, 250, 0.15) !important;
}

/* ==========================================================================
   Card hover lift
   ========================================================================== */

.mud-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.mud-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(29, 78, 216, 0.13) !important;
}

/* ==========================================================================
   Primary button glow
   ========================================================================== */

.mud-button-filled-primary {
    box-shadow: 0 2px 12px rgba(29, 78, 216, 0.28) !important;
    transition: box-shadow 0.18s ease !important;
}

.mud-button-filled-primary:hover {
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.45) !important;
}

/* ==========================================================================
   Slim scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(29, 78, 216, 0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(29, 78, 216, 0.45);
}

html.dark ::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, 0.3);
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(96, 165, 250, 0.5);
}