/* ============================================================================
   Junto admin — styled to match the café site.

   Same palette, same typeface, same pill buttons as the public pages, so the
   admin feels like part of the same thing rather than a bolted-on control
   panel. Bootstrap does the layout; this sets the brand on top of it.
   ========================================================================= */

:root {
  /* Straight from the public site's palette. */
  --wine: #6b2a26;
  --wine-deep: #4a1c19;
  --cream: #f4ecde;
  --cream-soft: #ede2cd;
  --terracotta: #e5b8a9;
  --terracotta-deep: #c98f7e;
  --coffee: #2a1612;

  --admin-sidebar-width: 268px;
  --admin-line: rgba(107, 42, 38, .16);
  --admin-panel: #fffdf9;

  /* Retheme Bootstrap rather than fight it. */
  --bs-body-bg: var(--cream);
  --bs-body-color: var(--coffee);
  --bs-body-font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-color: var(--admin-line);
  --bs-link-color: var(--wine);
  --bs-link-hover-color: var(--wine-deep);
  --bs-emphasis-color: var(--coffee);
  --bs-secondary-color: rgba(42, 22, 18, .62);
  --bs-heading-color: var(--wine-deep);
}

body.admin-body {
  background: var(--cream);
  color: var(--coffee);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Layout
   ========================================================================= */

.admin-shell { display: flex; min-height: 100vh; }

.admin-main { flex: 1 1 auto; min-width: 0; }
.admin-main__inner { max-width: 70rem; padding: 1.5rem 1.25rem 5rem; }

@media (min-width: 992px) {
  .admin-main__inner { padding: 2.75rem 3rem 6rem; }
}

/* ============================================================================
   Top bar (mobile only)
   ========================================================================= */

.admin-topbar {
  background: var(--wine-deep);
  border-bottom: 1px solid rgba(244, 236, 222, .12);
}
.admin-topbar .navbar-brand {
  color: var(--cream);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .82rem;
}
.admin-topbar .navbar-toggler {
  color: var(--cream);
  border-color: rgba(244, 236, 222, .35);
  padding: .35rem .6rem;
}
.admin-topbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(229, 184, 169, .45); }

/* ============================================================================
   Sidebar

   Bootstrap sets `background-color: transparent !important` on .offcanvas-lg
   above the breakpoint, which is why the colour has to be painted on the inner
   panels instead of the offcanvas element itself.
   ========================================================================= */

.admin-sidebar {
  width: var(--admin-sidebar-width);
  flex: 0 0 var(--admin-sidebar-width);
  --bs-offcanvas-bg: var(--wine-deep);
  --bs-offcanvas-color: var(--cream);
  --bs-offcanvas-width: var(--admin-sidebar-width);
  color: var(--cream);
}

.admin-sidebar > .offcanvas-header { background: var(--wine-deep); }

/*
 * Above the breakpoint Bootstrap sets `background-color: transparent !important`
 * on both .offcanvas-lg and its body — it expects the colour to live on an inner
 * element you own. This is that element.
 */
.admin-sidebar__panel {
  background: var(--wine-deep);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 100%;
}

.admin-sidebar > .offcanvas-header {
  border-bottom: 1px solid rgba(244, 236, 222, .14);
}
.admin-sidebar .offcanvas-title {
  color: var(--cream);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .8rem;
}
.admin-sidebar .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .75;
}

@media (min-width: 992px) {
  .admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
  }
  /* The offcanvas header is a mobile affordance; the brand block replaces it. */
  .admin-sidebar > .offcanvas-header { display: none; }
}

.admin-sidebar__brand {
  padding: 1.75rem 1.5rem 1.25rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--cream);
}
.admin-sidebar__brand span {
  display: block;
  margin-top: .3rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  font-size: .78rem;
  color: rgba(244, 236, 222, .55);
}

/* Section headings echo the site's eyebrow: uppercase, tracked, with a rule. */
.admin-nav__heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.6rem 1.5rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244, 236, 222, .62);
}
.admin-nav__heading::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--terracotta);
  flex: 0 0 auto;
}

