html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

/* Every content link looks and behaves the same wherever it sits (grid, card, list, page text): the
   app runs in dark mode, where the default link blue (#006bb7) is hard to read, so use a lighter blue
   that brightens on hover. Buttons and the nav/menu components keep their own styling, and the
   greyed-out inactive grid rows (below) and .text-muted links deliberately override this.
   (:where() keeps this at the lowest specificity so those overrides still win.) */
a:where(:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item-action)) {
    color: #5b9af0;
}

a:where(:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item-action)):hover {
    color: aqua;
}

/* Light theme: the pale blue and aqua above wash out on a light background, so use a deeper blue that
   turns a dark amber on hover (and a darker grey for links in inactive grid rows). */
[data-bs-theme="light"] a:where(:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item-action)) {
    color: #0a58ca;
}

[data-bs-theme="light"] a:where(:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item-action)):hover,
[data-bs-theme="light"] .admin-table tbody tr.inactive a:hover {
    color: #b45309;
}

[data-bs-theme="light"] .admin-table tbody tr.inactive a {
    color: #6c757d;
}

.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;
}

/* Admin Table Styles */
.admin-table tbody tr.inactive {
    color: #6c757d;
}

.admin-table tbody tr.inactive td {
    color: #6c757d;
}

.admin-table tbody tr.inactive a {
    color: #9da0a8;
}

.admin-table tbody tr.active {
    color: inherit;
}

/* Hovered row: a clear blue highlight, stronger than either of the striped row colours. Set through
   Bootstrap's own row-state variable so it paints over the stripes (a plain row background doesn't,
   as the cells draw on top of it). */
.admin-table > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(91, 154, 240, 0.28);
}

/* Status Badge Styling */
.badge {
    font-weight: 500;
    padding: 0.35rem 0.65rem;
}

.badge.bg-success {
    background-color: #198754 !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
}

.badge.bg-info {
    background-color: #0dcaf0 !important;
}

.table td {
  padding: 0.333em;
}
a:hover, .admin-table tbody tr.inactive a:hover {
  color: aqua;
}

/* Sortable table header styles */
.sortable-header {
  cursor: pointer;
  user-select: none;
}
.sortable-header:hover {
  text-decoration: underline;
}

.Disabled {
  text-decoration: line-through;
  color:grey !important;
}

.toast {
  transition: opacity 0.2s ease;
}
.toast:hover {
  opacity: 0.85;
}
/* Auto-hide side menu (wide screens only - small screens already use the hamburger menu).
   NavMenu.razor sets the sailmark.sidebarAutoHide preference and toggles this class on <html>.
   Only the menu links hide: the SailMark title and its buttons stay put in the top-left, in line with the
   page's title bar, and hovering them (or the gradient strip down the left edge of the window) drops the
   links down over the page. app.js adds .sidebar-dismissed to <html> when a link is picked so the menu closes
   again like a normal menu, until the mouse leaves and returns. */
@media (min-width: 641px) {
    html.sidebar-autohide .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
    }

    html.sidebar-autohide .sidebar .nav-scrollable {
        /* !important: the hamburger checkbox (NavMenu.razor.css) is toggled by every menu click and would otherwise force the links open on wide screens. */
        display: none !important;
        max-height: calc(100vh - 3.5rem);
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: none; /* still scrolls on a short window, just no visible bar */
    }

    html.sidebar-autohide .sidebar .nav-scrollable::-webkit-scrollbar {
        display: none;
    }

    /* Open while hovered, or while keyboard focus is inside (mouse clicks don't count, so it still closes). */
    html.sidebar-autohide:not(.sidebar-dismissed) .sidebar:is(:hover, :has(:focus-visible)) {
        bottom: 0;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.6);
    }

    html.sidebar-autohide:not(.sidebar-dismissed) .sidebar:is(:hover, :has(:focus-visible)) .nav-scrollable {
        display: block !important;
    }

    /* The hover target down the left edge (below the title bar): an invisible 1rem strip (::after). */
    html.sidebar-autohide .sidebar::after {
        content: "";
        position: fixed;
        top: 3.5rem;
        bottom: 0;
        left: 0;
        width: 1rem;
    }

    /* The gradient that hints at it (::before) - white in the dark theme, black in the light one. It reaches
       further out than the hover target, and grows and fades in as the mouse nears the edge (app.js sets
       --edge-near on <html>: 0 far .. 1 at the edge), so it's discoverable without being on screen all the time. */
    html.sidebar-autohide .sidebar::before {
        content: "";
        position: fixed;
        top: 3.5rem;
        bottom: 0;
        left: 0;
        width: 2rem;
        pointer-events: none;
        opacity: var(--edge-near, 0);
        background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) no-repeat left / calc(var(--edge-near, 0) * 100%) 100%;
    }

    html.sidebar-autohide[data-bs-theme="light"] .sidebar::before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) no-repeat left / calc(var(--edge-near, 0) * 100%) 100%;
    }

    html.sidebar-autohide:not(.sidebar-dismissed) .sidebar:is(:hover, :has(:focus-visible))::before {
        opacity: 0;
    }

    /* The sidebar title no longer takes a column, so the page's title bar starts after it instead. */
    html.sidebar-autohide main .top-row {
        padding-left: calc(17.1rem + 2rem) !important; /* sidebar width from MainLayout.razor.css + usual padding */
    }
}

@media (min-width: 641px) {
    /* The sidebar's title row sits over the page's title bar, so it needs the bar's bottom line too. */
    html.sidebar-autohide .sidebar .top-row {
        border-bottom: 1px solid #d6d5d5;
        height: 3.5rem; /* same as the page title bar, so the two lines meet */
        min-height: 0;
    }
}

/* The pin button shows the "pinned" icon normally and the "auto-hides" one while auto-hide is on. */
html .sidebar-mode-button .icon-autohide,
html.sidebar-autohide .sidebar-mode-button .icon-pinned {
    display: none !important;
}

html.sidebar-autohide .sidebar-mode-button .icon-autohide {
    display: inline-block !important;
}