/* custom.css */

/* Define the new primary color */
:root {
    --bs-primary: #2e2e2e;
}

/* Override container padding */
.container{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 0.5rem;
}

/* Keep navbar fixed on top */
.navbar {
  position: relative;
  z-index: 1010;
}

/* Override .btn-primary */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Override .btn-outline-primary (via variables, so hover/active states stay readable) */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 200, 169, 106;
}

/* Optional: use new primary for navbar too */
.navbar-dark.bg-dark {
    background-color: var(--bs-primary) !important;
}

/* Consistent field sizing */
.slab-filter-field {
    min-width: 120px;
    flex-grow: 1;
}

/* Button row styling */
.slab-filter-buttons {
    gap: 0.5rem;
    margin-top: 1rem;
}

.slab-filter-button a,.slab-filter-button button{
    min-width: 100px;
    width: 100%;
}

/* Magnifying glass effect for slab images */
.magnify-container {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  width: 100%;
  display: inline-block;
}

.magnify-container .magnify-slab {
  transition: transform 0.2s ease;
  transform-origin: center center;
  width: 100%;
  height: auto;
  display: block;
}

.magnify-container:hover .magnify-slab {
  transform: scale(2.75);
}

.custom-toast {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 1055;
}

/* Phones: across the screen with a margin, so a long message wraps inside it */
@media (max-width: 575.98px) {
    .custom-toast {
        top: max(1rem, env(safe-area-inset-top, 0px));
        right: 1rem;
        left: 1rem;
    }

    .custom-toast .toast {
        width: 100%;
    }
}

/* Showcase page background */
.showcase-page {
    min-height: 100vh;
    position: relative;
}

/* Background video for showcase */
.bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.slab-button-group{

    gap: 0.5rem;
  }

/* Optional overlay for contrast */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.138);
  z-index: 0;
  pointer-events: none;
}

/* Foreground content for showcase */
.content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

/* Showcase logo styling */
.showcase-logo {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.page-link {
    color: var(--bs-primary) !important;
}

/* Slab page specific styling */
.slab-page {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.slab-page .row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.slab-filter-form {
    margin-bottom: 1rem;
}

.slab-card-grid .col {
    margin-bottom: 1rem;
}


/* Status pill styling */
.status-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 50rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* Status: Available (1) - Bootstrap Success Green */
.status-1 {
    background-color: #198754 !important;
    color: white !important;
}

/* Status: Sold (2) - Bootstrap Danger Red */
.status-2 {
    background-color: #dc3545 !important;
    color: white !important;
}

/* Status: Reserved (3) - Bootstrap Warning Yellow */
.status-3 {
    background-color: #ffc107 !important;
    color: #000 !important;
}

/* Status: Consumed/Processed (4) - Bootstrap Secondary Gray */
.status-4 {
    background-color: #6c757d !important;
    color: white !important;
}

/* Status: In Production (5) - Bootstrap Primary Blue */
.status-5 {
    background-color: #0d6efd !important;
    color: white !important;
}

/* Main Image Zoom on Hover - Constrained to Container */
#mainImage {
    transition: transform 0.2s ease;
    cursor: zoom-in;
    transform-origin: center center;
}

#mainImage:hover {
    transform: scale(2);
    cursor: zoom-out;
}

/* Bundle card image overlay pills */
.bundle-pill-dark {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
}

.bundle-pill-quality {
    background-color: rgba(255, 193, 7, 0.5) !important;
    color: #000 !important;
}

/* Bundle Card Zoom Effect on Hover */
.bundle-card-zoom .ratio {
    overflow: hidden;
}

.bundle-card-zoom .card-img-top {
    transition: transform 0.45s ease;
}

.bundle-card-zoom:hover .card-img-top {
    transform: scale(1.3);
}

/* Tile Card Hover Zoom */
.tile-card-zoom .ratio { overflow: hidden; }
.tile-card-zoom .card-img-top { transition: transform 0.45s ease; }
.tile-card-zoom:hover .card-img-top { transform: scale(1.8); }

/* Tile Modal Image Zoom on Hover */
.tile-modal-zoom {
    transition: transform 0.3s ease;
    cursor: zoom-in;
    transform-origin: center center;
}

.tile-modal-zoom:hover {
    transform: scale(2);
    cursor: zoom-out;
}



/* Info bar under photos, replaces the text that used to be burned into the MAIN image */
.photo-info-bar {
    background-color: rgb(128, 128, 128);
    color: rgb(210, 210, 210);
    text-align: center;
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Prev/next buttons on the tile image modal */
.tile-modal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    --bs-btn-bg: rgba(33, 37, 41, 0.6);
    --bs-btn-border-color: transparent;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0.5rem;
}

.tile-modal-nav:disabled {
    opacity: 0.25;
}

/* No hover zoom on touch screens, so taps and swipes don't trigger it */
@media (hover: none) {
    .tile-modal-zoom:hover {
        transform: none;
    }
}


/* ==========================================================================
   Theme: charcoal + warm stone gold, soft gradients and depth
   Colors live in the variables below, so the whole look can be tuned here.
   ========================================================================== */
