/* Lotus Organics control panel - the few rules Bootstrap does not cover. */
.text-prewrap { white-space: pre-wrap; }

:root {
    --panel-header-h: 57px;
    --panel-radius: .5rem;
    --panel-sidebar-w: 16rem;
    --panel-sidebar-bg: #f9fafb;
    /* Brand gold of the Lotus logo: accents only (sign-in page, logo); buttons and links keep Bootstrap's blue. */
    --panel-gold: #c39a3f;
    --panel-gold-light: #e3c77a;
    --panel-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    /* Height above and below a list's table on wide screens (title bar, search, pager): the table box gets the rest. */
    --panel-list-offset: 17rem;
}

/* ---- Page frame -------------------------------------------------------------------------------------------------
   The main column never grows wider than the window: min-width 0 lets the flex item shrink below its content (a wide
   table), which then scrolls inside .panel-list-scroll instead of pushing the title bar and buttons off the page. */
.panel-main { min-width: 0; }

/* Sidebar: its own scroll box, sticky under the top bar on wide screens; Bootstrap's off-canvas drawer below 992px. */
.panel-sidebar {
    --bs-offcanvas-width: 18rem;
    background: var(--panel-sidebar-bg);
    border-right: 1px solid var(--bs-border-color);
}
.panel-sidebar .panel-sidebar-body { padding: 0 .5rem 1.5rem; }
@media (min-width: 992px) {
    .panel-sidebar {
        flex: 0 0 var(--panel-sidebar-w);
        width: var(--panel-sidebar-w);
        max-width: var(--panel-sidebar-w);
        min-height: calc(100vh - var(--panel-header-h));
        position: sticky;
        top: var(--panel-header-h);
        align-self: flex-start;
        max-height: calc(100vh - var(--panel-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--bs-border-color) transparent;
    }
    .panel-sidebar .panel-sidebar-body { padding: 0 .625rem 1.5rem; }
}
.panel-offcanvas-header { border-bottom: 1px solid var(--bs-border-color); padding: .75rem 1rem; }

.panel-main h1.h3 { font-weight: 600; letter-spacing: -.01em; }
.panel-main .breadcrumb { font-size: .875rem; }
.panel-icon { vertical-align: -.125em; flex-shrink: 0; }

/* Title bar of every page: title (and breadcrumb) on the left, the page's buttons on the right. */
.panel-page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}
.panel-page-title { min-width: 0; }
.panel-page-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.details-list dd { margin-bottom: .5rem; }

.panel-narrow { max-width: 24rem; }
.panel-narrow-md { max-width: 28rem; }
.panel-narrow-lg { max-width: 32rem; }
.table td { max-width: 28rem; }

/* Images (Photo and WebMedia templates): a fixed box, never the image's own size, so no image can stretch a row.
   panel-thumb = lists (64 x 64), panel-thumb-lg = details and edit previews (at most 160 x 160). Classes, not style="":
   the CSP allows style-src 'self' only (ADM-3). A broken image keeps its box; its alt text stays inside it. */
.panel-thumb,
.table .ft-photo-thumb-sm {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
}
.panel-thumb,
.panel-thumb-lg {
    object-fit: contain;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    font-size: .7rem;
    line-height: 1.1;
    color: var(--bs-secondary-color);
    vertical-align: middle;
}
.panel-thumb-lg { max-width: 160px; max-height: 160px; }
/* Safety net for any other image in a table cell. */
.table img { max-width: 96px; max-height: 96px; object-fit: contain; }
.panel-cell-media { width: 80px; }
.panel-cell-media a { display: inline-flex; max-width: 18rem; }
/* Long texts wrap, but never into a one-word-wide column. */
.panel-cell-text { min-width: 11rem; }
/* panel.js: the image could not be loaded from either address. */
img.img-missing { object-fit: contain; }