.admin-nav .nav-link {
  color: rgba(244, 236, 222, .82);
  /* 44px tall: this is the primary navigation on a phone. */
  padding: .65rem 1.5rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-left: 3px solid transparent;
  font-size: .93rem;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}
.admin-nav .nav-link:hover {
  color: #fff;
  background: rgba(244, 236, 222, .07);
}
.admin-nav .nav-link.active {
  color: var(--wine-deep);
  background: var(--cream);
  border-left-color: var(--terracotta-deep);
  font-weight: 700;
}

.admin-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.admin-dot--on { background: #6ee7a8; }
.admin-dot--off { background: rgba(244, 236, 222, .3); }
.nav-link.active .admin-dot--on { background: #2f8f5b; }

.admin-sidebar__foot {
  padding: 1.25rem 1.5rem 2rem;
  border-top: 1px solid rgba(244, 236, 222, .14);
  margin-top: 1.75rem;
}
.admin-sidebar__foot a,
.admin-sidebar__foot button {
  color: rgba(244, 236, 222, .8);
  text-decoration: none;
  font-size: .88rem;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .25rem 0;
  background: none;
  border: 0;
}
.admin-sidebar__foot a:hover,
.admin-sidebar__foot button:hover { color: #fff; }

/* Inside the dark sidebar the ring needs the lighter terracotta to carry. */
.admin-sidebar a:focus-visible,
.admin-sidebar button:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: -3px;
  border-radius: 2px;
}

/* ============================================================================
   Typography
   ========================================================================= */

.admin-page-title {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wine-deep);
}

h1, h2, h3, h4, h5, h6 { color: var(--wine-deep); font-weight: 700; }

.admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wine);
}
.admin-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: currentColor;
}

code {
  color: var(--wine);
  background: rgba(107, 42, 38, .07);
  padding: .1rem .35rem;
  border-radius: 3px;
  font-size: .86em;
}

/* ============================================================================
   Surfaces
   ========================================================================= */

.card {
  --bs-card-bg: var(--admin-panel);
  --bs-card-border-color: var(--admin-line);
  --bs-card-border-radius: 6px;
  --bs-card-inner-border-radius: 5px;
  box-shadow: 0 1px 2px rgba(42, 22, 18, .04);
}

.card-header {
  background: var(--cream-soft) !important;
  border-bottom-color: var(--admin-line);
  color: var(--wine-deep);
  font-weight: 700;
  letter-spacing: .01em;
}

.table { --bs-table-border-color: var(--admin-line); }
.table > thead {
  --bs-table-bg: var(--cream-soft);
  color: var(--wine-deep);
}
.table > thead th {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.table > tbody tr:hover > * { background-color: rgba(229, 184, 169, .16); }

/* ============================================================================
   Buttons — the site's pill, at a size that suits a form
   ========================================================================= */

.btn {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .76rem;
  border-radius: 999px;
  border-width: 2px;
  padding: .55rem 1.25rem;
}
.btn-sm { font-size: .78rem; padding: .35rem .95rem; letter-spacing: .08em; }

.btn-dark {
  --bs-btn-bg: var(--wine);
  --bs-btn-border-color: var(--wine);
  --bs-btn-color: var(--cream);
  --bs-btn-hover-bg: var(--wine-deep);
  --bs-btn-hover-border-color: var(--wine-deep);
  --bs-btn-hover-color: var(--cream);
  --bs-btn-active-bg: var(--wine-deep);
  --bs-btn-active-border-color: var(--wine-deep);
  --bs-btn-disabled-bg: var(--wine);
  --bs-btn-disabled-border-color: var(--wine);
}

.btn-outline-dark {
  --bs-btn-color: var(--wine);
  --bs-btn-border-color: var(--wine);
  --bs-btn-hover-bg: var(--wine);
  --bs-btn-hover-border-color: var(--wine);
  --bs-btn-hover-color: var(--cream);
  --bs-btn-active-bg: var(--wine-deep);
  --bs-btn-active-border-color: var(--wine-deep);
}

.btn-outline-secondary {
  --bs-btn-color: var(--coffee);
  --bs-btn-border-color: rgba(42, 22, 18, .3);
  --bs-btn-hover-bg: var(--coffee);
  --bs-btn-hover-border-color: var(--coffee);
  --bs-btn-hover-color: var(--cream);
}

.btn-outline-danger {
  --bs-btn-color: #9b2c2c;
  --bs-btn-border-color: rgba(155, 44, 44, .5);
  --bs-btn-hover-bg: #9b2c2c;
  --bs-btn-hover-border-color: #9b2c2c;
}

/* Inline text buttons ("History", "Details") should read as links. */
.btn-link {
  text-transform: none;
  letter-spacing: 0;
  border: 0;
  font-weight: 600;
  color: var(--wine);
}

/* ============================================================================
   Focus

   One ring for everything, drawn as an outline so it can never be mistaken for
   a filled button. Bootstrap recolours a focused outline button to its hover
   state, which turned the label the same colour as the fill — that is undone
   here so the label stays readable while focused.
   ========================================================================= */

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
  box-shadow: none;
}