:root {
    --theme-charcoal-1: #1c1c1c;
    --theme-charcoal-2: #3a3a3a;
    --theme-gold: #c8a96a;
    --theme-gold-dark: #a8874a;
    --theme-page-top: #faf9f7;
    --theme-page-bottom: #efebe5;
    --theme-card-shadow: 0 2px 8px rgba(40, 32, 20, 0.06), 0 1px 2px rgba(40, 32, 20, 0.08);
    --theme-card-shadow-hover: 0 12px 28px rgba(40, 32, 20, 0.14), 0 4px 8px rgba(40, 32, 20, 0.08);
}

/* Page background: soft warm off-white */
body {
    background: linear-gradient(180deg, var(--theme-page-top), var(--theme-page-bottom)) fixed;
    min-height: 100vh;
}

/* Navbar: charcoal gradient with a thin gold line */
.navbar-dark.bg-dark {
    background-image: linear-gradient(135deg, var(--theme-charcoal-1), var(--theme-charcoal-2));
}

/* The gold line, with a soft shine drifting slowly from left to right */
.navbar-dark.bg-dark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5px;
    background: linear-gradient(90deg,
        var(--theme-gold-dark) 0%,
        var(--theme-gold) 35%,
        #f3e3bd 50%,
        var(--theme-gold) 65%,
        var(--theme-gold-dark) 100%);
    background-size: 200% 100%;
    animation: gold-line-shine 6s linear infinite;
    pointer-events: none;
}

@keyframes gold-line-shine {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-dark.bg-dark::after {
        animation: none;
        background: var(--theme-gold);
    }
}

.navbar-dark .nav-link.active {
    color: var(--theme-gold) !important;
}

/* Cards: no hard border, soft shadow, lift on hover */
.bundle-page .card {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: var(--theme-card-shadow);
}

.bundle-card-zoom,
.tile-card-zoom {
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bundle-card-zoom:hover,
.tile-card-zoom:hover {
    transform: translateY(-4px);
    box-shadow: var(--theme-card-shadow-hover);
}

/* Stone name written on the bottom of the card photo, kept small and quiet */
.card-photo-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.25rem 0.75rem 0.4rem;
    color: rgba(255, 255, 255, 0.95);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.2;
    pointer-events: none; /* clicks go through to the photo */
}

/* Bundle / tile number at the top of the card body */
.card-ref {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2e2e2e;
    letter-spacing: 0.01em;
}