/* ---- Lists: search and filters ------------------------------------------------------------------------------- */
.panel-toolbar { margin-bottom: .75rem; }
.panel-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.panel-search { flex: 1 1 18rem; max-width: 38rem; }
.panel-search .input-group-text { background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.panel-search .form-control { border-left: 0; }
.panel-filter-toggle { display: inline-flex; align-items: center; gap: .375rem; }
.panel-filter-toggle[aria-expanded="true"] { background: var(--bs-secondary-bg); }
.panel-reset { padding-left: .25rem; padding-right: .25rem; }

.panel-filter-panel {
    margin-top: .75rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--panel-radius);
    background: var(--bs-tertiary-bg);
}
.panel-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: .75rem 1rem;
    align-items: start;
}
.panel-filter { min-width: 0; }
/* A list with one or two filters and no search box: the filters and Apply/Reset on one line. */
.panel-filter-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.panel-filter-inline .panel-filter { flex: 0 1 16rem; }
.panel-filter .form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .25rem; color: var(--bs-secondary-color); }
.panel-filter.is-active .form-label { color: var(--bs-primary-text-emphasis); }
.panel-filter.is-active .form-select { border-color: var(--bs-primary-border-subtle); background-color: var(--bs-primary-bg-subtle); }
.panel-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color);
}

.panel-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-bottom: .75rem; }
.panel-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .25rem .125rem .625rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 999px;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .8125rem;
}
.panel-chip strong { font-weight: 600; }
.panel-chip-remove { display: inline-flex; padding: .125rem; border-radius: 50%; color: inherit; }
.panel-chip-remove:hover { background: rgba(var(--bs-primary-rgb), .15); color: inherit; }

/* ---- Lists: the table box ------------------------------------------------------------------------------------
   Sideways scrolling stays inside the box; the header row (and, on wide tables, the actions column) stay visible. */
.panel-list-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--panel-radius);
    background: var(--bs-body-bg);
    overflow: hidden;
}
.panel-list-scroll { max-width: 100%; overflow: auto; }
@media (min-width: 992px) {
    .panel-list-scroll { max-height: max(18rem, calc(100vh - var(--panel-list-offset))); }
}
.panel-list-table {
    margin-bottom: 0;
    font-size: .875rem;
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), .022);
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .055);
}
.panel-list-table > :not(caption) > * > * { padding: .5rem .75rem; border-bottom-color: var(--bs-border-color-translucent); }
.panel-list-table > tbody > tr:last-child > * { border-bottom-width: 0; }
.panel-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    font-weight: 600;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}
.panel-list-table .panel-sort { color: inherit; text-decoration: none; }
.panel-list-table .panel-sort:hover,
.panel-list-table .panel-sort.is-sorted { color: var(--bs-emphasis-color); }
/* Actions column: pinned to the left edge while the rest scrolls sideways (cells keep their row's background). */
.panel-list-table .panel-col-actions {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 1%;
    background-image: linear-gradient(to left, var(--bs-border-color-translucent) 1px, transparent 1px);
}
.panel-list-table thead .panel-col-actions { z-index: 3; background-image: linear-gradient(to left, var(--bs-border-color) 1px, transparent 1px); }

.panel-list-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem 1rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.panel-empty { padding: 2.5rem 1rem !important; color: var(--bs-secondary-color); }
.panel-empty-inner { position: sticky; left: 1rem; display: inline-block; max-width: calc(100vw - 4rem); }
.panel-empty-title { display: block; font-weight: 500; color: var(--bs-body-color); }

/* Row actions: one compact icon group (Details / Edit / Delete); Delete stays grey until hovered. */
.panel-row-actions {
    display: inline-flex;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    vertical-align: middle;
}
.panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
}
.panel-action + .panel-action { border-left: 1px solid var(--bs-border-color); }
.panel-action:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
.panel-action-primary { color: var(--bs-primary); }
.panel-action-primary:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.panel-action-danger:hover { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Values that link to another record read as plain text, underlined on hover (not a sea of blue links). */
.panel-ref,
.panel-list-table td a:not([class]),
.panel-details dd a:not([class]) {
    color: inherit;
    text-decoration: none;
}
.panel-ref:hover,
.panel-list-table td a:not([class]):hover,
.panel-details dd a:not([class]):hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
    text-underline-offset: .15em;
}
.panel-list-table td.panel-empty a { color: var(--bs-link-color); text-decoration: underline; }
.panel-details dd .panel-ref,
.panel-details dd a:not([class]) { text-decoration: underline dotted var(--bs-border-color); text-underline-offset: .2em; }

