/* 15px rather than the browser's 16px default. Nearly everything in this application is
   sized in rem, so moving the root moves the whole interface together — type, padding and
   control heights stay in proportion instead of the text shrinking inside boxes that did not.

   Set on html, not body, because rem resolves against the root element. */
html {
    font-size: 15px;
}

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



.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;
}
/* ------------------------------------------------------------------ *
 * Responsive sidebar.
 *
 * These live here rather than in a scoped stylesheet because the toggle
 * checkbox is in AppLayout and the sidebar is in NavMenu — a scoped sheet
 * only matches its own component's elements, so a sibling selector across
 * the two cannot work from either side.
 * ------------------------------------------------------------------ */

@media (max-width: 960px) {
    .easybook-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }

    .sidebar-toggle-state:checked ~ .easybook-sidebar {
        transform: translateX(0);
    }

    .sidebar-close {
        display: block !important;
    }
}

/* Consistent table presentation across every list screen. */
.table-scroll {
    overflow-x: auto;
}

.table > :not(caption) > * > * {
    padding: 0.55rem 0.75rem;
}

.table thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.badge {
    font-weight: 500;
}

/* Buttons sitting together in a table row should not run into each other. */
td .btn + .btn,
td .btn + form,
td form + .btn {
    margin-left: 0.25rem;
}


/* Blazor's circuit error banner.
   It is rendered into the layout on every page and shown by the framework setting an inline
   display when a circuit fails — so without this rule it is simply always visible, and every
   page reads "An unhandled error has occurred" whether or not anything went wrong. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: #fef3c7;
    border-top: 1px solid #fde68a;
    color: #92400e;
    font-size: 0.875rem;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
}

#blazor-error-ui .reload {
    color: #92400e;
    font-weight: 600;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 1rem;
    top: 0.65rem;
    cursor: pointer;
}

/* ---- Form controls -------------------------------------------------------------------- */

/* One shape for everything you type into or pick from: a soft blue-grey hairline, a generous
   radius and navy text. Bootstrap's defaults are a tighter, greyer box; these are set here
   rather than per page so a field looks the same wherever it appears. */
.form-control,
.form-select,
.input-group-text {
    border: 1.5px solid #dbe3ec;
    border-radius: 12px;
    background-color: #fff;
    color: #12314f;
    padding: 0.68rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.form-control::placeholder { color: #94a3b8; }

/* The chosen option is the answer to the question the label asked, so it carries the weight
   rather than sitting in the same grey as the placeholder beside it. */
.form-select {
    font-weight: 700;
    padding-right: 2.4rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2312314f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px 16px;
}

.form-control:hover,
.form-select:hover { border-color: #c7d4e2; }

/* One ring, replacing the stacked white-then-blue shadow further up this file — two rings on
   one field read as a rendering fault rather than as focus. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus {
    outline: none;
    border-color: #0f8d82;
    box-shadow: 0 0 0 3px rgba(15, 141, 130, 0.15);
}

.form-control:disabled,
.form-select:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
}

.form-control.is-invalid,
.form-select.is-invalid,
.invalid { border-color: #e0756a; }

/* The small variants keep the shape and lose only the room: a filter bar of pill-shaped
   controls next to a square one is the kind of thing that looks broken without being. */
.form-control-sm,
.form-select-sm {
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    border-radius: 10px;
}

.form-select-sm {
    padding-right: 2.1rem;
    background-position: right 0.65rem center;
    background-size: 14px 14px;
}

textarea.form-control { line-height: 1.5; }

.form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}

/* A field with something inside it — a magnifier, a currency mark. The control keeps its own
   border and the mark sits over it, so nothing has to be split into two boxes that have to be
   kept looking like one. */
.field-with-icon {
    position: relative;
    display: block;
}

.field-with-icon > .field-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: #94a3b8;
    pointer-events: none;
}

.field-with-icon > .form-control { padding-left: 2.5rem; }
.field-with-icon > .form-control-sm { padding-left: 2.2rem; }
.field-with-icon > .form-control-sm ~ .field-icon { left: 0.75rem; }