/* Quality badges as metals: 1 gold, 2 silver, 3 bronze */
.quality-1 {
    background-image: linear-gradient(135deg, #e6c97a, #b8913f);
    color: #2b2210 !important;
}

.quality-2 {
    background-image: linear-gradient(135deg, #e4e6e8, #a5abb1);
    color: #23272b !important;
}

.quality-3 {
    background-image: linear-gradient(135deg, #d9a273, #9a6234);
    color: #fff !important;
}

/* Buttons: charcoal gradient for primary, gold for downloads */
.btn-primary {
    background-image: linear-gradient(135deg, var(--theme-charcoal-2), var(--theme-charcoal-1));
}

.btn-warning {
    --bs-btn-color: #2b2210;
    --bs-btn-hover-color: #2b2210;
    --bs-btn-active-color: #2b2210;
    --bs-btn-disabled-color: #2b2210;
    --bs-btn-border-color: var(--theme-gold-dark);
    --bs-btn-hover-border-color: var(--theme-gold-dark);
    background-image: linear-gradient(135deg, #dcc08a, var(--theme-gold));
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background-image: linear-gradient(135deg, var(--theme-gold), var(--theme-gold-dark));
}

/* Info bar under photos: soft dark gradient (screen only; downloads keep the plain bar) */
.photo-info-bar {
    background: linear-gradient(180deg, #5a5a5a, #3c3c3c);
    color: #e6e6e6;
    letter-spacing: 0.02em;
}

/* A greyscale reference under its text: 13 steps from white to black. When every step can be told apart, the screen
   shows the photo's tones as they are; when not, its brightness wants changing (the bar's title says so). Drawn by
   CSS, as the pages set the bar's text from script. downloadWithInfoBar (common.js) draws the same steps */
.photo-info-bar {
    overflow: hidden;
}

.photo-info-bar::after {
    content: "";
    display: block;
    height: 10px;
    margin: 0.35rem -0.5rem -0.35rem;
    background: linear-gradient(90deg, rgb(255,255,255) 0.00% 7.69%, rgb(234,234,234) 7.69% 15.38%, rgb(212,212,212) 15.38% 23.08%, rgb(191,191,191) 23.08% 30.77%, rgb(170,170,170) 30.77% 38.46%, rgb(149,149,149) 38.46% 46.15%, rgb(128,128,128) 46.15% 53.85%, rgb(106,106,106) 53.85% 61.54%, rgb(85,85,85) 61.54% 69.23%, rgb(64,64,64) 69.23% 76.92%, rgb(42,42,42) 76.92% 84.62%, rgb(21,21,21) 84.62% 92.31%, rgb(0,0,0) 92.31% 100.00%);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    filter: brightness(1.25);
}

/* Replace Bootstrap's default blue highlights with the theme colors */
:root {
    --bs-primary-rgb: 46, 46, 46;
    --bs-link-color: #2e2e2e;
    --bs-link-color-rgb: 46, 46, 46;
    --bs-link-hover-color: var(--theme-gold-dark);
    --bs-link-hover-color-rgb: 168, 135, 74;
    --bs-focus-ring-color: rgba(200, 169, 106, 0.35);
    --bs-primary-text-emphasis: #2e2e2e;
    --bs-primary-bg-subtle: #f3ecdf;
    --bs-primary-border-subtle: #e2d3b3;
    accent-color: var(--theme-gold-dark); /* native checkboxes, radios, ranges */
}

.form-control:focus,
.form-select:focus {
    border-color: var(--theme-gold);
    box-shadow: 0 0 0 0.25rem rgba(200, 169, 106, 0.25);
}

.form-check-input:checked {
    background-color: var(--theme-gold-dark);
    border-color: var(--theme-gold-dark);
}

.form-check-input:focus {
    border-color: var(--theme-gold);
    box-shadow: 0 0 0 0.25rem rgba(200, 169, 106, 0.25);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--theme-gold);
    --bs-dropdown-link-active-color: #2b2210;
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(200, 169, 106, 0.25);
}

.page-item.active .page-link {
    color: #fff !important;
}

.btn-primary {
    --bs-btn-focus-shadow-rgb: 200, 169, 106;
}

/* Bundle detail: the photo and info panes are tall on desktop, but size to content on phones */
.bundle-viewer-pane {
    min-height: 60vh;
}

@media (max-width: 767.98px) {
    .bundle-viewer-pane {
        min-height: 0;
    }

    /* Bundle prev/next stays reachable while scrolling, with thumb-sized buttons */
    .bundle-nav {
        position: sticky;
        top: 80px;  /* under the header, which stays at the top too (site.css) */
        z-index: 1020;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 0.5rem;
        background: rgba(250, 249, 247, 0.92);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .bundle-nav .btn {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }

    .bundle-nav-btn {
        min-width: 2.75rem;
        justify-content: center;
    }
}

/* Small footer with the app version */
.site-footer {
    opacity: 0.7;
    letter-spacing: 0.02em;
}

/* Version on the showcase video: tiny and faded */
.showcase-version {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    z-index: 3;
    text-align: center;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
    pointer-events: none;
}

/* Showcase Cover Flow: the centre photo faces you in colour, the others angle away dimmed and
   in grayscale; a radial mask fades the whole row into the video at its edges */
.coverflow {
    --cf-width: 380px; /* photo width; everything else scales from it */
    position: relative;
    height: calc(var(--cf-width) * 0.75 + 32px);
    margin: 0 auto 2.75rem;
    max-width: 1100px;
    perspective: 1100px;
    transform-style: preserve-3d;
    -webkit-mask-image: radial-gradient(ellipse 50% 70% at 50% 45%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 70% at 50% 45%, #000 55%, transparent 100%);
    outline: none;
    touch-action: pan-y;
}

.coverflow-item {
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--cf-width);
    height: calc(var(--cf-width) * 0.75);
    margin-left: calc(var(--cf-width) / -2);
    border-radius: 0.6rem;
    overflow: visible;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.7s ease, opacity 0.7s ease;
    filter: grayscale(100%) brightness(0.55);
    -webkit-box-reflect: below 6px linear-gradient(transparent 65%, rgba(255, 255, 255, 0.22));
}

.coverflow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.6rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.coverflow-item.is-active {
    filter: none;
    cursor: pointer;
}

.coverflow-caption {
    min-height: 1.2em;
    margin: -1.75rem 0 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 575.98px) {
    .coverflow {
        --cf-width: min(66vw, 280px);
        margin-bottom: 2.25rem;
        -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 45%, #000 50%, transparent 100%);
        mask-image: radial-gradient(ellipse 55% 75% at 50% 45%, #000 50%, transparent 100%);
    }

}

@media (prefers-reduced-motion: reduce) {
    .coverflow-item {
        transition: none;
    }
}


/* Showcase CTA button styling */
.showcase-cta {
    transition: all 0.3s ease;
}

.showcase-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.showcase-cta .bi {
    display: inline-block;
    font-size: 0.85em;
    transition: transform 0.3s ease;
}

.showcase-cta:hover .bi,
.showcase-cta:focus-visible .bi {
    transform: translateX(3px);
}

/* Bundle detail photo: skeleton + shimmer while loading */
.photo-frame-media {
    position: relative;
}

/* No photo yet (or it failed): a placeholder box in the usual 16:9 shape, so the info bar is full width */
.photo-frame.is-empty .photo-frame-media {
    width: min(calc(100vw - 4rem), calc(60vh * 16 / 9), 52rem);
    aspect-ratio: 16 / 9;
    background: #e9e5df;
}

.photo-frame.is-empty #mainImage {
    display: none;
}

.photo-frame.is-loading:not(.is-empty) #mainImage {
    opacity: 0.6;
}

#mainImage {
    display: block;
    transition: opacity 0.3s ease;
}

/* The shimmer: a soft light band sweeping across */
.photo-frame.is-loading .photo-frame-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: photo-shimmer 1.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes photo-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

.photo-counter {
    z-index: 2;
}

.photo-frame-error-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #b9b2a8;
}

.photo-frame.is-error .photo-frame-error-icon {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .photo-frame.is-loading .photo-frame-media::after {
        animation: none;
        background: rgba(255, 255, 255, 0.25);
    }
}

/* Data pages (bundle overview, inquiries): same look as the bundle and tile pages */
.bundle-page .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem 1.25rem;
}

.page-heading {
    font-weight: 600;
    color: #2e2e2e;
    letter-spacing: 0.01em;
}

.data-table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(200, 169, 106, 0.08);
    margin-bottom: 0;
}