/* "View Product sizes (3)": a small neutral pill. Many-to-many values: small neutral tags. */
.panel-count-link,
.panel-count-text {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    font-size: .8125rem;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
.panel-count-link:hover { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.panel-tags { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.panel-tag {
    display: inline-block;
    padding: .0625rem .45rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-size: .75rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
a.panel-tag:hover { border-color: var(--bs-primary-border-subtle); background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }

/* Other tables in the panel (custom lists, sections): the same calm stripes. */
.panel-main .table { --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), .022); }

/* ---- Forms and details: titled cards, two columns of short fields on wide screens ----------------------------- */
.panel-form { max-width: 76rem; }
.panel-card { border-color: var(--bs-border-color); border-radius: var(--panel-radius); }
.panel-card > .card-header,
.panel-form > .card > .card-header,
.edit-form > .card > .card-header { background: var(--bs-tertiary-bg); padding: .625rem 1rem; }
.panel-form > .card,
.edit-form > .card { border-radius: var(--panel-radius); }
.panel-card > .card-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.panel-card > .card-body { padding: 1rem 1.25rem 1.25rem; }
.panel-field > .form-label,
.panel-field > .panel-field-label { font-weight: 500; margin-bottom: .25rem; }
.panel-field .form-control-plaintext { padding-top: 0; }
/* Yes/no fields: the checkbox, then its label on the same line; hint and errors below both. */
.panel-field-check { display: grid; grid-template-columns: auto 1fr; column-gap: .5rem; align-items: center; align-content: start; }
.panel-field-check > * { grid-column: 1 / -1; }
.panel-field-check > .form-check { grid-column: 1; grid-row: 1; margin: 0 !important; min-height: 0; }
.panel-field-check > .form-check .form-check-input { margin-top: 0; }
.panel-field-check > .form-label { grid-column: 2; grid-row: 1; margin: 0; cursor: pointer; }
.panel-field .form-text { font-size: .8125rem; }
.panel-details { margin-bottom: 0; }
.panel-empty-value { color: var(--bs-tertiary-color); }
.panel-details dt { font-size: .8125rem; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .125rem; }
.panel-details dd { margin-bottom: 0; overflow-wrap: anywhere; }

/* Save / Cancel stay at the bottom of the window while the form is long. */
.panel-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    background: rgba(var(--bs-body-bg-rgb), .96);
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .05);
}
.panel-form-actions .btn { min-width: 6.5rem; }

/* Accessibility: a visible keyboard focus on links and small buttons (sidebar, list actions, pagination). */
.panel-menu-link:focus-visible,
.panel-menu-toggle:focus-visible,
.panel-brand:focus-visible,
.table a:focus-visible,
.btn-sm:focus-visible,
.alert-link:focus-visible,
.panel-action:focus-visible,
.panel-chip-remove:focus-visible,
.panel-count-link:focus-visible,
.panel-tag:focus-visible,
.panel-ref:focus-visible,
.panel-list-scroll:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    box-shadow: none;
}
.panel-action:focus-visible { outline-offset: -2px; }
.panel-list-scroll:focus-visible { outline-offset: -2px; }
.panel-menu-link:focus-visible,
.panel-menu-toggle:focus-visible { outline-offset: -2px; }

/* ---- Top bar ------------------------------------------------------------------------------------------------------
   On wide screens the brand block is as wide as the sidebar, so the logo caps the menu column. */
.panel-topbar {
    height: var(--panel-header-h);
    padding: 0;
    flex-wrap: nowrap;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: var(--panel-shadow-sm);
}
.panel-topbar-brand { display: flex; align-items: center; gap: .625rem; min-width: 0; height: 100%; padding: 0 1rem; }
.panel-topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; padding: 0 1rem; min-width: 0; }
@media (min-width: 992px) {
    .panel-topbar-brand {
        flex: 0 0 var(--panel-sidebar-w);
        width: var(--panel-sidebar-w);
        background: var(--panel-sidebar-bg);
        border-right: 1px solid var(--bs-border-color);
    }
}
.panel-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: .375rem;
    color: var(--bs-emphasis-color);
    text-decoration: none;
}
.panel-brand:hover { color: var(--bs-emphasis-color); }
.panel-brand-mark { width: 40px; height: 22px; flex-shrink: 0; }
.panel-brand-text { font-size: 1rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; white-space: nowrap; }
.panel-brand-sub {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--panel-gold);
}
.panel-menu-button,
.panel-topbar-btn { display: inline-flex; align-items: center; gap: .375rem; }
.panel-user-button {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 18rem;
    padding: .25rem .625rem .25rem .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}