.btn-outline-dark:focus-visible,
.btn-outline-secondary:focus-visible,
.btn-outline-danger:focus-visible {
  background-color: transparent;
  color: var(--bs-btn-color);
  border-color: var(--bs-btn-border-color);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--terracotta-deep);
  box-shadow: 0 0 0 3px rgba(201, 143, 126, .4);
}

/* ============================================================================
   Forms
   ========================================================================= */

.form-label {
  font-weight: 600;
  font-size: .84rem;
  color: var(--wine-deep);
  margin-bottom: .3rem;
}
.form-control, .form-select {
  border-color: var(--admin-line);
  background-color: #fff;
  color: var(--coffee);
  border-radius: 4px;
}
.form-text { color: rgba(42, 22, 18, .6); font-size: .8rem; }

.form-check {
  min-height: 24px;
  padding-left: 2rem;
  display: flex;
  align-items: center;
  gap: .15rem;
}
/* 24px square: WCAG 2.2 target size (2.5.8) applies to the control itself. */
.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
}
.form-check-label { padding: .25rem 0; }

.form-check-input:checked {
  background-color: var(--wine);
  border-color: var(--wine);
}
.form-switch .form-check-input:focus { border-color: var(--terracotta-deep); }

/* ============================================================================
   Alerts and badges
   ========================================================================= */

.alert { border-radius: 6px; border-width: 1px; }
.alert-success {
  --bs-alert-bg: #e6f4ea;
  --bs-alert-border-color: #a9d5b8;
  --bs-alert-color: #1f5133;
}
.alert-warning {
  --bs-alert-bg: #fbf1d9;
  --bs-alert-border-color: var(--plywood, #d9b084);
  --bs-alert-color: #6b4a15;
}
.alert-info {
  --bs-alert-bg: #f7e6e0;
  --bs-alert-border-color: var(--terracotta);
  --bs-alert-color: #7a3b2c;
}
.alert-secondary {
  --bs-alert-bg: var(--cream-soft);
  --bs-alert-border-color: var(--admin-line);
  --bs-alert-color: var(--coffee);
}

.badge { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; padding: .35em .6em; }

/* ============================================================================
   Sign-in
   ========================================================================= */

.admin-login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--wine-deep);
  padding: 1.5rem;
}
.admin-login__card {
  width: 100%;
  max-width: 25rem;
  background: var(--admin-panel);
  border: 1px solid rgba(244, 236, 222, .18);
  border-radius: 8px;
}
.admin-login__logo {
  display: block;
  height: 52px;
  width: auto;
  margin: 0 auto 1.5rem;
}

/* The number on a styled error page — present but quiet. */
.admin-error__code {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--terracotta-deep);
  margin-bottom: .35rem;
}

/* ============================================================================
   Page editor
   ========================================================================= */