.data-table thead th {
    /* Solid charcoal: a gradient per cell would show seams between the columns */
    --bs-table-bg: #262626;
    background-color: #262626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border: 0;
    padding: 0.75rem;
}

.data-table thead th:first-child {
    border-top-left-radius: 0.5rem;
}

.data-table thead th:last-child {
    border-top-right-radius: 0.5rem;
}

.data-table tbody td {
    border-color: rgba(0, 0, 0, 0.06);
    padding: 0.7rem 0.75rem;
}

.data-table tbody a {
    color: #2e2e2e;
}

.data-table tbody a:hover {
    color: var(--theme-gold-dark);
}

/* Small photo at the start of a table row */
.data-table .thumb-col {
    width: 1%;
    padding-right: 0;
}

.row-thumb {
    display: block;
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 0.4rem;
    background: #e9e5df;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* No photo: an empty warm-gray tile with a faint image icon */
.row-thumb.is-missing {
    position: relative;
}

.row-thumb.is-missing::after {
    content: "\F42A";
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b2a8;
    font-size: 1.25rem;
}

/* Compact data table (bundle overview): tighter cells and slightly smaller text so it fits the page */
.data-table-compact {
    font-size: 0.875rem;
}

.data-table-compact thead th {
    padding: 0.6rem 0.45rem;
    font-size: 0.68rem;
}

.data-table-compact tbody td {
    padding: 0.5rem 0.45rem;
}

.data-table-compact .form-control-sm,
.data-table-compact .form-select-sm {
    font-size: 0.8rem;
    padding-left: 0.4rem;
}

.data-table-compact .form-select-sm {
    padding-right: 1.6rem;
    background-position: right 0.4rem center;
}

/* Units keep their case in uppercase table headers (m², not M²) */
.data-table thead .unit {
    text-transform: none;
    letter-spacing: 0;
}

/* Odd rows get a light warm accent (like Bootstrap's striped tables, in the theme's gold) */
.data-table > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(200, 169, 106, 0.07);
}

/* Smaller thumbnails in the compact table */
.data-table-compact .row-thumb {
    width: 48px;
    height: 36px;
    border-radius: 0.3rem;
}

.data-table-compact .row-thumb.is-missing::after {
    font-size: 0.95rem;
}

/* Stone group chips above the bundle filter: a natural colour dot + the group name */
.group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.group-chip,
.note-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50rem;
    background: #fff;
    color: #2e2e2e;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(40, 32, 20, 0.05);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.group-chip:hover,
.note-chip:hover {
    border-color: var(--theme-gold);
    box-shadow: 0 2px 6px rgba(40, 32, 20, 0.1);
}

.group-chip.is-active,
.note-chip.is-active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.group-chip:focus-visible,
.note-chip:focus-visible {
    outline: 2px solid var(--theme-gold);
    outline-offset: 2px;
}

/* Block notes: quick tags under the label (the look of the group chips), wrapping onto more lines */
.note-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.note-chip {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
}

