html, body {
    /* Match the legacy Price Manager (Bootstrap 3) font stack — renders Arial on Windows. */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
}

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

.content {
    padding-top: 1.1rem;
}

/* Blazor.Bootstrap ships `main { height: 100vh; overflow-x: hidden }` for its own flex
   layout. In our simple layout that turns <main> into a viewport-height nested scroll
   container (the extra inner scrollbar). Reset it so the page uses one browser scrollbar. */
main {
    height: auto !important;
    overflow: visible !important;
}

/* Loading splash shown from index.html before Blazor starts */
#app > .center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

/* Blazor unhandled-error banner */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ---- Price Manager top navbar (mirrors legacy navbar-default) ---- */
.pm-navbar {
    background-color: #f8f8f8;
    border-bottom: 1px solid #e7e7e7;
}

    .pm-navbar .navbar-brand {
        color: #777777;
        font-weight: normal;
    }

    .pm-navbar .navbar-brand:hover,
    .pm-navbar .navbar-brand:focus {
        color: #5e5e5e;
    }

    .pm-navbar .pm-user {
        color: #555555;
        font-size: 14px;
        font-weight: normal;
    }

    .pm-navbar .nav-link {
        color: #777777;
        font-size: 14px;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .pm-navbar .nav-link:hover,
    .pm-navbar .nav-link:focus {
        color: #333333;
    }

.pm-tag {
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

.pm-new {
    color: #198754;
}

.pm-legacy {
    color: #b02a37;
}

/* ---- Simulate user ("view as", full-access only) ---- */
/* Amber badge so it's obvious the session is viewing as another user. */
.pm-sim-badge {
    font-size: 13px;
    color: #664d03;
    background-color: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 0.25rem;
    padding: 0.15rem 0.5rem;
}

/* Big section headers inside dropdowns (mirror legacy 16px headers) */
.pm-section {
    font-size: 16px;
    font-weight: normal;
    margin-top: 1.25rem;
}

/* Sub-headers (Yield and pricing, Booking, New components, Edit components) are a lighter
   gray than the bigger section headers, matching legacy. */
.pm-navbar .dropdown-header:not(.pm-section) {
    color: #adb5bd;
}

/* Keep each menu item on a single line (matches legacy). The dropdown grows to fit
   its content with no inner scrollbar, exactly like the legacy static-top navbar. */
.pm-navbar .dropdown-item {
    white-space: nowrap;
}

/* Red environment strip at the very top for non-production (mirrors legacy .topEnvrionment) */
.pm-env-strip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 2000;
    background-color: red;
}

/* ---- Landing page watermark (mirrors legacy .startBackground) ---- */
.startBackground {
    z-index: -1;
    background: url(../img/PriceEngine.png) center center;
    background-repeat: no-repeat;
    opacity: 0.2;
    width: 50%;
    height: 620px;
    margin: 0 auto;
}

/* =============================================================
   Pricify-style theme — compact layout + orange (#f68b00) accent
   + loading spinner. Scoped so the .pm-navbar menu above is left
   untouched (its colours/sizes are set explicitly; Bootstrap sizes
   the dropdowns via --bs-dropdown-font-size, not the body font).
   ============================================================= */
:root {
    --bs-primary: #f68b00;
    --bs-primary-rgb: 246, 139, 0;
    --bs-link-color: #f68b00;
    --bs-link-color-rgb: 246, 139, 0;
    --bs-link-hover-color: #c46d00;
    --bs-link-hover-color-rgb: 196, 109, 0;
    --bs-primary-border-subtle: rgba(246, 139, 0, 0.4);
    --bs-body-font-size: 0.8125rem; /* 13px */
    --bs-table-cell-padding-y: 0.15rem;
    --bs-table-cell-padding-x: 0.4rem;
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-padding-x: 0.6rem;
    --bs-btn-font-size: 0.8125rem;
    --bs-accordion-btn-active-color: #3d2800;
    --bs-accordion-active-bg: var(--bs-tertiary-bg);
}

/* Accordion (search bars) — Pricify style: tertiary background + orange border. */
.accordion-button {
    background-color: var(--bs-tertiary-bg) !important;
    border: 1px solid #f68b00 !important;
}

.accordion-button.collapsed {
    border-bottom: 0 !important;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(246, 139, 0, 0.35);
}

.accordion-button:not(.collapsed)::after {
    filter: sepia(1) saturate(6) hue-rotate(-9deg);
}

/* Orange buttons — explicit properties (matches Pricify; more robust than the CSS vars). */
.btn-primary {
    color: #fff;
    background-color: #f68b00;
    border-color: #f68b00;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #c46d00;
    border-color: #b36400;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(246, 139, 0, 0.35);
}

/* Keep disabled primary buttons orange too — Bootstrap's .btn:disabled otherwise
   falls back to the default blue via --bs-btn-disabled-bg. */
.btn-primary:disabled,
.btn-primary.disabled {
    color: #fff;
    background-color: #f68b00;
    border-color: #f68b00;
    opacity: 0.65;
}

.btn-outline-primary {
    color: #f68b00;
    border-color: #f68b00;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: #f68b00;
    border-color: #f68b00;
    color: #fff;
}

/* Compact form controls (matches Pricify) */
.form-control,
.form-select {
    font-size: 0.8125rem;
}

select.form-select {
    height: 32px;
}

/* Dirty-row highlight (Bootstrap .table-warning already resolves to #fff3cd) */

/* Centered loading spinner */
.fixed-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

/* Compact table headers (matches Pricify). The menu has no <th>, so it's unaffected. */
th {
    font-weight: 400;
    white-space: nowrap;
    background-color: var(--bs-tertiary-bg) !important;
}

/* Small-styling input touches from Pricify */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-check-input:disabled {
    background-color: lightgray;
}

/* Pagination — Pricify style: orange links/active, orange focus ring, compact.
   Bootstrap hardcodes its pagination colors (not --bs-primary), so set them explicitly. */
.page-link {
    color: #f68b00;
    padding: 0.2rem 0.55rem;
    font-size: 0.8125rem;
}

.page-link:hover {
    color: #c46d00;
}

.page-item.active .page-link {
    background-color: #f68b00;
    border-color: #f68b00;
    color: #fff;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(246, 139, 0, 0.25);
}

/* Detail-page tabs — active tab emphasized in orange, inactive tabs grey with a subtle border. */
.nav-tabs .nav-link {
    color: #8a8f94;
    border-color: #dee2e6;
}

.nav-tabs .nav-link:hover {
    color: #c46d00;
}

.nav-tabs .nav-link.active {
    color: #f68b00;
    font-weight: 600;
    border-top: 2px solid #f68b00;
}

/* ── Compact "minor" look for page content (matches Pricify). Scoped to .content
      (the page body wrapper in MainLayout) so the nav menu is left untouched. ── */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content .h1, .content .h2, .content .h3, .content .h4, .content .h5, .content .h6 {
    margin-bottom: 0.3rem;
    line-height: 1.3;
    font-weight: 500;
    color: #444;
}

.content h1, .content .h1 { font-size: 1.5rem; }
.content h2, .content .h2 { font-size: 1.3rem; }
.content h3, .content .h3 { font-size: 1.15rem; }
.content h4, .content .h4 { font-size: 1.05rem; }
.content h5, .content .h5 { font-size: 0.95rem; }
.content h6, .content .h6 { font-size: 0.875rem; }

/* Flat, compact accordions (page content only). */
.content .accordion {
    --bs-accordion-border-width: 0;
}

.content .accordion,
.content .accordion-item,
.content .accordion-button,
.content .accordion-button:not(.collapsed) {
    border-radius: 0 !important;
}

.content .accordion-button {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500;
    color: #555;
}

.content .accordion-body {
    padding: 0.5rem 0.75rem;
}

/* Compact buttons (page content only — the nav menu keeps its own sizing). */
.content .btn {
    padding: 0.15rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.content .btn-sm {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

.content .btn-lg {
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Log in/out button in the nav bar — compact to match the page buttons. */
.pm-navbar .btn {
    padding: 0.15rem 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}