html, body {
    font-family: '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;
}

/* ---------- HT-LMS responsive visibility helpers ---------- */
/* Custom classes for the dual-block "mobile vs desktop" pattern.
   Why custom?
     Bootstrap's `.d-none .d-md-block` mostly works, but MudBlazor's CSS
     loads AFTER Bootstrap and includes a base `.d-none { display:none
     !important }` rule that wins via source order between 768 and 959px
     — Bootstrap's `.d-md-block` (>=768) and MudBlazor's `.d-md-block`
     (>=960) both with !important, MudBlazor loaded later → MudBlazor's
     `.d-none` wins → element is hidden at every viewport width.
   The classes below are scoped to HT-LMS, use a single 960px threshold
   (same as the responsive drawer), and have unambiguous specificity. */

.ht-d-mobile  { display: block !important; }   /* shown < 960px */
.ht-d-desktop { display: none  !important; }   /* shown >= 960px */

@media (min-width: 960px) {
    .ht-d-mobile  { display: none  !important; }
    .ht-d-desktop { display: block !important; }
}

/* ---------- Mobile bottom navigation bar ---------- */
/* Phone-only fixed bottom bar with tap shortcuts. Visibility is baked
   into .ht-bottom-nav itself so we don't depend on utility-class cascade
   order. Bottom padding on the main content (below) keeps the last row
   from hiding behind the bar. */

.ht-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    z-index: 1300;       /* above MudDrawer scrim (1100) and MudAppBar (1100) */
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);

    /* Respect iOS safe area so the bar isn't covered by the home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: content-box;
}

/* The bottom-nav slots are a mix of <a> (anchors) and <button> (More).
   Reset button's defaults so the two look identical. */
.ht-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.65);
    font-size: 11px;
    line-height: 1.1;
    gap: 2px;
    padding: 6px 4px;
    min-height: 44px; /* touch target */
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;  /* iOS Safari button style reset */
}

.ht-bottom-nav-item:hover,
.ht-bottom-nav-item:focus,
.ht-bottom-nav-item:active {
    color: #1E6BE0;
    background: rgba(30, 107, 224, 0.06);
    text-decoration: none;
}

.ht-bottom-nav-item .mud-icon-root,
.ht-bottom-nav-item .ht-bottom-nav-svg {
    width: 22px;
    height: 22px;
    font-size: 22px;
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .ht-bottom-nav { display: none; }
}

/* Below md, push the bottom of the content above the fixed bar so the
   last row isn't hidden. (At >=md the bar is gone and no padding needed.) */
@media (max-width: 959.95px) {
    .ht-mobile-content {
        padding-bottom: 80px !important;
    }
}

/* ---------- Mobile "More" menu (native <dialog>) ---------- */
/* Slides in from the right; tap the scrim, the X, ESC, or any link to
   close. Uses showModal()/close() — works in static layouts because the
   button uses inline `onclick=` rather than Blazor's @onclick. */

.ht-mobile-menu {
    /* When closed: dialog is display:none by browser default. When
       opened via showModal(), it becomes display:block AND a top-layer
       element above everything else on the page. */
    border: none;
    padding: 0;
    margin: 0;                   /* override centred default */
    width: min(85vw, 340px);
    max-width: 340px;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    background: #ffffff;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    inset: 0 0 0 auto;           /* dock to right edge */
}

.ht-mobile-menu::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.ht-mobile-menu-header {
    display: flex;
    align-items: center;
    padding: 10px 12px 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    background: #ffffff;
}

.ht-mobile-menu-logo {
    flex-grow: 1;
    height: 30px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.ht-mobile-menu-close {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.65);
    padding: 4px 8px;
    min-width: 44px;
    min-height: 44px;
}

.ht-mobile-menu-user {
    padding: 12px 16px;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.65);
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    line-height: 1.4;
}

.ht-mobile-menu-list {
    padding: 4px 0;
}

.ht-mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.85);
    font-size: 15px;
    font-family: inherit;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    min-height: 48px;            /* touch target */
}

.ht-mobile-menu-link:hover,
.ht-mobile-menu-link:focus,
.ht-mobile-menu-link:active {
    background: rgba(30, 107, 224, 0.08);
    color: #1E6BE0;
    text-decoration: none;
}

.ht-mobile-menu-link .mud-icon-root {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.ht-mobile-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 6px 0;
}

.ht-mobile-menu-section-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 500;
}

.ht-mobile-menu-logout {
    margin: 0;
}

/* ---------- MudDatePicker dialog width ---------- */
/* MudBlazor copies the Style attribute from MudDatePicker straight onto the
   .mud-picker element, which is also the dialog panel. A narrow input style
   (e.g. width:145px) therefore clips the calendar grid to that width.
   Override it here so the dialog is always at least as wide as the calendar. */
.mud-picker.mud-dialog {
    min-width: 310px !important;
    width: auto !important;
}

/* ---------- HT-OPS branding ---------- */

/* App bar logo link — no underline, no focus outline interfering with logo */
.ht-ops-appbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-left: 4px;
}

.ht-ops-appbar-logo img {
    height: 34px;           /* fits cleanly inside the 64px MudAppBar */
    max-width: 180px;
    object-fit: contain;
    display: block;
}

/* Signed-in username in the app bar — slightly muted */
.ht-ops-appbar-username {
    color: rgba(0, 0, 0, 0.60) !important;
    font-size: 0.8125rem;
}

/* User pill in the AppBar — groups the email, account-link avatar and
   sign-out button into one tidy rounded container. Replaces the old
   loose three-control layout that caused "LOGOUT" to wrap onto its
   own line on narrower screens. */
.ht-user-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 12px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    transition: background 0.15s, border-color 0.15s;
}
.ht-user-pill:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.10);
}
.ht-user-email {
    font-size: 0.82rem;
    color: rgba(0, 0, 0, 0.65);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1;
    padding-right: 4px;
}
.ht-user-pill-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 6px !important;
}
.ht-user-pill-btn .mud-icon-root {
    font-size: 1.15rem !important;
}
/* On phones the email collapses (via .ht-d-desktop / ht-d-mobile) so the
   pill becomes just two icons — tighten the inner padding. */
@media (max-width: 959px) {
    .ht-user-pill { padding-left: 4px; }
}

/* Sidebar branded header shown at the top of the desktop drawer.
   Hidden on mobile (the app bar logo covers it on small screens). */
.ht-ops-sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #ffffff;
}

.ht-ops-sidebar-logo {
    height: 38px;
    max-width: 160px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.ht-ops-sidebar-tagline {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(0, 0, 0, 0.40);
    font-weight: 500;
    margin-top: 4px;
    padding-left: 1px;
}

/* On mobile the sidebar header is redundant (logo is in the app bar).
   Hide it below 960px to keep the mobile drawer clean. */
@media (max-width: 959.95px) {
    .ht-ops-sidebar-header { display: none; }
}