/* Inquiry list: what the inquiry is about (slab, bundle, block, stone) */
.inquiry-type-1 { background: #e9ecef; color: #343a40; }
.inquiry-type-2 { background: #6c757d; color: #fff; }
.inquiry-type-3 { background: var(--theme-charcoal-2); color: var(--theme-gold); }
.inquiry-type-4 { background: var(--theme-gold); color: #000; }
.inquiry-type-5 { background: #fff; color: #000; border: 1px solid var(--theme-gold); }

/* How it was sent */
.inquiry-channel-whatsapp { background: #25a65a; color: #fff; }
.inquiry-channel-email { background: #e9ecef; color: #343a40; }

.group-swatch {
    position: relative;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* The stone pattern, turned to its own angle per group so the veins don't all run the same way */
.group-swatch::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(var(--swatch-turn, 0deg));
}

/* Polished-stone highlight and a fine edge on every swatch (not rotated: the light stays top-left) */
.group-swatch::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 45%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Fixed, random-looking turns per group (stable between page loads) */
.group-swatch.group-1  { --swatch-turn: 0deg; }
.group-swatch.group-2  { --swatch-turn: 74deg; }
.group-swatch.group-3  { --swatch-turn: 151deg; }
.group-swatch.group-10 { --swatch-turn: 223deg; }
.group-swatch.group-4  { --swatch-turn: 297deg; }
.group-swatch.group-5  { --swatch-turn: 12deg; }   /* travertine layers stay roughly level */
.group-swatch.group-6  { --swatch-turn: 118deg; }
.group-swatch.group-7  { --swatch-turn: 203deg; }
.group-swatch.group-8  { --swatch-turn: 41deg; }

/* Small stone samples per StoneTypes value, drawn with gradients (veins, layers, speckles) */
.group-swatch.group-1::before { /* White marble: fine gray veins */
    background:
        linear-gradient(120deg, transparent 42%, rgba(120, 120, 125, 0.55) 44%, transparent 47%),
        linear-gradient(35deg, transparent 62%, rgba(150, 150, 155, 0.45) 64%, transparent 66%),
        #f5f3ee;
}

.group-swatch.group-2::before { /* Beige marble: warm sand, soft brown veins */
    background:
        linear-gradient(125deg, transparent 40%, rgba(150, 110, 70, 0.45) 43%, transparent 47%),
        linear-gradient(30deg, transparent 65%, rgba(170, 130, 90, 0.35) 67%, transparent 70%),
        #dcc9a6;
}

.group-swatch.group-3::before { /* Gray marble: light veins */
    background:
        linear-gradient(120deg, transparent 40%, rgba(235, 235, 235, 0.75) 43%, transparent 46%),
        linear-gradient(40deg, transparent 62%, rgba(220, 220, 220, 0.5) 64%, transparent 67%),
        #8f8e8a;
}

.group-swatch.group-10::before { /* Black marble: thin white veins */
    background:
        linear-gradient(118deg, transparent 41%, rgba(255, 255, 255, 0.8) 43%, transparent 45%),
        linear-gradient(35deg, transparent 63%, rgba(255, 255, 255, 0.45) 64.5%, transparent 66%),
        #232323;
}

.group-swatch.group-4::before { /* Color marble: muted rose, green and gold, with a vein */
    background:
        linear-gradient(120deg, transparent 45%, rgba(255, 255, 255, 0.6) 47%, transparent 50%),
        conic-gradient(from 30deg, #b8807a, #8fa58a, #c9a96a, #b8807a);
}

.group-swatch.group-5::before { /* Travertine: horizontal layers and tiny pores */
    background:
        radial-gradient(circle at 30% 60%, rgba(120, 90, 55, 0.6) 0 1px, transparent 1.5px),
        radial-gradient(circle at 70% 35%, rgba(120, 90, 55, 0.6) 0 1px, transparent 1.5px),
        repeating-linear-gradient(0deg, #cbb18a 0 2px, #bfa37a 2px 3px, #d3bb96 3px 5px);
}

.group-swatch.group-6::before { /* Onyx: honey bands with a glowing centre */
    background:
        radial-gradient(circle at 55% 55%, rgba(255, 240, 200, 0.85), transparent 55%),
        repeating-linear-gradient(145deg, #e8c98a 0 2px, #d4a65c 2px 4px, #f0dcae 4px 6px);
}

.group-swatch.group-7::before { /* Limestone: pale cream, fine speckle */
    background:
        radial-gradient(circle at 25% 30%, rgba(150, 135, 105, 0.5) 0 0.6px, transparent 1px),
        radial-gradient(circle at 65% 70%, rgba(150, 135, 105, 0.5) 0 0.6px, transparent 1px),
        radial-gradient(circle at 75% 25%, rgba(150, 135, 105, 0.4) 0 0.6px, transparent 1px),
        #e6dfce;
}

.group-swatch.group-8::before { /* Basalt: dark charcoal, fine speckle */
    background:
        radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.25) 0 0.6px, transparent 1px),
        radial-gradient(circle at 65% 65%, rgba(255, 255, 255, 0.2) 0 0.6px, transparent 1px),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15) 0 0.6px, transparent 1px),
        #454542;
}

.group-swatch.group-9 { /* Other */
    background: transparent;
    box-shadow: none;
    border: 1.5px dashed rgba(0, 0, 0, 0.35);
}

.group-swatch.group-9::after {
    display: none;
}

.group-chip.is-active .group-swatch::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Phones: one line you swipe sideways, so the chips don't push the bundles down */
@media (max-width: 575.98px) {
    .group-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 0 0.5rem 0.25rem;
    }

    .group-chips::-webkit-scrollbar {
        display: none;
    }

    /* Soft fade at the right edge while there are more chips: a hint that the row swipes */
    .group-chips.has-more {
        -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
        mask-image: linear-gradient(90deg, #000 85%, transparent);
    }
}

/* Edit Photo (bundle page, superusers) */
/* Box zoom stage: shows the current view of the photo, scaled to fill; drag a box to zoom in */
.photo-zoom-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* replaced by the photo's own aspect when it loads */
    background: #1c1c1c;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.photo-zoom-stage img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    pointer-events: none;
    filter: url(#photoAdjustFilter); /* live brightness / white balance preview */
}

/* The box being drawn: dashed white, like the desk app */
.photo-zoom-box {
    position: absolute;
    border: 2px dashed #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.photo-zoom-info {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    pointer-events: none;
}

.photo-zoom-info:empty {
    display: none;
}

.photo-edit-scale {
    margin-top: -0.5rem;
    font-size: 0.75rem;
}

.photo-edit-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Editor controls: one block per slider, value and reset on the label line */
.photo-edit-controls {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1.5rem;
    align-items: start;
}

.photo-control-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.15rem;
}

.photo-control-head label {
    font-weight: 500;
    margin: 0;
}

.photo-control-value {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: #6c757d;
}

.photo-control-reset {
    border: 0;
    background: transparent;
    padding: 0 0.15rem;
    color: var(--theme-gold-dark);
    line-height: 1;
}

.photo-control-reset:hover {
    color: #2e2e2e;
}

.photo-control-scale {
    display: flex;
    justify-content: space-between;
    margin-top: -0.35rem;
    font-size: 0.72rem;
    color: #8a8a8a;
}

/* White balance track: warm on the left, cool on the right */
.photo-range-wb::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #e9b77f, #ece9e4 50%, #a9c3e3);
}

.photo-range-wb::-moz-range-track {
    background: linear-gradient(90deg, #e9b77f, #ece9e4 50%, #a9c3e3);
}

.photo-edit-buttons {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.photo-compare {
    user-select: none;
}

.photo-compare.active {
    background: #2e2e2e;
    color: #fff;
}

/* Buttons and hints on top of the photo */
.photo-stage-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50rem;
    cursor: pointer;
}

.photo-stage-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.photo-zoom-hint {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50rem;
    white-space: nowrap;
    pointer-events: none;
}

/* Unsaved changes: a small gold dot after the title */
.photo-edit-dirty {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background: var(--theme-gold);
    vertical-align: middle;
}

/* Metadata panel: groups with small headings, then the raw JSON in a collapsible section */
.photo-edit-meta {
    font-size: 0.85rem;
    max-height: 70vh;
    overflow-y: auto;
}

.photo-meta-title {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-gold-dark);
}

.photo-edit-meta section + section {
    margin-top: 1rem;
}

.photo-meta-all {
    margin-top: 1rem;
}

.photo-meta-all summary {
    font-size: 0.8rem;
    color: #6c757d;
    cursor: pointer;
}

.photo-meta-all pre {
    margin: 0.5rem 0 0;
    padding: 0.6rem;
    max-height: 16rem;
    overflow: auto;
    font-size: 0.72rem;
    background: #f6f4f0;
    border-radius: 0.4rem;
}

@media (max-width: 575.98px) {
    .photo-edit-controls {
        grid-template-columns: 1fr;
    }
}

.photo-edit-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.photo-edit-meta-row span:last-child {
    text-align: right;
    font-weight: 500;
    word-break: break-word;
}

/* Sliders in the theme colors instead of Bootstrap blue */
.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--theme-gold-dark);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--theme-gold-dark);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(200, 169, 106, 0.35);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(200, 169, 106, 0.35);
}

