/*
  MudBlazor modern UI overrides

  Purpose:
  - Make MudLayout/MudAppBar/MudDrawer/MudNavMenu feel more sleek/modern.
  - Keep overrides in a single, removable file.

  Removal:
  - Delete this file and remove the <link> reference from wwwroot/index.html.

  Notes:
  - Overrides are scoped under .la-modern-mud (applied at the layout root) to avoid
    impacting custom components and unrelated pages.
*/

/* -----------------------------
   Design tokens (scoped)
   ----------------------------- */
.la-modern-mud {
    --la-radius: 12px;
    --la-radius-sm: 10px;
    --la-surface-border: color-mix(in srgb, var(--mud-palette-divider) 85%, transparent);
    --la-hover-bg: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent);
    --la-active-bg: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --la-focus-ring: color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

/* Slightly modernize typography without forcing a specific font download.
   If you want Inter/another font, add it in index.html and update this stack. */
.la-modern-mud {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* -----------------------------
   AppBar (glass + divider)
   ----------------------------- */
.la-modern-mud .mud-appbar {
    /* Keep your palette color but lighten the feel */
    background: color-mix(in srgb, var(--mud-palette-appbar-background) 92%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Replace heavier shadow with a crisp divider */
    box-shadow: none;
    border-bottom: 1px solid var(--la-surface-border);
}

/* Make icon buttons feel less cramped and more consistent */
.la-modern-mud .mud-icon-button {
    border-radius: 999px;
}

/* -----------------------------
   Drawer (clean separation)
   ----------------------------- */
.la-modern-mud .mud-drawer {
    box-shadow: none;
    border-right: 1px solid var(--la-surface-border);
}

/* Drawer header: subtle separation */
.la-modern-mud .mud-drawer .mud-drawer-header {
    border-bottom: 1px solid var(--la-surface-border);
}

/* -----------------------------
   Navigation links
   ----------------------------- */

/* Make nav links more "app-like" with pill shape and consistent spacing */
.la-modern-mud .mud-nav-link {
    border-radius: var(--la-radius-sm);
    margin: 2px 8px;
}

/* Hover: subtle, neutral */
.la-modern-mud .mud-nav-link:hover {
    background-color: var(--la-hover-bg);
}

/* Active link: tinted primary background, not harsh */
.la-modern-mud .mud-nav-link.active,
.la-modern-mud .mud-nav-link--active {
    background-color: var(--la-active-bg);
}

/* -----------------------------
   Paper / Cards (if used)
   ----------------------------- */

.la-modern-mud .mud-paper {
    border-radius: var(--la-radius);
}

.la-modern-mud .mud-paper-outlined {
    border-color: var(--la-surface-border);
}

    /* -----------------------------
   Inputs (focus ring)
   ----------------------------- 
.la-modern-mud .mud-input:focus-within,
.la-modern-mud .mud-select:focus-within,
.la-modern-mud .mud-input-control:focus-within {
    box-shadow: 0 0 0 3px var(--la-focus-ring);
    border-radius: var(--la-radius-sm);
}*/

/* -----------------------------
   Scrollbar (subtle)
   ----------------------------- */
.la-modern-mud * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent) transparent;
}

.la-modern-mud *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.la-modern-mud *::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.la-modern-mud *::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--mud-palette-text-primary) 32%, transparent);
}