.admin-section-card__head { background: var(--cream-soft); }
.admin-section-card__head .btn-link { color: var(--wine-deep); font-weight: 700; }

.admin-block { border-top: 1px solid var(--admin-line); }
.admin-block:first-child { border-top: 0; }

/* ============================================================================
   Media library
   ========================================================================= */

.admin-media-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
/*
 * Several logos are white with a transparent background, which disappears
 * against a cream tile. A checkerboard shows both the artwork and where the
 * transparency is — the usual convention for an asset library.
 */
.admin-media-tile img {
  width: 100%;
  /* The width/height attributes are there to reserve space, but they also act
     as a specified height, which stops aspect-ratio applying. */
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-bottom: 1px solid var(--admin-line);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, rgba(42, 22, 18, .17) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(42, 22, 18, .17) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(42, 22, 18, .17) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(42, 22, 18, .17) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}


/* ============================================================================
   Pagination — Bootstrap's default is a blue that belongs to no other part of
   this admin, and the media library is the one screen that always shows it.
   ========================================================================= */

.pagination {
  --bs-pagination-color: var(--wine);
  --bs-pagination-bg: var(--admin-panel);
  --bs-pagination-border-color: var(--admin-line);
  --bs-pagination-hover-color: var(--cream);
  --bs-pagination-hover-bg: var(--wine);
  --bs-pagination-hover-border-color: var(--wine);
  --bs-pagination-focus-color: var(--wine-deep);
  --bs-pagination-focus-bg: var(--cream-soft);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--wine);
  --bs-pagination-active-border-color: var(--wine);
  --bs-pagination-active-color: var(--cream);
  --bs-pagination-disabled-color: rgba(42, 22, 18, .38);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: var(--admin-line);
  flex-wrap: wrap;
  gap: .25rem;
}
.page-link { border-radius: 4px; min-width: 2.5rem; min-height: 2.5rem; display: flex; align-items: center; justify-content: center; }

/* ============================================================================
   Media library
   ========================================================================= */

.admin-media-tile { overflow: hidden; }
/* Cards in a row stretch to the tallest; the button is pinned to the bottom so
   a filename that wraps does not knock the row out of alignment. */
.admin-media-tile .card-body {
  padding: .65rem .7rem .75rem;
  display: flex;
  flex-direction: column;
}
.admin-media-tile .card-body > .btn:first-of-type { margin-top: auto; }
.admin-media-tile__meta { margin-bottom: .55rem; }

/* The filename is what you scan for; everything else is supporting detail. */
.admin-media-tile__name {
  font-weight: 600;
  color: var(--wine-deep);
  font-size: .86rem;
  line-height: 1.3;
}
.admin-media-tile__meta {
  color: rgba(42, 22, 18, .58);
  font-size: .76rem;
  margin: .15rem 0 .55rem;
}

/* An image with no alt text is the one thing worth interrupting the grid for. */
.admin-media-tile--needs-alt { border-color: var(--terracotta-deep); }
.admin-media-tile__warning {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: #fbf1d9;
  color: #6b4a15;
  border: 1px solid rgba(217, 176, 132, .8);
  border-radius: 3px;
  padding: .15rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .5rem;
}

.admin-empty {
  border: 1px dashed var(--admin-line);
  border-radius: 6px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: rgba(42, 22, 18, .65);
  background: var(--admin-panel);
}
.admin-empty p { margin: 0 0 .35rem; }


/* ============================================================================
   Page editor — section cards
   ========================================================================= */

.admin-section-card__head { gap: .75rem; }

.admin-section-card__toggle {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .35rem 0;
  color: var(--wine-deep);
  min-height: 44px;
}
.admin-section-card__title { font-weight: 700; font-size: 1.02rem; }

.admin-caret {
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transition: transform .15s ease;
  flex: 0 0 auto;
}
[aria-expanded="true"] .admin-caret { transform: rotate(90deg); }

/* ============================================================================
   Image picker
   ========================================================================= */

.admin-media-field { display: flex; gap: .85rem; align-items: flex-start; }

