/* Navy/teal skin shared with ITWorks Load Management (BryanContracting.Web: trilno-skin.css and the
   navigation rules in its app.css). Loaded after MudBlazor.min.css so it can be maintained as one skin. */
:root {
    --trilno-navy: #0d1b2a;
    --trilno-teal: #00b4b0;
    --trilno-mint: #5ed1c6;
    --trilno-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --trilno-font-display: "Playfair Display", Georgia, serif;
}

html, body { font-family: var(--trilno-font-body); }
a, .btn-link { color: var(--mud-palette-primary, #007a77); }

/* One hue per drawer section, so the menu is scanned by colour before it is read. Declared on the
   layout so page content can reuse the same hues. MainLayout puts .app-dark on the layout root in
   dark mode, because MudBlazor swaps its palette variables without exposing a selector. */
.mud-layout {
    --nav-azure: #007a77;
    --nav-green: #26766b;
    --nav-violet: #3d6d80;
    --nav-cyan: #007a77;
    --nav-amber: #95651c;
    --nav-pink: #52737c;
    --nav-lime: #46735d;
    --nav-orange: #94683a;
    --nav-indigo: #3e647b;
}
.mud-layout.app-dark {
    --nav-azure: #5ed1c6;
    --nav-green: #8ed6ba;
    --nav-violet: #9cc5d4;
    --nav-cyan: #5ed1c6;
    --nav-amber: #e4c38a;
    --nav-pink: #a7c8cd;
    --nav-lime: #afd4b6;
    --nav-orange: #dfbd98;
    --nav-indigo: #9abfcf;
}

.nav-dash    { --nav-accent: var(--nav-azure); }
.nav-ops     { --nav-accent: var(--nav-cyan); }
.nav-parties { --nav-accent: var(--nav-amber); }
.nav-reports { --nav-accent: var(--nav-lime); }
.nav-admin   { --nav-accent: var(--nav-orange); }

.mud-appbar {
    border-bottom: 1px solid rgba(94, 209, 198, 0.2);
    box-shadow: 0 3px 16px rgba(13, 27, 42, 0.12);
}
.platform-brand { display: flex; align-items: flex-end; gap: 0.5rem; min-width: 0; }
.platform-brand img { height: 40px; }
.mud-drawer { border-inline-end: 1px solid var(--mud-palette-lines-default); }
.mud-nav-link { border-radius: 8px; }
.mud-button-root { letter-spacing: 0; }
.mud-button-filled-primary { box-shadow: 0 3px 10px rgba(0, 122, 119, 0.16); }
.mud-table-container { scrollbar-color: var(--mud-palette-lines-inputs) transparent; }
.mud-table-head .mud-table-cell {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Section-coloured icons, chevrons and active link. Every selector carries .app-nav to outweigh
   MudBlazor's own rules. */
.app-nav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.app-nav .mud-nav-link:not(.mud-nav-link-disabled) .mud-nav-link-icon.mud-nav-link-icon-default {
    color: var(--nav-accent, var(--mud-palette-drawer-icon));
    opacity: 0.82;
    transition: opacity 120ms ease;
}
.app-nav .mud-nav-link:hover .mud-nav-link-icon,
.app-nav .mud-nav-link.active .mud-nav-link-icon { opacity: 1; }
.app-nav.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--nav-accent, var(--mud-palette-primary));
    background-color: color-mix(in srgb, var(--nav-accent, var(--mud-palette-primary)) 14%, transparent);
}
.app-nav.mud-navmenu.mud-navmenu-bordered .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 3px;
}
.app-nav .mud-nav-link .mud-nav-link-expand-icon {
    color: var(--nav-accent, var(--mud-palette-drawer-icon));
    opacity: 0.6;
}
.app-nav .mud-nav-link:hover .mud-nav-link-expand-icon { opacity: 1; }

/* Mini drawer: an icon rail on desktop, gone entirely on small screens (the width variable also
   drives the main-content margin, so it is zeroed rather than overriding the drawer width). */
@media (max-width: 959.98px) {
    .mud-layout:has(.app-nav) { --mud-drawer-width-mini-left: 0px; }
    .mud-drawer-mini.mud-drawer--closed:has(.app-nav) { box-shadow: none; }
}
.mud-drawer--closed.mud-drawer-mini .app-nav .mud-nav-link-expand-icon { display: none; }
.mud-drawer--closed.mud-drawer-mini .app-nav .mud-nav-link .mud-nav-link-icon { opacity: 1; }
.mud-drawer--closed.mud-drawer-mini .app-nav.mud-navmenu-bordered .mud-nav-link.active:not(.mud-nav-link-disabled) {
    border-inline-end-width: 0;
    border-inline-start: 3px solid var(--nav-accent, var(--mud-palette-primary));
    padding-inline-start: 13px;
}

/* Drawer scrollbar: thin, neutral, no trough. */
.mud-drawer:has(.app-nav) {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--nav-scroll-thumb) transparent;
    --nav-scroll-thumb: rgba(15, 23, 42, 0.22);
    --nav-scroll-thumb-hover: rgba(15, 23, 42, 0.42);
}
.app-dark .mud-drawer:has(.app-nav) {
    --nav-scroll-thumb: rgba(3, 6, 12, 0.55);
    --nav-scroll-thumb-hover: rgba(3, 6, 12, 0.85);
}
.mud-drawer:has(.app-nav)::-webkit-scrollbar { width: 10px; }
.mud-drawer:has(.app-nav)::-webkit-scrollbar-track { background: transparent; }
.mud-drawer:has(.app-nav)::-webkit-scrollbar-thumb {
    background-color: var(--nav-scroll-thumb);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.mud-drawer:has(.app-nav):hover::-webkit-scrollbar-thumb,
.mud-drawer:has(.app-nav)::-webkit-scrollbar-thumb:hover { background-color: var(--nav-scroll-thumb-hover); }
.mud-drawer:has(.app-nav)::-webkit-scrollbar-corner { background: transparent; }

@media print {
    .mud-table-head .mud-table-cell { background-color: #f2f4f7; color: #0d1b2a; }
}