.photo-edit-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

.photo-edit-error .bi {
    font-size: 2rem;
}

/* Staff actions under the bundle photo: status on the left, tools on the right; stacked on phones */
.slab-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.slab-actions-status {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 18rem;
    max-width: 26rem;
}

.slab-actions-status .form-select {
    padding-left: 2rem; /* room for the status dot */
}

.slab-status-dot {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #adb5bd;
    pointer-events: none;
    z-index: 1;
}

.slab-actions-tools {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .slab-actions-status {
        flex-basis: 100%;
        max-width: none;
    }

    .slab-actions-tools {
        flex-basis: 100%;
        margin-left: 0;
    }

    .slab-actions-tools .btn {
        flex: 1;
    }
}

/* Edit Photo: switching between the bundle's slabs */
.photo-slab-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.photo-slab-nav-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.photo-slab-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    max-width: 16rem;
}

.photo-slab-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #d6d3cd;
}

.photo-slab-dot.is-edited {
    background: var(--theme-gold);
}

.photo-slab-dot.is-current {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #2e2e2e;
}

.photo-carry-note {
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: #6b5a33;
    background: rgba(200, 169, 106, 0.14);
    border-radius: 0.4rem;
}


/* ---------- Blocks ---------- */

.inventory-table a {
    color: inherit;
}