.admin-media-field__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.admin-media-field__status { font-size: .82rem; color: rgba(42, 22, 18, .65); }
.admin-media-field__status.is-good { color: #1f5133; font-weight: 600; }
.admin-media-field__status.is-bad { color: #9b2c2c; font-weight: 600; }

/* The file input is hidden, so the label carries the focus ring. */
.admin-media-field__actions label:focus-within {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
}

/* The clickable box that holds the thumbnail. It carries the checkerboard and
   border the image used to; the image just fills it. */
.admin-media-field__zoom {
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  padding: 0;
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, rgba(42, 22, 18, .17) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(42, 22, 18, .17) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(42, 22, 18, .17) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(42, 22, 18, .17) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  transition: box-shadow .12s ease;
}
.admin-media-field__zoom:hover { box-shadow: 0 0 0 2px var(--terracotta-deep); }
.admin-media-field__zoom:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
}
.admin-media-field__preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The media library tiles enlarge the same way. */
.admin-media-tile__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.admin-media-tile__zoom::after {
  content: "⤢";
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(42, 22, 18, .62);
  color: #fff;
  font-size: .9rem;
  opacity: 0;
  transition: opacity .12s ease;
}
.admin-media-tile__zoom:hover::after,
.admin-media-tile__zoom:focus-visible::after { opacity: 1; }
.admin-media-tile__zoom:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: -3px;
}

/* ============================================================================
   Lightbox — view any admin image full size
   ========================================================================= */

.admin-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 10, 8, .86);
  animation: admin-lightbox-in .14s ease;
}
@keyframes admin-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
body.admin-lightbox-open { overflow: hidden; }

.admin-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: 100%;
  max-height: 100%;
}
.admin-lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: #fff;
}
.admin-lightbox__caption {
  color: rgba(244, 236, 222, .85);
  font-size: .9rem;
  text-align: center;
  word-break: break-word;
}
.admin-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 236, 222, .14);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.admin-lightbox__close:hover { background: rgba(244, 236, 222, .28); }
.admin-lightbox__close:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* ============================================================================
   Visitors
   ========================================================================= */

.admin-range { display: flex; flex-wrap: wrap; gap: .5rem; }

.admin-range__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .45rem 1rem;
  border: 1px solid var(--admin-line);
  border-radius: 999px;
  background: var(--admin-panel);
  color: var(--wine-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
}
.admin-range__link:hover { border-color: var(--wine); color: var(--wine); }
.admin-range__link.is-current {
  background: var(--wine);
  border-color: var(--wine);
  color: var(--cream);
}
.admin-range__link:focus-visible {
  outline: 3px solid var(--terracotta-deep);
  outline-offset: 2px;
}

