/* Custom app overrides loaded after MudBlazor + Bootstrap */

/* App font */
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Dashboard chart dialog: make X-axis labels smaller + avoid clipping when rotated */
.qc-dashboard-linechart .mud-charts-xaxis text,
.qc-dashboard-linechart .mud-chart-xaxis text {
    font-size: 10px;
}

/* Reduce any SVG clipping that can hide parts of rotated labels */
.qc-dashboard-linechart .mud-chart svg {
    overflow: visible;
}

/* Keep MudNavLink highlight, but give it a subtle radius (scoped to the drawer nav) */
.qc-drawer-nav .mud-nav-link,
.qc-drawer-nav .mud-nav-link.mud-nav-link-active,
.qc-drawer-nav .mud-nav-link.active,
.qc-drawer-nav .mud-nav-link[aria-current="page"] {
    border-radius: 8px !important;
}

/* MudBlazor uses pseudo elements for hover/active backgrounds; round those too */
.qc-drawer-nav .mud-nav-link::before,
.qc-drawer-nav .mud-nav-link::after,
.qc-drawer-nav .mud-nav-link.mud-nav-link-active::before,
.qc-drawer-nav .mud-nav-link.mud-nav-link-active::after,
.qc-drawer-nav .mud-nav-link.active::before,
.qc-drawer-nav .mud-nav-link.active::after {
    border-radius: 8px !important;
}

/* Align icon and text vertically (icons can sit slightly above the text baseline) */
.qc-drawer-nav .mud-nav-link {
    align-items: center;
}

.qc-drawer-nav .mud-nav-link .mud-nav-link-icon,
.qc-drawer-nav .mud-nav-link .mud-icon-root,
.qc-drawer-nav .mud-nav-link .mud-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 1px;
}

/* Make nav icons match text height more closely (MudBlazor defaults are a bit large) */
.qc-drawer-nav .mud-nav-link .mud-icon-root,
.qc-drawer-nav .mud-nav-link .mud-svg-icon,
.qc-drawer-nav .mud-nav-link .mud-nav-link-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* Drawer brand logo sizing */
.qc-brand-logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.mud-tooltip-root {
    display: block !important;
}