/* Block list (Blok Listesi): the three sizes side by side in one cell */
.block-size-cells {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.block-size-cells .form-control {
    width: 46px;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.block-size-cells span {
    color: #6c757d;
}

/* A new block's code on the add form: the one thing to copy onto the block, so it stands out: dark
   letters on a light stone grey tile with the theme's gold line. The tile pops in, the letters drop in
   one by one (--i), then a soft light sweeps across it every few seconds */
.block-code-tile {
    position: relative;
    display: inline-flex;
    margin: 0.15rem 0 0.4rem;
    padding: 0.3rem 0.75rem 0.35rem;
    border: 1px solid #dcd8d0;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, #f7f6f3, #e5e2dc);
    box-shadow: inset 0 -2px 0 var(--theme-gold), 0 4px 12px rgba(40, 32, 20, 0.1);
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.1;
    overflow: hidden;
    animation: block-code-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.block-code-tile span {
    display: inline-block;
    background: linear-gradient(180deg, #555, var(--theme-charcoal-1));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: block-code-letter 0.4s ease-out both;
    animation-delay: calc(0.2s + var(--i) * 0.09s);
}

.block-code-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: block-code-shine 6s ease-in-out 0.8s infinite;
    pointer-events: none;
}

.block-code-help {
    color: #6c757d;
    font-size: 0.75rem;
    line-height: 1.3;
}

@keyframes block-code-pop {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes block-code-letter {
    from { opacity: 0; transform: translateY(-0.4em); }
    to { opacity: 1; transform: none; }
}

/* The sweep takes the first fifth of each round; the rest is a pause */
@keyframes block-code-shine {
    0% { transform: translateX(-120%); }
    20%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .block-code-tile,
    .block-code-tile span,
    .block-code-tile::after {
        animation: none;
    }
}

/* Size drawing on the block form (blocks/templates/_block_size_hint.html): which side is the length,
   width and height, next to a new block's code. The size being typed lights up */
.block-dims-hint {
    display: block;
    width: 100%;
    max-width: 160px;
    margin: 0.25rem auto 0.5rem;
    color: #212529;
}

.block-dims-hint .face {
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.block-dims-hint .face-top { fill: rgba(108, 117, 125, 0.08); }
.block-dims-hint .face-front { fill: rgba(108, 117, 125, 0.18); }
.block-dims-hint .face-side { fill: rgba(108, 117, 125, 0.3); }

.block-dims-hint .face-label {
    fill: #6c757d;
    font-size: 15px;
}

.block-dims-hint .dim {
    color: #6c757d;
    transition: color 0.15s;
}

.block-dims-hint .dim line {
    stroke: currentColor;
    stroke-width: 1.5;
}

.block-dims-hint .dim .ext {
    stroke-width: 1;
    stroke-dasharray: 2 2;
}

.block-dims-hint .dim circle,
.block-dims-hint .dim text {
    fill: currentColor;
}

.block-dims-hint .dim text {
    font-size: 18px;
    font-weight: 600;
}

#blockForm:has(#id_length:focus) .dim-length,
#blockForm:has(#id_width:focus) .dim-width,
#blockForm:has(#id_height:focus) .dim-height {
    color: var(--theme-gold-dark);
}

/* Block size as one field of three parts: length × width × height (static/js/block_size_input.js).
   Big numbers, so a size can be read back at a glance in the yard */
.size-input {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem 0.25rem;
    border: 1px solid #ced4da;
    border-radius: 0.6rem;
    background: #fff;
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* Gold focus, like the theme's other inputs */
.size-input:focus-within {
    border-color: var(--theme-gold);
    box-shadow: 0 0 0 0.25rem rgba(200, 169, 106, 0.25);
}

.size-part {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    cursor: text;
}

.size-value {
    width: 100%;
    padding: 0.1rem 0;
    border: 0;
    border-bottom: 2px solid #e9ecef;
    border-radius: 0;
    background: transparent;
    color: #212529;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
}

.size-value::placeholder {
    color: #ced4da;
    font-weight: 400;
}

.size-value:focus {
    border-bottom-color: var(--theme-gold-dark);
}

.size-caption {
    margin-top: 0.15rem;
    color: #6c757d;
    font-size: 0.75rem;
}

.size-value:focus + .size-caption {
    color: var(--theme-gold-dark);
    font-weight: 600;
}

.size-error {
    color: #dc3545;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
}

.size-error:empty {
    display: none;
}

.size-value.is-invalid,
.size-part:has(.size-error:not(:empty)) .size-value {
    border-bottom-color: #dc3545;
    color: #dc3545;
}

/* Lifted by the caption's height, to sit level with the numbers */
.size-times,
.size-unit {
    margin-bottom: 1.2rem;
    color: #adb5bd;
}

.size-times {
    font-size: 1.25rem;
}

.size-unit {
    color: #6c757d;
    font-size: 0.875rem;
}

.size-readout {
    min-height: 1.3rem;
    margin-top: 0.3rem;
    color: #6c757d;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Photo slots on the new block form: tap to take (or retake) */
.photo-slot {
    position: relative;
    border: 2px dashed #c8c8c8;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8f9fa;
}

.photo-slot.has-photo {
    border-style: solid;
    border-color: #2e2e2e;
}

.photo-slot.is-missing {
    border-color: #dc3545;
}

/* Optional sides (top, other): a lighter outline and label than the required front and side */
.photo-slot.is-optional:not(.has-photo) {
    border-color: #dcdcdc;
    background: #fbfbfc;
}

.photo-slot.is-optional:not(.has-photo) .photo-slot-btn {
    color: #8a9099;
    font-weight: 500;
}

.photo-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: #555;
    font-weight: 600;
}

.photo-slot-btn .bi {
    font-size: 1.75rem;
}

.photo-slot-btn img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-slot-badge {
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
}

/* The photo's side, top left (the level badge is bottom left) */
.photo-slot-tag {
    position: absolute;
    left: 0.35rem;
    top: 0.35rem;
}

/* Direct child of .ratio, which would stretch it over the whole slot */
.photo-slot-remove {
    top: 0.25rem;
    right: 0.25rem;
    left: auto;
    width: auto;
    height: auto;
}

/* Save button stays in reach of the thumb on phones */
.block-form-actions {
    position: sticky;
    bottom: 0;
    padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(239, 235, 229, 0), var(--theme-page-bottom) 30%);
    z-index: 5;
}

/* Saving progress in the theme's gold */
.block-form-actions .progress-bar {
    background: linear-gradient(90deg, var(--theme-gold-dark), var(--theme-gold));
}

/* Cancel and Save in the bar: Save is the main action, twice as wide (2:1) */
/* Cancel and Save in the site's button look (the dialogs' Cancel/Save), tall enough to tap in the field.
   Full width on phones; on wider screens on the right, like a dialog's buttons */
.block-form-buttons {
    display: flex;
    gap: 0.5rem;
}

.block-form-buttons .btn {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;  /* Cancel is a link: centred like the Save button */
}

.block-form-cancel {
    flex: 1 1 0;
}

.block-form-save {
    flex: 2 1 0;
}

@media (min-width: 768px) {
    .block-form-buttons {
        max-width: 30rem;
        margin-left: auto;
    }
}

/* In-page camera with a level (static/js/block_camera.js) */
body.block-camera-open {
    overflow: hidden;
}

.block-camera {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: #000;
    color: #fff;
    user-select: none;
}

.block-camera[hidden] {
    display: none;
}

.bc-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* contain, not cover: the preview shows exactly what the photo will hold */
.bc-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bc-horizon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300vmax;
    margin-left: -150vmax;
    border-top: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

.bc-reticle {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translate(-50%, -50%);
}

.bc-wing {
    width: 56px;
    border-top: 3px solid #ffc107;
}

.bc-ring {
    width: 30px;
    height: 30px;
    border: 2px solid #ffc107;
    border-radius: 50%;
}

.bc-bubble-ring {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70vmin;
    height: 70vmin;
    margin: -35vmin 0 0 -35vmin;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
}

/* The target the bubble should sit in */
.bc-bubble-ring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 2px solid #ffc107;
    border-radius: 50%;
}

.bc-bubble {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    background: rgba(255, 193, 7, 0.85);
}

.block-camera.is-top .bc-horizon,
.block-camera.is-top .bc-reticle {
    display: none;
}

.block-camera.is-top .bc-bubble-ring {
    display: block;
}

.block-camera.no-sensor .bc-horizon,
.block-camera.no-sensor .bc-bubble {
    display: none;
}

.block-camera.is-level .bc-horizon { border-top-color: #2ecc71; }
.block-camera.is-level .bc-wing,
.block-camera.is-level .bc-ring,
.block-camera.is-level .bc-bubble-ring::after { border-color: #2ecc71; }
.block-camera.is-level .bc-bubble { background: rgba(46, 204, 113, 0.9); }

.bc-top,
.bc-bottom {
    position: absolute;
    left: 0;
    right: 0;
    padding: 12px;
}

.bc-top {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: max(12px, env(safe-area-inset-top));
    background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
}

.bc-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.bc-hint {
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 1px 3px #000;
}

.bc-bottom {
    bottom: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    text-align: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.bc-readout {
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px #000;
}

.bc-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.bc-btn,
.bc-btn-spacer {
    width: 48px;
    height: 48px;
}

.bc-btn {
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.3rem;
}

/* Close (cancel) in red, so it is not mistaken for the other camera buttons */
.bc-btn[data-bc="cancel"] {
    background: #dc3545;
}

.bc-btn[data-bc="cancel"]:active {
    background: #b02a37;
}

.bc-btn[data-bc="cancel"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.bc-shutter {
    width: 78px;
    height: 78px;
    padding: 4px;
    border: 5px solid #ffc107;
    border-radius: 50%;
    background: #fff content-box;
}

.bc-shutter:active {
    transform: scale(0.94);
}

.block-camera.is-level .bc-shutter { border-color: #2ecc71; }
.block-camera.no-sensor .bc-shutter { border-color: #fff; }
/* Held upright: block photos are landscape, so the shutter is dimmed until the phone is turned sideways */
.block-camera.is-portrait .bc-shutter { opacity: 0.35; }

/* Starting, or can't start: the message in the middle; the shutter does nothing until the camera runs */
.bc-message {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(22rem, calc(100% - 2rem));
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.72);
    text-align: center;
}

.block-camera.is-starting .bc-message,
.block-camera.is-failed .bc-message {
    display: flex;
}

.bc-message-text {
    margin: 0;
    line-height: 1.45;
}

.bc-fallback {
    display: none;
}

.block-camera.is-failed .bc-fallback {
    display: inline-block;
}

.block-camera.is-starting .bc-shutter,
.block-camera.is-failed .bc-shutter {
    opacity: 0.35;
}

/* No picture yet: no level drawn over the message */
.block-camera.is-starting :is(.bc-horizon, .bc-reticle, .bc-bubble-ring),
.block-camera.is-failed :is(.bc-horizon, .bc-reticle, .bc-bubble-ring) {
    display: none;
}

/* Toasts show over the camera screen too */
.block-camera-open .custom-toast {
    z-index: 2100 !important;
}

/* ---------- Shared pieces (templates/_empty_state.html, the error pages, the login card) ---------- */

/* Nothing to show in a list */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

.empty-state .bi {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 3rem;
    color: #c9c3b8;
}

/* 403 / 404: the code large and quiet, then the explanation and the way back */
.error-page {
    max-width: 32rem;
    margin: 0 auto;
    padding: 4rem 1rem;
    text-align: center;
}

.error-code {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: #d8d2c6;
    letter-spacing: 0.04em;
}

/* Login: a narrow card in the middle */
.login-card {
    max-width: 26rem;
    margin: 2rem auto 0;
}

/* The user's facility in the name button of the navbar, small and in the theme's gold */
.nav-user-location {
    max-width: 9rem;
    margin-left: 0.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--theme-gold);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-outline-light:hover .nav-user-location {
    color: var(--theme-gold-dark);
    border-left-color: rgba(0, 0, 0, 0.2);
}

/* A select typed to search (static/js/searchable_select.js): its options open in a list under the box */
.searchable-select {
    position: relative;
}

.searchable-select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.searchable-select-list li {
    padding: 10px 12px;
    cursor: pointer;
}

.searchable-select-list li:hover,
.searchable-select-list li.is-active {
    background: var(--bs-tertiary-bg);
}