/* Percentage change beside a headline number. */
.admin-delta { font-size: .78rem; font-weight: 600; }
.admin-delta.is-up { color: #1f5133; }
.admin-delta.is-down { color: #9b2c2c; }

/*
 * The day-by-day bars. Decorative — the same figures are listed underneath in
 * a <details>, so nothing here is the only way to reach the numbers.
 */
.admin-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-chart__bar {
  flex: 1 1 0;
  min-width: 3px;
  height: max(2px, var(--height));
  border-radius: 2px 2px 0 0;
  background: var(--wine);
}
.admin-chart__bar:hover { background: var(--terracotta-deep); }

.admin-plain-list { columns: 2; column-gap: 2rem; }
@media (max-width: 575.98px) { .admin-plain-list { columns: 1; } }

/* A thin proportional bar sitting beside a percentage in a table. */
.admin-share {
  display: inline-block;
  width: 68px;
  height: 6px;
  margin-right: .5rem;
  border-radius: 3px;
  background: rgba(107, 42, 38, .14);
  vertical-align: middle;
  overflow: hidden;
}
.admin-share > span {
  display: block;
  height: 100%;
  background: var(--wine);
}

/* ============================================================================
   Accessibility pass — measured at 375px against WCAG 2.2 AA
   ========================================================================= */

/*
 * Secondary text sat at roughly 4.4:1 on the cream background, just under the
 * 4.5:1 minimum. A little more ink clears it everywhere it is used.
 */
:root { --bs-secondary-color: rgba(42, 22, 18, .72); }

.text-body-secondary,
.form-text,
.admin-media-tile__meta { color: var(--bs-secondary-color) !important; }

/* Pagination shipped with Bootstrap's grey, which came out at 2.3:1. */
.pagination {
  --bs-pagination-color: var(--wine);
  --bs-pagination-hover-color: var(--wine-deep);
  --bs-pagination-disabled-color: rgba(42, 22, 18, .55);
  --bs-pagination-active-bg: var(--wine);
  --bs-pagination-active-border-color: var(--wine);
}

/*
 * Target size (WCAG 2.5.8). Small buttons were 16–21px tall, which is a poor
 * mark to hit on a phone; 24px is the minimum and roomier where there is space.
 */
.btn-sm {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sm.btn-link,
.admin-details-toggle {
  min-height: 1.5rem;
  padding-block: .25rem;
}

/* Inline links that act as controls need the same room. */
.form-text a,
.card-header a.small,
details > summary {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-block: .25rem;
}

details > summary { cursor: pointer; }

/*
 * Table headings and badges were under 12px. Small is fine for a label; too
 * small to read on a phone is not.
 */
.table > thead th { font-size: .8rem; }
.badge { font-size: .75rem; }

/*
 * Bootstrap colours links from --bs-link-color-rgb, not --bs-link-color, so
 * setting only the latter left every plain link the framework's default blue:
 * off-brand, and 3.5:1 against the cream card headers.
 */
:root {
  --bs-link-color-rgb: 107, 42, 38;
  --bs-link-hover-color-rgb: 74, 28, 25;
}

/* The muted colour above is for help text itself, never for a link inside it. */
.form-text a { color: var(--wine); }
.form-text a:hover { color: var(--wine-deep); }

.pagination { --bs-pagination-disabled-color: rgba(42, 22, 18, .72); }

/* ============================================================================
   Dashboard — visitors at a glance
   ========================================================================= */

.admin-insight__rail { background: var(--admin-panel); }
.admin-insight__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(42, 22, 18, .55);
  margin-bottom: .75rem;
}

/* A vertical divider between rail columns, but only once they sit side by side. */
@media (min-width: 768px) {
  .border-start-md { border-left: 1px solid var(--admin-line); }
}

/* Label + count with a slim proportional bar beneath — a compact bar chart. */
.admin-meter { margin-bottom: .7rem; }
.admin-meter:last-child { margin-bottom: 0; }
.admin-meter__row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9rem;
  margin-bottom: .25rem;
}
.admin-meter__row > span:first-child { min-width: 0; }
.admin-meter__bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(107, 42, 38, .12);
  overflow: hidden;
}
.admin-meter__bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--terracotta-deep), var(--wine));
}

/* ---- The SVG area chart ---- */
.admin-chart-svg { position: relative; margin: 0; }
.admin-chart-svg svg {
  display: block;
  width: 100%;
  height: 190px;
  overflow: visible;
}
.admin-chart-svg__grid {
  stroke: var(--admin-line);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.admin-chart-svg__line {
  stroke: var(--wine);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.admin-chart-svg__dot {
  fill: #fff;
  stroke: var(--wine);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: r .12s ease;
}
.admin-chart-svg__dot:hover { r: 5; fill: var(--wine); }

.admin-chart-svg__axis {
  position: relative;
  height: 1.2rem;
  margin-top: .35rem;
}
.admin-chart-svg__axis span {
  position: absolute;
  transform: translateX(-50%);
  font-size: .74rem;
  color: rgba(42, 22, 18, .6);
  white-space: nowrap;
}
.admin-chart-svg__axis span:first-child { transform: translateX(0); }
.admin-chart-svg__axis span:last-child { transform: translateX(-100%); }

/* Add-photos panel at the top of a gallery section. */
.admin-add-photos {
  background: var(--cream-soft);
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.15rem;
}