/* Roboto is already loaded (App.razor links Google Fonts) and is what MudBlazor's own
   components (MudText, MudButton, etc.) default to internally — this rule previously
   didn't include it at all, so every plain HTML element (nav links, .rk-console-page-title,
   the profile tile) inherited Helvetica Neue from here instead, while actual MudBlazor
   components rendered in Roboto right next to them. Roboto first so everything matches. */
html, body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Console auth + dashboard styling now lives in MudBlazor (AuthCard + Mud components). */

/* App-bar sign-in trigger (opens the shared modal with JS; falls back to /sign-in). */
.rk-signin-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    padding: .3rem .9rem;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: .9rem;
}

.rk-signin-link:hover {
    background: rgba(255, 255, 255, .12);
}

/* Sidebar rows (nav links, sign out, and future console sections) share one exact look.
   Defined here (global, unscoped) rather than in each component's own scoped .razor.css —
   NavMenu and MainLayout are separate components, so Blazor's CSS isolation gives them
   different scope hashes; two scoped rulesets with identical values can still drift apart
   over time, and this also guarantees precedence over the legacy "a { color: #006bb7 }"
   rule above (a plain class selector always outranks a bare type selector). Add new
   sidebar-row classes to this same selector list as more console sections land. */
.rk-console-sidebar__dashboard-btn,
.rk-console-sidebar__signout-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .75rem; /* 12px — matches Catalyst's gap-3 */
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    font-size: .875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    font-weight: 400;
    color: var(--mud-palette-text-primary, #18181B);
    cursor: pointer;
    padding: .5rem; /* ~8px */
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
}

.rk-console-sidebar__dashboard-btn:hover,
.rk-console-sidebar__signout-btn:hover,
.rk-console-sidebar__dashboard-btn--active {
    background: rgba(0, 0, 0, .04);
}

.rk-console-sidebar__dashboard-btn .rk-icon,
.rk-console-sidebar__signout-btn .rk-icon {
    width: 1.125rem; /* 18px — a touch tighter than Catalyst's size-5 */
    height: 1.125rem;
    color: var(--mud-palette-text-secondary, #71717A);
    flex-shrink: 0;
}

/* Every console page's <h1 class="rk-console-page-title">, previously completely unstyled
   (running on the browser's bare default h1 — ~2em/bold/its own margins). One consistent,
   considered size for every page header instead. */
.rk-console-page-title {
    font-size: 1.375rem; /* 22px */
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary, #18181B);
    margin: 0 0 .25rem;
}

/* .rk-tile: the shared card class used everywhere (dashboard feature tiles, list wrappers
   on Facilities/Memberships/Roles/etc.) — previously had zero rules of its own here,
   riding entirely on MudCard's defaults (Elevation's shadow + the theme's 8px radius).
   Global, not scoped to one page, since every one of its ~10 usages should share this
   same base look. A subtle border reads as more considered against the (now zinc-100)
   content canvas than a shadow alone. */
.rk-tile {
    border: 1px solid rgba(0, 0, 0, .07);
}

/* MudDataGrid (every grid in this app — Facilities/Members/Roles) renders as a plain
   .mud-table under the hood: MudBlazor gives it border-radius (the theme's default) but no
   overflow clip, so the last row's own border (and the header's, on some borders) visibly
   sticks out past the rounded corners instead of being cut off by them. Global, not scoped
   to one page, since every grid shares this same underlying class.

   Convention: every MudDataGrid in this app also sets Elevation="0" explicitly (there's no
   app-wide default to override it with — MudDataGrid's own default is Elevation="1" — so
   new grids need to set this themselves too, same as the dashboard tiles in Home.razor). */
.mud-table {
    overflow: hidden;
}

/* Every grid row is an independent row — MudBlazor gives each one only as much height as
   its own tallest cell needs, so a row with a MudSelect + 48px touch-target icon button
   ends up visibly taller than a plain-text row in the same table. min-height on the cell
   alone wasn't enough to force short rows up to match (MudDataGrid's cells aren't plain
   <td>s with simple content — something inside breaks the usual min-height propagation),
   so this pins the actual row height directly, with !important since the cell's own
   dense-mode padding rule needs to be overridden regardless of its own specificity. 4rem
   comfortably fits a Dense MudSelect (label + input + underline) plus the icon button;
   short rows (plain text, no dropdown) get pulled up to match rather than the tall ones
   getting clipped down. */
.mud-table-row {
    height: 4rem !important;
}

.mud-table-cell {
    min-height: 4rem !important;
    box-sizing: border-box;
}


/* MudIconButton's default hover state fills its own (large, Size.Medium) circular hit area
   with a solid background — applied to the Delete/Remove icon buttons in Facilities/Roles,
   this reads as an off-center "halo" because the button's own box is bigger than the icon
   glyph centered inside it. Suppressed outright rather than tuning its position — the
   touch-target SIZE stays (Size.Medium's padding, from the previous fix), just without the
   hover fill. */
.rk-icon-btn-plain:hover {
    background-color: transparent;
}

/* Shared toolbar layout sitting above every MudDataGrid in the console — one consistent
   arrangement everywhere a grid appears: filter-row toggle, then quick filters, then
   (where relevant) a search box, all on the left; "Add X" on the right. Global (not
   per-page scoped) so every grid page's toolbar looks and behaves identically. */
/* MudTabs' header (.mud-tabs-tabbar) defaults to a solid Surface/white background — reads
   as a disconnected white slab against this page's zinc-100 canvas. Made transparent so it
   sits flush on the canvas instead; Border="true" (set on the MudTabs element itself)
   already draws the separating line under the header, and MudBlazor's own active-tab
   slider (Primary/near-black) reads clearly against that lighter border regardless. Top
   padding on the panels matches .rk-grid-toolbar's own margin-bottom below, so the gap
   above the toolbar row and the gap below it are the same size. */
.rk-tabs-header {
    background: transparent;
}

.rk-tabs-panels {
    padding-top: 1rem;
}

.rk-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rk-grid-toolbar__left {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.rk-grid-toolbar__filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--mud-palette-text-secondary, #71717A);
    cursor: pointer;
}

.rk-grid-toolbar__filter-toggle:hover {
    background: rgba(0, 0, 0, .04);
}

.rk-grid-toolbar__filter-toggle--active {
    background: var(--mud-palette-primary, #18181B);
    border-color: var(--mud-palette-primary, #18181B);
    color: #FFFFFF;
}

.rk-grid-toolbar__filter-toggle--active:hover {
    filter: brightness(1.15);
}

.rk-grid-toolbar__quick-filters {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* Sits directly after the quick filters, still in the toolbar's left-hand group (Members/
   Roles grids only — Facilities' court list is small enough that quick filters alone cover it). */
.rk-grid-toolbar__search {
    width: 220px;
    flex-shrink: 0;
}