.panel-user-button:hover,
.panel-user-button[aria-expanded="true"] { background: var(--bs-tertiary-bg); border-color: var(--bs-secondary-border-subtle); color: var(--bs-emphasis-color); }
.panel-user-button > .panel-icon { width: 1.375rem; height: 1.375rem; color: var(--bs-primary); }
.panel-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-user-menu { min-width: 15rem; padding: .375rem; border-radius: var(--panel-radius); box-shadow: 0 .5rem 1.5rem rgba(16, 24, 40, .12); }
.panel-user-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; border-radius: .375rem; padding: .4375rem .625rem; }
.panel-user-menu .dropdown-item > .panel-icon { color: var(--bs-secondary-color); }
.panel-user-menu .dropdown-item-text { padding: .375rem .625rem; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .panel-hide-narrow { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
    .panel-user-name { max-width: 7rem; }
}
@media (max-width: 575.98px) {
    .panel-brand-text { display: none; }
    .panel-topbar-brand, .panel-topbar-actions { padding: 0 .75rem; }
}

/* ---- Sidebar menu ---------------------------------------------------------------------------------------------------
   Groups (icon + title + chevron) and top-level entries (icon + label) share one row style; a group's entries hang
   from a thin guide line. Groups are <details open>: collapsible, expanded by default. */
.panel-menu-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    margin: 0 -.125rem;
    padding: .75rem .125rem .625rem;
    background: var(--panel-sidebar-bg);
    box-shadow: 0 1px 0 var(--bs-border-color-translucent);
}
.panel-menu-search + .panel-menu-empty + .panel-menu { margin-top: .5rem; }
.panel-menu-search > .panel-icon { position: absolute; left: .75rem; color: var(--bs-secondary-color); pointer-events: none; }
.panel-menu-search .form-control {
    padding: .375rem 2rem .375rem 2.125rem;
    border-radius: .5rem;
    font-size: .875rem;
    background-color: var(--bs-body-bg);
}
.panel-menu-search .form-control::-webkit-search-cancel-button { cursor: pointer; }
.panel-menu-kbd {
    position: absolute;
    right: .625rem;
    padding: .0625rem .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
    background: var(--bs-tertiary-bg);
    box-shadow: none;
    color: var(--bs-secondary-color);
    font-size: .6875rem;
    line-height: 1.3;
    pointer-events: none;
}
.panel-menu-search .form-control:not(:placeholder-shown) ~ .panel-menu-kbd,
.panel-menu-search .form-control:focus ~ .panel-menu-kbd { display: none; }
@media (max-width: 991.98px) { .panel-menu-kbd { display: none; } }
.panel-menu-empty { margin: 1rem 0; color: var(--bs-secondary-color); font-size: .875rem; text-align: center; }

.panel-menu,
.panel-menu-items { list-style: none; margin: 0; padding: 0; }
.panel-menu-entry + .panel-menu-entry { margin-top: .125rem; }
.panel-menu-group { margin: 0; }
.panel-menu-group[open] { margin-bottom: .375rem; }

.panel-menu-link,
.panel-menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.125rem;
    padding: .375rem .625rem;
    border-radius: .5rem;
    color: var(--bs-body-color);
    font-size: .875rem;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.panel-menu-link > .panel-icon,
.panel-menu-toggle > .panel-icon { color: var(--bs-secondary-color); transition: color .12s ease; }
.panel-menu-top,
.panel-menu-toggle { font-weight: 500; }
.panel-menu-toggle { cursor: pointer; list-style: none; user-select: none; }
.panel-menu-toggle::-webkit-details-marker { display: none; }
.panel-menu-toggle::marker { content: ""; }
.panel-menu-group-title { flex: 1 1 auto; min-width: 0; }
.panel-menu-chevron { display: inline-flex; color: var(--bs-tertiary-color); }
.panel-menu.is-ready .panel-menu-chevron { transition: transform .15s ease; } /* not while panel.js restores the groups */
.panel-menu-chevron .panel-icon { width: 12px; height: 12px; }
.panel-menu-group:not([open]) .panel-menu-chevron { transform: rotate(-90deg); }

.panel-menu-link:hover,
.panel-menu-toggle:hover { background: rgba(var(--bs-emphasis-color-rgb), .055); color: var(--bs-emphasis-color); }
.panel-menu-link:hover > .panel-icon,
.panel-menu-toggle:hover > .panel-icon { color: var(--bs-emphasis-color); }

/* A group's entries: indented under the group's icon, with a guide line. */
.panel-menu-items { position: relative; margin-top: .125rem; padding-left: 1.75rem; }
.panel-menu-items::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: calc(1.125rem - .5px);
    width: 1px;
    background: var(--bs-border-color);
}
.panel-menu-items > li + li { margin-top: 1px; }
.panel-menu-sub { min-height: 1.875rem; padding: .3125rem .625rem; color: #495057; }

/* The current page: tinted row, bold label, blue icon; a sub-entry also marks the guide line. */
.panel-menu-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; }
.panel-menu-link.active > .panel-icon { color: var(--bs-primary); }
.panel-menu-sub.active::before {
    content: "";
    position: absolute;
    top: .375rem;
    bottom: .375rem;
    left: calc(-.625rem - 1.5px);
    width: 3px;
    border-radius: 3px;
    background: var(--bs-primary);
}
.panel-menu-group.is-active > .panel-menu-toggle { color: var(--bs-emphasis-color); font-weight: 600; }
.panel-menu-group.is-active > .panel-menu-toggle > .panel-icon { color: var(--bs-primary); }
.panel-menu-link.is-soon { opacity: .6; cursor: default; }
.panel-menu-note {
    margin-left: auto;
    padding: 0 .375rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .625rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}
.panel-menu mark { padding: 0; border-radius: 2px; background: rgba(var(--bs-warning-rgb), .4); color: inherit; }

/* ---- Flash messages and alerts ----------------------------------------------------------------------------------- */
.alert { border-radius: var(--panel-radius); }
.panel-flash { display: flex; align-items: flex-start; gap: .625rem; border-left: 4px solid var(--bs-alert-color); box-shadow: var(--panel-shadow-sm); }
.panel-flash > .panel-icon { margin-top: .1875rem; }
.alert-success.panel-flash { border-left-color: var(--bs-success); }
.alert-success.panel-flash > .panel-icon { color: var(--bs-success); }
.alert-warning.panel-flash { border-left-color: var(--bs-warning); }
.alert-danger.panel-flash { border-left-color: var(--bs-danger); }
.alert-danger.panel-flash > .panel-icon { color: var(--bs-danger); }
.alert-info.panel-flash { border-left-color: var(--bs-info); }
.panel-flash-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---- Buttons, inputs, cards, badges, pagination ----------------------------------------------------------------- */
.btn { font-weight: 500; }
.btn:has(> .panel-icon) { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
.btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; }
.btn-primary { box-shadow: 0 1px 2px rgba(var(--bs-primary-rgb), .25); }
/* Neutral buttons: a calm grey outline that darkens on hover (instead of turning solid grey). */
.btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #ced4da;
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: #adb5bd;
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: #adb5bd;
    --bs-btn-disabled-color: var(--bs-tertiary-color);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn-outline-primary { --bs-btn-bg: var(--bs-body-bg); }

.form-control,
.form-select { border-color: #ced4da; }
.form-control:hover:not(:disabled):not(:focus):not([readonly]),
.form-select:hover:not(:disabled):not(:focus) { border-color: #adb5bd; }
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .65);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .14);
}
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb), .14); }
.form-control::placeholder { color: var(--bs-tertiary-color); }

.panel-main .card { border-color: var(--bs-border-color); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow-sm); }
.panel-main .card > .card-header { background: var(--bs-tertiary-bg); }
.panel-list-card { box-shadow: var(--panel-shadow-sm); }

/* Status badges: soft colours (tint, darker text, hairline border) so a column of Yes / No reads calmly. */
.panel-main .badge { font-weight: 600; letter-spacing: .01em; }
.panel-main h1 .badge { font-size: .8125rem; padding: .3125rem .5rem; }
.panel-main .badge.text-bg-success { color: var(--bs-success-text-emphasis) !important; background-color: var(--bs-success-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--bs-success-border-subtle); }
.panel-main .badge.text-bg-secondary { color: var(--bs-secondary-text-emphasis) !important; background-color: var(--bs-secondary-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--bs-secondary-border-subtle); }
.panel-main .badge.text-bg-danger { color: var(--bs-danger-text-emphasis) !important; background-color: var(--bs-danger-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--bs-danger-border-subtle); }
.panel-main .badge.text-bg-warning { color: var(--bs-warning-text-emphasis) !important; background-color: var(--bs-warning-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--bs-warning-border-subtle); }
.panel-main .badge.text-bg-info { color: var(--bs-info-text-emphasis) !important; background-color: var(--bs-info-bg-subtle) !important; box-shadow: inset 0 0 0 1px var(--bs-info-border-subtle); }

.pagination {
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-hover-color: var(--bs-emphasis-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-focus-color: var(--bs-emphasis-color);
    --bs-pagination-disabled-color: var(--bs-tertiary-color);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}
.page-item.disabled > span.page-link { color: var(--bs-secondary-color); }

/* ---- Status pages (403, 404, errors) ------------------------------------------------------------------------------ */
.panel-status { max-width: 32rem; margin: 3rem auto; text-align: center; }
.panel-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}
.panel-status-icon .panel-icon { width: 1.5rem; height: 1.5rem; }
.panel-status-icon.is-danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger); }
.panel-status p { color: var(--bs-secondary-color); }

/* ---- Signed-out pages: one card on the brand background ---------------------------------------------------------- */
body.panel-auth {
    min-height: 100vh;
    background-color: #f8f2e4;
    background-image:
        radial-gradient(60rem 36rem at 0% 0%, rgba(227, 199, 122, .38), transparent 62%),
        radial-gradient(50rem 32rem at 100% 100%, rgba(195, 154, 63, .26), transparent 60%),
        linear-gradient(160deg, #fdfaf2 0%, #f4ead2 100%);
    background-attachment: fixed;
}
.panel-auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
    outline: 0;
}
.panel-auth-card {
    position: relative;
    width: 100%;
    max-width: 26rem;
    padding: 2.25rem 2.25rem 1.75rem;
    overflow: hidden;
    border: 1px solid rgba(195, 154, 63, .22);
    border-radius: 1rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(80, 60, 15, .06), 0 1.25rem 2.5rem -.75rem rgba(110, 80, 20, .22);
}
.panel-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--panel-gold), var(--panel-gold-light) 45%, var(--panel-gold));
}
.panel-auth-logo { margin-bottom: 1.25rem; text-align: center; }
.panel-auth-logo img { width: 7.5rem; height: auto; }
.panel-auth-head { margin-bottom: 1.5rem; text-align: center; }
.panel-auth-title { margin: 0 0 .25rem; color: var(--bs-emphasis-color); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.panel-auth-sub { margin: 0; color: var(--bs-secondary-color); }
.panel-auth-text { color: var(--bs-secondary-color); font-size: .9375rem; }
.panel-auth-form .form-label { margin-bottom: .375rem; font-size: .875rem; font-weight: 500; }
.panel-auth-form .form-control { padding-top: .5625rem; padding-bottom: .5625rem; }
.panel-auth-submit { margin-top: .5rem; font-size: 1rem; font-weight: 600; }
.panel-auth-links { margin: 1.25rem 0 0; font-size: .875rem; text-align: center; }
.panel-auth-links a { display: inline-flex; align-items: center; gap: .375rem; text-decoration: none; }
.panel-auth-links a:hover { text-decoration: underline; text-underline-offset: .15em; }
.panel-auth-foot { margin: 1.5rem 0 0; color: #8c7a4f; font-size: .8125rem; letter-spacing: .02em; }
.panel-auth .panel-status { margin: 0 auto; }
@media (max-width: 575.98px) {
    .panel-auth-main { justify-content: flex-start; padding-top: 2rem; }
    .panel-auth-card { padding: 2rem 1.25rem 1.5rem; }
}

/* An input with an icon inside it, on its left (sign-in and password pages). */
.panel-input-icon { position: relative; }
.panel-input-icon > .panel-icon {
    position: absolute;
    top: 50%;
    left: .875rem;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    pointer-events: none;
}
.panel-input-icon > .form-control { padding-left: 2.5rem; }
.panel-input-icon:focus-within > .panel-icon { color: var(--bs-primary); }